feat: 分页画布、组件优化及bug修复

@@ -28,8 +28,6 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-unused-vars': 'off',
-    'vue/no-unused-vars': 'off',
     'vue/multi-word-component-names': 'off',
     'vue/valid-template-root': 'off',
     'vue/no-mutating-props': 'off'

@@ -84,3 +84,15 @@ export enum MacKeyboard {
   ALT_SOURCE_KEY = '⌥',
   SPACE = 'Space'
 }
+
+// 同步状态枚举
+export enum SyncEnum {
+  // 等待
+  PENDING,
+  // 开始
+  START,
+  // 成功
+  SUCCESS,
+  // 失败
+  FAILURE
+}

@@ -20,7 +20,8 @@ export enum InteractEvents {
 // 全局组件交互回调事件触发的类型（当然可以自定义名称）
 export enum InteractEventOn {
   CLICK = 'click',
-  CHANGE = 'change'
+  CHANGE = 'change',
+  PAGE_CHANGE = 'page_change' // THINGS_KIT 修改多画布切换相关代码 用于切换画布
 }
 
 // 确定交互组件触发类型 key名称

+export enum PageOperateEnum {
+  PAGE_OPERATE_REMOVE = 'pageOperateRemove',
+  PAGE_OPERATE_COPY = 'pageOperateCopy',
+  PAGE_OPERATE_RENAME = 'pageOperateRename'
+}
+
+export enum PageOperateNameEnum {
+  PAGE_OPERATE_REMOVE = '删除',
+  PAGE_OPERATE_COPY = '复制',
+  PAGE_OPERATE_RENAME = '重命名'
+}

@@ -23,7 +23,7 @@ export const useChartInteract = (
   fnOnEvent.forEach(item => {
     const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
     if (index === -1) return
-    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+    const { Params, Header } = toRefs(chartEditStore.getComponentList[index].request.requestParams)
     Object.keys(item.interactFn).forEach(key => {
       if (Params.value[key]) {
         Params.value[key] = param[item.interactFn[key]]
@@ -42,7 +42,7 @@ export const useChartInteract = (
      * 在遍历图表数组，只要是目标项并且是联动组件则显示，否则隐藏
      */
     try {
-      chartEditStore.componentList.forEach((item: any) => {
+      chartEditStore.getComponentList.forEach((item: any) => {
         if (item.key !== 'Button') {
           if (selectTargetItems.includes(item.id)) {
             item.isInteractComponent = true
@@ -50,9 +50,9 @@ export const useChartInteract = (
         }
       })
       //优化循环性能
-      for (let i = 0, len = chartEditStore.componentList.length; i < len; i++) {
-        const compId = chartEditStore.componentList[i].id
-        const compItem = chartEditStore.componentList[i] as any
+      for (let i = 0, len = chartEditStore.getComponentList.length; i < len; i++) {
+        const compId = chartEditStore.getComponentList[i].id
+        const compItem = chartEditStore.getComponentList[i] as any
         if (status) {
           if (compItem.key !== 'Button') {
             if (selectTargetItems.includes(compId) && compItem.isInteractComponent) {

+import { toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'
+// import { useChartDataSocket } from '@/hooks/external/useChartDataSocket'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any },
+  interactEventOn: string,
+) => {
+  const chartEditStore = useChartEditStore()
+  const { data } = param
+  const { pageList } = data
+  const { interactEvents } = chartConfig.events
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === interactEventOn
+  })
+  if (fnOnEvent.length === 0) return
+  fnOnEvent.forEach(item => {
+    const { interactComponentId } = item
+    const findNextPageId = pageList.find((pageItem:PageChartEditStoreType) => pageItem.id===interactComponentId)?.id
+    if(!findNextPageId) return
+    // const { initial } = useChartDataSocket()
+    chartEditStore.setCurrentPageSelectId(findNextPageId)
+    // chartEditStore.pageConfig.pageList.forEach((pageItem:PageChartEditStoreType)=>{
+    //   pageItem.componentList.forEach((compItem)=>{
+    //     initial(compItem, useChartEditStore)
+    //   })
+    // })
+    // chartEditStore.setPageConfig(chartEditStore.pageConfig)
+    // const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+    // console.log(index)
+    // if (index === -1) return
+    // console.log(chartEditStore.getComponentList)
+    // const { Params, Header } = toRefs(chartEditStore.getComponentList[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 变更时，清除当前绑定内容
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const clearInteractEvent = (chartConfig: CreateComponentType) => {}

@@ -116,7 +116,7 @@ export const useChartDataFetch = (
      * 支持分组也可以接受ws
      * 如果是分组并且绑定了ws
      */
-    chartEditStore.componentList.forEach((item:CreateComponentType | CreateComponentGroupType)=>{
+    chartEditStore.getComponentList?.forEach((item:CreateComponentType | CreateComponentGroupType)=>{
       if(item.isGroup){
         if(item.request.requestUrl?.includes('ws')){
           initial(item, useChartEditStore, updateCallback)

@@ -4,25 +4,18 @@ import { useSocketStore } from "@/store/external/modules/socketStore";
 import { SocketReceiveMessageType, SocketSendMessageType } from "@/store/external/modules/socketStore.d";
 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
 import { getJwtToken, getShareJwtToken } from "@/utils/external/auth";
-import { useWebSocket, WebSocketResult } from "@vueuse/core";
+import { useWebSocket } from "@vueuse/core";
 import { onMounted, ref, unref } from "vue";
 import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d";
 import { isShareMode } from "@/views/share/hook";
 
 
 
-interface SocketConnectionPoolType {
-  ws: WebSocketResult<SocketReceiveMessageType>
-  url: string
-}
-
 interface SaveHistoryWsMessage {
   id: string
   message: SocketSendMessageType
 }
 
-const socketConnectionPool: SocketConnectionPoolType[] = []
-
 const saveHistoryWsMessage = ref([] as SaveHistoryWsMessage[])
 
 const parse = (value: string) => {
@@ -43,11 +36,7 @@ const getOriginUrl = (url: string) => {
 const getSocketInstance = (request: ExtraRequestConfigType) => {
   const { requestUrl, requestOriginUrl } = request
   const socketStore = useSocketStore()
-  const index = socketConnectionPool.findIndex(item => item.url === requestUrl)
-
-  if (~index) {
-    return socketConnectionPool[index].ws
-  }
+ 
   const token = isShareMode() ? getShareJwtToken() : getJwtToken()
   const socketUrl = `${getOriginUrl(requestOriginUrl || '')}${requestUrl}?token=${token}`
 
@@ -63,8 +52,6 @@ const getSocketInstance = (request: ExtraRequestConfigType) => {
     }
   })
 
-  socketConnectionPool.push({ url: requestUrl!, ws: instance })
-
   return instance
 }
 
@@ -125,8 +112,8 @@ export const useChartDataSocket = () => {
       })
     } catch (e) {
       console.log(`
-      错误位置：src/hooks/external/useChartDataSocket.ts
-      错误原因：${e}
+      错误位置: useChartDataSocket.ts
+      错误原因: ${e}
       `)
     }
   }

@@ -34,7 +34,7 @@ export const useChartInteract = (
   fnOnEvent.forEach((item, itemIndex) => {
     const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
     if (index === -1) return
-    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+    const { Params, Header } = toRefs(chartEditStore.getComponentList[index].request.requestParams)
     Object.keys(item.interactFn).forEach(key => {
       if (Params.value[key]) {
         Params.value[key] = param[item.interactFn[key]]
@@ -47,7 +47,7 @@ export const useChartInteract = (
     if (!Array.isArray(dataset)) return
     dataset.forEach((combinItem: any, combinIndex: number) => {
       if (itemIndex === combinIndex) {
-        combinItem.targetItem = chartEditStore.componentList[index]
+        combinItem.targetItem = chartEditStore.getComponentList[index]
       }
     })
     /**新增代码 */

@@ -109,15 +109,16 @@ export const useChartDataPondFetch = () => {
 
   // 初始化数据池
   const initDataPond = (useChartEditStore: ChartEditStoreType) => {
-    const { requestGlobalConfig } = useChartEditStore()
+    // const { requestGlobalConfig } = useChartEditStore()
+    const { getRequestGlobalConfig } = useChartEditStore()
     const chartEditStore = useChartEditStore()
     // 根据 mapId 查找对应的数据池配置
     for (let pondKey of mittDataPondMap.keys()) {
       const requestDataPondItem = computed(() => {
-        return requestGlobalConfig.requestDataPond.find(item => item.dataPondId === pondKey)
+        return getRequestGlobalConfig.requestDataPond.find(item => item.dataPondId === pondKey)
       }) as ComputedRef<RequestDataPondItemType>
       if (requestDataPondItem) {
-        newPondItemInterval(chartEditStore.requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
+        newPondItemInterval(chartEditStore.getRequestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
       }
     }
   }

@@ -23,11 +23,11 @@ export const useChartInteract = (
   if (fnOnEvent.length === 0) return
   fnOnEvent.forEach(item => {
 
-    const globalConfigPindAprndex = chartEditStore.requestGlobalConfig.requestDataPond.findIndex(cItem =>
+    const globalConfigPindAprndex = chartEditStore.getRequestGlobalConfig.requestDataPond.findIndex(cItem =>
       cItem.dataPondId === item.interactComponentId
     )
     if (globalConfigPindAprndex !== -1) {
-      const { Params, Header } = toRefs(chartEditStore.requestGlobalConfig.requestDataPond[globalConfigPindAprndex].dataPondRequestConfig.requestParams)
+      const { Params, Header } = toRefs(chartEditStore.getRequestGlobalConfig.requestDataPond[globalConfigPindAprndex].dataPondRequestConfig.requestParams)
 
       Object.keys(item.interactFn).forEach(key => {
         if (key in Params.value) {
@@ -40,7 +40,7 @@ export const useChartInteract = (
     } else {
       const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
       if (index === -1) return
-      const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+      const { Params, Header } = toRefs(chartEditStore.getComponentList[index].request.requestParams)
 
       Object.keys(item.interactFn).forEach(key => {
         if (key in Params.value) {

@@ -211,11 +211,16 @@ const updateVChart = (newData: SocketReceiveMessageType) => {
     unref(realTimeList).splice(0, 1)
   }
   realTimeList.value.push(record)
-  vChartRef.value?.setOption({
-    dataset: {
+  const dataset = {
       dimensions: ['ts', ...keys],
       source: toRaw(unref(realTimeList))
-    }
+  }
+  vChartRef.value?.setOption({
+    ...option.value,
+    dataset
+  },
+  {
+    notMerge: true // 修复ws 属性对应属性值不匹配
   })
 }
 

@@ -18,6 +18,7 @@ export const option = {
   buttonColor: '',
   buttonTextColor: 'white',
   buttonTextSize: '16',
+  buttonTextBold: 500,
   selectTargetItems: []
 }
 

@@ -48,6 +48,16 @@
         <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="文字加粗">
+      <setting-item name="">
+        <n-input-number :step="200" v-model:value="optionData.buttonTextBold" />
+      </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.buttonTextBold=100">
+          恢复默认
+        </n-button>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box :alone="true">
       <template #name>
         <n-text>目标</n-text>
@@ -126,7 +136,7 @@ const buttonTypeOptions = [
 const selectTargetItemOptions = ref<{ label: string; value: string }[]>([])
 
 onMounted(() => {
-  const componentList = chartEditStore.componentList.map(item => ({
+  const componentList = chartEditStore.getComponentList.map(item => ({
     label: item.chartConfig?.title,
     value: item.id
   }))

@@ -8,7 +8,7 @@ export const ButtonConfig: ConfigType = {
   key,
   chartKey,
   conKey,
-  title: '自定义按钮',
+  title: '切换菜单按钮',
   category: ChatCategoryEnum.INPUTS,
   categoryName: ChatCategoryEnumName.INPUTS,
   package: PackagesCategoryEnum.INFORMATIONS,

@@ -7,7 +7,7 @@
     :color="buttonColor"
     @click="onClick(option.value.selectTargetItems, true)"
   >
-    <span class="button-text-color">{{ dataset }}</span>
+    <span :style="`font-weight:${buttonTextBold}`" class="button-text-color">{{ dataset }}</span>
   </n-button>
 </template>
 
@@ -29,7 +29,7 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset } = toRefs(
+const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset,buttonTextBold } = toRefs(
   props.chartConfig.option
 )
 

+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 { PageButtonConfig } from './index'
+
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 暴露配置内容给用户
+  dataset: '第1页',
+  buttonType: 'primary',
+  buttonGhost: false,
+  buttonDashed: false,
+  buttonColor: '',
+  buttonTextColor: 'white',
+  buttonTextSize: '16',
+  buttonTextBold: 500,
+  selectTargetItems: []
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = PageButtonConfig.key
+  public attr = { ...chartInitConfig, w: 90, h: 40, zIndex: -1 }
+  public chartConfig = cloneDeep(PageButtonConfig)
+  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.buttonType" :options="buttonTypeOptions" />
+    </setting-item-box>
+    <setting-item-box name="虚线">
+      <setting-item name="是否开启">
+        <n-switch v-model:value="optionData.buttonDashed" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="透明">
+      <setting-item name="是否开启">
+        <n-switch v-model:value="optionData.buttonGhost" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="颜色">
+      <setting-item name="">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonColor"></n-color-picker>
+      </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.buttonColor=''">
+          恢复默认
+        </n-button>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="文字颜色">
+      <setting-item name="">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.buttonTextColor"></n-color-picker>
+      </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.buttonTextColor='white'">
+          恢复默认
+        </n-button>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="文字大小">
+      <setting-item name="">
+        <n-input-number v-model:value="optionData.buttonTextSize" />
+      </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.buttonTextSize='16'">
+          恢复默认
+        </n-button>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="文字加粗">
+      <setting-item name="">
+        <n-input-number :step="200" v-model:value="optionData.buttonTextBold" />
+      </setting-item>
+      <setting-item>
+        <n-button size="small" @click="optionData.buttonTextBold=100">
+          恢复默认
+        </n-button>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="true">
+      <setting-item name="按钮文字" :alone="true">
+        <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType, ref, onMounted } from 'vue'
+import { CollapseItem, SettingItemBox ,SettingItem} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+import { icon } from '@/plugins'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const chartEditStore = useChartEditStore()
+
+const { HelpOutlineIcon } = icon.ionicons5
+
+const targetHelpMessgae = ref(`勾选目标项,支持多个`)
+
+const buttonTypeOptions = [
+  {
+    label: 'default',
+    value: 'default'
+  },
+  {
+    label: 'primary',
+    value: 'primary'
+  },
+  {
+    label: 'tertiary',
+    value: 'tertiary'
+  },
+  {
+    label: 'info',
+    value: 'info'
+  },
+  {
+    label: 'success',
+    value: 'success'
+  },
+  {
+    label: 'warning',
+    value: 'warning'
+  },
+  {
+    label: 'error',
+    value: 'error'
+  }
+]
+
+const selectTargetItemOptions = ref<{ label: string; value: string }[]>([])
+
+onMounted(() => {
+  const componentList = chartEditStore.getComponentList?.map(item => ({
+    label: item.chartConfig?.title,
+    value: item.id
+  }))
+  selectTargetItemOptions.value = componentList
+})
+</script>
+<style lang="scss" scoped>
+.help-span {
+  display: flex;
+  flex-wrap: wrap;
+  width: 8vw;
+  color: white;
+}
+</style>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('PageButton', true)
+
+export const PageButtonConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '页面切换按钮',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'page_button.png'
+}

+<template>
+  <n-button
+    :style="{ width: `${w}px`, height: `${h}px` }"
+    :type="buttonType"
+    :dashed="buttonDashed"
+    :ghost="buttonGhost"
+    :color="buttonColor"
+    @click="onClick(useChartEditStore().getPageConfig)"
+  >
+    <span :style="`font-weight:${buttonTextBold}`" class="button-text-color">{{ dataset }}</span>
+  </n-button>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch, onMounted, ref } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks/external/useButtonPageChangeInteract.hook'
+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 { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset, buttonTextBold } = toRefs(
+  props.chartConfig.option
+)
+
+const option = shallowReactive({
+  value: cloneDeep(props.chartConfig.option)
+})
+
+const interactPageId = ref('')
+
+const onClick = (v: any) => {
+  // useChartInteract(
+  //   props.chartConfig,
+  //   useChartEditStore,
+  //   { [ComponentInteractParamsEnum.DATA]: v },
+  //   InteractEventOn.CHANGE,
+  //   status
+  // )
+  interactPageId.value = v
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: v },
+    InteractEventOn.PAGE_CHANGE,
+  )
+}
+
+onMounted(() => {
+  // onClick(option.value.selectTargetItems)
+  // onClick(useChartEditStore().getPageConfig)
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    // onClick(newData.tabValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(()=>interactPageId.value,(newValue:Recordable)=>{
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: newValue },
+    InteractEventOn.PAGE_CHANGE,
+  )
+},
+{
+  deep:true
+})
+</script>
+
+<style lang="scss" scoped>
+.button-text-color {
+  color: v-bind('buttonTextColor');
+  font-size: v-bind('`${buttonTextSize}px`');
+}
+</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: '选择项'
+  //       }
+  //     ]
+  //   }
+  // },
+  {
+    interactType: InteractEventOn.PAGE_CHANGE, // THINGS_KIT 修改多画布切换相关代码 用于切换画布
+    interactName: '画布切换',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATA]: [
+        {
+          value: ComponentInteractParamsEnum.DATA,
+          label: '选择项'
+        }
+      ]
+    }
+  }
+]

@@ -39,12 +39,11 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, onMounted, ref, watch } from 'vue'
+import { PropType, onMounted, ref, watch, unref } from 'vue'
 import { option, shareEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { getConfigurationList, setConfigurationIsShare } from '@/api/external/common/index'
 import { ConfigurationItemType } from '@/api/external/common/model'
-import { Platform } from './help'
 
 const props = defineProps({
   optionData: {
@@ -65,7 +64,12 @@ const getConfigurationOptions = async (params: object) => {
       value: item.id,
       ...item
     }))
+    if (props.optionData.dataset) {
+      const selected = items.find(item => item.id === props.optionData.dataset)
+      selected && (props.optionData.isShare = selected.viewType === shareEnum.PUBLIC_VIEW)
+    }
   }
+
 }
 
 watch(
@@ -90,12 +94,16 @@ const handleUpdateValue = (value: string, options: ConfigurationItemType) => {
 }
 
 const handleChange = async (value: boolean) => {
-  const res = await setConfigurationIsShare(!configurationId.value ? props.optionData.dataset : configurationId.value, value, {
+  const currentConfigurationId = !configurationId.value ? props.optionData.dataset : configurationId.value
+  const res = await setConfigurationIsShare(currentConfigurationId, value, {
     isShare: value
   })
   if (res) {
     window.$message.success('操作成功！')
-     await getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
+    await getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
+    const currentItem = unref(configurationOptions).find(item => item.id === currentConfigurationId)
+    const { viewType, organizationId, platform, publicId } = currentItem || {}
+    Object.assign(props.optionData, { isShare: viewType === shareEnum.PUBLIC_VIEW, organizationId, platform, publicId } as typeof option)
   }
 }
 </script>

@@ -16,6 +16,7 @@ interface ScadaLinkParamsType {
   mode: ScadaModeEnum;
   platform: Platform;
   publicId?: string;
+  parentPageIsPublic?: boolean
 }
 
 const getRandomString = () => Number(Math.random().toString().substring(2)).toString(36);
@@ -36,15 +37,16 @@ export const encode = (record: Recordable) => {
 
 
 export const createScadaPageLink = (
-  record: Partial<Record<'id' | 'organizationId' | 'platform' | 'publicId', string>>,
+  record: Partial<ScadaLinkParamsType>,
   mode: ScadaModeEnum = ScadaModeEnum.DESIGN,
   open = true
 ) => { 
   const params: ScadaLinkParamsType = {
-    configurationId: record.id!,
+    configurationId: record.configurationId!,
     organizationId: record.organizationId!,
     mode: mode,
     platform: record.platform as Platform,
+    parentPageIsPublic: record.parentPageIsPublic
   };
 
   if (mode === ScadaModeEnum.SHARE) {

@@ -9,11 +9,9 @@
         </path>
       </svg>
     </div>
-    <iframe v-if="iframeLink" id="iframeContent" :src="iframeLink" :width="w" :height="h"
-      style="border-width: 0"></iframe>
-    <n-empty v-else class="empty" size="huge" description="暂未绑定页面">
-
-    </n-empty>
+    <iframe v-if="iframeLink" id="iframeContent" :src="iframeLink" :width="w" :height="h" style="border-width: 0">
+    </iframe>
+    <n-empty v-else class="empty" size="huge" :description="description"></n-empty>
   </div>
 </template>
 
@@ -26,6 +24,7 @@ import { useFullScreen } from '@/packages/components/external/Charts/utls/fullSc
 import { isDevMode } from '@/utils/external/env'
 import { createScadaPageLink, ScadaModeEnum } from './help'
 import { option as typeOption } from './config'
+import { isShareMode } from '@/views/share/hook'
 
 const props = defineProps({
   chartConfig: {
@@ -56,14 +55,21 @@ const isDev = isDevMode()
 
 const iframeLink = ref('')
 
+const description = ref('暂未绑定页面')
+
 // 编辑更新
 watch(
   () => props.chartConfig.option.dataset,
   (newData: string) => {
+    if (isShareMode() && !(props.chartConfig.option as typeof typeOption).isShare) {
+      description.value = '组态页面暂未公开'
+      return
+    }
+
     const { dataset, publicId, organizationId, platform, isShare } = props.chartConfig.option as typeof typeOption
 
     if (!dataset) return
-    iframeLink.value = createScadaPageLink({ id: dataset, platform, publicId, organizationId, }, isShare ? ScadaModeEnum.SHARE : ScadaModeEnum.LIGHTBOX, false)
+    iframeLink.value = createScadaPageLink({ configurationId: dataset, platform, publicId, organizationId, parentPageIsPublic: isShareMode() }, isShare ? ScadaModeEnum.SHARE : ScadaModeEnum.LIGHTBOX, false)
   },
   {
     immediate: true

@@ -24,7 +24,7 @@ const props = defineProps({
   sourceSrc: {
     type: String
   },
-  autoplay: {
+  autoPlay: {
     type: Boolean
   },
   name: {
@@ -82,13 +82,13 @@ const fingerprintResult = ref<Nullable<GetResult>>(null)
 const options: VideoJsPlayerOptions & Recordable = {
   language: 'zh-CN', // 设置语言
   controls: true, // 是否显示控制条
-  preload: 'auto', // 预加载
-  autoplay: true, // 是否自动播放
+  // preload: 'auto', // 预加载
+  autoplay: props.autoPlay ? true : false, // 是否自动播放
   fluid: false, // 自适应宽高
   poster: props?.avatar || '',
   // src: getSource() || '', // 要嵌入的视频源的源 URL
   sources: [],
-  muted: true,
+  muted: props.autoPlay ? true : false,
   userActions: {
     hotkeys: true
   },
@@ -147,8 +147,10 @@ watch(
   async (newData: any) => {
     const result = await getSource()
     // props.sourceSrc = newData
-    videoPlayer?.src(result) as any
-    videoPlayer?.play()
+    if(props.autoPlay){
+      videoPlayer?.src(result) as any
+      videoPlayer?.play()
+    }
   },
   {
     immediate: true
@@ -190,3 +192,8 @@ defineExpose({
   }
 }
 </style>
+<style>
+.vjs-poster {
+  background-size: 100% !important;
+}
+</style>

 <template>
   <div>
-    <VideoPlay :w="w" :h="h" :sourceSrc="option.dataset" :autoPlay="autoplay" :avatar="option.poster" />
+    <VideoPlay :w="w" :h="h" :sourceSrc="option.dataset" :autoPlay="option.autoplay" :avatar="option.poster" />
   </div>
 </template>
 <script setup lang="ts">
@@ -22,7 +22,8 @@ const { autoplay, dataset, poster, url } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
   dataset: configOption.dataset,
-  poster: configOption.poster
+  poster: configOption.poster,
+  autoplay:configOption.autoplay
 })
 
 watch(
@@ -48,6 +49,16 @@ watch(
     immediate: true
   }
 )
+
+watch(
+  () => autoplay?.value,
+  (newData:boolean) => {
+    option.autoplay = newData
+  },
+  {
+    immediate: true
+  }
+)
 </script>
 
 <style lang="scss" scoped></style>

@@ -73,7 +73,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
   const chartEditStore = useChartEditStore()
   //判断只要是分组并且分组绑定了ws
   let hasGroupWs = false
-  chartEditStore.componentList.some((item: CreateComponentType) => {
+  chartEditStore.getComponentList.some((item: CreateComponentType) => {
     if (item.request.requestUrl?.includes('ws')) {
       hasGroupWs = true
     }

@@ -60,7 +60,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
   const chartEditStore = useChartEditStore()
   //判断只要是分组并且分组绑定了ws
   let hasGroupWs = false
-  chartEditStore.componentList.some((item: CreateComponentType) => {
+  chartEditStore.getComponentList.some((item: CreateComponentType) => {
     if (item.request.requestUrl?.includes('ws')) {
       hasGroupWs = true
     }

@@ -41,7 +41,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   const chartEditStore = useChartEditStore()
   //判断只要是分组并且分组绑定了ws
   let hasGroupWs = false
-  chartEditStore.componentList.some((item: CreateComponentType) => {
+  chartEditStore.getComponentList.some((item: CreateComponentType) => {
     if (item.request.requestUrl?.includes('ws')) {
       hasGroupWs = true
     }

@@ -13,6 +13,7 @@ import { OverrideTextBarrageConfig } from '@/packages/components/external/Inform
 import { OverrideTextGradientConfig } from '@/packages/components/external/Informations/Texts/OverrideTextGradient'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
 import { ButtonConfig } from '@/packages/components/external/Informations/Inputs/Button'
+import { PageButtonConfig } from '@/packages/components/external/Informations/Inputs/PageButton'
 import { TreeConfig } from '@/packages/components/external/Informations/Inputs/Tree'
 import { CameraConfig } from '@/packages/components/external/Informations/Mores/Camera'
 import { SingleCameraConfig } from '@/packages/components/external/Informations/Mores/SingleCamera'
@@ -87,6 +88,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)//重写信息下的轮播图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)//重写信息下的select
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, ButtonConfig)//新增信息下的按钮
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, PageButtonConfig)//新增信息下的切换页面按钮
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, TreeConfig)//新增信息下的树形控件
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideIframeConfig)//重写信息下的远程加载网页
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)//重写信息下的日期

@@ -14,7 +14,7 @@ export const groupTitle = "分组"
 // 主题配置
 export const theme = {
   // 默认是否开启深色主题
-  darkTheme: true,
+  darkTheme: false,
   //默认主题色
   appTheme: '#51d6a9',
   appThemeDetail: null,

@@ -9,7 +9,7 @@ import { useFilterFn } from "@/hooks/external/useFilterFn";
 
 
 // const KEYS_SEPARATOR = ','
-const chartEditStore = useChartEditStore(pinia)
+// const chartEditStore = useChartEditStore(pinia) //放在这里总是报错
 export const useSocketStore = defineStore({
   id: 'useSocketStore',
   state: (): SocketStoreType => ({
@@ -26,6 +26,7 @@ export const useSocketStore = defineStore({
      * @returns 
      */
     getSocketComponentsRecord(): SocketComponentRecord[] {
+      const chartEditStore = useChartEditStore(pinia)
       const socketComponents = chartEditStore.getComponentList.filter(item => (item.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET)
       return socketComponents.map(item => {
         const { request, id } = item
@@ -261,6 +262,7 @@ export const useSocketStore = defineStore({
        * 修改后的代码
        * 修改ws绑定单个文本组件，然后有多个，并且进行分组，显示的信息为原始信息，而非过滤函数返回的信息
        */
+      const chartEditStore = useChartEditStore(pinia)
       chartEditStore.getComponentList.forEach(targetItem => {
         if (targetItem.isGroup) {
           /**

@@ -23,7 +23,7 @@ export enum EditCanvasTypeEnum {
   IS_CREATE = 'isCreate',
   IS_DRAG = 'isDrag',
   IS_SELECT = 'isSelect',
-  IS_CODE_EDIT="isCodeEdit"
+  IS_CODE_EDIT = "isCodeEdit"
 }
 
 // 编辑区域
@@ -96,7 +96,7 @@ export interface EditCanvasConfigType {
   // 图表主题颜色
   [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType
   // 自定义图表主题颜色
-  [EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO]?: CustomColorsType[] 
+  [EditCanvasConfigEnum.CHART_CUSTOM_THEME_COLOR_INFO]?: CustomColorsType[]
   // 图表全局配置
   [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType
   // 图表主题颜色
@@ -149,7 +149,19 @@ export enum ChartEditStoreEnum {
   // 以下需要存储
   EDIT_CANVAS_CONFIG = 'editCanvasConfig',
   REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig',
-  COMPONENT_LIST = 'componentList'
+  COMPONENT_LIST = 'componentList',
+
+  // THINGS_KIT 修改多画布切换相关代码
+  PAGE_LIST_ID = 'id',
+
+  // THINGS_KIT 修改多画布切换相关代码
+  PAGE_LIST_TITLE = 'title',
+
+  // THINGS_KIT 修改多画布切换相关代码
+  PAGE_CONFIG = 'pageConfig',
+
+  // THINGS_KIT 修改多画布切换相关代码
+  PAGE_LIST = 'pageList'
 }
 
 // 请求公共类型
@@ -200,7 +212,19 @@ export interface RequestConfigType extends RequestPublicConfigType {
 }
 
 // Store 类型
-export interface ChartEditStoreType {
+// export interface ChartEditStoreType {
+//   [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
+//   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
+//   [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
+//   [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType
+//   [ChartEditStoreEnum.TARGET_CHART]: TargetChartType
+//   [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType
+//   [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
+//   [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
+// }
+
+// THINGS_KIT 修改多画布切换相关代码 修改代码在注释之间 Store 类型
+export interface PageChartEditStoreType {
   [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
   [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
@@ -209,11 +233,34 @@ export interface ChartEditStoreType {
   [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType
   [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
   [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
+  [ChartEditStoreEnum.PAGE_LIST_ID]: string
+  [ChartEditStoreEnum.PAGE_LIST_TITLE]: string
+}
+//
+
+// THINGS_KIT 修改多画布切换相关代码 修改代码在注释之间
+export interface PageChartListItem {
+  currentActiveIndex: number
+  currentActiveId: string
+  pageList: PageChartEditStoreType[]
 }
 
-// 存储数据类型
+export interface ChartEditStoreType {
+  pageConfig: PageChartListItem
+  [EditCanvasTypeEnum.EDIT_LAYOUT_DOM]: HTMLElement | null
+  [EditCanvasTypeEnum.EDIT_CONTENT_DOM]: HTMLElement | null
+}
+//
+
+// // 存储数据类型
+// export interface ChartEditStorage {
+//   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
+//   [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
+//   [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
+// }
+
+// THINGS_KIT 修改多画布切换相关代码 修改代码在注释之间 存储数据类型
 export interface ChartEditStorage {
-  [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
-  [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
-  [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
+  [ChartEditStoreEnum.PAGE_CONFIG]: PageChartListItem
 }
+//

@@ -26,17 +26,19 @@ import {
   TargetChartType,
   RecordChartType,
   RequestGlobalConfigType,
-  EditCanvasConfigType
+  EditCanvasConfigType,
+  PageChartListItem,
+  PageChartEditStoreType,
+  EditCanvasTypeEnum
 } from './chartEditStore.d'
-
-import {useChartDataSocket} from "@/hooks/external/useChartDataSocket";
+import { useChartDataSocket } from "@/hooks/external/useChartDataSocket";
 import { pinia } from '@/store'
-const chartHistoryStore = useChartHistoryStore(pinia)
-const settingStore = useSettingStore(pinia)
-// 编辑区域内容
-export const useChartEditStore = defineStore({
-  id: 'useChartEditStore',
-  state: (): ChartEditStoreType => ({
+
+
+function createNewPageItem(id: string = getUUID(), title = '页面'): PageChartEditStoreType {
+  return {
+    id,
+    title,
     // 画布属性
     editCanvas: {
       // 编辑区域 Dom
@@ -45,9 +47,9 @@ export const useChartEditStore = defineStore({
       // 偏移量
       offset: 20,
       // 系统控制缩放
-      scale: 1,
+      scale: 0.5, //默认是1
       // 用户控制的缩放
-      userScale: 1,
+      userScale: 0.5, //默认是1
       // 锁定缩放
       lockScale: false,
       // 初始化
@@ -137,103 +139,243 @@ export const useChartEditStore = defineStore({
     },
     // 图表数组（需存储给后端）
     componentList: []
+  }
+}
+
+const chartHistoryStore = useChartHistoryStore(pinia)
+
+const settingStore = useSettingStore(pinia)
+
+// 编辑区域内容
+
+// THINGS_KIT 修改多画布切换相关代码 修改代码在注释之间 源代码基本进行注释处理，未删除源代码
+export const useChartEditStore = defineStore({
+  id: 'useChartEditStore',
+  state: (): ChartEditStoreType => ({
+    editLayoutDom: null,
+    editContentDom: null,
+    pageConfig: {
+      currentActiveIndex: 1,
+      currentActiveId: '1',
+      pageList: [
+        createNewPageItem('1', '第 1 页')
+      ]
+    },
+    //
   }),
   getters: {
     getMousePosition(): MousePositionType {
-      return this.mousePosition
+      // return this.mousePosition
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage]?.mousePosition
     },
     getRightMenuShow(): boolean {
-      return this.rightMenuShow
+      // return this.rightMenuShow
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage]?.rightMenuShow
     },
     getEditCanvas(): EditCanvasType {
-      return this.editCanvas
+      // return this.editCanvas
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage]?.editCanvas
     },
     getEditCanvasConfig(): EditCanvasConfigType {
-      return this.editCanvasConfig
+      // return this.editCanvasConfig
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage]?.editCanvasConfig
     },
     getTargetChart(): TargetChartType {
-      return this.targetChart
+      // return this.targetChart
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage]?.targetChart
     },
     getRecordChart(): RecordChartType | undefined {
-      return this.recordChart
+      // return this.recordChart
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage]?.recordChart
     },
     getRequestGlobalConfig(): RequestGlobalConfigType {
-      return this.requestGlobalConfig
+      // return this.requestGlobalConfig
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage]?.requestGlobalConfig
     },
     getComponentList(): Array<CreateComponentType | CreateComponentGroupType> {
-      return this.componentList
+      // return this.componentList
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage]?.componentList
+    },
+    getPageConfig(): ChartEditStoreType['pageConfig'] {
+      return this.pageConfig
+    },
+    getPageList(): PageChartListItem['pageList'] {
+      return this.pageConfig.pageList
     }
   },
   actions: {
+    // * 设置当前页面EditCanvasConfig配置
+    setPageEditCanvasConfig(editCanvasConfig: EditCanvasConfigType) {
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      this.pageConfig.pageList[findCurrentPage].editCanvasConfig = editCanvasConfig
+    },
+    // * 设置当前页面全局配置
+    setPageRequestGlobalConfig(requestGlobalConfig: RequestGlobalConfigType) {
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      this.pageConfig.pageList[findCurrentPage].requestGlobalConfig = requestGlobalConfig
+    },
+    // * 设置页面配置
+    setPageConfig(pageConfig: ChartEditStoreType['pageConfig']) {
+      this.pageConfig = pageConfig
+    },
+    // * 设置页面列表
+    setPageList(pageList: PageChartEditStoreType[]) {
+      this.pageConfig.pageList = pageList
+    },
+    getPageIndexByPageItem(page: PageChartEditStoreType) {
+      return this.pageConfig.pageList.findIndex(pageItem => pageItem.id === page.id)
+    },
+    // * 根据页面id删除对应列表
+    pageIdRemovePageItem(page: PageChartEditStoreType) {
+      if (this.pageConfig.pageList.length <= 1) {
+        this.pageConfig.currentActiveIndex = 0
+        this.addPageList()
+      }
+      const findCurrentPageIndex = this.getPageIndexByPageItem(page)
+      let nextIndex = findCurrentPageIndex + 1
+      if (!this.pageConfig.pageList[nextIndex]) nextIndex = 0
+      this.setCurrentPageSelectId(this.pageConfig.pageList[nextIndex].id)
+      this.pageConfig.pageList.splice(findCurrentPageIndex, 1)
+    },
+    copyPage(page: PageChartEditStoreType) {
+      const index = this.getPageIndexByPageItem(page)
+      const copySource = this.pageConfig.pageList[index]
+      const { title } = copySource
+      const target = cloneDeep(copySource)
+      const newId = getUUID()
+      Object.assign(target, { id: newId, title: `${title} 副本` } as PageChartEditStoreType)
+      target.componentList.forEach(item => item.id = getUUID())
+      this.pageConfig.pageList.push(target)
+      this.pageConfig.currentActiveIndex++
+      this.setCurrentPageSelectId(newId)
+    },
+    // * 当前页面置空
+    emptyPageList(): void {
+      this.pageConfig.pageList = []
+    },
+    // * 当前页面组件列表置空
+    emptyPageComponentList(): void {
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      this.pageConfig.pageList[findCurrentPage].componentList = []
+    },
+    // * 设备当前页面组件列表
+    setPageComponentList(componentList: Array<CreateComponentType | CreateComponentGroupType>): void {
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      this.pageConfig.pageList[findCurrentPage].componentList = componentList
+    },
+    // * 当前页面追加数据项
+    addPageList(pageItem?: PageChartEditStoreType) {
+      pageItem = pageItem || createNewPageItem(getUUID(), `第 ${++this.pageConfig.currentActiveIndex} 页`)
+      this.pageConfig.pageList.push(pageItem)
+    },
+    // * 当前页面的选中id
+    setCurrentPageSelectId(currentActiveId: string) {
+      this.pageConfig.currentActiveId = currentActiveId
+    },
     // * 获取需要存储的数据项
     getStorageInfo(): ChartEditStorage {
+      // return {
+      //   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
+      //   [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,
+      //   [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
+      // }
       return {
-        [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
-        [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,
-        [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
+        [ChartEditStoreEnum.PAGE_CONFIG]: this.getPageConfig,
       }
     },
+    setEditCanvasDom(key: EditCanvasTypeEnum.EDIT_LAYOUT_DOM | EditCanvasTypeEnum.EDIT_CONTENT_DOM, value: Nullable<HTMLElement>) {
+      this[key] = value
+    },
     // * 设置 editCanvas 数据项
     setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
-      this.editCanvas[key] = value
+      // this.editCanvas[key] = value
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage].editCanvas[key] = value
     },
     // * 设置 editCanvasConfig（需保存后端） 数据项
     setEditCanvasConfig<T extends keyof EditCanvasConfigType, K extends EditCanvasConfigType[T]>(key: T, value: K) {
-      this.editCanvasConfig[key] = value
+      // this.editCanvasConfig[key] = value
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage].editCanvasConfig[key] = value
     },
     // * 设置右键菜单
     setRightMenuShow(value: boolean) {
-      this.rightMenuShow = value
+      // this.rightMenuShow = value
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage].rightMenuShow = value
     },
     // * 设置目标数据 hover
     setTargetHoverChart(hoverId?: TargetChartType['hoverId']) {
-      this.targetChart.hoverId = hoverId
+      // this.targetChart.hoverId = hoverId
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage].targetChart.hoverId = hoverId
     },
     // * 设置目标数据 select
-    setTargetSelectChart(selectId?: string | string[], push: boolean = false) {
+    setTargetSelectChart(selectId?: string | string[], push = false) {
       // 重复选中
-      if (this.targetChart.selectId.find((e: string) => e === selectId)) return
+      // if (this.targetChart.selectId.find((e: string) => e === selectId)) return
+      if (this.getTargetChart.selectId.find((e: string) => e === selectId)) return
 
       // 无 id 清空
       if (!selectId) {
-        this.targetChart.selectId = []
+        // this.targetChart.selectId = []
+        this.getTargetChart.selectId = []
         return
       }
       // 多选
       if (push) {
         // 字符串
         if (isString(selectId)) {
-          this.targetChart.selectId.push(selectId)
+          // this.targetChart.selectId.push(selectId)
+          this.getTargetChart.selectId.push(selectId)
           return
         }
         // 数组
         if (isArray(selectId)) {
-          this.targetChart.selectId.push(...selectId)
+          // this.targetChart.selectId.push(...selectId)
+          this.getTargetChart.selectId.push(...selectId)
           return
         }
       } else {
         // 字符串
         if (isString(selectId)) {
-          this.targetChart.selectId = [selectId]
+          // this.targetChart.selectId = [selectId]
+          this.getTargetChart.selectId = [selectId]
           return
         }
         // 数组
         if (isArray(selectId)) {
-          this.targetChart.selectId = selectId
+          // this.targetChart.selectId = selectId
+          this.getTargetChart.selectId = selectId
           return
         }
       }
     },
     // * 设置记录数据
     setRecordChart(item: RecordChartType | undefined) {
-      this.recordChart = cloneDeep(item)
+      // this.recordChart = cloneDeep(item)
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      return this.pageConfig.pageList[findCurrentPage].recordChart = cloneDeep(item)
     },
     // * 设置鼠标位置
     setMousePosition(x?: number, y?: number, startX?: number, startY?: number): void {
-      if (x) this.mousePosition.x = x
-      if (y) this.mousePosition.y = y
-      if (startX) this.mousePosition.startX = startX
-      if (startY) this.mousePosition.startY = startY
+      // if (x) this.mousePosition.x = x
+      // if (y) this.mousePosition.y = y
+      // if (startX) this.mousePosition.startX = startX
+      // if (startY) this.mousePosition.startY = startY
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      if (x) this.pageConfig.pageList[findCurrentPage].mousePosition.x = x
+      if (y) this.pageConfig.pageList[findCurrentPage].mousePosition.y = y
+      if (startX) this.pageConfig.pageList[findCurrentPage].mousePosition.startX = startX
+      if (startY) this.pageConfig.pageList[findCurrentPage].mousePosition.startY = startY
     },
     // * 找到目标 id 数据的下标位置，id可为父级或子集数组（无则返回-1）
     fetchTargetIndex(id?: string): number {
@@ -242,8 +384,8 @@ export const useChartEditStore = defineStore({
         loadingFinish()
         return -1
       }
-      const targetIndex = this.componentList.findIndex(e => e.id === targetId)
-
+      // const targetIndex = this.componentList.findIndex(e => e.id === targetId)
+      const targetIndex = this.getComponentList.findIndex(e => e.id === targetId)
       // 当前
       if (targetIndex !== -1) {
         return targetIndex
@@ -297,10 +439,14 @@ export const useChartEditStore = defineStore({
         chartHistoryStore.createAddHistory([componentInstance])
       }
       if (isHead) {
-        this.componentList.unshift(componentInstance)
+        // this.componentList.unshift(componentInstance)
+        const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+        this.pageConfig.pageList[findCurrentPage].componentList.unshift(componentInstance)
         return
       }
-      this.componentList.push(componentInstance)
+      // this.componentList.push(componentInstance)
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      this.pageConfig.pageList[findCurrentPage].componentList.push(componentInstance)
     },
     // * 删除组件
     removeComponentList(id?: string | string[], isHistory = true): void {
@@ -320,10 +466,12 @@ export const useChartEditStore = defineStore({
              * 修改ws绑定组件，然后删除这个组件，ws还在继续发送消息问题
              * 修改代码在//之间，其余源码未做修改
              */
-            const {disconnectWs}=useChartDataSocket()
+            const { disconnectWs } = useChartDataSocket()
             disconnectWs(this.getComponentList[index])
             //
-            this.componentList.splice(index, 1)
+            // this.componentList.splice(index, 1)
+            const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+            this.pageConfig.pageList[findCurrentPage].componentList.splice(index, 1)
           }
         })
         isHistory && chartHistoryStore.createDeleteHistory(history)
@@ -358,13 +506,21 @@ export const useChartEditStore = defineStore({
     // * 更新组件列表某一项的值
     updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) {
       if (index < 1 && index > this.getComponentList.length) return
-      this.componentList[index] = newData
+      // this.componentList[index] = newData
+      const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+      this.pageConfig.pageList[findCurrentPage].componentList[index] = newData
     },
     // * 设置页面样式属性
     setPageStyle<T extends keyof CSSStyleDeclaration>(key: T, value: any): void {
-      const dom = this.getEditCanvas.editContentDom
-      if (dom) {
-        dom.style[key] = value
+      try {
+        const dom = this.editContentDom
+        if (dom) {
+          if (key) {
+            dom.style[key] = value
+          }
+        }
+      } catch (e) {
+        console.log(e)
       }
     },
     // * 移动组件列表层级位置到两端
@@ -523,7 +679,7 @@ export const useChartEditStore = defineStore({
           return e
         }
         const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
-        const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [ recordCharts.charts ]
+        const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [recordCharts.charts]
         // 多项
         targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
           this.addComponentList(parseHandle(e), undefined, true)
@@ -543,7 +699,9 @@ export const useChartEditStore = defineStore({
     setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) {
       // 处理画布
       if (HistoryItem.targetType === HistoryTargetTypeEnum.CANVAS) {
-        this.editCanvas = HistoryItem.historyData[0] as EditCanvasType
+        // this.editCanvas = HistoryItem.historyData[0] as EditCanvasType
+        const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+        this.pageConfig.pageList[findCurrentPage].editCanvas = HistoryItem.historyData[0] as EditCanvasType
         return
       }
 
@@ -551,7 +709,7 @@ export const useChartEditStore = defineStore({
       this.setTargetSelectChart()
 
       // 重新选中
-      let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
+      const historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
       if (isArray(historyData)) {
         // 选中目标元素，支持多个
         historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
@@ -760,7 +918,9 @@ export const useChartEditStore = defineStore({
         })
         newSelectIds.forEach((id: string) => {
           // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理)
-          const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
+          // const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
+          const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+          const item = this.pageConfig.pageList[findCurrentPage].componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
           const { x, y, w, h } = item.attr
           const { l, t, r, b } = groupAttr
           // 左
@@ -848,7 +1008,7 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 锁定
-    setLock(status: boolean = true, isHistory: boolean = true) {
+    setLock(status = true, isHistory = true) {
       try {
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return
@@ -877,11 +1037,11 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 解除锁定
-    setUnLock(isHistory: boolean = true) {
+    setUnLock(isHistory = true) {
       this.setLock(false, isHistory)
     },
     // * 隐藏
-    setHide(status: boolean = true, isHistory: boolean = true) {
+    setHide(status = true, isHistory = true) {
       try {
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return
@@ -910,25 +1070,30 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 显示
-    setShow(isHistory: boolean = true) {
+    setShow(isHistory = true) {
       this.setHide(false, isHistory)
     },
     // ----------------
     // * 设置页面大小
     setPageSize(scale: number): void {
-      this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`)
-      this.setPageStyle('width', `${this.editCanvasConfig.width * scale}px`)
+      // this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`)
+      // this.setPageStyle('width', `${this.editCanvasConfig.width * scale}px`)
+      this.setPageStyle('height', `${this.getEditCanvasConfig.height * scale}px`)
+      this.setPageStyle('width', `${this.getEditCanvasConfig.width * scale}px`)
     },
     // * 计算缩放
     computedScale() {
-      if (this.getEditCanvas.editLayoutDom) {
+      if (this.editLayoutDom) {
         // 现有展示区域
-        const width = this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
-        const height = this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
+        const width = this.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
+        const height = this.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
 
         // 用户设定大小
-        const editCanvasWidth = this.editCanvasConfig.width
-        const editCanvasHeight = this.editCanvasConfig.height
+        // const editCanvasWidth = this.editCanvasConfig.width
+        // const editCanvasHeight = this.editCanvasConfig.height
+        const findCurrentPage = this.pageConfig.pageList.findIndex(pageItem => pageItem.id === this.pageConfig.currentActiveId)
+        const editCanvasWidth = this.pageConfig.pageList[findCurrentPage].editCanvasConfig.width
+        const editCanvasHeight = this.pageConfig.pageList[findCurrentPage].editCanvasConfig.height
 
         // 需保持的比例
         const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5))
@@ -974,3 +1139,4 @@ export const useChartEditStore = defineStore({
     }
   }
 })
+//

@@ -2,12 +2,12 @@
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 import { NEllipsis, NImage, NSelect, NSpace, NText, SelectOption } from 'naive-ui';
-import { h } from 'vue';
+import { computed, h } from 'vue';
 import { useBackgroundSelect } from '@/utils/external/useBackgroundImageSelect';
 
 const emit = defineEmits(['bgChange'])
 const chartEditStore = useChartEditStore()
-const canvasConfig = chartEditStore.getEditCanvasConfig
+const canvasConfig = computed(() => chartEditStore.getEditCanvasConfig)
 
 const { getAllBackgroundImageList, getBackgroundImagePath } = useBackgroundSelect()
 
@@ -23,7 +23,7 @@ const handleUpdateValue = (value: string) => {
   emit('bgChange',value)
 }
 
-const removeBg = ()=> canvasConfig.backgroundImage = null
+const removeBg = ()=> canvasConfig.value.backgroundImage = null
 defineExpose({
   removeBg
 })

@@ -128,7 +128,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, watch } from 'vue'
+import { ref, nextTick, watch, computed } from 'vue'
 import { backgroundImageSize } from '@/settings/designSetting'
 import { swatchesColors } from '@/settings/chartThemes/index'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
@@ -150,7 +150,7 @@ const { ColorPaletteIcon } = icon.ionicons5
 const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon
 
 const chartEditStore = useChartEditStore()
-const canvasConfig = chartEditStore.getEditCanvasConfig
+const canvasConfig = computed(() => chartEditStore.getEditCanvasConfig)
 const editCanvas = chartEditStore.getEditCanvas
 
 const uploadFileListRef = ref()
@@ -208,7 +208,7 @@ const previewTypeList = [
 ]
 
 watch(
-  () => canvasConfig.selectColor,
+  () => canvasConfig.value.selectColor,
   newValue => {
     selectColorValue.value = newValue ? 0 : 1
   },
@@ -245,7 +245,7 @@ const beforeUploadHandle = async ({ file }) => {
 
 // 应用颜色
 const selectColorValueHandle = (value: number) => {
-  canvasConfig.selectColor = value == 0
+  canvasConfig.value.selectColor = value == 0
 }
 
 // THINGS_KIT 优化清除背景，背景选择下拉框值还存在
@@ -270,7 +270,7 @@ const switchSelectColorHandle = () => {
 // 清除颜色
 const clearColor = () => {
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND, undefined)
-  if (canvasConfig.backgroundImage) {
+  if (canvasConfig.value.backgroundImage) {
     chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
   }
   switchSelectColorHandle()

@@ -234,7 +234,7 @@ defineExpose({
         </NSelect>
       </NInputGroup>
     </SettingItem>
-    <SettingItem name="更新间隔，为 0 只会初始化">
+    <SettingItem v-if="requestContentTypeRef !== RequestContentTypeEnum.WEB_SOCKET" name="更新间隔，为 0 只会初始化">
       <NInputGroup>
         <NInputNumber v-model:value="requestIntervalValueRef" class="select-time-number" size="small" min="0"
           :show-button="false" placeholder="请输入数字" />

@@ -39,7 +39,7 @@ const getConfigurationData = (): RequestConfigType => {
       sql: unref(requestSQLContentRef)
     },
     requestParams: unref(requestParamsRef),
-    requestUrl: `${chartEditStore.requestGlobalConfig.requestOriginUrl}${unref(requestUrlRef)}`
+    requestUrl: `${chartEditStore.getRequestGlobalConfig.requestOriginUrl}${unref(requestUrlRef)}`
   }
 }
 

@@ -19,6 +19,6 @@ const currenPanel = ref(RequestParamsTypeEnum.HEADER)
     <NTabPane v-model:value="currenPanel" v-for="item in tabs" :name="item" :tab="item" :key="item" />
   </NTabs>
   <section>
-    <ParamsTable v-if="currenPanel === RequestParamsTypeEnum.HEADER" v-model:value="chartEditStore.requestGlobalConfig.requestParams.Header" />
+    <ParamsTable v-if="currenPanel === RequestParamsTypeEnum.HEADER" v-model:value="chartEditStore.getRequestGlobalConfig.requestParams.Header" />
   </section>
 </template>

@@ -42,16 +42,16 @@ const themeColor = computed(() => {
       }">
         <!-- 源地址 -->
         <SettingItem name="前置 URL">
-          <NInput v-model:value="chartEditStore.requestGlobalConfig.requestOriginUrl" default-value="http://127.0.0.1" :disabled="editDisabled"
+          <NInput v-model:value="chartEditStore.getRequestGlobalConfig.requestOriginUrl" default-value="http://127.0.0.1" :disabled="editDisabled"
             size="small" placeholder="例:http://127.0.0.1"></NInput>
         </SettingItem>
         <SettingItem name="更新间隔，为 0 只会初始化">
           <NInputGroup>
-            <NInputNumber v-model:value="chartEditStore.requestGlobalConfig.requestInterval" class="select-time-number"
+            <NInputNumber v-model:value="chartEditStore.getRequestGlobalConfig.requestInterval" class="select-time-number"
               size="small" min="0" :show-button="false" :disabled="editDisabled" placeholder="请输入数字">
             </NInputNumber>
             <!-- 单位 -->
-            <NSelect v-model:value="chartEditStore.requestGlobalConfig.requestIntervalUnit" class="select-time-options"
+            <NSelect v-model:value="chartEditStore.getRequestGlobalConfig.requestIntervalUnit" class="select-time-options"
               size="small" :default-value="RequestHttpIntervalEnum.SECOND" :options="selectTimeOptions as SelectOption[]"
               :disabled="editDisabled" />
           </NInputGroup>

@@ -49,7 +49,7 @@ const selectTarget = computed<CreateComponentType | CreateComponentGroupType | u
   const selectId = chartEditStore.getTargetChart.selectId
   // 排除多个
   if (selectId.length !== 1) return undefined
-  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+  const target = chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
   return target as CreateComponentType | CreateComponentGroupType
 })
 

@@ -49,7 +49,7 @@
         </n-input-group>
       </setting-item-box>
 
-      <setting-item-box :alone="true">
+      <setting-item-box v-if="!interactActionsIsPageChange" :alone="true">
         <template #name>
           <n-text>绑定</n-text>
           <n-tooltip trigger="hover">
@@ -72,8 +72,26 @@
           :options="fnEventsOptions()"
         />
       </setting-item-box>
+       
+      <!-- THINGS_KIT 修改多画布切换相关代码 用于切换画布 -->
+       <setting-item-box v-if="interactActionsIsPageChange" :alone="true">
+        <template #name>
+          <n-text>大屏</n-text>
+        </template>
+        <n-select
+          class="select-type-options"
+          value-field="id"
+          label-field="title"
+          size="tiny"
+          filterable
+          placeholder="请选择大屏"
+          v-model:value="item.interactComponentId"
+          :options="fnPageConfigEventsOptions()"
+        />
+      </setting-item-box>
+      <!-- THINGS_KIT 修改多画布切换相关代码 用于切换画布 -->
 
-      <setting-item-box v-if="fnDimensionsAndSource(item.interactOn).length" name="查询结果" :alone="true">
+      <setting-item-box  v-if="!interactActionsIsPageChange&&fnDimensionsAndSource(item.interactOn).length" name="查询结果" :alone="true">
         <n-table size="small" striped>
           <thead>
             <tr>
@@ -89,8 +107,9 @@
         </n-table>
       </setting-item-box>
 
-      <n-tag :bordered="false" type="primary"> 关联目标请求参数 </n-tag>
+      <n-tag v-if="!interactActionsIsPageChange" :bordered="false" type="primary"> 关联目标请求参数 </n-tag>
 
+    <div v-if="!interactActionsIsPageChange">
       <setting-item-box
         :name="requestParamsItem"
         v-for="requestParamsItem in requestParamsTypeList"
@@ -116,6 +135,7 @@
           暂无数据
         </n-text>
       </setting-item-box>
+    </div>
     </n-card>
   </n-collapse-item>
 </template>
@@ -131,11 +151,20 @@ import { icon } from '@/plugins'
 import noData from '@/assets/images/canvas/noData.png'
 import { goDialog } from '@/utils'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
+import {PageChartEditStoreType} from '@/store/modules/chartEditStore/chartEditStore.d'
 
 const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
 const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER]
 
+
+// THINGS_KIT 修改多画布切换相关代码 用于切换画布
+const interactActionsIsPageChange =  computed(() => {
+  const interactActions = targetData.value.interactActions
+  if (!interactActions) return []
+  return interactActions.map(value => value.interactType).includes(InteractEventOn.PAGE_CHANGE)
+})
+
 // 获取组件交互事件列表
 const interactActions = computed(() => {
   const interactActions = targetData.value.interactActions
@@ -154,12 +183,12 @@ const option = computed(() => {
 // 绑定组件数据 request
 const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
   if (!id) return {}
-  const globalConfigPindApr = chartEditStore.requestGlobalConfig.requestDataPond.find(item => {
+  const globalConfigPindApr = chartEditStore.getRequestGlobalConfig.requestDataPond.find(item => {
     return item.dataPondId === id
   })?.dataPondRequestConfig.requestParams
 
   if (globalConfigPindApr) return globalConfigPindApr[key]
-  return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
+  return chartEditStore.getComponentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
 }
 
 // 查询结果
@@ -202,7 +231,7 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
     )
   }
 
-  const filterOptionList = fnFlattern(chartEditStore.componentList).filter(item => {
+  const filterOptionList = fnFlattern(chartEditStore.getComponentList).filter(item => {
     // 排除自己
     const isNotSelf = item.id !== targetData.value.id
     // 排除静态组件
@@ -220,7 +249,7 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
     type: 'componentList'
   }))
 
-  const requestDataPond = chartEditStore.requestGlobalConfig.requestDataPond.map(item => ({
+  const requestDataPond = chartEditStore.getRequestGlobalConfig.requestDataPond.map(item => ({
     id: item.dataPondId,
     title: item.dataPondName,
     disabled: false,
@@ -234,10 +263,23 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
       }
     })
   })
-
+console.log(tarArr)
   return tarArr
 }
 
+// 大屏列表
+const fnPageConfigEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
+  const getPageList = chartEditStore.getPageList.map((pageItem:PageChartEditStoreType)=>{
+    return {
+      id:pageItem.id,
+      title:pageItem.title,
+      disabled: false,
+      type: 'componentList'
+    }
+  })
+  return getPageList
+}
+
 // 新增模块
 const evAddEventsFn = () => {
   targetData.value.events.interactEvents.push({

@@ -102,7 +102,8 @@ const selectTarget = computed(() => {
   const selectId = chartEditStore.getTargetChart.selectId
   // 排除多个
   if (selectId.length !== 1) return undefined
-  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+  // const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+  const target = chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
   if (target?.isGroup) {
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     tabsSelect.value = TabsEnum.CHART_SETTING

@@ -101,7 +101,7 @@ const selectTarget = computed(() => {
   const selectId = chartEditStore.getTargetChart.selectId
   // 排除多个
   if (selectId.length !== 1) return undefined
-  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+  const target = chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
   if (target?.isGroup) {
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     tabsSelect.value = TabsEnum.CHART_SETTING

 <template>
   <div class="go-edit-bottom">
+    <!-- THINGS_KIT 修改多画布切换相关代码 -->
+    <n-button v-if="chartEditStore.getPageList.length > 3" size="tiny" type="primary" ghost @click="pageContainerLeft">
+      <template #icon>
+        <n-icon>
+          <ArrowBackIcon />
+        </n-icon>
+      </template>
+    </n-button>
+    <div class="page-bottom-container">
+      <n-scrollbar x-scrollable ref="scrollBarRef">
+        <div class="page-scroll-container">
+          <template v-for="(pageItem) in chartEditStore.getPageList" :key="pageItem.id">
+            <n-button :color="chartEditStore.pageConfig.currentActiveId === pageItem.id ? 'green' : ''" size="small"
+              icon-placement="right" secondary strong>
+              <template #icon>
+                <n-dropdown trigger="click" @select="(key: string) => handleOperateMenu(key, pageItem)"
+                  :options="getMenuDisableOptions">
+                  <n-icon>
+                    <list-icon />
+                  </n-icon>
+                </n-dropdown>
+              </template>
+              <n-input v-if="pageItem.id === renamePageId" class="rename-input" v-model:value="pageRenameValue"
+                @keypress.enter="handleRenameBlur" @blur="handleRenameBlur(pageItem)" autofocus size="small"
+                placeholder="请输入页面名称"></n-input>
+              <span v-else @click="pageOperateCurrent(pageItem)">
+                {{ pageItem.title }}
+              </span>
+            </n-button>
+          </template>
+        </div>
+      </n-scrollbar>
+    </div>
+    <n-button v-if="chartEditStore.getPageList.length > 3" size="tiny" type="primary" ghost @click="pageContainerRight">
+      <template #icon>
+        <n-icon>
+          <ArrowForwardIcon />
+        </n-icon>
+      </template>
+    </n-button>
+    <n-button v-if="chartEditStore.getPageList.length < 20" size="small" secondary strong @click="pageOperateAdd">
+      <template #icon>
+        <n-icon><duplicate-icon /></n-icon>
+      </template>
+    </n-button>
+
     <n-space>
+      <!-- THINGS_KIT 修改多画布切换相关代码 -->
       <!-- 历史记录 -->
       <edit-history></edit-history>
       <!-- CTRL按键触发展示 -->
@@ -12,15 +59,8 @@
       <edit-shortcut-key />
 
       <!-- 缩放比例 -->
-      <n-select
-        ref="selectInstRef"
-        class="scale-btn"
-        v-model:value="filterValue"
-        size="mini"
-        :disabled="lockScale"
-        :options="filterOptions"
-        @update:value="selectHandle"
-      ></n-select>
+      <n-select ref="selectInstRef" class="scale-btn" v-model:value="filterValue" size="mini" :disabled="lockScale"
+        :options="filterOptions" @update:value="selectHandle"></n-select>
 
       <!-- 锁定缩放 -->
       <n-tooltip trigger="hover">
@@ -36,35 +76,28 @@
       </n-tooltip>
 
       <!-- 拖动 -->
-      <n-slider
-        class="scale-slider"
-        v-model:value="sliderValue"
-        :default-value="50"
-        :min="10"
-        :max="200"
-        :step="5"
-        :format-tooltip="sliderFormatTooltip"
-        :disabled="lockScale"
-        :marks="sliderMaks"
-        @update:value="sliderHandle"
-      ></n-slider>
+      <n-slider class="scale-slider" v-model:value="sliderValue" :default-value="50" :min="10" :max="200" :step="5"
+        :format-tooltip="sliderFormatTooltip" :disabled="lockScale" :marks="sliderMaks"
+        @update:value="sliderHandle"></n-slider>
     </n-space>
   </div>
 </template>
 
 <script setup lang="ts">
 import { SelectInst } from 'naive-ui'
-import { reactive, ref, toRefs, watchEffect } from 'vue'
+import { computed, reactive, ref, toRefs, unref, watchEffect } from 'vue'
 import { icon } from '@/plugins'
 import { EditHistory } from '../EditHistory/index'
 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 { EditCanvasTypeEnum, PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import type { MenuOption } from 'naive-ui'
+import { PageOperateEnum, PageOperateNameEnum } from '@/enums/external/pageOperateEnum'
 
-const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
+const { LockClosedOutlineIcon, LockOpenOutlineIcon, ListIcon, DuplicateIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5
 
 // 全局颜色
 const designStore = useDesignStore()
@@ -138,11 +171,76 @@ watchEffect(() => {
   filterValue.value = `${value}%`
   sliderValue.value = parseInt(value)
 })
+
+// THINGS_KIT 修改多画布切换相关代码
+
+const pageRenameValue = ref('')
+
+const renamePageId = ref('')
+
+const getMenuDisableOptions = computed<MenuOption[]>(() => {
+  return [
+    {
+      label: PageOperateNameEnum.PAGE_OPERATE_REMOVE,
+      key: PageOperateEnum.PAGE_OPERATE_REMOVE,
+      disabled: chartEditStore.pageConfig.pageList.length <= 1
+    },
+    {
+      label: PageOperateNameEnum.PAGE_OPERATE_COPY,
+      key: PageOperateEnum.PAGE_OPERATE_COPY,
+    },
+    {
+      label: PageOperateNameEnum.PAGE_OPERATE_RENAME,
+      key: PageOperateEnum.PAGE_OPERATE_RENAME,
+    },
+  ]
+})
+
+const handleOperateMenu = (key: string, pageItem: PageChartEditStoreType) => {
+  switch (key) {
+    case PageOperateEnum.PAGE_OPERATE_REMOVE:
+      chartEditStore.pageIdRemovePageItem(pageItem)
+      break;
+    case PageOperateEnum.PAGE_OPERATE_COPY:
+      chartEditStore.copyPage(pageItem)
+      break;
+    case PageOperateEnum.PAGE_OPERATE_RENAME:
+      pageRenameValue.value = pageItem.title
+      renamePageId.value = pageItem.id
+      break;
+  }
+}
+
+const handleRenameBlur = (pageItem: PageChartEditStoreType) => {
+  pageItem.title = unref(pageRenameValue)
+  renamePageId.value = ''
+}
+
+const pageOperateAdd = () => chartEditStore.addPageList()
+
+const pageOperateCurrent = (currentItem: PageChartEditStoreType) => {
+  chartEditStore.setCurrentPageSelectId(currentItem.id)
+}
+
+const scrollBarRef = ref()
+
+const movePageContainer = (left: number) => {
+  scrollBarRef.value.scrollBy({
+    left
+  })
+}
+
+const pageContainerLeft = () => movePageContainer(-30)
+
+const pageContainerRight = () => movePageContainer(30)
+
+// THINGS_KIT 修改多画布切换相关代码
 </script>
 
 <style lang="scss" scoped>
 $min-width: 500px;
 $max-width: 670px;
+
 @include go('edit-bottom') {
   width: 100%;
   min-width: $min-width;
@@ -151,24 +249,41 @@ $max-width: 670px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  .page-bottom-container {
+    max-width: 400px;
+
+    .page-scroll-container {
+      white-space: nowrap;
+      padding: 12px;
+      display: flex;
+      gap: 10px
+    }
+  }
+
   .bottom-ri {
     position: relative;
     top: 15px;
+
     .lock-icon {
       padding-top: 4px;
+
       &.color {
         color: v-bind('themeColor');
       }
     }
+
     .scale-btn {
       width: 90px;
       font-size: 12px;
+
       @include deep() {
         .n-base-selection-label {
           padding: 3px;
         }
       }
     }
+
     .scale-slider {
       position: relative;
       top: -4px;
@@ -176,4 +291,9 @@ $max-width: 670px;
     }
   }
 }
+
+.rename-input {
+  width: 80px !important;
+  max-width: 80px !important;
+}
 </style>

@@ -59,7 +59,7 @@ const startY = ref(0)
 const lines = reactive({ h: [], v: [] })
 
 const scale = computed(() => {
-  return chartEditStore.getEditCanvas.scale
+  return chartEditStore.getEditCanvas?.scale
 })
 
 // 滚动条拖动的高度

@@ -3,6 +3,9 @@ import { UploadCustomRequestOptions } from 'naive-ui'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { readFile, goDialog, JSONParse } from '@/utils'
 import { useSync } from '@/views/chart/hooks/useSync.hook'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const chartEditStore = useChartEditStore()
 
 export const useFile = () => {
   const importUploadFileListRef = ref()
@@ -20,6 +23,67 @@ export const useFile = () => {
     return true
   }
 
+  // THINGS_KIT 兼容导入之前的用户数据
+  const compatibleOldUserDataHook = (fileData:object)=>{
+    let userData:Recordable = fileData
+    if(!Reflect.get(fileData,'pageConfig')){
+      userData={
+        pageConfig:{
+          currentActiveId: "1",
+          currentActiveIndex: 1,
+          pageList:[
+            {
+              ...fileData,
+              id:"1",
+              title:"页面 1",
+              editCanvas: {
+                // 编辑区域 Dom
+                editLayoutDom: null,
+                editContentDom: null,
+                // 偏移量
+                offset: 20,
+                // 系统控制缩放
+                scale: 0.5,
+                // 用户控制的缩放
+                userScale: 0.5,
+                // 锁定缩放
+                lockScale: false,
+                // 初始化
+                isCreate: false,
+                // 拖拽中
+                isDrag: false,
+                // 框选中
+                isSelect: false,
+                // 同步中
+                // saveStatus: SyncEnum.PENDING,
+                // 代码编辑中
+                isCodeEdit: false
+              },
+              // 右键菜单
+              rightMenuShow: false,
+              // 鼠标定位
+              mousePosition: {
+                startX: 0,
+                startY: 0,
+                x: 0,
+                y: 0
+              },
+              // 目标图表
+              targetChart: {
+                hoverId: undefined,
+                selectId: []
+              },
+              // 记录临时数据（复制等）
+              recordChart: undefined,
+            }
+          ]
+        }
+      }
+    }
+    return userData
+  }
+  //
+
   // 上传-导入
   const importCustomRequest = (options: UploadCustomRequestOptions) => {
     const { file } = options
@@ -35,7 +99,11 @@ export const useFile = () => {
             onPositiveCallback: async () => {
               try {
                 fileData = JSONParse(fileData)
+                fileData = compatibleOldUserDataHook(fileData)
                 await updateComponent(fileData, false, true)
+                setTimeout(()=>{
+                  chartEditStore.setPageList(fileData.pageConfig.pageList)//延时处理
+                },1000)
                 window['$message'].success('导入成功！')
               } catch (error) {
                 console.log(error)
@@ -46,7 +114,11 @@ export const useFile = () => {
             onNegativeCallback: async () => {
               try {
                 fileData = JSONParse(fileData)
+                fileData = compatibleOldUserDataHook(fileData)
                 await updateComponent(fileData, true, true)
+                setTimeout(()=>{
+                  chartEditStore.setPageList(fileData.pageConfig.pageList)//延时处理
+                },1000)
                 window['$message'].success('导入成功！')
               } catch (error) {
                 console.log(error)

@@ -184,8 +184,8 @@ export const useMouseHandle = () => {
     // 若此时按下了 CTRL, 表示多选
     if (window.$KeyboardActive?.ctrl) {
       // 若已选中，则去除
-      if (chartEditStore.targetChart.selectId.includes(item.id)) {
-        const exList = chartEditStore.targetChart.selectId.filter(e => e !== item.id)
+      if (chartEditStore.getTargetChart.selectId.includes(item.id)) {
+        const exList = chartEditStore.getTargetChart.selectId.filter(e => e !== item.id)
         chartEditStore.setTargetSelectChart(exList)
       } else {
         chartEditStore.setTargetSelectChart(item.id, true)

-import { onUnmounted, onMounted } from 'vue'
+import { onUnmounted, onMounted, watch } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -9,11 +9,12 @@ export const useLayout = (fn: () => Promise<void>) => {
   let removeScale: Function = () => { }
   onMounted(async () => {
     // 设置 Dom 值(ref 不生效先用 document)
-    chartEditStore.setEditCanvas(
+    chartEditStore.setEditCanvasDom(
       EditCanvasTypeEnum.EDIT_LAYOUT_DOM,
       document.getElementById('go-chart-edit-layout')
     )
-    chartEditStore.setEditCanvas(
+
+    chartEditStore.setEditCanvasDom(
       EditCanvasTypeEnum.EDIT_CONTENT_DOM,
       document.getElementById('go-chart-edit-content')
     )
@@ -25,6 +26,10 @@ export const useLayout = (fn: () => Promise<void>) => {
 
   })
 
+  watch(() => chartEditStore.pageConfig.currentActiveId, () => {
+    chartEditStore.computedScale()
+  })
+
   onUnmounted(() => {
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_LAYOUT_DOM, null)
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_CONTENT_DOM, null)

 <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>
@@ -84,7 +54,6 @@
 
 <script lang="ts" setup>
 import { onMounted, computed, provide } from 'vue'
-import { chartColors } from '@/settings/chartThemes/index'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
@@ -116,7 +85,7 @@ const { dataSyncFetch, intervalDataSyncUpdate } = useSyncRemote()
 provide(SCALE_KEY, null)
 
 // 布局处理
-useLayout(async () => {})
+useLayout(async () => { })
 
 // 点击事件
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
@@ -177,7 +146,6 @@ const rangeStyle = computed(() => {
     // : { background: `url(${backgroundImage}) no-repeat center center / cover !important` }
     // THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致
     : { background: `url(${getBackgroundImagePath(backgroundImage!)}) no-repeat center center / cover !important` }
-    console.log(getBackgroundImagePath(backgroundImage!))
   return {
     ...computedBackground,
     width: 'inherit',

@@ -155,8 +155,8 @@ const groupMousedownHandle = (e: MouseEvent) => {
   const id = props.componentGroupData.id
   if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
     // 若已选中，则去除
-    if (chartEditStore.targetChart.selectId.includes(id)) {
-      const exList = chartEditStore.targetChart.selectId.filter(e => e !== id)
+    if (chartEditStore.getTargetChart.selectId.includes(id)) {
+      const exList = chartEditStore.getTargetChart.selectId.filter(e => e !== id)
       chartEditStore.setTargetSelectChart(exList)
     } else {
       chartEditStore.setTargetSelectChart(id, true)

@@ -169,8 +169,8 @@ const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
   const id = item.id
   if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
     // 若已选中，则去除
-    if (chartEditStore.targetChart.selectId.includes(id)) {
-      const exList = chartEditStore.targetChart.selectId.filter(e => e !== id)
+    if (chartEditStore.getTargetChart.selectId.includes(id)) {
+      const exList = chartEditStore.getTargetChart.selectId.filter(e => e !== id)
       chartEditStore.setTargetSelectChart(exList)
     } else {
       chartEditStore.setTargetSelectChart(id, true)

@@ -34,7 +34,9 @@ watch(
       return
     }
     percentage.value = newValue
-    showModal.value = newValue > 0
+    // console.log(newValue)
+    // showModal.value = newValue > 0
+    showModal.value = newValue > 100
   }
 )
 </script>

 import { fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ProjectInfoEnum } from '@/store/external/modules/projectInfo.d'
-import { onUnmounted, unref } from 'vue'
-import { saveInterval } from '@/settings/designSetting'
+import { unref } from 'vue'
 import throttle from 'lodash/throttle'
 import html2canvas from 'html2canvas'
 import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
@@ -12,6 +10,7 @@ import { useProjectInfoStore } from '@/store/external/modules/projectInfo'
 import { useSync } from '../useSync.hook'
 import { BaseUpdateContentParams, DateViewConfigurationInfoType } from '@/api/external/contentSave/model/contentModel'
 import { useRole } from './business/useRole'
+import { ChartEditStoreType, PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 /**
  * * base64转file
@@ -49,22 +48,93 @@ export const useSyncRemote = () => {
     projectInfoStore.setProjectInfo(projectData)
   }
 
+  // THINGS_KIT 兼容之前的用户数据
+  const compatibleOldUserDataHook = (fileData: ChartEditStoreType | PageChartEditStoreType): ChartEditStoreType => {
+    let userData = fileData
+    if (!Reflect.get(fileData, 'pageConfig')) {
+      userData = {
+        editContentDom: null,
+        editLayoutDom: null,
+        pageConfig: {
+          currentActiveId: "1",
+          currentActiveIndex: 1,
+          pageList: [
+            {
+              ...(fileData as PageChartEditStoreType),
+              id: "1",
+              title: "页面 1",
+              editCanvas: {
+                // 编辑区域 Dom
+                editLayoutDom: null,
+                editContentDom: null,
+                // 偏移量
+                offset: 20,
+                // 系统控制缩放
+                scale: 0.5,
+                // 用户控制的缩放
+                userScale: 0.5,
+                // 锁定缩放
+                lockScale: false,
+                // 初始化
+                isCreate: false,
+                // 拖拽中
+                isDrag: false,
+                // 框选中
+                isSelect: false,
+                // 同步中
+                // saveStatus: SyncEnum.PENDING,
+                // 代码编辑中
+                isCodeEdit: false,
+              },
+              // 右键菜单
+              rightMenuShow: false,
+              // 鼠标定位
+              mousePosition: {
+                startX: 0,
+                startY: 0,
+                x: 0,
+                y: 0
+              },
+              // 目标图表
+              targetChart: {
+                hoverId: undefined,
+                selectId: []
+              },
+              // 记录临时数据（复制等）
+              recordChart: undefined,
+            }
+          ]
+        }
+      }
+    }
+    return userData as ChartEditStoreType
+  }
+  //
+
   // * 数据获取
   const dataSyncFetch = async () => {
     // FIX:重新执行dataSyncFetch需清空chartEditStore.componentList,否则会导致图层重复
     // 切换语言等操作会导致重新执行 dataSyncFetch,此时pinia中并未清空chartEditStore.componentList，导致图层重复
-    chartEditStore.componentList = []
+    // chartEditStore.componentList = []
+    // chartEditStore.emptyPageList()
+    // chartEditStore.emptyPageComponentList()
     projectInfoStore.setSaveStatus(SyncEnum.START)
     try {
       const id = fetchRouteParamsLocation()
       const res = await getDataView(id)
       updateStoreInfo(res)
-      // 更新全局数据
-      await updateComponent(JSONParse(res.dataViewContent.content))
-      setTimeout(() => {
-        projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
-      }, 1000)
+      let contentData = JSONParse(res.dataViewContent.content) as ChartEditStoreType
+      contentData = compatibleOldUserDataHook(contentData)
 
+      contentData.pageConfig.currentActiveId = contentData.pageConfig.pageList[0].id
+      // 更新全局数据
+      await updateComponent(contentData)
+      // setTimeout(() => {
+      //   projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
+      //   chartEditStore.setPageConfig(contentData.pageConfig) //延时1秒，不然会造成第一个页面数组叠加
+      // }, 1000)
+      chartEditStore.setPageConfig(contentData.pageConfig)
+      projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
     } catch (error) {
       projectInfoStore.setSaveStatus(SyncEnum.FAILURE)
     }
@@ -109,37 +179,37 @@ export const useSyncRemote = () => {
   }, 3000)
 
   //thumbnailSyncUpdate 缩略图保存
-  const thumbnailSyncUpdate = throttle(async(updateImg = true)=>{
-    const {  state, organizationId, dataViewName } = projectInfoStore.getProjectInfo
-      if (updateImg) {
-        // 获取缩略图片
-        const range = document.querySelector('.go-edit-range') as HTMLElement
-        // 生成图片
-        const canvasImage: HTMLCanvasElement = await html2canvas(range, {
-          backgroundColor: null,
-          allowTaint: true,
-          useCORS: true,
-          logging: false
+  const thumbnailSyncUpdate = throttle(async (updateImg = true) => {
+    const { state, organizationId, dataViewName } = projectInfoStore.getProjectInfo
+    if (updateImg) {
+      // 获取缩略图片
+      const range = document.querySelector('.go-edit-range') as HTMLElement
+      // 生成图片
+      const canvasImage: HTMLCanvasElement = await html2canvas(range, {
+        backgroundColor: null,
+        allowTaint: true,
+        useCORS: true,
+        logging: false
+      })
+      // 上传预览图
+      const uploadParams = new FormData()
+      uploadParams.append(
+        'file',
+        base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
+      )
+      const uploadRes = await uploadFile(uploadParams)
+      // 保存预览图
+      if (uploadRes) {
+        await saveDataViewList({
+          name: dataViewName,
+          organizationId,
+          state,
+          id: fetchRouteParamsLocation(),
+          thumbnail: `${uploadRes.fileStaticUri}`
         })
-        // 上传预览图
-        const uploadParams = new FormData()
-        uploadParams.append(
-          'file',
-          base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
-        )
-        const uploadRes = await uploadFile(uploadParams)
-        // 保存预览图
-        if (uploadRes) {
-          await saveDataViewList({
-            name: dataViewName,
-            organizationId,
-            state,
-            id: fetchRouteParamsLocation(),
-            thumbnail: `${uploadRes.fileStaticUri}`
-          })
-          window['$message'].success('保存缩略图成功！')
-        }
+        window['$message'].success('保存缩略图成功！')
       }
+    }
   })
 
   // * 定时处理

-import { ref, nextTick, toRaw } from 'vue'
+import { ref, nextTick, toRaw, computed } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { renderIcon, loadingError } from '@/utils'
@@ -28,7 +28,7 @@ const chartEditStore = useChartEditStore()
  * @param {number} n > 2
  * @returns
  */
-export const divider = (n: number = 3) => {
+export const divider = (n = 3) => {
   return {
     type: 'divider',
     key: `d${n}`
@@ -272,6 +272,6 @@ export const useContextMenu = () => {
     handleContextMenu,
     onClickOutSide,
     handleMenuSelect,
-    mousePosition: chartEditStore.getMousePosition
+    mousePosition: computed(() => chartEditStore.getMousePosition)
   }
 }

 import { getUUID } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { ChartEditStoreEnum, ChartEditStorage, PageChartEditStoreType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
@@ -104,30 +104,50 @@ export const useSync = () => {
   const updateComponent = async (projectData: ChartEditStorage, isReplace = false, changeId = false) => {
     if (isReplace) {
       // 清除列表
-      chartEditStore.componentList = []
+      // chartEditStore.componentList = []
+      // chartEditStore.emptyPageList()
+      chartEditStore.emptyPageComponentList()
       // 清除历史记录
       chartHistoryStore.clearBackStack()
       chartHistoryStore.clearForwardStack()
     }
     // 画布补丁处理
-    projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig)
+    // projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig)
+    // projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig)
 
     // 列表组件注册
-    projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
-      const intComponent = (target: CreateComponentType) => {
-        if (!window['$vue'].component(target.chartConfig.chartKey)) {
-          window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
-          window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig))
-        }
-      }
+    // projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
+    //   const intComponent = (target: CreateComponentType) => {
+    //     if (!window['$vue'].component(target.chartConfig.chartKey)) {
+    //       window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
+    //       window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig))
+    //     }
+    //   }
 
-      if (e.isGroup) {
-        (e as CreateComponentGroupType).groupList.forEach(groupItem => {
-          intComponent(groupItem)
-        })
-      } else {
-        intComponent(e as CreateComponentType)
-      }
+    //   if (e.isGroup) {
+    //     (e as CreateComponentGroupType).groupList.forEach(groupItem => {
+    //       intComponent(groupItem)
+    //     })
+    //   } else {
+    //     intComponent(e as CreateComponentType)
+    //   }
+    // })
+    projectData.pageConfig.pageList.forEach(async (e: PageChartEditStoreType) => {
+        e.componentList.forEach((item:CreateComponentType | CreateComponentGroupType)=>{
+            const intComponent = (target: CreateComponentType) => {
+              if (!window['$vue'].component(target.chartConfig.chartKey)) {
+                window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
+                window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig))
+              }
+            }
+            if (item.isGroup) {
+              (item as CreateComponentGroupType).groupList.forEach(groupItem => {
+                intComponent(groupItem)
+              })
+            } else {
+              intComponent(item as CreateComponentType)
+            }
+          })
     })
 
     // 创建函数-重新创建是为了处理类种方法消失的问题
@@ -136,7 +156,7 @@ export const useSync = () => {
       callBack?: (componentInstance: CreateComponentType) => void
     ) => {
       // 补充 class 上的方法
-      let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
+      const newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
       if (_componentInstance.chartConfig.redirectComponent) {
         _componentInstance.chartConfig.dataset && (newComponent.option.dataset = _componentInstance.chartConfig.dataset)
         newComponent.chartConfig.title = _componentInstance.chartConfig.title
@@ -162,49 +182,92 @@ export const useSync = () => {
     }
 
     // 数据赋值
-    for (const key in projectData) {
+    // const key in projectData
+    for (const key in projectData.pageConfig) {
       // 组件
-      if (key === ChartEditStoreEnum.COMPONENT_LIST) {
-        let loadIndex = 0
-        const listLength = projectData[key].length
-        for (const comItem of projectData[key]) {
-          // 设置加载数量
-          let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
-          chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
-          // 判断类型
-          if (comItem.isGroup) {
-            // 创建分组
-            let groupClass = new PublicGroupConfigClass()
-            if (changeId) {
-              groupClass = componentMerge(groupClass, { ...comItem, id: getUUID() })
-            } else {
-              groupClass = componentMerge(groupClass, comItem)
-            }
+      //ChartEditStoreEnum.COMPONENT_LIST
+      if (key === ChartEditStoreEnum.PAGE_LIST) {
+        // let loadIndex = 0
+        // const listLength = projectData[key].length
+        // const listLength =projectData.pageConfig[key].length
+        // for (const comItem of projectData[key]) {
+        //   // 设置加载数量
+        //   let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
+        //   chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
+        //   // 判断类型
+        //   if (comItem.isGroup) {
+        //     // 创建分组
+        //     let groupClass = new PublicGroupConfigClass()
+        //     if (changeId) {
+        //       groupClass = componentMerge(groupClass, { ...comItem, id: getUUID() })
+        //     } else {
+        //       groupClass = componentMerge(groupClass, comItem)
+        //     }
 
-            // 异步注册子应用
-            const targetList: CreateComponentType[] = []
-            for (const groupItem of (comItem as CreateComponentGroupType).groupList) {
-              await create(groupItem, e => {
-                targetList.push(e)
-              })
+        //     // 异步注册子应用
+        //     const targetList: CreateComponentType[] = []
+        //     for (const groupItem of (comItem as CreateComponentGroupType).groupList) {
+        //       await create(groupItem, e => {
+        //         targetList.push(e)
+        //       })
+        //     }
+        //     groupClass.groupList = targetList
+
+        //     // 分组插入到列表
+        //     chartEditStore.addComponentList(groupClass, false, true)
+        //   } else {
+        //     await create(comItem as CreateComponentType)
+        //   }
+        //   if (percentage === 100) {
+        //     // 清除历史记录
+        //     chartHistoryStore.clearBackStack()
+        //     chartHistoryStore.clearForwardStack()
+        //   }
+        // }
+        projectData.pageConfig.pageList.forEach(async (e: PageChartEditStoreType) => {
+            let loadIndex = 0
+            const listLength =  e.componentList.length
+            for (const comItem of e.componentList) {
+              // 设置加载数量
+              const percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
+              chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
+              // 判断类型
+              if (comItem.isGroup) {
+                // 创建分组
+                let groupClass = new PublicGroupConfigClass()
+                if (changeId) {
+                  groupClass = componentMerge(groupClass, { ...comItem, id: getUUID() })
+                } else {
+                  groupClass = componentMerge(groupClass, comItem)
+                }
+    
+                // 异步注册子应用
+                const targetList: CreateComponentType[] = []
+                for (const groupItem of (comItem as CreateComponentGroupType).groupList) {
+                  await create(groupItem, e => {
+                    targetList.push(e)
+                  })
+                }
+                groupClass.groupList = targetList
+    
+                // 分组插入到列表
+                // chartEditStore.addComponentList(groupClass, false, true)
+                chartEditStore.addComponentList(groupClass, false, true)
+              } else {
+                await create(comItem as CreateComponentType)
+              }
+              if (percentage === 100) {
+                // 清除历史记录
+                chartHistoryStore.clearBackStack()
+                chartHistoryStore.clearForwardStack()
+              }
             }
-            groupClass.groupList = targetList
-
-            // 分组插入到列表
-            chartEditStore.addComponentList(groupClass, false, true)
-          } else {
-            await create(comItem as CreateComponentType)
-          }
-          if (percentage === 100) {
-            // 清除历史记录
-            chartHistoryStore.clearBackStack()
-            chartHistoryStore.clearForwardStack()
-          }
-        }
+       })
       } else {
         // 非组件(顺便排除脏数据)
         if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
-        componentMerge(chartEditStore[key], projectData[key], true)
+        // componentMerge(chartEditStore[key], projectData[key], true)
+        // componentMerge(chartEditStore[key], projectData[key], true)
       }
     }
 

@@ -59,8 +59,9 @@ window['$message'].warning('请不要刷新此窗口！')
 
 // 从sessionStorage 获取数据
 async function getDataBySession() {
-  const localStorageInfo: ChartEditStorageType = (await getSessionStorageInfo()) as unknown as ChartEditStorageType
-  setTitle(`编辑-${localStorageInfo.editCanvasConfig.projectName}`)
+  // const localStorageInfo: ChartEditStorageType = (await getSessionStorageInfo()) as unknown as ChartEditStorageType
+  const localStorageInfo = (await getSessionStorageInfo()) as  ChartEditStorageType as any
+  setTitle(`编辑-${localStorageInfo?.getEditCanvasConfig?.projectName}`)
   content.value = JSONStringify(localStorageInfo)
 }
 setTimeout(getDataBySession)

 <template>
   <div
     class="chart-item"
-    v-for="(item, index) in chartEditStore.componentList"
+    v-for="(item, index) in chartEditStore.getComponentList"
     :class="animationsClass(item.styles.animations)"
     :key="item.id"
     :style="{
@@ -30,9 +30,9 @@
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
-      :style="{
-	    ...getSizeStyle(item.attr),
-	    ...getFilterStyle(item.styles)
+      :style="{	    
+        ...getSizeStyle(item.attr),	    
+        ...getFilterStyle(item.styles)
       }"
       v-on="useLifeHandler(item)"
     ></component>
@@ -40,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, onMounted } from 'vue'
+import { PropType, computed, onMounted, watch } from 'vue'
 import { useChartDataPondFetch } from '@/hooks'
 import { ChartEditStorageType } from '../../index.d'
 import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
@@ -64,14 +64,14 @@ const chartEditStore = useChartEditStore()
 
 // 主题色
 const themeSetting = computed(() => {
-  const chartThemeSetting = chartEditStore.editCanvasConfig.chartThemeSetting
+  const chartThemeSetting = chartEditStore.getEditCanvasConfig?.chartThemeSetting
   return chartThemeSetting
 })
 
 // 配置项
 const themeColor = computed(() => {
-  const colorCustomMergeData = colorCustomMerge(chartEditStore.editCanvasConfig.chartCustomThemeColorInfo)
-  return colorCustomMergeData[chartEditStore.editCanvasConfig.chartThemeColor]
+  const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig?.chartCustomThemeColorInfo)
+  return colorCustomMergeData[chartEditStore.getEditCanvasConfig?.chartThemeColor]
 })
 
 // 组件渲染结束初始化数据池
@@ -79,6 +79,13 @@ clearMittDataPondMap()
 onMounted(() => {
   initDataPond(useChartEditStore)
 })
+
+// watch(()=>chartEditStore,(newData)=>{
+//   console.log(newData)
+// },{
+//   immediate:true,
+//   deep:true
+// })
 </script>
 
 <style lang="scss" scoped>

@@ -4,6 +4,7 @@ import { ChartEditStorageType } from '..'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useRoute } from 'vue-router'
 import { ShareEnum } from '@/enums/external/pageEnum'
+import { nextTick } from 'vue'
 
 
 const isSharePageMode = () => {
@@ -11,6 +12,67 @@ const isSharePageMode = () => {
   return ROUTE.matched.find(item => item.path === ShareEnum.SHARE_PATH)
 }
 
+ // THINGS_KIT 兼容之前的用户数据
+ const compatibleOldUserDataHook = (fileData:object)=>{
+  let userData:Recordable = fileData
+  if(!Reflect.get(fileData,'pageConfig')){
+    userData={
+      pageConfig:{
+        currentActiveId: "1",
+        currentActiveIndex: 1,
+        pageList:[
+          {
+            ...fileData,
+            id:"1",
+            title:"页面 1",
+            editCanvas: {
+              // 编辑区域 Dom
+              editLayoutDom: null,
+              editContentDom: null,
+              // 偏移量
+              offset: 20,
+              // 系统控制缩放
+              scale: 0.5,
+              // 用户控制的缩放
+              userScale: 0.5,
+              // 锁定缩放
+              lockScale: false,
+              // 初始化
+              isCreate: false,
+              // 拖拽中
+              isDrag: false,
+              // 框选中
+              isSelect: false,
+              // 同步中
+              // saveStatus: SyncEnum.PENDING,
+              // 代码编辑中
+              isCodeEdit: false
+            },
+            // 右键菜单
+            rightMenuShow: false,
+            // 鼠标定位
+            mousePosition: {
+              startX: 0,
+              startY: 0,
+              x: 0,
+              y: 0
+            },
+            // 目标图表
+            targetChart: {
+              hoverId: undefined,
+              selectId: []
+            },
+            // 记录临时数据（复制等）
+            recordChart: undefined,
+          }
+        ]
+      }
+    }
+  }
+  return userData
+}
+//
+
 export const getSessionStorageInfo = async () => {
   if (isSharePageMode()) return
   const id = fetchRouteParamsLocation()
@@ -18,12 +80,24 @@ export const getSessionStorageInfo = async () => {
   const res = await getDataView(id)
   if (res) {
     const { dataViewContent } = res
-    const content = JSONParse(dataViewContent.content) as ChartEditStorageType
+    let content = JSONParse(dataViewContent.content) as ChartEditStorageType
+    content = compatibleOldUserDataHook(content) as ChartEditStorageType
     if (content) {
-      const { editCanvasConfig, requestGlobalConfig, componentList } = content
-      chartEditStore.editCanvasConfig = editCanvasConfig
-      chartEditStore.requestGlobalConfig = requestGlobalConfig
-      chartEditStore.componentList = componentList
+      // const { editCanvasConfig, requestGlobalConfig, componentList } = content
+      // chartEditStore.editCanvasConfig = editCanvasConfig
+      // chartEditStore.requestGlobalConfig = requestGlobalConfig
+      // chartEditStore.componentList = componentList
+      await nextTick()
+      const { pageConfig } = content
+      chartEditStore.setPageConfig(pageConfig)
+      // chartEditStore.setPageList(pageConfig.pageList)
+      // pageConfig.pageList.forEach(pageItem => {
+      //   if(pageItem.id===chartEditStore.pageConfig.currentActiveId){
+      //     chartEditStore.setPageEditCanvasConfig(pageItem.editCanvasConfig)
+      //     chartEditStore.setPageRequestGlobalConfig(pageItem.requestGlobalConfig)
+      //     chartEditStore.setPageComponentList(pageItem.componentList)
+      //   }
+      // })
     }
   }
 }

-import { ref } from 'vue'
-import { ChartEditStorageType } from '../index.d'
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { ref } from 'vue' 
+import { CreateComponentType } from '@/packages/index.d'
 import { fetchChartComponent } from '@/packages/index'
-
-export const useComInstall = (localStorageInfo: ChartEditStorageType) => {
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+// ChartEditStorageType
+export const useComInstall = (chartEditStore: ReturnType<typeof useChartEditStore>) => {
   const show = ref(false)
 
   // 注册组件(一开始无法获取window['$vue'])
@@ -17,14 +17,16 @@ export const useComInstall = (localStorageInfo: ChartEditStorageType) => {
         }
       }
 
-      localStorageInfo.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
-        if (e.isGroup) {
-          (e as CreateComponentGroupType).groupList.forEach(groupItem => {
-            intComponent(groupItem)
-          })
-        } else {
-          intComponent(e as CreateComponentType)
-        }
+      chartEditStore.getPageList.forEach(pageItem => {
+        pageItem.componentList.forEach(pageComponents => {
+          if (pageComponents.isGroup) {
+            pageComponents?.groupList?.forEach(groupItem => {
+              intComponent(groupItem)
+            })
+          } else {
+            intComponent(pageComponents)
+          }
+        })
       })
       show.value = true
     }

@@ -4,12 +4,12 @@ import type { ChartEditStorageType } from '../index.d'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
 
 export const SCALE_KEY = 'scale-value'
-
-export const useScale = (localStorageInfo: ChartEditStorageType) => {
+// ChartEditStorageType 暂定any
+export const useScale = (localStorageInfo: any) => {
   const entityRef = ref()
   const previewRef = ref()
-  const width = ref(localStorageInfo.editCanvasConfig.width)
-  const height = ref(localStorageInfo.editCanvasConfig.height)
+  const width = ref(localStorageInfo.getEditCanvasConfig.width)
+  const height = ref(localStorageInfo.getEditCanvasConfig.height)
   const scaleRef = ref({ width: 1, height: 1 })
 
   provide(SCALE_KEY, scaleRef)
@@ -57,7 +57,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
 
   // 屏幕适配
   onMounted(() => {
-    switch (localStorageInfo.editCanvasConfig.previewScaleType) {
+    switch (localStorageInfo.getEditCanvasConfig?.previewScaleType) {
       case PreviewScaleEnum.FIT:
         ;(() => {
           const { calcRate, windowResize, unWindowResize } = usePreviewFitScale(

-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import type { ChartEditStorageType } from '../index.d'
+// import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+// import { ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+// import type { ChartEditStorageType } from '../index.d'
+
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
 
 // store 相关
-export const useStore = (localStorageInfo: ChartEditStorageType) => {
-  const chartEditStore = useChartEditStore()
-  chartEditStore.requestGlobalConfig = localStorageInfo[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]
+export const useStore = (chartEditStore: ReturnType<typeof useChartEditStore>) => {
+  // const chartEditStore = useChartEditStore()
+  // chartEditStore.requestGlobalConfig = localStorageInfo[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]
+  // chartEditStore.setPageRequestGlobalConfig(localStorageInfo[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG])
 }

 <template>
-  <div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`" @mousedown="dragCanvas">
+  <div :class="`go-preview ${chartEditStore.getEditCanvasConfig?.previewScaleType}`" @mousedown="dragCanvas">
     <template v-if="showEntity">
       <!-- 实体区域 -->
       <div ref="entityRef" class="go-preview-entity">
@@ -38,32 +38,32 @@ import { getSessionStorageInfo } from './external/usePreview'
 
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
-import { useStore } from './hooks/useStore.hook'
+// import { useStore } from './hooks/useStore.hook'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
-import type { ChartEditStorageType } from './index.d'
+// 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
+const chartEditStore = useChartEditStore() 
 
-setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
+setTitle(`预览-${chartEditStore.getEditCanvasConfig.projectName}`)
 
 const previewRefStyle = computed(() => {
   return {
     overflow: 'hidden',
-    ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
-    ...getFilterStyle(chartEditStore.editCanvasConfig)
+    ...getEditCanvasConfigStyle(chartEditStore.getEditCanvasConfig),
+    ...getFilterStyle(chartEditStore.getEditCanvasConfig)
   }
 })
 
 const showEntity = computed(() => {
-  const type = chartEditStore.editCanvasConfig.previewScaleType
+  const type = chartEditStore.getEditCanvasConfig?.previewScaleType
   return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
 })
 
-useStore(chartEditStore)
+// useStore(chartEditStore)
 const { entityRef, previewRef } = useScale(chartEditStore)
 const { show } = useComInstall(chartEditStore)
 

@@ -22,10 +22,12 @@ export const getSessionStorageInfo = () => {
   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
+        // const { editCanvasConfig, requestGlobalConfig, componentList } = storageList[i]
+        // chartEditStore.editCanvasConfig = editCanvasConfig
+        // chartEditStore.requestGlobalConfig = requestGlobalConfig
+        // chartEditStore.componentList = componentList
+        const { pageConfig } = storageList[i]
+        chartEditStore.setPageConfig(pageConfig)
         return storageList[i]
       }
     }

@@ -104,11 +104,15 @@ const getSharePageContentData = async () => {
     if (!dataViewContent.content) isEmpty.value = true
     const content = JSONParse(dataViewContent.content || '{}') as ChartEditStorageType
     if (content) {
-      const { editCanvasConfig, requestGlobalConfig, componentList } = content
-      chartEditStore.editCanvasConfig = editCanvasConfig
-      chartEditStore.requestGlobalConfig = requestGlobalConfig
-      chartEditStore.componentList = componentList
-      handleRegisterComponent(componentList)
+      // const { editCanvasConfig, requestGlobalConfig, componentList } = content
+      // chartEditStore.editCanvasConfig = editCanvasConfig
+      // chartEditStore.requestGlobalConfig = requestGlobalConfig
+      // chartEditStore.componentList = componentList
+      chartEditStore.setPageConfig(content.pageConfig)
+      // handleRegisterComponent(componentList)
+      content.pageConfig.pageList.forEach(pageItem=>{
+        handleRegisterComponent(pageItem.componentList)
+      })
     }
     setTitle(dataViewName || '')
     showModal.value = false