update(*): 升级至V1.2.3 / V2.2.0（2023/03/16）版本

@@ -27,6 +27,7 @@
     "axios": "^0.27.2",
     "color": "^4.2.3",
     "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.7",
     "dom-helpers": "^5.2.1",
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",

@@ -25,6 +25,7 @@ specifiers:
   color: ^4.2.3
   commitlint: ^17.0.2
   crypto-js: ^4.1.1
+  dayjs: ^1.11.7
   default-passive-events: ^2.0.0
   dom-helpers: ^5.2.1
   echarts: ^5.3.2
@@ -82,6 +83,7 @@ dependencies:
   axios: 0.27.2
   color: 4.2.3
   crypto-js: 4.1.1
+  dayjs: 1.11.7
   dom-helpers: 5.2.1
   echarts-liquidfill: 3.1.0_echarts@5.3.3
   echarts-stat: 1.2.0
@@ -2008,6 +2010,10 @@ packages:
     engines: {node: '>=0.11'}
     dev: false
 
+  /dayjs/1.11.7:
+    resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
+    dev: false
+
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:

@@ -37,7 +37,6 @@ import { icon } from '@/plugins'
 import { useUserStore } from '@/store/external/module/user'
 const { ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5
 
-
 const t = window['$t']
 
 const modelShowInfo = ref(false)

+<template>
+  <n-radio-group :value="props.modelValue || INHERIT_VALUE" @update:value="handleChange">
+    <n-space>
+      <n-tooltip :show-arrow="false" trigger="hover" v-for="item in rendererList" :key="item.value">
+        <template #trigger>
+          <n-radio :value="item.value">
+            {{ item.value }}
+          </n-radio>
+        </template>
+        {{ item.desc }}
+      </n-tooltip>
+    </n-space>
+  </n-radio-group>
+</template>
+<script setup lang="ts">
+import { type EchartsRenderer } from '@/settings/chartThemes'
+
+const props = defineProps<{ modelValue?: EchartsRenderer; includeInherit?: boolean }>()
+const emits = defineEmits(['update:modelValue'])
+
+const INHERIT_VALUE = 'inherit'
+
+const handleChange = (val: EchartsRenderer & typeof INHERIT_VALUE) => {
+  emits('update:modelValue', val === INHERIT_VALUE ? undefined : val)
+}
+
+const rendererList = [
+  {
+    value: 'svg',
+    desc: '在缩放场景下具有更好的表现'
+  },
+  {
+    value: 'canvas',
+    desc: '数据量较大（经验判断 > 1k）、较多交互时，建议选择'
+  },
+  ...(props.includeInherit
+    ? [
+        {
+          value: INHERIT_VALUE,
+          desc: '默认继承全局配置'
+        }
+      ]
+    : [])
+]
+</script>

 <template>
+  <collapse-item name="渲染器">
+    <setting-item-box :alone="true">
+      <template #name>
+        <n-text>全局</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <n-text>所有echarts图表组件默认都将采用所选的渲染器进行渲染</n-text>
+        </n-tooltip>
+      </template>
+      <EchartsRendererSetting v-model="themeSetting.renderer" />
+    </setting-item-box>
+    <setting-item-box :alone="true">
+      <template #name>
+        <n-text>当前</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <n-text>仅当前组件采用指定渲染器渲染</n-text>
+        </n-tooltip>
+      </template>
+      <EchartsRendererSetting v-model="optionData.renderer" includeInherit />
+    </setting-item-box>
+  </collapse-item>
   <collapse-item v-if="title" name="标题">
     <template #header>
       <n-switch v-model:value="title.show" size="small"></n-switch>
@@ -283,6 +313,11 @@ import { PropType, computed } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
 import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
+import { icon } from '@/plugins'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import EchartsRendererSetting from './EchartsRendererSetting.vue'
+
+const { HelpOutlineIcon } = icon.ionicons5
 
 const props = defineProps({
   optionData: {
@@ -296,6 +331,12 @@ const props = defineProps({
   }
 })
 
+const chartEditStore = useChartEditStore()
+const themeSetting = computed(() => {
+  const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
+  return chartThemeSetting
+})
+
 const title = computed(() => {
   return props.optionData.title
 })

@@ -36,7 +36,7 @@
       </div>
       <div class="model-footer">
         中国色列表来自于：
-        <n-a href="http://zhongguose.com">http://zhongguose.com</n-a>
+        <n-a href="http://zhongguose.com" target="_blank">http://zhongguose.com</n-a>
       </div>
     </div>
   </n-modal>
@@ -157,6 +157,7 @@ $height: 85vh;
     }
   }
   .model-footer {
+    z-index: 1;
     text-align: end;
   }
 }

@@ -7,15 +7,38 @@ export enum BaseEvent {
   // 移入
   ON_MOUSE_ENTER = 'mouseenter',
   // 移出
-  ON_MOUSE_LEAVE = 'mouseleave',
+  ON_MOUSE_LEAVE = 'mouseleave'
+}
+
+// 组件交互回调事件
+export enum InteractEvents {
+  INTERACT_ON = 'interactOn',
+  INTERACT_COMPONENT_ID = 'interactComponentId',
+  INTERACT_FN = 'interactFn'
+}
+
+// 全局组件交互回调事件触发的类型（当然可以自定义名称）
+export enum InteractEventOn {
+  CLICK = 'click',
+  CHANGE = 'change'
+}
+
+// 确定交互组件触发类型 key名称
+export const COMPONENT_INTERACT_EVENT_KET = 'componentInteractEventKey'
+
+// 交互式组件的触发配置
+export type InteractActionsType = {
+  interactType: InteractEventOn
+  interactName: string
+  componentEmitEvents: { [T: string]: { value: any; label: string }[] }
 }
 
 // vue3 生命周期事件
-export enum EventLife { 
+export enum EventLife {
   // 渲染之后
   VNODE_MOUNTED = 'vnodeMounted',
   // 渲染之前
-  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount',
+  VNODE_BEFORE_MOUNT = 'vnodeBeforeMount'
 }
 
 // 内置字符串函数对象列表

@@ -4,4 +4,5 @@ export * from '@/hooks/useCode.hook'
 export * from '@/hooks/useChartDataFetch.hook'
 export * from '@/hooks/useChartDataPondFetch.hook'
 export * from '@/hooks/useLifeHandler.hook'
-export * from '@/hooks/useLang.hook'
\ No newline at end of file
+export * from '@/hooks/useLang.hook'
+export * from '@/hooks/useChartInteract.hook'
\ No newline at end of file

+import { inject, type Ref } from 'vue'
+import { EchartsRenderer } from '@/settings/chartThemes'
+import { SCALE_KEY } from '@/views/preview/hooks/useScale.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+
+use([CanvasRenderer, SVGRenderer])
+
+type InitOptions = {
+  renderer: EchartsRenderer
+  devicePixelRatio?: number
+}
+
+// 获取需要给当前echarts组件设置什么初始值
+export function useCanvasInitOptions(option: any, themeSetting: any) {
+  const renderer = option.renderer || themeSetting.renderer
+  const initOptions: InitOptions = { renderer }
+  const scaleRef = inject<Ref<{ width: number; height: number }>>(SCALE_KEY) || { value: { width: 1, height: 1 } }
+
+  if (renderer === 'canvas') {
+    initOptions.devicePixelRatio = Math.ceil(
+      Math.max(window.devicePixelRatio, scaleRef.value.width, scaleRef.value.height)
+    )
+  }
+  return initOptions
+}

-import { ref, toRefs, toRaw } from 'vue'
+import { ref, toRefs, toRaw, watch } from 'vue'
 import type VChart from 'vue-echarts'
 import { customizeHttp } from '@/api/http'
 import { useChartDataPondFetch } from '@/hooks/'
@@ -87,8 +87,18 @@ export const useChartDataFetch = (
           }
         }
 
-        // 立即调用
-        fetchFn()
+        // 普通初始化与组件交互处理监听
+        watch(
+          () => targetComponent.request,
+          () => {
+            fetchFn()
+          },
+          {
+            immediate: true,
+            deep: true
+          }
+        )
+
         // 定时时间
         const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
         // 单位

