简柏林 / thingskit-view · Commits

Commit dd538f76d6b36733ad53979f72f8e1c02c013800

Authored by ww
1 parent e460bf45

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

Inline Side-by-side
Showing 16 changed files with 148 additions and 165 deletions
@@ -7,14 +7,14 @@ export const option = { @@ -7,14 +7,14 @@ export const option = {
7 dataset: '物联网平台数据统计', 7 dataset: '物联网平台数据统计',
8 bgSrc: 'src/assets/external/headbackground/bg_top.png', 8 bgSrc: 'src/assets/external/headbackground/bg_top.png',
9 fontSize: 36, 9 fontSize: 36,
10 - showRight:true,  
11 - textColor:'#00f6ff',  
12 - textRightSizeColor:'#ffffff',  
13 - textRightFontSize:14,  
14 - x:0,  
15 - y:0,  
16 - xT:0,  
17 - yT:0, 10 + showRight: true,
  11 + textColor: '#00f6ff',
  12 + textRightSizeColor: '#ffffff',
  13 + textRightFontSize: 14,
  14 + x: 0,
  15 + y: 0,
  16 + xT: 0,
  17 + yT: 0,
18 } 18 }
19 19
20 export default class Config extends PublicConfigClass implements CreateComponentType { 20 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -2,14 +2,8 @@ @@ -2,14 +2,8 @@
2 <collapse-item name="信息" :expanded="true"> 2 <collapse-item name="信息" :expanded="true">
3 <setting-item-box name="背景选择" :alone="true"> 3 <setting-item-box name="背景选择" :alone="true">
4 <setting-item> 4 <setting-item>
5 - <n-select  
6 - size="small"  
7 - placeholder="请选择您要使用的背景"  
8 - style="width: 250px"  
9 - v-model:value="selectValue"  
10 - :options="selectBgOptions"  
11 - @update:value="selectBgValueHandle"  
12 - /> 5 + <n-select size="small" placeholder="请选择您要使用的背景" style="width: 250px" v-model:value="selectValue"
  6 + :options="selectBgOptions" @update:value="selectBgValueHandle" />
13 </setting-item> 7 </setting-item>
14 </setting-item-box> 8 </setting-item-box>
15 <setting-item-box name="文字" :alone="true"> 9 <setting-item-box name="文字" :alone="true">
@@ -31,7 +25,7 @@ @@ -31,7 +25,7 @@
31 </setting-item-box> 25 </setting-item-box>
32 <setting-item-box name="位置x轴"> 26 <setting-item-box name="位置x轴">
33 <setting-item name="字体位置x轴"> 27 <setting-item name="字体位置x轴">
34 - <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number> 28 + <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number>
35 </setting-item> 29 </setting-item>
36 </setting-item-box> 30 </setting-item-box>
37 <setting-item-box name="位置y轴"> 31 <setting-item-box name="位置y轴">
@@ -43,16 +37,15 @@ @@ -43,16 +37,15 @@
43 <collapse-item name="右侧" :expanded="true"> 37 <collapse-item name="右侧" :expanded="true">
44 <setting-item-box name="是否显示"> 38 <setting-item-box name="是否显示">
45 <setting-item name=""> 39 <setting-item name="">
46 - <n-switch @change="handleChange" v-model:value="optionData.showRight"/> 40 + <n-switch @change="handleChange" v-model:value="optionData.showRight" />
47 </setting-item> 41 </setting-item>
48 </setting-item-box> 42 </setting-item-box>
49 <setting-item-box name="文字"> 43 <setting-item-box name="文字">
50 <setting-item name="字体大小"> 44 <setting-item name="字体大小">
51 - <n-input-number v-model:value="optionData.textRightFontSize" size="small"  
52 - placeholder="字体大小"></n-input-number> 45 + <n-input-number v-model:value="optionData.textRightFontSize" size="small" placeholder="字体大小"></n-input-number>
53 </setting-item> 46 </setting-item>
54 <setting-item name="字体位置x轴"> 47 <setting-item name="字体位置x轴">
55 - <n-input-number v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number> 48 + <n-input-number v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>
56 </setting-item> 49 </setting-item>
57 <setting-item name="字体位置y轴"> 50 <setting-item name="字体位置y轴">
58 <n-input-number v-model:value="optionData.yT" size="small" placeholder="字体位置"></n-input-number> 51 <n-input-number v-model:value="optionData.yT" size="small" placeholder="字体位置"></n-input-number>
@@ -67,14 +60,14 @@ @@ -67,14 +60,14 @@
67 </template> 60 </template>
68 61
69 <script setup lang="ts"> 62 <script setup lang="ts">
70 -import {PropType, ref} from 'vue'  
71 -import {option} from './config' 63 +import { PropType, ref } from 'vue'
  64 +import { option } from './config'
72 import { 65 import {
73 CollapseItem, 66 CollapseItem,
74 SettingItemBox, 67 SettingItemBox,
75 SettingItem 68 SettingItem
76 } from '@/components/Pages/ChartItemSetting' 69 } from '@/components/Pages/ChartItemSetting'
77 -import {SelectOption} from "naive-ui"; 70 +import { SelectOption } from "naive-ui";
78 71
79 const props = defineProps({ 72 const props = defineProps({
80 optionData: { 73 optionData: {
1 -import {ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'  
2 -import {ChatCategoryEnum, ChatCategoryEnumName} from '../../index.d' 1 +import { ChartFrameEnum } from '@/packages/index.d'
  2 +import { ConfigType } from '@/packages/index.d'
  3 +import { PackagesCategoryEnum } from '@/packages/components/external/types'
  4 +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
3 5
4 export const LeftCenterRightHeadConfig: ConfigType = { 6 export const LeftCenterRightHeadConfig: ConfigType = {
5 key: 'LeftCenterRightHead', 7 key: 'LeftCenterRightHead',
1 <template> 1 <template>
2 <div class="go-text-box"> 2 <div class="go-text-box">
3 - <n-grid :style="{'background-image': 'url('+option.configOption.bgSrc+')'}" class="go-n-grid" :x-gap="12" :y-gap="3"  
4 - :cols="3" layout-shift-disabled> 3 + <n-grid :style="{ 'background-image': 'url(' + option.configOption.bgSrc + ')' }" class="go-n-grid" :x-gap="12" :y-gap="3"
  4 + :cols="3" layout-shift-disabled>
5 <n-grid-item> 5 <n-grid-item>
6 <!-- 占位--> 6 <!-- 占位-->
7 <div></div> 7 <div></div>
8 </n-grid-item> 8 </n-grid-item>
9 <n-grid-item> 9 <n-grid-item>
10 - <span  
11 - style="position:relative"  
12 - :style="{ top:option.configOption.y+'px',marginLeft:option.configOption.x+'px',color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{ 10 + <span style="position:relative"
  11 + :style="{ top: option.configOption.y + 'px', marginLeft: option.configOption.x + 'px', color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{
13 option.configOption.dataset 12 option.configOption.dataset
14 }}</span> 13 }}</span>
15 </n-grid-item> 14 </n-grid-item>
16 <n-grid-item> 15 <n-grid-item>
17 <span style="position:relative" v-if="option.configOption.showRight" 16 <span style="position:relative" v-if="option.configOption.showRight"
18 - :style="{ top:option.configOption.yT+'px',marginLeft:option.configOption.xT+'px',color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{ 17 + :style="{ top: option.configOption.yT + 'px', marginLeft: option.configOption.xT + 'px', color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{
19 newData 18 newData
20 }}</span> 19 }}</span>
21 </n-grid-item> 20 </n-grid-item>
@@ -23,11 +22,11 @@ @@ -23,11 +22,11 @@
23 </div> 22 </div>
24 </template> 23 </template>
25 <script setup lang="ts"> 24 <script setup lang="ts">
26 -import {PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref} from 'vue'  
27 -import {CreateComponentType} from '@/packages/index.d'  
28 -import {useChartDataFetch} from '@/hooks'  
29 -import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'  
30 -import {option as configOption} from './config' 25 +import { PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref } from 'vue'
  26 +import { CreateComponentType } from '@/packages/index.d'
  27 +import { useChartDataFetch } from '@/hooks'
  28 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  29 +import { option as configOption } from './config'
31 30
32 const props = defineProps({ 31 const props = defineProps({
33 chartConfig: { 32 chartConfig: {
@@ -55,14 +54,14 @@ props.chartConfig.attr.x = 0 @@ -55,14 +54,14 @@ props.chartConfig.attr.x = 0
55 props.chartConfig.attr.y = 0 54 props.chartConfig.attr.y = 0
56 55
57 watch( 56 watch(
58 - () => props.chartConfig.option,  
59 - (newData: any) => {  
60 - option.configOption = newData  
61 - },  
62 - {  
63 - immediate: true,  
64 - deep: false  
65 - } 57 + () => props.chartConfig.option,
  58 + (newData: any) => {
  59 + option.configOption = newData
  60 + },
  61 + {
  62 + immediate: true,
  63 + deep: false
  64 + }
66 ) 65 )
67 66
68 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { 67 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
@@ -72,18 +71,18 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { @@ -72,18 +71,18 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
72 71
73 //TODO待封装 这里和原作者时间通用获取当前时间代码一样 72 //TODO待封装 这里和原作者时间通用获取当前时间代码一样
74 onMounted(() => { 73 onMounted(() => {
75 -//格式化当前时间 74 + //格式化当前时间
76 timer = setInterval(() => { 75 timer = setInterval(() => {
77 const 76 const
78 - weeks = {  
79 - "0": '星期日',  
80 - "1": '星期一',  
81 - "2": '星期二',  
82 - "3": '星期三',  
83 - "4": '星期四',  
84 - "5": '星期五',  
85 - "6": '星期六',  
86 - } as any 77 + weeks = {
  78 + "0": '星期日',
  79 + "1": '星期一',
  80 + "2": '星期二',
  81 + "3": '星期三',
  82 + "4": '星期四',
  83 + "5": '星期五',
  84 + "6": '星期六',
  85 + } as any
87 const datetime = new Date() 86 const datetime = new Date()
88 const year = datetime.getFullYear() 87 const year = datetime.getFullYear()
89 const month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1 88 const month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
@@ -115,6 +114,7 @@ onUnmounted(() => { @@ -115,6 +114,7 @@ onUnmounted(() => {
115 display: flex; 114 display: flex;
116 align-items: center; 115 align-items: center;
117 justify-content: center; 116 justify-content: center;
  117 +
118 .n-gradient-text { 118 .n-gradient-text {
119 white-space: initial; 119 white-space: initial;
120 } 120 }
1 -import {PublicConfigClass} from '@/packages/public'  
2 -import {CreateComponentType} from '@/packages/index.d'  
3 -import {LeftCenterRightHeadCommonConfig} from './index' 1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { LeftCenterRightHeadCommonConfig } from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
5 5
6 export const option = { 6 export const option = {
1 <template> 1 <template>
2 <CollapseItem name="头部左侧样式" :expanded="true"> 2 <CollapseItem name="头部左侧样式" :expanded="true">
3 - <SettingItemBox  
4 - :name="`颜色-${index + 1}`"  
5 - v-for="(item, index) in optionData.colorLefts"  
6 - :key="index"  
7 - > 3 + <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorLefts" :key="index">
8 <SettingItem name="颜色"> 4 <SettingItem name="颜色">
9 - <n-color-picker  
10 - size="small"  
11 - :modes="['hex']"  
12 - v-model:value="optionData.colorLefts[index]"  
13 - ></n-color-picker> 5 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorLefts[index]"></n-color-picker>
14 </SettingItem> 6 </SettingItem>
15 <SettingItem> 7 <SettingItem>
16 - <n-button  
17 - size="small"  
18 - @click="optionData.colorLefts[index] = option.colorLefts[index]"  
19 - > 8 + <n-button size="small" @click="optionData.colorLefts[index] = option.colorLefts[index]">
20 恢复默认 9 恢复默认
21 </n-button> 10 </n-button>
22 </SettingItem> 11 </SettingItem>
23 </SettingItemBox> 12 </SettingItemBox>
24 </CollapseItem> 13 </CollapseItem>
25 <CollapseItem name="头部右侧样式" :expanded="true"> 14 <CollapseItem name="头部右侧样式" :expanded="true">
26 - <SettingItemBox  
27 - :name="`颜色-${index + 1}`"  
28 - v-for="(item, index) in optionData.colorRights"  
29 - :key="index"  
30 - > 15 + <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colorRights" :key="index">
31 <SettingItem name="颜色"> 16 <SettingItem name="颜色">
32 - <n-color-picker  
33 - size="small"  
34 - :modes="['hex']"  
35 - v-model:value="optionData.colorRights[index]"  
36 - ></n-color-picker> 17 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorRights[index]"></n-color-picker>
37 </SettingItem> 18 </SettingItem>
38 <SettingItem> 19 <SettingItem>
39 - <n-button  
40 - size="small"  
41 - @click="optionData.colorRights[index] = option.colorRights[index]"  
42 - > 20 + <n-button size="small" @click="optionData.colorRights[index] = option.colorRights[index]">
43 恢复默认 21 恢复默认
44 </n-button> 22 </n-button>
45 </SettingItem> 23 </SettingItem>
@@ -48,8 +26,8 @@ @@ -48,8 +26,8 @@
48 </template> 26 </template>
49 27
50 <script setup lang="ts"> 28 <script setup lang="ts">
51 -import {PropType} from 'vue'  
52 -import {option} from './config' 29 +import { PropType } from 'vue'
  30 +import { option } from './config'
53 import { 31 import {
54 CollapseItem, 32 CollapseItem,
55 SettingItemBox, 33 SettingItemBox,
1 -import {ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'  
2 -import {ChatCategoryEnum, ChatCategoryEnumName} from '../../index.d' 1 +import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
  2 +import { PackagesCategoryEnum } from '@/packages/components/external/types'
  3 +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
3 4
4 export const LeftCenterRightHeadCommonConfig: ConfigType = { 5 export const LeftCenterRightHeadCommonConfig: ConfigType = {
5 key: 'LeftCenterRightHeadCommon', 6 key: 'LeftCenterRightHeadCommon',
1 <template> 1 <template>
2 <div> 2 <div>
3 - <n-grid :x-gap="12"  
4 - :cols="3" layout-shift-disabled> 3 + <n-grid :x-gap="12" :cols="3" layout-shift-disabled>
5 <n-grid-item> 4 <n-grid-item>
6 <svg :width="w" :height="h"> 5 <svg :width="w" :height="h">
7 - <polyline  
8 - :stroke="colorLefts[0]"  
9 - stroke-width="2"  
10 - fill="transparent"  
11 - :points="`${xFalsePos(0)}, 0 ${xFalsePos(30)}, ${h / 2}`"  
12 - /> 6 + <polyline :stroke="colorLefts[0]" stroke-width="2" fill="transparent"
  7 + :points="`${xFalsePos(0)}, 0 ${xFalsePos(30)}, ${h / 2}`" />
13 8
14 - <polyline  
15 - :stroke="colorLefts[0]"  
16 - stroke-width="2"  
17 - fill="transparent"  
18 - :points="`${xFalsePos(20)}, 0 ${xFalsePos(50)}, ${h / 2} ${xFalsePos(w)}, ${  
19 - h / 2  
20 - }`"  
21 - /> 9 + <polyline :stroke="colorLefts[0]" stroke-width="2" fill="transparent" :points="`${xFalsePos(20)}, 0 ${xFalsePos(50)}, ${h / 2} ${xFalsePos(w)}, ${h / 2
  10 + }`" />
22 11
23 - <polyline  
24 - :stroke="colorLefts[1]"  
25 - fill="transparent"  
26 - stroke-width="3"  
27 - :points="`${xFalsePos(0)}, ${h - 3}, ${xFalsePos(200)}, ${h - 3}`"  
28 - /> 12 + <polyline :stroke="colorLefts[1]" fill="transparent" stroke-width="3"
  13 + :points="`${xFalsePos(0)}, ${h - 3}, ${xFalsePos(200)}, ${h - 3}`" />
29 </svg> 14 </svg>
30 </n-grid-item> 15 </n-grid-item>
31 <n-grid-item> 16 <n-grid-item>
32 -<!-- <div style="width:300px;height: 30px"></div>--> 17 + <!-- <div style="width:300px;height: 30px"></div>-->
33 </n-grid-item> 18 </n-grid-item>
34 <n-grid-item> 19 <n-grid-item>
35 -<!-- <svg :width="w" :height="h">-->  
36 -<!-- <polyline-->  
37 -<!-- :stroke="colorRights[0]"-->  
38 -<!-- stroke-width="2"-->  
39 -<!-- fill="transparent"-->  
40 -<!-- :points="`${xPos(0)}, 0 ${xPos(30)}, ${h / 2}`"-->  
41 -<!-- />--> 20 + <!-- <svg :width="w" :height="h">-->
  21 + <!-- <polyline-->
  22 + <!-- :stroke="colorRights[0]"-->
  23 + <!-- stroke-width="2"-->
  24 + <!-- fill="transparent"-->
  25 + <!-- :points="`${xPos(0)}, 0 ${xPos(30)}, ${h / 2}`"-->
  26 + <!-- />-->
42 27
43 -<!-- <polyline-->  
44 -<!-- :stroke="colorRights[0]"-->  
45 -<!-- stroke-width="2"-->  
46 -<!-- fill="transparent"-->  
47 -<!-- :points="`${xPos(20)}, 0 ${xPos(50)}, ${h / 2} ${xPos(w)}, ${-->  
48 -<!-- h / 2-->  
49 -<!-- }`"-->  
50 -<!-- />--> 28 + <!-- <polyline-->
  29 + <!-- :stroke="colorRights[0]"-->
  30 + <!-- stroke-width="2"-->
  31 + <!-- fill="transparent"-->
  32 + <!-- :points="`${xPos(20)}, 0 ${xPos(50)}, ${h / 2} ${xPos(w)}, ${-->
  33 + <!-- h / 2-->
  34 + <!-- }`"-->
  35 + <!-- />-->
51 36
52 -<!-- <polyline-->  
53 -<!-- :stroke="colorRights[1]"-->  
54 -<!-- fill="transparent"-->  
55 -<!-- stroke-width="3"-->  
56 -<!-- :points="`${xPos(0)}, ${h - 3}, ${xPos(200)}, ${h - 3}`"-->  
57 -<!-- />-->  
58 -<!-- </svg>--> 37 + <!-- <polyline-->
  38 + <!-- :stroke="colorRights[1]"-->
  39 + <!-- fill="transparent"-->
  40 + <!-- stroke-width="3"-->
  41 + <!-- :points="`${xPos(0)}, ${h - 3}, ${xPos(200)}, ${h - 3}`"-->
  42 + <!-- />-->
  43 + <!-- </svg>-->
59 </n-grid-item> 44 </n-grid-item>
60 </n-grid> 45 </n-grid>
61 </div> 46 </div>
62 </template> 47 </template>
63 <script setup lang="ts"> 48 <script setup lang="ts">
64 -import {PropType, toRefs} from 'vue'  
65 -import {CreateComponentType} from '@/packages/index.d' 49 +import { PropType, toRefs } from 'vue'
  50 +import { CreateComponentType } from '@/packages/index.d'
66 51
67 const props = defineProps({ 52 const props = defineProps({
68 chartConfig: { 53 chartConfig: {
@@ -76,8 +61,8 @@ const props = defineProps({ @@ -76,8 +61,8 @@ const props = defineProps({
76 // props.chartConfig.attr.h = 148 61 // props.chartConfig.attr.h = 148
77 // props.chartConfig.attr.x = 0 62 // props.chartConfig.attr.x = 0
78 // props.chartConfig.attr.y = 0 63 // props.chartConfig.attr.y = 0
79 -const {w, h} = toRefs(props.chartConfig.attr)  
80 -const {colorLefts,colorRights,reverse,defaultReverse} = toRefs(props.chartConfig.option) 64 +const { w, h } = toRefs(props.chartConfig.attr)
  65 +const { colorLefts, colorRights, reverse, defaultReverse } = toRefs(props.chartConfig.option)
81 66
82 const xPos = (pos: number) => { 67 const xPos = (pos: number) => {
83 if (!reverse.value) return pos 68 if (!reverse.value) return pos
1 import { LeftCenterRightHeadConfig } from './LeftCenterRightHead/index' 1 import { LeftCenterRightHeadConfig } from './LeftCenterRightHead/index'
2 import { LeftCenterRightHeadCommonConfig } from './LeftCenterRightHeadCommon/index' 2 import { LeftCenterRightHeadCommonConfig } from './LeftCenterRightHeadCommon/index'
3 3
4 -export default [LeftCenterRightHeadConfig,LeftCenterRightHeadCommonConfig] 4 +export default [LeftCenterRightHeadConfig, LeftCenterRightHeadCommonConfig]
1 <template> 1 <template>
2 - <v-chart  
3 - ref="vChartRef"  
4 - :theme="themeColor"  
5 - :option="option"  
6 - :manual-update="isPreview()"  
7 - :update-options="{ replaceMerge: replaceMergeArr }"  
8 - autoresize  
9 - ></v-chart> 2 + <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()"
  3 + :update-options="{ replaceMerge: replaceMergeArr }" autoresize></v-chart>
10 </template> 4 </template>
11 5
12 <script setup lang="ts"> 6 <script setup lang="ts">
  1 +import { ConfigType } from "@/packages/index.d"
  2 +
  3 +// 包分类枚举
  4 +export enum PackagesCategoryEnum {
  5 + COMPOSES = 'external/Composes',
  6 +}
  7 +
  8 +// 图表包类型
  9 +export type PackagesType = {
  10 + [PackagesCategoryEnum.COMPOSES]: ConfigType[]
  11 +}
  12 +
  13 +// 包分类名称
  14 +export enum PackagesCategoryName {
  15 + COMPOSES = '组合',
  16 +}
  1 +import { PackagesCategoryEnum, PackagesType } from '@/packages/components/external/types'
  2 +import { ComposesList } from '@/packages/components/external/Composes'
  3 +
  4 +export function useInjectLib(packagesList: any) {
  5 +
  6 + // console.log(ComposesList)
  7 + packagesList[PackagesCategoryEnum.COMPOSES] = ComposesList
  8 +}
@@ -150,8 +150,6 @@ export enum PackagesCategoryEnum { @@ -150,8 +150,6 @@ export enum PackagesCategoryEnum {
150 TABLES = 'Tables', 150 TABLES = 'Tables',
151 INFORMATIONS = 'Informations', 151 INFORMATIONS = 'Informations',
152 DECORATES = 'Decorates', 152 DECORATES = 'Decorates',
153 - // THINGS_KIT  
154 - COMPOSES = 'external/Composes',  
155 } 153 }
156 154
157 // 包分类名称 155 // 包分类名称
@@ -160,8 +158,6 @@ export enum PackagesCategoryName { @@ -160,8 +158,6 @@ export enum PackagesCategoryName {
160 TABLES = '列表', 158 TABLES = '列表',
161 INFORMATIONS = '信息', 159 INFORMATIONS = '信息',
162 DECORATES = '小组件', 160 DECORATES = '小组件',
163 - // THINGS_KIT  
164 - COMPOSES='组合',  
165 } 161 }
166 162
167 // 获取组件 163 // 获取组件
@@ -176,6 +172,4 @@ export type PackagesType = { @@ -176,6 +172,4 @@ export type PackagesType = {
176 [PackagesCategoryEnum.INFORMATIONS]: ConfigType[] 172 [PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
177 [PackagesCategoryEnum.TABLES]: ConfigType[] 173 [PackagesCategoryEnum.TABLES]: ConfigType[]
178 [PackagesCategoryEnum.DECORATES]: ConfigType[] 174 [PackagesCategoryEnum.DECORATES]: ConfigType[]
179 - // THINGS_KIT  
180 - [PackagesCategoryEnum.COMPOSES]: ConfigType[]  
181 } 175 }
@@ -2,22 +2,19 @@ import { ChartList } from '@/packages/components/Charts/index' @@ -2,22 +2,19 @@ import { ChartList } from '@/packages/components/Charts/index'
2 import { DecorateList } from '@/packages/components/Decorates/index' 2 import { DecorateList } from '@/packages/components/Decorates/index'
3 import { InformationList } from '@/packages/components/Informations/index' 3 import { InformationList } from '@/packages/components/Informations/index'
4 import { TableList } from '@/packages/components/Tables/index' 4 import { TableList } from '@/packages/components/Tables/index'
5 -// THINGS_KIT  
6 -import { ComposesList } from '@/packages/components/external/Composes/index'  
7 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d' 5 import { PackagesCategoryEnum, PackagesType, ConfigType, FetchComFlagType } from '@/packages/index.d'
  6 +import { useInjectLib } from './components/external/utils/useInjectLib'
8 7
9 const configModules = import.meta.globEager('./components/**/config.vue') 8 const configModules = import.meta.globEager('./components/**/config.vue')
10 const indexModules = import.meta.globEager('./components/**/index.vue') 9 const indexModules = import.meta.globEager('./components/**/index.vue')
11 const imagesModules = import.meta.globEager('../assets/images/chart/**') 10 const imagesModules = import.meta.globEager('../assets/images/chart/**')
12 11
13 // * 所有图表 12 // * 所有图表
14 -export let packagesList: PackagesType = { 13 +export const packagesList: PackagesType = {
15 [PackagesCategoryEnum.CHARTS]: ChartList, 14 [PackagesCategoryEnum.CHARTS]: ChartList,
16 [PackagesCategoryEnum.INFORMATIONS]: InformationList, 15 [PackagesCategoryEnum.INFORMATIONS]: InformationList,
17 [PackagesCategoryEnum.TABLES]: TableList, 16 [PackagesCategoryEnum.TABLES]: TableList,
18 - [PackagesCategoryEnum.DECORATES]: DecorateList,  
19 - // THINGS_KIT  
20 - [PackagesCategoryEnum.COMPOSES]: ComposesList 17 + [PackagesCategoryEnum.DECORATES]: DecorateList,
21 } 18 }
22 19
23 /** 20 /**
@@ -83,3 +80,5 @@ export const fetchImages = async (targetData?: ConfigType) => { @@ -83,3 +80,5 @@ export const fetchImages = async (targetData?: ConfigType) => {
83 } 80 }
84 return '' 81 return ''
85 } 82 }
  83 +
  84 +useInjectLib(packagesList as any)
  1 +import { PackagesCategoryEnum, PackagesCategoryName } from "@/packages/components/external/types"
  2 +import { icon } from '@/plugins'
  3 +import { renderIcon } from "@/utils"
  4 +
  5 +const { GraphicalDataFlowIcon } = icon.carbon
  6 +
  7 +export function useInjectAside(packagesListObj: Recordable) {
  8 +
  9 + packagesListObj[PackagesCategoryEnum.COMPOSES] = {
  10 + icon: renderIcon(GraphicalDataFlowIcon),
  11 + label: PackagesCategoryName.COMPOSES
  12 + }
  13 +}
@@ -6,6 +6,7 @@ import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/pack @@ -6,6 +6,7 @@ import { PackagesCategoryEnum, PackagesCategoryName, PackagesType } from '@/pack
6 // 图表 6 // 图表
7 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore' 7 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
8 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' 8 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
  9 +import { useInjectAside } from './external/useInjectAside'
9 // 图标 10 // 图标
10 const { BarChartIcon } = icon.ionicons5 11 const { BarChartIcon } = icon.ionicons5
11 const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon 12 const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
@@ -20,7 +21,7 @@ export type MenuOptionsType = { @@ -20,7 +21,7 @@ export type MenuOptionsType = {
20 21
21 const { getPackagesList } = usePackagesStore() 22 const { getPackagesList } = usePackagesStore()
22 const menuOptions: MenuOptionsType[] = [] 23 const menuOptions: MenuOptionsType[] = []
23 -// THINGS_KIT 24 +
24 const packagesListObj = { 25 const packagesListObj = {
25 [PackagesCategoryEnum.CHARTS]: { 26 [PackagesCategoryEnum.CHARTS]: {
26 icon: renderIcon(RoadmapIcon), 27 icon: renderIcon(RoadmapIcon),
@@ -37,13 +38,12 @@ const packagesListObj = { @@ -37,13 +38,12 @@ const packagesListObj = {
37 [PackagesCategoryEnum.DECORATES]: { 38 [PackagesCategoryEnum.DECORATES]: {
38 icon: renderIcon(GraphicalDataFlowIcon), 39 icon: renderIcon(GraphicalDataFlowIcon),
39 label: PackagesCategoryName.DECORATES 40 label: PackagesCategoryName.DECORATES
40 - },  
41 - [PackagesCategoryEnum.COMPOSES]: {  
42 - icon: renderIcon(GraphicalDataFlowIcon),  
43 - label: PackagesCategoryName.COMPOSES  
44 } 41 }
45 } 42 }
46 43
  44 +// THINGS_KIT
  45 +useInjectAside(packagesListObj as any)
  46 +
47 // 处理列表 47 // 处理列表
48 const handlePackagesList = () => { 48 const handlePackagesList = () => {
49 for (const val in getPackagesList) { 49 for (const val in getPackagesList) {