feat: layout theme (#11)

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" />

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"/>

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>

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"/>

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>

src/components/card/index.vue

@@ -82,7 +82,7 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="less" scoped>
+<style lang="less">
 @import '@/style/variables';
 
 .card {

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%;

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;
+        menuRouters.forEach((menu) => {
-        for (index = 0; index < menuRouters.length; index++) {
+          if (this.$route.path.indexOf(menu.path) === 0) {
-          const item = menuRouters[index];
+            menuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
-          if (item.children && item.children.length > 0) {
-            return item.children.map((menuRouter) => ({ ...menuRouter, path: `${item.path}/${menuRouter.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 />

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;
+  background: @brand-color;
-  color: @text-color-primary !important;
+  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>

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;
-};
-