@dt-frames/ui 2.0.24 → 4.0.1

package/dist/es/layout/src/types/menu.type.d.ts

@@ -0,0 +1,102 @@
+interface MenuRecordBadgeRaw {
+    /**
+     * 徽标
+     */
+    badge?: string;
+    /**
+     * 徽标类型
+     */
+    badgeType?: 'dot' | 'normal';
+    /**
+     * 徽标颜色
+     */
+    badgeVariants?: 'destructive' | 'primary' | string;
+}
+type IconType = 'svg' | 'online' | 'offline';
+/**
+ * 菜单原始对象
+ */
+interface MenuRecordRaw extends MenuRecordBadgeRaw {
+    /**
+     * 激活时的图标名
+     */
+    activeIcon?: string;
+    /**
+     * 子菜单
+     */
+    children?: MenuRecordRaw[];
+    /**
+     * 是否禁用菜单
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 图标名
+     */
+    icon?: string;
+    /**
+     * 图标类型
+     */
+    iconType?: IconType;
+    /**
+     * 菜单名
+     */
+    name: string;
+    /**
+     * 排序号
+     */
+    order?: number;
+    /**
+     * 父级路径
+     */
+    parent?: string;
+    /**
+     * 所有父级路径
+     */
+    parents?: string[];
+    /**
+     * 节点id
+     */
+    id?: string | number;
+    /**
+     * 父节点id
+     */
+    pid?: string | number;
+    /**
+     * 菜单路径，唯一，可当作key
+     */
+    /**
+     * 菜单类型
+     */
+    type?: 'catalog' | 'menu' | 'button' | 'embedded' | 'link';
+    path: string;
+    /**
+     * 是否显示菜单
+     * @default true
+     */
+    show?: boolean;
+}
+type NormalProps = {
+    /**
+     * 菜单数据
+     */
+    activePath?: string;
+    /**
+     * 是否折叠
+     */
+    collapse?: boolean;
+    /**
+     * 菜单项
+     */
+    menus?: MenuRecordRaw[];
+    /**
+     * @zh_CN 是否圆润风格
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * 主题
+     */
+    theme?: 'dark' | 'light';
+};
+export type { MenuRecordBadgeRaw, MenuRecordRaw, NormalProps, IconType };

package/dist/es/layout/src/types/perferences.type.d.ts

