refactor: page data local key

5 years ago · 25b3d69041
8 changed files with 53 additions and 8 deletions
--- a/README.md
+++ b/README.md
@ -32,6 +32,16 @@
 目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
 然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值

+## 浏览器支持
+
+本地开发推荐使用`Chrome 80+` 浏览器
+
+支持现代浏览器, 不支持 IE
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |
+
 ### 提交规范

 - `feat` 增加新功能
--- a/preview/index.html
+++ b/preview/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>第二个页面</title>
+    <title>效果页</title>
  </head>
  <body>
    <div id="app"></div>
--- 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<RouteRecordRaw> = [
  {
@ -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
--- 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('当前没有可以预览的页面！')
    }
--- a/src/enums/index.ts
+++ 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'
+}
--- 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
--- 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({

 <style lang="scss" scoped>
 .custom-tree-node {
-  flex: 1;
  display: flex;
+  padding-right: 8px;
+  font-size: 14px;
+  flex: 1;
  align-items: center;
  justify-content: space-between;
-  font-size: 14px;
-  padding-right: 8px;
 }
 </style>
--- 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,