fix: 优化在线编辑JSON的代码和交互

src/plugins/icon.ts

@@ -27,6 +27,7 @@ import {
   LockClosedOutline as LockClosedOutlineIcon,
   HelpCircleOutline as HelpOutlineIcon,
   CodeSlash as CodeSlashIcon,
+  Create as CreateIcon,
   Rocket as RocketIcon,
   Duplicate as DuplicateIcon,
   DuplicateOutline as DuplicateOutlineIcon,
@@ -106,6 +107,8 @@ const ionicons5 = {
   DuplicateOutlineIcon,
   // 代码
   CodeSlashIcon,
+  // 修改代码
+  CreateIcon,
   // 事件(火箭)
   RocketIcon,
   // 退出

src/settings/designSetting.ts

@@ -55,6 +55,9 @@ export const backgroundImageSize = 5
 // 预览展示方式
 export const previewScaleType = PreviewScaleEnum.FIT
 
+// 编辑工作台同步到 JSON 的轮询间隔（5S）
+export const editToJsonInterval = 5000
+
 // 数据请求间隔
 export const requestInterval = 30
 

src/views/chart/ContentEdit/components/EditBottom/index.vue

@@ -135,9 +135,11 @@ watchEffect(() => {
 
 <style lang="scss" scoped>
 $min-width: 500px;
+$max-width: 670px;
 @include go('edit-bottom') {
   width: 100%;
   min-width: $min-width;
+  min-width: $max-width;
   padding: 0 10px;
   display: flex;
   align-items: center;

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -7,7 +7,11 @@
     @mouseleave="toolsMouseoutHandle"
   >
     <!-- PawIcon -->
-    <n-icon v-show="settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE && isMiniComputed " class="asideLogo" size="22">
+    <n-icon
+      v-show="settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE && isMiniComputed"
+      class="asideLogo"
+      size="22"
+    >
       <PawIcon></PawIcon>
     </n-icon>
 
@@ -63,6 +67,7 @@ import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
+import { editToJsonInterval } from '@/settings/designSetting'
 import { EditEnum, ChartEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { useRoute } from 'vue-router'
@@ -74,25 +79,79 @@ import { useFile } from './hooks/useFile.hooks'
 import { BtnListType, TypeEnum } from './index.d'
 import { icon } from '@/plugins'
 
-const { DownloadIcon, ShareIcon, PawIcon, SettingsSharpIcon, CodeSlashIcon } = icon.ionicons5
+const { DownloadIcon, ShareIcon, PawIcon, SettingsSharpIcon, CreateIcon } = icon.ionicons5
 const settingStore = useSettingStore()
 const chartEditStore = useChartEditStore()
 const routerParamsInfo = useRoute()
 const { updateComponent } = useSync()
 
-// 编辑
+// 鼠标悬停定时器
+let mouseTime: any = null
+// 系统设置 model
+const globalSettingModel = ref(false)
+// 最小化
+const isMini = ref<boolean>(true)
+// 控制 tootip 提示时机
+const asideTootipDis = ref(true)
+// 文件上传
+const { importUploadFileListRef, importCustomRequest, importBeforeUpload } = useFile()
+
+// 是否是侧边栏
+const isAside = computed(() => settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE)
+
+// 是否隐藏（悬浮展示）
+const isHide = computed(() => settingStore.getChartToolsStatusHide)
+
+// 是否展示最小化（与全局配置相关）
+const isMiniComputed = computed(() => isMini.value && isHide.value)
+
+// 页面渲染配置
+const btnListComputed = computed(() => {
+  if (!isAside.value) return btnList
+  const reverseArr: BtnListType[] = []
+  btnList.map(item => {
+    reverseArr.unshift(item)
+  })
+  return reverseArr
+})
+
+// 鼠标移入
+const toolsMouseoverHandle = () => {
+  mouseTime = setTimeout(() => {
+    if (isMini.value) {
+      isMini.value = false
+      asideTootipDis.value = true
+    }
+  }, 200)
+  setTimeout(() => {
+    asideTootipDis.value = false
+  }, 400)
+}
+
+// 鼠标移出
+const toolsMouseoutHandle = () => {
+  clearTimeout(mouseTime)
+  if (!isMini.value) {
+    isMini.value = true
+  }
+}
+
+// 编辑处理
 const editHandle = () => {
-  // 获取id路径
-  const path = fetchPathByName(EditEnum.CHART_EDIT_NAME, 'href')
-  if (!path) return
-  let { id } = routerParamsInfo.params as any
-  id = typeof id === 'string' ? id : id[0]
-  updateToSession(id)
-  routerTurnByPath(path, [id], undefined, true)
+  window['$message'].warning('将开启失焦更新与 5 秒同步更新！')
+  setTimeout(() => {
+    // 获取id路径
+    const path = fetchPathByName(EditEnum.CHART_EDIT_NAME, 'href')
+    if (!path) return
+    let { id } = routerParamsInfo.params as any
+    id = typeof id === 'string' ? id : id[0]
+    updateToSession(id)
+    routerTurnByPath(path, [id], undefined, true)
+  }, 1000)
 }
 
 // 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据
-function updateToSession(id: string) {
+const updateToSession = (id: string) => {
   const storageInfo = chartEditStore.getStorageInfo
   const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
 
@@ -103,7 +162,7 @@ function updateToSession(id: string) {
       sessionStorageInfo.splice(repeateIndex, 1, { ...storageInfo, id })
       setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
     } else {
-      sessionStorageInfo.push({ ...storageInfo, id})
+      sessionStorageInfo.push({ ...storageInfo, id })
       setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
     }
   } else {
@@ -111,23 +170,24 @@ function updateToSession(id: string) {
   }
 }
 
-function useSyncUpdate() {
+// 侦听器更新
+const useSyncUpdate = () => {
   // 定义侦听器变量
-  let timer: any;
+  let timer: any
   const updateFn = (e: any) => updateComponent(e!.detail, true, false)
   const syncData = () => {
     if (routerParamsInfo.name == ChartEnum.CHART_HOME_NAME) {
       dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
     }
   }
-  
+
   // 开启侦听
   const use = () => {
     // 1、定时同步数据
     timer = setInterval(() => {
       // 窗口激活并且处于工作台
       document.hasFocus() && syncData()
-    }, 5000)
+    }, editToJsonInterval)
     // 2、失焦同步数据
     addEventListener('blur', syncData)
 
@@ -154,22 +214,8 @@ function useSyncUpdate() {
   return watchHandler
 }
 
-watch(
-  () => routerParamsInfo.name,
-  useSyncUpdate(),
-  { immediate: true }
-)
+watch(() => routerParamsInfo.name, useSyncUpdate(), { immediate: true })
 
-// 鼠标悬停定时器
-let mouseTime: any = null
-// 系统设置 model
-const globalSettingModel = ref(false)
-// 最小化
-const isMini = ref<boolean>(true)
-// 控制 tootip 提示时机
-const asideTootipDis = ref(true)
-// 文件上传
-const { importUploadFileListRef, importCustomRequest, importBeforeUpload } = useFile()
 // 配置列表
 const btnList: BtnListType[] = [
   {
@@ -189,7 +235,7 @@ const btnList: BtnListType[] = [
     key: 'edit',
     type: TypeEnum.BUTTON,
     name: '编辑JSON',
-    icon: CodeSlashIcon,
+    icon: CreateIcon,
     handle: editHandle
   },
   {
@@ -202,43 +248,6 @@ const btnList: BtnListType[] = [
     }
   }
 ]
-
-// 是否是侧边栏
-const isAside = computed(() => settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE)
-// 是否隐藏（悬浮展示）
-const isHide = computed(() => settingStore.getChartToolsStatusHide)
-// 是否展示最小化（与全局配置相关）
-const isMiniComputed = computed(() => isMini.value && isHide.value)
-// 页面渲染配置
-const btnListComputed = computed(() => {
-  if (!isAside.value) return btnList
-  const reverseArr: BtnListType[] = []
-  btnList.map(item => {
-    reverseArr.unshift(item)
-  })
-  return reverseArr
-})
-
-// 鼠标移入
-const toolsMouseoverHandle = () => {
-  mouseTime = setTimeout(() => {
-    if (isMini.value) {
-      isMini.value = false
-      asideTootipDis.value = true
-    }
-  }, 200)
-  setTimeout(() => {
-    asideTootipDis.value = false
-  }, 400)
-}
-
-// 鼠标移出
-const toolsMouseoutHandle = () => {
-  clearTimeout(mouseTime)
-  if (!isMini.value) {
-    isMini.value = true
-  }
-}
 </script>
 
 <style lang="scss" scoped>

src/views/edit/index.vue

@@ -12,16 +12,11 @@
             </template>
             导入
           </n-button>
-          <n-button class="go-mr-4" size="medium" @click="back">
-            <template #icon>
-              <n-icon>
-                <chevron-back-outline-icon></chevron-back-outline-icon>
-              </n-icon>
-            </template>
-            返回工作台
-          </n-button>
         </div>
-        <n-tag :bordered="false" type="warning"> 「按 ctrl + s 保存/更新」 </n-tag>
+        <n-space>
+          <n-tag :bordered="false" type="warning"> 「页面失焦保存」 </n-tag>
+          <n-tag :bordered="false" type="warning"> 「ctrl + s 保存」 </n-tag>
+        </n-space>
       </n-layout-header>
       <n-layout-content>
         <monaco-editor