feat: 新增组件预览

src/components/ChartItemSetting/PositionSetting.vue

@@ -30,7 +30,7 @@ import { SettingItemBox } from '@/components/ChartItemSetting/index'
 
 const props = defineProps({
   chartAttr: {
-    type: Object as PropType<Omit<PickCreateComponentType<'attr'>, 'node'>>,
+    type: Object as PropType<Omit<PickCreateComponentType<'attr'>, 'node' | 'conNode'>>,
     required: true
   }
 })

src/components/ChartItemSetting/SizeSetting.vue

@@ -30,7 +30,7 @@ import { SettingItemBox } from '@/components/ChartItemSetting/index'
 
 const props = defineProps({
   chartAttr: {
-    type: Object as PropType<Omit<PickCreateComponentType<'attr'>, 'node'>>,
+    type: Object as PropType<Omit<PickCreateComponentType<'attr'>, 'node' | 'conNode'>>,
     required: true
   }
 })

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router, { setupRouter } from '@/router'
 import i18n from '@/i18n/index'
 import { setupStore } from '@/store'
-import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
+import { setupNaive, setupDirectives, setupCustomComponents, setupPreviewPackages } from '@/plugins'
 import { AppProvider } from '@/components/AppProvider/index'
 import { setHtmlTheme } from '@/utils'
 
