fix: 优化组件渲染方式

src/components/Echarts/index.ts

@@ -0,0 +1,2 @@
+import Echarts from './index.vue'
+export { Echarts }

src/components/Echarts/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/Chart/Pie/PieCommon/index.ts

@@ -0,0 +1,12 @@
+import node from './index.vue'
+import image from '@/assets/images/chart/pie.png'
+import { ConfigType } from '@/packages/index.d'
+import { ChatCategoryEnum } from '../../index.d'
+
+export const pieCommonConfig: ConfigType = {
+  key: 'PieCommon',
+  title: '饼图',
+  category: ChatCategoryEnum.PIE,
+  node: node,
+  image: image
+}

src/packages/components/Chart/Pie/PieCommon/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    饼图渲染
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/Chart/Pie/index.ts

@@ -0,0 +1,3 @@
+import { pieCommonConfig } from './PieCommon/index'
+
+export default [pieCommonConfig]

src/packages/components/Chart/bar/barCommon/index.ts

@@ -1,11 +1,13 @@
 import barCommon from './index.vue'
-import barImg from '@/assets/images/chart/bar_y.png'
+import image from '@/assets/images/chart/bar_y.png'
 import { ConfigType } from '@/packages/index.d'
+import { ChatCategoryEnum } from '../../index.d'
 
 // 柱状图
 export const barCommonConfig: ConfigType = {
-  key: 'Bar',
+  key: 'BarCommon',
   title: '基础',
+  category: ChatCategoryEnum.BAR,
   node: barCommon,
-  image: barImg
+  image: image
 }

src/packages/components/Chart/bar/index.ts

@@ -0,0 +1,3 @@
+import { barCommonConfig } from './BarCommon/index'
+
+export default [barCommonConfig]

src/packages/components/Chart/index.d.ts

@@ -0,0 +1,4 @@
+export enum ChatCategoryEnum {
+  BAR = '柱状图',
+  PIE = '饼图'
+}

src/packages/components/Chart/index.ts

@@ -1,3 +1,4 @@
-import { barCommonConfig } from './bar/barCommon/index'
+import Bar from './Bar'
+import Pie from './Pie'
 
-export const BarList = [barCommonConfig]
+export const ChartList = [...Bar, ...Pie]

src/packages/components/Decorate/border/borderCommon/index.ts

@@ -1,11 +1,12 @@
 import BorderCommon from './index.vue'
-import barImg from '@/assets/images/chart/bar_y.png'
+import image from '@/assets/images/chart/static.png'
 import { ConfigType } from '@/packages/index.d'
+import { ChatCategoryEnum } from '../../index.d'
 
