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

2025-02-24 16:22:57 +08:00 · 2022-10-27 21:10:58 +08:00 · 2022-10-27 21:10:58 +08:00 · 809d72de2a
commit 809d72de2a
parent 71fafe2cac
5 changed files with 135 additions and 123 deletions
--- a/src/plugins/icon.ts
+++ b/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,
  // 退出
--- a/src/settings/designSetting.ts
+++ b/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

--- a/src/views/chart/ContentEdit/components/EditBottom/index.vue
+++ b/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;
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/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,92 +79,12 @@ 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()

-// 编辑
-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)
-}
-
-// 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据
-function updateToSession(id: string) {
-  const storageInfo = chartEditStore.getStorageInfo
-  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
-
-  if (sessionStorageInfo?.length) {
-    const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === id)
-    // 重复替换
-    if (repeateIndex !== -1) {
-      sessionStorageInfo.splice(repeateIndex, 1, { ...storageInfo, id })
-      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
-    } else {
-      sessionStorageInfo.push({ ...storageInfo, id})
-      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
-    }
-  } else {
-    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...storageInfo, id }])
-  }
-}
-
-function useSyncUpdate() {
-  // 定义侦听器变量
-  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)
-    // 2、失焦同步数据
-    addEventListener('blur', syncData)
-
-    // 【监听JSON代码 刷新工作台图表】
-    addEventListener(SavePageEnum.JSON, updateFn)
-  }
-
-  // 关闭侦听
-  const unUse = () => {
-    clearInterval(timer)
-    removeEventListener(SavePageEnum.JSON, updateFn)
-    removeEventListener('blur', syncData)
-  }
-
-  // 路由变更时处理
-  const watchHandler = (toName: any, fromName: any) => {
-    if (fromName == ChartEnum.CHART_HOME_NAME) {
-      unUse()
-    }
-    if (toName == ChartEnum.CHART_HOME_NAME) {
-      use()
-    }
-  }
-  return watchHandler
-}
-
-watch(
-  () => routerParamsInfo.name,
-  useSyncUpdate(),
-  { immediate: true }
-)
-
 // 鼠标悬停定时器
 let mouseTime: any = null
 // 系统设置 model
@ -170,45 +95,16 @@ const isMini = ref<boolean>(true)
 const asideTootipDis = ref(true)
 // 文件上传
 const { importUploadFileListRef, importCustomRequest, importBeforeUpload } = useFile()
-// 配置列表
-const btnList: BtnListType[] = [
-  {
-    key: 'export',
-    type: TypeEnum.BUTTON,
-    name: '导出',
-    icon: ShareIcon,
-    handle: exportHandle
-  },
-  {
-    key: 'import',
-    type: TypeEnum.IMPORTUPLOAD,
-    name: '导入',
-    icon: DownloadIcon
-  },
-  {
-    key: 'edit',
-    type: TypeEnum.BUTTON,
-    name: '编辑JSON',
-    icon: CodeSlashIcon,
-    handle: editHandle
-  },
-  {
-    key: 'setting',
-    type: TypeEnum.BUTTON,
-    name: '设置',
-    icon: SettingsSharpIcon,
-    handle: () => {
-      globalSettingModel.value = true
-    }
-  }
-]

 // 是否是侧边栏
 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
@ -239,6 +135,119 @@ const toolsMouseoutHandle = () => {
    isMini.value = true
  }
 }
+
+// 编辑处理
+const editHandle = () => {
+  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 便于传递给新窗口初始化数据
+const updateToSession = (id: string) => {
+  const storageInfo = chartEditStore.getStorageInfo
+  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
+
+  if (sessionStorageInfo?.length) {
+    const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === id)
+    // 重复替换
+    if (repeateIndex !== -1) {
+      sessionStorageInfo.splice(repeateIndex, 1, { ...storageInfo, id })
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
+    } else {
+      sessionStorageInfo.push({ ...storageInfo, id })
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
+    }
+  } else {
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...storageInfo, id }])
+  }
+}
+
+// 侦听器更新
+const useSyncUpdate = () => {
+  // 定义侦听器变量
+  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()
+    }, editToJsonInterval)
+    // 2、失焦同步数据
+    addEventListener('blur', syncData)
+
+    // 【监听JSON代码 刷新工作台图表】
+    addEventListener(SavePageEnum.JSON, updateFn)
+  }
+
+  // 关闭侦听
+  const unUse = () => {
+    clearInterval(timer)
+    removeEventListener(SavePageEnum.JSON, updateFn)
+    removeEventListener('blur', syncData)
+  }
+
+  // 路由变更时处理
+  const watchHandler = (toName: any, fromName: any) => {
+    if (fromName == ChartEnum.CHART_HOME_NAME) {
+      unUse()
+    }
+    if (toName == ChartEnum.CHART_HOME_NAME) {
+      use()
+    }
+  }
+  return watchHandler
+}
+
+watch(() => routerParamsInfo.name, useSyncUpdate(), { immediate: true })
+
+// 配置列表
+const btnList: BtnListType[] = [
+  {
+    key: 'export',
+    type: TypeEnum.BUTTON,
+    name: '导出',
+    icon: ShareIcon,
+    handle: exportHandle
+  },
+  {
+    key: 'import',
+    type: TypeEnum.IMPORTUPLOAD,
+    name: '导入',
+    icon: DownloadIcon
+  },
+  {
+    key: 'edit',
+    type: TypeEnum.BUTTON,
+    name: '编辑JSON',
+    icon: CreateIcon,
+    handle: editHandle
+  },
+  {
+    key: 'setting',
+    type: TypeEnum.BUTTON,
+    name: '设置',
+    icon: SettingsSharpIcon,
+    handle: () => {
+      globalSettingModel.value = true
+    }
+  }
+]
 </script>

 <style lang="scss" scoped>
--- a/src/views/edit/index.vue
+++ b/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