p12608597
/
vite-vue3-lowcode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: ✨路由缓存控制

This commit is contained in:
bqy_fe 2021-07-14 10:35:54 +08:00
parent 5da7d45e82
commit aa34c2f71b
23 changed files with 76 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.husky/pre-push
View File

@ -1,9 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run test
# npm run test

3
package.json
View File

@ -30,6 +30,7 @@
"element-plus": "1.0.2-beta.54",
"lodash": "^4.17.21",
"monaco-editor": "^0.25.2",
"nanoid": "^3.1.23",
"normalize.css": "^8.0.1",
"nprogress": "^1.0.0-1",
"qrcode": "^1.4.4",
@ -43,7 +44,7 @@
"devDependencies": {
"@commitlint/cli": "^12.1.4",
"@commitlint/config-conventional": "^12.1.4",
"@types/node": "^16.3.1",
"@types/node": "^16.3.2",
"@typescript-eslint/eslint-plugin": "^4.28.3",
"@typescript-eslint/parser": "^4.28.3",
"@vitejs/plugin-legacy": "^1.4.4",

26
preview/App.vue
View File

@ -7,6 +7,8 @@
</template>
<script lang="ts">
import { CacheEnum } from '@/enums'
import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils'
import { defineComponent, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
@ -15,14 +17,26 @@ export default defineComponent({
setup() {
const keepAliveRef = ref()
const route = useRoute()
const jsonData: VisualEditorModelValue = JSON.parse(
localStorage.getItem(CacheEnum.PAGE_DATA_KEY) as string
)
// 不需要缓存的页面
const notNeedcachePages = Object.keys(jsonData.pages).filter(
(key) => !jsonData.pages[key].config.keepAlive
)
console.log('notNeedcachePages:', notNeedcachePages)
watch(
() => route.fullPath,
() => {
// 获取keep-alive缓存
const routeCaches = keepAliveRef.value?.$?.__v_cache
console.log('keep-alive cache', routeCaches)
routeCaches.delete('/')
() => route.path,
(path) => {
if (notNeedcachePages.includes(path)) {
// 获取keep-alive缓存
const routeCaches = keepAliveRef.value?.$?.__v_cache
console.log('keep-alive cache', path, routeCaches)
// 从keep-alive的缓存中删除不需要缓存的路由
routeCaches.delete(path)
}
}
)

14
preview/views/preview.vue
View File

@ -1,9 +1,9 @@
<!--
* @Author: 卜启缘
* @Date: 2021-06-01 09:45:21
* @LastEditTime: 2021-07-12 10:22:26
* @LastEditTime: 2021-07-13 21:59:22
* @LastEditors: 卜启缘
* @Description:
* @Description: 效果预览页面
* @FilePath: \vite-vue3-lowcode\preview\views\preview.vue
-->
<template>
@ -15,19 +15,11 @@
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { Toast } from 'vant'
import { CacheEnum } from '@/enums'
import type { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils'
import SlotItem from './slot-item.vue'
import router from '../router'
import { CacheEnum } from '@/enums'
/**
* @name: preview
* @author: 卜启缘
* @date: 2021/4/29 23:09
* @description：preview
* @update: 2021/4/29 23:09
*/
export default defineComponent({
name: 'Preview',
components: {

4
preview/views/slot-item.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: 卜启缘
* @Date: 2021-06-12 22:18:48
* @LastEditTime: 2021-07-05 10:18:22
* @LastEditTime: 2021-07-14 10:17:34
* @LastEditors: 卜启缘
* @Description:
* @FilePath: \vite-vue3-lowcode\preview\views\slot-item.vue
@ -49,7 +49,7 @@ export default defineComponent({
}
},
setup(props) {
// 生成组件事件
// TODO 生成组件事件
const events = props.element.actions.reduce((prev, curr) => {
prev[curr.event] = async () => {
for (const handle of curr.handle) {

2
src/packages/base-widgets/checkbox/index.tsx
View File

@ -47,7 +47,7 @@ export default {
<Field
{...props}
modelValue={''}
name={Array.isArray(props.name) ? props.name?.pop() : props.name}
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
v-slots={{
input: () => (
<CheckboxGroup

2
src/packages/base-widgets/datetimePicker/index.tsx
View File

@ -53,7 +53,7 @@ export default {
readonly
clickable
onClick={() => (state.showPicker = true)}
name={Array.isArray(props.name) ? props.name?.pop() : props.name}
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
v-slots={{
input: () =>
state.text?.trim() == '' ? (

8
src/packages/base-widgets/input/index.tsx
View File

@ -1,7 +1,7 @@
/*
* @Author: 卜启缘
* @Date: 2021-05-04 05:36:58
* @LastEditTime: 2021-07-13 17:14:12
* @LastEditTime: 2021-07-14 10:31:10
* @LastEditors: 卜启缘
* @Description: 表单项类型 - 输入框
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\input\index.tsx
@ -18,7 +18,7 @@ export default {
preview: () => (
<Field name="用户名" label="用户名" labelWidth={50} colon placeholder="请输入用户名" />
),
render: ({ model, styles, block, props, custom }) => {
render: ({ styles, block, props }) => {
const { registerRef } = useGlobalProperties()
let rules = []
@ -30,11 +30,9 @@ export default {
<div style={styles}>
<Field
ref={(el) => registerRef(el, block._vid)}
{...custom}
{...props}
{...model.default}
v-model={props.modelValue}
name={Array.isArray(props.name) ? props.name?.pop() : props.name}
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
rules={rules}
/>
</div>

3
src/packages/base-widgets/picker/index.tsx
View File

@ -1,7 +1,7 @@
/*
* @Author: 卜启缘
* @Date: 2021-06-01 09:45:21
* @LastEditTime: 2021-07-13 20:20:59
* @LastEditTime: 2021-07-13 21:12:46
* @LastEditors: 卜启缘
* @Description: 表单项类型 - 选择器
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\picker\index.tsx
@ -97,7 +97,6 @@ export default {
{ label: '上海', value: 'shanghai' }
]
}),
valueKey: createEditorInputProp({ label: '选项对象的键名', defaultValue: 'label' }),
placeholder: createEditorInputProp({ label: '占位符', defaultValue: '请选择' }),
...createFieldProps()
},

2
src/packages/base-widgets/radio/index.tsx
View File

@ -35,7 +35,7 @@ export default {
<Field
{...props}
modelValue={''}
name={Array.isArray(props.name) ? props.name?.pop() : props.name}
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
v-slots={{
input: () => (
<RadioGroup

2
src/packages/base-widgets/rate/index.tsx
View File

@ -37,7 +37,7 @@ export default {
<Field
{...props}
modelValue={''}
name={Array.isArray(props.name) ? props.name?.pop() : props.name}
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
v-slots={{
input: () => (
<Rate

2
src/packages/base-widgets/slider/index.tsx
View File

@ -37,7 +37,7 @@ export default {
<Field
{...props}
modelValue={''}
name={Array.isArray(props.name) ? props.name?.pop() : props.name}
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
v-slots={{
input: () => (
<Slider

7
src/packages/base-widgets/stepper/index.tsx
View File

@ -1,7 +1,7 @@
/*
* @Author: 卜启缘
* @Date: 2021-06-01 09:45:21
* @LastEditTime: 2021-07-13 18:39:09
* @LastEditTime: 2021-07-14 10:32:21
* @LastEditors: 卜启缘
* @Description: '表单项类型 - 步进器
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\stepper\index.tsx
@ -17,6 +17,7 @@ import {
createEditorSelectProp,
createEditorModelBindProp
} from '@/visual-editor/visual-editor.props'
import { watchEffect } from 'vue'
export default {
key: 'stepper',
@ -33,7 +34,9 @@ export default {
render: ({ styles, block, props }) => {
const { registerRef } = useGlobalProperties()
props.name = Array.isArray(props.name) ? props.name?.pop() : props.name
watchEffect(() => {
props.name = Array.isArray(props.name) ? [...props.name].pop() : props.name
})
return () => (
<div style={styles}>

2
src/packages/base-widgets/switch/index.tsx
View File

@ -32,7 +32,7 @@ export default {
<Field
{...props}
modelValue={''}
name={Array.isArray(props.name) ? props.name?.pop() : props.name}
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
v-slots={{
input: () => (
<Switch

4
src/visual-editor/components/left-aside/components/data-source/data-fetch.vue
View File

@ -65,7 +65,7 @@ import { useVisualData } from '@/visual-editor/hooks/useVisualData'
import type { FetchApiItem, VisualEditorModel } from '@/visual-editor/visual-editor.utils'
import { useModal } from '@/visual-editor/hooks/useModal'
import { cloneDeep } from 'lodash'
import { generateUUID } from '@/visual-editor/utils/'
import { generateNanoid } from '@/visual-editor/utils/'
import { RequestEnum, ContentTypeEnum } from '@/enums/httpEnum'
import { useImportSwaggerJsonModal } from './utils'
@ -95,7 +95,7 @@ const isEdit = computed(() => apis.value.some((item) => item.key == state.ruleFo
* @description 创建空的数据接口对象
*/
const createEmptyApiItem = (): FetchApiItem => ({
key: generateUUID(),
key: generateNanoid(),
name: '',
options: {
url: '', // 请求的url

4
src/visual-editor/components/left-aside/components/data-source/data-model.vue
View File

@ -60,7 +60,7 @@ import { useVisualData, fieldTypes } from '@/visual-editor/hooks/useVisualData'
import type { VisualEditorModel } from '@/visual-editor/visual-editor.utils'
import { useModal } from '@/visual-editor/hooks/useModal'
import { cloneDeep } from 'lodash'
import { generateUUID } from '@/visual-editor/utils/'
import { generateNanoid } from '@/visual-editor/utils/'
import { useImportSwaggerJsonModal } from './utils'
interface IState {
@ -91,7 +91,7 @@ const createEmptyEntity = () => ({ key: '', name: '', type: 'string', value: ''
*/
const createEmptyModel = () => ({
name: '',
key: generateUUID(),
key: generateNanoid(),
entitys: [createEmptyEntity()]
})

6
src/visual-editor/components/left-aside/components/data-source/utils.tsx
View File

@ -6,7 +6,7 @@
* @Description:
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\left-aside\components\data-source\utils.tsx
*/
import { generateUUID } from '@/visual-editor/utils'
import { generateNanoid } from '@/visual-editor/utils'
import type { FetchApiItem } from '@/visual-editor/visual-editor.utils'
import { RequestEnum } from '@/enums/httpEnum'
import MonacoEditor from '@/visual-editor/components/common/monaco-editor/MonacoEditor'
@ -27,7 +27,7 @@ export const importSwaggerJson = (swagger: any) => {
const properties = swagger.definitions[model].properties
const modelItem: VisualEditorModel = {
name: model,
key: generateUUID(),
key: generateNanoid(),
entitys: []
}
Object.keys(properties).forEach((field) => {
@ -48,7 +48,7 @@ export const importSwaggerJson = (swagger: any) => {
const bindTarget = model ? models.find((item) => item.name == model) : undefined
typeof bindTarget == 'object' && (bindTarget.name = apiUrlObj.summary)
const api: FetchApiItem = {
key: generateUUID(),
key: generateNanoid(),
name: apiUrlObj.summary,
options: {
url: url, // 请求的url

6
src/visual-editor/components/right-attribute-panel/components/event-action/index.tsx
View File

@ -22,7 +22,7 @@ import {
ElPopconfirm
} from 'element-plus'
import type { Action } from '@/visual-editor/visual-editor.utils'
import { generateUUID } from '@/visual-editor/utils/'
import { generateNanoid } from '@/visual-editor/utils/'
import { useModal } from '@/visual-editor/hooks/useModal'
import { cloneDeep } from 'lodash'
@ -34,7 +34,7 @@ interface IState {
* @description 创建一个空的动作处理对象
*/
const createEmptyActionHandle = () => ({
key: generateUUID(),
key: generateNanoid(),
name: '',
link: []
})
@ -43,7 +43,7 @@ const createEmptyActionHandle = () => ({
* @description 新增一个空的事件
*/
const createEmptyAction = (): Action => ({
key: generateUUID(),
key: generateNanoid(),
name: '',
event: '',
handle: [createEmptyActionHandle()]

7
src/visual-editor/components/right-attribute-panel/components/page-setting/pageSetting.tsx
View File

@ -1,13 +1,13 @@
/*
* @Author: 卜启缘
* @Date: 2021-06-13 22:07:29
* @LastEditTime: 2021-06-24 17:42:31
* @LastEditTime: 2021-07-13 21:25:59
* @LastEditors: 卜启缘
* @Description: 当前页面配置
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\page-setting\pageSetting.tsx
*/
import { defineComponent } from 'vue'
import { ElForm, ElFormItem, ElInput, ElUpload, ElColorPicker } from 'element-plus'
import { ElForm, ElFormItem, ElInput, ElUpload, ElColorPicker, ElSwitch } from 'element-plus'
import styles from './styles.module.scss'
import { useVisualData } from '@/visual-editor/hooks/useVisualData'
@ -29,6 +29,9 @@ export const PageSetting = defineComponent({
return () => (
<>
<ElForm>
<ElFormItem label="路由切换时缓存本页面">
<ElSwitch v-model={pageConfig.keepAlive} />
</ElFormItem>
<ElFormItem label="背景颜色">
<ElColorPicker v-model={pageConfig.bgColor} />
</ElFormItem>

6
src/visual-editor/hooks/useVisualData.ts
View File

@ -5,7 +5,8 @@
* @description：useVisualData
* @update: 2021/5/6 11:59
*/
import { reactive, inject, readonly, computed, watch, InjectionKey } from 'vue'
import { reactive, inject, readonly, computed, watch } from 'vue'
import type { InjectionKey } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type {
VisualEditorModelValue,
@ -38,7 +39,8 @@ export const createNewPage = ({ title = '新页面', path = '/' }) => ({
path,
config: {
bgColor: '',
bgImage: ''
bgImage: '',
keepAlive: false
},
blocks: []
})

19
src/visual-editor/utils/index.ts
View File

@ -1,11 +1,12 @@
/*
* @Author: 卜启缘
* @Date: 2021-06-01 09:45:21
* @LastEditTime: 2021-06-24 21:57:31
* @LastEditTime: 2021-07-14 09:09:02
* @LastEditors: 卜启缘
* @Description: 公用的工具函数
* @FilePath: \vite-vue3-lowcode\src\visual-editor\utils\index.ts
*/
import { customAlphabet } from 'nanoid'
/**
* @description 部署应用时的基本URL
@ -13,18 +14,6 @@
export const BASE_URL = import.meta.env.BASE_URL
/**
* @description 生成UUID
* @param {boolean} [noSymbol=false] 是否需要 - 分隔符
* @returns {string}
* @description 生成nanoid
*/
export function generateUUID(noSymbol = false) {
let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = (Math.random() * 16) | 0,
v = c == 'x' ? r : (r & 0x3) | 0x8
return v.toString(16)
})
if (noSymbol) {
uuid = uuid.replace(/-/g, '')
}
return uuid
}
export const generateNanoid = customAlphabet('1234567890abcdef', 10)

6
src/visual-editor/visual-editor.utils.ts
View File

@ -3,6 +3,7 @@ import { inject, provide } from 'vue'
import type { CSSProperties } from 'vue'
import { useDotProp } from '@/visual-editor/hooks/useDotProp'
import type { RequestEnum, ContentTypeEnum } from '@/enums/httpEnum'
import { generateNanoid } from '@/visual-editor/utils'
/**
* @description 组件属性
@ -70,6 +71,8 @@ export interface PageConfig {
bgImage: string
/** 背景颜色 */
bgColor: string
/** 是否缓存当前页面 */
keepAlive: boolean
}
/**
* @description 页面对象
@ -224,9 +227,8 @@ export interface VisualEditorMarkLines {
}
export function createNewBlock(component: VisualEditorComponent): VisualEditorBlockData {
const cid = parseInt(`${Date.now() * Math.random()}`)
return {
_vid: `vid_${cid}`,
_vid: `vid_${generateNanoid()}`,
moduleName: component.moduleName,
componentKey: component!.key,
label: component!.label,

7
yarn.lock
View File

@ -676,11 +676,16 @@
resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
"@types/node@*", "@types/node@^16.3.1":
"@types/node@*":
version "16.3.1"
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.1.tgz#24691fa2b0c3ec8c0d34bfcfd495edac5593ebb4"
integrity sha512-N87VuQi7HEeRJkhzovao/JviiqKjDKMVKxKMfUvSKw+MbkbW8R0nA3fi/MQhhlxV2fQ+2ReM+/Nt4efdrJx3zA==
"@types/node@^16.3.2":
version "16.3.2"
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.2.tgz#655432817f83b51ac869c2d51dd8305fb8342e16"
integrity sha512-jJs9ErFLP403I+hMLGnqDRWT0RYKSvArxuBVh2veudHV7ifEC1WAmjJADacZ7mRbA2nWgHtn8xyECMAot0SkAw==
"@types/normalize-package-data@^2.4.0":
version "2.4.1"
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"