ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,159 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuItem, TabItem, Layout, SidebarLayout, HeaderStyle, SidebarStyle, TabStyle, MenuI18n, TabItemEventOption, BodySizeChangeOption } from './types';
+/**
+ * 属性
+ */
+export declare const proLayoutProps: {
+    menus: PropType<MenuItem[] | null>;
+    tabs: PropType<TabItem[] | null>;
+    collapse: BooleanConstructor;
+    compact: BooleanConstructor;
+    maximized: BooleanConstructor;
+    tabBar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    breadcrumb: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    breadcrumbSeparator: {
+        type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>))[], unknown, unknown> | undefined>;
+        default: string;
+    };
+    backTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backTopVisibilityHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    backTopRight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    backTopBottom: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    menuTrigger: {
+        type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "hover" | "click", unknown>>;
+        default: string;
+    };
+    layout: {
+        type: PropType<Layout>;
+        default: string;
+    };
+    sidebarLayout: {
+        type: PropType<SidebarLayout>;
+        default: string;
+    };
+    headerStyle: {
+        type: PropType<HeaderStyle>;
+        default: string;
+    };
+    sidebarStyle: {
+        type: PropType<SidebarStyle>;
+        default: string;
+    };
+    tabStyle: {
+        type: PropType<TabStyle>;
+        default: string;
+    };
+    fixedHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fixedSidebar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fixedBody: BooleanConstructor;
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    logoInHeader: BooleanConstructor;
+    colorfulIcon: BooleanConstructor;
+    uniqueOpened: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expanded: BooleanConstructor;
+    compressOnEsc: BooleanConstructor;
+    fixedHome: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    homePath: StringConstructor;
+    redirectPath: {
+        type: StringConstructor;
+        default: string;
+    };
+    hideFooters: PropType<string[]>;
+    hideSidebars: PropType<string[]>;
+    hideSideboxs: PropType<string[]>;
+    repeatableTabs: PropType<string[]>;
+    locale: StringConstructor;
+    i18n: PropType<MenuI18n>;
+    sidebarOpeneds: PropType<string[]>;
+    tabContextMenu: BooleanConstructor;
+    tabSortable: BooleanConstructor;
+    autoScrollTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    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;
+    };
+    tooltipEffect: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "light" | "dark", unknown>>;
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export type ProLayoutProps = ExtractPropTypes<typeof proLayoutProps>;
+/**
+ * 事件
+ */
+export declare const proLayoutEmits: {
+    'update:collapse': (_collapse: boolean) => boolean;
+    'update:maximized': (_val: boolean) => boolean;
+    tabAdd: (_data: TabItem) => boolean;
+    tabClick: (_option: TabItemEventOption) => boolean;
+    tabRemove: (_option: TabItemEventOption) => boolean;
+    tabContextMenu: (_option: TabItemEventOption) => boolean;
+    tabSortChange: (_data: TabItem[]) => boolean;
+    logoClick: (_isHome: boolean) => boolean;
+    sideMenuOpen: (_index: string, _indexPath: string[]) => boolean;
+    sideMenuClose: (_index: string, _indexPath: string[]) => boolean;
+    headMenuOpen: (_index: string, _indexPath: string[]) => boolean;
+    headMenuClose: (_index: string, _indexPath: string[]) => boolean;
+    bodySizeChange: (_option: BodySizeChangeOption) => boolean;
+};

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

