feat：新增图表组件的切换

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

@@ -119,6 +119,10 @@ $topHeight: 36px;
       margin-top: 2px;
     }
   }
+  .top {
+    border-bottom: 1px solid;
+    @include filter-border-color('background-color1');
+  }
   .content {
     height: calc(100vh - #{$--header-height} - #{$topHeight});
     overflow: hidden;

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,35 +2,126 @@
   <ContentBox
     class="go-content-charts"
     :class="{ scoped: !getCharts }"
-    title="图表"
-    :depth="2"
+    title="全部组件"
+    :depth="1"
     :backIcon="false"
   >
     <template #icon>
       <n-icon size="14" :depth="2">
-        <BarChartIcon />
+        <!-- <BarChartIcon /> -->
       </n-icon>
     </template>
+    <!-- 图表 -->
+    <aside>
+      <div class="menu-width-box">
+        <n-menu
+          class="menu-width"
+          v-model:value="selectValue"
+          :options="menuOptions"
+          :icon-size="16"
+          :indent="18"
+          @update:value="clickItemHandle"
+        />
+        <div class="menu-component-box">
+          <keep-alive>
+            <component :is="selectNode"></component>
+          </keep-alive>
+        </div>
+      </div>
+    </aside>
   </ContentBox>
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { reactive, ref, toRefs, computed } from 'vue'
 import { icon } from '@/plugins'
-const { BarChartIcon } = icon.ionicons5
+import { renderLang, renderIcon } from '@/utils'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+
+import { ChartCommon } from './components/ChartCommon'
+import { TableCommon } from './components/TableCommon'
+import { TextCommon } from './components/TextCommon'
+
+const { BarChartIcon } = icon.ionicons5
+const { TableSplitIcon, RoadmapIcon, SpellCheckIcon } = icon.carbon
+
+const { setItem } = useChartLayoutStore()
 const { getCharts } = toRefs(useChartLayoutStore())
+
+const collapsed = ref(false)
+
+const menuOptions = reactive([
+  {
+    key: 'ChartCommon',
+    icon: renderIcon(RoadmapIcon),
+    label: renderLang('图表'),
+    node: ChartCommon
+  },
+  {
+    key: 'TextCommon',
+    icon: renderIcon(SpellCheckIcon),
+    label: renderLang('信息'),
+    node: TableCommon
+  },
+  {
+    key: 'TableCommon',
+    icon: renderIcon(TableSplitIcon),
+    label: renderLang('表格'),
+    node: TextCommon
+  }
+])
+
+// 记录选中值
+let beforeSelect: string = menuOptions[0]['key']
+const selectValue = ref<string>(menuOptions[0]['key'])
+
+const selectNode = ref(menuOptions[0]['node'])
+
+// 点击 item
+const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
+  // 处理渲染的 node
+  selectNode.value = item.node
+  // 处理折叠
+  if (beforeSelect === key) {
+    setItem('charts', !getCharts.value)
+  } else {
+    setItem('charts', true)
+  }
+  beforeSelect = key
+}
 </script>
 
 <style lang="scss" scoped>
-$wight: 300px;
-$wightScoped: 80px;
+$width: 300px;
+$widthScoped: 80px;
+/* 此高度与 ContentBox 组件关联*/
+$topHeight: 36px;
 @include go(content-charts) {
-  width: $wight;
+  width: $width;
   @extend .go-transition;
-  &.scoped {
-    width: $wightScoped;
+  &.scoped,
+  .menu-width {
+    width: $widthScoped;
+  }
+  .menu-width-box {
+    display: flex;
+    height: calc(100vh - #{$--header-height} - #{$topHeight});
+    .menu-width {
+      @include filter-bg-color('background-color2');
+    }
+    .menu-component-box {
+      width: $width - $widthScoped;
+      overflow: hidden;
+    }
+  }
+  @include deep() {
+    .n-menu-item-content {
+      padding: 0 12px !important;
+    }
+    .n-menu-item-content__icon {
+      margin-right: 0 !important;
+    }
   }
 }
 </style>

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

@@ -3,6 +3,7 @@
     class="go-content-layers"
     :class="{ scoped: !chartLayoutStore.getLayers }"
     title="图层"
+    :depth="2"
     @back="backHandle"
   >
     <template #icon>

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

@@ -1,12 +1,19 @@
 <template>
   <n-space class="header-left-btn" :size="25">
-    <n-button size="small" quaternary #icon @click="goHomeHandle()">
-      <n-icon :depth="3">
-        <HomeIcon />
-      </n-icon>
+    <n-button size="small" quaternary @click="goHomeHandle()">
+      <template #icon>
+        <n-icon :depth="3">
+          <HomeIcon />
+        </n-icon>
+      </template>
     </n-button>
     <n-space>
-      <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
+      <n-tooltip
+        v-for="item in btnList"
+        :key="item.key"
+        placement="bottom"
+        trigger="hover"
+      >
         <template #trigger>
           <n-button
             :type="item.select ? 'success' : ''"
@@ -34,9 +41,9 @@ const { setItem } = useChartLayoutStore()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 
 type ItemType = {
-  key: string;
-  select: Ref<boolean> | boolean;
-  title: string;
+  key: string
+  select: Ref<boolean> | boolean
+  title: string
   icon: any
 }
 
@@ -69,11 +76,9 @@ const goHomeHandle = () => {
   goDialog({
     message: '返回将不会保存任何操作',
     isMaskClosable: true,
-    onPositiveCallback: goHome,
+    onPositiveCallback: goHome
   })
-
 }
-
 </script>
 <style lang="scss" scoped>
 .header-left-btn {