y-admin-pro 0.0.1

package/packages/ele-admin-layout/props.ts

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

package/packages/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/packages/ele-admin-layout/style/header.scss

@@ -0,0 +1,207 @@
+@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: eleVar('header', 'primary-bg');
+  box-shadow: eleVar('header', 'primary-shadow');
+
+  /* 主色顶栏菜单 */
+  .ele-admin-menus > .ele-menu {
+    $active-bg: eleVar('header', 'primary-active-bg');
+    #{eleVarName('menu-horizontal', 'dark-active-bg')}: #{$active-bg};
+  }
+
+  /* 主色顶栏页签拖动 */
+  & > .ele-admin-tabs .ele-tabs.is-sortable {
+    & > .el-tabs__header .el-tabs__item.sortable-chosen:not(.is-active) {
+      #{eleVarName('tab', 'simple-active-bg')}: eleVar(
+        'tab',
+        'simple-hover-bg'
+      );
+      #{eleVarName('tab', 'button-active-bg')}: eleVar(
+        'tab',
+        'button-hover-bg'
+      );
+    }
+  }
+}