yuang-framework-ui-pc 1.1.45 → 1.1.46

package/es/ele-admin-layout/components/layout-tabs.js

@@ -0,0 +1,132 @@
+import { defineComponent, resolveComponent, createBlock, openBlock, withCtx, createCommentVNode, renderSlot, createVNode, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { ElIcon } from "element-plus";
+import { HomeOutlined } from "../../icons";
+import EleTabWrap from "../../ele-tab-wrap/index";
+import EleTabTool from "../../ele-tab-tool/index";
+import EleTabs from "../../ele-tabs/index";
+const _sfc_main = defineComponent({
+  name: "LayoutTabs",
+  components: {
+    ElIcon,
+    HomeOutlined,
+    EleTabWrap,
+    EleTabTool,
+    EleTabs
+  },
+  props: {
+    /** 页签数据 */
+    tabs: Array,
+    /** 页签选中 */
+    active: String,
+    /** 是否需要固定的主页页签 */
+    fixedHome: Boolean,
+    /** 主页路由地址 */
+    homePath: String,
+    /** 当前路由是否是主页 */
+    isHome: Boolean,
+    /** 页签风格 */
+    tabStyle: String,
+    /** 是否支持右键菜单 */
+    tabContextMenu: [Boolean, Object],
+    /** 右键菜单 */
+    tabContextMenus: [Array, Function],
+    /** 是否支持拖动排序 */
+    tabSortable: Boolean
+  },
+  emits: {
+    tabClick: (_option) => true,
+    tabRemove: (_name) => true,
+    tabContextMenu: (_option) => true,
+    tabSortChange: (_data) => true
+  },
+  setup(_props, { emit }) {
+    const handleTabItemClick = (option) => {
+      emit("tabClick", option);
+    };
+    const handleTabRemove = (name) => {
+      emit("tabRemove", name);
+    };
+    const handleTabContextMenu = (option) => {
+      emit("tabContextMenu", option);
+    };
+    const handleTabSortChange = (data) => {
+      emit("tabSortChange", data);
+    };
+    return {
+      handleTabRemove,
+      handleTabItemClick,
+      handleTabContextMenu,
+      handleTabSortChange
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_HomeOutlined = resolveComponent("HomeOutlined");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_EleTabTool = resolveComponent("EleTabTool");
+  const _component_EleTabs = resolveComponent("EleTabs");
+  const _component_EleTabWrap = resolveComponent("EleTabWrap");
+  return openBlock(), createBlock(_component_EleTabWrap, {
+    type: _ctx.tabStyle,
+    class: "ele-admin-tabs"
+  }, {
+    default: withCtx(() => [
+      _ctx.fixedHome ? (openBlock(), createBlock(_component_EleTabTool, {
+        key: 0,
+        tab: true,
+        active: _ctx.isHome,
+        tabName: _ctx.homePath
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "tabHome", { active: _ctx.active }, () => [
+            createVNode(_component_ElIcon, {
+              class: "ele-tab-icon",
+              style: { "vertical-align": "-3px" }
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_HomeOutlined, { style: { "transform": "scale(1.08)" } })
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 3
+      }, 8, ["active", "tabName"])) : createCommentVNode("", true),
+      _ctx.tabs ? (openBlock(), createBlock(_component_EleTabs, {
+        key: 1,
+        items: _ctx.tabs,
+        modelValue: _ctx.active,
+        sortable: _ctx.tabSortable,
+        contextMenu: _ctx.tabContextMenu,
+        contextMenus: _ctx.tabContextMenus,
+        mousewheel: true,
+        handleClick: true,
+        onTabRemove: _ctx.handleTabRemove,
+        onTabItemClick: _ctx.handleTabItemClick,
+        onTabContextMenu: _ctx.handleTabContextMenu,
+        onTabSortChange: _ctx.handleTabSortChange
+      }, createSlots({ _: 2 }, [
+        _ctx.$slots.tabTitle ? {
+          name: "label",
+          fn: withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "tabTitle", normalizeProps(guardReactiveProps(slotProps || {})))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["items", "modelValue", "sortable", "contextMenu", "contextMenus", "onTabRemove", "onTabItemClick", "onTabContextMenu", "onTabSortChange"])) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "tabExtra", { active: _ctx.active })
+    ]),
+    _: 3
+  }, 8, ["type"]);
+}
+const layoutTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  layoutTabs as default
+};

package/es/ele-admin-layout/props.d.ts

@@ -0,0 +1,182 @@
+import { PropType, ExtractPropTypes, InjectionKey } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { EleMenusProps, EleBreadcrumbProps, EleBacktopProps, EleDropdownProps } from '../ele-app/plus';
+import { MenuItem } from '../ele-menus/types';
+import { BreadcrumbItem } from '../ele-breadcrumb/types';
+import { TabPaneItem, TabEventOption, ContextMenus } from '../ele-tabs/types';
+import { Layout, SidebarLayout, HeaderStyle, SidebarStyle, TabStyle, TabBar, Maximized, LayoutProvide } from './types';
+
+/**
+ * 属性
+ */
+export declare const adminLayoutProps: {
+    /** 高度 */
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    /** 顶栏菜单数据 */
+    headerMenus: PropType<MenuItem[]>;
+    /** 顶栏菜单选中 */
+    headerActive: StringConstructor;
+    /** 侧栏菜单数据 */
+    sidebarMenus: PropType<MenuItem[]>;
+    /** 侧栏菜单选中 */
+    sidebarActive: StringConstructor;
+    /** 双侧栏一级菜单数据 */
+    sideboxMenus: PropType<MenuItem[]>;
+    /** 双侧栏一级菜单选中 */
+    sideboxActive: StringConstructor;
+    /** 页签数据 */
+    tabs: PropType<TabPaneItem[]>;
+    /** 页签选中 */
+    tabActive: StringConstructor;
+    /** 面包屑导航数据 */
+    levels: PropType<BreadcrumbItem[]>;
+    /** 是否折叠侧栏 */
+    collapse: BooleanConstructor;
+    /** 双侧栏一级是否紧凑风格 */
+    compact: BooleanConstructor;
+    /** 内容区是否最大化 */
+    maximized: PropType<Maximized>;
+    /** 是否需要页签栏 */
+    tabBar: PropType<TabBar>;
+    /** 是否需要面包屑导航 */
+    breadcrumb: PropType<boolean | EleBreadcrumbProps>;
+    /** 是否需要返回顶部 */
+    backTop: PropType<boolean | EleBacktopProps>;
+    /** 顶栏菜单属性 */
+    headerMenuProps: PropType<EleMenusProps>;
+    /** 侧栏菜单属性 */
+    sidebarMenuProps: PropType<EleMenusProps>;
+    /** 双侧栏一级菜单属性 */
+    sideboxMenuProps: PropType<EleMenusProps>;
+    /** 布局类型 */
+    layout: PropType<Layout>;
+    /** 侧栏布局类型 */
+    sidebarLayout: PropType<SidebarLayout>;
+    /** 顶栏风格 */
+    headerStyle: PropType<HeaderStyle>;
+    /** 侧栏风格 */
+    sidebarStyle: PropType<SidebarStyle>;
+    /** 页签风格 */
+    tabStyle: {
+        type: PropType<TabStyle>;
+        default: string;
+    };
+    /** 是否固定顶栏 */
+    fixedHeader: BooleanConstructor;
+    /** 是否固定侧栏 */
+    fixedSidebar: BooleanConstructor;
+    /** 是否固定内容区 */
+    fixedBody: BooleanConstructor;
+    /** logo是否置于顶栏 */
+    logoInHeader: BooleanConstructor;
+    /** 是否需要固定的主页页签 */
+    fixedHome: BooleanConstructor;
+    /** 主页路由地址 */
+    homePath: StringConstructor;
+    /** 是否选中固定的主页页签 */
+    isHome: BooleanConstructor;
+    /** 是否支持页签右键菜单 */
+    tabContextMenu: PropType<boolean | EleDropdownProps>;
+    /** 页签右键菜单数据 */
+    tabContextMenus: PropType<ContextMenus>;
+    /** 是否支持页签拖动排序 */
+    tabSortable: BooleanConstructor;
+    /** 顶栏菜单标题插槽名称 */
+    headerTitleSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 顶栏菜单图标插槽名称 */
+    headerIconSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 侧栏菜单标题插槽名称 */
+    sidebarTitleSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 侧栏菜单图标插槽名称 */
+    sidebarIconSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 双侧栏一级菜单标题插槽名称 */
+    sideboxTitleSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 双侧栏一级菜单图标插槽名称 */
+    sideboxIconSlot: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 顶栏样式 */
+    headerCustomStyle: PropType<StyleValue>;
+    /** 侧栏样式 */
+    sidebarCustomStyle: PropType<StyleValue>;
+    /** 双侧栏一级样式 */
+    sideboxCustomStyle: PropType<StyleValue>;
+    /** 页签栏样式 */
+    tabsCustomStyle: PropType<StyleValue>;
+    /** 内容区样式 */
+    contentCustomStyle: PropType<StyleValue>;
+    /** logo样式 */
+    logoStyle: PropType<StyleValue>;
+    /** logo文字样式 */
+    logoTitleStyle: PropType<StyleValue>;
+    /** 顶栏菜单样式 */
+    headerMenusStyle: PropType<StyleValue>;
+    /** 侧栏菜单样式 */
+    sidebarMenusStyle: PropType<StyleValue>;
+    /** 双侧栏一级菜单样式 */
+    sideboxMenusStyle: PropType<StyleValue>;
+    /** logo图片地址 */
+    logoSrc: StringConstructor;
+    /** logo文字 */
+    logoTitle: StringConstructor;
+    /** 菜单是否自动滚动到选中位置 */
+    menuScrollToActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否是移动端风格 */
+    mobile: BooleanConstructor;
+};
+export type AdminLayoutProps = ExtractPropTypes<typeof adminLayoutProps>;
+/**
+ * 事件
+ */
+export declare const adminLayoutEmits: {
+    'update:collapse': (_collapse: boolean) => boolean;
+    logoClick: (_e: MouseEvent) => boolean;
+    headMenuOpen: (_index: string, _indexPath: string[]) => boolean;
+    headMenuClose: (_index: string, _indexPath: string[]) => boolean;
+    headMenuItemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
+    headMenuItemMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
+    headMenuItemMouseleave: (_item: MenuItem, _e: MouseEvent) => boolean;
+    headMouseenter: (_e: MouseEvent) => boolean;
+    headMouseleave: (_e: MouseEvent) => boolean;
+    boxMenuItemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
+    boxMenuItemMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
+    boxMenuItemMouseleave: (_item: MenuItem, _e: MouseEvent) => boolean;
+    boxMouseenter: (_e: MouseEvent) => boolean;
+    boxMouseleave: (_e: MouseEvent) => boolean;
+    sideMenuOpen: (_index: string, _indexPath: string[]) => boolean;
+    sideMenuClose: (_index: string, _indexPath: string[]) => boolean;
+    sideMenuItemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
+    sideMouseenter: (_e: MouseEvent) => boolean;
+    sideMouseleave: (_e: MouseEvent) => boolean;
+    tabClick: (_option: TabEventOption) => boolean;
+    tabRemove: (_name: string) => boolean;
+    tabContextMenu: (_option: TabEventOption) => boolean;
+    tabSortChange: (_data: TabPaneItem[]) => boolean;
+    contentMounted: (_contentEl: HTMLElement, _modalsEl: HTMLElement) => boolean;
+};
+/**
+ * 共享数据key
+ */
+export declare const LAYOUT_KEY: InjectionKey<LayoutProvide>;

package/es/ele-admin-layout/props.js

@@ -0,0 +1,169 @@
+const adminLayoutProps = {
+  /** 高度 */
+  height: {
+    type: [String, Number],
+    default: "100%"
+  },
+  /** 顶栏菜单数据 */
+  headerMenus: Array,
+  /** 顶栏菜单选中 */
+  headerActive: String,
+  /** 侧栏菜单数据 */
+  sidebarMenus: Array,
+  /** 侧栏菜单选中 */
+  sidebarActive: String,
+  /** 双侧栏一级菜单数据 */
+  sideboxMenus: Array,
+  /** 双侧栏一级菜单选中 */
+  sideboxActive: String,
+  /** 页签数据 */
+  tabs: Array,
+  /** 页签选中 */
+  tabActive: String,
+  /** 面包屑导航数据 */
+  levels: Array,
+  /** 是否折叠侧栏 */
+  collapse: Boolean,
+  /** 双侧栏一级是否紧凑风格 */
+  compact: Boolean,
+  /** 内容区是否最大化 */
+  maximized: [Boolean, String],
+  /** 是否需要页签栏 */
+  tabBar: [Boolean, String],
+  /** 是否需要面包屑导航 */
+  breadcrumb: [Boolean, Object],
+  /** 是否需要返回顶部 */
+  backTop: [Boolean, Object],
+  /** 顶栏菜单属性 */
+  headerMenuProps: Object,
+  /** 侧栏菜单属性 */
+  sidebarMenuProps: Object,
+  /** 双侧栏一级菜单属性 */
+  sideboxMenuProps: Object,
+  /** 布局类型 */
+  layout: String,
+  /** 侧栏布局类型 */
+  sidebarLayout: String,
+  /** 顶栏风格 */
+  headerStyle: String,
+  /** 侧栏风格 */
+  sidebarStyle: String,
+  /** 页签风格 */
+  tabStyle: {
+    type: String,
+    default: "simple"
+  },
+  /** 是否固定顶栏 */
+  fixedHeader: Boolean,
+  /** 是否固定侧栏 */
+  fixedSidebar: Boolean,
+  /** 是否固定内容区 */
+  fixedBody: Boolean,
+  /** logo是否置于顶栏 */
+  logoInHeader: Boolean,
+  /** 是否需要固定的主页页签 */
+  fixedHome: Boolean,
+  /** 主页路由地址 */
+  homePath: String,
+  /** 是否选中固定的主页页签 */
+  isHome: Boolean,
+  /** 是否支持页签右键菜单 */
+  tabContextMenu: [Boolean, Object],
+  /** 页签右键菜单数据 */
+  tabContextMenus: [Array, Function],
+  /** 是否支持页签拖动排序 */
+  tabSortable: Boolean,
+  /** 顶栏菜单标题插槽名称 */
+  headerTitleSlot: {
+    type: String,
+    default: "title"
+  },
+  /** 顶栏菜单图标插槽名称 */
+  headerIconSlot: {
+    type: String,
+    default: "icon"
+  },
+  /** 侧栏菜单标题插槽名称 */
+  sidebarTitleSlot: {
+    type: String,
+    default: "title"
+  },
+  /** 侧栏菜单图标插槽名称 */
+  sidebarIconSlot: {
+    type: String,
+    default: "icon"
+  },
+  /** 双侧栏一级菜单标题插槽名称 */
+  sideboxTitleSlot: {
+    type: String,
+    default: "title"
+  },
+  /** 双侧栏一级菜单图标插槽名称 */
+  sideboxIconSlot: {
+    type: String,
+    default: "icon"
+  },
+  /** 顶栏样式 */
+  headerCustomStyle: Object,
+  /** 侧栏样式 */
+  sidebarCustomStyle: Object,
+  /** 双侧栏一级样式 */
+  sideboxCustomStyle: Object,
+  /** 页签栏样式 */
+  tabsCustomStyle: Object,
+  /** 内容区样式 */
+  contentCustomStyle: Object,
+  /** logo样式 */
+  logoStyle: Object,
+  /** logo文字样式 */
+  logoTitleStyle: Object,
+  /** 顶栏菜单样式 */
+  headerMenusStyle: Object,
+  /** 侧栏菜单样式 */
+  sidebarMenusStyle: Object,
+  /** 双侧栏一级菜单样式 */
+  sideboxMenusStyle: Object,
+  /** logo图片地址 */
+  logoSrc: String,
+  /** logo文字 */
+  logoTitle: String,
+  /** 菜单是否自动滚动到选中位置 */
+  menuScrollToActive: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否是移动端风格 */
+  mobile: Boolean
+};
+const adminLayoutEmits = {
+  "update:collapse": (_collapse) => true,
+  logoClick: (_e) => true,
+  headMenuOpen: (_index, _indexPath) => true,
+  headMenuClose: (_index, _indexPath) => true,
+  headMenuItemClick: (_item, _e) => true,
+  headMenuItemMouseenter: (_item, _e) => true,
+  headMenuItemMouseleave: (_item, _e) => true,
+  headMouseenter: (_e) => true,
+  headMouseleave: (_e) => true,
+  boxMenuItemClick: (_item, _e) => true,
+  boxMenuItemMouseenter: (_item, _e) => true,
+  boxMenuItemMouseleave: (_item, _e) => true,
+  boxMouseenter: (_e) => true,
+  boxMouseleave: (_e) => true,
+  sideMenuOpen: (_index, _indexPath) => true,
+  sideMenuClose: (_index, _indexPath) => true,
+  sideMenuItemClick: (_item, _e) => true,
+  sideMouseenter: (_e) => true,
+  sideMouseleave: (_e) => true,
+  tabClick: (_option) => true,
+  tabRemove: (_name) => true,
+  tabContextMenu: (_option) => true,
+  tabSortChange: (_data) => true,
+  contentMounted: (_contentEl, _modalsEl) => true
+};
+const LAYOUT_KEY = Symbol("layout");
+export {
+  LAYOUT_KEY,
+  adminLayoutEmits,
+  adminLayoutProps
+};

package/es/ele-admin-layout/style/css-var.scss

@@ -0,0 +1,14 @@
+@use '../../style/util.scss' as *;
+
+/* 布局主题变量 */
+@mixin set-layout-var($var) {
+  .ele-admin-layout {
+    @include set-ele-var('layout', $var);
+    @include set-ele-var('logo', $var);
+    @include set-ele-var('header', $var);
+    @include set-ele-var('sidebar', $var);
+    @include set-ele-var('sidebox', $var);
+    @include set-ele-var('menu-thumb', $var);
+    @include set-ele-var('menu-dark-thumb', $var);
+  }
+}

package/es/ele-admin-layout/style/header.scss

@@ -0,0 +1,192 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+/* 顶栏 */
+.ele-admin-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  height: eleVar('header', 'height');
+  line-height: eleVar('header', 'height');
+  background: eleVar('header', 'bg');
+  box-shadow: eleVar('header', 'shadow');
+  z-index: calc(#{eleVar('layout', 'index')} + 2);
+  transition: all $transition-base;
+
+  /* 顶栏面包屑导航 */
+  .ele-admin-breadcrumb {
+    $tool-padding: eleVar('header', 'tool-padding');
+    margin-left: calc(#{eleVar('header', 'tools-padding')} + #{$tool-padding});
+    flex-shrink: 0;
+  }
+
+  /* 顶栏菜单 */
+  .ele-admin-menus {
+    flex: 1;
+    overflow: hidden;
+
+    & > .ele-menu {
+      $menu-height: eleVar('header', 'menu-height');
+      #{eleVarName('menu-horizontal', 'height')}: #{$menu-height};
+      padding-top: 0;
+      padding-bottom: 0;
+      background: none;
+      border: none;
+    }
+  }
+
+  /* 顶栏页签栏 */
+  & > .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};
+  }
+
+  /* 顶栏与页签栏分割线 */
+  &.show-divider {
+    box-shadow: 0 -0.8px 0 eleVar('header', 'line-color') inset;
+  }
+
+  /* 模糊透明顶栏 */
+  &.is-ghost {
+    background: eleVar('header', 'ghost-bg');
+    backdrop-filter: eleVar('header', 'ghost-filter');
+  }
+
+  /* 固定顶栏 */
+  &.is-fixed {
+    position: sticky;
+    top: 0;
+  }
+}
+
+/* 顶栏操作按钮容器 */
+.ele-admin-tools {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 eleVar('header', 'tools-padding');
+  box-sizing: border-box;
+  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-header.is-dark,
+.ele-admin-header.is-primary {
+  color: eleVar('header', 'dark-color');
+  background: eleVar('header', 'dark-bg');
+  box-shadow: eleVar('header', 'dark-shadow');
+
+  /* 暗色顶栏面包屑 */
+  .ele-breadcrumb .el-breadcrumb__item {
+    .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('header', '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 {
+    $active-bg: eleVar('header', 'primary-active-bg');
+    #{eleVarName('menu-horizontal', 'dark-active-bg')}: #{$active-bg};
+  }
+}