Merge branch 'dev' into dev-commet

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -116,7 +116,8 @@ $centerHeight: 100px;
       height: $centerHeight;
       overflow: hidden;
       .list-img {
-        height: 100%;
+        height: 100px;
+        width: 140px;
         border-radius: 6px;
         @extend .go-transition;
       }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue

@@ -73,6 +73,7 @@
         <n-text>SQL 类型不支持 Get 请求，请使用其它方式</n-text>
       </template>
       <template v-else>
+        <n-tag type="warning">需要后台提供专门处理 sql 的接口</n-tag>
         <setting-item-box name="键名">
           <n-tag type="primary" :bordered="false" style="width: 40px; font-size: 16px"> sql </n-tag>
         </setting-item-box>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue

@@ -75,6 +75,7 @@ import {
   heatMapUrl,
   scatterBasicUrl,
   mapUrl,
+  capsuleUrl,
   wordCloudUrl,
   treemapUrl,
   threeEarth01Url
@@ -122,6 +123,9 @@ const apiList = [
   {
     value: `【地图数据】${mapUrl}`
   },
+  {
+    value: `【胶囊柱图】${capsuleUrl}`
+  },
   {
     value: `【词云】${wordCloudUrl}`
   },

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts

@@ -0,0 +1,177 @@
+// 获取实例
+const eTemplateString = `
+console.log(e)
+`
+// 获取全局 echarts 实例
+const echartsTemplateString = `
+console.log(echarts)
+`
+
+// 获取当前组件图表集合
+const componentsTemplateString = `
+console.log(components)
+`
+
+// 获取 nodeModules 实例
+const nodeModulesTemplateString = `
+console.log(node_modules)
+`
+
+// 异步引入
+const importTemplateString = `
+await import('https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.js')
+
+// lodash 默认赋值给 "_"
+console.log('isEqual', _.isEqual(['1'], ['1']))
+`
+
+// 修改图表 tooltip
+const tooltipTemplateString =
+  `
+// 获取echart实例
+const chart = this.refs.vChartRef.chart
+
+// 图表设置tooltip
+chart.setOption({
+  tooltip: {
+    trigger: 'axis', //item
+    enterable: true, 
+    formatter (params) {
+      return` +
+  '`' +
+  `
+        <div>
+          <img src="https://portrait.gitee.com/uploads/avatars/user/1654/4964818_MTrun_1653229420.png!avatar30">
+          <b><a href="https://gitee.com/dromara/go-view">《这是一个自定义的tooltip》</a></b>
+        <div>
+        <div style='border-radius:35px;color:#666'>
+        ` +
+  '$' +
+  `{Object.entries(params[0].value).map(kv => ` +
+  '`' +
+  `<div>` +
+  '$' +
+  `{kv[0]}:` +
+  '$' +
+  `{kv[1]}</div>` +
+  '`' +
+  `).join('')}
+        </div>
+      ` +
+  '`;' +
+  `
+    },
+  }
+})
+`
+
+// 添加【轮播列表】样式
+const addStyleString =
+  `
+// 组件样式作用域标识
+const scoped = this.subTree.scopeId
+function loadStyleString(css){
+	let style = document.createElement('style')
+	style.type = 'text/css'
+	style.appendChild(document.createTextNode(css))
+	let head = document.getElementsByTagName('head')[0]
+	head.appendChild(style)
+}
+loadStyleString(` +
+  '`' +
+  `
+.dv-scroll-board[` +
+  '$' +
+  `{scoped}] {
+  position: relative;
+  overflow: hidden;
+}
+.dv-scroll-board[` +
+  '$' +
+  `{scoped}]::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -20%;
+  left: -100%;
+  width: 550px;
+  height: 60px;
+  transform: rotate(-45deg);
+  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
+  animation: cross 2s infinite;
+}
+@keyframes cross{
+  to{
+    top: 80%;
+    left: 100%;
+    transform: rotate(-45deg);
+  }
+}
+` +
+  '`' +
+  `)
+`
+
+// 修改地图原点大小
+const editMapPointString = `
+const chart = this.refs.vChartRef.chart
+// 定义地图原点大小 同理可自定义标签等等内容
+this.props.chartConfig.option.series[0].symbolSize = (val) => {
+  return Math.sqrt(val[2]) / 3;
+}
+this.setupState.vEchartsSetOption();
+let i = 0; // 当前轮播索引
+const len = 3; // 轮播部分提示
+(function showTips() {
+  const action = (type, dataIndex) => {
+    chart.dispatchAction({
+      type,
+      dataIndex,
+      seriesIndex: 0,
+    });
+  }
+  setInterval(() => {
+    action("downplay", i);
+    action("hideTip", i);
+    if (i === len) i = 0;
+    i++;
+    action("highlight", i);
+    action("showTip", i);
+  }, 2000);
+})()
+`
+
+export const templateList = [
+  {
+    description: '获取当前组件实例',
+    code: eTemplateString
+  },
+  {
+    description: '获取全局 echarts 实例',
+    code: echartsTemplateString
+  },
+  {
+    description: '获取组件图表集合',
+    code: componentsTemplateString
+  },
+  {
+    description: '获取 nodeModules 实例',
+    code: nodeModulesTemplateString
+  },
+  {
+    description: '获取远程 CDN 库',
+    code: importTemplateString
+  },
+  {
+    description: '修改图表 tooltip',
+    code: tooltipTemplateString
+  },
+  {
+    description: '添加【轮播列表】样式',
+    code: addStyleString
+  },
+  {
+    description: '修改【地图】圆点，新增提示自动轮播',
+    code: editMapPointString
+  }
+]

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts

@@ -0,0 +1,3 @@
+import  ChartEventMonacoEditor from './index.vue'
+
+export { ChartEventMonacoEditor }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <n-collapse-item title="高级事件配置" name="2">
+    <template #header-extra>
+      <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
+        <template #icon>
+          <n-icon>
+            <pencil-icon />
+          </n-icon>
+        </template>
+        编辑
+      </n-button>
+    </template>
+    <n-card>
+      <!-- 函数体 -->
+      <div v-for="eventName in EventLife" :key="eventName">
+        <p>
+          <span class="func-keyword">async {{ eventName }}</span> (e, components, echarts, node_modules) {
+        </p>
+        <p class="go-ml-4"><n-code :code="(targetData.events || {})[eventName]" language="typescript"></n-code></p>
+        <p>}<span>,</span></p>
+      </div>
+    </n-card>
+  </n-collapse-item>
+
+  <!-- 弹窗 -->
+  <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1200px; height: 700px">
+      <template #header>
+        <n-space>
+          <n-text>高级事件编辑器（配合源码使用）</n-text>
+        </n-space>
+      </template>
+      <template #header-extra> </template>
+      <n-layout has-sider sider-placement="right">
+        <n-layout style="height: 580px; padding-right: 20px">
+          <n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
+            <!-- 提示 -->
+            <template #suffix>
+              <n-text class="tab-tip" type="warning">tips: {{ EventLifeTip[editTab] }}</n-text>
+            </template>
+            <n-tab-pane
+              v-for="(eventName, index) in EventLife"
+              :key="index"
+              :tab="`${EventLifeName[eventName]}-${eventName}`"
+              :name="eventName"
+            >
+              <!-- 函数名称 -->
+              <p class="go-pl-3">
+                <span class="func-keyword">async function &nbsp;&nbsp;</span>
+                <span class="func-keyNameWord">{{ eventName }}(e, components, echarts, node_modules)&nbsp;&nbsp;{</span>
+              </p>
+              <!-- 编辑主体 -->
+              <monaco-editor v-model:modelValue="events[eventName]" height="480px" language="javascript" />
+              <!-- 函数结束 -->
+              <p class="go-pl-3 func-keyNameWord">}</p>
+            </n-tab-pane>
+          </n-tabs>
+        </n-layout>
+        <n-layout-sider
+          :collapsed-width="14"
+          :width="340"
+          show-trigger="bar"
+          collapse-mode="transform"
+          content-style="padding: 12px 12px 0px 12px;margin-left: 3px;"
+        >
+          <n-tabs default-value="1" justify-content="space-evenly" type="segment">
+            <!-- 验证结果 -->
+            <n-tab-pane tab="验证结果" name="1" size="small">
+              <n-scrollbar trigger="none" style="max-height: 505px">
+                <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2, 3]">
+                  <template v-for="error in [validEvents()]" :key="error">
+                    <n-collapse-item title="错误函数" :name="1">
+                      <n-text depth="3">{{ error.errorFn || '暂无' }}</n-text>
+                    </n-collapse-item>
+                    <n-collapse-item title="错误信息" :name="2">
+                      <n-text depth="3">{{ error.name || '暂无' }}</n-text>
+                    </n-collapse-item>
+                    <n-collapse-item title="堆栈信息" :name="3">
+                      <n-text depth="3">{{ error.message || '暂无' }}</n-text>
+                    </n-collapse-item>
+                  </template>
+                </n-collapse>
+              </n-scrollbar>
+            </n-tab-pane>
+            <!-- 辅助说明 -->
+            <n-tab-pane tab="变量说明" name="2">
+              <n-scrollbar trigger="none" style="max-height: 505px">
+                <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2, 3, 4]">
+                  <n-collapse-item title="e" :name="1">
+                    <n-text depth="3">触发对应生命周期事件时接收的参数</n-text>
+                  </n-collapse-item>
+                  <n-collapse-item title="this" :name="2">
+                    <n-text depth="3">图表组件实例</n-text>
+                    <br />
+                    <n-tag class="go-m-1" v-for="prop in ['refs', 'setupState', 'ctx', 'props', '...']" :key="prop">{{
+                      prop
+                    }}</n-tag>
+                  </n-collapse-item>
+                  <n-collapse-item title="components" :name="3">
+                    <n-text depth="3"
+                      >当前大屏内所有组件的集合id 图表组件中的配置id，可以获取其他图表组件进行控制</n-text
+                    >
+                    <n-code :code="`{\n  [id]: component\n}`" language="typescript"></n-code>
+                  </n-collapse-item>
+                  <n-collapse-item title="node_modules" :name="4">
+                    <n-text depth="3">以下是内置在代码环境中可用的包变量</n-text>
+                    <br />
+                    <n-tag class="go-m-1" v-for="pkg in Object.keys(npmPkgs || {})" :key="pkg">{{ pkg }}</n-tag>
+                  </n-collapse-item>
+                </n-collapse>
+              </n-scrollbar>
+            </n-tab-pane>
+            <!-- 介绍案例 -->
+            <n-tab-pane tab="介绍案例" name="3">
+              <n-scrollbar trigger="none" style="max-height: 505px">
+                <n-collapse arrow-placement="right">
+                  <n-collapse-item
+                    v-for="(item, index) in templateList"
+                    :key="index"
+                    :title="`案例${index + 1}：${item.description}`"
+                    :name="index"
+                  >
+                    <n-code :code="item.code" language="typescript"></n-code>
+                  </n-collapse-item>
+                </n-collapse>
+              </n-scrollbar>
+            </n-tab-pane>
+          </n-tabs>
+        </n-layout-sider>
+      </n-layout>
+
+      <template #action>
+        <n-space justify="space-between">
+          <div class="go-flex-items-center">
+            <n-tag :bordered="false" type="primary">
+              <template #icon>
+                <n-icon :component="DocumentTextIcon" />
+              </template>
+              提示
+            </n-tag>
+            <n-text class="go-ml-2" depth="2">通过提供的参数可为图表增加定制化的tooltip、交互事件等等</n-text>
+          </div>
+
+          <n-space>
+            <n-button size="medium" @click="closeEvents">取消</n-button>
+            <n-button size="medium" type="primary" @click="saveEvents">保存</n-button>
+          </n-space>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, toRefs, toRaw } from 'vue'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { templateList } from './importTemplate'
+import { npmPkgs } from '@/hooks'
+import { icon } from '@/plugins'
+import { goDialog, toString } from '@/utils'
+import { CreateComponentType, EventLife } from '@/packages/index.d'
+import { Script } from 'vm'
+
+const { targetData, chartEditStore } = useTargetData()
+const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5
+
+const EventLifeName = {
+  [EventLife.BEFORE_MOUNT]: '渲染之前',
+  [EventLife.MOUNTED]: '渲染之后'
+}
+
+const EventLifeTip = {
+  [EventLife.BEFORE_MOUNT]: '此时组件 DOM 还未存在',
+  [EventLife.MOUNTED]: '此时组件 DOM 已经存在'
+}
+
+// 受控弹窗
+const showModal = ref(false)
+// 编辑区域控制
+const editTab = ref(EventLife.MOUNTED)
+// events 函数模板
+let events = ref({ ...targetData.value.events })
+// 事件错误标识
+const errorFlag = ref(false)
+
+// 验证语法
+const validEvents = () => {
+  let errorFn = ''
+  let message = ''
+  let name = ''
+
+  errorFlag.value = Object.entries(events.value).every(([eventName, str]) => {
+    try {
+      // 支持await，验证语法
+      const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
+      new AsyncFunction(str)
+      return true
+    } catch (error: any) {
+      message = error.message
+      name = error.name
+      errorFn = eventName
+      return false
+    }
+  })
+  return {
+    errorFn,
+    message,
+    name
+  }
+}
+
+// 关闭事件
+const closeEvents = () => {
+  showModal.value = false
+}
+
+// 新增事件
+const saveEvents = () => {
+  if (validEvents().errorFn) {
+    window['$message'].error('事件函数错误，无法进行保存')
+    return
+  }
+  if (Object.values(events.value).join('').trim() === '') {
+    // 清空事件
+    targetData.value.events = undefined
+  } else {
+    targetData.value.events = { ...events.value }
+  }
+  closeEvents()
+}
+
+watch(
+  () => showModal.value,
+  (newData: boolean) => {
+    if (newData) {
+      events.value = { ...targetData.value.events }
+    }
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+/* 外层也要使用 */
+.func-keyword {
+  color: #b478cf;
+}
+
+@include go('chart-data-monaco-editor') {
+  .func-keyNameWord {
+    color: #70c0e8;
+  }
+  .tab-tip {
+    font-size: 12px;
+  }
+  &.n-card.n-modal,
+  .n-card {
+    @extend .go-background-filter;
+  }
+}
+@include deep() {
+  .n-layout,
+  .n-layout-sider {
+    background-color: transparent;
+  }
+  .go-editor-area {
+    max-height: 530px;
+  }
+  .checkbox--hidden:checked {
+    & + label {
+      .n-icon {
+        transition: all 0.3s;
+        transform: rotate(180deg);
+      }
+    }
+    & ~ .go-editor-area {
+      display: none;
+    }
+  }
+  // 优化代码换行
+  .n-code > pre {
+    white-space: break-spaces;
+  }
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartEvent/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <!-- 事件配置 -->
+  <n-collapse class="go-mt-3" arrow-placement="right" :default-expanded-names="['1', '2']">
+    <n-text depth="3">
+      组件 id：
+      <n-text>{{ targetData.id }}</n-text>
+    </n-text>
+    <n-collapse-item title="基础事件配置" name="1">
+      <div class="go-event">
+        <n-text depth="3"> 【单击、双击、移入、移出】尽情期待！ </n-text>
+      </div>
+    </n-collapse-item>
+    <chart-event-monaco-editor></chart-event-monaco-editor>
+  </n-collapse>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ChartEventMonacoEditor } from './components/ChartEventMonacoEditor'
+import { useTargetData } from '../hooks/useTargetData.hook'
+
+const { targetData } = useTargetData()
+const showModal = ref(false)
+</script>

src/views/chart/ContentConfigurations/index.d.ts

@@ -3,4 +3,5 @@ export enum TabsEnum {
   CHART_SETTING = 'chartSetting',
   CHART_ANIMATION = 'chartAnimation',
   CHART_DATA = 'chartData',
+  CHART_EVENT = 'chartEvent'
 }

src/views/chart/ContentConfigurations/index.vue

@@ -75,12 +75,13 @@ const { getDetails } = toRefs(useChartLayoutStore())
 const { setItem } = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
 
-const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon } = icon.ionicons5
+const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5
 
 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
 const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue'))
 const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
 const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
+const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
 const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
 
 const collapsed = ref<boolean>(getDetails.value)
@@ -148,6 +149,12 @@ const chartsTabList = [
     title: '数据',
     icon: FlashIcon,
     render: ChartData
+  },
+  {
+    key: TabsEnum.CHART_EVENT,
+    title: '事件',
+    icon: RocketIcon,
+    render: ChartEvent
   }
 ]
 </script>

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>
 
