fix: 修改左侧图表列表的中文键名问题

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

@@ -1,4 +1,5 @@
 <template>
+  <!-- 每个小模块的公共样式 -->
   <div class="go-content-box" :class="[`bg-depth${depth}`, flex && 'flex']">
     <div v-if="showTop" class="top go-mt-0 go-flex-no-wrap">
       <n-space class="go-flex-no-wrap" :size="5">

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

@@ -1,4 +1,5 @@
 <template>
+  <!-- 每一项组件的渲染 -->
   <div class="item-box" v-for="(item, index) in menuOptions" :key="index">
     <div class="list-header">
       <AppleControlBtn :mini="true" :disabled="true"></AppleControlBtn>
@@ -39,8 +40,8 @@ $centerHeight: 100px;
   overflow: hidden;
   border-radius: 6px;
   cursor: pointer;
-  border: 1px solid rgba(0,0,0,0);
-  @include filter-bg-color("background-color2");
+  border: 1px solid rgba(0, 0, 0, 0);
+  @include filter-bg-color('background-color2');
   @extend .go-transition;
   &:hover {
     @include hover-border-color('background-color4');
@@ -53,7 +54,7 @@ $centerHeight: 100px;
     align-items: center;
     justify-content: space-between;
     padding: 2px 15px;
-    @include filter-bg-color("background-color3");
+    @include filter-bg-color('background-color3');
     &-text {
       font-size: 12px;
       margin-left: 8px;

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

@@ -1,29 +0,0 @@
-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.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 侧边栏和数据分发处理 -->
   <div class="go-chart-common">
     <n-menu
       v-show="hidePackageOneCategory"
@@ -48,8 +49,11 @@ let packages = reactive<{
   selectOptions: {},
   // 分类归档
   categorys: {
-    // 全部
-    '全部': []
+    // todo 先用中文, 后面需要换成关键key
+    all: []
+  },
+  categoryNames: {
+    all: '所有'
   },
   // 分类归档数量
   categorysNum: 0,
@@ -76,17 +80,19 @@ watch(
     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])
-      packages.categorys['全部'].push(e)
+      packages.categorys[e.category] = value && value.length ? [...value, e] : [e]
+      packages.categoryNames[e.category] = e.categoryName
+      packages.categorys['all'].push(e)
     })
     for (const val in packages.categorys) {
       packages.categorysNum += 1
       packages.menuOptions.push({
         key: val,
-        label: val
+        label: packages.categoryNames[val]
       })
     }
     setSelectOptions(packages.categorys)
+    // 默认选中处理
     selectValue.value = packages.menuOptions[0]['key']
   },
   {
@@ -105,13 +111,13 @@ const clickItemHandle = (key: string) => {
 /* 此高度与 ContentBox 组件关联*/
 $topHeight: 36px;
 $menuWidth: 65px;
-@include go("chart-common") {
+@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");
+    @include filter-bg-color('background-color2-shallow');
   }
   .chart-content-list {
     flex: 1;

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

@@ -1,4 +1,5 @@
 <template>
+  <!-- 左侧所有组件的展示列表 -->
   <ContentBox
     class="go-content-charts"
     :class="{ scoped: !getCharts }"