feat: 新增组件预览

2026-04-23 00:00:12 +08:00 · 2022-03-07 12:33:05 +08:00
parent 8aa4490ea9
commit e6a99302d6
32 changed files with 102 additions and 93 deletions
@@ -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,
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }
@@ -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
 }

@@ -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()
+}