3 years ago · b03a495712
--- 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>