+import { toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any },
+  interactEventOn: string
+) => {
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === interactEventOn
+  })
+
+  if (fnOnEvent.length === 0) return
+  fnOnEvent.forEach(item => {
+    const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+    if (index === -1) return
+    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+    Object.keys(item.interactFn).forEach(key => {
+      if (Params.value[key]) {
+        Params.value[key] = param[item.interactFn[key]]
+      }
+      if (Header.value[key]) {
+        Header.value[key] = param[item.interactFn[key]]
+      }
+    })
+  })
+}
+
+// 联动事件触发的 type 变更时，清除当前绑定内容
+export const clearInteractEvent = (chartConfig: CreateComponentType) => {
+
+}

 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -14,6 +15,7 @@
 <script setup lang="ts">
 import { ref, nextTick, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
@@ -41,6 +43,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()

 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -14,6 +15,7 @@
 <script setup lang="ts">
 import { ref, nextTick, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
@@ -40,6 +42,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()

 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -15,6 +16,7 @@
 <script setup lang="ts">
 import { PropType, computed, watch, ref, nextTick } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -41,6 +43,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 const replaceMergeArr = ref<string[]>()

 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 

 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { reactive, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 

 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, watch, reactive } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
 const chartEditStore = useChartEditStore()

 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
@@ -7,6 +7,7 @@
 import { PropType, reactive, watch, ref, nextTick } from 'vue'
 import config, { includes } from './config'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, registerMap } from 'echarts/core'
 import { EffectScatterChart, MapChart } from 'echarts/charts'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   MapChart,
   DatasetComponent,

 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { FunnelChart } from 'echarts/charts'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, FunnelChart, GridComponent, TooltipComponent, LegendComponent])
 
 const option = computed(() => {

 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -38,6 +39,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, PropType, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
 
 const vChartRef = ref<typeof VChart>()

 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, PropType, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import dataJson from './data.json'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -31,6 +32,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, TreemapChart])
 
 const vChartRef = ref<typeof VChart>()

 <template>
-  <v-chart :theme="themeColor" :option="option.value" autoresize></v-chart>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, watch, reactive } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -30,6 +31,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, GridComponent])
 
 const chartEditStore = useChartEditStore()

 <template>
-  <v-chart :theme="themeColor" :option="option.value" autoresize> </v-chart>
+  <v-chart :theme="themeColor" :init-options="initOptions" :option="option.value" autoresize> </v-chart>
 </template>
 
 <script setup lang="ts">
 import { PropType, reactive, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
@@ -29,6 +30,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
 
 const option = reactive({

 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
 import { computed, PropType, reactive, watch } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
@@ -30,6 +31,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent])
 
 const option = computed(() => {

 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -13,6 +14,7 @@
 <script setup lang="ts">
 import { PropType, computed, watch, ref, nextTick } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { ScatterChart, EffectScatterChart } from 'echarts/charts'
@@ -46,6 +48,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -13,6 +14,7 @@
 <script setup lang="ts">
 import { PropType, computed, ref } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import ecStat from 'echarts-stat'
 import { use, registerTransform } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -47,6 +49,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([
   DatasetComponent,
   CanvasRenderer,

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border01Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border01Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border01.png'
 }

-import image from '@/assets/images/chart/decorates/border02.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border02Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Border02Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border02.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border03Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border03Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border03.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border04Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border04Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border04.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border05Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border05Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border05.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border06Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border06Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border06.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border07Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border07Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border07.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border08Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border08Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border08.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border09Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border09Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border09.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border10Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border10Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border10.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border11Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border11Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border11.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border12Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border12Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border12.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Border13Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Border13Config: ConfigType = {
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'border13.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates01Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Decorates01Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates01.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates02Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Decorates02Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates02.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates03Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Decorates03Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  image: 'decorates01.png'
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'decorates03.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates04Config: ConfigType = {
@@ -9,5 +9,6 @@ export const Decorates04Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates04.png'
 }

-import image from '@/assets/images/chart/decorates/decorates05.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const Decorates05Config: ConfigType = {
@@ -10,5 +9,6 @@ export const Decorates05Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates05.png'
 }

@@ -9,6 +9,6 @@ export const Decorates06Config: ConfigType = {
   category: ChatCategoryEnum.DECORATE,
   categoryName: ChatCategoryEnumName.DECORATE,
   package: PackagesCategoryEnum.DECORATES,
-  chartFrame: ChartFrameEnum.COMMON,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'decorates06.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const CountDownConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const CountDownConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'countdown.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const FlipperNumberConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const FlipperNumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'flipper-number.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const NumberConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const NumberConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'number.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TimeCommonConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const TimeCommonConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.STATIC,
   image: 'time.png'
 }

@@ -9,6 +9,6 @@ export const ThreeEarth01Config: ConfigType = {
   category: ChatCategoryEnum.THREE,
   categoryName: ChatCategoryEnumName.THREE,
   package: PackagesCategoryEnum.DECORATES,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'threeEarth01.png'
 }

+import dayjs from 'dayjs'
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { InputsDateConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
+  // 下拉展示
+  isPanel: 0,
+  dataset: dayjs().valueOf()
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsDateConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsDateConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="展示方式" :expanded="true">
+    <setting-item-box name="选择方式">
+      <n-select
+        v-model:value="optionData.isPanel"
+        size="small"
+        :options="panelOptions"
+      />
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="时间配置" :expanded="true">
+    <setting-item-box name="基础">
+      <setting-item name="类型">
+        <n-select
+          v-model:value="optionData.componentInteractEventKey"
+          size="small"
+          :options="datePickerTypeOptions"
+        />
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="默认值" :alone="true">
+      <n-date-picker
+        size="small"
+        v-model:value="optionData.dataset"
+        :type="optionData.componentInteractEventKey"
+      />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { icon } from '@/plugins'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+import { ComponentInteractEventEnum } from './interact'
+
+const { HelpOutlineIcon } = icon.ionicons5
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const panelOptions = [
+  {
+    label: '下拉展示',
+    value: 0
+  },
+  {
+    label: '面板展示',
+    value: 1
+  }
+]
+
+const datePickerTypeOptions = [
+  {
+    label: '日期',
+    value: ComponentInteractEventEnum.DATE
+  },
+  {
+    label: '日期时间',
+    value: ComponentInteractEventEnum.DATE_TIME
+  },
+  {
+    label: '日期范围',
+    value: ComponentInteractEventEnum.DATE_RANGE
+  },
+  {
+    label: '月份',
+    value: ComponentInteractEventEnum.MONTH
+  },
+  {
+    label: '月份范围',
+    value: ComponentInteractEventEnum.MONTH_RANGE
+  },
+  {
+    label: '年份',
+    value: ComponentInteractEventEnum.YEAR
+  },
+  {
+    label: '年份范围',
+    value: ComponentInteractEventEnum.YEAR_RANGE
+  },
+  {
+    label: '季度',
+    value: ComponentInteractEventEnum.QUARTER
+  },
+  {
+    label: '季度范围',
+    value: ComponentInteractEventEnum.QUARTER_RANGE
+  }
+]
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsDateConfig: ConfigType = {
+  key: 'InputsDate',
+  chartKey: 'VInputsDate',
+  conKey: 'VCInputsDate',
+  title: '时间选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_date.png'
+}

+<template>
+  <n-date-picker
+    v-model:value="option.dataset"
+    :panel="!!chartConfig.option.isPanel"
+    :type="chartConfig.option.componentInteractEventKey"
+    :style="`width:${w}px;`"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import dayjs from 'dayjs'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const rangeDate = ref<number | number[]>()
+
+const option = shallowReactive({
+  dataset: props.chartConfig.option.dataset
+})
+
+// 监听事件改变
+const onChange = (v: number | number[]) => {
+  if (v instanceof Array) {
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      {
+        [ComponentInteractParamsEnum.DATE_START]: v[0] | dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_END]: v[1] | dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
+      },
+      InteractEventOn.CHANGE
+    )
+  } else {
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATE]: v },
+      InteractEventOn.CHANGE
+    )
+  }
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: number | number[]) => {
+    option.dataset = newData
+    // 关联目标组件首次请求带上默认内容
+    onChange(newData)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-input {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATE = 'date',
+  DATE_TIME = 'datetime',
+  DATE_RANGE = 'daterange',
+  DATE_TIME_RANGE = 'datetimerange',
+  MONTH = 'month',
+  MONTH_RANGE = 'monthrange',
+  YEAR = 'year',
+  YEAR_RANGE = 'yearrange',
+  QUARTER = 'quarter',
+  QUARTER_RANGE = 'quarterrange'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATE = 'date',
+  DATE_START = 'dateStart',
+  DATE_END = 'dateEnd',
+  DATE_RANGE = 'daterange'
+}
+
+const time = [
+  {
+    value: ComponentInteractParamsEnum.DATE,
+    label: '日期'
+  }
+]
+
+const timeRange = [
+  {
+    value: ComponentInteractParamsEnum.DATE_START,
+    label: '开始时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_END,
+    label: '结束时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_RANGE,
+    label: '日期范围'
+  }
+]
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATE]: time,
+      [ComponentInteractEventEnum.DATE_TIME]: time,
+      [ComponentInteractEventEnum.DATE_RANGE]: timeRange,
+      [ComponentInteractEventEnum.MONTH]: time,
+      [ComponentInteractEventEnum.MONTH_RANGE]: timeRange,
+      [ComponentInteractEventEnum.QUARTER]: time,
+      [ComponentInteractEventEnum.QUARTER_RANGE]: timeRange,
+      [ComponentInteractEventEnum.YEAR]: time,
+      [ComponentInteractEventEnum.YEAR_RANGE]: timeRange,
+    }
+  }
+]

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { InputsSelectConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 默认值
+  selectValue: '1',
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '选项1',
+      value: '1'
+    },
+    {
+      label: '选项2',
+      value: '2'
+    },
+    {
+      label: '选项3',
+      value: '3'
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsSelectConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsSelectConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="下拉配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-select size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsSelectConfig: ConfigType = {
+  key: 'InputsSelect',
+  chartKey: 'VInputsSelect',
+  conKey: 'VCInputsSelect',
+  title: '下拉选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_select.png'
+}

