feat: 新增chart组件数据内容

2024-11-29 18:28:28 +08:00 · 2022-01-14 16:17:14 +08:00 · 2022-01-14 16:17:14 +08:00 · b03a495712
commit b03a495712
parent 95e2cdc689
32 changed files with 493 additions and 187 deletions
--- a/index.css
+++ b/index.css
@ -0,0 +1,85 @@
+* {
+  margin: 0;
+}
+.first-loading-wrp {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #17171a;
+}
+.first-loading-wrp > h1 {
+  font-size: 128px;
+}
+.first-loading-wrp .loading-wrp {
+  padding: 98px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dot {
+  animation: antRotate 1.2s infinite linear;
+  transform: rotate(45deg);
+  position: relative;
+  display: inline-block;
+  font-size: 32px;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+}
+.dot i {
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  display: block;
+  background-color: #1890ff;
+  border-radius: 100%;
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  opacity: 0.3;
+  animation: antSpinMove 1s infinite linear alternate;
+}
+.dot i:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.dot i:nth-child(2) {
+  top: 0;
+  right: 0;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+.dot i:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+.dot i:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  -webkit-animation-delay: 1.2s;
+  animation-delay: 1.2s;
+}
+@keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+@-webkit-keyframes antRotate {
+  to {
+    -webkit-transform: rotate(405deg);
+    transform: rotate(405deg);
+  }
+}
+@keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes antSpinMove {
+  to {
+    opacity: 1;
+  }
+}
--- a/index.html
+++ b/index.html
@ -1,26 +1,27 @@
 <!DOCTYPE html>
 <html lang="zh-cmn-Hans">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
-  <meta name="renderer" content="webkit"/>
-  <meta
-    name="viewport"
-    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
-  />
-  <link rel="icon" href="./favicon.ico"/>
-  <title>GoView</title>
-  <style>*{margin: 0;}.first-loading-wrp{display:flex;justify-content:center;align-items:center;height:100vh;background-color: #17171a;}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
-</head>
-<body>
-<div id="appProvider" style="display: none"></div>
-<div id="app">
-  <div class="first-loading-wrp">
-    <div class="loading-wrp">
-        <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <link rel="icon" href="./favicon.ico" />
+    <title>GoView</title>
+    <link rel="stylesheet" href="./index.css">
+    
+  </head>
+  <body>
+    <div id="appProvider" style="display: none;"></div>
+    <div id="app">
+      <div class="first-loading-wrp">
+        <div class="loading-wrp">
+          <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+        </div>
+      </div>
    </div>
-  </div>
-</div>
-<script type="module" src="/src/main.ts"></script>
-</body>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>
--- a/src/components/AppleControlBtn/index.vue
+++ b/src/components/AppleControlBtn/index.vue
@ -3,7 +3,7 @@
    <template v-for="item in filterBtnList" :key="item.key">
      <div
        class="btn"
-        :class="[item.key, disabled && 'disabled']"
+        :class="[item.key, disabled && 'disabled', mini && 'mini']"
        @click.stop="handleClick(item.key)"
      >
        <n-icon size="10" class="icon-base" :class="{ hover: !disabled }">
@ -21,6 +21,12 @@ import { screenfullFn } from '@/utils'
 const emit = defineEmits(['close', 'remove', 'resize', 'fullResize'])

 const props = defineProps({
+  // mini 版本
+  mini: {
+    request: false,
+    type: Boolean,
+    default: false
+  },
  // 禁用所有按钮
  disabled: {
    request: false,
@ -55,26 +61,26 @@ const isFull = computed(() => {
 })

 const btnList: {
-  title: string,
-  key: "close" | "remove" | "resize" | "fullResize",
+  title: string
+  key: 'close' | 'remove' | 'resize' | 'fullResize'
  icon: any
 }[] = [
-    {
-      title: '关闭',
-      key: 'close',
-      icon: CloseIcon
-    },
-    {
-      title: '缩小',
-      key: 'remove',
-      icon: RemoveIcon
-    },
-    {
-      title: isFull ? '缩小' : '放大',
-      key: props.narrow ? 'fullResize' : 'resize',
-      icon: ResizeIcon
-    }
-  ]
+  {
+    title: '关闭',
+    key: 'close',
+    icon: CloseIcon
+  },
+  {
+    title: '缩小',
+    key: 'remove',
+    icon: RemoveIcon
+  },
+  {
+    title: isFull ? '缩小' : '放大',
+    key: props.narrow ? 'fullResize' : 'resize',
+    icon: ResizeIcon
+  }
+]

 const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
  if (key === 'fullResize') screenfullFn()
@ -85,7 +91,7 @@ const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
 </script>

 <style lang="scss" scoped>
-@include go("apple-control-btn") {
+@include go('apple-control-btn') {
  display: flex;
  &:hover {
    .btn {
@ -105,6 +111,11 @@ const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
    color: $--color-text;
    font-weight: bold;
    border-radius: 50%;
+    &.mini {
+      width: 10px;
+      height: 10px;
+      margin: 0 2px;
+    }
    &.disabled {
      pointer-events: none;
    }
--- a/src/packages/components/Chart/bar/barCommon/index.ts
+++ b/src/packages/components/Chart/bar/barCommon/index.ts
@ -0,0 +1,11 @@
+import barCommon from './index.vue'
+import barImg from '@/assets/images/chart/bar_y.png'
+import { ConfigType } from '@/packages/index.d'
+
+// 柱状图
+export const barCommonConfig: ConfigType = {
+  key: 'Bar',
+  title: '基础',
+  node: barCommon,
+  image: barImg
+}
--- a/src/packages/components/Chart/bar/barCommon/index.vue
+++ b/src/packages/components/Chart/bar/barCommon/index.vue
@ -0,0 +1,13 @@
+<template>
+  <div>
+    柱状图组件渲染
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/packages/components/Chart/index.ts
+++ b/src/packages/components/Chart/index.ts
@ -0,0 +1,3 @@
+import { barCommonConfig } from './bar/barCommon/index'
+
+export const BarList = [barCommonConfig]
--- a/src/packages/components/Decorate/border/borderCommon/index.ts
+++ b/src/packages/components/Decorate/border/borderCommon/index.ts
@ -0,0 +1,11 @@
+import BorderCommon from './index.vue'
+import barImg from '@/assets/images/chart/bar_y.png'
+import { ConfigType } from '@/packages/index.d'
+
+// 柱状图
+export const barCommonConfig: ConfigType = {
+  key: 'Border',
+  title: '柱状图',
+  node: BorderCommon,
+  coverGraph: barImg
+}
--- a/src/packages/components/Decorate/border/borderCommon/index.vue
+++ b/src/packages/components/Decorate/border/borderCommon/index.vue
@ -0,0 +1,13 @@
+<template>
+  <div>
+    柱状图组件渲染
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/packages/components/Decorate/index.ts
+++ b/src/packages/components/Decorate/index.ts
@ -0,0 +1,3 @@
+import { barCommonConfig } from './border/borderCommon/index'
+
+export const BarList = [barCommonConfig]
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@ -0,0 +1,14 @@
+import { Component } from '@/router/types'
+
+// import { ConfigType } from '@/packages/index.d'
+export type ConfigType = {
+  key: string
+  title: string
+  node: Component
+  image: string
+  [T: string]: unknown
+}
+
+export type PackagesType = {
+  Charts: ConfigType[]
+}
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@ -0,0 +1,9 @@
+import { PackagesType } from '@/packages/index.d'
+import { BarList } from '@/packages/components/Chart/index'
+
+// 所有图表
+let packagesList: PackagesType = {
+  Charts: BarList
+}
+
+export { packagesList }
--- a/src/store/modules/packagesStore/packagesStore.d.ts
+++ b/src/store/modules/packagesStore/packagesStore.d.ts
@ -0,0 +1,7 @@
+import { PackagesType, ConfigType } from '@/packages/index.d'
+
+export { ConfigType }
+
+export interface PackagesStoreType {
+  packagesList: PackagesType
+}
--- a/src/store/modules/packagesStore/packagesStore.ts
+++ b/src/store/modules/packagesStore/packagesStore.ts
@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+import { PackagesStoreType, ConfigType } from './packagesStore.d'
+import { packagesList } from '@/packages/index'
+
+export const usePackagesStore = defineStore({
+  id: 'usePackagesStore',
+  state: (): PackagesStoreType => ({
+    packagesList
+  }),
+  getters: {
+    getPackagesList(): ConfigType | {} {
+      if (this.packagesList && this.packagesList.charts) {
+        return this.packagesList.charts
+      }
+      return {}
+    }
+  }
+})
--- a/src/styles/common/var.scss
+++ b/src/styles/common/var.scss
@ -21,7 +21,7 @@ $--color-light-bg-2: #f2f3f5;
 $--color-light-bg-2-shallow: lighten($--color-light-bg-2, $--light-shalow);
 $--color-light-bg-3: #e5e6eb;
 $--color-light-bg-3-shallow: lighten($--color-light-bg-3, $--light-shalow);
-$--color-light-bg-4: #c9cdd4;
+$--color-light-bg-4: #e3e3e4;
 $--color-light-bg-4-shallow: lighten($--color-light-bg-4, $--light-shalow);
 $--color-light-bg-5: #bebebe;
 $--color-light-bg-5-shallow: lighten($--color-light-bg-5, $--light-shalow);
--- a/src/views/chart/components/ContentCharts/components/ChartCommon/index.ts
+++ b/src/views/chart/components/ContentCharts/components/ChartCommon/index.ts
@ -1,3 +0,0 @@
-import ChartCommon from './index.vue'
-
-export { ChartCommon }
--- a/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
+++ b/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
@ -1,54 +0,0 @@
-<template>
-  <div class="go-chart-common">
-    <n-menu
-      class="common-menu-width"
-      v-model:value="selectValue"
-      :options="menuOptions"
-      :icon-size="16"
-      :indent="18"
-    />
-    <div>
-      右侧的小组将列表
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { renderLang } from '@/utils'
-
-const menuOptions = reactive([
-  {
-    key: 'ChartCommon',
-    label: renderLang('图表')
-  },
-  {
-    key: 'TextCommon',
-    label: renderLang('信息')
-  },
-  {
-    key: 'TableCommon',
-    label: renderLang('表格')
-  },
-  {
-    key: 'DecorateCommon',
-    label: renderLang('装饰')
-  }
-])
-
-
-
-const selectValue = ref<string>(menuOptions[0]['key'])
-</script>
-
-<style lang="scss" scoped>
-/* 列表的宽度 */
-$topHeight: 36px;
-@include go('chart-common') {
-  display: flex;
-  height: calc(100vh - #{$--header-height} - #{$topHeight});
-  .common-menu-width {
-    @include filter-bg-color('background-color2-shallow');
-  }
-}
-</style>
--- a/src/views/chart/components/ContentCharts/components/Charts/index.ts
+++ b/src/views/chart/components/ContentCharts/components/Charts/index.ts
@ -0,0 +1,3 @@
+import Charts from './index.vue'
+
+export { Charts }
--- a/src/views/chart/components/ContentCharts/components/Charts/index.vue
+++ b/src/views/chart/components/ContentCharts/components/Charts/index.vue
@ -0,0 +1,108 @@
+<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: 0 15px;
+        @include filter-bg-color('background-color4');
+        &-text {
+          font-size: 12px;
+          margin-left: 8px;
+        }
+      }
+      .list-center {
+        padding: 10px 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>
--- a/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts
+++ b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts
@ -1,3 +0,0 @@
-import DecorateCommon from './index.vue'
-
-export { DecorateCommon }
--- a/src/views/chart/components/ContentCharts/components/Decorates/index.ts
+++ b/src/views/chart/components/ContentCharts/components/Decorates/index.ts
@ -0,0 +1,3 @@
+import Decorates from './index.vue'
+
+export { Decorates }
--- a/src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue
+++ b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue
--- a/src/views/chart/components/ContentCharts/components/TableCommon/index.ts
+++ b/src/views/chart/components/ContentCharts/components/TableCommon/index.ts
@ -1,3 +0,0 @@
-import TableCommon from './index.vue'
-
-export { TableCommon }
--- a/src/views/chart/components/ContentCharts/components/Tables/index.ts
+++ b/src/views/chart/components/ContentCharts/components/Tables/index.ts
@ -0,0 +1,3 @@
+import Tables from './index.vue'
+
+export { Tables }
--- a/src/views/chart/components/ContentCharts/components/TableCommon/index.vue
+++ b/src/views/chart/components/ContentCharts/components/TableCommon/index.vue
--- a/src/views/chart/components/ContentCharts/components/TextCommon/index.ts
+++ b/src/views/chart/components/ContentCharts/components/TextCommon/index.ts
@ -1,3 +0,0 @@
-import TextCommon from './index.vue'
-
-export { TextCommon }
--- a/src/views/chart/components/ContentCharts/components/Texts/index.ts
+++ b/src/views/chart/components/ContentCharts/components/Texts/index.ts
@ -0,0 +1,3 @@
+import Texts from './index.vue'
+
+export { Texts }
--- a/src/views/chart/components/ContentCharts/components/TextCommon/index.vue
+++ b/src/views/chart/components/ContentCharts/components/TextCommon/index.vue
--- a/src/views/chart/components/ContentCharts/hooks/asideHook.ts
+++ b/src/views/chart/components/ContentCharts/hooks/asideHook.ts
@ -0,0 +1,97 @@
+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 { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+// 图标
+const { BarChartIcon } = icon.ionicons5
+const {
+  TableSplitIcon,
+  RoadmapIcon,
+  SpellCheckIcon,
+  GraphicalDataFlowIcon
+} = icon.carbon
+
+// 图表
+const { packagesList } = usePackagesStore()
+const menuOptions: any[] = reactive([])
+
+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
+    }
+  ],
+])
+
+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]
+  })
+})
+
+// 记录选中值
+let beforeSelect: string = menuOptions[0]['key']
+const selectValue = ref<string>(menuOptions[0]['key'])
+// 选中的对象值
+const selecOptions = ref(menuOptions[0])
+
+// 点击 item
+const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
+  // 处理渲染的 node
+  selecOptions.value = item
+  // 处理折叠
+  if (beforeSelect === key) {
+    setItem('charts', !getCharts.value)
+  } else {
+    setItem('charts', true)
+  }
+  beforeSelect = key
+}
+
+export {
+  getCharts,
+  BarChartIcon,
+  themeColor,
+  selecOptions,
+  selectValue,
+  clickItemHandle,
+  menuOptions
+}
--- a/src/views/chart/components/ContentCharts/hooks/layoutHook.ts
+++ b/src/views/chart/components/ContentCharts/hooks/layoutHook.ts
@ -0,0 +1,20 @@
+import { ref, toRefs } from 'vue'
+
+// 布局
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+// 样式
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+// 全局颜色
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
+// 结构控制
+const { setItem } = useChartLayoutStore()
+const { getCharts } = toRefs(useChartLayoutStore())
+
+export {
+  themeColor,
+  setItem,
+  getCharts
+}
--- a/src/views/chart/components/ContentCharts/index.vue
+++ b/src/views/chart/components/ContentCharts/index.vue
@ -25,7 +25,7 @@
        <div class="menu-component-box">
          <transition name="component-fade" mode="out-in">
            <keep-alive>
