y-admin-pro 0.0.1

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

@@ -0,0 +1,154 @@
+import type { PropType, ExtractPropTypes, InjectionKey } from 'vue';
+import type { EleMenusProps } from '../ele-app/plus';
+import { omit } from '../utils/common';
+import type { BreadcrumbSeparator as Separator } from '../ele-breadcrumb/types';
+import { adminLayoutProps } from '../ele-admin-layout/props';
+import type {
+  MenuItem,
+  TabItem,
+  MenuItemTrigger,
+  MenuI18n,
+  BeforeClick,
+  TabItemEventOption,
+  BodySizeChangeOption,
+  ProLayoutProvide
+} from './types';
+type TextEllipsisTooltip = EleMenusProps['textEllipsisTooltip'];
+type ProLayoutKey = InjectionKey<ProLayoutProvide>;
+
+/**
+ * 属性
+ */
+export const proLayoutProps = {
+  ...omit(adminLayoutProps, [
+    'height',
+    'headerMenus',
+    'headerActive',
+    'sidebarMenus',
+    'sidebarActive',
+    'sideboxMenus',
+    'sideboxActive',
+    'tabs',
+    'tabActive',
+    'levels',
+    'isHome',
+    'mobile'
+  ]),
+  /** 高度 */
+  height: {
+    type: [String, Number],
+    default: null
+  },
+  /** 菜单数据 */
+  menus: Array as PropType<MenuItem[] | null>,
+  /** 页签数据 */
+  tabs: Array as PropType<TabItem[] | null>,
+  /** 刷新路由地址 */
+  redirectPath: {
+    type: String,
+    default: '/redirect'
+  },
+  /** 内容区是否撑满 */
+  fluid: {
+    type: Boolean,
+    default: true
+  },
+  /** 返回键退出内容区最大化 */
+  compressOnEsc: Boolean,
+  /** 固定主体时切换路由自动滚到顶部 */
+  autoScrollTop: {
+    type: Boolean,
+    default: true
+  },
+  /** 顶栏菜单触发模式 */
+  navTrigger: String as PropType<MenuItemTrigger>,
+  /** 双侧栏一级菜单触发模式 */
+  boxTrigger: String as PropType<MenuItemTrigger>,
+  /** 侧栏菜单触发模式 */
+  itemTrigger: String as PropType<MenuItemTrigger>,
+  /** hover模式的菜单切换超时 */
+  menuHoverTimeout: {
+    type: Number,
+    default: 600
+  },
+  /** 菜单点击事件前钩子 */
+  beforeClick: Function as PropType<BeforeClick>,
+  /** 是否支持内嵌缓存 */
+  keepAlive: Boolean,
+  /** 内嵌切换动画 */
+  transitionName: String,
+  /** 内嵌进入动画延迟时间 */
+  transitionDelay: {
+    type: Number,
+    default: 250
+  },
+  /** 是否开启响应式 */
+  responsive: {
+    type: Boolean,
+    default: true
+  },
+  /** 国际化语言 */
+  locale: String,
+  /** 菜单标题国际化方法 */
+  i18n: Function as PropType<MenuI18n>,
+  /** 顶栏菜单是否省略多余的子项 */
+  ellipsis: {
+    type: Boolean,
+    default: true
+  },
+  /** 顶栏菜单省略项的属性 */
+  ellipsisProps: Object as PropType<EleMenusProps['ellipsisProps']>,
+  /** 顶栏子菜单触发方式 */
+  menuTrigger: String as PropType<EleMenusProps['menuTrigger']>,
+  /** 侧栏默认展开的菜单 */
+  sidebarOpeneds: Array as PropType<string[]>,
+  /** 侧栏是否只保持一个子菜单展开 */
+  uniqueOpened: {
+    type: Boolean,
+    default: true
+  },
+  /** 侧栏菜单是否彩色图标 */
+  colorfulIcon: Boolean,
+  /** 菜单 tooltip 主题 */
+  tooltipEffect: String as PropType<EleMenusProps['popperEffect']>,
+  /** 是否开启菜单文本溢出提示 */
+  menuTextEllipsisTooltip: [Boolean, Object] as PropType<TextEllipsisTooltip>,
+  /** 内容区最大时不带页签栏 */
+  expanded: Boolean,
+  /** 面包屑导航分隔符 */
+  breadcrumbSeparator: [String, Object, Function] as PropType<Separator>,
+  /** 返回顶部可见的滚动高度 */
+  backTopVisibilityHeight: Number,
+  /** 返回顶部的右边距 */
+  backTopRight: Number,
+  /** 返回顶部的下边距 */
+  backTopBottom: Number,
+  /** 返回顶部的目标选择器 */
+  backTopTarget: String
+};
+
+export type ProLayoutProps = ExtractPropTypes<typeof proLayoutProps>;
+
+/**
+ * 事件
+ */
+export const proLayoutEmits = {
+  'update:collapse': (_collapse: boolean) => true,
+  'update:maximized': (_maximized: boolean) => true,
+  tabAdd: (_data: TabItem) => true,
+  tabClick: (_option: TabItemEventOption) => true,
+  tabRemove: (_option: TabItemEventOption) => true,
+  tabContextMenu: (_option: TabItemEventOption) => true,
+  tabSortChange: (_data: TabItem[]) => true,
+  logoClick: (_isHome: boolean, _e: MouseEvent) => true,
+  headMenuOpen: (_index: string, _indexPath: string[]) => true,
+  headMenuClose: (_index: string, _indexPath: string[]) => true,
+  sideMenuOpen: (_index: string, _indexPath: string[]) => true,
+  sideMenuClose: (_index: string, _indexPath: string[]) => true,
+  bodySizeChange: (_option: BodySizeChangeOption) => true
+};
+
+/**
+ * 共享数据key
+ */
+export const PRO_LAYOUT_KEY = Symbol('proLayout') as ProLayoutKey;

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

