@kayak-sj/design 1.0.56 → 1.0.58

package/dist/components/index.d.ts

@@ -52,4 +52,5 @@ export declare const KColorPicker: import('vue').DefineComponent<{}, () => impor
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { updateUploadConfig, getUploadConfig } from '../config/uploadConfig';
 export type { KUploadFileItem, UploadConfig } from '../config/uploadConfig';
+export type { KUploadBeforeRemove, KUploadBeforeUpload, KUploadCutterOption, KUploadListType, KUploadOnChange, KUploadOnError, KUploadOnExceed, KUploadOnPreview, KUploadOnProgress, KUploadOnRemove, KUploadOnSuccess, KUploadProps, KUploadTipType } from './k-upload/types';
 export { createUploadFileItem, hasUploadSubmitFields, toUploadFiles, toUploadSubmitFields, type CreateUploadFileItemOptions, type ToUploadFilesOptions, type ToUploadSubmitFieldsOptions, type UploadSubmitFields } from './k-upload/utils/uploadFileValue';

package/dist/components/k-upload/KUpload.d.ts

@@ -1,4 +1,4 @@
-import { UploadFile, UploadInstance, UploadUserFile } from 'element-plus';
+import { UploadFile, UploadInstance, UploadProgressEvent, UploadUserFile } from 'element-plus';
 import { KUploadFileItem } from '../../config/uploadConfig';
 import { KUploadListType, KUploadProps } from './types';
 declare var __VLS_10: {}, __VLS_12: {}, __VLS_27: {}, __VLS_29: {}, __VLS_43: {
@@ -26,6 +26,7 @@ declare const __VLS_base: import('vue').DefineComponent<KUploadProps, {
     clearFiles: () => void | undefined;
     uploadRef: import('vue').Ref<UploadInstance | undefined, UploadInstance | undefined>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    progress: (evt: UploadProgressEvent, file: UploadFile) => any;
     change: (file: UploadFile) => any;
     error: (error: Error, file: UploadFile) => any;
     success: (response: Record<string, unknown>, file: KUploadFileItem) => any;
@@ -34,6 +35,7 @@ declare const __VLS_base: import('vue').DefineComponent<KUploadProps, {
     preview: (file: KUploadFileItem) => any;
     exceed: (files: File[], uploadFiles: UploadUserFile[]) => any;
 }, string, import('vue').PublicProps, Readonly<KUploadProps> & Readonly<{
+    onProgress?: ((evt: UploadProgressEvent, file: UploadFile) => any) | undefined;
     onChange?: ((file: UploadFile) => any) | undefined;
     onError?: ((error: Error, file: UploadFile) => any) | undefined;
     onSuccess?: ((response: Record<string, unknown>, file: KUploadFileItem) => any) | undefined;

package/dist/components/k-upload/types.d.ts

@@ -1,44 +1,242 @@
+import { UploadFile, UploadFiles, UploadProgressEvent, UploadRawFile, UploadUserFile } from 'element-plus';
 import { KUploadFileItem } from '../../config/uploadConfig';
 /** KUpload 支持的列表展示类型（对齐 legacy listType） */
 export type KUploadListType = 'text' | 'picture' | 'picture-card' | 'video' | 'audio' | 'lottie' | 'file';
 /** 提示展示形式 */
 export type KUploadTipType = 'tooltip' | 'text';
+/**
+ * 上传前钩子（对齐 ElUpload `before-upload`）。
+ *
+ * @param rawFile - 用户选中的原始文件
+ * @returns `false` 拦截上传；返回 `File`/`Blob` 则替换实际上传文件（常用于压缩）；其余视为放行
+ */
+export type KUploadBeforeUpload = (rawFile: UploadRawFile) => boolean | void | File | Blob | Promise<boolean | void | File | Blob>;
+/**
+ * 删除前钩子（对齐 ElUpload `before-remove`）。
+ *
+ * @param uploadFile - 即将删除的文件项
+ * @param uploadFiles - 当前文件列表
+ * @returns `false` 取消删除；`true` 或 void 继续删除
+ */
+export type KUploadBeforeRemove = (uploadFile: UploadFile, uploadFiles: UploadFiles) => boolean | void | Promise<boolean | void>;
+/**
+ * 文件状态变化钩子（对齐 ElUpload `on-change`）。
+ * 组件同时会 `emit('change', uploadFile)`。
+ *
+ * @param uploadFile - 变化的文件项
+ * @param uploadFiles - 当前文件列表
+ */
+export type KUploadOnChange = (uploadFile: UploadFile, uploadFiles: UploadUserFile[]) => void;
+/**
+ * 上传成功钩子（对齐 ElUpload `on-success`）。
+ * 组件同时会 `emit('success', response, item)`（`item` 为规范化后的 {@link KUploadFileItem}）。
+ *
+ * @param response - 上传接口原始响应
+ * @param uploadFile - Element Plus 文件项
+ * @param uploadFiles - 当前文件列表
+ */
+export type KUploadOnSuccess = (response: unknown, uploadFile: UploadFile, uploadFiles: UploadUserFile[]) => void;
+/**
+ * 上传失败钩子（对齐 ElUpload `on-error`）。
+ * 组件同时会 `emit('error', error, uploadFile)`。
+ *
+ * @param error - 错误对象
+ * @param uploadFile - 失败的文件项
+ * @param uploadFiles - 当前文件列表
+ */
+export type KUploadOnError = (error: Error, uploadFile: UploadFile, uploadFiles: UploadUserFile[]) => void;
+/**
+ * 删除完成钩子（对齐 ElUpload `on-remove`）。
+ * 组件同时会 `emit('remove', item)`（仅业务列表中存在的项）。
+ *
+ * @param uploadFile - 被删除的文件项
+ * @param uploadFiles - 删除后的文件列表
+ */
+export type KUploadOnRemove = (uploadFile: UploadFile, uploadFiles: UploadUserFile[]) => void;
+/**
+ * 点击已上传文件钩子（对齐 ElUpload `on-preview`）。
+ * 组件同时会 `emit('preview', item)`，并默认预览图片或下载。
+ *
+ * @param uploadFile - 被点击的文件项
+ */
+export type KUploadOnPreview = (uploadFile: UploadFile) => void;
+/**
+ * 超出数量限制钩子（对齐 ElUpload `on-exceed`）。
+ * 组件同时会 `emit('exceed', files, uploadFiles)`。
+ *
+ * @param files - 本次选中的超出文件
+ * @param uploadFiles - 当前已有文件列表
+ */
+export type KUploadOnExceed = (files: File[], uploadFiles: UploadUserFile[]) => void;
+/**
+ * 上传进度钩子（对齐 ElUpload `on-progress`）。
+ * 组件同时会 `emit('progress', ...)`，模板侧优先用 `@progress`。
+ *
+ * @param evt - 进度事件（含 `percent`）
+ * @param uploadFile - 当前上传中的文件
+ * @param uploadFiles - 当前文件列表
+ */
+export type KUploadOnProgress = (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadUserFile[]) => void;
 /** 图片裁剪配置（透传 vue-img-cutter，仅列出常用项） */
 export interface KUploadCutterOption {
-    /** 裁剪宽度 */
+    /** 裁剪框宽度（px） */
     cutWidth?: number;
-    /** 裁剪高度 */
+    /** 裁剪框高度（px） */
     cutHeight?: number;
-    /** 是否可调整裁剪框大小 */
+    /** 是否允许拖拽调整裁剪框大小 */
     sizeChange?: boolean;
-    /** 弹窗标题 */
+    /** 裁剪弹窗标题 */
     modalTitle?: string;
     /** 其余 vue-img-cutter 属性 */
     [key: string]: unknown;
 }
+/**
+ * KUpload 组件 props。
+ *
+ * 生命周期钩子分两类：
+ * - **可拦截**：`beforeUpload` / `beforeRemove`（可返回 false 或替换文件）
+ * - **仅通知**：`onChange` / `onSuccess` / `onError` / `onRemove` / `onPreview` / `onProgress` / `onExceed`
+ *   （与同名 `emit` 并行触发，便于 KForm `componentProps` 传入回调）
+ */
 export interface KUploadProps {
+    /**
+     * 已上传文件列表（受控）。
+     * @default []
+     */
     modelValue?: KUploadFileItem[];
+    /**
+     * 列表展示类型。
+     * @default 'picture'
+     */
     listType?: KUploadListType;
+    /**
+     * 自定义上传地址；空则按 `listType` 走全局 UploadConfig 默认图床/文件地址。
+     * @default ''
+     */
     action?: string;
+    /**
+     * 允许的文件后缀，逗号分隔（如 `.png,.jpg`）；空则按 `listType` 使用内置字典。
+     * @default ''
+     */
     accept?: string;
+    /**
+     * 最大上传数量；`1` 时允许替换（不向 ElUpload 传 limit）。
+     */
     limit?: number;
+    /**
+     * 单文件大小上限（MB）。
+     * @default 2
+     */
     maxSize?: number;
+    /**
+     * 是否禁用（禁用时隐藏触发器，仅展示已上传列表）。
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * 上传按钮文案（非 picture-card / lottie 触发器）。
+     * @default '点击上传'
+     */
     btnText?: string;
+    /**
+     * 模板编码，用于模板下载与上传附加字段 `type_code`。
+     * @default ''
+     */
     templateCode?: string;
-    /** 模板下载域：`app` 业务应用（默认），`base` cms-base */
+    /**
+     * 模板下载域：`app` 业务应用（默认），`base` cms-base。
+     * @default 'app'
+     */
     templateDomain?: 'base' | 'app';
+    /**
+     * 模板下载根路径；空则读全局 UploadConfig。
+     * @default ''
+     */
     templateDownloadUrl?: string;
+    /**
+     * 模板下载按钮文案。
+     * @default '模版下载'
+     */
     templateBtnText?: string;
+    /**
+     * 提示展示形式：`text` 下方文案，`tooltip` 问号气泡。
+     * @default 'text'
+     */
     tipType?: KUploadTipType;
+    /**
+     * 自定义提示文案；空则按 accept/maxSize 自动生成。
+     * @default ''
+     */
     fileTips?: string;
+    /**
+     * 上传成功后是否弹出成功 Toast。
+     * @default true
+     */
     showSuccMessage?: boolean;
+    /**
+     * 是否选完即传；开启 `openCutter` 时强制为 false。
+     * @default true
+     */
     autoUpload?: boolean;
-    /** 开启图片前置裁剪（自动关闭 autoUpload） */
+    /**
+     * 开启图片前置裁剪（自动关闭 `autoUpload`）。
+     * @default false
+     */
     openCutter?: boolean;
+    /**
+     * 裁剪弹窗配置（透传 vue-img-cutter）。
+     * @default {}
+     */
     cutterOption?: KUploadCutterOption;
+    /**
+     * 上传前钩子：内置后缀/大小校验通过后调用。
+     * 返回 `File`/`Blob` 可替换上传文件（如 compressorjs 压缩结果）。
+     * @see {@link KUploadBeforeUpload}
+     */
+    beforeUpload?: KUploadBeforeUpload;
+    /**
+     * 删除前钩子：返回 `false` 可取消删除。
+     * @see {@link KUploadBeforeRemove}
+     */
+    beforeRemove?: KUploadBeforeRemove;
+    /**
+     * 文件状态变化（ready / uploading / success / fail）。
+     * @see {@link KUploadOnChange}
+     */
+    onChange?: KUploadOnChange;
+    /**
+     * 上传成功（在写入 `modelValue`、成功 Toast 之后）。
+     * @see {@link KUploadOnSuccess}
+     */
+    onSuccess?: KUploadOnSuccess;
+    /**
+     * 上传失败（在错误 Toast、从列表移除之后）。
+     * @see {@link KUploadOnError}
+     */
+    onError?: KUploadOnError;
+    /**
+     * 删除完成（校验拦截产生的伪删除不会触发）。
+     * @see {@link KUploadOnRemove}
+     */
+    onRemove?: KUploadOnRemove;
+    /**
+     * 点击已上传文件（在默认预览/下载之前触发，可用于覆盖默认行为时先感知）。
+     * @see {@link KUploadOnPreview}
+     */
+    onPreview?: KUploadOnPreview;
+    /**
+     * 上传进度。
+     * @see {@link KUploadOnProgress}
+     */
+    onProgress?: KUploadOnProgress;
+    /**
+     * 选中文件数超出 `limit`。
+     * @see {@link KUploadOnExceed}
+     */
+    onExceed?: KUploadOnExceed;
 }
 /** #file / #preview 等作用域插槽参数 */
 export interface KUploadFileSlotProps {
+    /** 当前文件项 */
     file: KUploadFileItem;
 }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./chunks/componentRegistry-6at2AsFD.js";
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./chunks/componentRegistry-D5JgphAl.js";
 import { t as _ } from "./chunks/_plugin-vue_export-helper-B3ysoDQm.js";
 import { a as v, d as y, i as ee, l as te, n as b, r as ne, u as re } from "./chunks/editorValue-DSKvW8ty.js";
 import { Fragment as x, Transition as S, computed as C, createBlock as w, createCommentVNode as T, createElementBlock as E, createElementVNode as D, createSlots as O, createTextVNode as k, createVNode as A, defineComponent as j, guardReactiveProps as ie, h as M, inject as ae, mergeDefaults as oe, mergeProps as N, nextTick as P, normalizeClass as F, normalizeProps as I, normalizeStyle as se, onBeforeUnmount as ce, onMounted as le, openBlock as L, provide as ue, reactive as de, ref as R, renderList as z, renderSlot as B, resolveComponent as fe, resolveDirective as pe, resolveDynamicComponent as me, shallowRef as he, toDisplayString as V, toRef as H, toValue as U, unref as W, useAttrs as ge, useSlots as G, useTemplateRef as _e, watch as K, withCtx as q, withDirectives as ve, withModifiers as ye } from "vue";
@@ -464,7 +464,7 @@ var it = /* @__PURE__ */ j({
 		})), g = C(() => ({
 			"--k-form-cols": String(a.colLength),
 			"--k-form-label-width": m.value,
-			"--k-form-grid-min-col": "calc(var(--k-form-label-width) + var(--k-form-control-max-width))",
+			"--k-form-grid-min-col": "calc(var(--k-form-label-width) + var(--k-form-control-min-width))",
 			"--k-form-min-width": "calc(var(--k-form-grid-min-col) + var(--k-form-padding-x) * 2)"
 		})), _ = C(() => a.modelValue !== void 0), v = et({
 			formConfigs: H(a, "formConfigs"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kayak-sj/design",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "type": "module",
   "description": "PC 组件库（Vue3 + Element Plus，对应旧 @kayak/kayak-design-vue2）",
   "license": "ISC",

package/src/styles/components/_k-form.scss

@@ -7,7 +7,7 @@
   flex-wrap: wrap;
 
   /// 编辑/弹窗：Grid 多列 + 右对齐标签
-  /// auto-fit：列最小宽给足「偏宽 label(含 tip) + 300px 控件」，不够两列时先换行，不改 label 宽度算法
+  /// auto-fit：列最小宽 = label + 控件 min(200)；控件理想 300，可先缩到 200 再换列
   &--grid-layout {
     display: grid;
     /* 面板再窄也不把控件压扁，由外层滚动条横向承载 */
@@ -99,6 +99,8 @@
     .el-cascader,
     .k-datePicker {
       max-width: var(--k-form-control-max-width);
+      /* 与换行阈值一致：可从 300 压到 200，再窄则由 grid 折列 */
+      min-width: min(100%, var(--k-form-control-min-width));
     }
 
     .k-form-date-picker--datetimerange,

package/src/styles/tokens/_css-vars.scss

@@ -92,8 +92,9 @@
   --k-form-control-border: var(--k-color-border);
   --k-form-control-bg: var(--k-color-bg-surface);
   --k-form-control-max-width: #{sem.$form-control-max-width};
-  /// 引用 label / control 变量，便于表单实例覆盖 --k-form-label-width 后自动重算
-  --k-form-grid-min-col: calc(var(--k-form-label-width) + var(--k-form-control-max-width));
+  --k-form-control-min-width: #{sem.$form-control-min-width};
+  /// 换行阈值 = label + 控件 min；空间够时控件仍可撑到 max。表单实例覆盖 --k-form-label-width 后自动重算
+  --k-form-grid-min-col: calc(var(--k-form-label-width) + var(--k-form-control-min-width));
   --k-form-min-width: calc(var(--k-form-grid-min-col) + var(--k-form-padding-x) * 2);
   --k-form-textarea-max-width: #{sem.$form-textarea-max-width};
 

package/src/styles/tokens/_semantic.scss

@@ -29,9 +29,12 @@ $form-label-width: 110px !default;
 $form-label-width-query: 120px !default;
 $form-control-height: 32px !default;
 $form-control-font-size: typo.$font-size-medium !default;
+/** 控件理想宽度；空间充足时不超过此值 */
 $form-control-max-width: 300px !default;
-/** grid 单列最小宽 = label + 控件 max；运行时随 --k-form-label-width 变化 */
-$form-grid-min-col: calc(#{$form-label-width} + #{$form-control-max-width}) !default;
+/** 控件最小宽度；缩到此值后才换列，避免过早折行 */
+$form-control-min-width: 200px !default;
+/** grid 单列最小宽 = label + 控件 min；运行时随 --k-form-label-width 变化 */
+$form-grid-min-col: calc(#{$form-label-width} + #{$form-control-min-width}) !default;
 /** 编辑表单整体最小宽：单列 label+控件+左右 padding，再窄则横向撑开由容器滚动 */
 $form-min-width: calc(#{$form-grid-min-col} + #{$form-padding-x} * 2) !default;
 $form-textarea-max-width: 500px !default;