@@ -0,0 +1,203 @@
+const proLayoutProps = {
+  // 菜单数据
+  menus: Array,
+  // 页签数据
+  tabs: Array,
+  // 是否折叠侧栏
+  collapse: Boolean,
+  // 侧栏一级是否紧凑风格
+  compact: Boolean,
+  // 内容区是否最大化
+  maximized: Boolean,
+  // 是否需要页签栏
+  tabBar: {
+    type: Boolean,
+    default: true
+  },
+  // 是否需要面包屑导航
+  breadcrumb: {
+    type: Boolean,
+    default: true
+  },
+  // 面包屑导航分隔符
+  breadcrumbSeparator: {
+    type: [String, Object],
+    default: "/"
+  },
+  // 是否需要返回顶部
+  backTop: {
+    type: Boolean,
+    default: true
+  },
+  // 返回顶部可见的滚动高度
+  backTopVisibilityHeight: {
+    type: Number,
+    default: 200
+  },
+  // 返回顶部的右边距
+  backTopRight: {
+    type: Number,
+    default: 30
+  },
+  // 返回顶部的下边距
+  backTopBottom: {
+    type: Number,
+    default: 60
+  },
+  // 顶栏菜单是否省略多余的子项
+  ellipsis: {
+    type: Boolean,
+    default: true
+  },
+  // 顶栏子菜单触发方式
+  menuTrigger: {
+    type: String,
+    default: "hover"
+  },
+  // 布局类型
+  layout: {
+    type: String,
+    default: "side"
+  },
+  // 侧栏布局类型
+  sidebarLayout: {
+    type: String,
+    default: "default"
+  },
+  // 顶栏风格
+  headerStyle: {
+    type: String,
+    default: "light"
+  },
+  // 侧栏风格
+  sidebarStyle: {
+    type: String,
+    default: "dark"
+  },
+  // 页签风格
+  tabStyle: {
+    type: String,
+    default: "simple"
+  },
+  // 是否固定顶栏
+  fixedHeader: {
+    type: Boolean,
+    default: false
+  },
+  // 是否固定侧栏
+  fixedSidebar: {
+    type: Boolean,
+    default: true
+  },
+  // 是否固定内容区
+  fixedBody: Boolean,
+  // 内容区是否撑满
+  fluid: {
+    type: Boolean,
+    default: true
+  },
+  // 图标是否置于顶栏
+  logoInHeader: Boolean,
+  // 侧栏菜单是否彩色图标
+  colorfulIcon: Boolean,
+  // 侧栏是否只保持一个子菜单展开
+  uniqueOpened: {
+    type: Boolean,
+    default: true
+  },
+  // 内容区最大时不带页签栏
+  expanded: Boolean,
+  // 返回键退出内容区最大化
+  compressOnEsc: Boolean,
+  // 是否需要固定的主页页签
+  fixedHome: {
+    type: Boolean,
+    default: true
+  },
+  // 主页路由地址
+  homePath: String,
+  // 刷新路由地址
+  redirectPath: {
+    type: String,
+    default: "/redirect"
+  },
+  // 不显示页脚的路由
+  hideFooters: Array,
+  // 不显示侧栏的路由
+  hideSidebars: Array,
+  // 不显示双侧栏的路由
+  hideSideboxs: Array,
+  // 同路由不同参数可重复打开页签的路由地址
+  repeatableTabs: Array,
+  // 国际化语言
+  locale: String,
+  // 菜单标题国际化方法
+  i18n: Function,
+  // 侧栏默认展开的菜单
+  sidebarOpeneds: Array,
+  // 是否支持页签右键菜单
+  tabContextMenu: Boolean,
+  // 是否支持
+  tabSortable: Boolean,
+  // 固定主体时切换路由自动滚到顶部
+  autoScrollTop: {
+    type: Boolean,
+    default: true
+  },
+  // 顶栏菜单标题插槽名称
+  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"
+  },
+  // 菜单 tooltip 主题
+  tooltipEffect: String,
+  // 是否开启响应式
+  responsive: {
+    type: Boolean,
+    default: true
+  }
+};
+const proLayoutEmits = {
+  "update:collapse": (_collapse) => true,
+  "update:maximized": (_val) => true,
+  tabAdd: (_data) => true,
+  tabClick: (_option) => true,
+  tabRemove: (_option) => true,
+  tabContextMenu: (_option) => true,
+  tabSortChange: (_data) => true,
+  logoClick: (_isHome) => true,
+  sideMenuOpen: (_index, _indexPath) => true,
+  sideMenuClose: (_index, _indexPath) => true,
+  headMenuOpen: (_index, _indexPath) => true,
+  headMenuClose: (_index, _indexPath) => true,
+  bodySizeChange: (_option) => true
+};
+export {
+  proLayoutEmits,
+  proLayoutProps
+};

