feat：新增图表组件的切换

package.json

@@ -7,6 +7,7 @@
     "lint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix --ext"
   },
   "dependencies": {
+    "@vicons/carbon": "^0.11.0",
     "axios": "^0.23.0",
     "crypto-ts": "^1.0.2",
     "mockjs": "^1.1.0",

pnpm-lock.yaml

@@ -4,6 +4,7 @@ specifiers:
   '@types/node': ^16.11.1
   '@typescript-eslint/eslint-plugin': ^5.6.0
   '@typescript-eslint/parser': ^5.6.0
+  '@vicons/carbon': ^0.11.0
   '@vicons/ionicons5': ~0.11.0
   '@vitejs/plugin-vue': ^1.9.3
   '@vitejs/plugin-vue-jsx': ^1.2.0
@@ -36,6 +37,7 @@ specifiers:
   vue-tsc: ^0.28.7
 
 dependencies:
+  '@vicons/carbon': r2.cnpmjs.org/@vicons/carbon/0.11.0
   axios: rg.cnpmjs.org/axios/0.23.0
   crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2
   mockjs: rg.cnpmjs.org/mockjs/1.1.0
@@ -134,6 +136,12 @@ packages:
     version: 14.14.45
     dev: false
 
+  r2.cnpmjs.org/@vicons/carbon/0.11.0:
+    resolution: {integrity: sha512-+Wkl8wOP1GR7jS+OKcsJ58NnZr4i+BZhbpLRtgpZQui1zFpYjoWinwvYKLjGKJ/oiR10Q237cBDjGwmMSzXqTg==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/@vicons/carbon/-/carbon-0.11.0.tgz}
+    name: '@vicons/carbon'
+    version: 0.11.0
+    dev: false
+
   r2.cnpmjs.org/ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz}
     name: ansi-regex

src/plugins/icon.ts

@@ -37,10 +37,16 @@ import {
   ChevronBackOutline as ChevronBackOutlineIcon,
   Flash as FlashIcon,
   SettingsSharp as SettingsSharpIcon,
-  Home as HomeIcon
+  Home as HomeIcon,
+  Card as CardIcon
 } from '@vicons/ionicons5'
 
-// ionicons5 在这里
+import {
+  TableSplit as TableSplitIcon,
+  Roadmap as RoadmapIcon,
+  SpellCheck as SpellCheckIcon
+} from '@vicons/carbon'
+
 const ionicons5 = {
   // 帮助
   HelpOutlineIcon,
@@ -119,11 +125,23 @@ const ionicons5 = {
   // 设置（齿轮）
   SettingsSharpIcon,
   // 回退
-  HomeIcon
+  HomeIcon,
+  // 控件(卡片)
+  CardIcon
+}
+
+const carbon = {
+  // 信息
+  SpellCheckIcon,
+  // 图表
+  RoadmapIcon,
+  // 表格
+  TableSplitIcon
 }
 
 // https://www.xicons.org/#/ 还有很多
 
 export const icon = {
-  ionicons5
+  ionicons5,
+  carbon
 }

src/styles/common/mixins/mixins.scss

@@ -52,14 +52,12 @@
   }
 }
 
-//获取边框颜色
+//设置边框颜色
 @mixin filter-border-color($target) {
   @include themeify {
     border-color: themed($target);
   }
 }
-
-//获取边框颜色
 @mixin hover-border-color($target) {
   @include themeify {
     border: 1px solid themed($target);

src/styles/common/var.scss

@@ -17,7 +17,7 @@ $--color-light-bg-2: #f2f3f5;
 $--color-light-bg-3: #e5e6eb;
 $--color-light-bg-4: #c9cdd4;
 $--color-light-bg-5: #bebebe;
-$--color-dark-border: #efeff5;
+$--color-light-border: #efeff5;
 
 // 黑色
 $--color-dark-black: #000;
@@ -42,6 +42,5 @@ $--filter-color-login-light: rgba(240, 240, 240, 0.8);
 
 // 边框
 $--border-radius-base: 8px;
-$--border-bottom-style: 1px solid $--color-dark-border;
 // 阴影
 $--border-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

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="图表"
+    title="全部组件"
-    :depth="2"
+    :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;
+$width: 300px;
-$wightScoped: 80px;
+$widthScoped: 80px;
+/* 此高度与 ContentBox 组件关联*/
+$topHeight: 36px;
 @include go(content-charts) {
-  width: $wight;
+  width: $width;
   @extend .go-transition;
-  &.scoped {
+  &.scoped,
-    width: $wightScoped;
+  .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-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;
+  key: string
-  select: Ref<boolean> | boolean;
+  select: Ref<boolean> | boolean
-  title: string;
+  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 {