perf: 优化顶部菜单暗黑模式显示

src/design/antd/menu.less

@@ -1,5 +1,6 @@
 .ant-menu {
   &.ant-menu-horizontal {
+    line-height: 46px !important;
     border-bottom: 0 !important;
   }
 

src/design/dark-mode.less

@@ -32,6 +32,14 @@
     border-color: @dark-mode-color;
   }
 
+  .ant-layout-sider {
+    border-right: @dark-mode-border;
+
+    .ant-menu-inline {
+      border-right: none;
+    }
+  }
+
   .layout-hybrid-sider {
     border-right: @dark-mode-border;
     background: @dark-mode-bg;
@@ -45,6 +53,11 @@
 
   .layout-tags {
     border-top: @dark-mode-border;
+    border-bottom: @dark-mode-border;
+
+    &.single-tags {
+      border-top: none;
+    }
   }
 }
 

src/design/public.less

@@ -1,8 +1,3 @@
-.content-wrapper {
-  height: calc(100vh - 80px);
-  overflow-y: auto;
-}
-
 span.icon-btn {
   display: flex;
   align-items: center;
@@ -31,9 +26,11 @@ span.icon-btn {
   border-color: rgba(0, 0, 0, .2);
 }
 
-.layout-hybrid-header.dark {
-  .layout-tags {
-    border-top: 1px solid rgba(255, 255, 255, 0.65);
+.ant-layout-sider-light {
+  border-right: solid 1px @border-color;
+
+  .ant-menu-inline {
+    border-right: none!important;
   }
 }
 

src/layout/header/HybridHeader/index.less

@@ -1,16 +1,22 @@
 .layout-hybrid-header {
   display: flex;
   flex-direction: column;
-  height: 80px!important;
-  line-height: 80px!important;
   color: #fff;
 
   &.light {
     background: @white;
+
+    &.has-border {
+      border-bottom: solid 1px @border-color;
+    }
   }
 
   &.dark {
     background: @primary-dark-bg;
+
+    &.has-border {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.65);
+    }
   }
 
   &-wrap {

src/layout/header/HybridHeader/index.tsx

@@ -1,8 +1,8 @@
 import { defineComponent, computed, unref } from 'vue'
 import { LayoutHeader } from 'ant-design-vue'
-import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
 import { useDarkModeSetting } from '@/hooks/setting/useDarkModeSetting'
+import { useLayout } from '@/layout/useLayout'
 import { ThemeEnum } from '@/enums/appEnum'
 import { AppLogo } from '@/components/Application'
 import LayoutMenu from '../../menu'
@@ -13,9 +13,9 @@ import './index.less'
 export default defineComponent({
   name: 'LayoutHybridHeader',
   setup() {
-    const { getShowTags } = useHeaderSetting()
-    const { getMenuTheme } = useMenuSetting()
+    const { getMenuTheme, getMenuSplit } = useMenuSetting()
     const { isDarkMode } = useDarkModeSetting()
+    const { getShowTags, getHeaderHeight } = useLayout()
 
     const getHeaderMode = computed(() => {
       return unref(isDarkMode) ? '' : unref(getMenuTheme)
@@ -26,7 +26,10 @@ export default defineComponent({
     })
 
     return () => (
-      <LayoutHeader class={['layout-hybrid-header', unref(getHeaderMode)]}>
+      <LayoutHeader
+        class={['layout-hybrid-header', unref(getHeaderMode), { 'has-border': unref(getMenuSplit) }]}
+        style={{ height: unref(getHeaderHeight) }}
+      >
         <div class='layout-hybrid-header-wrap'>
           <div class='logo-box'>
             <AppLogo theme='light' />
@@ -40,7 +43,7 @@ export default defineComponent({
             </div>
           </div>
         </div>
-        {unref(getShowTags) && <LayoutTags />}
+        {unref(getShowTags) && !unref(getMenuSplit) && <LayoutTags />}
       </LayoutHeader>
     )
   }

src/layout/index.tsx

@@ -1,15 +1,18 @@
 import { defineComponent, computed, unref } from 'vue'
 import { Layout } from 'ant-design-vue'
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
+import { useLayout } from './useLayout'
 import LayoutSetting from './setting'
 import LayoutSider from './sider'
 import LayoutHeader from './header'
+import LayoutTags from './tags'
 import LayoutPage from './content'
 
 export default defineComponent({
   name: 'BasicLayout',
   setup() {
-    const { getIsHeaderMenu, getIsHybridMenu } = useMenuSetting()
+    const { getIsHeaderMenu, getIsHybridMenu, getMenuSplit } = useMenuSetting()
+    const { getContentHeight } = useLayout()
 
     const getLayoutClass = computed(() => {
       const cls: string[] = []
@@ -26,7 +29,8 @@ export default defineComponent({
           <LayoutSider />
           <Layout>
             {!unref(getIsHeaderMenu) && <LayoutHeader />}
-            <Layout.Content class='content-wrapper'>
+            {unref(getIsHeaderMenu) && unref(getMenuSplit) && <LayoutTags isHeaderTags={false} />}
+            <Layout.Content style={{ height: unref(getContentHeight), overflowY: 'auto' }}>
               <LayoutPage />
             </Layout.Content>
           </Layout>

src/layout/setting/handler.ts

@@ -16,7 +16,8 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<AppConfig>
         menuSetting: {
           menuType,
           menuMode,
-          menuFold: false
+          menuFold: false,
+          menuSplit: false
         }
       }
 

src/layout/sider/HybridSider/index.less

@@ -46,15 +46,14 @@
       }
 
       &--active {
-        font-weight: 600;
         color: @white;
         background: @primary-dark-bg;
 
         &::before {
           position: absolute;
           top: 0;
           left: 0;
-          width: 3px;
+          width: 2px;
           height: 100%;
           background: @primary-color;
           content: '';
@@ -95,6 +94,7 @@
       box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
 
       &__title {
+        border-bottom: 1px solid @border-color;
 
         .pushpin {
           color: @primary-dark-bg;
@@ -104,6 +104,24 @@
           }
         }
       }
+
+      &__content {
+        border-left: 1px solid @border-color;
+      }
+    }
+  }
+
+  &.dark {
+
+    .sub-menu {
+
+      &__title {
+        border-bottom: 1px solid #0c2135;
+      }
+
+      &__content {
+        border-left: 1px solid #0c2135;
+      }
     }
   }
 
@@ -146,7 +164,6 @@
       height: 48px;
       font-size: 18px;
       color: @primary-color;
-      border-bottom: 1px solid #0c2135;
       opacity: 0%;
       transition: unset;
       align-items: center;
@@ -176,7 +193,6 @@
 
     &__content {
       height: calc(100% - 48px) !important;
-      border-left: 1px solid #0c2135;
 
       .scrollbar__wrap {
         height: 100%;

src/layout/tags/index.less

@@ -6,9 +6,28 @@
   padding: 3px 12px;
   line-height: 32px;
   border-top: solid 1px @border-color;
+  border-bottom: solid 1px @border-color;
   transition: all 0.3s ease;
   box-sizing: border-box;
 
+  &.light {
+    border-top: solid 1px @border-color;
+    background: @white;
+  }
+
+  &.dark {
+    border-top: 1px solid rgba(255, 255, 255, 0.65);
+    background: @primary-dark-bg;
+
+    &.single-tags {
+      border-left: 1px solid rgba(255, 255, 255, 0.65);
+    }
+  }
+
+  &.single-tags {
+    border-top: none;
+  }
+
   &__main {
     position: relative;
     width: calc(100% - 116px);

src/layout/tags/index.tsx

@@ -7,6 +7,7 @@ import { LeftOutlined, RightOutlined, RedoOutlined, CloseOutlined } from '@ant-d
 import { listenerRouteChange } from '@/logics/mitt/routeChange'
 import { useBaseSetting } from '@/hooks/setting/useBaseSetting'
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
+import { useDarkModeSetting } from '@/hooks/setting/useDarkModeSetting'
 import { useTagStore } from '@/stores/modules/tags'
 import { initAffixTags } from './useTags'
 import { useGo } from '@/hooks/web/usePage'
@@ -18,19 +19,13 @@ import './index.less'
 
 export default defineComponent({
   name: 'LayoutTags',
-  components: {
-    Button,
-    TagItem,
-    Dropdown,
-    Menu,
-    MenuItem,
-    LeftOutlined,
-    RightOutlined,
-    RedoOutlined,
-    CloseOutlined
+  props: {
+    isHeaderTags: {
+      type: Boolean,
+      default: true
+    }
   },
-
-  setup() {
+  setup(props) {
     const tagsMain = ref<ElRef>(null)
     const tagsMainCont = ref<ElRef>(null)
 
@@ -42,10 +37,15 @@ export default defineComponent({
     const go = useGo()
 
     const { getAppMode } = useBaseSetting()
-    const { getMenuTheme, getMenuType } = useMenuSetting()
+    const { getMenuTheme, getMenuType, getIsHeaderMenu } = useMenuSetting()
+    const { isDarkMode } = useDarkModeSetting()
 
     const { refresh, closeLeft, closeRight, closeOther, closeAll } = useTags()
 
+    const getTagsMode = computed(() => {
+      return !unref(isDarkMode) ? (unref(getIsHeaderMenu) ? unref(getMenuTheme) : '') : ''
+    })
+
     const getTagsList = computed(() => {
       return tagStore.getVisitedTags.filter(item => !item.meta?.hideTag)
     })
@@ -173,7 +173,7 @@ export default defineComponent({
     }
 
     return () => (
-      <div class='layout-tags'>
+      <div class={['layout-tags', unref(getTagsMode), { 'single-tags': !props.isHeaderTags }]}>
         <Button
           class='layout-tags__btn'
           icon={<LeftOutlined />}

src/layout/useLayout.ts

@@ -0,0 +1,20 @@
+import { computed, unref } from 'vue'
+import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
+import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
+
+export function useLayout() {
+  const { getMenuSplit } = useMenuSetting()
+  const { getShowTags } = useHeaderSetting()
+
+  const getHeaderHeight = computed(() => (unref(getShowTags) && !unref(getMenuSplit) ? '80px' : '48px'))
+
+  const getContentHeight = computed(() =>
+    unref(getMenuSplit) ? 'calc(100vh - 80px)' : `calc(100vh - ${unref(getHeaderHeight)})`
+  )
+
+  return {
+    getShowTags,
+    getHeaderHeight,
+    getContentHeight
+  }
+}