fix: 优化组件渲染方式

src/views/chart/components/ContentCharts/hooks/asideHook.ts

@@ -1,11 +1,8 @@
 import { reactive, ref } from 'vue'
 import { icon } from '@/plugins'
-import { Charts } from '../components/Charts'
-import { Tables } from '../components/Tables'
-import { Texts } from '../components/Texts'
-import { Decorates } from '../components/Decorates'
 import { renderLang, renderIcon } from '@/utils'
 import { themeColor, setItem, getCharts } from './layoutHook'
+import { PackagesCategoryEnum } from '@/packages/index.d'
 // 图表
 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
 // 图标
@@ -18,65 +15,56 @@ const {
 } = icon.carbon
 
 // 图表
-const { packagesList } = usePackagesStore()
-const menuOptions: any[] = reactive([])
+const { getPackagesList } = usePackagesStore()
+const menuOptions = reactive<{
+  [T: string]: any
+}>([])
 
-const infoObj = new Map([
-  [
-    'Charts',
-    {
-      icon: renderIcon(RoadmapIcon),
-      label: renderLang('图表'),
-      node: Charts
-    }
-  ],
-  [
-    'Tables',
-    {
-      icon: renderIcon(TableSplitIcon),
-      label: renderLang('表格'),
-      node: Tables
-    }
-  ],
-  [
-    'Texts',
-    {
-      icon: renderIcon(SpellCheckIcon),
-      label: renderLang('信息'),
-      node: Tables
-    }
-  ],
-  [
-    'Decorates',
-    {
-      icon: renderIcon(GraphicalDataFlowIcon),
-      label: renderLang('表格'),
-      node: Decorates
-    }
-  ],
-])
+const packagesListObj = {
+  [PackagesCategoryEnum.CHARTS]: {
+    icon: renderIcon(RoadmapIcon),
+    label: renderLang('图表')
+  },
+  // [PackagesCategoryEnum.TEXTS]: {
+  //   icon: renderIcon(SpellCheckIcon),
+  //   label: renderLang('信息')
+  // },
+  // [PackagesCategoryEnum.TABLES]: {
+  //   icon: renderIcon(GraphicalDataFlowIcon),
+  //   label: renderLang('表格')
+  // },
+  [PackagesCategoryEnum.DECORATES]: {
+    icon: renderIcon(GraphicalDataFlowIcon),
+    label: renderLang('装饰')
+  }
+}
 
-Object.getOwnPropertyNames(packagesList).forEach(function (key) {
-  menuOptions.push({
-    key: key,
-    icon: infoObj.get(key)?.icon,
-    label: infoObj.get(key)?.label,
-    node: infoObj.get(key)?.node,
-    // @ts-ignore string 赋值给 any 的问题
-    packagesList: packagesList[key]
-  })
-})
+// 处理列表
+const handlePackagesList = () => {
+  for (const val in getPackagesList) {
+    menuOptions.push({
+      key: val,
+      // @ts-ignore
+      icon: packagesListObj[val].icon,
+      // @ts-ignore
+      label: packagesListObj[val].label,
+      // @ts-ignore
+      list: getPackagesList[val]
+    })
+  }
+}
+handlePackagesList()
 
 // 记录选中值
 let beforeSelect: string = menuOptions[0]['key']
 const selectValue = ref<string>(menuOptions[0]['key'])
+
 // 选中的对象值
-const selecOptions = ref(menuOptions[0])
+const selectOptions = ref(menuOptions[0])
 
 // 点击 item
-const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
-  // 处理渲染的 node
-  selecOptions.value = item
+const clickItemHandle = (key: string, item: any) => {
+  selectOptions.value = item
   // 处理折叠
   if (beforeSelect === key) {
     setItem('charts', !getCharts.value)
@@ -90,7 +78,7 @@ export {
   getCharts,
   BarChartIcon,
   themeColor,
-  selecOptions,
+  selectOptions,
   selectValue,
   clickItemHandle,
   menuOptions