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

src/packages/components/Chart/Bars/BarCommon/index.ts

@@ -1,12 +1,13 @@
 import BarCommon from './index.vue'
 import image from '@/assets/images/chart/charts/bar_x.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const BarCommonConfig: ConfigType = {
   key: 'VBarCommon',
   title: '柱状图',
   category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
   node: BarCommon,
   image: image
 }

src/packages/components/Chart/Bars/BarCrossrange/index.ts

@@ -1,12 +1,13 @@
 import BarCrossrange from './index.vue'
 import image from '@/assets/images/chart/charts/bar_y.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const BarCrossrangefig: ConfigType = {
   key: 'VBarCrossrange',
   title: '横向柱状图',
   category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
   node: BarCrossrange,
   image: image
 }

src/packages/components/Chart/Lines/LineCommon/index.ts

@@ -1,12 +1,13 @@
 import LineCommon from './index.vue'
 import image from '@/assets/images/chart/charts/line.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LineCommonConfig: ConfigType = {
   key: 'VLineCommon',
   title: '折线图',
   category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
   node: LineCommon,
   image: image
 }

src/packages/components/Chart/Lines/LineGradientSingle/index.ts

@@ -1,12 +1,13 @@
 import LineGradientSingle from './index.vue'
 import image from '@/assets/images/chart/charts/line_gradient_single.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LineGradientSingleConfig: ConfigType = {
   key: 'VLineGradientSingle',
   title: '折线面积图',
   category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
   node: LineGradientSingle,
   image: image
 }

src/packages/components/Chart/Lines/LineGradients/index.ts

@@ -1,12 +1,13 @@
 import LineGradients from './index.vue'
 import image from '@/assets/images/chart/charts/line_gradient2.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LineGradientsConfig: ConfigType = {
   key: 'VLineGradientSingle',
   title: '折线面积图',
   category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
   node: LineGradients,
   image: image
 }

src/packages/components/Chart/Maps/MapChine/index.ts

@@ -1,12 +1,13 @@
 import MapChine from './index.vue'
 import image from '@/assets/images/chart/charts/map.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const MapChineConfig: ConfigType = {
   key: 'VMapChine',
   title: '北京地图',
   category: ChatCategoryEnum.MAP,
+  categoryName: ChatCategoryEnumName.MAP,
   node: MapChine,
   image: image
 }

src/packages/components/Chart/Mores/Funnel/index.ts

@@ -1,12 +1,13 @@
 import Funnel from './index.vue'
 import image from '@/assets/images/chart/charts/funnel.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const FunnelConfig: ConfigType = {
   key: 'VFunnel',
   title: '漏斗图',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: Funnel,
   image: image
 }

src/packages/components/Chart/Mores/Heatmap/index.ts

@@ -1,12 +1,13 @@
 import Heatmap from './index.vue'
 import image from '@/assets/images/chart/charts/heatmap.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const HeatmapConfig: ConfigType = {
   key: 'VHeatmap',
   title: '热力图',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: Heatmap,
   image: image
 }

src/packages/components/Chart/Mores/Point/index.ts

@@ -1,12 +1,13 @@
 import Point from './index.vue'
 import image from '@/assets/images/chart/charts/Point.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const PointConfig: ConfigType = {
   key: 'VPoint',
   title: '热力图',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: Point,
   image: image
 }

src/packages/components/Chart/Mores/Radar/index.ts

@@ -1,12 +1,13 @@
 import Radar from './index.vue'
 import image from '@/assets/images/chart/charts/radar.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const RadarConfig: ConfigType = {
   key: 'VRadar',
   title: '雷达',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: Radar,
   image: image
 }

src/packages/components/Chart/Mores/TreeMap/index.ts

@@ -1,12 +1,13 @@
 import TreeMap from './index.vue'
 import image from '@/assets/images/chart/charts/tree_map.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const TreeMapConfig: ConfigType = {
   key: 'VTreeMap',
   title: '树形分布',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: TreeMap,
   image: image
 }

