perf: 修改组件添加方式, 采用追加的方式,减少源代码修改

@@ -7,14 +7,14 @@ export const option = {
   dataset: '物联网平台数据统计',
   bgSrc: 'src/assets/external/headbackground/bg_top.png',
   fontSize: 36,
-  showRight:true,
-  textColor:'#00f6ff',
-  textRightSizeColor:'#ffffff',
-  textRightFontSize:14,
-  x:0,
-  y:0,
-  xT:0,
-  yT:0,
+  showRight: true,
+  textColor: '#00f6ff',
+  textRightSizeColor: '#ffffff',
+  textRightFontSize: 14,
+  x: 0,
+  y: 0,
+  xT: 0,
+  yT: 0,
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -2,14 +2,8 @@
   <collapse-item name="信息" :expanded="true">
     <setting-item-box name="背景选择" :alone="true">
       <setting-item>
-        <n-select
-            size="small"
-            placeholder="请选择您要使用的背景"
-            style="width: 250px"
-            v-model:value="selectValue"
-            :options="selectBgOptions"
-            @update:value="selectBgValueHandle"
-        />
+        <n-select size="small" placeholder="请选择您要使用的背景" style="width: 250px" v-model:value="selectValue"
+          :options="selectBgOptions" @update:value="selectBgValueHandle" />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="文字" :alone="true">
@@ -31,7 +25,7 @@
     </setting-item-box>
     <setting-item-box name="位置x轴">
       <setting-item name="字体位置x轴">
-        <n-input-number  v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number>
+        <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number>
       </setting-item>
     </setting-item-box>
     <setting-item-box name="位置y轴">
@@ -43,16 +37,15 @@
   <collapse-item name="右侧" :expanded="true">
     <setting-item-box name="是否显示">
       <setting-item name="">
-        <n-switch @change="handleChange" v-model:value="optionData.showRight"/>
+        <n-switch @change="handleChange" v-model:value="optionData.showRight" />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="文字">
       <setting-item name="字体大小">
-        <n-input-number v-model:value="optionData.textRightFontSize" size="small"
-                        placeholder="字体大小"></n-input-number>
+        <n-input-number v-model:value="optionData.textRightFontSize" size="small" placeholder="字体大小"></n-input-number>
       </setting-item>
       <setting-item name="字体位置x轴">
-        <n-input-number  v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>
+        <n-input-number v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>
       </setting-item>
       <setting-item name="字体位置y轴">
         <n-input-number v-model:value="optionData.yT" size="small" placeholder="字体位置"></n-input-number>
@@ -67,14 +60,14 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, ref} from 'vue'
-import {option} from './config'
+import { PropType, ref } from 'vue'
+import { option } from './config'
 import {
   CollapseItem,
   SettingItemBox,
   SettingItem
 } from '@/components/Pages/ChartItemSetting'