@@ -0,0 +1,287 @@
+import { localeListType, SupportedLanguagesType } from '@dt-frames/core';
+type LayoutType = 'full-content' | 'header-mixed-nav' | 'header-nav' | 'header-sidebar-nav' | 'mixed-nav' | 'sidebar-mixed-nav' | 'sidebar-nav';
+type BuiltinThemeType = 'custom' | 'deep-blue' | 'deep-green' | 'default' | 'gray' | 'green' | 'neutral' | 'orange' | 'pink' | 'red' | 'rose' | 'sky-blue' | 'slate' | 'stone' | 'violet' | 'yellow' | 'zinc' | (Record<never, never> & string);
+type BreadcrumbStyleType = 'background' | 'normal';
+/**
+ * 偏好设置按钮位置
+ * fixed 固定在右侧
+ * header 顶栏
+ * auto 自动
+ */
+type PreferencesButtonPositionType = 'auto' | 'fixed' | 'header';
+type AppPreferences = {
+    /** 布局方式 */
+    layout?: LayoutType;
+    /** z-index */
+    zIndex?: number;
+    /** 是否显示偏好设置 */
+    enablePreferences?: boolean;
+    /** 偏好设置按钮位置 */
+    preferencesButtonPosition?: PreferencesButtonPositionType;
+    /** 支持的语言 */
+    locale?: SupportedLanguagesType;
+    localeList?: localeListType[];
+    colorGrayMode?: boolean;
+    colorWeakMode?: boolean;
+};
+type ThemeModeType = 'dark' | 'light';
+type FooterPreferences = {
+    /** 底栏是否可见 */
+    enable?: boolean;
+    /** 底栏是否固定 */
+    fixed?: boolean;
+    /** 底栏高度 */
+    height?: number;
+};
+type CopyrightPreferences = {
+    /** 版权公司名 */
+    companyName?: string;
+    /** 版权公司名链接 */
+    companySiteLink?: string;
+    /** 版权日期 */
+    date?: string;
+    /** 版权是否可见 */
+    enable?: boolean;
+    /** 备案号 */
+    icp?: string;
+    /** 备案号链接 */
+    icpLink?: string;
+    /** 设置面板是否显示*/
+    settingShow?: boolean;
+};
+type SidebarPreferences = {
+    /** 点击目录时自动激活子菜单 */
+    autoActivateChild?: boolean;
+    /** 侧边栏是否折叠 */
+    collapsed?: boolean;
+    /** 侧边栏折叠按钮是否可见 */
+    collapsedButton?: boolean;
+    /** 侧边栏折叠时，是否显示title */
+    collapsedShowTitle?: boolean;
+    /** 侧边栏折叠宽度 */
+    collapseWidth?: number;
+    /** 侧边栏是否可见 */
+    enable?: boolean;
+    /** 菜单自动展开状态 */
+    expandOnHover?: boolean;
+    /** 侧边栏扩展区域是否折叠 */
+    extraCollapse?: boolean;
+    /** 侧边栏扩展区域折叠宽度 */
+    extraCollapsedWidth?: number;
+    /** 侧边栏固定按钮是否可见 */
+    fixedButton?: boolean;
+    /** 侧边栏是否隐藏 - css */
+    hidden?: boolean;
+    /** 混合侧边栏宽度 */
+    mixedWidth?: number;
+    /** 侧边栏宽度 */
+    width?: number;
+    /** 主题色 */
+    theme?: ThemeModeType;
+};
+/**
+ * 导航风格
+ * plain 朴素
+ * rounded 圆润
+ */
+type NavigationStyleType = 'plain' | 'rounded';
+type NavigationPreferences = {
+    /** 导航菜单手风琴模式 */
+    accordion?: boolean;
+    /** 导航菜单是否切割，只在 layout=mixed-nav 生效 */
+    split?: boolean;
+    /** 导航菜单风格 */
+    styleType?: NavigationStyleType;
+};
+type LayoutHeaderModeType = 'auto' | 'auto-scroll' | 'fixed' | 'static';
+type LayoutHeaderMenuAlignType = 'center' | 'end' | 'start';
+type HeaderPreferences = {
+    /** 顶栏是否启用 */
+    enable?: boolean;
+    /** 顶栏高度 */
+    height?: number;
+    /** 顶栏是否隐藏,css-隐藏 */
+    hidden?: boolean;
+    /** 顶栏菜单位置 */
+    menuAlign?: LayoutHeaderMenuAlignType;
+    /** header显示模式 */
+    mode?: LayoutHeaderModeType;
+};
+/**
+ * 标签栏风格
+ * brisk 轻快
+ * card 卡片
+ * chrome 谷歌
+ * plain 朴素
+ */
+type TabsStyleType = 'brisk' | 'card' | 'chrome' | 'plain';
+type TabbarPreferences = {
+    /** 是否开启多标签页拖拽 */
+    draggable?: boolean;
+    /** 是否开启多标签页 */
+    enable?: boolean;
+    /** 标签页高度 */
+    height?: number;
+    /** 开启标签页缓存功能 */
+    keepAlive?: boolean;
+    /** 限制最大数量 */
+    maxCount?: number;
+    /** 是否点击中键时关闭标签 */
+    middleClickToClose?: boolean;
+    /** 是否持久化标签 */
+    persist?: boolean;
+    /** 是否开启多标签页图标 */
+    showIcon?: boolean;
+    /** 显示最大化按钮 */
+    showMaximize?: boolean;
+    /** 显示更多按钮 */
+    showMore?: boolean;
+    /** 标签页风格 */
+    styleType?: TabsStyleType;
+    /** 是否开启鼠标滚轮响应 */
+    wheelable?: boolean;
+};
+type ContentCompactType = 'compact' | 'wide';
+type ContentPreferences = {
+    /** 是否开启内容紧凑模式 */
+    compact?: ContentCompactType;
+    /** 内容紧凑宽度 */
+    compactWidth?: number;
+    /** 内容内边距 */
+    padding?: number;
+    /** 内容底部内边距 */
+    paddingBottom?: number;
+    /** 内容左侧内边距 */
+    paddingLeft?: number;
+    /** 内容右侧内边距 */
+    paddingRight?: number;
+    /** 内容顶部内边距 */
+    paddingTop?: number;
+};
+/**
+ * 页面切换动画
+ */
+type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
+type TransitionPreferences = {
+    /** 页面切换动画是否启用 */
+    enable?: boolean;
+    loading?: boolean;
+    /** 页面切换动画 */
+    name?: PageTransitionType | string;
+    /** 是否开启页面加载进度动画 */
+    progress?: boolean;
+};
+/**
+ * logo设置
+ */
+type LogoPreferences = {
+    /** logo是否可见 */
+    enable?: boolean;
+    /** logo图片适应方式 */
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /** logo地址 */
+    source?: string;
+    /** 名称 */
+    name?: string;
+};
+type ThemePreferences = {
+    /** 内置主题名 */
+    builtinType?: BuiltinThemeType;
+    /** 错误色 */
+    colorDestructive?: string;
+    /** 主题色 */
+    colorPrimary?: string;
+    /** 成功色 */
+    colorSuccess?: string;
+    /** 警告色 */
+    colorWarning?: string;
+    /** 当前主题 */
+    mode?: ThemeModeType;
+    /** 圆角 */
+    radius?: string;
+    /** 控件大小 */
+    size?: 'large' | 'default' | 'small';
+    /** 是否开启半深色header（只在theme='light'时生效） */
+    semiDarkHeader?: boolean;
+    /** 是否开启半深色菜单（只在theme='light'时生效） */
+    semiDarkSidebar?: boolean;
+};
+type BreadcrumbPreferences = {
+    /** 面包屑是否启用 */
+    enable?: boolean;
+    /** 面包屑是否只有一个时隐藏 */
+    hideOnlyOne?: boolean;
+    /** 面包屑首页图标是否可见 */
+    showHome?: boolean;
+    /** 面包屑图标是否可见 */
+    showIcon?: boolean;
+    /** 面包屑风格 */
+    styleType?: BreadcrumbStyleType;
+};
+type WidgetPreferences = {
+    /** 是否启用全屏部件 */
+    fullscreen?: boolean;
+    /** 是否启用全局搜索部件 */
+    globalSearch?: boolean;
+    /** 是否启用语言切换部件 */
+    languageToggle?: boolean;
+    /** 是否开启锁屏功能 */
+    lockScreen?: boolean;
+    /** 是否显示通知部件 */
+    notification?: boolean;
+    /** 显示刷新按钮 */
+    refresh?: boolean;
+    /** 是否显示侧边栏显示/隐藏部件 */
+    sidebarToggle?: boolean;
+    /** 是否显示主题切换部件 */
+    themeToggle?: boolean;
+};
+interface ShortcutKeyPreferences {
+    /** 是否启用快捷键-全局 */
+    enable?: boolean;
+    /** 是否启用全局锁屏快捷键 */
+    globalLockScreen?: boolean;
+    /** 是否启用全局注销快捷键 */
+    globalLogout?: boolean;
+    /** 是否启用全局偏好设置快捷键 */
+    globalPreferences?: boolean;
+    /** 是否启用全局搜索快捷键 */
+    globalSearch?: boolean;
+}
+type Preferences = {
+    /** 全局配置 */
+    app?: AppPreferences;
+    /** 顶栏配置 */
+    breadcrumb?: BreadcrumbPreferences;
+    /** logo配置 */
+    logo?: LogoPreferences;
+    /** 内容区域设置 */
+    content?: ContentPreferences;
+    /** 版权配置 */
+    copyright?: CopyrightPreferences;
+    /** 面包屑配置 */
+    header?: HeaderPreferences;
+    /** 导航配置 */
+    navigation?: NavigationPreferences;
+    /** 快捷键配置 */
+    shortcutKeys?: ShortcutKeyPreferences;
+    /** 侧边栏配置 */
+    sidebar?: SidebarPreferences;
+    /** 标签页配置 */
+    tabbar?: TabbarPreferences;
+    /** 主题配置 */
+    theme?: ThemePreferences;
+    /** 动画配置 */
+    transition?: TransitionPreferences;
+    /** 底栏配置 */
+    footer?: FooterPreferences;
+    /** 功能配置 */
+    widget?: WidgetPreferences;
+};
+interface BuiltinThemePreset {
+    color: string;
+    darkPrimaryColor?: string;
+    primaryColor?: string;
+    type: BuiltinThemeType;
+}
+export type { Preferences, ThemeModeType, BreadcrumbStyleType, BuiltinThemePreset, BuiltinThemeType, LayoutType, ContentCompactType, LayoutHeaderMenuAlignType, LayoutHeaderModeType, NavigationStyleType, PreferencesButtonPositionType, TabsStyleType };

