yuang-framework-ui-pc 1.1.45 → 1.1.47

package/lib/ele-pro-layout/types.d.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/lib/ele-pro-layout/util.cjs

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const core = require("../utils/core");
+const props = require("../ele-admin-layout/props");
+const props$1 = require("./props");
+function findMenuByPath(path, menus) {
+  return path == null ? void 0 : core.findTree(menus, (d) => path === d.path);
+}
+function findTabByPath(path, tabs) {
+  if (path != null && tabs != null) {
+    return tabs.find((d) => path === d.key || path === d.fullPath);
+  }
+}
+function findTabByKey(key, tabs) {
+  if (key != null && tabs != null) {
+    return tabs.find((d) => key === d.key);
+  }
+}
+function getMatchedMenus(path, menus, parents) {
+  var _a;
+  for (const m of menus) {
+    const p = parents ? [...parents, m] : [m];
+    if (m.path === path) {
+      return p;
+    } else if ((_a = m.children) == null ? void 0 : _a.length) {
+      const result = getMatchedMenus(path, m.children, p);
+      if (result) {
+        return result;
+      }
+    }
+  }
+}
+function getRouteMatched(route, menus) {
+  var _a, _b, _c;
+  const { path, fullPath, meta } = route;
+  if (meta == null ? void 0 : meta.active) {
+    const m2 = findMenuByPath(fullPath, menus) ?? findMenuByPath(path, menus);
+    return {
+      active: meta.active,
+      activeOther: true,
+      title: ((_a = m2 == null ? void 0 : m2.meta) == null ? void 0 : _a.title) ?? meta.title,
+      matched: getMatchedMenus(meta.active, menus)
+    };
+  }
+  const fm = findMenuByPath(fullPath, menus);
+  if (fm) {
+    return {
+      active: fullPath,
+      title: ((_b = fm.meta) == null ? void 0 : _b.title) ?? meta.title,
+      matched: getMatchedMenus(fullPath, menus)
+    };
+  }
+  const m = findMenuByPath(path, menus);
+  return {
+    active: path,
+    title: ((_c = m == null ? void 0 : m.meta) == null ? void 0 : _c.title) ?? meta.title,
+    matched: getMatchedMenus(path, menus)
+  };
+}
+function getMatchedLevels(matched, activeOther, route, menus, tabs) {
+  var _a;
+  const levels = [];
+  if (matched) {
+    matched.forEach((m) => {
+      var _a2;
+      if (m.meta && m.meta.title && m.meta.breadcrumb !== false) {
+        const title = ((_a2 = findTabByPath(m.path, tabs)) == null ? void 0 : _a2.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 == null ? void 0 : t.title) || ((_a = m == null ? void 0 : m.meta) == null ? void 0 : _a.title) || meta.title;
+      levels.push({ path: fullPath, title });
+    }
+  }
+  return levels;
+}
+function getMatchedComponents(matched) {
+  const components = [];
+  matched.forEach((m) => {
+    var _a, _b;
+    if ((_b = (_a = m.components) == null ? void 0 : _a.default) == null ? void 0 : _b.name) {
+      components.push(m.components.default.name);
+    }
+  });
+  return components;
+}
+function getRouteTab(route, tabs, homePath, routeTitle) {
+  const { path, fullPath, meta, matched } = route;
+  const key = meta.tabUnique === false ? fullPath : path;
+  const t = findTabByPath(key, tabs);
+  const title = (t == null ? void 0 : t.title) || routeTitle;
+  const home = path === homePath || fullPath === homePath;
+  const closable = (t == null ? void 0 : t.closable) ?? meta.closable !== false;
+  const components = getMatchedComponents(matched);
+  return { key, path, fullPath, title, closable, home, components, meta };
+}
+function getActiveChilds(menus, active, childrenName) {
+  const field = childrenName || "children";
+  if (!menus.length) {
+    return [];
+  }
+  if (!active) {
+    return menus[0][field] || [];
+  }
+  const m = menus.find((m2) => m2.path === active);
+  if (m == null) {
+    return menus[0][field] || [];
+  }
+  return m[field] || [];
+}
+function getIframeSrc(routePath, iframeUrl) {
+  const [_path1, query1 = ""] = (routePath ?? "").split("?");
+  const [path2, query2 = ""] = (iframeUrl ?? "").split("?");
+  const params1 = new URLSearchParams(query1);
+  const params2 = new URLSearchParams(query2);
+  for (const [key, value] of params2.entries()) {
+    params1.append(key, value);
+  }
+  const newQuery = params1.toString();
+  return `${path2}${newQuery ? `?${newQuery}` : ""}`;
+}
+function getMenuItems(menus, link) {
+  return core.mapTree(menus, (m) => {
+    const { path, meta } = m;
+    const { hide, icon, title, props: props2 } = meta ?? {};
+    if (hide) {
+      return;
+    }
+    const item = {
+      title,
+      icon,
+      path: link ? path : void 0,
+      index: path,
+      ...core.omit(props2, ["title", "icon", "path", "index"]),
+      meta
+    };
+    return item;
+  });
+}
+function useLayoutState() {
+  return vue.inject(props.LAYOUT_KEY, {});
+}
+function useProLayoutState() {
+  return vue.inject(props$1.PRO_LAYOUT_KEY, {});
+}
+function useResponsive(props2) {
+  const state = useProLayoutState();
+  return vue.computed(() => props2.responsive ?? state.responsive ?? true);
+}
+exports.findMenuByPath = findMenuByPath;
+exports.findTabByKey = findTabByKey;
+exports.findTabByPath = findTabByPath;
+exports.getActiveChilds = getActiveChilds;
+exports.getIframeSrc = getIframeSrc;
+exports.getMatchedComponents = getMatchedComponents;
+exports.getMatchedLevels = getMatchedLevels;
+exports.getMatchedMenus = getMatchedMenus;
+exports.getMenuItems = getMenuItems;
+exports.getRouteMatched = getRouteMatched;
+exports.getRouteTab = getRouteTab;
+exports.useLayoutState = useLayoutState;
+exports.useProLayoutState = useProLayoutState;
+exports.useResponsive = useResponsive;

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

@@ -0,0 +1,88 @@
+import { RouteLocationNormalizedLoaded, RouteLocationMatched } from 'vue-router';
+import { EleMenuItemProps } from '../ele-app/plus';
+import { LayoutProvide } from '../ele-admin-layout/types';
+import { MenuItem, TabItem, LevelItem, MatchedResult, ProLayoutProvide, ResponsiveProps } from './types';
+
+/**
+ * 根据菜单地址获取菜单
+ * @param path 菜单地址
+ * @param menus 菜单数据
+ */
+export declare function findMenuByPath(path?: string, menus?: MenuItem[]): MenuItem | undefined;
+/**
+ * 根据路由地址获取页签
+ * @param path 路由地址
+ * @param tabs 页签数据
+ */
+export declare function findTabByPath(path?: string, tabs?: TabItem[] | null): TabItem | undefined;
+/**
+ * 根据页签标识获取页签
+ * @param key 页签标识
+ * @param tabs 页签数据
+ */
+export declare function findTabByKey(key?: string, tabs?: TabItem[] | null): TabItem | undefined;
+/**
+ * 根据菜单地址获取菜单及所有父级
+ * @param path 菜单地址
+ * @param menus 菜单数据
+ */
+export declare function getMatchedMenus(path: string, menus: MenuItem[], parents?: MenuItem[]): MenuItem[] | undefined;
+/**
+ * 获取路由匹配的菜单数据
+ * @param route 路由信息
+ * @param menus 菜单数据
+ */
+export declare function getRouteMatched(route: RouteLocationNormalizedLoaded, menus: MenuItem[]): MatchedResult;
+/**
+ * 获取面包屑导航数据
+ * @param matched 匹配的菜单数据
+ * @param activeOther 是否选中非本身
+ * @param route 路由信息
+ * @param menus 菜单数据
+ * @param tabs 页签数据
+ */
+export declare function getMatchedLevels(matched: MenuItem[] | undefined, activeOther: boolean | undefined, route: RouteLocationNormalizedLoaded, menus: MenuItem[], tabs: TabItem[]): LevelItem[];
+/**
+ * 获取路由对应的组件名称
+ * @param matched 路由匹配数据
+ */
+export declare function getMatchedComponents(matched: RouteLocationMatched[]): string[];
+/**
+ * 返回路由对应的页签数据
+ * @param route 路由信息
+ * @param tabs 当前页签数据
+ * @param homePath 主页地址
+ * @param routeTitle 路由对应的标题
+ */
+export declare function getRouteTab(route: RouteLocationNormalizedLoaded, tabs: TabItem[], homePath: string | undefined, routeTitle?: string): TabItem;
+/**
+ * 获取选中菜单的子级
+ * @param menus 菜单数据
+ * @param active 选中地址
+ * @param childrenName 子级字段名称
+ */
+export declare function getActiveChilds(menus: MenuItem[], active?: string, childrenName?: string): MenuItem[];
+/**
+ * 拼接内嵌地址
+ * @param routePath 路由地址含参数
+ * @param iframeUrl 内嵌地址
+ */
+export declare function getIframeSrc(routePath?: string, iframeUrl?: string): string;
+/**
+ * 菜单数据转换
+ * @param menus 菜单数据
+ * @param link 是否使用超链接
+ */
+export declare function getMenuItems(menus: MenuItem[], link: boolean): EleMenuItemProps[];
+/**
+ * 获取布局共享数据
+ */
+export declare function useLayoutState(): LayoutProvide;
+/**
+ * 获取高级布局共享数据
+ */
+export declare function useProLayoutState(): ProLayoutProvide;
+/**
+ * 获取是否开启布局响应
+ */
+export declare function useResponsive(props: ResponsiveProps): import('vue').ComputedRef<boolean>;