feat：新增预览页面位置图表位置渲染功能

src/hooks/previewScale.hook.ts

@@ -29,21 +29,14 @@ export const usePreviewScale = (
     if (scaleDom) {
       if (currentRate > baseProportion) {
         // 表示更宽
-        scale.width = (
-          (window.innerHeight * baseProportion) /
-          baseWidth
-        ).toFixed(5)
+        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
         scale.height = (window.innerHeight / baseHeight).toFixed(5)
-        scaleDom.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
       } else {
         // 表示更高
-        scale.height = (
-          window.innerWidth /
-          baseProportion /
-          baseHeight
-        ).toFixed(5)
+        scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5)
         scale.width = (window.innerWidth / baseWidth).toFixed(5)
-        scaleDom.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
       }
     }
   }

src/views/chart/ContentEdit/components/EditAlignLine/index.vue

@@ -312,7 +312,7 @@ watch(
     border-width: 1px;
     border-style: solid;
     border-color: v-bind('themeColor');
-    opacity: 0.7;
+    opacity: 0.3;
     &.visible {
       display: block;
     }

src/views/chart/ContentEdit/index.vue

@@ -57,7 +57,6 @@ import { handleDrag, handleDragOver, useMouseHandle } from './hooks/useDrag.hook
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
-import { CreateComponentType } from '@/packages/index.d'
 import { chartColors } from '@/settings/chartThemes/index'
 
 const chartEditStore = useChartEditStore()

src/views/preview/components/RenderList/index.ts

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

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

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="chart-item"
+    v-for="(item, index) in localStorageInfo.componentList"
+    :key="item.id"
+    :style="{ ...useComponentStyle(item.attr, index), ...useSizeStyle(item.attr) }"
+  >
+    <component
+      :is="item.key"
+      :chartConfig="item"
+      :themeSetting="themeSetting"
+      :themeColor="themeColor"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { ChartEditStorageType } from '../../index.d'
+import { chartColors } from '@/settings/chartThemes/index'
+import { useSizeStyle, useComponentStyle } from '../../hooks/useStyle.hook'
+
+const props = defineProps({
+  localStorageInfo: {
+    type: Object as PropType<ChartEditStorageType>,
+    required: true
+  }
+})
+
+// 主题色
+const themeSetting = computed(() => {
+  const chartThemeSetting = props.localStorageInfo.editCanvasConfig.chartThemeSetting
+  return chartThemeSetting
+})
+
+// 配置项
+const themeColor = computed(() => {
+  const chartThemeColor = props.localStorageInfo.editCanvasConfig.chartThemeColor
+  return chartColors[chartThemeColor]
+})
+
+</script>
+
+<style lang="scss" scoped>
+.chart-item {
+  position: absolute;
+}
+</style>

src/views/preview/hooks/useStyle.hook.ts

@@ -0,0 +1,21 @@
+import { PickCreateComponentType } from '@/packages/index.d'
+
+type AttrType = PickCreateComponentType<'attr'>
+
+export const useComponentStyle = (attr: AttrType, index: number) => {
+  const componentStyle = {
+    zIndex: index + 1,
+    left: `${attr.x}px`,
+    top: `${attr.y}px`
+  }
+  return componentStyle
+}
+
+export const useSizeStyle = (attr: AttrType, scale?: number) => {
+  const sizeStyle = {
+    width: `${scale ? scale * attr.w : attr.w}px`,
+    height: `${scale ? scale * attr.h : attr.h}px`,
+    border: '1px solid red'
+  }
+  return sizeStyle
+}

src/views/preview/index.d.ts

@@ -0,0 +1,5 @@
+import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+export interface ChartEditStorageType extends ChartEditStorage {
+  id: string
+}

src/views/preview/index.vue

@@ -1,21 +1,24 @@
 <template>
   <div class="go-preview">
+    <!-- 缩放层 -->
     <div ref="previewRef">
-      <h1>预览</h1>
+      <!-- 展示层 -->
+      <div :style="previewRefStyle">
+        <!-- 渲染层 -->
+        <RenderList :localStorageInfo="localStorageInfo" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onUnmounted, ref, nextTick } from 'vue'
+import { onUnmounted, ref, nextTick, computed } from 'vue'
 import { usePreviewScale } from '@/hooks/index'
 import { getLocalStorage, fetchRouteParams } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
-import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
-
-interface ChartEditStorageType extends ChartEditStorage {
-  id: string
-}
+import { RenderList } from './components/RenderList/index'
+import { ChartEditStorageType } from './index.d'
+import { useSizeStyle } from './hooks/useStyle.hook'
 
 const previewRef = ref()
 
@@ -35,16 +38,26 @@ const getLocalStorageInfo: () => ChartEditStorageType | undefined = () => {
   }
 }
 
-const localStorageInfo: ChartEditStorageType | undefined = getLocalStorageInfo()
-const width = localStorageInfo?.editCanvasConfig.width
-const height = localStorageInfo?.editCanvasConfig.height
+const localStorageInfo: ChartEditStorageType = getLocalStorageInfo() as ChartEditStorageType
+
+const width = ref(localStorageInfo?.editCanvasConfig.width)
+const height = ref(localStorageInfo?.editCanvasConfig.height)
+
+const previewRefStyle = computed(() => {
+  return {
+    position: 'relative',
+    width: width.value? `${width.value || 100}px` : '100%',
+    height: height.value? `${height.value}px` : '100%',
+    border: '1px solid red'
+  }
+})
 
 if (!localStorageInfo) {
   window['$message'].warning('获取数据失败')
 }
 
 nextTick(() => {
-  const { calcRate, windowResize, unWindowResize } = usePreviewScale(width as number, height as number, previewRef.value)
+  const { calcRate, windowResize, unWindowResize } = usePreviewScale(width.value as number, height.value as number, previewRef.value)
 
   calcRate()
   windowResize()
@@ -58,6 +71,7 @@ nextTick(() => {
 
 <style lang="scss" scoped>
 @include go("preview") {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;