From 3a87f0dd30bda825c1ca9f2f00b8a131f26de55a Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 12 Jan 2022 10:41:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E7=9A=84=E6=B8=B2=E6=9F=93=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/themeHook.ts                        |  4 +-
 src/plugins/icon.ts                           | 11 ++--
 .../components/DecorateCommon/index.ts        |  3 +
 .../components/DecorateCommon/index.vue       |  9 +++
 .../chart/components/ContentCharts/index.vue  | 62 +++++++++++++++----
 src/views/chart/index.vue                     |  4 ++
 6 files changed, 76 insertions(+), 17 deletions(-)
 create mode 100644 src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts
 create mode 100644 src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue

diff --git a/src/hooks/themeHook.ts b/src/hooks/themeHook.ts
index 408a1ca1..7ecb2f4c 100644
--- a/src/hooks/themeHook.ts
+++ b/src/hooks/themeHook.ts
@@ -22,11 +22,11 @@ export const getThemeOverridesHook = () => {
       }
       const dartObject = {
         common: {
-          primaryColor: designStore.appTheme,
+          primaryColor: designStore.getAppTheme,
           ...commonObj.common
         },
         LoadingBar: {
-          colorLoading: designStore.appTheme
+          colorLoading: designStore.getAppTheme
         }
       }
       return designStore.getDarkTheme ? dartObject : lightObject
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index c7e5d6e9..a5c58c12 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -44,7 +44,8 @@ import {
 import {
   TableSplit as TableSplitIcon,
   Roadmap as RoadmapIcon,
-  SpellCheck as SpellCheckIcon
+  SpellCheck as SpellCheckIcon,
+  GraphicalDataFlow as GraphicalDataFlowIcon
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -131,12 +132,14 @@ const ionicons5 = {
 }
 
 const carbon = {
-  // 信息
-  SpellCheckIcon,
   // 图表
   RoadmapIcon,
+  // 信息
+  SpellCheckIcon,
   // 表格
-  TableSplitIcon
+  TableSplitIcon,
+  // 装饰
+  GraphicalDataFlowIcon
 }
 
 // https://www.xicons.org/#/ 还有很多
diff --git a/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts
new file mode 100644
index 00000000..8be65690
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts
@@ -0,0 +1,3 @@
+import DecorateCommon from './index.vue'
+
+export { DecorateCommon }
diff --git a/src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue
new file mode 100644
index 00000000..eb932013
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    我是装饰咯
+  </div>
+</template>
+
+<script setup lang="Ts"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/chart/components/ContentCharts/index.vue b/src/views/chart/components/ContentCharts/index.vue
index 993cc044..1df9fbe5 100644
--- a/src/views/chart/components/ContentCharts/index.vue
+++ b/src/views/chart/components/ContentCharts/index.vue
@@ -2,13 +2,13 @@
   <ContentBox
     class="go-content-charts"
     :class="{ scoped: !getCharts }"
-    title="全部组件"
+    title="组件"
     :depth="1"
     :backIcon="false"
   >
     <template #icon>
       <n-icon size="14" :depth="2">
-        <!-- <BarChartIcon /> -->
+        <BarChartIcon />
       </n-icon>
     </template>
     <!-- 图表 -->
@@ -38,19 +38,27 @@ 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 } = icon.carbon
+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',
@@ -69,13 +77,19 @@ const menuOptions = reactive([
     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
@@ -90,13 +104,17 @@ const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
   }
   beforeSelect = key
 }
+
 </script>
 
 <style lang="scss" scoped>
+/* 整体宽度 */
 $width: 300px;
-$widthScoped: 80px;
+/* 列表的宽度 */
+$widthScoped: 65px;
 /* 此高度与 ContentBox 组件关联*/
 $topHeight: 36px;
+
 @include go(content-charts) {
   width: $width;
   @extend .go-transition;
@@ -116,11 +134,33 @@ $topHeight: 36px;
     }
   }
   @include deep() {
-    .n-menu-item-content {
-      padding: 0 12px !important;
-    }
-    .n-menu-item-content__icon {
-      margin-right: 0 !important;
+    .n-menu-item {
+      /* position: relative; */
+      height: auto !important;
+      &.n-menu-item--selected {
+        &::after {
+          content: '';
+          position: absolute;
+          left: 2px;
+          top: 0;
+          height: 100%;
+          width: 3px;
+          background-color: v-bind('themeColor');
+          /* background-color: rgb(62, 202, 172); */
+          border-top-right-radius: 3px;
+          border-bottom-right-radius: 3px;
+        }
+      }
+      .n-menu-item-content {
+        display: flex;
+        flex-direction: column;
+        padding: 6px 12px !important;
+        font-size: 12px !important;
+      }
+      .n-menu-item-content__icon {
+        font-size: 18px !important;
+        margin-right: 0 !important;
+      }
     }
   }
 }
diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue
index 9d3a2808..50804754 100644
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <div class="go-bg-point"></div>
   <div class="go-chart">
     <n-layout>
       <HeaderPro>
@@ -35,6 +36,9 @@ import { ContentDetails } from './components/ContentDetails/index'
 
 <style lang="scss" scoped>
 $height: 100vh;
+@include go('bg-point') {
+  
+}
 @include go('chart') {
   height: $height;
   overflow: hidden;