knt-shared 1.4.4 → 1.4.5

package/dist/style.css

@@ -474,6 +474,126 @@ video[data-v-e8cbf700] {
     border-radius: 0;
 }
 
+.readonly-field[data-v-a6d8ca62] {
+  color: var(--color-text-1);
+  line-height: 1.5;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+}
+.readonly-field-loading[data-v-a6d8ca62] {
+  opacity: 0.6;
+}
+
+/* 空值样式 */
+.readonly-field-empty[data-v-a6d8ca62] {
+  color: var(--color-text-4);
+}
+
+/* 文本样式 */
+.readonly-field-text[data-v-a6d8ca62] {
+  word-break: break-word;
+}
+
+/* 数字样式 */
+.readonly-field-number[data-v-a6d8ca62] {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Textarea 样式 */
+.readonly-field-textarea[data-v-a6d8ca62] {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Upload 容器 */
+.readonly-upload-container[data-v-a6d8ca62] {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* 图片列表（网格布局） */
+.readonly-image-list[data-v-a6d8ca62] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 8px;
+  max-width: 100%;
+}
+.readonly-image-item[data-v-a6d8ca62] {
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  border: 1px solid var(--color-border-2);
+}
+.readonly-image-item[data-v-a6d8ca62]:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 文件列表 */
+.readonly-file-list[data-v-a6d8ca62] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.readonly-file-link[data-v-a6d8ca62] {
+  color: rgb(var(--primary-6));
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.2s ease;
+}
+.readonly-file-link[data-v-a6d8ca62]:hover {
+  text-decoration: underline;
+  color: rgb(var(--primary-5));
+}
+.readonly-file-link[data-v-a6d8ca62]::before {
+  content: '📎';
+  font-size: 14px;
+}
+
+/* Select 多选 */
+.readonly-field-select-multiple[data-v-a6d8ca62] {
+  word-break: break-word;
+}
+
+/* Cascader 路径 */
+.readonly-field-cascader[data-v-a6d8ca62] {
+  word-break: break-word;
+}
+
+/* Rate */
+.readonly-field-rate[data-v-a6d8ca62] {
+  color: var(--color-text-1);
+}
+
+/* Slider */
+.readonly-field-slider[data-v-a6d8ca62] {
+  color: var(--color-text-1);
+}
+
+/* Switch */
+.readonly-field-switch[data-v-a6d8ca62] {
+  color: var(--color-text-1);
+}
+
+/* Date */
+.readonly-field-date[data-v-a6d8ca62] {
+  color: var(--color-text-1);
+}
+
+/* Range */
+.readonly-field-range[data-v-a6d8ca62] {
+  color: var(--color-text-1);
+}
+
+/* Time */
+.readonly-field-time[data-v-a6d8ca62] {
+  color: var(--color-text-1);
+}
+
 .basic-text-ellipsis[data-v-05b93f77] {
   width: 100%;
 }
@@ -482,57 +602,57 @@ video[data-v-e8cbf700] {
   word-wrap: break-word;
 }
 
-.edit-cell[data-v-3dab69d1] {
+.edit-cell[data-v-52761074] {
   width: 100%;
 }
-.edit-cell-input[data-v-3dab69d1] {
+.edit-cell-input[data-v-52761074] {
   width: 100%;
 }
-.edit-cell-error[data-v-3dab69d1] {
+.edit-cell-error[data-v-52761074] {
   color: rgb(var(--danger-6));
   font-size: 12px;
   line-height: 1.5;
   margin-top: 4px;
 }
 
-.basic-table-wrapper[data-v-587bcc14] {
+.basic-table-wrapper[data-v-efd7cfc7] {
   background: var(--color-bg-2, #fff);
   border-radius: 4px;
   padding: 16px;
 }
-.basic-table-toolbar[data-v-587bcc14] {
+.basic-table-toolbar[data-v-efd7cfc7] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   /* padding: 12px 0; */
   margin-bottom: 12px;
 }
-.toolbar-left[data-v-587bcc14] {
+.toolbar-left[data-v-efd7cfc7] {
   display: flex;
   align-items: center;
 }
-.toolbar-title[data-v-587bcc14] {
+.toolbar-title[data-v-efd7cfc7] {
   font-size: 16px;
   font-weight: 600;
   color: var(--color-text-1, #1d2129);
 }
-.toolbar-right[data-v-587bcc14] {
+.toolbar-right[data-v-efd7cfc7] {
   display: flex;
   align-items: center;
 }
-.basic-table-search[data-v-587bcc14] {
+.basic-table-search[data-v-efd7cfc7] {
   /* margin-bottom: 16px; */
   /* padding: 16px; */
   background: var(--color-bg-1, #fff);
   border-radius: 4px;
   padding: 10px 0;
 }
-.column-setting[data-v-587bcc14] {
+.column-setting[data-v-efd7cfc7] {
   width: 200px;
   max-height: 400px;
   overflow-y: auto;
 }
-.column-setting-item[data-v-587bcc14] {
+.column-setting-item[data-v-efd7cfc7] {
   padding: 8px 0;
 }
 

package/dist/utils/diff.d.ts

@@ -0,0 +1,263 @@
+/**
+ * 数组对比选项
+ */
+export interface DiffOptions<T = any> {
+    /**
+     * 唯一标识字段名
+     * @default 'id'
+     */
+    uniqueKey?: string;
+    /**
+     * 对比深度
+     * - shallow: 浅层对比，只对比第一层字段
+     * - deep: 深度对比，递归对比所有层级
+     * @default 'shallow'
+     */
+    compareDepth?: 'shallow' | 'deep';
+    /**
+     * 指定需要对比的字段（只对比这些字段）
+     * 如果不指定，则对比所有字段（excludeKeys 除外）
+     */
+    compareFields?: (keyof T)[];
+    /**
+     * 排除不需要对比的字段
+     */
+    excludeKeys?: (keyof T)[];
+    /**
+     * 删除标记字段名
+     * @default 'delFlag'
+     */
+    deletedFlag?: string;
+    /**
+     * 删除标记值
+     * @default 1
+     */
+    deletedFlagValue?: any;
+}
+/**
+ * 数组对比结果
+ */
+export interface DiffResult<T = any> {
+    /**
+     * 被删除的数据（已添加删除标记）
+     */
+    deleted: T[];
+    /**
+     * 被修改的数据（包含修改后的值）
+     */
+    modified: T[];
+    /**
+     * 新增的数据
+     */
+    added: T[];
+}
+/**
+ * 对象对比选项
+ */
+export interface CompareOptions<T = any> {
+    /**
+     * 对比深度
+     * - shallow: 浅层对比，只对比第一层字段
+     * - deep: 深度对比，递归对比所有层级
+     * @default 'shallow'
+     */
+    depth?: 'shallow' | 'deep';
+    /**
+     * 指定需要对比的字段（只对比这些字段）
+     */
+    compareFields?: (keyof T)[];
+    /**
+     * 排除不需要对比的字段
+     */
+    excludeKeys?: (keyof T)[];
+}
+/**
+ * 对比两个对象是否相等
+ *
+ * @param obj1 对象1
+ * @param obj2 对象2
+ * @param options 对比选项
+ * @returns 是否相等
+ *
+ * @example
+ * ```ts
+ * const obj1 = { id: 1, name: '张三', age: 25 };
+ * const obj2 = { id: 1, name: '张三', age: 26 };
+ *
+ * // 浅层对比所有字段
+ * compareObjects(obj1, obj2); // false
+ *
+ * // 只对比 name 字段
+ * compareObjects(obj1, obj2, { compareFields: ['name'] }); // true
+ *
+ * // 排除 age 字段
+ * compareObjects(obj1, obj2, { excludeKeys: ['age'] }); // true
+ *
+ * // 深度对比
+ * const obj3 = { id: 1, user: { name: '张三', age: 25 } };
+ * const obj4 = { id: 1, user: { name: '张三', age: 25 } };
+ * compareObjects(obj3, obj4, { depth: 'deep' }); // true
+ * ```
+ */
+export declare function compareObjects<T extends Record<string, any>>(obj1: T, obj2: T, options?: CompareOptions<T>): boolean;
+/**
+ * 对比两个数组，识别删除、修改和新增的数据
+ *
+ * @param original 原始数据（后台返回的数据）
+ * @param current 当前数据（前端修改后的数据）
+ * @param options 对比选项
+ * @returns 对比结果，包含删除、修改和新增的数据
+ *
+ * @example
+ * ```ts
+ * // 基础使用
+ * const originalData = [
+ *   { id: 1, name: '张三', age: 25 },
+ *   { id: 2, name: '李四', age: 30 },
+ *   { id: 3, name: '王五', age: 28 }
+ * ];
+ *
+ * const currentData = [
+ *   { id: 1, name: '张三', age: 26 },  // 修改了 age
+ *   { id: 2, name: '李四', age: 30 },  // 未修改
+ *   { id: 4, name: '赵六', age: 32 }   // 新增
+ * ];
+ *
+ * const result = diffArrays(originalData, currentData);
+ * // 结果：
+ * // {
+ * //   deleted: [{ id: 3, name: '王五', age: 28, delFlag: 1 }],
+ * //   modified: [{ id: 1, name: '张三', age: 26 }],
+ * //   added: [{ id: 4, name: '赵六', age: 32 }]
+ * // }
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 使用自定义选项
+ * const result = diffArrays(originalData, currentData, {
+ *   uniqueKey: 'userId',           // 使用 userId 作为唯一标识
+ *   compareDepth: 'deep',          // 深度对比
+ *   compareFields: ['name', 'age'], // 只对比 name 和 age 字段
+ *   deletedFlag: 'isDeleted',      // 使用 isDeleted 作为删除标记
+ *   deletedFlagValue: true         // 删除标记值为 true
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 排除某些字段的对比
+ * const result = diffArrays(originalData, currentData, {
+ *   excludeKeys: ['updateTime', 'version'] // 不对比这些字段
+ * });
+ * ```
+ */
+export declare function diffArrays<T extends Record<string, any>>(original: T[], current: T[], options?: DiffOptions<T>): DiffResult<T>;
+/**
+ * 查找被删除的数据（在原始数据中存在，但在当前数据中不存在）
+ *
+ * @param original 原始数据（后台返回的数据）
+ * @param current 当前数据（前端修改后的数据）
+ * @param options 对比选项
+ * @returns 被删除的数据（已添加删除标记）
+ *
+ * @example
+ * ```ts
+ * const original = [
+ *   { id: 1, name: '张三' },
+ *   { id: 2, name: '李四' },
+ *   { id: 3, name: '王五' }
+ * ];
+ * const current = [
+ *   { id: 1, name: '张三' },
+ *   { id: 2, name: '李四' }
+ * ];
+ *
+ * const deleted = findDeleted(original, current);
+ * // [{ id: 3, name: '王五', delFlag: 1 }]
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 自定义删除标记
+ * const deleted = findDeleted(original, current, {
+ *   deletedFlag: 'isDeleted',
+ *   deletedFlagValue: true
+ * });
+ * // [{ id: 3, name: '王五', isDeleted: true }]
+ * ```
+ */
+export declare function findDeleted<T extends Record<string, any>>(original: T[], current: T[], options?: DiffOptions<T>): T[];
+/**
+ * 查找被修改的数据（在两个数组中都存在，但内容不同）
+ *
+ * @param original 原始数据（后台返回的数据）
+ * @param current 当前数据（前端修改后的数据）
+ * @param options 对比选项
+ * @returns 被修改的数据（包含修改后的值）
+ *
+ * @example
+ * ```ts
+ * const original = [
+ *   { id: 1, name: '张三', age: 25 },
+ *   { id: 2, name: '李四', age: 30 }
+ * ];
+ * const current = [
+ *   { id: 1, name: '张三', age: 26 },  // age 被修改
+ *   { id: 2, name: '李四', age: 30 }   // 未修改
+ * ];
+ *
+ * const modified = findModified(original, current);
+ * // [{ id: 1, name: '张三', age: 26 }]
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 只对比特定字段
+ * const modified = findModified(original, current, {
+ *   compareFields: ['name']  // 只对比 name 字段
+ * });
+ *
+ * // 排除某些字段
+ * const modified = findModified(original, current, {
+ *   excludeKeys: ['updateTime']  // 不对比 updateTime 字段
+ * });
+ * ```
+ */
+export declare function findModified<T extends Record<string, any>>(original: T[], current: T[], options?: DiffOptions<T>): T[];
+/**
+ * 查找新增的数据（在当前数据中存在，但在原始数据中不存在）
+ *
+ * @param original 原始数据（后台返回的数据）
+ * @param current 当前数据（前端修改后的数据）
+ * @param options 对比选项
+ * @returns 新增的数据
+ *
+ * @example
+ * ```ts
+ * const original = [
+ *   { id: 1, name: '张三' },
+ *   { id: 2, name: '李四' }
+ * ];
+ * const current = [
+ *   { id: 1, name: '张三' },
+ *   { id: 2, name: '李四' },
+ *   { id: 3, name: '王五' }  // 新增
+ * ];
+ *
+ * const added = findAdded(original, current);
+ * // [{ id: 3, name: '王五' }]
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 批量导入场景
+ * function handleImport(existingData: any[], importData: any[]) {
+ *   const added = findAdded(existingData, importData);
+ *   console.log(`导入 ${importData.length} 条，新增 ${added.length} 条`);
+ *   await api.batchInsert(added);
+ * }
+ * ```
+ */
+export declare function findAdded<T extends Record<string, any>>(original: T[], current: T[], options?: DiffOptions<T>): T[];
+//# sourceMappingURL=diff.d.ts.map

package/dist/utils/diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../../src/utils/diff.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,GAAG;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAElC;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;IAE5B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;IAE1B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,GAAG,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,GAAG;IACjC;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IAEb;;OAEG;IACH,QAAQ,EAAE,CAAC,EAAE,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,GAAG;IACrC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;IAE5B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;CAC3B;AAkPD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1D,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,CAAC,EACP,OAAO,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,GAC1B,OAAO,CAQT;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACtD,QAAQ,EAAE,CAAC,EAAE,EACb,OAAO,EAAE,CAAC,EAAE,EACZ,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GACvB,UAAU,CAAC,CAAC,CAAC,CAMf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACvD,QAAQ,EAAE,CAAC,EAAE,EACb,OAAO,EAAE,CAAC,EAAE,EACZ,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GACvB,CAAC,EAAE,CAgCL;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACxD,QAAQ,EAAE,CAAC,EAAE,EACb,OAAO,EAAE,CAAC,EAAE,EACZ,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GACvB,CAAC,EAAE,CAyCL;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACrD,QAAQ,EAAE,CAAC,EAAE,EACb,OAAO,EAAE,CAAC,EAAE,EACZ,OAAO,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GACvB,CAAC,EAAE,CA2BL"}

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './format';
 export * from './validate';
 export * from './debounce';
+export * from './diff';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "knt-shared",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "KNT共享组件库和工具函数",
   "author": "hss",
   "main": "dist/index.cjs.js",