From 33174f8208fab840c09ae3fb98d19d13dd733974 Mon Sep 17 00:00:00 2001
From: mtruning <1262327911@qq.com>
Date: Sun, 6 Mar 2022 16:54:48 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E9=A1=B5=E9=9D=A2=E4=BD=8D=E7=BD=AE=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E6=B8=B2=E6=9F=93=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/previewScale.hook.ts                | 15 ++----
 .../components/EditAlignLine/index.vue        |  2 +-
 src/views/chart/ContentEdit/index.vue         |  1 -
 .../preview/components/RenderList/index.ts    |  3 ++
 .../preview/components/RenderList/index.vue   | 48 +++++++++++++++++++
 src/views/preview/hooks/useStyle.hook.ts      | 21 ++++++++
 src/views/preview/index.d.ts                  |  5 ++
 src/views/preview/index.vue                   | 36 +++++++++-----
 8 files changed, 107 insertions(+), 24 deletions(-)
 create mode 100644 src/views/preview/components/RenderList/index.ts
 create mode 100644 src/views/preview/components/RenderList/index.vue
 create mode 100644 src/views/preview/hooks/useStyle.hook.ts
 create mode 100644 src/views/preview/index.d.ts

diff --git a/src/hooks/previewScale.hook.ts b/src/hooks/previewScale.hook.ts
index 7fdd8ce3..9997bc13 100644
--- a/src/hooks/previewScale.hook.ts
+++ b/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})`
       }
     }
   }
diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
index c69a12b1..ef70545a 100644
--- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue
+++ b/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;
     }
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index a0925907..5d6b97cb 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/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()
diff --git a/src/views/preview/components/RenderList/index.ts b/src/views/preview/components/RenderList/index.ts
new file mode 100644
index 00000000..24ccdfea
--- /dev/null
+++ b/src/views/preview/components/RenderList/index.ts
@@ -0,0 +1,3 @@
+import RenderList from './index.vue'
+
+export { RenderList }
diff --git a/src/views/preview/components/RenderList/index.vue b/src/views/preview/components/RenderList/index.vue
new file mode 100644
index 00000000..f3f8b61b
--- /dev/null
+++ b/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>
diff --git a/src/views/preview/hooks/useStyle.hook.ts b/src/views/preview/hooks/useStyle.hook.ts
new file mode 100644
index 00000000..c5820b21
--- /dev/null
+++ b/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
+}
diff --git a/src/views/preview/index.d.ts b/src/views/preview/index.d.ts
new file mode 100644
index 00000000..612f037f
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index 9e22334c..dd273477 100644
--- a/src/views/preview/index.vue
+++ b/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;