feat: 在通过拖拽、双击、搜索不同方式动态创建组件时，支持创建虚拟组件，并根据预设值和预设标题，初始化组件

src/packages/index.d.ts

@@ -122,7 +122,7 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
-  interactActions?: InteractActionsType[],
+  interactActions?: InteractActionsType[]
   events: {
     baseEvent: {
       [K in BaseEvent]?: string

src/packages/index.ts

@@ -27,8 +27,12 @@ export let packagesList: PackagesType = {
  * @param targetData
  */
 export const createComponent = async (targetData: ConfigType) => {
-  const { category, key } = targetData
+  const { virtualComponent, category, key } = targetData
-  const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
+  const chart = await import(
+    virtualComponent
+      ? `${virtualComponent}/config.ts`
+      : `./components/${targetData.package}/${category}/${key}/config.ts`
+  )
   return new chart.default()
 }
 

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

@@ -92,6 +92,10 @@ const dblclickHandle = async (item: ConfigType) => {
     componentInstall(item.conKey, fetchConfigComponent(item))
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(item)
+    if (item.virtualComponent) {
+      item.dataset && (newComponent.option.dataset = item.dataset)
+      newComponent.chartConfig.title = item.title
+    }
     // 添加
     chartEditStore.addComponentList(newComponent, false, true)
     // 选中

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

@@ -153,6 +153,10 @@ const selectChartHandle = async (item: ConfigType) => {
     componentInstall(item.conKey, fetchConfigComponent(item))
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(item)
+    if (item.virtualComponent) {
+      item.dataset && (newComponent.option.dataset = item.dataset)
+      newComponent.chartConfig.title = item.title
+    }
     // 添加
     chartEditStore.addComponentList(newComponent, false, true)
     // 选中

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

@@ -32,6 +32,10 @@ export const dragHandle = async (e: DragEvent) => {
 
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(dropData)
+    if (dropData.virtualComponent) {
+      dropData.dataset && (newComponent.option.dataset = dropData.dataset)
+      newComponent.chartConfig.title = dropData.title
+    }
 
     setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
     chartEditStore.addComponentList(newComponent, false, true)

src/views/chart/hooks/useSync.hook.ts

@@ -132,6 +132,10 @@ export const useSync = () => {
     ) => {
       // 补充 class 上的方法
       let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
+      if (_componentInstance.chartConfig.virtualComponent) {
+        _componentInstance.chartConfig.dataset && (newComponent.option.dataset = _componentInstance.chartConfig.dataset)
+        newComponent.chartConfig.title = _componentInstance.chartConfig.title
+      }
       if (callBack) {
         if (changeId) {
           callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
@@ -156,7 +160,7 @@ export const useSync = () => {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
         let loadIndex = 0
-        const listLength = projectData[key].length;
+        const listLength = projectData[key].length
         for (const comItem of projectData[key]) {
           // 设置加载数量
           let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())