package/dist/es/layout/src/types/route.type.d.ts

@@ -0,0 +1,109 @@
+import { Recordable } from '@dt-frames/core';
+type RouteMeta = {
+    /**
+     * 当前激活的菜单，有时候不想激活现有菜单，需要激活父级菜单时使用
+     */
+    activePath?: string;
+    /**
+     * 是否固定标签页
+     * @default false
+     */
+    affixTab?: boolean;
+    /**
+     * 固定标签页的顺序
+     * @default 0
+     */
+    affixTabOrder?: number;
+    /**
+     * 徽标
+     */
+    badge?: string;
+    /**
+     * 徽标类型
+     */
+    badgeType?: 'dot' | 'normal';
+    /**
+     * 徽标颜色
+     */
+    badgeVariants?: 'default' | 'destructive' | 'primary' | 'success' | 'warning' | string;
+    /**
+     * 路由的完整路径作为key（默认true）
+     */
+    fullPathKey?: boolean;
+    /**
+     * 当前路由的子级在菜单中不展现
+     * @default false
+     */
+    hideChildrenInMenu?: boolean;
+    /**
+     * 当前路由在面包屑中不展现
+     * @default false
+     */
+    hideInBreadcrumb?: boolean;
+    /**
+     * 当前路由在菜单中不展现
+     * @default false
+     */
+    hideInMenu?: boolean;
+    /**
+     * 当前路由在标签页不展现
+     * @default false
+     */
+    hideInTab?: boolean;
+    /**
+     * 图标（菜单/tab）
+     */
+    icon?: string;
+    /**
+     * iframe 地址
+     */
+    iframeSrc?: string;
+    /**
+     * 忽略权限，直接可以访问
+     * @default false
+     */
+    ignoreAccess?: boolean;
+    /**
+     * 开启KeepAlive缓存
+     */
+    keepAlive?: boolean;
+    /**
+     * 外链-跳转路径
+     */
+    link?: string;
+    /**
+     * 路由是否已经加载过
+     */
+    loaded?: boolean;
+    /**
+     * 标签页最大打开数量
+     * @default -1
+     */
+    maxNumOfOpenTab?: number;
+    /**
+     * 不使用基础布局（仅在顶级生效）
+     */
+    noBasicLayout?: boolean;
+    /**
+     * 在新窗口打开
+     */
+    openInNewWindow?: boolean;
+    /**
+     * 页面切换后 是否关闭所有的http请求
+     */
+    removeHttpPendding?: boolean;
+    /**
+     * 用于路由->菜单排序
+     */
+    order?: number;
+    /**
+     * 菜单所携带的参数
+     */
+    query?: Recordable;
+    /**
+     * 标题名称
+     */
+    name: string;
+    [key: string]: any;
+};
+export type { RouteMeta };

