Pre Merge pull request !140 from 123/master-fetch-Interaction

package.json

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

src/enums/eventEnum.ts

@@ -10,6 +10,26 @@ export enum BaseEvent {
   ON_MOUSE_LEAVE = 'mouseleave'
 }
 
+// 组件交互回调事件
+export enum InteractEvents {
+  INTERACT_ON = 'interactOn',
+  INTERACT_COMPONENTS = 'interactComponents',
+  INTERACT_FN = 'interactFn'
+}
+
+// 组件交互回调事件触发的类型
+export enum InteractEventOn {
+  CLICK = 'click',
+  CHANGE = 'change'
+}
+
+// 交互式组件的触发配置
+export type InteractActionType = {
+  interactType: InteractEventOn
+  interactName: string
+  componentEmitEvents: { [T: string]: any[] }
+}
+
 // vue3 生命周期事件
 export enum EventLife {
   // 渲染之后

src/hooks/index.ts

@@ -4,4 +4,5 @@ export * from '@/hooks/useCode.hook'
 export * from '@/hooks/useChartDataFetch.hook'
 export * from '@/hooks/useChartDataPondFetch.hook'
 export * from '@/hooks/useLifeHandler.hook'
-export * from '@/hooks/useLang.hook'
+export * from '@/hooks/useLang.hook'
+export * from '@/hooks/useChartInteract.hook'

src/hooks/useChartDataFetch.hook.ts

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

src/hooks/useChartInteract.hook.ts

@@ -0,0 +1,35 @@
+import { toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [name: string]: string },
+  onEvent: string
+) => {
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === onEvent
+  })
+
+  if (fnOnEvent.length === 0) return
+  fnOnEvent.forEach(item => {
+    const index = chartEditStore.fetchTargetIndex(item.interactComponents)
+    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+    Object.keys(item.interactFn).forEach(key => {
+      if (Params.value[key]) {
+        Params.value[key] = param[item.interactFn[key]]
+      }
+      if (Header.value[key]) {
+        Header.value[key] = param[item.interactFn[key]]
+      }
+    })
+  })
+}

src/packages/components/Decorates/Inputs/InputsDate/config.ts

@@ -0,0 +1,56 @@
+import { NDatePicker } from 'naive-ui'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { InputsDateConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+import { InteractEventOn, InteractActionType } from '@/enums/eventEnum'
+
+// 时间组件类型
+enum ComponentInteractEvent {
+  DATE = 'date',
+  DATERANGE = 'daterange'
+}
+
+export const option = {
+  dataset: {
+    count: 0,
+    // 时间组件展示类型 daterange & date
+    type: ComponentInteractEvent.DATE,
+    range: undefined
+  }
+}
+
+// 定义组件触发回调事件
+const interactActions: InteractActionType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '完成后的回调',
+    componentEmitEvents: {
+      [ComponentInteractEvent.DATE]: [
+        {
+          value: 'date',
+          label: '日期'
+        }
+      ],
+      [ComponentInteractEvent.DATERANGE]: [
+        {
+          value: 'dateStart',
+          label: '开始时间'
+        },
+        {
+          value: 'dateEnd',
+          label: '结束时间'
+        }
+      ]
+    }
+  }
+]
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsDateConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsDateConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Inputs/InputsDate/config.vue

@@ -0,0 +1,67 @@
+<template>
+  <CollapseItem name="通用的Props" :expanded="true">
+    <SettingItemBox name="基础">
+      <setting-item name="类型">
+        <n-select v-model:value="props.optionData.dataset.type" size="small" :options="datePickerTypeOptions" />
+      </setting-item>
+    </SettingItemBox>
+
+    <SettingItemBox name="默认值">
+      <n-date-picker
+        size="small"
+        :style="{ width: ['date'].includes(props.optionData.dataset.type) ? 'auto' : '250px' }"
+        v-model:value="props.optionData.dataset.range"
+        :type="props.optionData.dataset.type"
+        clearable
+      />
+    </SettingItemBox>
+    <SettingItemBox>
+      <template #name>
+        <n-text>动态</n-text>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <n-icon size="21" :depth="3">
+              <help-outline-icon></help-outline-icon>
+            </n-icon>
+          </template>
+          <n-text>动态日期以默认值进行计算</n-text>
+        </n-tooltip>
+      </template>
+
+      <setting-item name="计算值">
+        <n-input-number v-model:value="props.optionData.dataset.count" size="small" placeholder="0">
+          <template #prefix>
+            <n-text depth="3">天</n-text>
+          </template>
+        </n-input-number>
+      </setting-item>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { icon } from '@/plugins'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const { HelpOutlineIcon } = icon.ionicons5
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const datePickerTypeOptions = [
+  {
+    label: '日期',
+    value: 'date'
+  },
+  {
+    label: '日期范围',
+    value: 'daterange'
+  }
+]
+</script>