@@ -58,17 +62,28 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, h } from 'vue'
+import { ref, computed, h, watch } from 'vue'
 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'
+import { useSync } from '@/views/chart/hooks/useSync.hook'
+import { SavePageEnum } from '@/enums/editPageEnum'
 import { GoSystemSet } from '@/components/GoSystemSet/index'
 import { exportHandle } from './utils'
 import { useFile } from './hooks/useFile.hooks'
 import { BtnListType, TypeEnum } from './index.d'
 import { icon } from '@/plugins'
 
-const { DownloadIcon, ShareIcon, PawIcon, SettingsSharpIcon } = 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
@@ -80,38 +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: '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
@@ -142,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>
@@ -168,7 +274,7 @@ $asideBottom: 70px;
     flex-direction: column-reverse;
     height: auto;
     right: 20px;
-    padding: 20px 8px;
+    padding: 30px 8px;
     bottom: $asideBottom;
     overflow: hidden;
     transition: height ease 0.4s;

src/views/edit/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="go-edit">
+    <n-layout>
+      <n-layout-header class="go-edit-header go-px-5 go-flex-items-center" bordered>
+        <div>
+          <n-text class="go-edit-title go-mr-4">页面在线编辑器</n-text>
+          <n-button v-if="showOpenFilePicker" class="go-mr-3" size="medium" @click="importJSON">
+            <template #icon>
+              <n-icon>
+                <download-icon></download-icon>
+              </n-icon>
+            </template>
+            导入
+          </n-button>
+        </div>
+        <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
+          v-model:modelValue="content"
+          language="json"
+          :editorOptions="{
+            lineNumbers: 'on',
+            minimap: { enabled: true }
+          }"
+      />
+      </n-layout-content>
+    </n-layout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { SavePageEnum } from '@/enums/editPageEnum'
+import { getSessionStorageInfo } from '../preview/utils'
+import type { ChartEditStorageType } from '../preview/index.d'
+import { setSessionStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+import { icon } from '@/plugins'
+
+const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
+const showOpenFilePicker: Function = (window as any).showOpenFilePicker
+let content = ref('')
+
+// 从sessionStorage 获取数据
+function getDataBySession() {
+  const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+  content.value = JSON.stringify(localStorageInfo, undefined, 2)
+}
+getDataBySession()
+
+// 返回父窗口
+function back() {
+  opener.name = Date.now()
+  window.open(opener.location.href, opener.name)
+}
+
+// 导入json文本
+async function importJSON() {
+  const files = await showOpenFilePicker()
+  const file = await files[0].getFile()
+  const fr = new FileReader()
+  fr.readAsText(file)
+  fr.onloadend = () => {
+    content.value = (fr.result || '').toString()
+  }
+}
+
+// 同步 [画布页失去焦点时同步数据到JSON页，JSON页Ctrl+S 时同步数据到画布页]
+opener.addEventListener(SavePageEnum.CHART, (e: any) => {
+  setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [e.detail])
+  content.value = JSON.stringify(e.detail, undefined, 2)
+})
+
+// 窗口失焦 + 保存 => 同步数据
+document.addEventListener('keydown', function (e) {
+  if (e.keyCode == 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
+    e.preventDefault()
+    updateSync()
+  }
+})
+addEventListener('blur', updateSync)
+
+// 同步更新
+function updateSync() {
+  if (!opener) {
+    return window['$message'].error('源窗口已关闭，视图同步失败')
+  }
+  try {
+    const detail = JSON.parse(content.value)
+    delete detail.id
+    // 保持id不变
+    opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
+  } catch (e) {
+    window['$message'].error('内容格式有误')
+    console.log(e)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.go-edit {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  .go-edit-header {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    justify-content: space-between;
+    .go-edit-title {
+      position: relative;
+      bottom: 3px;
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+  @include deep() {
+    .go-editor-area {
+      height: calc(100vh - 60px) !important;
+    }
+  }
+}
+</style>

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -18,6 +18,7 @@
       :themeSetting="themeSetting"
       :themeColor="themeColor"
       :style="{ ...getSizeStyle(item.attr) }"
+      v-on="useLifeHandler(item)"
     ></component>
   </div>
 </template>
@@ -27,7 +28,7 @@ import { PropType } from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
-
+import { useLifeHandler } from '@/hooks'
 const props = defineProps({
   groupData: {
     type: Object as PropType<CreateComponentGroupType>,

src/views/preview/components/PreviewRenderList/index.vue

@@ -29,6 +29,7 @@
       :themeSetting="themeSetting"
       :themeColor="themeColor"
       :style="{ ...getSizeStyle(item.attr) }"
+      v-on="useLifeHandler(item)"
     ></component>
   </div>
 </template>
@@ -41,7 +42,7 @@ import { CreateComponentGroupType } from '@/packages/index.d'
 import { chartColors } from '@/settings/chartThemes/index'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
-
+import { useLifeHandler } from '@/hooks'
 const props = defineProps({
   localStorageInfo: {
     type: Object as PropType<ChartEditStorageType>,

src/views/preview/wrapper.vue

@@ -0,0 +1,25 @@
+<template>
+  <Preview :key="key"></Preview>
+</template>
+
+<script setup lang="ts">
+import { getSessionStorageInfo } from './utils'
+import type { ChartEditStorageType } from './index.d'
+import { SavePageEnum } from '@/enums/editPageEnum'
+import { setSessionStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+import { ref } from 'vue'
+import Preview from './index.vue'
+
+let key = ref(Date.now())
+let localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+
+// 数据变更 -> 同步sessionStorage -> reload页面 （重新执行Mounted）
+;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
+  opener.addEventListener(saveEvent, (e: any) => {
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
+    key.value = Date.now()
+  })
+})
+
+</script>