feat: 新增组件预览

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

@@ -19,8 +19,6 @@ import { PropType, computed } from 'vue'
 import { ChartEditStorageType } from '../../index.d'
 import { chartColors } from '@/settings/chartThemes/index'
 import { useSizeStyle, useComponentStyle } from '../../hooks/useStyle.hook'
-import { componentPackageInstall } from '@/utils'
-import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({
   localStorageInfo: {
@@ -29,10 +27,6 @@ const props = defineProps({
   }
 })
 
-// 动态注册
-props.localStorageInfo.componentList.forEach((e: CreateComponentType) => {
-  componentPackageInstall(e.chartConfig)
-});
 
 // 主题色
 const themeSetting = computed(() => {

src/views/preview/index.vue

@@ -14,29 +14,12 @@
 <script setup lang="ts">
 import { onUnmounted, ref, nextTick, computed } from 'vue'
 import { usePreviewScale } from '@/hooks/index'
-import { getLocalStorage, fetchRouteParams } from '@/utils'
-import { StorageEnum } from '@/enums/storageEnum'
 import { RenderList } from './components/RenderList/index'
 import { ChartEditStorageType } from './index.d'
+import { getLocalStorageInfo } from './utils/index'
 
 const previewRef = ref()
 
-const getLocalStorageInfo: () => ChartEditStorageType | undefined = () => {
-  const routeParamsRes = fetchRouteParams()
-  if (!routeParamsRes) return
-  const { id } = routeParamsRes
-
-  const storageList: ChartEditStorageType[] = getLocalStorage(
-    StorageEnum.GO_CHART_STORAGE_LIST
-  )
-
-  for (let i = 0; i < storageList.length; i++) {
-    if (id.toString() === storageList[i]['id']) {
-      return storageList[i]
-    }
-  }
-}
-
 const localStorageInfo: ChartEditStorageType = getLocalStorageInfo() as ChartEditStorageType
 
 const width = ref(localStorageInfo?.editCanvasConfig.width)
@@ -45,8 +28,8 @@ 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%',
+    width: width.value ? `${width.value || 100}px` : '100%',
+    height: height.value ? `${height.value}px` : '100%',
     border: '1px solid red'
   }
 })
@@ -56,7 +39,11 @@ if (!localStorageInfo) {
 }
 
 nextTick(() => {
-  const { calcRate, windowResize, unWindowResize } = usePreviewScale(width.value as number, height.value as number, previewRef.value)
+  const { calcRate, windowResize, unWindowResize } = usePreviewScale(
+    width.value as number,
+    height.value as number,
+    previewRef.value
+  )
 
   calcRate()
   windowResize()
@@ -65,11 +52,10 @@ nextTick(() => {
     unWindowResize()
   })
 })
-
 </script>
 
 <style lang="scss" scoped>
-@include go("preview") {
+@include go('preview') {
   position: relative;
   display: flex;
   align-items: center;
@@ -77,6 +63,6 @@ nextTick(() => {
   height: 100vh;
   width: 100vw;
   overflow: hidden;
-  @include background-image("background-image");
+  @include background-image('background-image');
 }
-</style>
+</style>

src/views/preview/utils/index.ts

@@ -1,4 +1,4 @@
-import { getLocalStorage, fetchRouteParams } from '@/utils'
+import { getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -6,10 +6,10 @@ export interface ChartEditStorageType extends ChartEditStorage {
   id: string
 }
 
-export const getLocalStorageInfo: () => ChartEditStorageType | undefined = () => {
-  const routeParamsRes = fetchRouteParams()
-  if (!routeParamsRes) return
-  const { id } = routeParamsRes
+export const getLocalStorageInfo = () => {
+  const urlHash = document.location.hash
+  const toPathArray = urlHash.split('/')
+  const id = toPathArray && toPathArray[toPathArray.length - 1]
 
   const storageList: ChartEditStorageType[] = getLocalStorage(
     StorageEnum.GO_CHART_STORAGE_LIST