package/es/ele-pro-layout/style/collapse.scss

@@ -0,0 +1,67 @@
+@use '../../style/themes/default.scss' as *;
+
+/* 折叠侧栏 */
+.ele-admin-collapse {
+  .ele-admin-logo > img + div {
+    display: none;
+  }
+
+  &:not(.ele-admin-mix-sidebar) {
+    .ele-admin-logo,
+    .ele-admin-sidebar {
+      width: eleVar('sidebar', 'collapse-width');
+    }
+  }
+
+  &.ele-admin-mix-sidebar .ele-admin-sidebox {
+    box-shadow: eleVar('sidebar', 'shadow');
+
+    & + .ele-admin-sidebar {
+      width: 0;
+    }
+  }
+}
+
+/* 折叠一级侧栏 */
+.ele-admin-compact.ele-admin-mix-sidebar {
+  .ele-admin-logo {
+    width: eleVar('sidebar', 'collapse-width');
+  }
+
+  .ele-admin-sidebox {
+    width: eleVar('sidebar', 'collapse-width');
+
+    & > .ele-admin-menus {
+      padding: eleVar('sidebox', 'collapse-padding');
+
+      & > .el-menu {
+        & > .el-menu-item,
+        & > .el-sub-menu > .el-sub-menu__title {
+          padding: eleVar('sidebox', 'collapse-item-padding') !important;
+          margin: calc(#{eleVar('sidebox', 'collapse-item-margin')} / 2) 0;
+
+          & > span {
+            display: none;
+          }
+        }
+
+        & > .el-menu-item:not(:last-child) {
+          margin-bottom: eleVar('sidebox', 'collapse-item-margin');
+        }
+
+        & > .el-menu-item .el-badge,
+        & > .el-sub-menu > .el-sub-menu__title .el-badge {
+          .el-badge__content:not(.is-dot) {
+            padding: 0;
+            width: 8px;
+            height: 8px;
+            font-size: 0;
+            line-height: 0;
+            min-width: auto;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+@use '../../style/themes/default.scss' as *;
+
+@mixin set-layout-var($var) {
+  .ele-admin-layout {
+    @include set-ele-var('layout', $var);
+  }
+
+  .ele-admin-header,
+  .ele-admin-sidebar,
+  .ele-admin-sidebox,
+  .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-logo {
+    @include set-ele-var('logo', $var);
+  }
+
+  .ele-admin-header,
+  .ele-admin-sidebar,
+  .ele-admin-sidebox,
+  .ele-admin-mask {
+    @include set-ele-var('sidebar', $var);
+  }
+
+  .ele-admin-header,
+  .ele-admin-sidebox,
+  .ele-admin-sidebox-popup {
+    @include set-ele-var('sidebox', $var);
+  }
+}

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

@@ -0,0 +1,87 @@
+@use '../../style/themes/default.scss' as *;
+
+/* 顶栏 */
+.ele-admin-header {
+  display: flex;
+  align-items: center;
+  height: eleVar('header', 'height');
+  line-height: eleVar('header', 'height');
+  background: eleVar('header', 'bg');
+  box-shadow: eleVar('header', 'shadow');
+  transition: padding $ele-transition, box-shadow $ele-transition;
+  z-index: calc(#{eleVar('layout', 'index')} + 2);
+  flex-shrink: 0;
+
+  // 图标
+  .ele-admin-logo {
+    color: eleVar('logo', 'color');
+    width: eleVar('sidebar', 'width');
+    height: eleVar('header', 'height');
+    background: eleVar('sidebar', 'bg');
+    box-shadow: eleVar('logo', 'shadow');
+    transition: width $ele-transition, left $ele-transition;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > img + div {
+      margin-left: 12px;
+    }
+  }
+
+  // 面包屑
+  .ele-admin-breadcrumb {
+    flex-shrink: 0;
+  }
+
+  // 菜单
+  .ele-admin-menus {
+    flex: 1;
+    overflow: hidden;
+
+    & > .ele-menu {
+      #{elVarName('menu-item', 'height')}: eleVar('header', 'height');
+      #{elVarName('menu-item', 'lin-height')}: eleVar('header', 'height');
+      background: none;
+      border: none;
+    }
+  }
+
+  // 工具栏
+  .ele-admin-tools {
+    height: 100%;
+    flex-shrink: 0;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+}
+
+/* 操作按钮 */
+.ele-admin-tool {
+  height: 100%;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  transition: color 0.2s, background-color 0.2s;
+  cursor: pointer;
+
+  &:hover {
+    background: eleVar('sidebar', 'tool-hover-bg');
+  }
+
+  & > .el-dropdown {
+    color: inherit;
+    cursor: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    height: 100%;
+    align-items: center;
+  }
+}

package/es/ele-pro-layout/style/index.js

@@ -0,0 +1,9 @@
+import 'element-plus/es/components/backtop/style/index';
+import 'element-plus/es/components/icon/style/index';
+import '../../ele-breadcrumb/style/index';
+import '../../ele-menus/style/index';
+import '../../ele-tab-wrap/style/index';
+import '../../ele-tab-tool/style/index';
+import '../../ele-tabs/style/index';
+import '../../ele-page/style/index';
+import './index.scss';

package/es/ele-pro-layout/style/index.scss

@@ -0,0 +1,12 @@
+@use '../../style/themes/default.scss' as *;
+@use './css-var.scss' as *;
+@use './layout.scss';
+@use './header.scss';
+@use './sidebar.scss';
+@use './tabs.scss';
+@use './collapse.scss';
+@use './layout-style.scss';
+@use './layout-theme.scss';
+@use './layout-mobile.scss';
+
+@include set-layout-var($ele);

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

@@ -0,0 +1,56 @@
+@use '../../style/themes/default.scss' as *;
+
+/* 移动端 */
+.ele-admin-mobile {
+  .ele-admin-logo,
+  .ele-admin-sidebar {
+    position: fixed !important;
+    left: 0 !important;
+    width: eleVar('sidebar', 'width') !important;
+    z-index: calc(eleVar('layout', 'mask-index') + 1) !important;
+  }
+
+  .ele-admin-sidebar {
+    top: eleVar('header', 'height') !important;
+  }
+
+  .ele-admin-logo > img + div {
+    display: block !important;
+  }
+
+  .ele-admin-body,
+  .ele-admin-header {
+    padding-left: 0 !important;
+    width: 100% !important;
+  }
+
+  .ele-admin-tabs {
+    left: 0 !important;
+  }
+
+  .ele-admin-breadcrumb,
+  .ele-admin-sidebox {
+    display: none;
+  }
+
+  &:not(.ele-admin-collapse) .ele-admin-mask {
+    left: eleVar('sidebar', 'width');
+    background: elVar('overlay-color', 'lighter');
+    visibility: visible;
+  }
+
+  &.ele-admin-collapse .ele-admin-sidebar,
+  &.ele-admin-collapse .ele-admin-logo {
+    left: calc(0px - eleVar('sidebar', 'width')) !important;
+    box-shadow: none !important;
+  }
+
+  &.ele-admin-open-tab:not(.ele-admin-tab-card) .ele-admin-header {
+    box-shadow: 0 -1px 0 eleVar('header', 'line-color') inset !important;
+
+    &.is-dark,
+    &.is-primary {
+      box-shadow: eleVar('header-dark', 'shadow');
+    }
+  }
+}