package/dist/es/layout/src/utils/color.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 将颜色转换为HSL CSS变量。
+ *
+ * 这个函数与convertToHsl函数类似，但是返回的字符串格式稍有不同，
+ * 以便可以作为CSS变量使用。
+ *
+ * @param {string} color 输入的颜色。
+ * @returns {string} 可以作为CSS变量使用的HSL格式的颜色字符串。
+ */
+declare function convertToHslCssVar(color: string): string;
+/**
+ * 将颜色转换为RGB颜色字符串
+ * 比如 hsl(231deg 98% 65%)将被解析为rgb(0, 0, 0)
+ * 这里在转换之前先将这些单位去掉
+ * @param str 表示HLS颜色值的字符串
+ * @returns 如果颜色值有效，则返回对应的RGB颜色字符串；如果无效，则返回rgb(0, 0, 0)
+ */
+declare function convertToRgb(str: string): string;
+export { convertToHslCssVar, convertToRgb };

package/dist/es/layout/src/utils/css.d.ts

@@ -0,0 +1,14 @@
+import { Preferences } from '../types/perferences.type';
+/**
+ * 更新 CSS 变量的函数
+ * @param variables 要更新的 CSS 变量与其新值的映射
+ */
+export declare function updateCSS(variables: {
+    [key: string]: string;
+}, id?: string): void;
+/**
+ * 更新主题的 CSS 变量以及其他 CSS 变量
+ * @param preferences - 当前偏好设置对象，它的主题值将被用来设置文档的主题。
+ */
+declare function updateCSSVariables(preferences: Preferences): void;
+export { updateCSSVariables };