src/packages/components/Chart/Mores/Variable/index.ts

@@ -1,12 +1,13 @@
 import Variable from './index.vue'
 import image from '@/assets/images/chart/charts/water_variable.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const VariableConfig: ConfigType = {
   key: 'VVariable',
   title: '折线面积图',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: Variable,
   image: image
 }

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

@@ -1,12 +1,13 @@
 import PieCommon from './index.vue'
 import image from '@/assets/images/chart/charts/pie.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const PieCommonConfig: ConfigType = {
   key: 'VPieCommon',
   title: '计量图',
   category: ChatCategoryEnum.PIE,
+  categoryName: ChatCategoryEnumName.PIE,
   node: PieCommon,
   image
 }

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

@@ -1,7 +1,15 @@
 export enum ChatCategoryEnum {
+  BAR = 'bar',
+  PIE = 'pie',
+  LINE = 'line',
+  MAP = 'map',
+  MORE = 'more'
+}
+
+export enum ChatCategoryEnumName {
   BAR = '柱状图',
   PIE = '饼图',
   LINE = '折线图',
-  MORE = '更多',
-  MAP = '地图'
+  MAP = '地图',
+  MORE = '更多'
 }

src/packages/components/Decorate/Mores/Number/index.ts

@@ -1,12 +1,13 @@
 import Number from './index.vue'
 import image from '@/assets/images/chart/decorates/number.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const NumberConfig: ConfigType = {
   key: 'VNumber',
   title: '数字翻牌',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: Number,
   image
 }

src/packages/components/Decorate/Mores/Time/index.ts

@@ -1,12 +1,13 @@
 import Time from './index.vue'
 import image from '@/assets/images/chart/decorates/time.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TimeConfig: ConfigType = {
   key: 'VTime',
   title: '时间',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: Time,
   image
 }

src/packages/components/Decorate/Mores/Weather/index.ts

@@ -1,12 +1,13 @@
 import Weather from './index.vue'
 import image from '@/assets/images/chart/decorates/weather.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const WeatherConfig: ConfigType = {
   key: 'VWeather',
   title: '天气',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: Weather,
   image
 }

src/packages/components/Decorate/Mores/WeatherTime/index.ts

@@ -1,12 +1,13 @@
 import WeatherTime from './index.vue'
 import image from '@/assets/images/chart/decorates/weather_time.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const WeatherTimeConfig: ConfigType = {
   key: 'VWeatherTime',
   title: '天气和时间',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: WeatherTime,
   image
 }

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

@@ -1,12 +1,13 @@
 import BorderCommon from './index.vue'
 import image from '@/assets/images/chart/decorates/border.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const BorderCommonConfig: ConfigType = {
   key: 'VBorderCommon',
   title: '边框',
   category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
   node: BorderCommon,
   image
 }

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

@@ -1,4 +1,9 @@
 export enum ChatCategoryEnum {
+  BORDER = 'BORDER',
+  MORE = 'MORE'
+}
+
+export enum ChatCategoryEnumName {
   BORDER = '边框',
   MORE = '更多'
 }

src/packages/components/Information/Mores/Image/index.ts

@@ -1,12 +1,13 @@
 import Image from './index.vue'
 import image from '@/assets/images/chart/informations/photo.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const ImageConfig: ConfigType = {
   key: 'VImage',
   title: '图片',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: Image,
   image
 }

src/packages/components/Information/Mores/TextCloud/index.ts

@@ -1,12 +1,13 @@
 import TextCloud from './index.vue'
 import image from '@/assets/images/chart/informations/words_cloud.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TextCloudConfig: ConfigType = {
   key: 'VTextCloud',
   title: '词云',
   category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
   node: TextCloud,
   image
 }

src/packages/components/Information/Texts/TextCommon/index.ts

