@dt-frames/ui 3.0.1 → 4.0.1

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

@@ -0,0 +1,287 @@
+import type { 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/lib/layout/src/types/route.type.d.ts

@@ -0,0 +1,109 @@
+import type { 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/lib/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/lib/layout/src/utils/css.d.ts

@@ -0,0 +1,14 @@
+import type { 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/lib/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/lib/layout/src/utils/dom.d.ts

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

package/dist/es/lib/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/lib/layout/src/utils/menu.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentInternalInstance, VNode, VNodeChild, VNodeNormalizedChildren } from 'vue';
+import type { 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: MenuRecordRaw | undefined;
+    rootMenuPath: string | undefined;
+};
+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 };

package/dist/es/lib/router/goPage.d.ts

@@ -0,0 +1 @@
+export declare function go(path: string, isReplace?: boolean): void;

package/dist/es/lib/router/guard.d.ts

@@ -0,0 +1,3 @@
+import type { Router } from 'vue-router';
+import type { SSOType } from '@dt-frames/core';
+export declare function createRouterGuard(router: Router, sso: SSOType): void;

package/dist/es/lib/router/index.d.ts

@@ -0,0 +1,8 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { go } from './goPage';
+/** 静态路由 */
+declare const routes: RouteRecordRaw[];
+/** 静态路由名称 */
+declare const coreRouteNames: string[];
+declare function initRouter(): import("vue-router").Router;
+export { routes, coreRouteNames, initRouter, go };

package/dist/es/lib/stores/access.store.d.ts

@@ -0,0 +1,59 @@
+import type { RouteRecordRaw } from 'vue-router';
+import type { MenuRecordRaw } from '~layout/index';
+type AccessToken = null | string;
+type AccessState = {
+    /**
+     * 权限码
+     */
+    accessCodes: (string | undefined)[];
+    /**
+     * 可访问的菜单列表
+     */
+    accessMenus: MenuRecordRaw[];
+    /**
+     * 可访问的路由列表
+     */
+    accessRoutes: RouteRecordRaw[];
+    /**
+     * 登录 accessToken
+     */
+    accessToken: AccessToken;
+    /**
+     * 是否已经检查过权限
+     */
+    isAccessChecked: boolean;
+    /**
+     * 是否锁屏状态
+     */
+    isLockScreen: boolean;
+    /**
+     * 锁屏密码
+     */
+    lockScreenPassword?: string;
+    /**
+     * 登录是否过期
+     */
+    loginExpired: boolean;
+    /**
+     * 登录 accessToken
+     */
+    refreshToken: AccessToken;
+};
+/**
+ * 访问权限相关
+ */
+export declare const useAccessStore: import("pinia").StoreDefinition<"dt-access", AccessState, {}, {
+    getMenuByPath(path: string): MenuRecordRaw | undefined;
+    getBreadCrumb(path: string): MenuRecordRaw[];
+    getFilterMenu(filter?: string): MenuRecordRaw[];
+    lockScreen(password: string): void;
+    unlockScreen(): void;
+    setAccessCodes(codes: (string | undefined)[]): void;
+    setAccessMenus(menus: MenuRecordRaw[]): void;
+    setAccessRoutes(routes: RouteRecordRaw[]): void;
+    setAccessToken(token: AccessToken): void;
+    setIsAccessChecked(isAccessChecked: boolean): void;
+    setLoginExpired(loginExpired: boolean): void;
+    setRefreshToken(token: AccessToken): void;
+}>;
+export {};

package/dist/es/lib/stores/app.store.d.ts

@@ -0,0 +1,11 @@
+import type { UiAppConf } from '../init';
+/**
+ * 在ui中需要用到的配置信息
+ */
+type AppState = {
+    appConf: UiAppConf;
+};
+export declare const useAppStore: import("pinia").StoreDefinition<"dt-app", AppState, {}, {
+    setAppConf(props: UiAppConf): void;
+}>;
+export {};

package/dist/es/lib/stores/auth.store.d.ts

@@ -0,0 +1,35 @@
+import type { UserInfo } from '../types/user.type';
+import type { Router, RouteRecordRaw } from 'vue-router';
+type AuthState = {
+    staticRoute: RouteRecordRaw[];
+    /**
+     * 记录路由
+     */
+    router: Router | null;
+};
+export declare const useAuthStore: import("pinia").StoreDefinition<"dt-auth", AuthState, {}, {
+    /**
+     * 设置静态路由
+     * @param routes
+     */
+    setStaticRoute(routes: RouteRecordRaw[]): void;
+    authLogin(accessToken: string, onSuccess?: () => void): Promise<{
+        firstPath: any;
+    }>;
+    /**
+     * 获取用户的基本信息
+     */
+    getUserInfo(): Promise<UserInfo>;
+    /**
+     * 将平级的树转为树结构
+     */
+    flatTree2Tree(trees: any[], pid?: null): any[];
+    /**
+     * 获取菜单及权限
+     */
+    getModules(): Promise<{
+        firstPath: any;
+    }>;
+    setRouter(router: any): void;
+}>;
+export {};

package/dist/es/lib/stores/user.store.d.ts

@@ -0,0 +1,19 @@
+import type { UserInfo } from '../types/user.type';
+type AccessState = {
+    /**
+     * 用户信息
+     */
+    userInfo: UserInfo | null;
+    /**
+     * 用户角色
+     */
+    userRoles: string[];
+};
+/**
+ * 用户信息相关
+ */
+export declare const useUserStore: import("pinia").StoreDefinition<"dt-user", AccessState, {}, {
+    setUserInfo(userInfo: UserInfo | null): void;
+    setUserRoles(roles: string[]): void;
+}>;
+export {};

package/dist/es/lib/types/curd.type.d.ts

@@ -0,0 +1,55 @@
+import type { Recordable } from '@dt-frames/core';
+import type { FormInsType, FormProps } from '../components/form';
+import type { ModalProps } from '../components/modal';
+import type { RowKey } from '../components/table';
+import type { SourceType } from './source.type';
+type SaveParam = Recordable | string | boolean | null | Array<any> | Promise<any>;
+type CurdInsType = FormInsType & {
+    /**
+     * 打开新增弹框
+     */
+    openAddDialog: () => void;
+    /**
+     * 打开编辑弹框
+     */
+    openEditDialog: (row: Recordable) => void;
+    /**
+     * 单行删除
+     */
+    del: (row: Recordable) => void;
+    /**
+     * 批量删除
+     */
+    dels: (ids: RowKey[]) => void;
+    /**
+     * 关闭弹框
+     */
+    closeModal: () => void;
+    /**
+     * 设置弹框属性
+     */
+    setModalProps?: (props: Partial<ModalProps>) => void;
+    /**
+     * 保存之前的操作
+     */
+    beforeSave: (param: SaveParam) => SaveParam | Promise<SaveParam> | undefined;
+    /**
+     * 弹框关闭后的回调
+     */
+    afterClose: (param?: any) => void;
+};
+type CurdProps = {
+    /**
+     * 弹框属性
+     */
+    modalProps?: Partial<ModalProps>;
+    /**
+     * 表单属性
+     */
+    formProps?: Partial<FormProps>;
+    /**
+     * 调用接口
+     */
+    source: SourceType;
+};
+export type { CurdInsType, CurdProps, SaveParam };