From 25b3d690411b095c4bb119eaa9d0a0234af4eac7 Mon Sep 17 00:00:00 2001 From: bqy_fe <1743369777@qq.com> Date: Thu, 27 May 2021 23:44:56 +0800 Subject: [PATCH] refactor: page data local key --- README.md | 10 ++++++++++ preview/index.html | 2 +- preview/router.ts | 12 ++++++++++++ preview/views/preview.vue | 6 +++++- src/enums/index.ts | 14 ++++++++++++++ src/packages/container-component/index.ts | 2 +- .../left-aside/components/page-tree/index.vue | 10 +++++++--- src/visual-editor/hooks/useVisualData.ts | 5 +++-- 8 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 src/enums/index.ts diff --git a/README.md b/README.md index 3c90b6f..8c2b916 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,16 @@ 目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内， 然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值 +## 浏览器支持 + +本地开发推荐使用`Chrome 80+` 浏览器 + +支持现代浏览器, 不支持 IE + +| [ Edge](http://godban.github.io/browsers-support-badges/)
IE | [ Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | +| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | +| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions | + ### 提交规范 - `feat` 增加新功能 diff --git a/preview/index.html b/preview/index.html index 8c4c13e..f7f61dd 100644 --- a/preview/index.html +++ b/preview/index.html @@ -4,7 +4,7 @@ - 第二个页面 + 效果页
diff --git a/preview/router.ts b/preview/router.ts index 59168d0..c2b789c 100644 --- a/preview/router.ts +++ b/preview/router.ts @@ -1,4 +1,6 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' +import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils' +import { CacheEnum } from '@/enums' const routes: Array = [ { @@ -12,4 +14,14 @@ const router = createRouter({ routes }) +// 获取本地缓存的页面数据 +const jsonData: VisualEditorModelValue = JSON.parse( + localStorage.getItem(CacheEnum.PAGE_DATA_KEY) as string +) + +router.beforeEach((to) => { + document.title = jsonData?.pages?.[to.path]?.title ?? document.title + return true +}) + export default router diff --git a/preview/views/preview.vue b/preview/views/preview.vue index 07e6a4c..284b4d9 100644 --- a/preview/views/preview.vue +++ b/preview/views/preview.vue @@ -8,6 +8,7 @@ import { defineComponent, reactive, toRefs } from 'vue' import { Toast } from 'vant' import { visualConfig } from '@/visual.config' +import { CacheEnum } from '@/enums' import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils' import SlotItem from './slot-item.vue' import router from '../router' @@ -25,7 +26,10 @@ export default defineComponent({ SlotItem }, setup() { - const jsonData: VisualEditorModelValue = JSON.parse(localStorage.getItem('jsonData') as string) + const jsonData: VisualEditorModelValue = JSON.parse( + localStorage.getItem(CacheEnum.PAGE_DATA_KEY) as string + ) + if (!jsonData || !Object.keys(jsonData.pages)) { Toast.fail('当前没有可以预览的页面！') } diff --git a/src/enums/index.ts b/src/enums/index.ts new file mode 100644 index 0000000..1666432 --- /dev/null +++ b/src/enums/index.ts @@ -0,0 +1,14 @@ +/** + * @name: index + * @author: 卜启缘 + * @date: 2021/5/26 22:55 + * @description：常用的枚举类型 + * @update: 2021/5/26 22:55 + */ + +/** + * @description 本地缓存枚举 + */ +export enum CacheEnum { + PAGE_DATA_KEY = 'PAGE_DATA_KEY' +} diff --git a/src/packages/container-component/index.ts b/src/packages/container-component/index.ts index 5b84961..2d88646 100644 --- a/src/packages/container-component/index.ts +++ b/src/packages/container-component/index.ts @@ -7,5 +7,5 @@ Object.keys(modules).forEach((key: string) => { components[name] = modules[key]?.default || modules[key] }) -console.log(components, 'base-widgets') +console.log(components, 'container-component') export default components diff --git a/src/visual-editor/components/left-aside/components/page-tree/index.vue b/src/visual-editor/components/left-aside/components/page-tree/index.vue index 7cac293..0a85d9a 100644 --- a/src/visual-editor/components/left-aside/components/page-tree/index.vue +++ b/src/visual-editor/components/left-aside/components/page-tree/index.vue @@ -68,6 +68,7 @@ import { defineComponent, reactive, computed, toRefs } from 'vue' import { useVisualData } from '@/visual-editor/hooks/useVisualData' import { useRouter, useRoute } from 'vue-router' +import { ElMessage } from 'element-plus' export default defineComponent({ name: 'PageTree', @@ -137,6 +138,9 @@ export default defineComponent({ // 新增或编辑页面 const onSubmit = async () => { const { title, path } = state.form + if (title.trim() == '' || path.trim() == '') { + return ElMessage.error('标题或路径不能为空！') + } if (state.operatePageData) { updatePage({ newPath: path, oldPath: state.operatePageData.path || path, page: { title } }) await router.replace(path) @@ -164,11 +168,11 @@ export default defineComponent({ diff --git a/src/visual-editor/hooks/useVisualData.ts b/src/visual-editor/hooks/useVisualData.ts index 68cd4e6..8a32779 100644 --- a/src/visual-editor/hooks/useVisualData.ts +++ b/src/visual-editor/hooks/useVisualData.ts @@ -15,9 +15,10 @@ import { } from '@/visual-editor/visual-editor.utils' import { visualConfig } from '@/visual.config' +import { CacheEnum } from '@/enums' // 保存到本地JSON数据的key -export const localKey = 'jsonData' +export const localKey = CacheEnum.PAGE_DATA_KEY // 注入jsonData的key export const injectKey = Symbol('injectKey') @@ -41,7 +42,7 @@ export interface VisualData { export const initVisualData = (): VisualData => { const jsonData: VisualEditorModelValue = JSON.parse( - sessionStorage.getItem('jsonData') as string + sessionStorage.getItem(localKey) as string ) || { container: { width: 360,