fix: 🐛 import page & project

components.d.ts

@@ -1,38 +1,38 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core';
+import '@vue/runtime-core'
 
-export {};
+export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    ElAside: typeof import('element-plus/es')['ElAside'];
+    ElAside: typeof import('element-plus/es')['ElAside']
-    ElButton: typeof import('element-plus/es')['ElButton'];
+    ElButton: typeof import('element-plus/es')['ElButton']
-    ElCol: typeof import('element-plus/es')['ElCol'];
+    ElCol: typeof import('element-plus/es')['ElCol']
-    ElCollapse: typeof import('element-plus/es')['ElCollapse'];
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
-    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'];
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
-    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'];
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElContainer: typeof import('element-plus/es')['ElContainer'];
+    ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDialog: typeof import('element-plus/es')['ElDialog'];
+    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown'];
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'];
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'];
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElHeader: typeof import('element-plus/es')['ElHeader'];
+    ElHeader: typeof import('element-plus/es')['ElHeader']
-    ElIcon: typeof import('element-plus/es')['ElIcon'];
+    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElMain: typeof import('element-plus/es')['ElMain'];
+    ElMain: typeof import('element-plus/es')['ElMain']
-    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'];
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
-    ElPopover: typeof import('element-plus/es')['ElPopover'];
+    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRow: typeof import('element-plus/es')['ElRow'];
+    ElRow: typeof import('element-plus/es')['ElRow']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane'];
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs'];
+    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag'];
+    ElTag: typeof import('element-plus/es')['ElTag']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip'];
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree'];
+    ElTree: typeof import('element-plus/es')['ElTree']
-    RouterLink: typeof import('vue-router')['RouterLink'];
+    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView'];
+    RouterView: typeof import('vue-router')['RouterView']
   }
   export interface ComponentCustomProperties {
-    vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'];
+    vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
   }
 }

src/App.vue

@@ -9,16 +9,16 @@
 <script setup lang="ts">
   import { provide } from 'vue';
   import zhCn from 'element-plus/lib/locale/lang/zh-cn';
-  import { initVisualData, injectKey, localKey } from '@/visual-editor/hooks/useVisualData';
+  import { initVisualData, injectKey } from '@/visual-editor/hooks/useVisualData';
 
   const visualData = initVisualData();
   // 注入可视化编辑器所有配置
   provide(injectKey, visualData);
 
-  const { jsonData } = visualData;
+  const { saveChanges } = visualData;
 
   window.addEventListener('beforeunload', () => {
-    sessionStorage.setItem(localKey, JSON.stringify(jsonData));
+    saveChanges();
   });
 </script>
 

src/visual-editor/hooks/useVisualData.ts

@@ -99,16 +99,26 @@ export const initVisualData = () => {
     (url) => setCurrentPage(url),
   );
 
+  watch(
+    () => state.jsonData,
+    () => {
+      state.currentPage = state.jsonData.pages[route.path];
+    },
+  );
+
   // 更新page
   const updatePage = ({ newPath = '', oldPath, page }) => {
-    console.log(state.jsonData.pages[oldPath], page);
+    // console.log(state.jsonData.pages[oldPath], page.pages['/']);
     if (newPath && newPath != oldPath) {
       page.path = newPath;
       // 如果传了新的路径，则认为是修改页面路由
-      state.jsonData.pages[getPrefixPath(newPath)] = { ...state.jsonData.pages[oldPath], ...page };
+      state.jsonData.pages[getPrefixPath(newPath)] = {
+        ...state.jsonData.pages[oldPath],
+        ...page.pages[newPath],
+      };
       deletePage(oldPath, getPrefixPath(newPath));
     } else {
-      Object.assign(state.jsonData.pages[oldPath], page);
+      Object.assign(state.jsonData.pages[oldPath], page.pages[oldPath]);
     }
   };
   // 添加page
@@ -220,6 +230,10 @@ export const initVisualData = () => {
     state.jsonData = typeof jsonData === 'string' ? JSON.parse(jsonData) : jsonData;
   };
 
+  const saveChanges = () => {
+    sessionStorage.setItem(localKey, JSON.stringify(state.jsonData));
+  };
+
   return {
     visualConfig,
     jsonData: readonly(state.jsonData), // 保护JSONData避免直接修改
@@ -238,6 +252,7 @@ export const initVisualData = () => {
     incrementPage,
     deletePage,
     updatePageBlock,
+    saveChanges,
   };
 };