joy-admin-components 0.2.88 → 0.2.90

package/dist/utils/index.d.ts

@@ -0,0 +1,440 @@
+import { Ref } from 'vue';
+// 验证工具类型
+export interface ValidatorOptions {
+  /** 是否在表单中使用，默认 true */
+  inForm?: boolean;
+  /** 是否必填，默认 true */
+  required?: boolean;
+  /** 要验证的值（非表单模式） */
+  value?: string;
+  /** 错误提示信息 */
+  msg?: string;
+}
+
+/**
+ * 创建表单验证器
+ * @param type 验证类型：'phone' | 'password' | 'email'
+ * @param opt 验证选项
+ */
+export function creatValidator(
+  type: 'phone' | 'password' | 'email',
+  opt?: ValidatorOptions
+): boolean | ((rule: any, value: any, callback: any) => void);
+
+
+// Excel 工具类型
+export interface ImportExcelOptions {
+  /** 其他选项 */
+  [key: string]: any;
+}
+
+export interface ExportExcelOptions {
+  /** 其他选项 */
+  [key: string]: any;
+}
+
+/**
+ * 导入 Excel 文件
+ * @param file Excel 文件对象
+ * @param options 导入选项
+ */
+export function importExcel(file: File, options?: ImportExcelOptions): Promise<any>;
+
+/**
+ * 导出 Excel 文件
+ * @param tableName 表格名称
+ * @param tableHeader 表头配置
+ * @param tableData 表格数据
+ * @param options 导出选项
+ */
+export function exportExcel(
+  tableName: string,
+  tableHeader: any[],
+  tableData?: any[],
+  options?: ExportExcelOptions
+): Promise<void>;
+
+/**
+ * 多 sheet 导入 Excel 配置
+ */
+export interface ImportExcelMuiltiOptions {
+  /** 按 sheet 名称映射字段配置 */
+  fields: Record<string, Record<string, string>>;
+  /** 有效数据起始行，默认 1 */
+  range?: number;
+  /** 是否读取图片 */
+  withImages?: boolean;
+}
+
+/**
+ * 多 sheet 导入 Excel 文件
+ * @param file Excel 文件对象
+ * @param options 导入选项
+ * @returns 返回按 sheet 名称组织的数据对象
+ */
+export function importExcelMuilti(
+  file: File,
+  options: ImportExcelMuiltiOptions
+): Promise<Record<string, any[]>>;
+
+/**
+ * 多 sheet 导出 Excel 表头配置
+ */
+export interface ExportExcelMuiltiHeader {
+  /** 表头显示文本 */
+  header: string;
+  /** 数据字段 key */
+  key: string;
+  /** 列宽度 */
+  width?: number;
+  /** 列样式 */
+  style?: any;
+  /** 下拉选项配置 */
+  option?: Array<{ label: any; value: any }>;
+  /** 是否必填 */
+  required?: boolean;
+  /** 单元格数字格式：'date' | 'number' | 'string' 或自定义格式 */
+  numFmt?: string;
+}
+
+/**
+ * 多 sheet 导出 Excel 配置
+ */
+export interface ExportExcelMuiltiSheet {
+  /** 表头配置 */
+  tableHeader: ExportExcelMuiltiHeader[];
+  /** 表格数据 */
+  tableData: any[];
+  /** sheet 排序顺序 */
+  sort?: number;
+}
+
+/**
+ * 多 sheet 导出 Excel 文件
+ * @param tableName 导出表格名称
+ * @param sheets 按 sheet 名称配置的数据对象
+ */
+export function exportExcelMuilti(
+  tableName: string,
+  sheets: Record<string, ExportExcelMuiltiSheet>
+): Promise<void>;
+
+// 单点登录 SDK 类型
+export default class OnePortalCasSDK {
+  constructor(...args: any[]);
+  [key: string]: any;
+}
+
+// ============== 数字格式化工具类型 ==============
+
+/**
+ * 将数字添加千分位分隔符，并保留指定小数位数
+ * @param num 需要格式化的数字
+ * @param decimals 保留的小数位数，默认 2 位
+ * @param decimalSeparator 小数点分隔符，默认 '.'
+ * @param thousandSeparator 千分位分隔符，默认 ','
+ * @returns 格式化后的数字字符串
+ * @example
+ * formatNumber(1234567.89) // '1,234,567.89'
+ * formatNumber(1234567.89, 0) // '1,234,568'
+ * formatNumber(1234567.8912, 3) // '1,234,567.891'
+ */
+export function formatNumber(
+  num: number | string,
+  decimals?: number,
+  decimalSeparator?: string,
+  thousandSeparator?: string
+): string;
+
+/**
+ * 格式化金额（默认 2 位小数，带千分位）
+ * @param amount 金额
+ * @param decimals 小数位数，默认 2 位
+ * @returns 格式化后的金额字符串
+ * @example
+ * formatMoney(1234567.89) // '1,234,567.89'
+ * formatMoney(-1234567.89) // '-1,234,567.89'
+ */
+export function formatMoney(amount: number | string, decimals?: number): string;
+
+/**
+ * 格式化百分比
+ * @param num 数字（如 0.1234 表示 12.34%）
+ * @param decimals 小数位数，默认 2 位
+ * @returns 格式化后的百分比字符串
+ * @example
+ * formatPercent(0.1234) // '12.34%'
+ * formatPercent(0.1234, 0) // '12%'
+ * formatPercent(1.5) // '150.00%'
+ */
+export function formatPercent(num: number | string, decimals?: number): string;
+
+// ============== 通用工具函数类型 ==============
+
+/**
+ * 延迟执行（Promise 版本）
+ * @param wait 等待时间（毫秒）
+ */
+export function sleep(wait: number): Promise<void>;
+
+/**
+ * 深度克隆对象（通过 JSON 序列化）
+ * @param data 要克隆的数据
+ */
+export function _toRaw<T>(data: T): T;
+
+/**
+ * 将扁平数组转换为树形结构
+ * @param items 扁平数组，每项需包含 id 和 pid 属性
+ */
+export function arrayToTree<T extends { id: any; pid: any }>(items: T[]): T[];
+
+/**
+ * 将字符串按指定字符分割为数组
+ * @param str 要分割的字符串
+ * @param split 分隔符，默认为空格
+ */
+export function stringToArray(str: string, split?: string): string[];
+
+/**
+ * StatusMap 类 - 创建一个可遍历、可快速取值的状态映射数据结构
+ */
+export class StatusMap {
+  list: any[];
+  map: Map<any, any>;
+
+  constructor(arrStatus: any[], keys?: string[]);
+
+  /**
+   * 根据 key 获取名称（支持多语言）
+   * @param key 状态值
+   * @param locale 语言环境，如 'zh_cn' 或 'en_us'
+   */
+  getName(key: any, locale?: string): string;
+
+  /**
+   * 根据 key 获取标签类型
+   * @param key 状态值
+   */
+  getTag(key: any): string;
+
+  /**
+   * 根据 key 获取完整数据项
+   * @param key 状态值
+   */
+  getItem(key: any): any | null;
+
+  /**
+   * 根据 key 获取颜色
+   * @param key 状态值
+   */
+  getColor(key: any): string | null;
+
+  /**
+   * 检查是否包含某个 key
+   * @param key 状态值
+   */
+  has(key: any): boolean;
+}
+
+/**
+ * 将数组转换为 StatusMap 对象
+ * @param arr 数组数据
+ * @param keys 键名映射数组，至少需要 2 个元素 [label键, value键, ...]
+ * @param labelEn 英文标签字段名，默认 'i18nName'
+ */
+export function arrToStatusMap(arr: any[], keys: string[], labelEn?: string): StatusMap;
+
+/**
+ * 去除 HTML 标签
+ * @param html 包含 HTML 标签的字符串
+ */
+export function stripHtmlTags(html: string): string;
+
+/**
+ * 将 Unicode 编码转换为普通字符串
+ * @param unicodeStr Unicode 字符串
+ */
+export function unicode2Str(unicodeStr: string): string;
+
+/**
+ * 检查文件大小是否超过限制
+ * @param file 要检查的文件对象
+ * @param size 限制的文件大小（单位：MB），默认 10MB
+ * @returns 如果文件大小未超过限制，返回 true；否则返回 false
+ */
+export function checkFileSize(file: File, size?: number): boolean;
+
+/**
+ * 根据页面名称创建 ListPage 的 ID 数组
+ * @param name 页面名称
+ */
+export function createListPageId(name: string): string[];
+
+/**
+ * 根据表头生成导入字段映射
+ * @param header 表头配置数组
+ * @returns 字段映射对象
+ */
+export function createImportFields(header: any[]): Record<string, string>;
+
+/**
+ * 根据链式 key 获取对象的值
+ * @param object 目标对象
+ * @param chainKey 链式 key，如 'a.b.c'
+ */
+export function getValueBykey<T = any>(object: any, chainKey: string): T | undefined;
+
+/**
+ * 请求选项配置
+ */
+export interface UseRequestOptions {
+  /** 是否手动执行，默认 false */
+  manual?: boolean;
+  /** 是否打印日志 */
+  log?: boolean;
+  /** 首次执行传参 */
+  params?: any;
+  /** 回调函数 */
+  cb?: (res: any) => void;
+  /** 对返回的数据按属性名进行过滤 */
+  format?: string[] | null;
+}
+
+/**
+ * 请求简单封装
+ * @param apiHandle 请求 Promise
+ * @param opt 配置选项
+ * @returns [loading, resData, run] 加载状态、响应数据、执行函数
+ */
+export function useRequest(
+  apiHandle: (params?: any) => Promise<any>,
+  opt?: UseRequestOptions
+): [Ref<boolean>, Ref<any>, (params?: any) => void];
+
+/**
+ * 范围时间选择器值解构
+ * @param date 时间组件绑定的数组
+ * @returns [dateSource, start, end] 日期源、开始时间、结束时间
+ */
+export function useDatePicker(date: string[]): [Ref<string[]>, Ref<string>, Ref<string>];
+
+/**
+ * 获取值的类型
+ * @param value 要检测类型的值
+ * @returns 类型字符串（小写），如 'string', 'number', 'array', 'object' 等
+ */
+export function _typeOf(value: any): string;
+
+// i18n.js hooks
+
+/**
+ * 国际化响应式状态
+ * @param state 返回值的函数
+ * @param otherWatch 其他需要监听的值数组
+ * @returns [data] 响应式数据
+ */
+export function useI18nReState<T>(state: () => T, otherWatch?: any[]): Ref<T>;
+
+/**
+ * 根据当前语言环境获取对应字段的值
+ *
+ * 用于处理后端返回的多语言数据对象，自动根据当前 i18n 语言环境返回对应的字段值
+ *
+ * @param sourceData - 包含多语言字段的源数据对象
+ * @param zh - 中文字段名，指定 sourceData 中哪个字段是中文内容，默认 'zh_cn'
+ * @param en - 英文字段名，指定 sourceData 中哪个字段是英文内容，默认 'en_us'
+ * @returns 返回当前语言对应的字段值，找不到则返回中文字段值，都没有则返回 '-'
+ *
+ * @description
+ * 该函数会自动检测当前 i18n 的语言环境（zh_cn 或 en_us），并返回 sourceData 中对应的字段值。
+ *
+ * **工作原理：**
+ * 1. 根据 zh 和 en 参数确定字段映射关系
+ * 2. 获取当前 i18n 语言环境
+ * 3. 返回对应语言的字段值
+ * 4. 如果找不到当前语言字段，回退到中文字段
+ * 5. 如果中文字段也不存在，返回 '-'
+ *
+ * **回退机制：**
+ * sourceData[当前语言字段] → sourceData[中文字段] → '-'
+ *
+ * @example
+ * ```ts
+ * // 示例 1：标准用法（字段名为 zh_cn 和 en_us）
+ * const data = { zh_cn: '产品A', en_us: 'Product A' };
+ * getLocaleValue(data);
+ * // 当前语言为中文时返回 '产品A'
+ * // 当前语言为英文时返回 'Product A'
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 示例 2：自定义字段名
+ * const data = { nameCn: '产品B', nameEn: 'Product B' };
+ * getLocaleValue(data, 'nameCn', 'nameEn');
+ * // 当前语言为中文时返回 '产品B'
+ * // 当前语言为英文时返回 'Product B'
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 示例 3：只有中文字段（回退机制）
+ * const data = { nameCn: '产品C' };
+ * getLocaleValue(data, 'nameCn', 'nameEn');
+ * // 即使当前语言为英文，也会返回 '产品C'（回退到中文）
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 示例 4：空数据
+ * getLocaleValue(null); // 返回 '-'
+ * getLocaleValue(undefined); // 返回 '-'
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 示例 5：在列表渲染中使用
+ * const products = [
+ *   { id: 1, nameCn: '苹果', nameEn: 'Apple' },
+ *   { id: 2, nameCn: '香蕉', nameEn: 'Banana' }
+ * ];
+ * products.map(item => getLocaleValue(item, 'nameCn', 'nameEn'));
+ * // 当前语言为中文时返回 ['苹果', '香蕉']
+ * // 当前语言为英文时返回 ['Apple', 'Banana']
+ * ```
+ */
+export function getLocaleValue(
+  sourceData: Record<string, any> | null | undefined,
+  zh?: string,
+  en?: string
+): string;
+
+// storeHook.js hooks
+
+/**
+ * 使用 Vuex State（支持模块化）
+ * @param moduleName 模块名称（可选）
+ * @param mapper state 映射对象或数组
+ * @returns 响应式 state 对象
+ */
+export function useState(moduleName: string, mapper: string[] | Record<string, any>): Record<string, Ref<any>>;
+export function useState(mapper: string[] | Record<string, any>): Record<string, Ref<any>>;
+
+/**
+ * 使用 Vuex Getters（支持模块化）
+ * @param moduleName 模块名称（可选）
+ * @param mapper getters 映射对象或数组
+ * @returns 响应式 getters 对象
+ */
+export function useGetters(moduleName: string, mapper: string[] | Record<string, any>): Record<string, Ref<any>>;
+export function useGetters(mapper: string[] | Record<string, any>): Record<string, Ref<any>>;
+
+/**
+ * 使用 Vuex Actions（支持模块化）
+ * @param moduleName 模块名称（可选）
+ * @param mapper actions 映射对象或数组
+ * @returns actions 对象
+ */
+export function useActions(moduleName: string, mapper: string[] | Record<string, any>): Record<string, (...args: any[]) => any>;
+export function useActions(mapper: string[] | Record<string, any>): Record<string, (...args: any[]) => any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "joy-admin-components",
-  "version": "0.2.88",
+  "version": "0.2.90",
   "main": "./dist/joy-admin-components.umd.js",
   "module": "./dist/joy-admin-components.es.js",
   "types": "./dist/index.d.ts",

