feat: ✨路由缓存控制

.husky/pre-push

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

package.json

@@ -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",

preview/App.vue

@@ -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,
+      () => route.path,
-      () => {
+      (path) => {
-        // 获取keep-alive缓存
+        if (notNeedcachePages.includes(path)) {
-        const routeCaches = keepAliveRef.value?.$?.__v_cache
+          // 获取keep-alive缓存
-        console.log('keep-alive cache', routeCaches)
+          const routeCaches = keepAliveRef.value?.$?.__v_cache
-        routeCaches.delete('/')
+          console.log('keep-alive cache', path, routeCaches)
+          // 从keep-alive的缓存中删除不需要缓存的路由
+          routeCaches.delete(path)
+        }
       }
     )
 

preview/views/preview.vue

@@ -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: {

preview/views/slot-item.vue

@@ -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) {

src/packages/base-widgets/checkbox/index.tsx

@@ -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

src/packages/base-widgets/datetimePicker/index.tsx

@@ -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() == '' ? (

src/packages/base-widgets/input/index.tsx

@@ -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>

src/packages/base-widgets/picker/index.tsx

@@ -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()
   },

src/packages/base-widgets/radio/index.tsx

@@ -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

src/packages/base-widgets/rate/index.tsx

@@ -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

src/packages/base-widgets/slider/index.tsx

@@ -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

src/packages/base-widgets/stepper/index.tsx

@@ -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}>

src/packages/base-widgets/switch/index.tsx

@@ -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

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

@@ -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

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

@@ -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()]
 })
 

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

@@ -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

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

@@ -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()]

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

@@ -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>

src/visual-editor/hooks/useVisualData.ts

@@ -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: []
 })

src/visual-editor/utils/index.ts

@@ -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
+ * @description 生成nanoid
- * @param {boolean} [noSymbol=false] 是否需要 - 分隔符
- * @returns {string}
  */
-export function generateUUID(noSymbol = false) {
+export const generateNanoid = customAlphabet('1234567890abcdef', 10)
-  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
-}

src/visual-editor/visual-editor.utils.ts

@@ -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,

yarn.lock

@@ -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"