@skyfox2000/webui 1.0.13 → 1.2.0

package/src/typings/tools.d.ts

@@ -0,0 +1,131 @@
+export type ButtonType = 'link' | 'default' | 'primary' | 'ghost' | 'dashed' | 'text';
+
+import { GridControl } from '@/typings/table.d';
+import { EditorControl } from '@/typings/form.d';
+import { PageControl } from '@/typings/page.d';
+import { AnyData } from '@skyfox2000/fapi';
+import { VNode, Ref, ShallowRef } from 'vue';
+export type RowRecord = Record<string, any> | RowRecord[];
+/**
+ * 工具/操作按钮定义
+ */
+export interface ButtonTool {
+   /**
+    * 按钮关键字，与权限控制相关
+    * 功能码，必须唯一
+    * 字符串配置时，使用默认设置
+    */
+   key: string;
+   /**
+    * 文字
+    */
+   label?: string;
+   /**
+    * 状态文字，与状态图标对应
+    * 可切换
+    */
+   labels?: string[];
+   /**
+    * 图标
+    */
+   icon?: string;
+   /**
+    * 状态图标
+    */
+   icons?: string[];
+   /**
+    * 图标状态位
+    * - 当前文字
+    * - 当前图标
+    */
+   iconStatus?: number;
+   /**
+    * 下拉操作
+    */
+   children?: (IconTool | ButtonTool)[];
+   /**
+    * 控制表单控制自动弹窗
+    * - 配置表单控制器visible
+    * - 配置后，可不配置click事件(click自动执行)
+    */
+   formVisible?: Ref;
+   /**
+    * /// 主工具栏批量操作
+    * @param pageCtrl 页面控制对象
+    * @param gridCtrl 表格控制对象
+    * @param record 数据表行记录
+    * - 配置formVibible后，可自动执行click事件
+    * - 实现 grid.rowData.value = record
+    * - 实现 formVisible.value = true
+    * - 未配置formVisible时，会提示未配置点击处理事件
+    * 操作
+    * @example
+      click: <T>(_: PageControl<T>, _: GridControl<T>, row: T) => {
+         const rowData = row as OrderEntity;
+      },
+    * @returns
+    */
+   click?: <T>(pageCtrl: PageControl<T>, gridCtrl?: GridControl<T>, record?: T | RowRecord | string[]) => void;
+   /**
+    * 按钮主样式
+    */
+   type?: ButtonType;
+   /**
+    * 是否禁用
+    * @example
+      visible: (row: OrderEntity) => { }
+    */
+   disabled?: boolean | ((record) => boolean); /// 表格操作
+   /**
+    * 是否可见
+    * @example
+      visible: (row: OrderEntity) => { }
+    */
+   visible?: boolean | ((record) => boolean); /// 表格操作
+   /**
+    * 是否弹出确认框，确认操作由确认方法执行
+    */
+   confirm?: boolean;
+   /**
+    * 确认框提示文字
+    */
+   confirmText?: string;
+   /**
+    * 警告色
+    */
+   danger?: boolean;
+   /**
+    * 自定义样式
+    */
+   class?: string;
+   /**
+    * 图标属性
+    */
+   iconProps?: Record<string, any>;
+   /**
+    * 下拉组件
+    */
+   dropdown?: string;
+   /**
+    * 下拉容器样式
+    */
+   dropdownClass?: string;
+   /**
+    * 角色权限控制
+    */
+   role?: string | string[];
+   /**
+    * 权限控制
+    */
+   permit?: string;
+}
+
+export type IconTool = Omit<ButtonTool, 'disabled' | 'children'> & {
+   disabled?: boolean;
+   children?: (IconTool | ButtonTool)[];
+};
+
+/**
+ * 工具/操作按钮定义组
+ */
+export type ButtonTools = (IconTool | ButtonTool | string)[];

package/src/typings/tree.d.ts