+<template>
+  <n-select
+    v-model:value="option.value.selectValue"
+    :options="option.value.dataset"
+    :style="`width:${w}px;`"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const option = shallowReactive({
+  value: {
+    selectValue: props.chartConfig.option.selectValue,
+    dataset: props.chartConfig.option.dataset
+  }
+})
+
+// 监听事件改变
+const onChange = (v: string) => {
+  // 存储到联动数据
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: v },
+    InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    onChange(newData.selectValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-base-selection-label {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATA]: [
+        {
+          value: ComponentInteractParamsEnum.DATA,
+          label: '选择项'
+        }
+      ]
+    }
+  }
+]

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { InputsTabConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 默认值
+  tabLabel: '选项1',
+  // 样式
+  tabType: 'segment',
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '选项1',
+      value: '1'
+    },
+    {
+      label: '选项2',
+      value: '2'
+    },
+    {
+      label: '选项3',
+      value: '3'
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsTabConfig.key
+  public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsTabConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="标签页配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-select size="small" v-model:value="optionData.tabType" :options="tabTypeOptions" />
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const tabTypeOptions = [
+  {
+    label: '线条',
+    value: 'bar'
+  },
+  {
+    label: '分段',
+    value: 'segment'
+  }
+]
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsTabConfig: ConfigType = {
+  key: 'InputsTab',
+  chartKey: 'VInputsTab',
+  conKey: 'VCInputsTab',
+  title: '标签选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_tab.png'
+}

+<template>
+  <n-tabs :type="option.value.tabType" @update:value="onChange">
+    <n-tab v-for="(item, index) in option.value.dataset" :name="item.label" :key="index"> {{ item.label }} </n-tab>
+  </n-tabs>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const option = shallowReactive({
+  value: cloneDeep(props.chartConfig.option)
+})
+
+// 监听事件改变
+const onChange = (v: string) => {
+  if (v === undefined) return
+  const selectItem = option.value.dataset.find((item: { label: string; value: any }) => item.label === v)
+  // 存储到联动数据
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: selectItem.value },
+    InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    onChange(newData.tabValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
\ No newline at end of file

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATA]: [
+        {
+          value: ComponentInteractParamsEnum.DATA,
+          label: '选择项'
+        }
+      ]
+    }
+  }
+]

+import { InputsDateConfig } from './InputsDate/index'
+import { InputsSelectConfig } from './InputsSelect/index'
+import { InputsTabConfig } from './InputsTab/index'
+
+export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig]

 <template>
+  <global-setting :optionData="optionData"></global-setting>
   <collapse-item name="词云" expanded>
     <setting-item-box name="形状">
       <setting-item>
@@ -45,7 +46,7 @@
 import { PropType, computed } from 'vue'
 import { option, ShapeEnumList } from './config'
 // eslint-disable-next-line no-unused-vars
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
   optionData: {

 <template>
   <v-chart
     ref="vChartRef"
+    :init-options="initOptions"
     :theme="themeColor"
     :option="option"
     :manual-update="isPreview()"
@@ -12,6 +13,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import 'echarts-wordcloud'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -38,6 +40,8 @@ const props = defineProps({
   }
 })
 
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
 use([CanvasRenderer, GridComponent, TooltipComponent])
 
 const replaceMergeArr = ref<string[]>()

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TextBarrageConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const TextBarrageConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'text_barrage.png'
 }