package/src/components/CmpDictionary/index.d.ts

@@ -5,7 +5,7 @@ import { SelectProps } from 'element-plus';
  * 字典选择器组件 - 基于 Element Plus Select 封装
  * 支持 API 请求数据、全选、多语言等功能
  */
-export interface CmpDictionaryProps extends /* @vue-ignore */ Partial<SelectProps> {
+export interface CmpDictionaryProps extends Partial<SelectProps> {
   /** 获取下拉数据的 API 函数 */
   api?: () => Promise<{ data: any[] }>;
   /** 是否显示全选复选框（仅多选模式），默认 true */
@@ -39,5 +39,5 @@ export interface CmpDictionaryEmits {
   (e: 'update:modelValue', value: any): void;
 }
 
-declare const CmpDictionary: DefineComponent<CmpDictionaryProps, {}, any, {}, {}, {}, {}, CmpDictionaryEmits>;
+declare const CmpDictionary: DefineComponent<CmpDictionaryProps>;
 export default CmpDictionary;

package/src/components/ConfrimButton/index.d.ts

@@ -6,7 +6,7 @@ import { PopconfirmProps } from 'element-plus';
  * 点击后弹出确认气泡，确认后执行操作（自动防抖 500ms）
  * 继承 Element Plus ElPopconfirm 所有属性
  */
-export interface ConfrimButtonProps extends /* @vue-ignore */ Partial<PopconfirmProps> {}
+export type ConfrimButtonProps = Partial<PopconfirmProps>;
 
 export interface ConfrimButtonEmits {
   /** 确认操作时触发（已防抖处理） */
@@ -15,5 +15,5 @@ export interface ConfrimButtonEmits {
   (e: 'no'): void;
 }
 
-declare const ConfrimButton: DefineComponent<ConfrimButtonProps, {}, any, {}, {}, {}, {}, ConfrimButtonEmits>;
+declare const ConfrimButton: DefineComponent<ConfrimButtonProps>;
 export default ConfrimButton;

package/src/components/ImportButton/index.d.ts

@@ -16,5 +16,5 @@ export interface ImportButtonEmits {
   (e: 'fileChange', file: File): void;
 }
 
-declare const ImportButton: DefineComponent<ImportButtonProps, {}, any, {}, {}, {}, {}, ImportButtonEmits>;
+declare const ImportButton: DefineComponent<ImportButtonProps>;
 export default ImportButton;

package/src/components/LayOutForm/index.d.ts

@@ -6,7 +6,7 @@ import { FormProps } from 'element-plus';
  * 继承 Element Plus ElForm 所有属性
  * 自动为表单项添加栅格布局，支持多列表单
  */
-export interface LayOutFormProps extends /* @vue-ignore */ FormProps {
+export interface LayOutFormProps extends FormProps {
   /** 栅格间隔，默认 20 */
   gutter?: number;
 }
@@ -16,5 +16,5 @@ export interface LayOutFormEmits {
   (e: 'ref', formRef: any): void;
 }
 
-declare const LayOutForm: DefineComponent<LayOutFormProps, {}, any, {}, {}, {}, {}, LayOutFormEmits>;
+declare const LayOutForm: DefineComponent<LayOutFormProps>;
 export default LayOutForm;

package/src/components/Layer/index.d.ts

@@ -31,5 +31,5 @@ export interface LayerEmits {
   (e: 'confirm'): void;
 }
 
-declare const Layer: DefineComponent<LayerProps, {}, any, {}, {}, {}, {}, LayerEmits>;
+declare const Layer: DefineComponent<LayerProps>;
 export default Layer;

package/src/components/ListPage/index.d.ts

@@ -88,5 +88,5 @@ export interface ListPageExpose {
   calculateTableHeight: () => void;
 }
 
-declare const ListPage: DefineComponent<ListPageProps, {}, any>;
+declare const ListPage: DefineComponent<ListPageProps>;
 export default ListPage;

package/src/components/SearchBar/index.d.ts

@@ -47,5 +47,5 @@ export interface SearchBarEmits {
   (e: 'reset'): void;
 }
 
-declare const SearchBar: DefineComponent<SearchBarProps, {}, any, {}, {}, {}, {}, SearchBarEmits>;
+declare const SearchBar: DefineComponent<SearchBarProps>;
 export default SearchBar;