yuang-framework-ui-pc 1.1.44 → 1.1.46

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

@@ -0,0 +1,253 @@
+import { PropType, ExtractPropTypes, InjectionKey } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { EleMenusProps, EleBreadcrumbProps, EleDropdownProps, EleBacktopProps } from '../ele-app/plus';
+import { ContextMenus } from '../ele-tabs/types';
+import { BreadcrumbSeparator as Separator } from '../ele-breadcrumb/types';
+import { Layout, SidebarLayout, HeaderStyle, SidebarStyle, TabStyle, TabBar, Maximized } from '../ele-admin-layout/types';
+import { MenuItem, TabItem, MenuItemTrigger, MenuI18n, BeforeClick, TabItemEventOption, BodySizeChangeOption, ProLayoutProvide } from './types';
+
+type TextEllipsisTooltip = EleMenusProps['textEllipsisTooltip'];
+type ProLayoutKey = InjectionKey<ProLayoutProvide>;
+/**
+ * 属性
+ */
+export declare const proLayoutProps: {
+    /** 高度 */
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    /** 菜单数据 */
+    menus: PropType<MenuItem[] | null>;
+    /** 页签数据 */
+    tabs: PropType<TabItem[] | null>;
+    /** 是否折叠侧栏 */
+    collapse: BooleanConstructor;
+    /** 双侧栏一级是否紧凑风格 */
+    compact: BooleanConstructor;
+    /** 内容区是否最大化 */
+    maximized: PropType<Maximized>;
+    /** 是否需要页签栏 */
+    tabBar: {
+        type: PropType<TabBar>;
+        default: boolean;
+    };
+    /** 是否需要面包屑导航 */
+    breadcrumb: {
+        type: PropType<boolean | EleBreadcrumbProps>;
+        default: boolean;
+    };
+    /** 是否需要返回顶部 */
+    backTop: {
+        type: PropType<boolean | EleBacktopProps>;
+        default: boolean;
+    };
+    /** 布局类型 */
+    layout: PropType<Layout>;
+    /** 侧栏布局类型 */
+    sidebarLayout: PropType<SidebarLayout>;
+    /** 顶栏风格 */
+    headerStyle: PropType<HeaderStyle>;
+    /** 侧栏风格 */
+    sidebarStyle: {
+        type: PropType<SidebarStyle>;
+        default: string;
+    };
+    /** 页签风格 */
+    tabStyle: {
+        type: PropType<TabStyle>;
+        default: string;
+    };
+    /** 是否固定顶栏 */
+    fixedHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否固定侧栏 */
+    fixedSidebar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否固定内容区 */
+    fixedBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 图标是否置于顶栏 */
+    logoInHeader: BooleanConstructor;
+    /** 是否需要固定的主页页签 */
+    fixedHome: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 主页路由地址 */
+    homePath: StringConstructor;
+    /** 刷新路由地址 */
+    redirectPath: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 内容区是否撑满 */
+    fluid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 返回键退出内容区最大化 */
+    compressOnEsc: BooleanConstructor;
+    /** 固定主体时切换路由自动滚到顶部 */
+    autoScrollTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 顶栏菜单触发模式 */
+    navTrigger: PropType<MenuItemTrigger>;
+    /** 双侧栏一级菜单触发模式 */
+    boxTrigger: PropType<MenuItemTrigger>;
+    /** 侧栏菜单触发模式 */
+    itemTrigger: PropType<MenuItemTrigger>;
+    /** hover模式的菜单切换超时 */
+    menuHoverTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 菜单点击事件前钩子 */
+    beforeClick: PropType<BeforeClick>;
+    /** 是否支持内嵌缓存 */
+    keepAlive: BooleanConstructor;
+    /** 内嵌切换动画 */
+    transitionName: StringConstructor;
+    /** 内嵌进入动画延迟时间 */
+    transitionDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 是否开启响应式 */
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 国际化语言 */
+    locale: StringConstructor;
+    /** 菜单标题国际化方法 */
+    i18n: PropType<MenuI18n>;
+    /** 是否支持页签右键菜单 */
+    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>;
+    /** 顶栏菜单属性 */
+    headerMenuProps: PropType<EleMenusProps>;
+    /** 侧栏菜单属性 */
+    sidebarMenuProps: PropType<EleMenusProps>;
+    /** 双侧栏一级菜单属性 */
+    sideboxMenuProps: PropType<EleMenusProps>;
+    /** 顶栏菜单是否省略多余的子项 */
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 顶栏菜单省略项的属性 */
+    ellipsisProps: PropType<EleMenusProps["ellipsisProps"]>;
+    /** 顶栏子菜单触发方式 */
+    menuTrigger: PropType<EleMenusProps["menuTrigger"]>;
+    /** 侧栏默认展开的菜单 */
+    sidebarOpeneds: PropType<string[]>;
+    /** 侧栏是否只保持一个子菜单展开 */
+    uniqueOpened: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 侧栏菜单是否彩色图标 */
+    colorfulIcon: BooleanConstructor;
+    /** 菜单 tooltip 主题 */
+    tooltipEffect: PropType<EleMenusProps["popperEffect"]>;
+    /** 是否开启菜单文本溢出提示 */
+    menuTextEllipsisTooltip: PropType<TextEllipsisTooltip>;
+    /** 内容区最大时不带页签栏 */
+    expanded: BooleanConstructor;
+    /** 面包屑导航分隔符 */
+    breadcrumbSeparator: PropType<Separator>;
+    /** 返回顶部可见的滚动高度 */
+    backTopVisibilityHeight: NumberConstructor;
+    /** 返回顶部的右边距 */
+    backTopRight: NumberConstructor;
+    /** 返回顶部的下边距 */
+    backTopBottom: NumberConstructor;
+    /** 返回顶部的目标选择器 */
+    backTopTarget: StringConstructor;
+};
+export type ProLayoutProps = ExtractPropTypes<typeof proLayoutProps>;
+/**
+ * 事件
+ */
+export declare const proLayoutEmits: {
+    'update:collapse': (_collapse: boolean) => boolean;
+    'update:maximized': (_maximized: 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, _e: MouseEvent) => boolean;
+    headMenuOpen: (_index: string, _indexPath: string[]) => boolean;
+    headMenuClose: (_index: string, _indexPath: string[]) => boolean;
+    sideMenuOpen: (_index: string, _indexPath: string[]) => boolean;
+    sideMenuClose: (_index: string, _indexPath: string[]) => boolean;
+    bodySizeChange: (_option: BodySizeChangeOption) => boolean;
+};
+/**
+ * 共享数据key
+ */
+export declare const PRO_LAYOUT_KEY: ProLayoutKey;
+export {};

package/lib/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/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;
+}