feat: 预览采用pinia驱动

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

@@ -5,6 +5,7 @@
       组件 id：
       <n-text>{{ targetData.id }}</n-text>
     </n-text>
+    <ChartEvebtInteraction></ChartEvebtInteraction>
     <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 { ChartEvebtInteraction } from './components/ChartEvebtInteraction'
 import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle'
 import { ChartEventBaseHandle } from './components/ChartEventBaseHandle'
 import { useTargetData } from '../hooks/useTargetData.hook'

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,7 +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 +18,14 @@ 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
+      }
     }
   }
 }