src/packages/components/Decorates/Inputs/InputsDate/index.ts

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

src/packages/components/Decorates/Inputs/InputsDate/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="mill-date-box">
+    <div :style="`width:${w}px; height:${h}px;`">
+      <n-date-picker v-model:value="rangeDate" :type="option.dataset.type" @update:value="onChange" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+import { useChartInteract } from '@/hooks'
+import dayjs from 'dayjs'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const rangeDate = ref()
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const onChange = (v: number | number[]) => {
+  if (v instanceof Array) {
+    const dateStart = dayjs(v[0]).format('YYYY-MM-DD')
+    const dateEnd = dayjs(v[1]).format('YYYY-MM-DD')
+    useChartInteract(props.chartConfig, useChartEditStore, { dateStart, dateEnd }, 'change')
+  } else {
+    const date = dayjs(v).format('YYYY-MM-DD')
+    useChartInteract(props.chartConfig, useChartEditStore, { date }, 'change')
+  }
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+    const { range, count } = newData
+    if (!range) return
+    if (newData.range instanceof Array) {
+      const countDate: number[] = [
+        dayjs(range[0]).add(count, 'day').valueOf(),
+        dayjs(range[1]).add(count, 'day').valueOf()
+      ]
+      rangeDate.value = countDate
+    } else {
+      const countDate: number = dayjs(range).add(count, 'day').valueOf()
+      rangeDate.value = countDate
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>
+
+<style lang="scss" scoped>
+.mill-text-box {
+  display: flex;
+}
+:deep(.n-input) {
+  height: v-bind('h + "px"');
+  display: flex;
+  align-items: center;
+}
+</style>

src/packages/components/Decorates/Inputs/index.ts

@@ -0,0 +1,3 @@
+import { InputsDateConfig } from './InputsDate/index'
+
+export default [InputsDateConfig]

src/packages/components/Decorates/index.d.ts

@@ -2,6 +2,7 @@ export enum ChatCategoryEnum {
   BORDER = 'Borders',
   DECORATE = 'Decorates',
   THREE = 'Three',
+  INPUTS = 'Inputs',
   MORE = 'Mores'
 }
 
@@ -9,5 +10,7 @@ export enum ChatCategoryEnumName {
   BORDER = '边框',
   DECORATE = '装饰',
   THREE = '三维',
+  // 控件 => 数据录入
+  INPUTS = '控件',
   MORE = '更多'
 }

src/packages/components/Decorates/index.ts

@@ -1,6 +1,7 @@
 import Borders from './Borders'
 import Decorates from './Decorates'
 import Three from './Three'
+import Inputs from './Inputs'
 import Mores from './Mores'
 
-export const DecorateList = [...Borders, ...Decorates, ...Three, ...Mores]
+export const DecorateList = [...Borders, ...Decorates, ...Three, ...Inputs, ...Mores]

src/packages/index.d.ts

@@ -1,4 +1,4 @@
-import { BaseEvent, EventLife } from '@/enums/eventEnum'
+import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionType } from '@/enums/eventEnum'
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -120,20 +120,26 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
+  interactActions?: InteractActionType[],
   events: {
     baseEvent: {
       [K in BaseEvent]?: string
-    },
+    }
     advancedEvents: {
       [K in EventLife]?: string
     }
+    interactEvents: {
+      [InteractEvents.INTERACT_ON]: InteractEventOn.CHANGE | InteractEventOn.CLICK | undefined
+      [InteractEvents.INTERACT_COMPONENTS]: string | undefined
+      [InteractEvents.INTERACT_FN]: { [name: string]: string }
+    }[]
   }
 }
 
 export interface CreateComponentType extends PublicConfigType, requestConfig {
   key: string
   chartConfig: ConfigType
-  option: GlobalThemeJsonType,
+  option: GlobalThemeJsonType
 }
 
 // 组件成组实例类