@@ -1,12 +1,13 @@
 import TextCommon from './index.vue'
 import image from '@/assets/images/chart/informations/text_static.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TextCommonConfig: ConfigType = {
   key: 'VText',
   title: '文字',
   category: ChatCategoryEnum.TEXT,
+  categoryName: ChatCategoryEnumName.TEXT,
   node: TextCommon,
   image
 }

src/packages/components/Information/Titles/TitleBevelAngle/index.ts

@@ -1,12 +1,13 @@
 import TitleBevelAngle from './index.vue'
 import image from '@/assets/images/chart/informations/title_diamond2.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TitleBevelAngleConfig: ConfigType = {
   key: 'VTitleBevelAngle',
   title: '斜角标题',
   category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
   node: TitleBevelAngle,
   image
 }

src/packages/components/Information/Titles/TitleCommon/index.ts

@@ -1,12 +1,13 @@
 import TitleCommon from './index.vue'
 import image from '@/assets/images/chart/informations/title_diamond.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TitleCommonConfig: ConfigType = {
   key: 'VText',
   title: '普通标题',
   category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
   node: TitleCommon,
   image
 }

src/packages/components/Information/Titles/TitlePro/index.ts

@@ -1,12 +1,13 @@
 import TitlePro from './index.vue'
 import image from '@/assets/images/chart/informations/title_main.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../../index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
 export const TitleProConfig: ConfigType = {
   key: 'VTitlePro',
   title: '中心标题',
   category: ChatCategoryEnum.TITLE,
+  categoryName: ChatCategoryEnumName.TITLE,
   node: TitlePro,
   image
 }

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

@@ -1,4 +1,10 @@
 export enum ChatCategoryEnum {
+  TEXT = 'TEXT',
+  TITLE = 'TITLE',
+  MORE = 'MORE'
+}
+
+export enum ChatCategoryEnumName {
   TEXT = '文本',
   TITLE = '标题',
   MORE = '更多'

src/packages/components/Tables/TableCategory/index.ts → src/packages/components/Table/TableCategory/index.ts

@@ -1,12 +1,13 @@
 import TableCategory from './index.vue'
 import image from '@/assets/images/chart/Tables/tables_categary.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
 
 export const TableCategoryConfig: ConfigType = {
   key: 'VTableCategory',
   title: '归类表格',
-  category: ChatCategoryEnum.table,
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
   node: TableCategory,
   image
 }

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

@@ -0,0 +1,7 @@
+export enum ChatCategoryEnum {
+  TABLE = 'TABLE',
+}
+
+export enum ChatCategoryEnumName {
+  TABLE = '表格',
+}

src/packages/components/Tables/tableCommon/index.ts → src/packages/components/Table/tableCommon/index.ts

@@ -1,12 +1,13 @@
 import TableCommon from './index.vue'
 import image from '@/assets/images/chart/Tables/tables.png'
 import { ConfigType } from '@/packages/index.d'
-import { ChatCategoryEnum } from '../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../index.d'
 
 export const TableCommonConfig: ConfigType = {
   key: 'VTableCommon',
   title: '表格',
-  category: ChatCategoryEnum.table,
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
   node: TableCommon,
   image
 }

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

@@ -1,3 +0,0 @@
-export enum ChatCategoryEnum {
-  table = '表格',
-}

src/packages/index.d.ts

@@ -5,6 +5,7 @@ export type ConfigType = {
   key: string
   title: string
   category: string
+  categoryName: string
   node: Component
   image: string | (() => Promise<typeof import('*.png')>)
   [T: string]: unknown

src/packages/index.ts

@@ -2,7 +2,7 @@ import { PackagesCategoryEnum, PackagesType } from '@/packages/index.d'
 import { ChartList } from '@/packages/components/Chart/index'
 import { DecorateList } from '@/packages/components/Decorate/index'
 import { InformationList } from '@/packages/components/Information/index'
-import { TableList } from '@/packages/components/Tables/index'
+import { TableList } from '@/packages/components/Table/index'
 
 // 所有图表
 let packagesList: PackagesType = {

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 }"