From 3d686917dfdd7ae0a9e40dbaa094e4d35124802d Mon Sep 17 00:00:00 2001
From: PY <pengyue970715@gmail.com>
Date: Mon, 20 Dec 2021 12:32:33 +0800
Subject: [PATCH] feat: layout theme (#11)

---
 src/assets/assets-slide-dashboard.svg |  2 +-
 src/assets/assets-slide-detail.svg    |  2 +-
 src/assets/assets-slide-form.svg      |  2 +-
 src/assets/assets-slide-list.svg      |  2 +-
 src/assets/assets-slide-logout.svg    |  2 +-
 src/components/card/index.vue         |  2 +-
 src/layouts/components/Header.vue     |  1 +
 src/layouts/index.tsx                 | 34 +++++++------------------
 src/pages/dashboard/base/index.vue    | 15 ++++++-----
 src/style/layout.less                 | 36 ++++++++++++++-------------
 10 files changed, 44 insertions(+), 54 deletions(-)

diff --git a/src/assets/assets-slide-dashboard.svg b/src/assets/assets-slide-dashboard.svg
index aa3ea3e..4357f06 100644
--- a/src/assets/assets-slide-dashboard.svg
+++ b/src/assets/assets-slide-dashboard.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd"
     d="M2.5 3.75C2.5 3.05965 3.05962 2.5 3.75 2.5H8.125C8.81538 2.5 9.375 3.05965 9.375 3.75V10C9.375 10.6903 8.81538 11.25 8.125 11.25H3.75C3.05962 11.25 2.5 10.6903 2.5 10V3.75ZM3.75 3.75H8.125V10H3.75V3.75Z"
     fill="currentcolor" />
diff --git a/src/assets/assets-slide-detail.svg b/src/assets/assets-slide-detail.svg
index 2b317f3..f60ef9a 100644
--- a/src/assets/assets-slide-detail.svg
+++ b/src/assets/assets-slide-detail.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.5 5.625H5V6.875H12.5V5.625Z" fill="currentcolor"/>
 <path d="M5 8.75H12.5V10H5V8.75Z" fill="currentcolor"/>
 <path d="M10 11.875H5V13.125H10V11.875Z" fill="currentcolor"/>
diff --git a/src/assets/assets-slide-form.svg b/src/assets/assets-slide-form.svg
index d4a8df2..3292737 100644
--- a/src/assets/assets-slide-form.svg
+++ b/src/assets/assets-slide-form.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M14.1485 2.60504L7.96107 8.79252C7.88191 8.87167 7.82547 8.97063 7.79764 9.07905L6.98445 12.2468C6.92951 12.4608 6.99164 12.6879 7.14788 12.8442C7.30411 13.0004 7.53121 13.0625 7.74522 13.0076L10.913 12.1944C11.0214 12.1666 11.1204 12.1101 11.1995 12.031L17.387 5.8435C18.2813 4.94923 18.2813 3.49931 17.387 2.60504C16.4927 1.71076 15.0428 1.71076 14.1485 2.60504ZM8.45793 11.5341L8.96586 9.55549L15.0324 3.48892C15.4386 3.08279 16.097 3.0828 16.5031 3.48892C16.9093 3.89504 16.9093 4.5535 16.5031 4.95962L10.4366 11.0262L8.45793 11.5341Z" fill="currentcolor"/>
 <path d="M3.75 4.37493H10V3.12493H3.75C3.05964 3.12493 2.5 3.68457 2.5 4.37493V15.6249C2.5 16.3153 3.05964 16.8749 3.75 16.8749H16.25C16.9404 16.8749 17.5 16.3153 17.5 15.6249V9.37493H16.25V15.6249H3.75V4.37493Z" fill="currentcolor"/>
 </svg>
diff --git a/src/assets/assets-slide-list.svg b/src/assets/assets-slide-list.svg
index be8a295..b44d8e5 100644
--- a/src/assets/assets-slide-list.svg
+++ b/src/assets/assets-slide-list.svg
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5 5.3125H10V6.5625H5V5.3125Z" fill="currentcolor"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 3.75C2.5 3.05965 3.05962 2.5 3.75 2.5H16.25C16.9404 2.5 17.5 3.05965 17.5 3.75V8.125C17.5 8.81535 16.9404 9.375 16.25 9.375H3.75C3.05962 9.375 2.5 8.81535 2.5 8.125V3.75ZM3.75 3.75H16.25V8.125H3.75V3.75Z" fill="currentcolor"/>
 <path d="M10 13.4375H5V14.6875H10V13.4375Z" fill="currentcolor"/>
diff --git a/src/assets/assets-slide-logout.svg b/src/assets/assets-slide-logout.svg
index 5c5267d..8ee1558 100644
--- a/src/assets/assets-slide-logout.svg
+++ b/src/assets/assets-slide-logout.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM18.75 10C18.75 14.8325 14.8325 18.75 10 18.75C5.16751 18.75 1.25 14.8325 1.25 10C1.25 5.16751 5.16751 1.25 10 1.25C14.8325 1.25 18.75 5.16751 18.75 10ZM12.5489 9.37547L10.0934 6.91989L10.9772 6.03601L14.4998 9.55853C14.7438 9.80261 14.7438 10.1983 14.4998 10.4424L10.9804 13.9618L10.0965 13.0779L12.5489 10.6255L5.45213 10.6255L5.45214 9.37545L12.5489 9.37547Z" fill="currentcolor"/>
 </svg>
diff --git a/src/components/card/index.vue b/src/components/card/index.vue
index 52927d7..4f1ee25 100644
--- a/src/components/card/index.vue
+++ b/src/components/card/index.vue
@@ -82,7 +82,7 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="less" scoped>
+<style lang="less">
 @import '@/style/variables';
 
 .card {
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index aa76edc..1c1de18 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -272,6 +272,7 @@ export default defineComponent({
   width: 166px;
   display: flex;
   margin-left: 24px;
+  color: @text-color-primary;
 
   .t-logo {
     width: 100%;
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index bf7619c..75c2e34 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -8,7 +8,7 @@ import TdesignContent from './components/Content.vue';
 
 import { PREFIX } from '@/config/global';
 import TdesignSetting from './setting.vue';
-import { ModeType, SettingType, ClassName } from '@/interface';
+import { SettingType, ClassName } from '@/interface';
 import '@/style/layout.less';
 
 const name = `${PREFIX}-base-layout`;
@@ -59,34 +59,19 @@ export default defineComponent({
     },
     sideMenu() {
       const { layout, splitMenu } = this.$store.state.setting;
-      const { menuRouters } = this;
+      let { menuRouters } = this;
       if (layout === 'mix' && splitMenu) {
-        let index;
-        for (index = 0; index < menuRouters.length; index++) {
-          const item = menuRouters[index];
-          if (item.children && item.children.length > 0) {
-            return item.children.map((menuRouter) => ({ ...menuRouter, path: `${item.path}/${menuRouter.path}` }));
+        menuRouters.forEach((menu) => {
+          if (this.$route.path.indexOf(menu.path) === 0) {
+            menuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
           }
-        }
+        });
       }
       return menuRouters;
     },
   },
   methods: {
-    getNavTheme(mode: ModeType, layout: string, type: string): string {
-      if (mode === 'dark') {
-        return 'dark';
-      }
-      if (type.includes(layout)) {
-        return 'dark';
-      }
-      return this.mode;
-    },
     renderSidebar() {
-      // const theme =
-      //   this.setting.mode === 'dark' ? 'dark' : this.setting.layout === 'mix' ? 'light' : this.setting.theme;
-      // menu 组件最多支持 3级菜单
-      const theme = this.getNavTheme(this.setting.mode, this.setting.layout, ['side']);
       return (
         this.showSidebar && (
           <tdesign-side-nav
@@ -94,19 +79,18 @@ export default defineComponent({
             layout={this.setting.layout}
             isFixed={this.setting.isSidebarFixed}
             menu={this.sideMenu}
-            theme={theme}
+            theme={this.mode}
             isCompact={this.setting.isSidebarCompact}
           />
         )
       );
     },
     renderHeader() {
-      const theme = this.getNavTheme(this.setting.mode, this.setting.layout, ['mix', 'top']);
       return (
         this.showHeader && (
           <tdesign-header
             showLogo={this.showHeaderLogo}
-            theme={theme}
+            theme={this.mode}
             layout={this.setting.layout}
             isFixed={this.setting.isHeaderFixed}
             menu={this.headerMenu}
@@ -119,7 +103,7 @@ export default defineComponent({
       const { showBreadcrumb } = this.setting;
       const { showFooter } = this;
       return (
-        <t-layout class={[`${PREFIX}-layout`, 'narrow-scrollbar']}>
+        <t-layout class={[`${PREFIX}-layout`]}>
           <t-content class={`${PREFIX}-content-layout`}>
             {showBreadcrumb && <tdesign-breadcrumb />}
             <TdesignContent />
diff --git a/src/pages/dashboard/base/index.vue b/src/pages/dashboard/base/index.vue
index e69f3d8..0a1631d 100644
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@@ -365,24 +365,27 @@ export default defineComponent({
 @import '@/style/variables.less';
 
 .card-container.main-color {
-  background: @brand-color !important;
-  color: @text-color-primary !important;
+  background: @brand-color;
+  color: @text-color-primary;
 
+  .card-subtitle {
+    color: @text-color-anti;
+  }
   .card-describe {
-    color: @text-color-anti !important;
+    color: @text-color-anti;
   }
 
   .dashboard-item-top span {
-    color: @text-color-anti !important;
+    color: @text-color-anti;
   }
 
   .dashboard-item-block {
-    color: @text-color-anti !important;
+    color: @text-color-anti;
     opacity: 0.6;
   }
 
   .dashboard-item-bottom {
-    color: @text-color-anti !important;
+    color: @text-color-anti;
   }
 }
 </style>
diff --git a/src/style/layout.less b/src/style/layout.less
index fe5e8d4..d396bff 100644
--- a/src/style/layout.less
+++ b/src/style/layout.less
@@ -20,6 +20,23 @@
   }
 }
 
+.t-menu--dark .t-menu__operations .t-icon {
+  color: rgba(255, 255, 255, .55);
+  &:hover {
+    cursor: pointer;
+  }
+}
+.t-default-menu.t-menu--dark {
+  background: var(--td-gray-color-13);
+}
+.t-default-menu:not(.t-menu--dark) .t-menu__item.t-is-active:not(.t-is-opened) {
+  background-color: @brand-color-1;
+  color: @brand-color;
+  .t-icon {
+    color: @brand-color;
+  }
+}
+
 .@{prefix} {
 
   // 布局元素调整
@@ -112,7 +129,7 @@
       padding: 0 24px;
       height: 32px;
       width: 100%;
-      color: @text-color-anti;
+      color: @text-color-primary;
     }
 
     &-logo-normal {
@@ -135,15 +152,6 @@
   }
 }
 
-.t-menu--dark .t-menu__operations .t-icon {
-  color: rgba(255, 255, 255, .55);
-  &:hover {
-    cursor: pointer;
-  }
-}
-.t-default-menu.t-menu--dark {
-  background: var(--td-gray-color-13);
-}
 
 .logo-container {
   cursor: pointer;
@@ -152,14 +160,8 @@
   margin-left: 24px;
 }
 
-
 .version-container {
-  color: @text-color-anti;
+  color: @text-color-primary;
   opacity: 0.4;
 }
-.t-default-menu__inner .t-menu-group-title {
-  color: @text-color-anti;
-  opacity: 0.3;
-};
-