src/packages/public/publicConfig.ts

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

src/settings/designSetting.ts

@@ -44,7 +44,7 @@ export const asideCollapsedWidth = 60
 export const maskClosable = false
 
 // 全局边框圆角
-export const borderRadius = '6px'
+export const borderRadius = '4px'
 
 // 轮播间隔
 export const carouselInterval = 4000

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

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

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue

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

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue

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

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

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

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

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

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

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

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

@@ -0,0 +1,211 @@
+<template>
+  <n-collapse-item title="组件交互" name="1" v-if="interactActions.length">
+    <template #header-extra>
+      <n-button type="primary" tertiary size="small" @click.stop="evAddEventsFn">
+        <template #icon>
+          <n-icon>
+            <add-icon />
+          </n-icon>
+        </template>
+        新增
+      </n-button>
+    </template>
+
+    <!-- 无数据 -->
+    <div v-if="!targetData.events.interactEvents.length" class="no-data go-flex-center">
+      <img :src="noData" alt="暂无数据" />
+      <n-text :depth="3">暂无内容</n-text>
+    </div>
+
+    <n-card
+      v-for="(item, cardIndex) in targetData.events.interactEvents"
+      :key="cardIndex"
+      class="n-card-shallow"
+      size="small"
+    >
+      <n-space justify="space-between">
+        <n-text>关联组件 - {{ cardIndex + 1 }}</n-text>
+        <n-button type="error" secondary size="small" @click="evDeleteEventsFn(cardIndex)">
+          <template #icon>
+            <n-icon>
+              <close-icon />
+            </n-icon>
+          </template>
+        </n-button>
+      </n-space>
+
+      <n-divider style="margin: 10px 0" />
+
+      <n-tag :bordered="false" type="success"> 选择目标组件 </n-tag>
+
+      <setting-item-box name="触发事件" :alone="true">
+        <n-input-group v-if="interactActions">
+          <n-select
+            class="select-type-options"
+            v-model:value="item.interactOn"
+            size="tiny"
+            :options="interactActions"
+          />
+        </n-input-group>
+      </setting-item-box>
+
+      <setting-item-box name="绑定组件" :alone="true">
+        <n-input-group>
+          <n-select
+            class="select-type-options"
+            value-field="id"
+            label-field="key"
+            size="tiny"
+            filterable
+            v-model:value="item.interactComponents"
+            :render-label="renderLabel"
+            :options="fnEventsOptions()"
+          />
+        </n-input-group>
+      </setting-item-box>
+
+      <n-table v-if="fnDimensionsAndSource(item.interactOn).length" size="small" striped>
+        <thead>
+          <tr>
+            <th v-for="item in ['参数', '说明']" :key="item">{{ item }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn)" :key="index">
+            <td>{{ cItem.value }}</td>
+            <td>{{ cItem.label }}</td>
+          </tr>
+        </tbody>
+      </n-table>
+
+      <n-tag class="go-mt-3" :bordered="false" type="info"> 关联目标组件请求参数 </n-tag>
+
+      <setting-item-box
+        :name="requestParamsItem"
+        v-for="requestParamsItem in requestParamsTypeList"
+        :key="requestParamsItem"
+      >
+        <setting-item
+          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.interactComponents, requestParamsItem)"
+          :key="index"
+          :name="`${ovlKey}`"
+        >
+          <n-select
+            size="tiny"
+            v-model:value="item.interactFn[ovlKey]"
+            :options="fnDimensionsAndSource(item.interactOn)"
+          ></n-select>
+        </setting-item>
+        <n-text
+          v-show="JSON.stringify(fnGetRequest(item.interactComponents, requestParamsItem)) === '{}'"
+          class="go-pt-1"
+          depth="3"
+        >
+          暂无数据
+        </n-text>
+      </setting-item-box>
+    </n-card>
+  </n-collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { VNodeChild, computed } from 'vue'
+import { SelectOption, SelectGroupOption } from 'naive-ui'
+import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { RequestParamsTypeEnum } from '@/enums/httpEnum'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { icon } from '@/plugins'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import noData from '@/assets/images/canvas/noData.png'
+
+const { CloseIcon, AddIcon } = icon.ionicons5
+
+const designStore = useDesignStore()
+const { targetData, chartEditStore } = useTargetData()
+
+const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER]
+
+// 获取组件交互事件列表
+const interactActions = computed(() => {
+  const interactActions = targetData.value.interactActions
+  if (!interactActions) return []
+  return interactActions.map(value => ({
+    label: value.interactName,
+    value: value.interactType
+  }))
+})
+
+// 获取组件事件
+const option = computed(() => {
+  return targetData.value.option
+})
+
+// 绑定组件数据request
+const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
+  if (!id) return {}
+  return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
+}
+
+const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => {
+  if (!interactOn || !targetData.value.interactActions) return []
+  const tableData = targetData.value.interactActions.find(item => {
+    return item.interactType === interactOn
+  })
+
+  return tableData?.componentEmitEvents[option.value.dataset.type] || []
+}
+
+const renderLabel = (option: CreateComponentType | CreateComponentGroupType): VNodeChild => {
+  return option.chartConfig.title
+}
+
+const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
+  return chartEditStore.componentList.filter(item => {
+    return item.id !== targetData.value.id
+  })
+}
+
+const evAddEventsFn = () => {
+  targetData.value.events.interactEvents.push({
+    interactOn: undefined,
+    interactComponents: undefined,
+    interactFn: {}
+  })
+}
+
+const evDeleteEventsFn = (index: number) => {
+  targetData.value.events.interactEvents.splice(index, 1)
+}
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+</script>
+
+<style lang="scss" scoped>
+.mill-chart-target-data {
+  :deep(pre) {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}
+
+.n-input-group {
+  height: 30px;
+}
+
+.no-data {
+  flex-direction: column;
+  width: 100%;
+  img {
+    width: 120px;
+  }
+}
+
+:deep(.n-base-selection .n-base-selection-label) {
+  height: 32px;
+}
+</style>

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

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

src/views/chart/hooks/useSync.hook.ts

@@ -48,7 +48,8 @@ const componentVersionUpdatePolyfill = (newObject: any, sources: any) => {
           advancedEvents: {
             [EventLife.VNODE_MOUNTED]: undefined,
             [EventLife.VNODE_BEFORE_MOUNT]: undefined
-          }
+          },
+          interactEvents: []
         }
       }
       return newObject

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

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