@@ -0,0 +1,73 @@
+import { Ref, ShallowRef } from 'vue';
+import { AnyData, IUrlInfo, ReqParams } from '@skyfox2000/fapi';
+import { PageControl } from './page';
+
+export interface TreeNode {
+   /**
+    * 节点名称
+    */
+   title: string;
+   /**
+    * 节点ID
+    */
+   key: string;
+   /**
+    * 节点子节点
+    */
+   children?: TreeNode[];
+   /**
+    * 节点数据
+    */
+   [key: string]: AnyData;
+}
+/**
+ * 树控制默认设置
+ */
+export interface TreeControlOption {
+   /**
+    * 自动加载树，默认true
+    */
+   autoload: boolean;
+}
+
+/**
+ * 页面左侧树数据交互标准定义
+ */
+export type TreeControl = TreeControlOption & {
+   /**
+    * 重新加载树数据
+    */
+   reload: Ref<boolean>;
+   /**
+    * 所属页面控制器
+    */
+   page: PageControl<AnyData>;
+   /**
+    * 当前选择节点
+    */
+   node: Ref<TreeNode | undefined>;
+   /**
+    * 当前表格查询条件
+    */
+   treeQuery?: ReqParams;
+   /**
+    * 当前树数据
+    */
+   data: ShallowRef<TreeNode[] | undefined>;
+   /**
+    * 字段转换控制
+    * - Key：目的字段
+    * - Value：源字段，支持模板 ${}
+    */
+   fieldMap?: Record<string, string>;
+   /**
+    * 树查询接口
+    *  - 优先使用
+    *  - 或使用PageData.urls.tree
+    */
+   url?: IUrlInfo;
+   /**
+    * 是否正在加载中
+    */
+   isTreeLoading: Ref<boolean>;
+};

package/src/typings/upload.d.ts

@@ -0,0 +1,162 @@
+import { ImgHTMLAttributes } from 'vue';
+import { AjaxResponse, IUrlInfo } from '@skyfox2000/fapi';
+
+/**
+ * 上传文件的状态枚举
+ */
+export enum UploadStatus {
+   /** 正在等待上传 */
+   Pending = 'pending',
+
+   /** 正在上传中 */
+   Uploading = 'uploading',
+
+   /** 上传成功 */
+   Success = 'success',
+
+   /** 上传失败 */
+   Error = 'error',
+
+   /** 在线 */
+   Online = 'online',
+   /** 下线 */
+   Offline = 'offline',
+}
+
+/**
+ * Minio文件格式定义
+ */
+export interface MinioFile {
+   /**
+    * 唯一键，Etag
+    */
+   ETag: string;
+   /**
+    * 主键文件名
+    */
+   Key: string;
+   /**
+    * - 实际文件名
+    */
+   FileName?: string;
+   /**
+    * 文件大小
+    */
+   Size: number;
+   /**
+    * 在线状态
+    * - Online
+    * - Offline
+    */
+   Status: UploadStatus;
+   /**
+    * 所属桶
+    */
+   Bucket?: string;
+   /**
+    * 文件类型
+    */
+   Type?: string;
+   /**
+    * 上传时间
+    */
+   UpdateTime?: string;
+   /**
+    * 文件内容
+    * - base64
+    * - 二进制
+    */
+   Content?: string | Array;
+}
+
+/**
+ * 上传文件接口定义
+ */
+export interface UploadFile<T = AjaxResponse> {
+   /** 文件的唯一标识符 */
+   uid: string;
+
+   /** 文件大小（可选） */
+   size?: number;
+
+   /** 文件名称 */
+   name: string;
+
+   /** 文件名（可选，用于特殊需求） */
+   fileName?: string;
+
+   /** 最后修改时间戳（可选） */
+   lastModified?: number;
+
+   /** 最后修改日期（可选） */
+   lastModifiedDate?: Date;
+
+   /** 文件的网络地址（可选） */
+   url?: string;
+
+   /** 文件上传状态 */
+   status?: UploadStatus;
+
+   /** 文件上传的百分比进度（0 到 100，单位：%） */
+   percent?: number;
+
+   /** 文件的缩略图 URL（可选） */
+   thumbUrl?: string;
+
+   /** 图片的跨域属性（对应 `<img>` 标签的 `crossorigin`） */
+   crossOrigin?: ImgHTMLAttributes['crossorigin'];
+
+   /** 原始文件对象（可选） */
+   originFileObj?: any;
+
+   /** 服务器返回的响应数据（根据 `T` 泛型定义） */
+   response?: T;
+
+   /** 上传错误信息（可选） */
+   error?: any;
+
+   /** 文件链接的附加属性（可用于自定义跳转逻辑等） */
+   linkProps?: any;
+
+   /** 文件类型（MIME 类型） */
+   type?: string;
+
+   /** XMLHttpRequest 对象（可选，底层上传使用的请求对象） */
+   xhr?: T;
+
+   /** 文件预览 URL（可选，用于生成临时预览图片等） */
+   preview?: string;
+
+   /**
+    * 自定义上传参数
+    * 仅支持字符串或二进制
+    */
+   params: Record<string, string | Blob>;
+
+   /**
+    * minio文件信息
+    */
+   minioFile?: MinioFile;
+}
+
+/**
+ * Excel文件上传参数
+ */
+export interface ExcelFileParams {
+   /**
+    * 基础路径
+    */
+   basePath?: string;
+   /**
+    * 上传地址和参数
+    */
+   uploadUrl: IUrlInfo;
+   /**
+    * 重复数据检测，限制重复的字段
+    */
+   duplicateRules?: Array<string>;
+   /**
+    * 重复数据服务端检测
+    */
+   duplicateUrl?: IUrlInfo;
+}

