From ea32cb18104c6c9e368d02e6658d1b163ec5f0d9 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 13 Jan 2022 16:20:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  8 +++
 .../components/TransitionMain/index.vue       |  2 +-
 src/main.ts                                   |  3 +
 src/plugins/customComponents.ts               |  2 +-
 src/styles/common/animation.scss              | 13 ++++
 .../chart/components/ContentBox/index.vue     |  6 +-
 .../components/ChartCommon/index.vue          | 53 ++++++++++++--
 .../chart/components/ContentCharts/index.vue  | 72 ++++++++++---------
 src/views/chart/index.vue                     |  3 +-
 10 files changed, 120 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index 055edbbd..85ccad51 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@vicons/carbon": "^0.11.0",
+    "animate.css": "^4.1.1",
     "axios": "^0.23.0",
     "crypto-ts": "^1.0.2",
     "mockjs": "^1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd4d102a..669d9e21 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,7 @@ specifiers:
   '@vitejs/plugin-vue-jsx': ^1.2.0
   '@vue/compiler-sfc': ^3.2.20
   '@vueuse/core': ^7.3.0
+  animate.css: ^4.1.1
   axios: ^0.23.0
   crypto-ts: ^1.0.2
   default-passive-events: ^2.0.0
@@ -38,6 +39,7 @@ specifiers:
 
 dependencies:
   '@vicons/carbon': r2.cnpmjs.org/@vicons/carbon/0.11.0
+  animate.css: r2.cnpmjs.org/animate.css/4.1.1
   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
@@ -142,6 +144,12 @@ packages:
     version: 0.11.0
     dev: false
 
+  r2.cnpmjs.org/animate.css/4.1.1:
+    resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/animate.css/-/animate.css-4.1.1.tgz}
+    name: animate.css
+    version: 4.1.1
+    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
diff --git a/src/layout/components/TransitionMain/index.vue b/src/layout/components/TransitionMain/index.vue
index 73ec2715..e16e023e 100644
--- a/src/layout/components/TransitionMain/index.vue
+++ b/src/layout/components/TransitionMain/index.vue
@@ -1,7 +1,7 @@
 <template>
   <router-view #default="{ Component, route }">
     <!-- todo 动画暂时不生效，待处理 -->
-    <transition name="v-modal" mode="out-in" appear>
+    <transition name="fade" mode="out-in" appear>
       <component
         v-if="route.noKeepAlive"
         :is="Component"
diff --git a/src/main.ts b/src/main.ts
index 2a07c89a..d1ad1f6f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,9 @@ import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
 import { AppProvider } from '@/components/AppProvider/index'
 import { setHtmlTheme } from '@/utils'
 
+// 引入动画
+import 'animate.css/animate.min.css'
+
 async function appInit() {
   const appProvider = createApp(AppProvider)
 
diff --git a/src/plugins/customComponents.ts b/src/plugins/customComponents.ts
index 9d3be473..29bd7710 100644
--- a/src/plugins/customComponents.ts
+++ b/src/plugins/customComponents.ts
@@ -2,7 +2,7 @@ import type { App } from 'vue'
 import { Skeleton } from '@/components/Skeleton'
 
 /**
- * 全局注册自定义组件 待完善
+ * 全局注册自定义组件
  * @param app
  */
 export function setupCustomComponents(app: App) {
diff --git a/src/styles/common/animation.scss b/src/styles/common/animation.scss
index 09bdf463..5720d743 100644
--- a/src/styles/common/animation.scss
+++ b/src/styles/common/animation.scss
@@ -30,17 +30,30 @@
     opacity: 0;
   }
   100% {
+    opacity: 1;
   }
 }
 
 @keyframes v-modal-out {
   0% {
+    opacity: 1;
   }
   100% {
     opacity: 0;
   }
 }
 
+// 渐变
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .2s ease;
+}
+
 // 移动动画
 .list-complete-item {
   transition: all 1s;
diff --git a/src/views/chart/components/ContentBox/index.vue b/src/views/chart/components/ContentBox/index.vue
index 849a3f6b..063ae2b4 100644
--- a/src/views/chart/components/ContentBox/index.vue
+++ b/src/views/chart/components/ContentBox/index.vue
@@ -22,10 +22,8 @@
       </n-space>
     </div>
     <aside class="content">
-      <n-scrollbar x-scrollable>
-        <n-scrollbar>
-          <slot></slot>
-        </n-scrollbar>
+      <n-scrollbar>
+        <slot></slot>
       </n-scrollbar>
     </aside>
     <div v-if="showBottom" class="bottom go-mt-0">
diff --git a/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue b/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
index 36ee7eba..4919edeb 100644
--- a/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
+++ b/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
@@ -1,9 +1,54 @@
 <template>
-  <div>
-    我是图表咯
+  <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"></script>
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { renderLang } from '@/utils'
 
-<style lang="scss" scoped></style>
+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');
+  }
+}
+</style>
diff --git a/src/views/chart/components/ContentCharts/index.vue b/src/views/chart/components/ContentCharts/index.vue
index 1df9fbe5..b41f18c5 100644
--- a/src/views/chart/components/ContentCharts/index.vue
+++ b/src/views/chart/components/ContentCharts/index.vue
@@ -23,9 +23,11 @@
           @update:value="clickItemHandle"
         />
         <div class="menu-component-box">
-          <keep-alive>
-            <component :is="selectNode"></component>
-          </keep-alive>
+          <transition name="component-fade" mode="out-in">
+            <keep-alive>
+              <component :is="selectNode"></component>
+            </keep-alive>
+          </transition>
         </div>
       </div>
     </aside>
@@ -33,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, toRefs, computed } from 'vue'
+import { reactive, ref, toRefs } from 'vue'
 import { icon } from '@/plugins'
 import { renderLang, renderIcon } from '@/utils'
 import { ContentBox } from '../ContentBox/index'
@@ -47,7 +49,12 @@ import { DecorateCommon } from './components/DecorateCommon'
 
 // 图标
 const { BarChartIcon } = icon.ionicons5
-const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
+const {
+  TableSplitIcon,
+  RoadmapIcon,
+  SpellCheckIcon,
+  GraphicalDataFlowIcon
+} = icon.carbon
 
 // 全局颜色
 const designStore = useDesignStore()
@@ -104,7 +111,6 @@ const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
   }
   beforeSelect = key
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -126,40 +132,42 @@ $topHeight: 36px;
     display: flex;
     height: calc(100vh - #{$--header-height} - #{$topHeight});
     .menu-width {
-      @include filter-bg-color('background-color2');
+      flex-shrink: 0;
+      @include filter-bg-color('background-color3');
     }
     .menu-component-box {
+      flex-shrink: 0;
       width: $width - $widthScoped;
       overflow: hidden;
     }
   }
   @include deep() {
-    .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;
+    .menu-width {
+      .n-menu-item {
+        height: auto !important;
+        &.n-menu-item--selected {
+          &::after {
+            content: '';
+            position: absolute;
+            left: 2px;
+            top: 0;
+            height: 100%;
+            width: 3px;
+            background-color: v-bind('themeColor');
+            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;
         }
-      }
-      .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 50804754..ef22c6fd 100644
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@@ -37,7 +37,8 @@ import { ContentDetails } from './components/ContentDetails/index'
 <style lang="scss" scoped>
 $height: 100vh;
 @include go('bg-point') {
-  
+  @include background-image('background-point');
+  @extend .go-point-bg;
 }
 @include go('chart') {
   height: $height;