-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TextCommonConfig: ConfigType = {
@@ -9,5 +9,6 @@ export const TextCommonConfig: ConfigType = {
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'text_static.png'
 }

 export enum ChatCategoryEnum {
   TEXT = 'Texts',
   TITLE = 'Titles',
+  INPUTS = 'Inputs',
   MORE = 'Mores'
 }
 
 export enum ChatCategoryEnumName {
   TEXT = '文本',
   TITLE = '标题',
+  // 控件 => 数据录入
+  INPUTS = '控件',
   MORE = '更多'
 }
\ No newline at end of file

 import Texts from './Texts'
+import Inputs from './Inputs'
 import Mores from './Mores'
 
-export const InformationList = [...Texts, ...Mores]
+export const InformationList = [...Texts, ...Inputs, ...Mores]

@@ -6,7 +6,7 @@ import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon
 export function useInjectLib(packagesList: EPackagesType) {
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
 
-  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
+  // addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
 }
 
 /**

-import { BaseEvent, EventLife } from '@/enums/eventEnum'
+import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -120,13 +120,19 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
+  interactActions?: InteractActionsType[],
   events: {
     baseEvent: {
       [K in BaseEvent]?: string
-    },
+    }
     advancedEvents: {
       [K in EventLife]?: string
     }
+    interactEvents: {
+      [InteractEvents.INTERACT_ON]: InteractEventOn | undefined
+      [InteractEvents.INTERACT_COMPONENT_ID]: string | undefined
+      [InteractEvents.INTERACT_FN]: { [name: string]: string }
+    }[]
   }
 }
 

@@ -14,7 +14,7 @@ export const packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.INFORMATIONS]: InformationList,
   [PackagesCategoryEnum.TABLES]: TableList,
-  [PackagesCategoryEnum.DECORATES]: DecorateList, 
+  [PackagesCategoryEnum.DECORATES]: DecorateList
 }
 
 /**

@@ -102,7 +102,8 @@ export class PublicConfigClass implements PublicConfigType {
     advancedEvents: {
       [EventLife.VNODE_MOUNTED]: undefined,
       [EventLife.VNODE_BEFORE_MOUNT]: undefined
-    }
+    },
+    interactEvents: []
   }
 }
 

@@ -67,8 +67,7 @@ import {
   EyeOutline as EyeOutlineIcon,
   EyeOffOutline as EyeOffOutlineIcon,
   Albums as AlbumsIcon,
-  Analytics as AnalyticsIcon,
-  SaveOutline as SaveIcon
+  Analytics as AnalyticsIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -295,10 +294,7 @@ const carbon = {
   FilterIcon,
   FilterEditIcon,
   // 图层
-  LaptopIcon,
-  // 保存
-  // THINGS_KIT
-  SaveIcon
+  LaptopIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

@@ -5,6 +5,13 @@ import { loginCheck } from '@/utils'
 export function createRouterGuards(router: Router) {
   // 前置
   router.beforeEach(async (to, from, next) => {
+    // http://localhost:3000/#/chart/preview/792622755697790976?t=123
+    // 把外部动态参数放入window.route.params，后续API动态接口可以用window.route?.params?.t来拼接参数
+    // @ts-ignore
+    if (!window.route) window.route = {params: {}}
+    // @ts-ignore
+    Object.assign(window.route.params, to.query)
+
     const Loading = window['$loading'];
     Loading && Loading.start();
     const isErrorPage = router.getRoutes().findIndex((item) => item.name === to.name);

@@ -64,10 +64,13 @@ export const chartColorsSearch = {
   roma: ['#e01f54', '#5e4ea5', 'rgba(137, 52, 72, 0.3)', 'rgba(224, 31, 84, 0.5)', 'rgba(94, 78, 165, 0.5)'],
 }
 
+export type EchartsRenderer = 'svg' | 'canvas';
+
 // 默认主题详细配置
 type ThemeJsonType = typeof themeJson
 export interface GlobalThemeJsonType extends Partial<ThemeJsonType> {
   dataset?: any,
+  renderer?: EchartsRenderer,
   [T:string]: any
 }
-export const globalThemeJson = {...themeJson, dataset: null,}
+export const globalThemeJson = {...themeJson, dataset: null, renderer: 'svg' as const }

@@ -6,7 +6,7 @@ import designColor from './designColor.json'
 export const lang = LangEnum.ZH
 
 // 水印文字
-export const watermarkText = 'GoView 低代码平台'
+export const watermarkText = "GoView 低代码平台"
 
 // 分组名称
 export const groupTitle = '分组'
@@ -17,7 +17,7 @@ export const theme = {
   darkTheme: false,
   //默认主题色
   appTheme: '#51d6a9',
-  appThemeDetail: null
+  appThemeDetail: null,
 }
 
 // 图表初始配置(px)
@@ -28,7 +28,7 @@ export const chartInitConfig = {
   h: 300,
   // 不建议动 offset
   offsetX: 0,
-  offsetY: 0
+  offsetY: 0,
 }
 
 // dialog 图标的大小
@@ -44,7 +44,7 @@ export const asideCollapsedWidth = 60
 export const maskClosable = false
 
 // 全局边框圆角
-export const borderRadius = '6px'
+export const borderRadius = '4px'
 
 // 轮播间隔
 export const carouselInterval = 4000

@@ -159,7 +159,8 @@ export const fetchRouteParams = () => {
  */
  export const fetchRouteParamsLocation = () => {
   try {
-    return document.location.hash.split('/').pop() || ''
+    // 防止添加query参数的时候，解析ID异常
+    return document.location.hash.split('?')[0].split('/').pop() || ''
   } catch (error) {
     window['$message'].warning('查询路由信息失败，请联系管理员！')
     return ''

@@ -10,7 +10,7 @@
           <slot name="icon"></slot>
         </div>
       </n-space>
-      <n-space align="center" style="gap: 4px">
+      <n-space class="go-flex-no-wrap" align="center" style="gap: 4px">
         <slot name="top-right"></slot>
         <n-icon v-show="backIcon" size="20" class="go-cursor-pointer go-d-block" @click="backHandle">
           <chevron-back-outline-icon></chevron-back-outline-icon>

@@ -13,7 +13,7 @@
         draggable
         @dragstart="dragStartHandle($event, item)"
         @dragend="dragendHandle"
-        @dblclick="dblclickHandle(item)" 
+        @dblclick="dblclickHandle(item)"
       >
         <div class="list-header">
           <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>

@@ -3,21 +3,34 @@
     <n-form inline :label-width="45" size="small" label-placement="left">
       <n-form-item label="宽度">
         <!-- 尺寸选择 -->
-        <n-input-number size="small" v-model:value="canvasConfig.width" :disabled="editCanvas.lockScale"
-          :validator="validator" @update:value="changeSizeHandle"></n-input-number>
+        <n-input-number
+          size="small"
+          v-model:value="canvasConfig.width"
+          :disabled="editCanvas.lockScale"
+          :validator="validator"
+          @update:value="changeSizeHandle"
+        ></n-input-number>
       </n-form-item>
       <n-form-item label="高度">
-        <n-input-number size="small" v-model:value="canvasConfig.height" :disabled="editCanvas.lockScale"
-          :validator="validator" @update:value="changeSizeHandle"></n-input-number>
+        <n-input-number
+          size="small"
+          v-model:value="canvasConfig.height"
+          :disabled="editCanvas.lockScale"
+          :validator="validator"
+          @update:value="changeSizeHandle"
+        ></n-input-number>
       </n-form-item>
     </n-form>
 
-    <n-card class="upload-box">
-      <n-upload v-model:file-list="uploadFileListRef" :show-file-list="false" :customRequest="customRequest"
-        :onBeforeUpload="beforeUploadHandle">
+    <div class="upload-box">
+      <n-upload
+        v-model:file-list="uploadFileListRef"
+        :show-file-list="false"
+        :customRequest="customRequest"
+        :onBeforeUpload="beforeUploadHandle"
+      >
         <n-upload-dragger>
-          <!-- THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致 -->
-          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="getPath(canvasConfig.backgroundImage)" alt="背景" />
+          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="canvasConfig.backgroundImage" alt="背景" />
           <div class="upload-img" v-show="!canvasConfig.backgroundImage">
             <img src="@/assets/images/canvas/noImage.png" />
             <n-text class="upload-desc" depth="3">
@@ -26,22 +39,33 @@
           </div>
         </n-upload-dragger>
       </n-upload>
-    </n-card>
+    </div>
     <n-space vertical :size="12">
       <n-space>
         <!-- THINGS_KIT 新增预置背景选择 -->
         <SelectBackgroundImage />
         <n-text>背景颜色</n-text>
         <div class="picker-height">
-          <n-color-picker v-if="!switchSelectColorLoading" size="small" style="width: 250px"
-            v-model:value="canvasConfig.background" :showPreview="true" :swatches="swatchesColors"></n-color-picker>
+          <n-color-picker
+            v-if="!switchSelectColorLoading"
+            size="small"
+            style="width: 250px"
+            v-model:value="canvasConfig.background"
+            :showPreview="true"
+            :swatches="swatchesColors"
+          ></n-color-picker>
         </div>
       </n-space>
       <n-space>
         <n-text>应用类型</n-text>
-        <n-select size="small" style="width: 250px" v-model:value="selectColorValue"
-          :disabled="!canvasConfig.backgroundImage" :options="selectColorOptions"
-          @update:value="selectColorValueHandle" />
+        <n-select
+          size="small"
+          style="width: 250px"
+          v-model:value="selectColorValue"
+          :disabled="!canvasConfig.backgroundImage"
+          :options="selectColorOptions"
+          @update:value="selectColorValueHandle"
+        />
       </n-space>
       <n-space>
         <n-text>背景控制</n-text>
@@ -55,9 +79,14 @@
       <n-space>
         <n-text>适配方式</n-text>
         <n-button-group>
-          <n-button v-for="item in previewTypeList" :key="item.key"
-            :type="canvasConfig.previewScaleType === item.key ? 'primary' : 'tertiary'" ghost size="small"
-            @click="selectPreviewType(item.key)">
+          <n-button
+            v-for="item in previewTypeList"
+            :key="item.key"
+            :type="canvasConfig.previewScaleType === item.key ? 'primary' : 'tertiary'"
+            ghost
+            size="small"
+            @click="selectPreviewType(item.key)"
+          >
             <n-tooltip :show-arrow="false" trigger="hover">
               <template #trigger>
                 <n-icon class="select-preview-icon" size="18">
@@ -77,8 +106,13 @@
 
     <!-- 主题选择和全局配置 -->
     <n-tabs class="tabs-box" size="small" type="segment">
-      <n-tab-pane v-for="item in globalTabList" :key="item.key" :name="item.key" size="small"
-        display-directive="show:lazy">
+      <n-tab-pane
+        v-for="item in globalTabList"
+        :key="item.key"
+        :name="item.key"
+        size="small"
+        display-directive="show:lazy"
+      >
         <template #tab>
           <n-space>
             <span>{{ item.title }}</span>
@@ -96,7 +130,7 @@
 <script setup lang="ts">
 import { ref, nextTick, watch } from 'vue'
 import { backgroundImageSize } from '@/settings/designSetting'
-import { swatchesColors } from '@/settings/chartThemes'
+import { swatchesColors } from '@/settings/chartThemes/index'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -259,14 +293,11 @@ const selectPreviewType = (key: PreviewScaleEnum) => {
 <style lang="scss" scoped>
 $uploadWidth: 326px;
 $uploadHeight: 193px;
-
 @include go(canvas-setting) {
   padding-top: 20px;
-
   .upload-box {
     cursor: pointer;
     margin-bottom: 20px;
-
     @include deep() {
       .n-card__content {
         padding: 0;
@@ -276,48 +307,40 @@ $uploadHeight: 193px;
       .n-upload-dragger {
         padding: 5px;
         width: $uploadWidth;
+        background-color: rgba(0, 0, 0, 0);
       }
     }
-
     .upload-show {
       width: -webkit-fill-available;
       height: $uploadHeight;
       border-radius: 5px;
     }
-
     .upload-img {
       display: flex;
       flex-direction: column;
       align-items: center;
-
       img {
         height: 150px;
       }
-
       .upload-desc {
         padding: 10px 0;
       }
     }
   }
-
   .icon-position {
     padding-top: 2px;
   }
-
   .picker-height {
     min-height: 35px;
   }
-
   .clear-btn {
     padding-left: 2.25em;
     padding-right: 2.25em;
   }
-
   .select-preview-icon {
-    padding-right: .68em;
-    padding-left: .68em;
+    padding-right: 0.68em;
+    padding-left: 0.68em;
   }
-
   .tabs-box {
     margin-top: 20px;
   }

@@ -135,8 +135,9 @@ const sendHandle = async () => {
       showMatching.value = true
       return
     }
-    window['$message'].warning('数据异常，请检查参数！')
+    window['$message'].warning('没有拿到返回值，请检查接口！')
   } catch (error) {
+    console.error(error);
     loading.value = false
     window['$message'].warning('数据异常，请检查参数！')
   }

@@ -132,8 +132,9 @@ const fetchTargetData = async () => {
       sourceData.value = res
       return
     }
-    window['$message'].warning('数据异常，请检查参数！')
+    window['$message'].warning('没有拿到返回值，请检查接口！')
   } catch (error) {
+    console.error(error);
     window['$message'].warning('数据异常，请检查参数！')
   }
 }

@@ -114,10 +114,6 @@ const sendHandle = async () => {
   }
   loading.value = true
   try {
-    // const res = await customizeHttp(
-    //   toRaw(pondData.value?.dataPondRequestConfig),
-    //   toRaw(chartEditStore.getRequestGlobalConfig)
-    // )
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
     loading.value = false
     if (res) {
@@ -126,8 +122,9 @@ const sendHandle = async () => {
       showMatching.value = true
       return
     }
-    window['$message'].warning('数据异常，请检查参数！')
+    window['$message'].warning('没有拿到返回值，请检查接口！')
   } catch (error) {
+    console.error(error);
     loading.value = false
     window['$message'].warning('数据异常，请检查参数！')
   }

@@ -16,9 +16,10 @@
 import { computed } from 'vue'
 import { loadAsyncComponent } from '@/utils'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { RequestDataTypeEnum } from '@/enums/httpEnum'
+import { ChartFrameEnum } from '@/packages/index.d'
 import { useTargetData } from '../hooks/useTargetData.hook'
 import { SelectCreateDataType, SelectCreateDataEnum } from './index.d'
-import { RequestDataTypeEnum } from '@/enums/httpEnum'
 
 const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
 const ChartDataAjax = loadAsyncComponent(() => import('./components/ChartDataAjax/index.vue'))
@@ -44,6 +45,9 @@ const selectOptions: SelectCreateDataType[] = [
 
 // 无数据源
 const isNotData = computed(() => {
-  return typeof targetData.value?.option?.dataset === 'undefined'
+  return (
+    targetData.value.chartConfig?.chartFrame === ChartFrameEnum.STATIC ||
+    typeof targetData.value?.option?.dataset === 'undefined'
+  )
 })
 </script>

 <template>
-  <n-collapse-item title="高级事件配置" name="2">
+  <n-collapse-item title="高级事件配置" name="3">
     <template #header-extra>
       <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
         <template #icon>

 <template>
-  <n-collapse-item title="基础事件配置" name="1">
+  <n-collapse-item title="基础事件配置" name="2">
     <template #header-extra>
       <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
         <template #icon>

+import ChartEventInteraction from './index.vue'
+
+export { ChartEventInteraction }
\ No newline at end of file

+<template>
+  <n-collapse-item title="组件交互" name="1" v-if="interactActions.length">
+    <template #header-extra>
+      <n-button type="primary" tertiary size="small" @click.stop="evAddEventsFn">
+        <template #icon>
+          <n-icon>
+            <add-icon />
+          </n-icon>
+        </template>
+        新增
+      </n-button>
+    </template>
+
+    <!-- 无数据 -->
+    <div v-if="!targetData.events.interactEvents.length" class="no-data go-flex-center">
+      <img :src="noData" alt="暂无数据" />
+      <n-text :depth="3">暂无内容</n-text>
+    </div>
+
+    <n-card
+      v-for="(item, cardIndex) in targetData.events.interactEvents"
+      :key="cardIndex"
+      class="n-card-shallow"
+      size="small"
+    >
+      <n-space justify="space-between">
+        <n-text>关联组件 - {{ cardIndex + 1 }}</n-text>
+        <n-button type="error" text size="small" @click="evDeleteEventsFn(cardIndex)">
+          <template #icon>
+            <n-icon>
+              <close-icon />
+            </n-icon>
+          </template>
+        </n-button>
+      </n-space>
+
+      <n-divider style="margin: 10px 0" />
+
+      <n-tag :bordered="false" type="primary"> 选择目标组件 </n-tag>
+
+      <setting-item-box name="触发事件" :alone="true">
+        <n-input-group v-if="interactActions">
+          <n-select
+            class="select-type-options"
+            v-model:value="item.interactOn"
+            size="tiny"
+            :options="interactActions"
+          />
+        </n-input-group>
+      </setting-item-box>
+
+      <setting-item-box :alone="true">
+        <template #name>
+          <n-text>绑定</n-text>
+          <n-tooltip trigger="hover">
+            <template #trigger>
+              <n-icon size="21" :depth="3">
+                <help-outline-icon></help-outline-icon>
+              </n-icon>
+            </template>
+            <n-text>不支持「静态组件」和「分组」</n-text>
+          </n-tooltip>
+        </template>
+        <n-select
+          class="select-type-options"
+          value-field="id"
+          label-field="title"
+          size="tiny"
+          filterable
+          placeholder="仅展示符合条件的组件"
+          v-model:value="item.interactComponentId"
+          :options="fnEventsOptions()"
+        />
+      </setting-item-box>
+
+      <setting-item-box v-if="fnDimensionsAndSource(item.interactOn).length" name="查询结果" :alone="true">
+        <n-table size="small" striped>
+          <thead>
+            <tr>
+              <th v-for="item in ['参数', '说明']" :key="item">{{ item }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn)" :key="index">
+              <td>{{ cItem.value }}</td>
+              <td>{{ cItem.label }}</td>
+            </tr>
+          </tbody>
+        </n-table>
+      </setting-item-box>
+
+      <n-tag :bordered="false" type="primary"> 关联目标组件请求参数 </n-tag>
+
+      <setting-item-box
+        :name="requestParamsItem"
+        v-for="requestParamsItem in requestParamsTypeList"
+        :key="requestParamsItem"
+      >
+        <setting-item
+          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.interactComponentId, requestParamsItem)"
+          :key="index"
+          :name="`${ovlKey}`"
+        >
+          <n-select
+            size="tiny"
+            v-model:value="item.interactFn[ovlKey]"
+            :options="fnDimensionsAndSource(item.interactOn)"
+            clearable
+          ></n-select>
+        </setting-item>
+        <n-text
+          v-show="JSON.stringify(fnGetRequest(item.interactComponentId, requestParamsItem)) === '{}'"
+          class="go-pt-1"
+          depth="3"
+        >
+          暂无数据
+        </n-text>
+      </setting-item-box>
+    </n-card>
+  </n-collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { VNodeChild, computed } from 'vue'
+import { SelectOption, SelectGroupOption } from 'naive-ui'
+import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
+import { CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d'
+import { RequestParamsTypeEnum } from '@/enums/httpEnum'
+import { InteractEventOn, COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { icon } from '@/plugins'
+import noData from '@/assets/images/canvas/noData.png'
+import { goDialog } from '@/utils'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+
+const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5
+const { targetData, chartEditStore } = useTargetData()
+const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER]
+
+// 获取组件交互事件列表
+const interactActions = computed(() => {
+  const interactActions = targetData.value.interactActions
+  if (!interactActions) return []
+  return interactActions.map(value => ({
+    label: value.interactName,
+    value: value.interactType
+  }))
+})
+
+// 获取组件事件
+const option = computed(() => {
+  return targetData.value.option
+})
+
+// 绑定组件数据 request
+const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
+  if (!id) return {}
+  return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
+}
+
+// 查询结果
+const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => {
+  if (!interactOn || !targetData.value.interactActions) return []
+  const tableData = targetData.value.interactActions.find(item => {
+    return item.interactType === interactOn
+  })
+
+  return tableData?.componentEmitEvents[option.value[COMPONENT_INTERACT_EVENT_KET]] || []
+}
+
+// 绑定组件列表
+const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
+  const filterOptionList = chartEditStore.componentList.filter(item => {
+    // 排除自己
+    const isNotSelf = item.id !== targetData.value.id
+    // 排除静态组件
+    const isNotStatic = item.chartConfig.chartFrame !== ChartFrameEnum.STATIC
+    // 排除分组
+    const isNotGroup = !item.isGroup
+
+    return isNotSelf && isNotStatic && isNotGroup
+  })
+
+  const mapOptionList = filterOptionList.map(item => ({
+    id: item.id,
+    title: item.chartConfig.title,
+    disabled: false
+  }))
+
+  targetData.value.events.interactEvents?.forEach(iaItem => {
+    mapOptionList.forEach(optionItem => {
+      if (optionItem.id === iaItem.interactComponentId) {
+        optionItem.disabled = true
+      }
+    })
+  })
+
+  return mapOptionList
+}
+
+// 新增模块
+const evAddEventsFn = () => {
+  targetData.value.events.interactEvents.push({
+    interactOn: undefined,
+    interactComponentId: undefined,
+    interactFn: {}
+  })
+}
+
+// 删除模块
+const evDeleteEventsFn = (index: number) => {
+  goDialog({
+    message: '是否删除此关联交互模块?',
+    onPositiveCallback: () => {
+      targetData.value.events.interactEvents.splice(index, 1)
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.mill-chart-target-data {
+  :deep(pre) {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}
+
+.n-input-group {
+  height: 30px;
+}
+
+.no-data {
+  flex-direction: column;
+  width: 100%;
+  img {
+    width: 120px;
+  }
+}
+
+:deep(.n-base-selection .n-base-selection-label) {
+  height: 32px;
+}
+</style>

@@ -5,6 +5,7 @@
       组件 id：
       <n-text>{{ targetData.id }}</n-text>
     </n-text>
+    <chart-event-interaction></chart-event-interaction>
     <chart-event-base-handle></chart-event-base-handle>
     <chart-event-advanced-handle></chart-event-advanced-handle>
   </n-collapse>
@@ -12,6 +13,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { ChartEventInteraction } from './components/ChartEventInteraction'
 import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle'
 import { ChartEventBaseHandle } from './components/ChartEventBaseHandle'
 import { useTargetData } from '../hooks/useTargetData.hook'

@@ -13,10 +13,11 @@
 
       <!-- 缩放比例 -->
       <n-select
-        :disabled="lockScale"
+        ref="selectInstRef"
         class="scale-btn"
         v-model:value="filterValue"
         size="mini"
+        :disabled="lockScale"
         :options="filterOptions"
         @update:value="selectHandle"
       ></n-select>
@@ -52,6 +53,7 @@
 </template>
 
 <script setup lang="ts">
+import { SelectInst } from 'naive-ui'
 import { reactive, ref, toRefs, watchEffect } from 'vue'
 import { icon } from '@/plugins'
 import { EditHistory } from '../EditHistory/index'
@@ -59,15 +61,18 @@ import EditShortcutKey from '../EditShortcutKey/index.vue'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 
 const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
 
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
-
+const chartLayoutStore = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
 const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas)
+const selectInstRef = ref<SelectInst | null>(null)
 
 // 缩放选项
 let filterOptions = [
@@ -98,7 +103,9 @@ const filterValue = ref('')
 
 // 用户自选择
 const selectHandle = (v: number) => {
+  selectInstRef.value?.blur()
   if (v === 0) {
+    chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, true)
     chartEditStore.computedScale()
     return
   }

@@ -48,10 +48,10 @@ const useSyncUpdateHandle = () => {
     //   document.hasFocus() && syncData()
     // }, editToJsonInterval)
 
-    // 2、失焦同步数据
-    addEventListener('blur', syncData)
+    // 失焦同步数据（暂不开启）
+    // addEventListener('blur', syncData)
 
-    // 【监听JSON代码 刷新工作台图表】
+    // 监听编辑器保存事件 刷新工作台图表
     addEventListener(SavePageEnum.JSON, updateFn)
 
     // 监听编辑页关闭
@@ -74,7 +74,7 @@ const useSyncUpdateHandle = () => {
       use()
     }
   }
-  
+
   return watchHandler
 }
 

@@ -178,7 +178,6 @@ const updateToSession = (id: string) => {
   }
 }
 
-
 // 配置列表
 const btnList: BtnListType[] = [
   {

 <template>
   <!-- <edit-rule></edit-rule> -->
-  <content-box id="go-chart-edit-layout" :flex="true" :showTop="false" :showBottom="true" :depth="1" :xScroll="true"
-    :disabledScroll="true" @mousedown="mousedownHandleUnStop" @drop="dragHandle" @dragover="dragoverHandle"
-    @dragenter="dragoverHandle">
+  <content-box
+    id="go-chart-edit-layout"
+    :flex="true"
+    :showTop="false"
+    :showBottom="true"
+    :depth="1"
+    :xScroll="true"
+    :disabledScroll="true"
+    @mousedown="mousedownHandleUnStop"
+    @drop="dragHandle"
+    @dragover="dragoverHandle"
+    @dragenter="dragoverHandle"
+  >
     <edit-rule>
       <!-- 画布主体 -->
       <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
         <!-- 展示 -->
         <edit-range>
           <!-- 滤镜预览 -->
-          <div :style="{
-            ...getFilterStyle(chartEditStore.getEditCanvasConfig),
-            ...rangeStyle
-          }">
+          <div
+            :style="{
+              ...getFilterStyle(chartEditStore.getEditCanvasConfig),
+              ...rangeStyle
+            }"
+          >
             <!-- 图表 -->
             <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
               <!-- 分组 -->
-              <edit-group v-if="item.isGroup" :groupData="(item as CreateComponentGroupType)"
-                :groupIndex="index"></edit-group>
+              <edit-group
+                v-if="item.isGroup"
+                :groupData="(item as CreateComponentGroupType)"
+                :groupIndex="index"
+              ></edit-group>
 
               <!-- 单组件 -->
-              <edit-shape-box v-else :data-id="item.id" :index="index" :style="{
+              <edit-shape-box
+                v-else
+                :data-id="item.id"
+                :index="index"
+                :style="{
                 ...useComponentStyle(item.attr, index),
                 ...getBlendModeStyle(item.styles) as any
-              }" :item="item" @click="mouseClickHandle($event, item)" @mousedown="mousedownHandle($event, item)"
-                @mouseenter="mouseenterHandle($event, item)" @mouseleave="mouseleaveHandle($event, item)"
-                @contextmenu="handleContextMenu($event, item, optionsHandle)">
-                <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
-                  :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
-                  :themeColor="themeColor" :style="{
+              }"
+                :item="item"
+                @click="mouseClickHandle($event, item)"
+                @mousedown="mousedownHandle($event, item)"
+                @mouseenter="mouseenterHandle($event, item)"
+                @mouseleave="mouseleaveHandle($event, item)"
+                @contextmenu="handleContextMenu($event, item, optionsHandle)"
+              >
+                <component
+                  class="edit-content-chart"
+                  :class="animationsClass(item.styles.animations)"
+                  :is="item.chartConfig.chartKey"
+                  :chartConfig="item"
+                  :themeSetting="themeSetting"
+                  :themeColor="themeColor"
+                  :style="{
                     ...useSizeStyle(item.attr),
                     ...getFilterStyle(item.styles),
                     ...getTransformStyle(item.styles)
-                  }"></component>
+                  }"
+                ></component>
               </edit-shape-box>
             </div>
           </div>
@@ -53,7 +83,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, computed } from 'vue'
+import { onMounted, computed, provide } from 'vue'
 import { chartColors } from '@/settings/chartThemes/index'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
@@ -61,7 +91,7 @@ import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle,
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
+import { SCALE_KEY } from '@/views/preview/hooks/useScale.hook'
 import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
 import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'
@@ -82,6 +112,8 @@ const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()
 const { dataSyncFetch, intervalDataSyncUpdate } = useSyncRemote()
 
+// 编辑时注入scale变量，消除警告
+provide(SCALE_KEY, null);
 
 // 布局处理
 useLayout()
@@ -139,6 +171,7 @@ const rangeStyle = computed(() => {
   const backgroundImage = chartEditStore.getEditCanvasConfig.backgroundImage
   const selectColor = chartEditStore.getEditCanvasConfig.selectColor
   const backgroundColor = background ? background : undefined
+
   const computedBackground = selectColor
     ? { background: backgroundColor }
     // : { background: `url(${backgroundImage}) no-repeat center center / cover !important` }

@@ -37,7 +37,7 @@
             <n-button size="small" type="primary" ghost @click="dataSyncUpdate()">
               <template #icon>
                 <n-icon>
-                  <SaveIcon></SaveIcon>
+                  <Save />
                 </n-icon>
               </template>
             </n-button>
@@ -53,6 +53,7 @@
 import { toRefs, Ref, reactive, computed } from 'vue'
 import { renderIcon, goDialog, goHome } from '@/utils'
 import { icon } from '@/plugins'
+import { Save } from '@vicons/carbon'
 import { useRemoveKeyboard } from '../../hooks/useKeyboard.hook'
 
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -65,12 +66,11 @@ import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayou
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 
 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
-const { SaveIcon } = icon.carbon
 const { setItem } = useChartLayoutStore()
-const { dataSyncUpdate } = useSyncRemote()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 const chartEditStore = useChartEditStore()
 const chartHistoryStore = useChartHistoryStore()
+const { dataSyncUpdate } = useSyncRemote()
 
 interface ItemType<T> {
   key: T
@@ -139,10 +139,10 @@ const clickHistoryHandle = (item: ItemType<HistoryStackEnum>) => {
   switch (item.key) {
     case HistoryStackEnum.BACK_STACK:
       chartEditStore.setBack()
-      break
+      break;
     case HistoryStackEnum.FORWARD_STACK:
       chartEditStore.setForward()
-      break
+      break;
   }
 }
 

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, shallowReactive } from 'vue'
+import { computed } from 'vue'
 import { renderIcon, goDialog, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
 import { PreviewEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
@@ -65,7 +65,7 @@ const sendHandle = () => {
   })
 }
 
-const btnList = shallowReactive([
+const btnList = [
   {
     select: true,
     title: '同步内容',
@@ -85,7 +85,7 @@ const btnList = shallowReactive([
     icon: renderIcon(SendIcon),
     event: sendHandle
   }
-])
+]
 
 const comBtnList = computed(() => {
   if (chartEditStore.getEditCanvas.isCodeEdit) {

@@ -199,9 +199,8 @@ const changeLayerType = (value: LayerModeEnum) => {
 
 <style lang="scss" scoped>
 $wight: 200px;
-@include go(content-layers) {
+@include go('content-layers') {
   width: $wight;
-  flex-shrink: 0;
   overflow: hidden;
   @extend .go-transition;
   .not-layer-text {

@@ -53,7 +53,8 @@ const componentVersionUpdatePolyfill = (newObject: any, sources: any) => {
           advancedEvents: {
             [EventLife.VNODE_MOUNTED]: undefined,
             [EventLife.VNODE_BEFORE_MOUNT]: undefined
-          }
+          },
+          interactEvents: []
         }
       }
       return newObject
@@ -135,7 +136,7 @@ export const useSync = () => {
       callBack?: (componentInstance: CreateComponentType) => void
     ) => {
       // 补充 class 上的方法
-      const newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
+      let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
       if (callBack) {
         if (changeId) {
           callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
@@ -163,7 +164,7 @@ export const useSync = () => {
         const listLength = projectData[key].length;
         for (const comItem of projectData[key]) {
           // 设置加载数量
-          const percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
+          let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
           chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
           // 判断类型
           if (comItem.isGroup) {

@@ -258,12 +258,10 @@ $carousel-image-height: 60vh;
     margin-top: -$--header-height;
     height: $go-login-height;
     width: 100vw;
-
     &-carousel {
       width: $carousel-width;
       margin-top: 100px;
       min-width: 500px;
-
       &-img {
         display: block;
         margin: 0 auto;
@@ -275,7 +273,6 @@ $carousel-image-height: 60vh;
       display: flex;
       flex-direction: column;
       margin: 0 160px;
-
       &-container {
         width: $width;
       }
@@ -311,18 +308,15 @@ $carousel-image-height: 60vh;
     width: 100vw;
     height: 100vh;
     background: url('@/assets/images/login/login-bg.png') no-repeat 0 -120px;
-
     .bg-slot {
       width: $carousel-width;
     }
-
     .bg-img-box {
       position: relative;
       display: flex;
       flex-wrap: wrap;
       width: 770px;
       margin-right: -20px;
-
       &-li {
         img {
           margin-right: 20px;
@@ -335,15 +329,12 @@ $carousel-image-height: 60vh;
     }
   }
 }
-
 @media only screen and (max-width: 1200px) {
-
   .bg-img-box,
   .bg-slot,
   .go-login-carousel {
     display: none !important;
   }
-
   .go-login-box-footer {
     position: relative;
   }

 <template>
   <div
     class="chart-item"
-    v-for="(item, index) in localStorageInfo.componentList"
+    v-for="(item, index) in chartEditStore.componentList"
     :class="animationsClass(item.styles.animations)"
     :key="item.id"
     :style="{
@@ -52,30 +52,29 @@ import { useLifeHandler } from '@/hooks'
 const { initDataPond, clearMittDataPondMap } = useChartDataPondFetch()
 const chartEditStore = useChartEditStore()
 
-const props = defineProps({
-  localStorageInfo: {
-    type: Object as PropType<ChartEditStorageType>,
-    required: true
-  }
-})
+// const props = defineProps({
+//   localStorageInfo: {
+//     type: Object as PropType<ChartEditStorageType>,
+//     required: true
+//   }
+// })
 
 // 主题色
 const themeSetting = computed(() => {
-  const chartThemeSetting = props.localStorageInfo.editCanvasConfig.chartThemeSetting
+  const chartThemeSetting = chartEditStore.editCanvasConfig.chartThemeSetting
   return chartThemeSetting
 })
 
-
 // 配置项
 const themeColor = computed(() => {
-  const colorCustomMergeData = colorCustomMerge(props.localStorageInfo.editCanvasConfig.chartCustomThemeColorInfo)
-  return colorCustomMergeData[props.localStorageInfo.editCanvasConfig.chartThemeColor]
+  const colorCustomMergeData = colorCustomMerge(chartEditStore.editCanvasConfig.chartCustomThemeColorInfo)
+  return colorCustomMergeData[chartEditStore.editCanvasConfig.chartThemeColor]
 })
 
 // 组件渲染结束初始化数据池
 clearMittDataPondMap()
 onMounted(() => {
-  initDataPond(props.localStorageInfo.requestGlobalConfig)
+  initDataPond(chartEditStore.requestGlobalConfig)
 })
 </script>
 

-import { ref, onMounted, onUnmounted} from 'vue'
+import { ref, provide, onMounted, onUnmounted } from 'vue'
 import { usePreviewFitScale, usePreviewScrollYScale, usePreviewScrollXScale, usePreviewFullScale } from '@/hooks/index'
 import type { ChartEditStorageType } from '../index.d'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
 
+export const SCALE_KEY = 'scale-value'
+
 export const useScale = (localStorageInfo: ChartEditStorageType) => {
   const entityRef = ref()
   const previewRef = ref()
   const width = ref(localStorageInfo.editCanvasConfig.width)
   const height = ref(localStorageInfo.editCanvasConfig.height)
+  const scaleRef = ref({ width: 1, height: 1 })
+
+  provide(SCALE_KEY, scaleRef);
+
+  const updateScaleRef = (scale: { width: number; height: number }) => {
+    // 这里需要解构，保证赋值给scaleRef的为一个新对象
+    // 因为scale始终为同一引用
+    scaleRef.value = { ...scale }
+  }
 
   // 屏幕适配
   onMounted(() => {
@@ -17,6 +28,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
           width.value as number,
           height.value as number,
           previewRef.value,
+          updateScaleRef
         )
         calcRate()
         windowResize()
@@ -34,6 +46,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
             const dom = entityRef.value
             dom.style.width = `${width.value * scale.width}px`
             dom.style.height = `${height.value * scale.height}px`
+            updateScaleRef(scale)
           }
         )
         calcRate()
@@ -53,6 +66,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
             const dom = entityRef.value
             dom.style.width = `${width.value * scale.width}px`
             dom.style.height = `${height.value * scale.height}px`
+            updateScaleRef(scale)
           }
         )
         calcRate()
@@ -68,6 +82,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
           width.value as number,
           height.value as number,
           previewRef.value,
+          updateScaleRef
         )
         calcRate()
         windowResize()
@@ -81,6 +96,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
 
   return {
     entityRef,
-    previewRef
+    previewRef,
+    scaleRef
   }
 }

 <template>
-  <div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`">
-    <template v-if="showEntity">
-      <!-- 实体区域 -->
-      <div ref="entityRef" class="go-preview-entity">
-        <!-- 缩放层 -->
-        <div ref="previewRef" class="go-preview-scale">
-          <!-- 展示层 -->
-          <div :style="previewRefStyle" v-if="show">
-            <!-- 渲染层 -->
-            <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template v-else>
-      <!-- 缩放层 -->
-      <div ref="previewRef" class="go-preview-scale">
-        <!-- 展示层 -->
-        <div :style="previewRefStyle" v-if="show">
-          <!-- 渲染层 -->
-          <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
-        </div>
-      </div>
-    </template>
-  </div>
+  <suspense>
+    <suspense-index></suspense-index>
+  </suspense>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { PreviewRenderList } from './components/PreviewRenderList'
-import { getFilterStyle, setTitle } from '@/utils'
-
-// THINGS_KIT 预览逻辑修改
-// import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
-import { getEditCanvasConfigStyle } from './utils'
-import { getSessionStorageInfo } from './external/usePreview'
-
-import { useComInstall } from './hooks/useComInstall.hook'
-import { useScale } from './hooks/useScale.hook'
-import { useStore } from './hooks/useStore.hook'
-import { PreviewScaleEnum } from '@/enums/styleEnum'
-import type { ChartEditStorageType } from './index.d'
-
-const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as ChartEditStorageType
-setTitle(`预览-${localStorageInfo.editCanvasConfig.projectName}`)
-
-const previewRefStyle = computed(() => {
-  return {
-    ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
-    ...getFilterStyle(localStorageInfo.editCanvasConfig)
-  }
-})
-
-const showEntity = computed(() => {
-  const type = localStorageInfo.editCanvasConfig.previewScaleType
-  return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
-})
-
-useStore(localStorageInfo)
-const { entityRef, previewRef } = useScale(localStorageInfo)
-const { show } = useComInstall(localStorageInfo)
+import suspenseIndex from './suspenseIndex.vue'
 </script>
-
-<style lang="scss" scoped>
-@include go('preview') {
-  position: relative;
-  height: 100vh;
-  width: 100vw;
-  @include background-image('background-image');
-  &.fit,
-  &.full {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    .go-preview-scale {
-      transform-origin: center center;
-    }
-  }
-  &.scrollY {
-    overflow-x: hidden;
-
-    .go-preview-scale {
-      transform-origin: left top;
-    }
-  }
-
-  &.scrollX {
-    overflow-y: hidden;
-
-    .go-preview-scale {
-      transform-origin: left top;
-    }
-  }
-
-  .go-preview-entity {
-    overflow: hidden;
-  }
-}
-</style>

+<template>
+  <div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`">
+    <template v-if="showEntity">
+      <!-- 实体区域 -->
+      <div ref="entityRef" class="go-preview-entity">
+        <!-- 缩放层 -->
+        <div ref="previewRef" class="go-preview-scale">
+          <!-- 展示层 -->
+          <div :style="previewRefStyle" v-if="show">
+            <!-- 渲染层 -->
+            <preview-render-list></preview-render-list>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <!-- 缩放层 -->
+      <div ref="previewRef" class="go-preview-scale">
+        <!-- 展示层 -->
+        <div :style="previewRefStyle" v-if="show">
+          <!-- 渲染层 -->
+          <preview-render-list></preview-render-list>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { PreviewRenderList } from './components/PreviewRenderList'
+import { getFilterStyle, setTitle } from '@/utils'
+import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
+import { useComInstall } from './hooks/useComInstall.hook'
+import { useScale } from './hooks/useScale.hook'
+import { useStore } from './hooks/useStore.hook'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
+import type { ChartEditStorageType } from './index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+
+await getSessionStorageInfo()
+const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType
+
+setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
+
+const previewRefStyle = computed(() => {
+  return {
+    ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
+    ...getFilterStyle(chartEditStore.editCanvasConfig)
+  }
+})
+
+const showEntity = computed(() => {
+  const type = chartEditStore.editCanvasConfig.previewScaleType
+  return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
+})
+
+useStore(chartEditStore)
+const { entityRef, previewRef } = useScale(chartEditStore)
+const { show } = useComInstall(chartEditStore)
+</script>
+
+<style lang="scss" scoped>
+@include go('preview') {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  @include background-image('background-image');
+  &.fit,
+  &.full {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    .go-preview-scale {
+      transform-origin: center center;
+    }
+  }
+  &.scrollY {
+    overflow-x: hidden;
+    .go-preview-scale {
+      transform-origin: left top;
+    }
+  }
+  &.scrollX {
+    overflow-y: hidden;
+    .go-preview-scale {
+      transform-origin: left top;
+    }
+  }
+  .go-preview-entity {
+    overflow: hidden;
+  }
+}
+</style>

 import { getSessionStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const chartEditStore = useChartEditStore()
 
 export interface ChartEditStorageType extends ChartEditStorage {
   id: string
@@ -16,11 +19,15 @@ export const getSessionStorageInfo = () => {
     StorageEnum.GO_CHART_STORAGE_LIST
   )
 
-  if(!storageList) return
-
-  for (let i = 0; i < storageList.length; i++) {
-    if (id.toString() === storageList[i]['id']) {
-      return storageList[i]
+  if (storageList) {
+    for (let i = 0; i < storageList.length; i++) {
+      if (id.toString() === storageList[i]['id']) {
+        const { editCanvasConfig, requestGlobalConfig, componentList } = storageList[i]
+        chartEditStore.editCanvasConfig = editCanvasConfig
+        chartEditStore.requestGlobalConfig = requestGlobalConfig
+        chartEditStore.componentList = componentList
+        return storageList[i]
+      }
     }
   }
 }