package/dist/es/layout/src/utils/diff.d.ts

@@ -0,0 +1,6 @@
+type DiffResult<T> = Partial<{
+    [K in keyof T]: T[K] extends object ? DiffResult<T[K]> : T[K];
+}>;
+declare function arraysEqual<T>(a: T[], b: T[]): boolean;
+declare function diff<T extends Record<string, any>>(obj1: T, obj2: T): DiffResult<T>;
+export { arraysEqual, diff };

package/dist/es/layout/src/utils/dom.d.ts

@@ -0,0 +1,6 @@
+import { VisibleDomRect } from '../hooks/useLayoutStyle';
+/**
+ * 获取元素可见信息
+ * @param element
+ */
+export declare function getElementVisibleRect(element?: HTMLElement | null | undefined): VisibleDomRect;

package/dist/es/layout/src/utils/letter.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 将字符串的首字母大写
+ * @param string
+ */
+declare function capitalizeFirstLetter(string: string): string;
+/**
+ * 将字符串的首字母转换为小写。
+ *
+ * @param str 要转换的字符串
+ * @returns 首字母小写的字符串
+ */
+declare function toLowerCaseFirstLetter(str: string): string;
+/**
+ *  生成驼峰命名法的键名
+ * @param key
+ * @param parentKey
+ */
+declare function toCamelCase(key: string, parentKey: string): string;
+declare function kebabToCamelCase(str: string): string;
+export { capitalizeFirstLetter, kebabToCamelCase, toCamelCase, toLowerCaseFirstLetter };

package/dist/es/layout/src/utils/menu.d.ts

@@ -0,0 +1,20 @@
+import { ComponentInternalInstance, VNode, VNodeChild, VNodeNormalizedChildren } from 'vue';
+import { MenuRecordRaw } from '../types/menu.type';
+declare function findMenuByPath(list: MenuRecordRaw[], path?: string): MenuRecordRaw | null;
+/**
+ * 查找根菜单
+ * @param menus
+ * @param path
+ */
+declare function findRootMenuByPath(menus: MenuRecordRaw[], path: string, level?: number): {
+    findMenu: MenuRecordRaw | null;
+    rootMenu: any;
+    rootMenuPath: any;
+};
+declare const findFirstMenu: (menu: MenuRecordRaw) => any;
+declare const findComponentUpward: (instance: ComponentInternalInstance, parentNames: string[]) => ComponentInternalInstance | null;
+type VNodeChildAtom = Exclude<VNodeChild, Array<any>>;
+type RawSlots = Exclude<VNodeNormalizedChildren, Array<any> | null | string>;
+type FlattenVNodes = Array<RawSlots | VNodeChildAtom>;
+declare const flattedChildren: (children: FlattenVNodes | VNode | VNodeNormalizedChildren) => FlattenVNodes;
+export { findMenuByPath, findRootMenuByPath, flattedChildren, findComponentUpward, findFirstMenu };