-// 柱状图
-export const barCommonConfig: ConfigType = {
+export const borderCommonConfig: ConfigType = {
   key: 'Border',
-  title: '柱状图',
+  title: '边框',
+  category: ChatCategoryEnum.Border,
   node: BorderCommon,
-  coverGraph: barImg
+  image: image
 }

src/packages/components/Decorate/border/borderCommon/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    柱状图组件渲染
+    边框
   </div>
 </template>
 

src/packages/components/Decorate/border/index.ts

@@ -0,0 +1,3 @@
+import { borderCommonConfig } from './BorderCommon/index'
+
+export default [borderCommonConfig]

src/packages/components/Decorate/index.d.ts

@@ -0,0 +1,3 @@
+export enum ChatCategoryEnum {
+  Border = '边框',
+}

src/packages/components/Decorate/index.ts

@@ -1,3 +1,3 @@
-import { barCommonConfig } from './border/borderCommon/index'
+import Border from './Border'
 
-export const BarList = [barCommonConfig]
+export const DecorateList = [...Border]

src/packages/index.d.ts

@@ -4,11 +4,23 @@ import { Component } from '@/router/types'
 export type ConfigType = {
   key: string
   title: string
+  category: string
   node: Component
   image: string
   [T: string]: unknown
 }
 
-export type PackagesType = {
-  Charts: ConfigType[]
+
+export enum PackagesCategoryEnum {
+  CHARTS = 'CHARTS',
+  TABLES = 'TABLES',
+  TEXTS = 'TEXTS',
+  DECORATES = 'DECORATES'
 }
+
+export type PackagesType = {
+  [PackagesCategoryEnum.CHARTS]: ConfigType[]
+  [PackagesCategoryEnum.TEXTS]: ConfigType[]
+  [PackagesCategoryEnum.TABLES]: ConfigType[]
+  [PackagesCategoryEnum.DECORATES]: ConfigType[]
+}

src/packages/index.ts

@@ -1,9 +1,11 @@
-import { PackagesType } from '@/packages/index.d'
-import { BarList } from '@/packages/components/Chart/index'
+import { PackagesCategoryEnum, PackagesType } from '@/packages/index.d'
+import { ChartList } from '@/packages/components/Chart/index'
+import { DecorateList } from '@/packages/components/Decorate/index'
 
 // 所有图表
 let packagesList: PackagesType = {
-  Charts: BarList
+  [PackagesCategoryEnum.CHARTS]: ChartList,
+  [PackagesCategoryEnum.DECORATES]: DecorateList
 }
 
 export { packagesList }

src/store/modules/packagesStore/packagesStore.d.ts

@@ -2,6 +2,7 @@ import { PackagesType, ConfigType } from '@/packages/index.d'
 
 export { ConfigType }
 
+export { PackagesType }
 export interface PackagesStoreType {
   packagesList: PackagesType
 }

src/store/modules/packagesStore/packagesStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { PackagesStoreType, ConfigType } from './packagesStore.d'
+import { PackagesStoreType, PackagesType } from './packagesStore.d'
 import { packagesList } from '@/packages/index'
 
 export const usePackagesStore = defineStore({
@@ -8,11 +8,8 @@ export const usePackagesStore = defineStore({
     packagesList
   }),
   getters: {
-    getPackagesList(): ConfigType | {} {
-      if (this.packagesList && this.packagesList.charts) {
-        return this.packagesList.charts
-      }
-      return {}
+    getPackagesList(): PackagesType {
+      return this.packagesList
     }
   }
 })

src/views/chart/components/ContentCharts/components/Charts/index.ts

@@ -1,3 +0,0 @@
-import Charts from './index.vue'
-
-export { Charts }

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

@@ -1,108 +0,0 @@
-<template>
-  <div class="go-chart-common">
-    <n-menu
-      class="chart-menu-width"
-      v-model:value="selectValue"
-      :options="menuOptions"
-      :icon-size="16"
-      :indent="18"
-    />
-    <div class="chart-content-list">
-      <div class="item-box" v-for="(item, index) in menuOptions" :key="index">
-        <div class="list-header">
-          <AppleControlBtn :mini="true" :disabled="true"></AppleControlBtn>
-          <n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
-        </div>
-        <div class="list-center go-flex-center">
-          <img class="list-img" :src="item.image" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, watchEffect } from 'vue'
-import { AppleControlBtn } from '@/components/AppleControlBtn/index'
-
-const props = defineProps({
-  packagesList: {
-    type: Array,
-    default: () => []
-  }
-})
-
-let menuOptions: any[] = reactive([])
-
-watchEffect(() => {
-  console.log(props.packagesList)
-  menuOptions = props.packagesList
-})
-
-const selectValue = ref<string>(menuOptions[0]['key'])
-</script>
-
-<style lang="scss" scoped>
-/* 此高度与 ContentBox 组件关联*/
-$topHeight: 60px;
-/* 列表项宽度 */
-$itemWidth: 86%;
-/* 图片高度 */
-$imgWidth: 90%;
-@include go('chart-common') {
-  display: flex;
-  height: calc(100vh - #{$--header-height} - #{$topHeight});
-  .chart-menu-width {
-    flex-shrink: 0;
-    @include filter-bg-color('background-color2-shallow');
-  }
-  .chart-content-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 10px 0;
-    .item-box {
-      margin: 0 7%;
-      margin-top: 5px;
-      width: $itemWidth;
-      overflow: hidden;
-      border-radius: 6px;
-      @include filter-bg-color('background-color2');
-      .list-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 4px 15px;
-        @include filter-bg-color('background-color4');
-        &-text {
-          font-size: 12px;
-          margin-left: 8px;
-        }
-      }
-      .list-center {
-        padding: 6px 0;
-        .list-img {
-          width: $imgWidth;
-          border-radius: 6px;
-        }
-      }
-    }
-  }
-  @include deep() {
-    .n-menu-item {
-      height: 30px;
-      &.n-menu-item--selected {
-        &::before {
-          background-color: rgba(0, 0, 0, 0);
-        }
-      }
-      .n-menu-item-content {
-        text-align: center;
-        padding: 0px 14px !important;
-        font-size: 12px !important;
-      }
-    }
-  }
-}
-</style>

src/views/chart/components/ContentCharts/components/Decorates/index.ts

@@ -1,3 +0,0 @@
-import Decorates from './index.vue'
-
-export { Decorates }

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

@@ -1,9 +0,0 @@
-<template>
-  <div>
-    我是装饰咯
-  </div>
-</template>
-
-<script setup lang="Ts"></script>
-
-<style lang="scss" scoped></style>

src/views/chart/components/ContentCharts/components/ItemBox/index.ts

@@ -0,0 +1,3 @@
+import ItemBox from './index.vue'
+
+export { ItemBox }

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

@@ -0,0 +1,55 @@
+<template>
+  <div class="item-box" v-for="(item, index) in menuOptions" :key="index">
+    <div class="list-header">
+      <AppleControlBtn :mini="true" :disabled="true"></AppleControlBtn>
+      <n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
+    </div>
+    <div class="list-center go-flex-center">
+      <img class="list-img" :src="item.image" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AppleControlBtn } from '@/components/AppleControlBtn/index'
+defineProps({
+  menuOptions: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+/* 列表项宽度 */
+$itemWidth: 86%;
+/* 内容高度 */
+$centerHeight: 80px;
+.item-box {
+  margin: 0 7%;
+  margin-bottom: 15px;
+  width: $itemWidth;
+  overflow: hidden;
+  border-radius: 6px;
+  @include filter-bg-color('background-color2');
+  .list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2px 15px;
+    @include filter-bg-color('background-color3');
+    &-text {
+      font-size: 12px;
+      margin-left: 8px;
+    }
+  }
+  .list-center {
+    padding: 6px 0;
+    height: $centerHeight;
+    .list-img {
+      height: 100%;
+      border-radius: 6px;
+    }
+  }
+}
+</style>

src/views/chart/components/ContentCharts/components/OptionContent/hooks/handleOptions.hook.ts

@@ -0,0 +1,29 @@
+import { reactive, ref, watch } from 'vue'
+import { ConfigType } from '@/packages/index.d'
+
+export const useHandleOptions = (packages) => {
+  watch(
+    // @ts-ignore
+    () => props.selectOptions,
+    (newData: { list: ConfigType[] }) => {
+      if (!newData) return
+      newData.list.forEach((e: ConfigType) => {
+        const value: ConfigType[] = (packages.categorys as any)[e.category]
+        // @ts-ignore
+        packages.categorys[e.category] =
+          value && value.length ? [...value, e] : [e]
+      })
+      for (const val in packages.categorys) {
+        packages.menuOptions.push({
+          key: val,
+          label: val
+        })
+      }
+      selectValue.value = packages.menuOptions[0]['key']
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  )
+}

src/views/chart/components/ContentCharts/components/OptionContent/index.ts

@@ -0,0 +1,3 @@
+import OptionContent from './index.vue'
+
+export { OptionContent }

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

@@ -0,0 +1,120 @@
+<template>
+  <div class="go-chart-common">
+    <n-menu
+      class="chart-menu-width"
+      v-model:value="selectValue"
+      :options="packages.menuOptions"
+      :icon-size="16"
+      :indent="18"
+      @update:value="clickItemHandle"
+    />
+    <div class="chart-content-list">
+      <ItemBox :menuOptions="packages.selectOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { ItemBox } from '../ItemBox/index'
+import { ConfigType } from '@/packages/index.d'
+
+const props = defineProps({
+  selectOptions: {
+    type: Object,
+    default: () => []
+  }
+})
+
+let packages = reactive<{
+  [T: string]: any
+}>({
+  // 侧边栏
+  menuOptions: [],
+  // 当前选择
+  selectOptions: {},
+  // 分类归档
+  categorys: {},
+  // 存储不同类别组件进来的选中值
+  saveSelectOptions: {}
+})
+
+const selectValue = ref<string>()
+
+// 设置初始列表
+const setSelectOptions = (categorys: any) => {
+  for (const val in categorys) {
+    packages.selectOptions = categorys[val]
+    break
+  }
+}
+
+watch(
+  // @ts-ignore
+  () => props.selectOptions,
+  (newData: { list: ConfigType[] }) => {
+    if (!newData) return
+    newData.list.forEach((e: ConfigType) => {
+      const value: ConfigType[] = (packages.categorys as any)[e.category]
+      // @ts-ignore
+      packages.categorys[e.category] =
+        value && value.length ? [...value, e] : [e]
+    })
+    for (const val in packages.categorys) {
+      packages.menuOptions.push({
+        key: val,
+        label: val
+      })
+    }
+    setSelectOptions(packages.categorys)
+    selectValue.value = packages.menuOptions[0]['key']
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 处理点击事件
+const clickItemHandle = (key: string) => {
+  packages.selectOptions = packages.categorys[key]
+}
+
+</script>
+
+<style lang="scss" scoped>
+/* 此高度与 ContentBox 组件关联*/
+$topHeight: 60px;
+$menuWidth: 65px;
+@include go('chart-common') {
+  display: flex;
+  height: calc(100vh - #{$--header-height} - #{$topHeight});
+  .chart-menu-width {
+    width: $menuWidth;
+    flex-shrink: 0;
+    @include filter-bg-color('background-color2-shallow');
+  }
+  .chart-content-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 0;
+  }
+  @include deep() {
+    .n-menu-item {
+      height: 30px;
+      &.n-menu-item--selected {
+        &::before {
+          background-color: rgba(0, 0, 0, 0);
+        }
+      }
+      .n-menu-item-content {
+        text-align: center;
+        padding: 0px 14px !important;
+        font-size: 12px !important;
+      }
+    }
+  }
+}
+</style>

src/views/chart/components/ContentCharts/components/Tables/index.ts

@@ -1,3 +0,0 @@
-import Tables from './index.vue'
-
-export { Tables }

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

@@ -1,9 +0,0 @@
-<template>
-  <div>
-    我是表格咯
-  </div>
-</template>
-
-<script setup lang="Ts"></script>
-
-<style lang="scss" scoped></style>

src/views/chart/components/ContentCharts/components/Texts/index.ts

@@ -1,3 +0,0 @@
-import Texts from './index.vue'
-
-export { Texts }

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

@@ -1,9 +0,0 @@
-<template>
-  <div>
-    我是信息咯
-  </div>
-</template>
-
-<script setup lang="Ts"></script>
-
-<style lang="scss" scoped></style>

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

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

@@ -23,11 +23,14 @@
           @update:value="clickItemHandle"
         />
         <div class="menu-component-box">
-          <transition name="component-fade" mode="out-in">
-            <keep-alive>
-              <component :is="selecOptions.node" :packagesList="selecOptions.packagesList" :key="selectValue"></component>
-            </keep-alive>
-          </transition>
+          <Skeleton
+            :load="!selectOptions"
+            round
+            text
+            :repeat="2"
+            style="width: 90%;"
+          />
+          <OptionContent v-if="selectOptions" :selectOptions="selectOptions" :key="selectValue" />
         </div>
       </div>
     </aside>
@@ -37,11 +40,12 @@
 <script setup lang="ts">
 import { reactive, ref, toRefs } from 'vue'
 import { ContentBox } from '../ContentBox/index'
+import { OptionContent } from './components/OptionContent'
 import {
   getCharts,
   BarChartIcon,
   themeColor,
-  selecOptions,
+  selectOptions,
   selectValue,
   clickItemHandle,
   menuOptions