ele-admin-plus 1.1.9-beta.1 → 1.1.9-beta.11

package/lib/ele-pro-layout/index.d.ts

@@ -1,14 +1,15 @@
-import type { Ref } from 'vue';
-import type { ClassValues } from '../ele-app/types';
-import type { MenuItem, TabItem, LevelItem, TabItemEventOption, MenuItemProps } from './types';
-declare const _default: import("vue").DefineComponent<{
+import { MenuItem, TabItem, LevelItem, TabItemEventOption, MenuItemProps } from './types';
+import { ClassValues } from '../ele-app/types';
+import { Ref } from 'vue';
+
+declare const _default: import('vue').DefineComponent<{
     menus: import("vue").PropType<MenuItem[] | null>;
     tabs: import("vue").PropType<TabItem[] | null>;
     collapse: BooleanConstructor;
     compact: BooleanConstructor;
     maximized: BooleanConstructor;
     tabBar: {
-        type: BooleanConstructor;
+        type: import("vue").PropType<boolean | "header">;
         default: boolean;
     };
     breadcrumb: {
@@ -40,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    ellipsisProps: import("vue").PropType<import("../ele-menus/types").EllipsisProps>;
+    ellipsisProps: import("vue").PropType<import("../ele-menus/types").EllipsisProps | undefined>;
     menuTrigger: {
         type: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "hover" | "click", unknown> | undefined>;
         default: string;
@@ -58,7 +59,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     sidebarStyle: {
-        type: import("vue").PropType<import("./types").SidebarStyle>; /** 页签选中 */
+        type: import("vue").PropType<import("./types").SidebarStyle>;
         default: string;
     };
     tabStyle: {
@@ -66,8 +67,8 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     fixedHeader: {
-        /** 顶栏菜单数据 */
         type: BooleanConstructor;
+        /** 页签选中 */
         default: boolean;
     };
     fixedSidebar: BooleanConstructor;
@@ -77,17 +78,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     logoInHeader: BooleanConstructor;
-    colorfulIcon: BooleanConstructor; /** 侧栏一级菜单数据 */
+    colorfulIcon: BooleanConstructor;
     uniqueOpened: {
         type: BooleanConstructor;
-        default: boolean; /** 侧栏一级菜单选中 */
+        default: boolean;
     };
     expanded: BooleanConstructor;
-    compressOnEsc: BooleanConstructor;
+    compressOnEsc: BooleanConstructor; /** 侧栏一级菜单数据 */
     fixedHome: {
         type: BooleanConstructor;
         default: boolean;
-    };
+    }; /** 侧栏一级菜单选中 */
     homePath: StringConstructor;
     redirectPath: {
         type: StringConstructor;
@@ -101,13 +102,12 @@ declare const _default: import("vue").DefineComponent<{
     tabSortable: BooleanConstructor;
     autoScrollTop: {
         type: BooleanConstructor;
-        default: boolean;
+        default: boolean; /** 是否混合导航布局 */
     };
-    /** 是否双侧栏布局 */
     headerTitleSlot: {
         type: StringConstructor;
-        default: string;
-    };
+        default: string; /** 是否双侧栏布局 */
+    }; /** 是否双侧栏布局 */
     headerIconSlot: {
         type: StringConstructor;
         default: string;
@@ -126,7 +126,6 @@ declare const _default: import("vue").DefineComponent<{
     };
     sideboxIconSlot: {
         type: StringConstructor;
-        /** 布局类名 */
         default: string;
     };
     tooltipEffect: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
@@ -134,6 +133,11 @@ declare const _default: import("vue").DefineComponent<{
     boxTrigger: import("vue").PropType<import("./types").MenuItemTrigger>;
     itemTrigger: import("vue").PropType<import("./types").MenuItemTrigger>;
     beforeClick: import("vue").PropType<import("./types").BeforeClick>;
+    menuHoverTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+    menuTextEllipsisTooltip: import("vue").PropType<boolean | Partial<import("../ele-tooltip/props").TooltipProps> | undefined>;
     keepAlive: BooleanConstructor;
     transitionName: StringConstructor;
     transitionDelay: {
@@ -145,9 +149,8 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
-    authenticated: Ref<boolean>;
-    watermark: Ref<string[]>;
     contentRef: Ref<HTMLElement | null>;
+    modalsRef: Ref<HTMLElement | null>;
     levelData: import("vue").ShallowRef<LevelItem[]>;
     tabData: import("vue").ShallowRef<TabItem[]>;
     tabActive: Ref<string>;
@@ -163,7 +166,7 @@ declare const _default: import("vue").DefineComponent<{
     sidebox: import("vue").ComputedRef<boolean>;
     sidebar: import("vue").ComputedRef<boolean>;
     layoutClass: import("vue").ComputedRef<ClassValues>;
-    backTopSelector: import("vue").ComputedRef<string | undefined>;
+    backTopSelector: import("vue").ComputedRef<string>;
     sidebarCollapse: import("vue").ComputedRef<boolean>;
     sidebarTheme: import("vue").ComputedRef<"light" | "dark">;
     updateCollapse: (val?: boolean | MouseEvent) => void;
@@ -176,9 +179,17 @@ declare const _default: import("vue").DefineComponent<{
     onSideMenuClose: (index: string, indexPath: string[]) => void;
     onHeadMenuOpen: (index: string, indexPath: string[]) => void;
     onHeadMenuClose: (index: string, indexPath: string[]) => void;
-    onNavItemClick: (item: MenuItemProps) => void;
-    onBoxItemClick: (item: MenuItemProps) => void;
-    onMenuItemClick: (item: MenuItemProps) => void;
+    onNavItemClick: (item: MenuItemProps, e: MouseEvent) => void;
+    onNavItemMouseenter: (item: MenuItemProps, e: MouseEvent) => void;
+    onNavMouseEnter: () => void;
+    onNavMouseLeave: () => void;
+    onBoxItemClick: (item: MenuItemProps, e: MouseEvent) => void;
+    onBoxItemMouseenter: (item: MenuItemProps, e: MouseEvent) => void;
+    onBoxMouseEnter: () => void;
+    onBoxMouseLeave: () => void;
+    onMenuItemClick: (item: MenuItemProps, e: MouseEvent) => void;
+    onSideMouseEnter: () => void;
+    onSideMouseLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:collapse': (_collapse: boolean) => boolean;
     'update:maximized': (_val: boolean) => boolean;
@@ -200,7 +211,7 @@ declare const _default: import("vue").DefineComponent<{
     compact: BooleanConstructor;
     maximized: BooleanConstructor;
     tabBar: {
-        type: BooleanConstructor;
+        type: import("vue").PropType<boolean | "header">;
         default: boolean;
     };
     breadcrumb: {
@@ -232,7 +243,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    ellipsisProps: import("vue").PropType<import("../ele-menus/types").EllipsisProps>;
+    ellipsisProps: import("vue").PropType<import("../ele-menus/types").EllipsisProps | undefined>;
     menuTrigger: {
         type: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "hover" | "click", unknown> | undefined>;
         default: string;
@@ -250,7 +261,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     sidebarStyle: {
-        type: import("vue").PropType<import("./types").SidebarStyle>; /** 页签选中 */
+        type: import("vue").PropType<import("./types").SidebarStyle>;
         default: string;
     };
     tabStyle: {
@@ -258,8 +269,8 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     fixedHeader: {
-        /** 顶栏菜单数据 */
         type: BooleanConstructor;
+        /** 页签选中 */
         default: boolean;
     };
     fixedSidebar: BooleanConstructor;
@@ -269,17 +280,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     logoInHeader: BooleanConstructor;
-    colorfulIcon: BooleanConstructor; /** 侧栏一级菜单数据 */
+    colorfulIcon: BooleanConstructor;
     uniqueOpened: {
         type: BooleanConstructor;
-        default: boolean; /** 侧栏一级菜单选中 */
+        default: boolean;
     };
     expanded: BooleanConstructor;
-    compressOnEsc: BooleanConstructor;
+    compressOnEsc: BooleanConstructor; /** 侧栏一级菜单数据 */
     fixedHome: {
         type: BooleanConstructor;
         default: boolean;
-    };
+    }; /** 侧栏一级菜单选中 */
     homePath: StringConstructor;
     redirectPath: {
         type: StringConstructor;
@@ -293,13 +304,12 @@ declare const _default: import("vue").DefineComponent<{
     tabSortable: BooleanConstructor;
     autoScrollTop: {
         type: BooleanConstructor;
-        default: boolean;
+        default: boolean; /** 是否混合导航布局 */
     };
-    /** 是否双侧栏布局 */
     headerTitleSlot: {
         type: StringConstructor;
-        default: string;
-    };
+        default: string; /** 是否双侧栏布局 */
+    }; /** 是否双侧栏布局 */
     headerIconSlot: {
         type: StringConstructor;
         default: string;
@@ -318,7 +328,6 @@ declare const _default: import("vue").DefineComponent<{
     };
     sideboxIconSlot: {
         type: StringConstructor;
-        /** 布局类名 */
         default: string;
     };
     tooltipEffect: import("vue").PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
@@ -326,6 +335,11 @@ declare const _default: import("vue").DefineComponent<{
     boxTrigger: import("vue").PropType<import("./types").MenuItemTrigger>;
     itemTrigger: import("vue").PropType<import("./types").MenuItemTrigger>;
     beforeClick: import("vue").PropType<import("./types").BeforeClick>;
+    menuHoverTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+    menuTextEllipsisTooltip: import("vue").PropType<boolean | Partial<import("../ele-tooltip/props").TooltipProps> | undefined>;
     keepAlive: BooleanConstructor;
     transitionName: StringConstructor;
     transitionDelay: {
@@ -358,10 +372,10 @@ declare const _default: import("vue").DefineComponent<{
     breadcrumb: boolean;
     layout: import("./types").Layout;
     transitionDelay: number;
-    maximized: boolean;
-    compact: boolean;
     expanded: boolean;
-    tabBar: boolean;
+    compact: boolean;
+    maximized: boolean;
+    tabBar: boolean | "header";
     keepAlive: boolean;
     responsive: boolean;
     headerStyle: import("./types").HeaderStyle;
@@ -390,5 +404,6 @@ declare const _default: import("vue").DefineComponent<{
     sidebarIconSlot: string;
     sideboxTitleSlot: string;
     sideboxIconSlot: string;
+    menuHoverTimeout: number;
 }, {}>;
 export default _default;

package/lib/ele-pro-layout/props.cjs

@@ -13,7 +13,7 @@ const proLayoutProps = {
   maximized: Boolean,
   /** 是否需要页签栏 */
   tabBar: {
-    type: Boolean,
+    type: [Boolean, String],
     default: true
   },
   /** 是否需要面包屑导航 */
@@ -181,6 +181,13 @@ const proLayoutProps = {
   itemTrigger: String,
   /** 菜单点击事件前钩子 */
   beforeClick: Function,
+  /** hover模式的菜单切换超时 */
+  menuHoverTimeout: {
+    type: Number,
+    default: 600
+  },
+  /** 是否开启菜单文本溢出提示 */
+  menuTextEllipsisTooltip: [Boolean, Object],
   /** 是否支持内链缓存 */
   keepAlive: Boolean,
   /** 内链切换动画 */

package/lib/ele-pro-layout/props.d.ts

@@ -1,8 +1,8 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { EllipsisProps } from '../ele-menus/types';
-import type { ContextMenus } from '../ele-tabs/types';
-import type { EleDropdownProps } from '../ele-app/plus';
-import type { MenuItem, TabItem, Layout, SidebarLayout, HeaderStyle, SidebarStyle, TabStyle, MenuI18n, TabItemEventOption, BodySizeChangeOption, MenuItemTrigger, BeforeClick } from './types';
+import { MenuItem, TabItem, Layout, SidebarLayout, HeaderStyle, SidebarStyle, TabStyle, MenuI18n, TabItemEventOption, BodySizeChangeOption, MenuItemTrigger, BeforeClick } from './types';
+import { EleDropdownProps } from '../ele-app/plus';
+import { ContextMenus } from '../ele-tabs/types';
+import { PropType, ExtractPropTypes } from 'vue';
+
 /**
  * 属性
  */
@@ -19,7 +19,7 @@ export declare const proLayoutProps: {
     maximized: BooleanConstructor;
     /** 是否需要页签栏 */
     tabBar: {
-        type: BooleanConstructor;
+        type: PropType<boolean | "header">;
         default: boolean;
     };
     /** 是否需要面包屑导航 */
@@ -29,7 +29,7 @@ export declare const proLayoutProps: {
     };
     /** 面包屑导航分隔符 */
     breadcrumbSeparator: {
-        type: PropType<import("element-plus/es/utils/index").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>))[], unknown, unknown> | undefined>;
+        type: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>))[], unknown, unknown> | undefined>;
         default: string;
     };
     /** 是否需要返回顶部 */
@@ -60,10 +60,10 @@ export declare const proLayoutProps: {
         default: boolean;
     };
     /** 顶栏菜单省略项的属性 */
-    ellipsisProps: PropType<EllipsisProps>;
+    ellipsisProps: PropType<import('../ele-menus/types').EllipsisProps | undefined>;
     /** 顶栏子菜单触发方式 */
     menuTrigger: {
-        type: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "hover" | "click", unknown> | undefined>;
+        type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "hover" | "click", unknown> | undefined>;
         default: string;
     };
     /** 布局类型 */
@@ -178,7 +178,7 @@ export declare const proLayoutProps: {
         default: string;
     };
     /** 菜单 tooltip 主题 */
-    tooltipEffect: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
+    tooltipEffect: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
     /** 顶栏菜单触发模式 */
     navTrigger: PropType<MenuItemTrigger>;
     /** 双侧栏一级菜单触发模式 */
@@ -187,6 +187,13 @@ export declare const proLayoutProps: {
     itemTrigger: PropType<MenuItemTrigger>;
     /** 菜单点击事件前钩子 */
     beforeClick: PropType<BeforeClick>;
+    /** hover模式的菜单切换超时 */
+    menuHoverTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 是否开启菜单文本溢出提示 */
+    menuTextEllipsisTooltip: PropType<boolean | Partial<import('../ele-tooltip/props').TooltipProps> | undefined>;
     /** 是否支持内链缓存 */
     keepAlive: BooleanConstructor;
     /** 内链切换动画 */

package/lib/ele-pro-layout/style/css-var.scss

@@ -9,21 +9,10 @@
   .ele-admin-header,
   .ele-admin-sidebar,
   .ele-admin-sidebox,
-  .ele-admin-tabs,
-  .ele-modal-inner,
-  .ele-drawer-inner {
+  .ele-admin-tabs {
     @include set-ele-var('header', $var);
   }
 
-  .ele-admin-header.is-dark,
-  .ele-admin-header.is-primary {
-    @include set-ele-var('header-dark', $var);
-  }
-
-  .ele-admin-header.is-primary {
-    @include set-ele-var('header-primary', $var);
-  }
-
   .ele-admin-logo {
     @include set-ele-var('logo', $var);
   }
@@ -32,18 +21,14 @@
   .ele-admin-sidebar,
   .ele-admin-sidebox,
   .ele-admin-body,
-  .ele-admin-mask,
-  .ele-modal-inner,
-  .ele-drawer-inner {
+  .ele-admin-mask {
     @include set-ele-var('sidebar', $var);
   }
 
   .ele-admin-header,
   .ele-admin-sidebox,
   .ele-admin-sidebox-popup,
-  .ele-admin-body,
-  .ele-modal-inner,
-  .ele-drawer-inner {
+  .ele-admin-body {
     @include set-ele-var('sidebox', $var);
   }
 }

package/lib/ele-pro-layout/style/header.scss

@@ -13,6 +13,11 @@
   z-index: calc(#{eleVar('layout', 'index')} + 3);
   flex-shrink: 0;
 
+  &.is-ghost {
+    background: hsla(0, 0%, 100%, 0.04);
+    backdrop-filter: blur(8px);
+  }
+
   /* 图标 */
   .ele-admin-logo {
     color: eleVar('logo', 'color');
@@ -41,7 +46,9 @@
 
   /* 面包屑 */
   .ele-admin-breadcrumb {
+    $tool-padding: eleVar('header', 'tool-padding');
     flex-shrink: 0;
+    margin-left: calc(#{eleVar('header', 'tools-padding')} + #{$tool-padding});
   }
 
   /* 菜单 */
@@ -59,21 +66,79 @@
     }
   }
 
-  /* 工具栏 */
-  .ele-admin-tools {
-    height: 100%;
-    flex-shrink: 0;
-    padding: 0 12px;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
+  /* 页签栏 */
+  & > .ele-admin-tabs {
+    flex: 1;
+    overflow: hidden;
+    line-height: normal;
+
+    &.ele-tab-wrap {
+      padding-right: 0;
+      background: none;
+      box-shadow: none;
+    }
+
+    & + .ele-admin-tools {
+      padding-left: 0;
+    }
+
+    &.is-simple,
+    &.is-indicator {
+      align-self: flex-end;
+    }
+  }
+
+  & > .ele-admin-tabs.ele-tab-wrap.is-simple,
+  & > .ele-admin-tabs.ele-tab-wrap.is-indicator,
+  & > .ele-tab-wrap .ele-tabs.is-simple,
+  & > .ele-tab-wrap .ele-tabs.is-indicator {
+    $height: eleVar('header', 'height');
+    $tool-height: eleVar('header', 'tool-height');
+    $tab-height: calc(#{$height} - (#{$height} - #{$tool-height}) / 2);
+    #{eleVarName('tab', 'height')}: #{$tab-height};
+  }
+}
+
+/* 工具栏 */
+.ele-admin-tools {
+  display: flex;
+  align-items: center;
+  padding: 0 eleVar('header', 'tools-padding');
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: 100%;
+
+  & + .ele-admin-breadcrumb {
+    margin-left: 0;
+  }
+
+  & + .ele-admin-tabs {
+    &.ele-tab-wrap,
+    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+      padding-left: 0;
+    }
+  }
+
+  & + .is-simple,
+  & + .is-indicator {
+    &.is-fixed-home,
+    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+      padding-left: eleVar('tab', 'simple-angle-size');
+    }
+  }
+
+  & + .is-button {
+    &.is-fixed-home,
+    &:not(.is-fixed-home) .el-tabs__nav-wrap:not(.is-scrollable) .el-tabs__nav {
+      padding-left: eleVar('tab', 'button-space');
+    }
   }
 }
 
 /* 操作按钮 */
 .ele-admin-tool {
   height: eleVar('header', 'tool-height');
-  padding: 0 12px;
+  padding: 0 eleVar('header', 'tool-padding');
   display: flex;
   align-items: center;
   border-radius: eleVar('header', 'tool-radius');

package/lib/ele-pro-layout/style/layout-mobile.scss

@@ -30,7 +30,7 @@
     width: 100% !important;
   }
 
-  .ele-admin-tabs {
+  .ele-admin-body > .ele-admin-tabs {
     left: 0 !important;
   }
 
@@ -56,7 +56,7 @@
 
     &.is-dark,
     &.is-primary {
-      box-shadow: eleVar('header-dark', 'shadow');
+      box-shadow: eleVar('header', 'dark-shadow');
     }
   }
 }

package/lib/ele-pro-layout/style/layout-style.scss

@@ -8,7 +8,7 @@
     top: 0;
   }
 
-  .ele-admin-tabs {
+  .ele-admin-body > .ele-admin-tabs {
     position: sticky;
     top: eleVar('header', 'height');
   }
@@ -85,6 +85,7 @@
 
   .ele-admin-main,
   .ele-admin-body,
+  .ele-admin-wrapper,
   .ele-admin-content {
     overflow-x: hidden;
     overflow-y: auto;
@@ -95,6 +96,10 @@
   .ele-admin-sidebox {
     height: 100%;
   }
+
+  .ele-admin-wrapper > .el-backtop {
+    z-index: eleVar('layout', 'index');
+  }
 }
 
 /* 内容全屏 */
@@ -102,11 +107,11 @@
   .ele-admin-header,
   .ele-admin-sidebar,
   .ele-admin-sidebox,
-  &.ele-admin-expanded .ele-admin-tabs {
+  &.ele-admin-expanded .ele-admin-body > .ele-admin-tabs {
     display: none;
   }
 
-  &.ele-admin-fixed-header .ele-admin-tabs {
+  &.ele-admin-fixed-header .ele-admin-body > .ele-admin-tabs {
     top: 0;
   }
 

package/lib/ele-pro-layout/style/layout-theme.scss

@@ -4,9 +4,9 @@
 /* 暗色顶栏 */
 .ele-admin-header.is-dark,
 .ele-admin-header.is-primary {
-  color: eleVar('menu-dark', 'active-color');
-  background: eleVar('header-dark', 'bg');
-  box-shadow: eleVar('header-dark', 'shadow');
+  color: eleVar('header', 'dark-color');
+  background: eleVar('header', 'dark-bg');
+  box-shadow: eleVar('header', 'dark-shadow');
 
   /* 操作按钮 */
   .ele-admin-tool:hover {
@@ -15,32 +15,63 @@
 
   /* 面包屑 */
   .ele-breadcrumb .el-breadcrumb__item {
-    .el-breadcrumb__inner {
-      color: eleVar('menu-dark', 'color');
-
-      &.is-link:hover {
-        color: eleVar('menu-dark', 'active-color');
-      }
+    .el-breadcrumb__inner,
+    .el-breadcrumb__separator {
+      color: rgba(255, 255, 255, 0.8);
     }
 
+    .el-breadcrumb__inner.is-link:hover,
     &:last-child .el-breadcrumb__inner {
-      color: eleVar('menu-dark', 'active-color');
+      color: eleVar('header', 'dark-color');
     }
+  }
 
-    .el-breadcrumb__separator {
-      color: eleVar('menu-dark', 'color');
-    }
+  /* 页签栏 */
+  & > .ele-admin-tabs.ele-tab-wrap,
+  & > .ele-admin-tabs .ele-tabs {
+    $color: eleVar('header', 'dark-color');
+    $hover-bg: eleVar('header', 'dark-tool-hover-bg');
+    #{eleVarName('tab', 'color')}: #{$color};
+    #{eleVarName('tab', 'hover-color')}: #{$color};
+    #{eleVarName('tab', 'close-color')}: #{$color};
+    #{eleVarName('tab', 'close-hover-color')}: #{$color};
+    #{eleVarName('tab', 'close-hover-bg')}: #{$hover-bg};
+    #{eleVarName('tab', 'tool-color')}: #{$color};
+    #{eleVarName('tab', 'tool-hover-color')}: #{$color};
+    #{eleVarName('tab', 'simple-hover-color')}: #{$color};
+    #{eleVarName('tab', 'simple-hover-bg')}: #{$hover-bg};
+    #{eleVarName('tab', 'simple-active-bg')}: #{elVar('bg-color', 'overlay')};
+    #{eleVarName('tab', 'simple-active-line')}: 0px;
+    #{eleVarName('tab', 'simple-tool-hover-bg')}: transparent;
+    #{eleVarName('tab', 'indicator-dot-color')}: rgba(255, 255, 255, 0.4);
+    #{eleVarName('tab', 'indicator-dot-hover-color')}: rgba(255, 255, 255, 0.6);
+    #{eleVarName('tab', 'button-bg')}: #{$hover-bg};
+    #{eleVarName('tab', 'button-hover-bg')}: rgba(255, 255, 255, 0.2);
+    #{eleVarName('tab', 'button-hover-color')}: #{$color};
   }
 }
 
+.ele-admin-header.is-dark > .ele-admin-tabs.ele-tab-wrap,
+.ele-admin-header.is-dark > .ele-admin-tabs .ele-tabs {
+  $color: eleVar('header', 'dark-color');
+  $hover-bg: eleVar('header', 'dark-tool-hover-bg');
+  #{eleVarName('tab', 'active-close-color')}: #{$color};
+  #{eleVarName('tab', 'active-close-hover-color')}: #{$color};
+  #{eleVarName('tab', 'active-close-hover-bg')}: #{$hover-bg};
+  #{eleVarName('tab', 'simple-active-color')}: #{$color};
+  #{eleVarName('tab', 'simple-active-bg')}: #{elVar('color-primary')};
+  #{eleVarName('tab', 'indicator-dot-active-color')}: #{$color};
+  #{eleVarName('tab', 'button-active-color')}: #{$color};
+  #{eleVarName('tab', 'button-active-bg')}: #{elVar('color-primary')};
+}
+
 /* 主色顶栏 */
 .ele-admin-header.is-primary {
   background: elVar('color-primary');
 
+  /* 菜单 */
   .ele-admin-menus > .ele-menu {
-    $hover-bg: eleVar('header-primary', 'hover-bg');
-    $active-bg: eleVar('header-primary', 'active-bg');
-    #{eleVarName('menu-horizontal', 'dark-hover-bg')}: #{$hover-bg};
+    $active-bg: eleVar('header', 'primary-active-bg');
     #{eleVarName('menu-horizontal', 'dark-active-bg')}: #{$active-bg};
   }
 }
@@ -68,18 +99,12 @@
 
     .ele-admin-sidebox {
       background: eleVar('sidebar', 'dark-bg');
-
-      .ele-admin-menus > .el-scrollbar__wrap > .el-scrollbar__view > .ele-menu {
-        & > .el-sub-menu.is-active > .el-sub-menu__title {
-          background: eleVar('menu-dark', 'active-bg');
-        }
-      }
     }
   }
 
   .ele-admin-sidebox .ele-sidebar-tool,
   &:not(.ele-admin-mix-sidebar) .ele-admin-sidebar .ele-sidebar-tool {
-    color: eleVar('menu-dark', 'active-color');
+    color: eleVar('header', 'dark-color');
 
     &:hover {
       background: eleVar('header', 'dark-tool-hover-bg');