package/src/typings/urls.d.ts

@@ -0,0 +1,70 @@
+import { IUrlInfo, RequestOptions } from '@skyfox2000/fapi';
+
+/**
+ * 请求相关常用地址接口定义
+ */
+export interface ReqUrls {
+   /**
+    * 获取分页数据列表
+    */
+   find?: IUrlInfo;
+   /**
+    * 获取数据列表
+    */
+   list?: IUrlInfo;
+   /**
+    * 获取树列表
+    */
+   tree?: IUrlInfo;
+   /**
+    * 获取数据详情
+    */
+   detail?: IUrlInfo;
+   /**
+    * 默认保存数据地址
+    */
+   save?: IUrlInfo;
+   /**
+    * 默认新增数据地址
+    */
+   insert?: IUrlInfo;
+   /**
+    * 默认更新数据地址
+    */
+   update?: IUrlInfo;
+   /**
+    * 默认删除数据地址
+    */
+   delete?: IUrlInfo;
+   /**
+    * 默认上传地址
+    */
+   upload?: IUrlInfo;
+   /**
+    * 默认下载地址
+    */
+   download?: IUrlInfo;
+
+   [key: string]: IUrlInfo | undefined;
+}
+
+export interface ApiUrls {
+   /**
+    * 所使用的API地址
+    *  - API_HOST字段名
+    */
+   api: string;
+   /**
+    * 是否需要授权Token
+    * 方法内配置授权，返回是否允许继续调用
+    * @param options 请求实际参数配置
+    * @param urlInfo 前端请求配置
+    * @param token 当前token
+    * @returns 是否允许调用接口
+    */
+   authorize?: boolean | ((options: RequestOptions, urlInfo: IUrlInfo, token: string) => boolean);
+   /**
+    * 常用接口定义
+    */
+   urls: ReqUrls;
+}

package/src/utils/cache.ts