@@ -0,0 +1,41 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-pro-layout {
+  /* logo */
+  & > .ele-admin-side {
+    & > .ele-admin-sidebox > .ele-admin-logo > img + h1 {
+      display: none;
+    }
+  }
+
+  /* 面包屑导航 */
+  &.is-mobile > .ele-admin-main > .ele-admin-header > .ele-admin-breadcrumb {
+    display: none;
+  }
+}
+
+/* iframe */
+.ele-admin-iframe-wrap {
+  flex-shrink: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.ele-admin-iframe {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  box-sizing: border-box;
+  pointer-events: auto;
+}

package/packages/ele-pro-layout/style/index.ts

@@ -0,0 +1,2 @@
+import '../../ele-admin-layout/style/index';
+import './index.scss';

package/packages/ele-pro-layout/types.ts

@@ -0,0 +1,221 @@
+import type { EleMenuItemProps } from '../ele-app/plus';
+export type {
+  Layout,
+  SidebarLayout,
+  HeaderStyle,
+  SidebarStyle,
+  TabStyle,
+  TabBar
+} from '../ele-admin-layout/types';
+
+/**
+ * 菜单元数据
+ */
+export interface MenuMeta extends Record<string, any> {
+  /** 菜单标题 */
+  title?: string;
+  /** 菜单图标 */
+  icon?: any;
+  /** 菜单是否隐藏 */
+  hide?: boolean;
+  /** 选中其它菜单 */
+  active?: string;
+  /** 是否隐藏页脚 */
+  hideFooter?: boolean;
+  /** 是否隐藏顶栏 */
+  hideHeader?: boolean;
+  /** 是否隐藏侧栏 */
+  hideSidebar?: boolean;
+  /** 是否隐藏双侧栏一级 */
+  hideSidebox?: boolean;
+  /** 是否隐藏页签栏 */
+  hideTabs?: boolean;
+  /** 页签是否可关闭 */
+  closable?: boolean;
+  /** 页签不同参数是否合并 */
+  tabUnique?: boolean;
+  /** 页签是否缓存 */
+  keepAlive?: boolean;
+  /** 是否在面包屑中显示 */
+  breadcrumb?: boolean;
+  /** 菜单组件其它属性 */
+  props?: Record<string, any>;
+  /** 是否需要外层布局 */
+  layout?: boolean;
+  /** 路由地址 */
+  routePath?: string;
+  /** 内嵌地址, 内部属性 */
+  iframe?: string;
+}
+
+/**
+ * 菜单数据
+ */
+export interface MenuItem {
+  /** 路由名称 */
+  name?: string;
+  /** 菜单地址 */
+  path: string;
+  /** 路由组件 */
+  component?: string;
+  /** 路由重定向 */
+  redirect?: string;
+  /** 路由元数据 */
+  meta?: MenuMeta;
+  /** 子路由 */
+  children?: Array<MenuItem>;
+  /** 临时子路由数据, 内部属性 */
+  tempChildren?: Array<MenuItem>;
+}
+
+/**
+ * 页签数据
+ */
+export interface TabItem {
+  /** 页签标题 */
+  title?: string;
+  /** 页签标识 */
+  key?: string;
+  /** 路由地址 */
+  path?: string;
+  /** 路由完整地址 */
+  fullPath?: string;
+  /** 是否可关闭 */
+  closable?: boolean;
+  /** 是否是主页 */
+  home?: boolean;
+  /** 组件名称 */
+  components?: string[];
+  /** 是否为刷新状态 */
+  refresh?: boolean;
+  /** 路由元数据 */
+  meta?: MenuMeta;
+}
+
+/**
+ * 面包屑导航数据
+ */
+export interface LevelItem {
+  /** 标题 */
+  title: string;
+  /** 地址 */
+  path: string;
+}
+
+/**
+ * 菜单标题国际化方法参数
+ */
+export interface MenuI18nOption {
+  /** 当前语言 */
+  locale?: string;
+  /** 菜单地址 */
+  path: string;
+  /** 菜单数据 */
+  menu?: MenuItem;
+  /** 页签数据 */
+  tab?: TabItem;
+  /** 面包屑数据 */
+  level?: LevelItem;
+}
+
+/**
+ * 菜单标题国际化方法
+ */
+export type MenuI18n = (
+  option: MenuI18nOption
+) => string | undefined | null | void;
+
+/**
+ * 页签事件参数
+ */
+export interface TabItemEventOption {
+  /** 页签标识 */
+  key?: string;
+  /** 页签数据 */
+  item?: TabItem;
+  /** 当前选中页签的标识 */
+  active?: string;
+  /** 事件标识 */
+  command?: string;
+}
+
+/**
+ * 获取路由对应菜单的结果
+ */
+export interface MatchedResult {
+  /** 选中地址 */
+  active: string;
+  /** 菜单标题 */
+  title?: string;
+  /** 匹配的菜单数据 */
+  matched?: MenuItem[];
+  /** 是否选中非本身 */
+  activeOther?: boolean;
+}
+
+/**
+ * 内容区尺寸改变事件参数
+ */
+export interface BodySizeChangeOption {
+  /** 内容区宽度 */
+  width?: number;
+  /** 内容区高度 */
+  height?: number;
+  /** 是否是移动端小屏幕 */
+  mobile?: boolean;
+}
+
+/**
+ * 混合导航菜单切换模式
+ */
+export type MenuItemTrigger = 'route' | 'click' | 'hover';
+
+/**
+ * 子菜单项点击前钩子
+ */
+export type BeforeClick = (item: EleMenuItemProps, e: MouseEvent) => boolean;
+
+/**
+ * 内嵌数据
+ */
+export interface IframeItem {
+  /** id */
+  id: string;
+  /** 地址 */
+  src: string;
+  /** 是否是刷新状态 */
+  refresh?: boolean;
+}
+
+/**
+ * 状态数据
+ */
+export interface LayoutState {
+  navActive?: string;
+  sideActive?: string;
+  boxActive?: string;
+  navData: MenuItem[];
+  sideData: MenuItem[];
+  boxData: MenuItem[];
+  isHover?: boolean;
+  contentWidth?: number;
+  contentHeight?: number;
+}
+
+/**
+ * 共享数据
+ */
+export interface ProLayoutProvide {
+  /** 是否支持内嵌缓存 */
+  keepAlive?: boolean;
+  /** 是否开启响应式 */
+  responsive?: boolean;
+}
+
+/**
+ * 带响应式开关的组件属性
+ */
+export interface ResponsiveProps extends Record<keyof any, any> {
+  /** 是否开启响应式 */
+  responsive?: boolean;
+}

package/packages/ele-pro-layout/util.ts

@@ -0,0 +1,277 @@
+import { inject, computed } from 'vue';
+import type {
+  RouteLocationNormalizedLoaded,
+  RouteLocationMatched
+} from 'vue-router';
+import type { EleMenuItemProps } from '../ele-app/plus';
+import { findTree, mapTree, omit } from '../utils/common';
+import type { LayoutProvide } from '../ele-admin-layout/types';
+import { LAYOUT_KEY } from '../ele-admin-layout/props';
+import { PRO_LAYOUT_KEY } from './props';
+import type {
+  MenuItem,
+  TabItem,
+  LevelItem,
+  MatchedResult,
+  ProLayoutProvide,
+  ResponsiveProps
+} from './types';
+
+/**
+ * 根据菜单地址获取菜单
+ * @param path 菜单地址
+ * @param menus 菜单数据
+ */
+export function findMenuByPath(path?: string, menus?: MenuItem[]) {
+  return path == null ? void 0 : findTree(menus, (d) => path === d.path);
+}
+
+/**
+ * 根据路由地址获取页签
+ * @param path 路由地址
+ * @param tabs 页签数据
+ */
+export function findTabByPath(path?: string, tabs?: TabItem[] | null) {
+  if (path != null && tabs != null) {
+    return tabs.find((d) => path === d.key || path === d.fullPath);
+  }
+}
+
+/**
+ * 根据页签标识获取页签
+ * @param key 页签标识
+ * @param tabs 页签数据
+ */
+export function findTabByKey(key?: string, tabs?: TabItem[] | null) {
+  if (key != null && tabs != null) {
+    return tabs.find((d) => key === d.key);
+  }
+}
+
+/**
+ * 根据菜单地址获取菜单及所有父级
+ * @param path 菜单地址
+ * @param menus 菜单数据
+ */
+export function getMatchedMenus(
+  path: string,
+  menus: MenuItem[],
+  parents?: MenuItem[]
+): MenuItem[] | undefined {
+  for (const m of menus) {
+    const p = parents ? [...parents, m] : [m];
+    if (m.path === path) {
+      return p;
+    } else if (m.children?.length) {
+      const result = getMatchedMenus(path, m.children, p);
+      if (result) {
+        return result;
+      }
+    }
+  }
+}
+
+/**
+ * 获取路由匹配的菜单数据
+ * @param route 路由信息
+ * @param menus 菜单数据
+ */
+export function getRouteMatched(
+  route: RouteLocationNormalizedLoaded,
+  menus: MenuItem[]
+): MatchedResult {
+  const { path, fullPath, meta } = route;
+  if (meta?.active) {
+    const m = findMenuByPath(fullPath, menus) ?? findMenuByPath(path, menus);
+    return {
+      active: meta.active as string,
+      activeOther: true,
+      title: m?.meta?.title ?? (meta.title as string),
+      matched: getMatchedMenus(meta.active as string, menus)
+    };
+  }
+  const fm = findMenuByPath(fullPath, menus);
+  if (fm) {
+    return {
+      active: fullPath,
+      title: fm.meta?.title ?? (meta.title as string),
+      matched: getMatchedMenus(fullPath, menus)
+    };
+  }
+  const m = findMenuByPath(path, menus);
+  return {
+    active: path,
+    title: m?.meta?.title ?? (meta.title as string),
+    matched: getMatchedMenus(path, menus)
+  };
+}
+
+/**
+ * 获取面包屑导航数据
+ * @param matched 匹配的菜单数据
+ * @param activeOther 是否选中非本身
+ * @param route 路由信息
+ * @param menus 菜单数据
+ * @param tabs 页签数据
+ */
+export function getMatchedLevels(
+  matched: MenuItem[] | undefined,
+  activeOther: boolean | undefined,
+  route: RouteLocationNormalizedLoaded,
+  menus: MenuItem[],
+  tabs: TabItem[]
+): LevelItem[] {
+  const levels: LevelItem[] = [];
+  if (matched) {
+    matched.forEach((m) => {
+      if (m.meta && m.meta.title && m.meta.breadcrumb !== false) {
+        const title = findTabByPath(m.path, tabs)?.title || m.meta.title;
+        levels.push({ path: m.path, title });
+      }
+    });
+  }
+  if (activeOther) {
+    const { path, fullPath, meta } = route;
+    const notIn = !levels.length || fullPath !== levels[levels.length - 1].path;
+    if (notIn && meta.title) {
+      const m = findMenuByPath(fullPath, menus) ?? findMenuByPath(path, menus);
+      const t = findTabByPath(fullPath, tabs) ?? findTabByPath(path, tabs);
+      const title = t?.title || m?.meta?.title || (meta.title as string);
+      levels.push({ path: fullPath, title });
+    }
+  }
+  return levels;
+}
+
+/**
+ * 获取路由对应的组件名称
+ * @param matched 路由匹配数据
+ */
+export function getMatchedComponents(matched: RouteLocationMatched[]) {
+  const components: string[] = [];
+  matched.forEach((m) => {
+    if (m.components?.default?.name) {
+      components.push(m.components.default.name);
+    }
+  });
+  return components;
+}
+
+/**
+ * 返回路由对应的页签数据
+ * @param route 路由信息
+ * @param tabs 当前页签数据
+ * @param homePath 主页地址
+ * @param routeTitle 路由对应的标题
+ */
+export function getRouteTab(
+  route: RouteLocationNormalizedLoaded,
+  tabs: TabItem[],
+  homePath: string | undefined,
+  routeTitle?: string
+): TabItem {
+  const { path, fullPath, meta, matched } = route;
+  const key = meta.tabUnique === false ? fullPath : path;
+  const t = findTabByPath(key, tabs);
+  // 标题
+  const title = t?.title || routeTitle;
+  // 是否是主页
+  const home = path === homePath || fullPath === homePath;
+  // 是否可关闭
+  const closable = t?.closable ?? meta.closable !== false;
+  // 路由对应的组件名
+  const components = getMatchedComponents(matched);
+  return { key, path, fullPath, title, closable, home, components, meta };
+}
+
+/**
+ * 获取选中菜单的子级
+ * @param menus 菜单数据
+ * @param active 选中地址
+ * @param childrenName 子级字段名称
+ */
+export function getActiveChilds(
+  menus: MenuItem[],
+  active?: string,
+  childrenName?: string
+): MenuItem[] {
+  const field = childrenName || 'children';
+  if (!menus.length) {
+    return [];
+  }
+  if (!active) {
+    return menus[0][field] || [];
+  }
+  const m = menus.find((m) => m.path === active);
+  if (m == null) {
+    return menus[0][field] || [];
+  }
+  return m[field] || [];
+}
+
+/**
+ * 拼接内嵌地址
+ * @param routePath 路由地址含参数
+ * @param iframeUrl 内嵌地址
+ */
+export function getIframeSrc(routePath?: string, iframeUrl?: string) {
+  const [_path1, query1 = ''] = (routePath ?? '').split('?');
+  const [path2, query2 = ''] = (iframeUrl ?? '').split('?');
+  const params1 = new URLSearchParams(query1);
+  const params2 = new URLSearchParams(query2);
+  // @ts-ignore
+  for (const [key, value] of params2.entries()) {
+    params1.append(key, value);
+  }
+  const newQuery = params1.toString();
+  return `${path2}${newQuery ? `?${newQuery}` : ''}`;
+}
+
+/**
+ * 菜单数据转换
+ * @param menus 菜单数据
+ * @param link 是否使用超链接
+ */
+export function getMenuItems(
+  menus: MenuItem[],
+  link: boolean
+): EleMenuItemProps[] {
+  return mapTree<MenuItem, EleMenuItemProps>(menus, (m) => {
+    const { path, meta } = m;
+    const { hide, icon, title, props } = meta ?? {};
+    if (hide) {
+      return;
+    }
+    const item: EleMenuItemProps = {
+      title,
+      icon,
+      path: link ? path : void 0,
+      index: path,
+      ...omit(props, ['title', 'icon', 'path', 'index']),
+      meta
+    };
+    return item;
+  });
+}
+
+/**
+ * 获取布局共享数据
+ */
+export function useLayoutState(): LayoutProvide {
+  return inject(LAYOUT_KEY, {});
+}
+
+/**
+ * 获取高级布局共享数据
+ */
+export function useProLayoutState(): ProLayoutProvide {
+  return inject(PRO_LAYOUT_KEY, {});
+}
+
+/**
+ * 获取是否开启布局响应
+ */
+export function useResponsive(props: ResponsiveProps) {
+  const state = useProLayoutState();
+  return computed<boolean>(() => props.responsive ?? state.responsive ?? true);
+}