Merge branch 'dev'

src/views/chart/ContentBox/index.vue

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

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/ChartData/index.vue

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

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

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/ContentEdit/components/EditBottom/index.vue

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

src/views/chart/ContentEdit/index.vue

@@ -83,7 +83,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, computed } from 'vue'
+import { onMounted, computed, provide } from 'vue'
 import { chartColors } from '@/settings/chartThemes/index'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
@@ -91,7 +91,7 @@ import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle,
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
+import { SCALE_KEY } from '@/views/preview/hooks/useScale.hook'
 import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
 import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'
@@ -108,6 +108,9 @@ import { EditTools } from './components/EditTools'
 const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()
 
+// 编辑时注入scale变量，消除警告
+provide(SCALE_KEY, null);
+
 // 布局处理
 useLayout()
 

src/views/chart/ContentLayers/index.vue

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

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/hooks/useScale.hook.ts

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

src/views/preview/index.vue

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

src/views/preview/suspenseIndex.vue

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

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]
+      }
     }
   }
 }