@@ -0,0 +1,175 @@
+import { FrontCache, httpPost, ResStatus } from '@skyfox2000/fapi';
+
+/** 缓存Key枚举 */
+export enum CacheKeys {
+   // 系统级配置（不常变化）
+   SYS_CONFIG = 'SYS_CONFIG_', // 系统配置
+   APP_MENU = 'APP_MENU_', // 应用菜单
+   DICT_TYPE = 'DICT_TYPE_', // 字典类型
+   HOST_INFO = 'HOST_INFO_', // 站点信息
+
+   // 用户级配置（登录后加载）
+   APP_PERMITS = 'APP_PERMITS_', // 应用权限
+   USER_SETTINGS = 'USER_SETTINGS_', // 用户设置
+
+   // 业务数据（按需缓存）
+   DICT_DATA = 'DICT_DATA_', // 字典数据
+   COMMON_OPTIONS = 'COMMON_OPTIONS_', // 通用选项数据
+}
+
+/** 带时间戳的缓存数据结构 */
+interface TimedCacheData<T> {
+   data: T;
+   lastTime: number;
+}
+
+/**
+ * 缓存操作类
+ */
+export class Cache {
+   /**
+    * 设置缓存数据（带服务器时间）
+    */
+   public static setWithServerTime<T>(key: string, data: T, lastTime: number): void {
+      const timedData: TimedCacheData<T> = {
+         data,
+         lastTime,
+      };
+      FrontCache.set({ key, storage: 'local' }, timedData);
+   }
+
+   /**
+    * 设置缓存数据
+    */
+   public static setData<T>(key: string, data: T): void {
+      FrontCache.set({ key, storage: 'local' }, data);
+   }
+
+   /**
+    * 获取缓存数据
+    */
+   public static getData<T>(key: string): T | null {
+      const data = FrontCache.get({ key, storage: 'local' });
+      if (data && Cache.isTimedData(data)) {
+         return data.data;
+      }
+      return data ?? null;
+   }
+
+   /**
+    * 清除缓存
+    */
+   public static remove(key: string): void {
+      FrontCache.remove({ key, storage: 'local' });
+   }
+
+   /**
+    * 清理指定前缀的缓存 (基于 localStorage 实现，因为 FrontCache 未提供此方法)
+    */
+   public static clearByPrefix(prefix: string): void {
+      // 遍历 localStorage 查找匹配前缀的键
+      for (let i = 0; i < localStorage.length; i++) {
+         const key = localStorage.key(i);
+         if (key && key.startsWith('frontCache::' + prefix)) {
+            localStorage.removeItem(key);
+         }
+      }
+
+      // 如果此版本的 FrontCache 使用了内存缓存，我们也需要清理它
+      // 这里我们无法直接访问 FrontCache 的内存缓存，但我们可以利用 get/remove 方法来处理
+      // 这是一个不完美的解决方案，但在当前约束下的最佳选择
+   }
+
+   /**
+    * 清理所有缓存
+    */
+   public static clearAll(): void {
+      // 清理所有 localStorage 中的 frontCache 项
+      for (let i = localStorage.length - 1; i >= 0; i--) {
+         const key = localStorage.key(i);
+         if (key && key.startsWith('frontCache::')) {
+            localStorage.removeItem(key);
+         }
+      }
+
+      // 清理其他存储位置的缓存需要针对特定的 key 调用 remove
+      // 由于我们无法枚举 FrontCache 内存中的所有键，这也是不完美的解决方案
+   }
+
+   /**
+    * 判断是否是带时间戳的数据
+    */
+   private static isTimedData(data: any): data is TimedCacheData<any> {
+      return (
+         data && typeof data === 'object' && 'data' in data && 'lastTime' in data && typeof data.lastTime === 'number'
+      );
+   }
+}
+
+/** 最后更新时间信息接口 */
+export interface LastTimeMap {
+   [key: string]: number;
+}
+
+/**
+ * 初始化缓存检查
+ */
+export async function initCacheCheck(): Promise<void> {
+   try {
+      // 获取服务器最新时间信息
+      const result = await httpPost<LastTimeMap>(
+         {
+            api: 'PLATFORM_API',
+            url: '/api/SysCacheSvr/getLastTime',
+            loadingText: false,
+         },
+         {},
+      );
+
+      if (result?.status === ResStatus.SUCCESS) {
+         const lastTimeMap = result.data as LastTimeMap;
+
+         // 遍历所有缓存Key
+         Object.keys(lastTimeMap).forEach((key) => {
+            const newLastTime = lastTimeMap[key];
+
+            // 检查所有支持的存储类型
+            const storages = ['local', 'session'] as const;
+            storages.forEach((type) => {
+               const storage = type === 'local' ? localStorage : sessionStorage;
+
+               // 遍历存储中的所有key
+               for (let i = 0; i < storage.length; i++) {
+                  const storageKey = storage.key(i);
+                  if (!storageKey) continue;
+
+                  // 检查key是否匹配
+                  if (storageKey.endsWith(key)) {
+                     try {
+                        const value = JSON.parse(storage.getItem(storageKey)!);
+                        // 检查是否是带时间戳的数据结构
+                        if (
+                           value &&
+                           typeof value === 'object' &&
+                           'lastTime' in value &&
+                           typeof value.lastTime === 'number'
+                        ) {
+                           // 比较时间戳
+                           if (value.lastTime !== newLastTime) {
+                              // 时间不一致，删除缓存
+                              storage.removeItem(storageKey);
+                           }
+                        }
+                     } catch (e) {
+                        // 解析失败，跳过
+                        continue;
+                     }
+                  }
+               }
+            });
+         });
+      }
+   } catch (error) {
+      console.error('检查缓存更新失败', error);
+   }
+}