-              <component :is="selectNode"></component>
+              <component :is="selecOptions.node" :packagesList="selecOptions.packagesList" :key="selectValue"></component>
            </keep-alive>
          </transition>
        </div>
@ -36,86 +36,21 @@

 <script setup lang="ts">
 import { reactive, ref, toRefs } from 'vue'
-import { icon } from '@/plugins'
-import { renderLang, renderIcon } from '@/utils'
 import { ContentBox } from '../ContentBox/index'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { useDesignStore } from '@/store/modules/designStore/designStore'
-
-import { ChartCommon } from './components/ChartCommon'
-import { TableCommon } from './components/TableCommon'
-import { TextCommon } from './components/TextCommon'
-import { DecorateCommon } from './components/DecorateCommon'
-
-// 图标
-const { BarChartIcon } = icon.ionicons5
-const {
-  TableSplitIcon,
-  RoadmapIcon,
-  SpellCheckIcon,
-  GraphicalDataFlowIcon
-} = icon.carbon
-
-// 全局颜色
-const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
-
-// 结构控制
-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
-  },
-  {
-    key: 'DecorateCommon',
-    icon: renderIcon(GraphicalDataFlowIcon),
-    label: renderLang('装饰'),
-    node: DecorateCommon
-  }
-])
-
-// 记录选中值
-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
-}
+import {
+  getCharts,
+  BarChartIcon,
+  themeColor,
+  selecOptions,
+  selectValue,
+  clickItemHandle,
+  menuOptions
+} from './hooks/asideHook'
 </script>

 <style lang="scss" scoped>
 /* 整体宽度 */
-$width: 300px;
+$width: 330px;
 /* 列表的宽度 */
 $widthScoped: 65px;
 /* 此高度与 ContentBox 组件关联*/
@ -162,7 +97,7 @@ $topHeight: 36px;
          display: flex;
          flex-direction: column;
          padding: 6px 12px !important;
-          font-size: 12px !important;
+          font-size: 14px !important;
        }
        .n-menu-item-content__icon {
          font-size: 18px !important;
--- a/types/config.d.ts
+++ b/types/config.d.ts
--- a/types/global.d.ts
+++ b/types/global.d.ts
@ -4,4 +4,5 @@ interface Window {
  $dialog: any
  $t: any
 }
-declare type Recordable<T = any> = Record<string, T>
+
+declare type Recordable<T = any> = Record<string, T>