@veltra/desktop 1.7.9 → 1.7.11

package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js

@@ -2,9 +2,9 @@ import _sfc_main from "../tip/tip.js";
 import _sfc_main$1 from "../grid/grid-item.js";
 import { defineField, formItemCls } from "./helper.js";
 import { validateField } from "./validate.js";
-import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, renderSlot, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { Transition, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, renderSlot, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
 import { useConfig, useFallbackProps } from "@veltra/compositions";
-import { bem, injectFormContext, withUnit } from "@veltra/utils";
+import { bem, extractNormalVNodes, injectFormContext, withUnit } from "@veltra/utils";
 import { o } from "@cat-kit/core";
 //#region src/components/form-item/form-item.vue?vue&type=script&setup=true&lang.tsx
 var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -25,10 +25,27 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		rules: {},
 		size: {}
 	},
-	setup(__props) {
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		/** 表单组件上下文 */
-		const { formProps, registerField, unregisterField, shouldValidate, handleFieldChange } = injectFormContext();
+		const { formProps, registerField, unregisterField, shouldValidate, handleFieldUpdate, handleFieldChange } = injectFormContext();
+		function wrapControlChange(node) {
+			if (!node || typeof node.type === "symbol") return node;
+			return cloneVNode(node, { onChange: (...args) => {
+				emit("change", ...args);
+				if (props.field) handleFieldChange?.(props.field, ...args);
+			} });
+		}
+		/**
+		* 承载默认插槽并拦截控件 change。
+		* 必须经填充插槽接收内容（而非直接读 UFormItem 的 $slots）：
+		* 读父级 $slots 时组件自身没有更新路径，父级重渲染后动态 props（disabled、data 等）会冻结在首帧。
+		*/
+		function ContentSlot(_, { slots }) {
+			return extractNormalVNodes(slots.default?.() ?? []).map(wrapControlChange);
+		}
 		const { config } = useConfig();
 		const { size, readonly } = useFallbackProps([formProps ?? {}, props], {
 			size: "default",
@@ -77,7 +94,7 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			stopWatchFieldValue?.();
 			if (!field || !model) return;
 			stopWatchFieldValue = watch(() => o(model).get(field), (value) => {
-				handleFieldChange?.(field, value);
+				handleFieldUpdate?.(field, value);
 				fieldItem.validate();
 			});
 		}, { immediate: true });
@@ -102,7 +119,10 @@ var form_item_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(formItemCls).e("tip-label")) }, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label) + toDisplayString(labelPosition.value === "top" ? "" : ":"), 1)])], 2)]),
 					_: 3
 				}, 8, ["content", "class"])) : renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label) + toDisplayString(labelPosition.value === "top" ? "" : ":"), 1)], void 0, 1)], 6)) : createCommentVNode("v-if", true), createElementVNode("section", { class: normalizeClass(unref(formItemCls).e("wrapper")) }, [
-					createElementVNode("div", { class: normalizeClass(unref(formItemCls).e("content")) }, [renderSlot(_ctx.$slots, "default")], 2),
+					createElementVNode("div", { class: normalizeClass(unref(formItemCls).e("content")) }, [createVNode(ContentSlot, null, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+						_: 3
+					})], 2),
 					createCommentVNode(" 只有表单控件处于非只读状态时，才显示错误提示 "),
 					!unref(readonly) && !unref(formProps)?.noTips ? (openBlock(), createElementBlock("section", {
 						key: 0,

package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-item.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/form-item/form-item.vue"],"sourcesContent":["<template>\n  <u-grid-item :span=\"span\" :class=\"className\">\n    <label\n      v-if=\"props.label || $slots.label\"\n      :class=\"[cls.e('label'), bem.is('required', !!rules?.required)]\"\n      :style=\"labelStyles\"\n    >\n      <u-tip v-if=\"tips\" :content=\"tips\" :class=\"cls.e('tips')\" :show-delay=\"500\">\n        <span :class=\"cls.e('tip-label')\">\n          <slot name=\"label\">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>\n        </span>\n      </u-tip>\n      <template v-else>\n        <slot name=\"label\">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>\n      </template>\n    </label>\n\n    <section :class=\"cls.e('wrapper')\">\n      <div :class=\"cls.e('content')\">\n        <slot></slot>\n      </div>\n\n      <!-- 只有表单控件处于非只读状态时，才显示错误提示 -->\n      <section :class=\"cls.e('error')\" v-if=\"!readonly && !formProps?.noTips\">\n        <transition name=\"form-item-tips\" mode=\"out-in\">\n          <span :class=\"cls.e('error-text')\" v-if=\"!!errorTip\">\n            {{ errorTip }}\n          </span>\n        </transition>\n      </section>\n    </section>\n  </u-grid-item>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { useConfig, useFallbackProps } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { type CSSProperties, computed, onBeforeUnmount, shallowRef, watch } from 'vue'\n\nimport type { FormItemProps, ComponentSize } from '../../types'\nimport { UGridItem } from '../grid'\nimport { UTip } from '../tip'\nimport { formItemCls as cls, defineField } from './helper'\nimport { validateField } from './validate'\n\ndefineOptions({ name: 'UFormItem' })\n\nconst props = withDefaults(defineProps<FormItemProps>(), { readonly: undefined })\n\ndefineSlots<{\n  /** 标签插槽 */\n  label?: () => any\n  default?: () => any\n}>()\n\n/** 表单组件上下文 */\nconst { formProps, registerField, unregisterField, shouldValidate, handleFieldChange } =\n  injectFormContext()\n\nconst { config } = useConfig()\n\nconst { size, readonly } = useFallbackProps([formProps ?? {}, props], {\n  size: 'default' as ComponentSize,\n  readonly: false\n})\n\nconst errorTip = shallowRef<string>()\n/** 递增序号，丢弃过期的异步校验结果 */\nlet validateSeq = 0\n/** 最近一次 validate 的 Promise，供过期调用等待最新结果 */\nlet latestValidatePromise: Promise<boolean> = Promise.resolve(true)\n\nconst labelPosition = computed(() => props.labelPosition ?? formProps?.labelPosition ?? 'left')\n\nconst className = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('error', !!errorTip.value),\n    bem.is('label-top', labelPosition.value === 'top')\n  ].join(' ')\n})\n\n/** label样式 */\nconst labelStyles = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top') return {}\n  return {\n    width: withUnit(props.labelWidth ?? formProps?.labelWidth ?? config.form.labelWidth, 'px')\n  }\n})\n\nconst fieldItem = defineField({\n  clearValidate() {\n    errorTip.value = ''\n  },\n  async validate() {\n    if (!props.field || !formProps?.model || !props.rules || !shouldValidate?.()) return true\n\n    const seq = ++validateSeq\n\n    latestValidatePromise = validateField(formProps.model!, props.field!, props.rules!).then(\n      (tip) => {\n        if (seq !== validateSeq) return latestValidatePromise\n\n        errorTip.value = tip\n        return !errorTip.value\n      }\n    )\n    return latestValidatePromise\n  }\n})\n\nwatch(\n  () => props.field,\n  (field, oldField) => {\n    if (oldField) {\n      unregisterField?.(oldField)\n    }\n    if (field) {\n      registerField?.(field, fieldItem)\n    }\n  },\n  { immediate: true }\n)\n\nlet stopWatchFieldValue: (() => void) | undefined\n\nwatch(\n  [() => formProps?.model, () => props.field],\n  ([model, field]) => {\n    stopWatchFieldValue?.()\n\n    if (!field || !model) return\n\n    stopWatchFieldValue = watch(\n      () => o(model).get(field),\n      (value) => {\n        handleFieldChange?.(field, value)\n        fieldItem.validate()\n      }\n    )\n  },\n  { immediate: true }\n)\n\nonBeforeUnmount(() => {\n  props.field && unregisterField?.(props.field)\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"form-item.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/form-item/form-item.vue"],"sourcesContent":["<template>\n  <u-grid-item :span=\"span\" :class=\"className\">\n    <label\n      v-if=\"props.label || $slots.label\"\n      :class=\"[cls.e('label'), bem.is('required', !!rules?.required)]\"\n      :style=\"labelStyles\"\n    >\n      <u-tip v-if=\"tips\" :content=\"tips\" :class=\"cls.e('tips')\" :show-delay=\"500\">\n        <span :class=\"cls.e('tip-label')\">\n          <slot name=\"label\">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>\n        </span>\n      </u-tip>\n      <template v-else>\n        <slot name=\"label\">{{ label }}{{ labelPosition === 'top' ? '' : ':' }}</slot>\n      </template>\n    </label>\n\n    <section :class=\"cls.e('wrapper')\">\n      <div :class=\"cls.e('content')\">\n        <ContentSlot>\n          <slot></slot>\n        </ContentSlot>\n      </div>\n\n      <!-- 只有表单控件处于非只读状态时，才显示错误提示 -->\n      <section :class=\"cls.e('error')\" v-if=\"!readonly && !formProps?.noTips\">\n        <transition name=\"form-item-tips\" mode=\"out-in\">\n          <span :class=\"cls.e('error-text')\" v-if=\"!!errorTip\">\n            {{ errorTip }}\n          </span>\n        </transition>\n      </section>\n    </section>\n  </u-grid-item>\n</template>\n\n<script lang=\"tsx\" setup>\nimport { o } from '@cat-kit/core'\nimport { useConfig, useFallbackProps } from '@veltra/compositions'\nimport { bem, extractNormalVNodes, withUnit } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport {\n  type CSSProperties,\n  type SetupContext,\n  type VNode,\n  cloneVNode,\n  computed,\n  onBeforeUnmount,\n  shallowRef,\n  watch\n} from 'vue'\n\nimport type { FormItemEmits, FormItemProps, ComponentSize } from '../../types'\nimport { UGridItem } from '../grid'\nimport { UTip } from '../tip'\nimport { formItemCls as cls, defineField } from './helper'\nimport { validateField } from './validate'\n\ndefineOptions({ name: 'UFormItem' })\n\nconst props = withDefaults(defineProps<FormItemProps>(), { readonly: undefined })\n\nconst emit = defineEmits<FormItemEmits>()\n\ndefineSlots<{\n  /** 标签插槽 */\n  label?: () => any\n  default?: () => any\n}>()\n\n/** 表单组件上下文 */\nconst {\n  formProps,\n  registerField,\n  unregisterField,\n  shouldValidate,\n  handleFieldUpdate,\n  handleFieldChange\n} = injectFormContext()\n\nfunction wrapControlChange(node: VNode) {\n  if (!node || typeof node.type === 'symbol') return node\n\n  return cloneVNode(node, {\n    onChange: (...args: any[]) => {\n      emit('change', ...args)\n      if (props.field) handleFieldChange?.(props.field, ...args)\n    }\n  })\n}\n\n/**\n * 承载默认插槽并拦截控件 change。\n * 必须经填充插槽接收内容（而非直接读 UFormItem 的 $slots）：\n * 读父级 $slots 时组件自身没有更新路径，父级重渲染后动态 props（disabled、data 等）会冻结在首帧。\n */\nfunction ContentSlot(_: unknown, { slots }: SetupContext) {\n  return extractNormalVNodes(slots.default?.() ?? []).map(wrapControlChange)\n}\n\nconst { config } = useConfig()\n\nconst { size, readonly } = useFallbackProps([formProps ?? {}, props], {\n  size: 'default' as ComponentSize,\n  readonly: false\n})\n\nconst errorTip = shallowRef<string>()\n/** 递增序号，丢弃过期的异步校验结果 */\nlet validateSeq = 0\n/** 最近一次 validate 的 Promise，供过期调用等待最新结果 */\nlet latestValidatePromise: Promise<boolean> = Promise.resolve(true)\n\nconst labelPosition = computed(() => props.labelPosition ?? formProps?.labelPosition ?? 'left')\n\nconst className = computed(() => {\n  return [\n    cls.b,\n    cls.m(size.value),\n    bem.is('error', !!errorTip.value),\n    bem.is('label-top', labelPosition.value === 'top')\n  ].join(' ')\n})\n\n/** label样式 */\nconst labelStyles = computed<CSSProperties>(() => {\n  if (labelPosition.value === 'top') return {}\n  return {\n    width: withUnit(props.labelWidth ?? formProps?.labelWidth ?? config.form.labelWidth, 'px')\n  }\n})\n\nconst fieldItem = defineField({\n  clearValidate() {\n    errorTip.value = ''\n  },\n  async validate() {\n    if (!props.field || !formProps?.model || !props.rules || !shouldValidate?.()) return true\n\n    const seq = ++validateSeq\n\n    latestValidatePromise = validateField(formProps.model!, props.field!, props.rules!).then(\n      (tip) => {\n        if (seq !== validateSeq) return latestValidatePromise\n\n        errorTip.value = tip\n        return !errorTip.value\n      }\n    )\n    return latestValidatePromise\n  }\n})\n\nwatch(\n  () => props.field,\n  (field, oldField) => {\n    if (oldField) {\n      unregisterField?.(oldField)\n    }\n    if (field) {\n      registerField?.(field, fieldItem)\n    }\n  },\n  { immediate: true }\n)\n\nlet stopWatchFieldValue: (() => void) | undefined\n\nwatch(\n  [() => formProps?.model, () => props.field],\n  ([model, field]) => {\n    stopWatchFieldValue?.()\n\n    if (!field || !model) return\n\n    stopWatchFieldValue = watch(\n      () => o(model).get(field),\n      (value) => {\n        handleFieldUpdate?.(field, value)\n        fieldItem.validate()\n      }\n    )\n  },\n  { immediate: true }\n)\n\nonBeforeUnmount(() => {\n  props.field && unregisterField?.(props.field)\n})\n</script>\n"],"mappings":"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"}

package/dist/types/action.d.ts

@@ -3,7 +3,12 @@ import { ColorType, DeconstructValue } from "@veltra/utils";
 //#region src/types/action.d.ts
 /** 操作组件属性 */
 interface ActionProps extends ButtonProps {
-  /** 是否需要确认 */
+  /**
+   * 是否需要确认：true 时点击只弹确认气泡（UPopConfirm），点气泡里的「确认」才触发 `run`
+   * @default false
+   * @description 不要在本项的 `run` 回调里再调 `messageConfirm`：`run` 触发时气泡已经确认过一次，
+   * 会变成两次确认。需要弹窗级确认时去掉 `needConfirm`，只在 `run` 里用 `messageConfirm`
+   */
   needConfirm?: boolean;
   /**
    * 是否始终位于下拉菜单中，无视 `max` 限制

package/dist/types/batch-edit.d.ts

@@ -99,6 +99,8 @@ interface BatchEditProps extends TableProps {
 }
 /** 批量编辑组件定义的事件 */
 interface BatchEditEmits extends TableEmits {
+  /** 表单控件 change，透传自 UForm */
+  (e: 'field:change', field: string, ...args: any[]): void;
   /** 更新数据 */
   (e: 'update:data', value: Record<string, any>[]): void;
   /** 点击底部「新增一行」 */

package/dist/types/button.d.ts

@@ -3,7 +3,11 @@ import { ColorType, ComponentProps, DeconstructValue } from "@veltra/utils";
 //#region src/types/button.d.ts
 /** 按钮类型 */
 type ButtonType = ColorType;
-/** 按钮属性类型 */
+/**
+ * 按钮属性类型
+ * @description 组件不注入默认 `aria-label`：可访问名来自默认插槽文本，
+ * 或你自己传入的 `aria-label`（透传到根元素）；只有图标的按钮必须自行传 `aria-label`
+ */
 interface ButtonProps extends ComponentProps {
   /** 按钮类型 */
   type?: ButtonType;

package/dist/types/drawer.d.ts

@@ -12,15 +12,18 @@ interface DrawerProps {
   direction?: DrawerDirection;
   /** 是否显示关闭按钮 */
   showClose?: boolean;
-  /** 抽屉标题 */
+  /**
+   * 抽屉标题；传入时在内容区上方渲染标题栏
+   * @description 不传则不渲染标题栏，内容仍全部来自默认插槽
+   */
   title?: string;
 }
 /** 抽屉组件定义的事件 */
 interface DrawerEmits {
   (e: 'update:modelValue', value: boolean): void;
-  /** 关闭时触发 */
+  /** 开始关闭时触发（点遮罩、点关闭按钮） */
   (e: 'close'): void;
-  /** 完全关闭后触发 */
+  /** 完全关闭后触发：抽屉与遮罩的退出动画结束、节点已移除时 */
   (e: 'closed'): void;
 }
 /** 抽屉组件暴露的属性和方法(组件内部使用) */

package/dist/types/form-item.d.ts

@@ -8,7 +8,10 @@ interface FormItemProps extends FormComponentProps {
   labelPosition?: 'top' | 'left';
 }
 /** 组件项组件定义的事件 */
-interface FormItemEmits {}
+interface FormItemEmits {
+  /** 内部控件 change，参数与控件一致 */
+  (e: 'change', ...args: any[]): void;
+}
 /** 组件项组件暴露的属性和方法 */
 interface FormItemExposed {}
 //#endregion

package/dist/types/form.d.ts

@@ -10,6 +10,12 @@ interface FormProps extends ComponentProps {
   cols?: number;
   /** 表单数据 */
   model?: Record<string, any>;
+  /** 开启后，字段当前值与基准值不同时，在控件下方展示「变更前」 */
+  showModified?: boolean;
+  /** 「变更前」标签文案，默认「变更前：」 */
+  modifiedLabel?: string;
+  /** 变更前基准数据；未传时回退到 model 引用首次传入时的快照（与 reset 一致） */
+  initialModel?: Record<string, any>;
   /** 表单项label宽度 */
   labelWidth?: string | number;
   /** 表单项 label 位置 */
@@ -22,7 +28,10 @@ interface FormProps extends ComponentProps {
   disabled?: boolean;
 }
 interface FormEmits {
-  (e: 'field:change', field: string, value: any): void;
+  /** 控件 change 事件，仅用户操作触发 */
+  (e: 'field:change', field: string, ...args: any[]): void;
+  /** model 字段值更新，含编程写入 */
+  (e: 'field:update', field: string, value: any): void;
 }
 interface _FormExposed {
   el: ShallowRef<HTMLElement | null | undefined>;

package/dist/types/layout.d.ts

@@ -18,6 +18,8 @@ interface LayoutProps {
    * const cols = ['200px', '1fr']
    * ```
    * [fr是什么?](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex_value)
+   * @description 默认插槽的每个直接子元素按顺序占一列，用自定义组件包一层时该组件必须是单根元素；
+   * 子元素渲染出 0 个（`v-if` 为假）或多个根节点时会挤动后面的列，此时自行给子元素写 `grid-column`
    */
   cols?: string[] | string;
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.7.9",
+  "version": "1.7.11",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -80,12 +80,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.2.1",
     "@cat-kit/fe": ">=1.2.1",
-    "@veltra/compositions": "^1.7.9",
-    "@veltra/directives": "^1.7.9",
+    "@veltra/compositions": "^1.7.11",
+    "@veltra/directives": "^1.7.11",
     "@veltra/icons": "^1.5.0",
-    "@veltra/sheet-core": "^2.5.5",
-    "@veltra/styles": "^1.7.9",
-    "@veltra/utils": "^1.7.9",
+    "@veltra/sheet-core": "^2.5.6",
+    "@veltra/styles": "^1.7.11",
+    "@veltra/utils": "^1.7.11",
     "vue": ">=3.5.42"
   },
   "peerDependenciesMeta": {

package/src/components/batch-edit/__test__/batch-edit.test.ts

@@ -30,6 +30,8 @@ function mountBatchEdit() {
     apiMethod: undefined as string | undefined
   })
 
+  const fieldChanges: { field: string; args: unknown[] }[] = []
+
   const app = createApp({
     render() {
       return h(
@@ -39,6 +41,9 @@ function mountBatchEdit() {
           'onUpdate:data': (value: any[]) => {
             data.value = value
           },
+          'onField:change': (field: string, ...args: unknown[]) => {
+            fieldChanges.push({ field, args })
+          },
           columns,
           model,
           rowKey: 'id',
@@ -89,6 +94,7 @@ function mountBatchEdit() {
     host,
     data,
     model,
+    fieldChanges,
     unmount() {
       app.unmount()
       host.remove()
@@ -196,4 +202,136 @@ describe('UBatchEdit quick-edit 切换编辑行', () => {
 
     unmount()
   })
+
+  it('切换行回显不触发 field:change', async () => {
+    const { host, fieldChanges, unmount } = mountBatchEdit()
+
+    fieldChanges.length = 0
+    await clickRow(host, 0)
+    await clickRow(host, 1)
+
+    expect(fieldChanges).toHaveLength(0)
+
+    unmount()
+  })
+
+  it('用户变更 Select 触发 field:change', async () => {
+    const { host, fieldChanges, unmount } = mountBatchEdit()
+
+    await clickRow(host, 0)
+    fieldChanges.length = 0
+
+    const input = host.querySelector<HTMLInputElement>('.u-select input')
+    expect(input).toBeTruthy()
+    input!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    await nextTick()
+    await nextTick()
+
+    const option = [...document.body.querySelectorAll<HTMLElement>('.u-select__option')].find(
+      (el) => el.textContent === '接口'
+    )
+    expect(option).toBeTruthy()
+    option!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    await nextTick()
+
+    expect(fieldChanges).toHaveLength(1)
+    expect(fieldChanges[0]).toEqual({ field: 'behavior', args: [{ label: '接口', value: 'api' }] })
+
+    unmount()
+  })
+
+  it('field:change 联动改其他字段不循环触发', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const columns = defineTableColumns([
+      { key: 'label', name: '名称' },
+      { key: 'behavior', name: '行为' }
+    ])
+
+    const data = ref([
+      { id: '1', label: '存草稿', behavior: 'common-resource', submitType: 'DRAFT' },
+      { id: '2', label: '调接口', behavior: 'api', submitType: 'SUBMIT', apiMethod: 'POST' }
+    ])
+
+    const model = reactive({
+      id: '',
+      label: '',
+      behavior: 'event',
+      submitType: undefined as string | undefined,
+      apiMethod: undefined as string | undefined
+    })
+
+    const fieldChanges: string[] = []
+
+    const app = createApp({
+      render() {
+        return h(
+          UBatchEdit,
+          {
+            data: data.value,
+            'onUpdate:data': (value: any[]) => {
+              data.value = value
+            },
+            'onField:change': (field: string) => {
+              fieldChanges.push(field)
+              if (field === 'behavior') {
+                model.submitType = undefined
+              }
+            },
+            columns,
+            model,
+            rowKey: 'id',
+            quickEdit: true
+          },
+          {
+            form: () => [
+              h(UInput, { field: 'label', label: '名称' }),
+              h(USelect, {
+                field: 'behavior',
+                label: '行为',
+                options: [
+                  { label: '事件', value: 'event' },
+                  { label: '通用资源', value: 'common-resource' },
+                  { label: '接口', value: 'api' }
+                ]
+              }),
+              h(USelect, {
+                field: 'submitType',
+                label: '提交类型',
+                options: [
+                  { label: 'DRAFT', value: 'DRAFT' },
+                  { label: 'SUBMIT', value: 'SUBMIT' }
+                ]
+              })
+            ]
+          }
+        )
+      }
+    })
+
+    app.mount(host)
+
+    await clickRow(host, 0)
+    fieldChanges.length = 0
+
+    const input = host.querySelector<HTMLInputElement>('.u-select input')
+    input!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    await nextTick()
+    await nextTick()
+
+    const option = [...document.body.querySelectorAll<HTMLElement>('.u-select__option')].find(
+      (el) => el.textContent === '接口'
+    )
+    option!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    await nextTick()
+
+    expect(fieldChanges).toEqual(['behavior'])
+    expect(model.submitType).toBeUndefined()
+
+    app.unmount()
+    host.remove()
+  })
 })

package/src/components/batch-edit/batch-edit-form.vue

@@ -28,7 +28,8 @@
           :model="props.model"
           :readonly="props.readonly"
           :label-width="props.labelWidth"
-          @field:change="handleFieldChange"
+          @field:update="handleFieldUpdate"
+          @field:change="handleFormFieldChange"
         >
           <slot
             v-bind="{
@@ -91,8 +92,17 @@ defineOptions({ name: 'UBatchEditForm' })
 
 const batchEditCtx = inject(BatchEditDIKey)!
 
-const { cls, props, state, handleClose, handleSave, staticFeatures, dynamicFeatures, syncing } =
-  batchEditCtx
+const {
+  cls,
+  props,
+  state,
+  emit,
+  handleClose,
+  handleSave,
+  staticFeatures,
+  dynamicFeatures,
+  syncing
+} = batchEditCtx
 
 const focused = toRef(batchEditCtx, 'focused')
 
@@ -105,7 +115,7 @@ defineExpose<_FormExposed>({
   reset: () => formComponentRef.value?.reset()
 })
 
-function handleFieldChange(field: string, value: any) {
+function handleFieldUpdate(field: string, value: any) {
   // 编程方式重置/回显期间不写回行数据，避免默认值污染源数据
   if (syncing.value) return
 
@@ -114,6 +124,10 @@ function handleFieldChange(field: string, value: any) {
   }
 }
 
+function handleFormFieldChange(field: string, ...args: any[]) {
+  emit('field:change', field, ...args)
+}
+
 const creatable = computed(() => {
   if (state.formActionType !== 'create') return false
   return staticFeatures.value.has('create') || dynamicFeatures.value.create?.(state.row)

package/src/components/batch-edit/use-edit-state.ts

@@ -46,7 +46,7 @@ export function useEditState(options: Options) {
 
       // 先重置回 model 初始快照，再同步回显行数据。
       // 同一 tick 内的连续写入会被表单字段 watcher 合并，
-      // 重置产生的默认值不会触发 field:change 回写行数据
+      // 重置产生的默认值不会触发 field:update 回写行数据
       formRef.value?.reset()
 
       if (row) {

package/src/components/button/__test__/button.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h } from 'vue'
+
+import UButton from '../button.vue'
+
+function mountButton(props: Record<string, unknown> = {}, slot = '新建用户') {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const app = createApp({ render: () => h(UButton, props, () => slot) })
+  app.mount(host)
+
+  return {
+    host,
+    button: host.querySelector('button')!,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('UButton 原生属性与可访问名', () => {
+  it('不注入默认 aria-label：可访问名来自默认插槽文本', () => {
+    const { button, unmount } = mountButton()
+
+    expect(button.getAttribute('aria-label')).toBeNull()
+    expect(button.textContent?.trim()).toBe('新建用户')
+
+    unmount()
+  })
+
+  it('自己传的 aria-label 透传到根元素，图标按钮仍可命名', () => {
+    const { button, unmount } = mountButton({ 'aria-label': '编辑' }, '')
+
+    expect(button.getAttribute('aria-label')).toBe('编辑')
+
+    unmount()
+  })
+
+  it('原生 type 固定为 button，放进 form 里不会触发提交', () => {
+    const { button, unmount } = mountButton()
+
+    expect(button.getAttribute('type')).toBe('button')
+
+    unmount()
+  })
+})

package/src/components/button/button.vue

@@ -1,12 +1,5 @@
 <template>
-  <button
-    :class="classList"
-    type="button"
-    aria-label="button"
-    ref="buttonRef"
-    v-ripple="ripple"
-    @click="handleClick"
-  >
+  <button :class="classList" type="button" ref="buttonRef" v-ripple="ripple" @click="handleClick">
     <!-- 加载图标 -->
     <u-icon v-if="loading" :class="[bem.is('loading')]" :size="iconSize">
       <component :is="loadingIcon" />

package/src/components/drawer/__test__/drawer.test.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UDrawer from '../drawer.vue'
+
+function mountDrawer(
+  props: Record<string, unknown> = {},
+  handlers: { onClose?: () => void; onClosed?: () => void } = {}
+) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(false)
+  const closedCount = ref(0)
+  const app = createApp({
+    render: () =>
+      h(
+        UDrawer,
+        {
+          ...props,
+          modelValue: model.value,
+          'onUpdate:modelValue': (value: boolean) => {
+            model.value = value
+          },
+          onClose: () => handlers.onClose?.(),
+          onClosed: () => {
+            closedCount.value += 1
+            handlers.onClosed?.()
+          }
+        },
+        () => '抽屉内容'
+      )
+  })
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    closedCount,
+    panel: () => document.body.querySelector<HTMLElement>('.u-drawer'),
+    overlay: () => document.body.querySelector<HTMLElement>('.u-drawer-overlay'),
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+async function openDrawer(ctx: ReturnType<typeof mountDrawer>) {
+  ctx.model.value = true
+  await vi.waitFor(() => {
+    expect(ctx.panel()).toBeTruthy()
+  })
+}
+
+describe('UDrawer title', () => {
+  it('传入 title 时渲染标题栏', async () => {
+    const ctx = mountDrawer({ title: '用户详情' })
+    await openDrawer(ctx)
+
+    expect(ctx.panel()!.querySelector('.u-drawer__title')?.textContent).toBe('用户详情')
+
+    ctx.unmount()
+  })
+
+  it('不传 title 时不渲染标题栏', async () => {
+    const ctx = mountDrawer()
+    await openDrawer(ctx)
+
+    expect(ctx.panel()!.querySelector('.u-drawer__header')).toBeNull()
+
+    ctx.unmount()
+  })
+})
+
+describe('UDrawer closed', () => {
+  it('关闭动画结束后触发 closed，且晚于 close', async () => {
+    const order: string[] = []
+    const ctx = mountDrawer(
+      { showClose: true },
+      { onClose: () => order.push('close'), onClosed: () => order.push('closed') }
+    )
+    await openDrawer(ctx)
+
+    ctx.panel()!.querySelector<HTMLElement>('.u-drawer__close')!.click()
+    await vi.waitFor(() => {
+      expect(order).toContain('closed')
+    })
+
+    expect(order).toEqual(['close', 'closed'])
+    // 完全关闭后遮罩与抽屉都已移除
+    expect(ctx.overlay()).toBeNull()
+
+    ctx.unmount()
+  })
+
+  it('点遮罩关闭也触发 closed', async () => {
+    const ctx = mountDrawer()
+    await openDrawer(ctx)
+
+    ctx.overlay()!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    await vi.waitFor(() => {
+      expect(ctx.closedCount.value).toBe(1)
+    })
+
+    ctx.unmount()
+  })
+
+  it('从未打开时不触发 closed', async () => {
+    const ctx = mountDrawer()
+    await nextTick()
+    await nextTick()
+
+    expect(ctx.closedCount.value).toBe(0)
+
+    ctx.unmount()
+  })
+})