fix: 修改引入方式,去除config文件上的node指向

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

@@ -1,7 +1,6 @@
 import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { BarCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
-import omit from 'lodash/omit'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
@@ -54,7 +53,7 @@ export const option = {
 export default class Config extends publicConfig
   implements CreateComponentType {
   public key = BarCommonConfig.key
-  public chartConfig = omit(cloneDeep(BarCommonConfig), ['node', 'conNode'])
+  public chartConfig = cloneDeep(BarCommonConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,17 +1,14 @@
-import BarCommon from './index.vue'
-import Configuration from './config.vue'
 import image from '@/assets/images/chart/charts/bar_x.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const BarCommonConfig: ConfigType = {
-  key: 'VBarCommon',
+  key: 'BarCommon',
+  chartKey: 'VBarCommon',
   conKey: 'VCBarCommon',
   title: '柱状图',
   category: ChatCategoryEnum.BAR,
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
-  node: () => BarCommon,
+  image
-  conNode: () => Configuration,
-  image: image,
 }

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

@@ -1,7 +1,6 @@
 import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
-import { BarCrossrangefig } from './index'
+import { BarCrossrangeConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
-import omit from 'lodash/omit'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
@@ -53,8 +52,8 @@ export const option = {
 
 export default class Config extends publicConfig
   implements CreateComponentType {
-  public key: string = BarCrossrangefig.key
+  public key: string = BarCrossrangeConfig.key
-  public chartConfig = omit(cloneDeep(BarCrossrangefig), ['node', 'conNode'])
+  public chartConfig = cloneDeep(BarCrossrangeConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,17 +1,14 @@
-import BarCrossrange from './index.vue'
-import Configuration from './config.vue'
 import image from '@/assets/images/chart/charts/bar_y.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const BarCrossrangefig: ConfigType = {
+export const BarCrossrangeConfig: ConfigType = {
-  key: 'VBarCrossrange',
+  key: 'BarCrossrange',
+  chartKey: 'VBarCrossrange',
   conKey: 'VCBarCrossrange',
   title: '横向柱状图',
   category: ChatCategoryEnum.BAR,
   categoryName: ChatCategoryEnumName.BAR,
   package: PackagesCategoryEnum.CHARTS,
-  node: () => BarCrossrange,
+  image
-  conNode: () => Configuration,
-  image: image
 }

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

@@ -1,4 +1,4 @@
 import { BarCommonConfig } from './BarCommon/index'
-import { BarCrossrangefig } from './BarCrossrange/index'
+import { BarCrossrangeConfig } from './BarCrossrange/index'
 
-export default [BarCommonConfig, BarCrossrangefig]
+export default [BarCommonConfig, BarCrossrangeConfig]

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

@@ -1,7 +1,6 @@
 import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { LineCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
-import omit from 'lodash/omit'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
@@ -58,7 +57,7 @@ export const option = {
 export default class Config extends publicConfig
   implements CreateComponentType {
   public key: string = LineCommonConfig.key
-  public chartConfig = omit(LineCommonConfig, ['node', 'conNode'])
+  public chartConfig = LineCommonConfig
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,17 +1,14 @@
-import LineCommon from './index.vue'
-import Configuration from './config.vue'
 import image from '@/assets/images/chart/charts/line.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LineCommonConfig: ConfigType = {
-  key: 'VLineCommon',
+  key: 'LineCommon',
+  chartKey: 'VLineCommon',
   conKey: 'VCLineCommon',
   title: '折线图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
-  node: () => LineCommon,
+  image
-  conNode: () => Configuration,
-  image: image
 }

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

@@ -2,7 +2,6 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { LineGradientSingleConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
-import omit from 'lodash/omit'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
@@ -57,7 +56,7 @@ const options = {
 export default class Config extends publicConfig
   implements CreateComponentType {
   public key: string = LineGradientSingleConfig.key
-  public chartConfig = omit(LineGradientSingleConfig, ['node', 'conNode'])
+  public chartConfig = LineGradientSingleConfig
   // 图表配置项
   public option = echartOptionProfixHandle(options, includes)
 }

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

@@ -1,17 +1,14 @@
-import LineGradientSingle from './index.vue'
-import Configuration from './config.vue'
 import image from '@/assets/images/chart/charts/line_gradient_single.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LineGradientSingleConfig: ConfigType = {
-  key: 'VLineGradientSingle',
+  key: 'LineGradientSingle',
+  chartKey: 'VLineGradientSingle',
   conKey: 'VCLineGradientSingle',
   title: '折线面积图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
-  node: () => LineGradientSingle,
+  image
-  conNode: () => Configuration,
-  image: image
 }

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

@@ -2,7 +2,6 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { LineGradientsConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
-import omit from 'lodash/omit'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
@@ -85,7 +84,7 @@ const option = {
 export default class Config extends publicConfig
   implements CreateComponentType {
   public key: string = LineGradientsConfig.key
-  public chartConfig = omit(LineGradientsConfig, ['node', 'conNode'])
+  public chartConfig = LineGradientsConfig
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
 }

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

@@ -1,17 +1,14 @@
-import LineGradients from './index.vue'
-import Configuration from './config.vue'
 import image from '@/assets/images/chart/charts/line_gradient2.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LineGradientsConfig: ConfigType = {
-  key: 'VLineGradients',
+  key: 'LineGradients',
+  chartKey: 'VLineGradients',
   conKey: 'VCLineGradients',
   title: '折线面积图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,
-  node: () => LineGradients,
+  image
-  conNode: () => Configuration,
-  image: image
 }

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

@@ -1,7 +1,6 @@
 import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { PieCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
-import omit from 'lodash/omit'
 
 export const includes = ['legend']
 
@@ -54,7 +53,7 @@ const option = {
 export default class Config extends publicConfig implements CreateComponentType {
   public key: string = PieCommonConfig.key
 
-  public chartConfig = omit(PieCommonConfig, ['node', 'conNode'])
+  public chartConfig = PieCommonConfig
 
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)

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

@@ -1,17 +1,14 @@
-import PieCommon from './index.vue'
-import Configuration from './config.vue'
 import image from '@/assets/images/chart/charts/pie.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const PieCommonConfig: ConfigType = {
-  key: 'VPieCommon',
+  key: 'PieCommon',
+  chartKey: 'VPieCommon',
   conKey: 'VCPieCommon',
   title: '饼图',
   category: ChatCategoryEnum.PIE,
   categoryName: ChatCategoryEnumName.PIE,
   package: PackagesCategoryEnum.CHARTS,
-  node: () => PieCommon,
-  conNode: () => Configuration,
   image
 }

src/packages/index.d.ts

@@ -4,13 +4,12 @@ import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 // 组件配置
 export type ConfigType = {
   key: string
+  chartKey: string,
   conKey: string,
   title: string
   category: string
   categoryName: string
   package: string
-  node: () => Component
-  conNode: () => Component
   image: string | (() => Promise<typeof import('*.png')>)
 }
 

src/packages/index.ts

@@ -21,20 +21,12 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.DECORATES]: DecorateList
 }
 
-export const packgeInstall = (app:App) => {
-  ChartList.forEach(e=>{
-    console.log(e)
-    app.component(e.key, e.node)
-  })
-}
-
 /**
  * * 获取目标拖拽组件配置信息
  * @param dropData
  */
  export const createComponent = async (dropData: ConfigType) => {
-  const { category } = dropData
+  const { category, key } = dropData
-  const key = dropData.key.substring(1)
   const chart = await import(`./components/${dropData.package}/${category}/${key}/config.ts`)
   return new chart.default()
 }
@@ -45,7 +37,6 @@ export const packgeInstall = (app:App) => {
  * @param {FetchComFlagType} flag 标识 0为展示组件, 1为配置组件
  */
 const fetchComponent = (chartName: string, flag: FetchComFlagType) => {
-  chartName = chartName.substring(1)
   const module = flag === FetchComFlagType.VIEW ? indexModules: configModules
   for (const key in module) {
     const urlSplit = key.split('/')

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

@@ -25,6 +25,7 @@ import { MacOsControlBtn } from '@/components/MacOsControlBtn/index'
 import { componentInstall } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { ConfigType } from '@/packages/index.d'
+import { fetchConfigComponent, fetchChartComponent } from '@/packages/index'
 import omit from 'lodash/omit'
 
 defineProps({
@@ -37,10 +38,10 @@ defineProps({
 // 拖拽处理
 const handleDragStart = (e: DragEvent, item: ConfigType) => {
   // 动态注册图表组件
-  componentInstall(item.key, item.node())
+  componentInstall(item.chartKey, fetchChartComponent(item))
-  componentInstall(item.conKey, item.conNode())
+  componentInstall(item.conKey, fetchConfigComponent(item))
   // 将配置项绑定到拖拽属性上
-  e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'conNode', 'image'])))
+  e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['image'])))
 }
 </script>
 

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -30,9 +30,10 @@ export const handleDrag = async (e: DragEvent) => {
     // 设置拖拽状态
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
 
-    const dropData: Exclude<ConfigType, ['node', 'image']> = JSON.parse(
+    const dropData: Exclude<ConfigType, ['image']> = JSON.parse(
       drayDataString
     )
+    
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(dropData)
 

src/views/chart/ContentEdit/index.vue

@@ -28,7 +28,7 @@
         >
           <component
             class="edit-content-chart"
-            :is="item.key"
+            :is="item.chartConfig.chartKey"
             :chartConfig="item"
             :themeSetting="themeSetting"
             :themeColor="themeColor"