src/views/preview/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`">
+  <div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`">
     <template v-if="showEntity">
       <!-- 实体区域 -->
       <div ref="entityRef" class="go-preview-entity">
@@ -8,7 +8,7 @@
           <!-- 展示层 -->
           <div :style="previewRefStyle" v-if="show">
             <!-- 渲染层 -->
-            <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
+            <preview-render-list></preview-render-list>
           </div>
         </div>
       </div>
@@ -19,7 +19,7 @@
         <!-- 展示层 -->
         <div :style="previewRefStyle" v-if="show">
           <!-- 渲染层 -->
-          <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
+          <preview-render-list></preview-render-list>
         </div>
       </div>
     </template>
@@ -36,25 +36,30 @@ import { useScale } from './hooks/useScale.hook'
 import { useStore } from './hooks/useStore.hook'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
 import type { ChartEditStorageType } from './index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
-const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
-setTitle(`预览-${localStorageInfo.editCanvasConfig.projectName}`)
+// const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
+
+const chartEditStore = useChartEditStore() as unknown as ChartEditStorageType
+getSessionStorageInfo()
+
+setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
 
 const previewRefStyle = computed(() => {
   return {
-    ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
-    ...getFilterStyle(localStorageInfo.editCanvasConfig)
+    ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
+    ...getFilterStyle(chartEditStore.editCanvasConfig)
   }
 })
 
 const showEntity = computed(() => {
-  const type = localStorageInfo.editCanvasConfig.previewScaleType
+  const type = chartEditStore.editCanvasConfig.previewScaleType
   return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
 })
 
-useStore(localStorageInfo)
-const { entityRef, previewRef } = useScale(localStorageInfo)
-const { show } = useComInstall(localStorageInfo)
+useStore(chartEditStore)
+const { entityRef, previewRef } = useScale(chartEditStore)
+const { show } = useComInstall(chartEditStore)
 </script>
 
 <style lang="scss" scoped>

src/views/preview/utils/storage.ts

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