-import {SelectOption} from "naive-ui";
+import { SelectOption } from "naive-ui";
 
 const props = defineProps({
   optionData: {

-import {ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'
-import {ChatCategoryEnum, ChatCategoryEnumName} from '../../index.d'
+import { ChartFrameEnum } from '@/packages/index.d'
+import { ConfigType } from '@/packages/index.d'
+import { PackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LeftCenterRightHeadConfig: ConfigType = {
     key: 'LeftCenterRightHead',

 <template>
   <div class="go-text-box">
-    <n-grid :style="{'background-image': 'url('+option.configOption.bgSrc+')'}" class="go-n-grid" :x-gap="12" :y-gap="3"
-            :cols="3" layout-shift-disabled>
+    <n-grid :style="{ 'background-image': 'url(' + option.configOption.bgSrc + ')' }" class="go-n-grid" :x-gap="12" :y-gap="3"
+      :cols="3" layout-shift-disabled>
       <n-grid-item>
         <!--        占位-->
         <div></div>
       </n-grid-item>
       <n-grid-item>
-        <span
-            style="position:relative"
-            :style="{ top:option.configOption.y+'px',marginLeft:option.configOption.x+'px',color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{
+        <span style="position:relative"
+          :style="{ top: option.configOption.y + 'px', marginLeft: option.configOption.x + 'px', color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{
             option.configOption.dataset
           }}</span>
       </n-grid-item>
       <n-grid-item>
         <span style="position:relative" v-if="option.configOption.showRight"
-              :style="{ top:option.configOption.yT+'px',marginLeft:option.configOption.xT+'px',color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{
+          :style="{ top: option.configOption.yT + 'px', marginLeft: option.configOption.xT + 'px', color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{
             newData
           }}</span>
       </n-grid-item>
@@ -23,11 +22,11 @@
   </div>
 </template>
 <script setup lang="ts">
-import {PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref} from 'vue'
-import {CreateComponentType} from '@/packages/index.d'
-import {useChartDataFetch} from '@/hooks'
-import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
-import {option as configOption} from './config'
+import { PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -55,14 +54,14 @@ props.chartConfig.attr.x = 0
 props.chartConfig.attr.y = 0
 
 watch(
-    () => props.chartConfig.option,
-    (newData: any) => {
-      option.configOption = newData
-    },
-    {
-      immediate: true,
-      deep: false
-    }
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.configOption = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
 )
 
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
@@ -72,18 +71,18 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 
 //TODO待封装 这里和原作者时间通用获取当前时间代码一样
 onMounted(() => {
-//格式化当前时间
+  //格式化当前时间
   timer = setInterval(() => {
     const
-        weeks = {
-          "0": '星期日',
-          "1": '星期一',
-          "2": '星期二',
-          "3": '星期三',
-          "4": '星期四',
-          "5": '星期五',
-          "6": '星期六',
-        } as any
+      weeks = {
+        "0": '星期日',
+        "1": '星期一',
+        "2": '星期二',
+        "3": '星期三',
+        "4": '星期四',
+        "5": '星期五',
+        "6": '星期六',
+      } as any
     const datetime = new Date()
     const year = datetime.getFullYear()
     const month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
@@ -115,6 +114,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
+
   .n-gradient-text {
     white-space: initial;
   }

-import {PublicConfigClass} from '@/packages/public'
-import {CreateComponentType} from '@/packages/index.d'
-import {LeftCenterRightHeadCommonConfig} from './index'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { LeftCenterRightHeadCommonConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {

 <template>
   <CollapseItem name="头部左侧样式" :expanded="true">
-    <SettingItemBox
-        :name="`颜色-${index + 1}`"
-        v-for="(item, index) in optionData.colorLefts"
-        :key="index"
-    >
+    <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorLefts" :key="index">
       <SettingItem name="颜色">
-        <n-color-picker
-            size="small"
-            :modes="['hex']"
-            v-model:value="optionData.colorLefts[index]"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorLefts[index]"></n-color-picker>
       </SettingItem>
       <SettingItem>
-        <n-button
-            size="small"
-            @click="optionData.colorLefts[index] = option.colorLefts[index]"
-        >
+        <n-button size="small" @click="optionData.colorLefts[index] = option.colorLefts[index]">
           恢复默认
         </n-button>
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
   <CollapseItem name="头部右侧样式" :expanded="true">
-    <SettingItemBox
-        :name="`颜色-${index + 1}`"
-        v-for="(item, index) in optionData.colorRights"
-        :key="index"
-    >
+    <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorRights" :key="index">
       <SettingItem name="颜色">
-        <n-color-picker
-            size="small"
-            :modes="['hex']"
-            v-model:value="optionData.colorRights[index]"
-        ></n-color-picker>
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorRights[index]"></n-color-picker>
       </SettingItem>
       <SettingItem>
-        <n-button
-            size="small"
-            @click="optionData.colorRights[index] = option.colorRights[index]"
-        >
+        <n-button size="small" @click="optionData.colorRights[index] = option.colorRights[index]">
           恢复默认
         </n-button>
       </SettingItem>
@@ -48,8 +26,8 @@
 </template>
 
 <script setup lang="ts">
-import {PropType} from 'vue'
-import {option} from './config'
+import { PropType } from 'vue'
+import { option } from './config'
 import {
   CollapseItem,
   SettingItemBox,

-import {ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'
-import {ChatCategoryEnum, ChatCategoryEnumName} from '../../index.d'
+import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
+import { PackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LeftCenterRightHeadCommonConfig: ConfigType = {
     key: 'LeftCenterRightHeadCommon',

 <template>
   <div>
-    <n-grid :x-gap="12"
-            :cols="3" layout-shift-disabled>
+    <n-grid :x-gap="12" :cols="3" layout-shift-disabled>
       <n-grid-item>
         <svg :width="w" :height="h">
-          <polyline
-              :stroke="colorLefts[0]"
-              stroke-width="2"
-              fill="transparent"
-              :points="`${xFalsePos(0)}, 0 ${xFalsePos(30)}, ${h / 2}`"
-          />
+          <polyline :stroke="colorLefts[0]" stroke-width="2" fill="transparent"
+            :points="`${xFalsePos(0)}, 0 ${xFalsePos(30)}, ${h / 2}`" />
 
-          <polyline
-              :stroke="colorLefts[0]"
-              stroke-width="2"
-              fill="transparent"
-              :points="`${xFalsePos(20)}, 0 ${xFalsePos(50)}, ${h / 2} ${xFalsePos(w)}, ${
-          h / 2
-        }`"
-          />
+          <polyline :stroke="colorLefts[0]" stroke-width="2" fill="transparent" :points="`${xFalsePos(20)}, 0 ${xFalsePos(50)}, ${h / 2} ${xFalsePos(w)}, ${h / 2
+            }`" />
 
-          <polyline
-              :stroke="colorLefts[1]"
-              fill="transparent"
-              stroke-width="3"
-              :points="`${xFalsePos(0)}, ${h - 3}, ${xFalsePos(200)}, ${h - 3}`"
-          />
+          <polyline :stroke="colorLefts[1]" fill="transparent" stroke-width="3"
+            :points="`${xFalsePos(0)}, ${h - 3}, ${xFalsePos(200)}, ${h - 3}`" />
         </svg>
       </n-grid-item>
       <n-grid-item>
-<!--        <div style="width:300px;height: 30px"></div>-->
+        <!--        <div style="width:300px;height: 30px"></div>-->
       </n-grid-item>
       <n-grid-item>
-<!--        <svg :width="w" :height="h">-->
-<!--          <polyline-->
-<!--              :stroke="colorRights[0]"-->
-<!--              stroke-width="2"-->
-<!--              fill="transparent"-->
-<!--              :points="`${xPos(0)}, 0 ${xPos(30)}, ${h / 2}`"-->
-<!--          />-->
+        <!--        <svg :width="w" :height="h">-->
+        <!--          <polyline-->
+        <!--              :stroke="colorRights[0]"-->
+        <!--              stroke-width="2"-->
+        <!--              fill="transparent"-->
+        <!--              :points="`${xPos(0)}, 0 ${xPos(30)}, ${h / 2}`"-->
+        <!--          />-->
 
-<!--          <polyline-->
-<!--              :stroke="colorRights[0]"-->
-<!--              stroke-width="2"-->
-<!--              fill="transparent"-->
-<!--              :points="`${xPos(20)}, 0 ${xPos(50)}, ${h / 2} ${xPos(w)}, ${-->
-<!--          h / 2-->
-<!--        }`"-->
-<!--          />-->
+        <!--          <polyline-->
+        <!--              :stroke="colorRights[0]"-->
+        <!--              stroke-width="2"-->
+        <!--              fill="transparent"-->
+        <!--              :points="`${xPos(20)}, 0 ${xPos(50)}, ${h / 2} ${xPos(w)}, ${-->
+        <!--          h / 2-->
+        <!--        }`"-->
+        <!--          />-->
 
-<!--          <polyline-->
-<!--              :stroke="colorRights[1]"-->
-<!--              fill="transparent"-->
-<!--              stroke-width="3"-->
-<!--              :points="`${xPos(0)}, ${h - 3}, ${xPos(200)}, ${h - 3}`"-->
-<!--          />-->
-<!--        </svg>-->
+        <!--          <polyline-->
+        <!--              :stroke="colorRights[1]"-->
+        <!--              fill="transparent"-->
+        <!--              stroke-width="3"-->
+        <!--              :points="`${xPos(0)}, ${h - 3}, ${xPos(200)}, ${h - 3}`"-->
+        <!--          />-->
+        <!--        </svg>-->
       </n-grid-item>
     </n-grid>
   </div>
 </template>
 <script setup lang="ts">
-import {PropType, toRefs} from 'vue'
-import {CreateComponentType} from '@/packages/index.d'
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({
   chartConfig: {
@@ -76,8 +61,8 @@ const props = defineProps({
 // props.chartConfig.attr.h = 148
 // props.chartConfig.attr.x = 0
 // props.chartConfig.attr.y = 0
-const {w, h} = toRefs(props.chartConfig.attr)
-const {colorLefts,colorRights,reverse,defaultReverse} = toRefs(props.chartConfig.option)
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colorLefts, colorRights, reverse, defaultReverse } = toRefs(props.chartConfig.option)
 
 const xPos = (pos: number) => {
   if (!reverse.value) return pos

 import { LeftCenterRightHeadConfig } from './LeftCenterRightHead/index'
 import { LeftCenterRightHeadCommonConfig } from './LeftCenterRightHeadCommon/index'
 
-export default [LeftCenterRightHeadConfig,LeftCenterRightHeadCommonConfig]
+export default [LeftCenterRightHeadConfig, LeftCenterRightHeadCommonConfig]

 <template>
-  <v-chart
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option"
-    :manual-update="isPreview()"
-    :update-options="{ replaceMerge: replaceMergeArr }"
-    autoresize
-  ></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()"
+    :update-options="{ replaceMerge: replaceMergeArr }" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">

+import { ConfigType } from "@/packages/index.d"
+
+// 包分类枚举
+export enum PackagesCategoryEnum {
+  COMPOSES = 'external/Composes',
+}
+
+// 图表包类型
+export type PackagesType = {
+  [PackagesCategoryEnum.COMPOSES]: ConfigType[]
+}
+
+// 包分类名称
+export enum PackagesCategoryName {
+  COMPOSES = '组合',
+}

+import { PackagesCategoryEnum, PackagesType } from '@/packages/components/external/types'
+import { ComposesList } from '@/packages/components/external/Composes'
+
+export function useInjectLib(packagesList: any) {
+
+  // console.log(ComposesList)
+  packagesList[PackagesCategoryEnum.COMPOSES] = ComposesList
+}

@@ -150,8 +150,6 @@ export enum PackagesCategoryEnum {
   TABLES = 'Tables',
   INFORMATIONS = 'Informations',
   DECORATES = 'Decorates',
-  // THINGS_KIT
-  COMPOSES = 'external/Composes',
 }
 
 // 包分类名称
@@ -160,8 +158,6 @@ export enum PackagesCategoryName {
   TABLES = '列表',
   INFORMATIONS = '信息',
   DECORATES = '小组件',
-  // THINGS_KIT
-  COMPOSES='组合',
 }
 
 // 获取组件
@@ -176,6 +172,4 @@ export type PackagesType = {
   [PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
   [PackagesCategoryEnum.TABLES]: ConfigType[]
   [PackagesCategoryEnum.DECORATES]: ConfigType[]
-  // THINGS_KIT
-  [PackagesCategoryEnum.COMPOSES]: ConfigType[]
 }

@@ -2,22 +2,19 @@ import { ChartList } from '@/packages/components/Charts/index'
 import { DecorateList } from '@/packages/components/Decorates/index'
 import { InformationList } from '@/packages/components/Informations/index'
 import { TableList } from '@/packages/components/Tables/index'
-// THINGS_KIT
-import { ComposesList } from '@/packages/components/external/Composes/index'
 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
+import { useInjectLib } from './components/external/utils/useInjectLib'
 
 const configModules = import.meta.globEager('./components/**/config.vue')
 const indexModules = import.meta.globEager('./components/**/index.vue')
 const imagesModules = import.meta.globEager('../assets/images/chart/**')
 
 // * 所有图表
-export let packagesList: PackagesType = {
+export const packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.INFORMATIONS]: InformationList,
   [PackagesCategoryEnum.TABLES]: TableList,
-  [PackagesCategoryEnum.DECORATES]: DecorateList,
-  // THINGS_KIT
-  [PackagesCategoryEnum.COMPOSES]: ComposesList
+  [PackagesCategoryEnum.DECORATES]: DecorateList, 
 }
 
 /**
@@ -83,3 +80,5 @@ export const fetchImages = async (targetData?: ConfigType) => {
   }
   return ''
 }
+
+useInjectLib(packagesList as any)

+import { PackagesCategoryEnum, PackagesCategoryName } from "@/packages/components/external/types"
+import { icon } from '@/plugins'
+import { renderIcon } from "@/utils"
+
+const { GraphicalDataFlowIcon } = icon.carbon
+
+export function useInjectAside(packagesListObj: Recordable) {
+
+  packagesListObj[PackagesCategoryEnum.COMPOSES] = {
+    icon: renderIcon(GraphicalDataFlowIcon),
+    label: PackagesCategoryName.COMPOSES
+  }
+}

@@ -6,6 +6,7 @@ import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/pack
 // 图表
 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { useInjectAside } from './external/useInjectAside'
 // 图标
 const { BarChartIcon } = icon.ionicons5
 const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
@@ -20,7 +21,7 @@ export type MenuOptionsType = {
 
 const { getPackagesList } = usePackagesStore()
 const menuOptions: MenuOptionsType[] = []
-// THINGS_KIT
+
 const packagesListObj = {
   [PackagesCategoryEnum.CHARTS]: {
     icon: renderIcon(RoadmapIcon),
@@ -37,13 +38,12 @@ const packagesListObj = {
   [PackagesCategoryEnum.DECORATES]: {
     icon: renderIcon(GraphicalDataFlowIcon),
     label: PackagesCategoryName.DECORATES
-  },
-  [PackagesCategoryEnum.COMPOSES]: {
-    icon: renderIcon(GraphicalDataFlowIcon),
-    label: PackagesCategoryName.COMPOSES
   }
 }
 
+// THINGS_KIT
+useInjectAside(packagesListObj as any)
+
 // 处理列表
 const handlePackagesList = () => {
   for (const val in getPackagesList) {