@@ -24,6 +24,9 @@ async function appInit() {
   // 注册全局自定义组件
   setupCustomComponents(app)
 
+  // 预览页面注册（）
+  setupPreviewPackages(app)
+  
   // 挂载状态管理
   setupStore(app)
 

src/packages/components/Charts/Bars/BarCommon/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const BarCommonConfig: ConfigType = {
   key: 'VBarCommon',
+  conKey: 'VCBarCommon',
   title: '柱状图',
   category: ChatCategoryEnum.BAR,
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
-  node: BarCommon,
+  node: () => BarCommon,
   conNode: () => Configuration,
   image: image,
 }

src/packages/components/Charts/Bars/BarCrossrange/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const BarCrossrangefig: ConfigType = {
   key: 'VBarCrossrange',
+  conKey: 'VCBarCrossrange',
   title: '横向柱状图',
   category: ChatCategoryEnum.BAR,
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
-  node: BarCrossrange,
+  node: () => BarCrossrange,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Lines/LineCommon/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LineCommonConfig: ConfigType = {
   key: 'VLineCommon',
+  conKey: 'VCLineCommon',
   title: '折线图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
-  node: LineCommon,
+  node: () => LineCommon,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Lines/LineGradientSingle/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LineGradientSingleConfig: ConfigType = {
   key: 'VLineGradientSingle',
+  conKey: 'VCLineGradientSingle',
   title: '折线面积图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
-  node: LineGradientSingle,
+  node: () => LineGradientSingle,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Lines/LineGradients/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LineGradientsConfig: ConfigType = {
   key: 'VLineGradients',
+  conKey: 'VCLineGradients',
   title: '折线面积图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
-  node: LineGradients,
+  node: () => LineGradients,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Maps/MapChine/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const MapChineConfig: ConfigType = {
   key: 'VMapChine',
+  conKey: 'VCMapChine',
   title: '北京地图',
   category: ChatCategoryEnum.MAP,
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,
-  node: MapChine,
+  node: () => MapChine,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Mores/Funnel/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const FunnelConfig: ConfigType = {
   key: 'VFunnel',
+  conKey: 'VCFunnel',
   title: '漏斗图',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
-  node: Funnel,
+  node: () => Funnel,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Mores/Heatmap/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const HeatmapConfig: ConfigType = {
   key: 'VHeatmap',
+  conKey: 'VCHeatmap',
   title: '热力图',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
-  node: Heatmap,
+  node: () => Heatmap,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Mores/Point/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const PointConfig: ConfigType = {
   key: 'VPoint',
+  conKey: 'VCPoint',
   title: '热力图',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
-  node: Point,
+  node: () => Point,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Mores/Radar/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const RadarConfig: ConfigType = {
   key: 'VRadar',
+  conKey: 'VCRadar',
   title: '雷达',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
-  node: Radar,
+  node: () => Radar,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Mores/TreeMap/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const TreeMapConfig: ConfigType = {
   key: 'VTreeMap',
+  conKey: 'VCTreeMap',
   title: '树形分布',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
-  node: TreeMap,
+  node: () => TreeMap,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Mores/Variable/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const VariableConfig: ConfigType = {
   key: 'VVariable',
+  conKey: 'VCVariable',
   title: '折线面积图',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
-  node: Variable,
+  node: () => Variable,
   conNode: () => Configuration,
   image: image
 }

src/packages/components/Charts/Pies/PieCommon/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const PieCommonConfig: ConfigType = {
   key: 'VPieCommon',
+  conKey: 'VCPieCommon',
   title: '饼图',
   category: ChatCategoryEnum.PIE,
   categoryName: ChatCategoryEnumName.PIE,
   package: PackagesCategoryEnum.CHARTS,
-  node: PieCommon,
+  node: () => PieCommon,
   conNode: () => Configuration,
   image
 }

src/packages/components/Decorates/Borders/borderCommon/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const BorderCommonConfig: ConfigType = {
   key: 'VBorderCommon',
+  conKey: 'VCBorderCommon',
   title: '边框',
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,
-  node: BorderCommon,
+  node: () => BorderCommon,
   conNode: () => Configuration,
   image
 }

src/packages/components/Decorates/Mores/Number/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const NumberConfig: ConfigType = {
   key: 'VNumber',
+  conKey: 'VCNumber',
   title: '数字翻牌',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  node: Number,
+  node: () => Number,
   conNode: () => Configuration,
   image
 }

src/packages/components/Decorates/Mores/Time/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TimeConfig: ConfigType = {
   key: 'VTime',
+  conKey: 'VCTime',
   title: '时间',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  node: Time,
+  node: () => Time,
   conNode: () => Configuration,
   image
 }

src/packages/components/Decorates/Mores/Weather/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const WeatherConfig: ConfigType = {
   key: 'VWeather',
+  conKey: 'VCWeather',
   title: '天气',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  node: Weather,
+  node: () => Weather,
   conNode: () => Configuration,
   image
 }

src/packages/components/Decorates/Mores/WeatherTime/index.ts

@@ -6,11 +6,12 @@ import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const WeatherTimeConfig: ConfigType = {
   key: 'VWeatherTime',
+  conKey: 'VCWeatherTime',
   title: '天气和时间',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
-  node: WeatherTime,
+  node: () => WeatherTime,
   conNode: () => Configuration,
   image
 }

src/packages/index.d.ts

@@ -4,11 +4,12 @@ import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 // 组件配置
 export type ConfigType = {
   key: string
+  conKey: string,
   title: string
   category: string
   categoryName: string
   package: string
-  node: Component
+  node: () => Component
   conNode: () => Component
   image: string | (() => Promise<typeof import('*.png')>)
 }
@@ -22,7 +23,7 @@ export interface PublicConfigType {
 }
 export interface CreateComponentType extends PublicConfigType {
   key: string
-  chartConfig: Omit<ConfigType, 'node'>
+  chartConfig: Omit<ConfigType, 'node' | 'conNode'>
   option: GlobalThemeJsonType
 }
 

src/packages/index.ts

@@ -10,18 +10,25 @@ import { InformationList } from '@/packages/components/Informations/index'
 import { TableList } from '@/packages/components/Tables/index'
 
 // * 所有图表
-let packagesList: PackagesType = {
+export let packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.INFORMATION]: InformationList,
   [PackagesCategoryEnum.TABLES]: TableList,
   [PackagesCategoryEnum.DECORATES]: DecorateList
 }
 
+export const packgeInstall = (app:App) => {
+  ChartList.forEach(e=>{
+    console.log(e)
+    app.component(e.key, e.node)
+  })
+}
+
 /**
- * * 获取目标拖拽组件信息
+ * * 获取目标拖拽组件配置信息
  * @param dropData
  */
-const createComponent = async (dropData: ConfigType) => {
+ export const createComponent = async (dropData: ConfigType) => {
   const { category } = dropData
   const key = dropData.key.substring(1)
   const chart = await import(`./components/${dropData.package}/${category}/${key}/config.ts`)
@@ -30,11 +37,9 @@ const createComponent = async (dropData: ConfigType) => {
 
 /**
  * * 获取组件信息
+ * * import.meta.globEager 不好使，先从原来的位置拿把
  */
-const fetchChartComponent = async (dropData: ConfigType | Omit<ConfigType, "node">) => {
-  const key = dropData.key.substring(1)
-  const { category } = dropData
-  return await import(`../packages/components/${dropData.package}/${category}/${key}/index.vue`)
-}
-
-export { packagesList, createComponent, fetchChartComponent }
+ export const fetchChartComponent = (dropData: ConfigType | Omit<ConfigType, "node" | 'conNode'>) => {
+  const { key, package:packageName  } = dropData
+  return packagesList[packageName as PackagesCategoryEnum].filter(e=> e.key === key)[0].node()
+}

src/plugins/customComponents.ts

@@ -1,6 +1,24 @@
 import type { App } from 'vue'
 import { Skeleton } from '@/components/Skeleton'
 import { LoadingComponent } from '@/components/LoadingComponent'
+import { getLocalStorageInfo } from '@/views/preview/utils/index'
+import { fetchChartComponent } from '@/packages/index'
+import { CreateComponentType } from '@/packages/index.d'
+
+/**
+ * * 预览页面动态注册 package 组件
+ * @param app
+ */
+export const setupPreviewPackages = (app: App) => {
+  const localStorageInfo = getLocalStorageInfo()
+  if(!document.location.hash.includes('preview') || !localStorageInfo) return
+  localStorageInfo.componentList.forEach(async (e: CreateComponentType) => {
+    if (!app.component(e.key)) {
+      const chart = fetchChartComponent(e.chartConfig)
+      app.component(e.key, chart)
+    }
+  })
+}
 
 /**
  * 全局注册自定义组件

src/plugins/index.ts

@@ -1,4 +1,4 @@
 export { setupNaive } from '@/plugins/naive'
 export { setupDirectives } from '@/plugins/directives'
-export { setupCustomComponents } from '@/plugins/customComponents'
+export { setupCustomComponents, setupPreviewPackages } from '@/plugins/customComponents'
 export { icon } from '@/plugins/icon'

src/utils/componets.ts

@@ -1,19 +1,6 @@
 import { defineAsyncComponent, AsyncComponentLoader } from 'vue'
 import { AsyncLoading, AsyncSkeletonLoading } from '@/components/LoadingComponent'
-import { ConfigType } from '@/packages/index.d'
-import { fetchChartComponent } from '@/packages/index'
-/**
- * * 预览页面动态注册 package 组件
- * @param  {ConfigType} dropData
- */
-export const componentPackageInstall = async (dropData: Omit<ConfigType, "node">)  => {
-  const key = dropData.key.substring(1)
-  console.log(window['$vue']);
-  if (!window['$vue'].component(key)) {
-    const chart = await fetchChartComponent(dropData)
-    window['$vue'].component(key, chart)
-  }
-}
+
 /**
  * * 动态注册组件
  */

src/views/chart/ContentCharts/components/ItemBox/index.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, toRaw } from 'vue'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn/index'
 import { componentInstall } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
@@ -37,9 +37,10 @@ defineProps({
 // 拖拽处理
 const handleDragStart = (e: DragEvent, item: ConfigType) => {
   // 动态注册图表组件
-  componentInstall(item.key, item.node)
+  componentInstall(item.key, item.node())
+  componentInstall(item.conKey, item.conNode())
   // 将配置项绑定到拖拽属性上
-  e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'image'])))
+  e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'conNode', 'image'])))
 }
 </script>
 

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

@@ -16,7 +16,7 @@
     <!-- 位置 -->
     <PositionSetting :chartAttr="targetData.attr" />
     <!-- 自定义配置项 -->
-    <component :is="targetData.chartConfig.conNode()" :optionData="targetData.option"></component>
+    <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
     <!-- 全局设置 --> 
     <GlobalSetting :optionData="targetData.option" :in-chart="true" />
   </div>
@@ -24,15 +24,11 @@
 
 <script setup lang="ts">
 import { computed, Ref } from 'vue'
-import { loadAsyncComponent } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { GlobalSetting, PositionSetting, SizeSetting } from '@/components/ChartItemSetting/index'
 import { CreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
 
-const GlobalSettingCom = loadAsyncComponent(() =>
-  import('@/components/ChartItemSetting/index')
-)
 const chartEditStore = useChartEditStore()
 
 const targetData: Ref<CreateComponentType> = computed(() => {

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.3;
+    opacity: 0.7;
     &.visible {
       display: block;
     }

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