@veltra/desktop 1.7.9 → 1.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.7.9",
+  "version": "1.7.10",
   "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.10",
+    "@veltra/directives": "^1.7.10",
     "@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.10",
+    "@veltra/utils": "^1.7.10",
     "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/form/__test__/form.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, reactive } from 'vue'
+
+import { USelect } from '../../select'
+import { UForm } from '../index'
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const behaviorOptions = [
+  { label: '事件', value: 'event' },
+  { label: '接口', value: 'api' }
+]
+
+async function openSelect(host: HTMLElement) {
+  const input = host.querySelector('input')!
+  input.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  await nextTick()
+  await nextTick()
+}
+
+async function clickSelectOption(label: string) {
+  const option = [...document.body.querySelectorAll<HTMLElement>('.u-select__option')].find(
+    (el) => el.textContent === label
+  )
+  expect(option, `选项「${label}」应存在`).toBeTruthy()
+  option!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  await nextTick()
+  await sleep(50)
+}
+
+describe('UForm field events', () => {
+  it('field:update and field:change are separate', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const model = reactive({ behavior: 'event' })
+    const updates: { field: string; value: unknown }[] = []
+    const changes: { field: string; args: unknown[] }[] = []
+
+    const app = createApp({
+      render() {
+        return h(
+          UForm,
+          {
+            model,
+            'onField:update': (field: string, value: unknown) => {
+              updates.push({ field, value })
+            },
+            'onField:change': (field: string, ...args: unknown[]) => {
+              changes.push({ field, args })
+            }
+          },
+          {
+            default: () =>
+              h(USelect, { field: 'behavior', label: '行为', options: behaviorOptions })
+          }
+        )
+      }
+    })
+
+    app.mount(host)
+    updates.length = 0
+    changes.length = 0
+
+    model.behavior = 'api'
+    await nextTick()
+
+    expect(updates.some((item) => item.field === 'behavior' && item.value === 'api')).toBe(true)
+    expect(changes).toHaveLength(0)
+
+    await openSelect(host)
+    await clickSelectOption('事件')
+
+    expect(changes).toHaveLength(1)
+    expect(changes[0]).toEqual({ field: 'behavior', args: [{ label: '事件', value: 'event' }] })
+
+    app.unmount()
+    host.remove()
+  })
+})

package/src/components/form/__test__/is-field-modified.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+
+import { isFieldModified } from '../is-field-modified'
+
+describe('isFieldModified', () => {
+  it('primitive 严格相等视为未变更', () => {
+    expect(isFieldModified('a', 'a')).toBe(false)
+    expect(isFieldModified(1, 1)).toBe(false)
+    expect(isFieldModified(true, true)).toBe(false)
+  })
+
+  it('primitive 不等视为已变更', () => {
+    expect(isFieldModified('a', 'b')).toBe(true)
+    expect(isFieldModified(1, 2)).toBe(true)
+    expect(isFieldModified(true, false)).toBe(true)
+  })
+
+  it('nullish 空值等价视为未变更', () => {
+    expect(isFieldModified(null, undefined)).toBe(false)
+    expect(isFieldModified(undefined, '')).toBe(false)
+    expect(isFieldModified('', null)).toBe(false)
+    expect(isFieldModified(null, null)).toBe(false)
+  })
+
+  it('数组与对象按 JSON 深比较', () => {
+    expect(isFieldModified([1, 2], [1, 2])).toBe(false)
+    expect(isFieldModified([1, 2], [1, 3])).toBe(true)
+    expect(isFieldModified({ a: 1 }, { a: 1 })).toBe(false)
+    expect(isFieldModified({ a: 1 }, { a: 2 })).toBe(true)
+  })
+
+  it('undefined 与有值视为已变更', () => {
+    expect(isFieldModified(undefined, 'x')).toBe(true)
+    expect(isFieldModified('x', undefined)).toBe(true)
+    expect(isFieldModified(null, 'x')).toBe(true)
+  })
+})

package/src/components/form/form.vue

@@ -17,6 +17,10 @@
           :model-value="modelValue ?? o(model ?? {}).get(field)"
           @update:model-value="handleUpdateValue(field, $event)"
         />
+        <div v-if="shouldShowModified(field)" :class="cls.e('data-before')">
+          <span :class="cls.e('changed-tag')">{{ modifiedLabel }}</span>
+          <component :is="node" readonly :model-value="getBaselineFieldValue(field)" />
+        </div>
       </u-form-item>
 
       <component v-else :is="node" />
@@ -33,12 +37,13 @@ import { nextTick, toRef, useTemplateRef } from 'vue'
 import type { BreakCols, FormProps, _FormExposed, FormEmits } from '../../types'
 import { UFormItem } from '../form-item'
 import { UGrid } from '../grid'
+import { isFieldModified } from './is-field-modified'
 import { useFormFields } from './use-form-fields'
 import { useNodeInterceptor } from './use-node-interceptor'
 
 defineOptions({ name: 'UForm' })
 
-const props = defineProps<FormProps>()
+const props = withDefaults(defineProps<FormProps>(), { modifiedLabel: '变更前：' })
 
 const emit = defineEmits<FormEmits>()
 
@@ -56,7 +61,8 @@ const {
   reset,
   registerField,
   unregisterField,
-  shouldValidate
+  shouldValidate,
+  getBaselineModel
 } = useFormFields({ props })
 
 async function validate(keys?: string[]) {
@@ -71,8 +77,12 @@ async function validate(keys?: string[]) {
   return valid
 }
 
-function handleFieldChange(field: string, value: any) {
-  emit('field:change', field, value)
+function handleFieldUpdate(field: string, value: any) {
+  emit('field:update', field, value)
+}
+
+function handleFieldChange(field: string, ...args: any[]) {
+  emit('field:change', field, ...args)
 }
 
 provideFormContext({
@@ -81,6 +91,7 @@ provideFormContext({
   unregisterField,
   validateFields: validate,
   shouldValidate,
+  handleFieldUpdate,
   handleFieldChange
 })
 
@@ -91,5 +102,18 @@ function handleUpdateValue(field: string, value: any) {
   o(props.model).set(field, value)
 }
 
+function getBaselineFieldValue(field: string) {
+  return o(getBaselineModel() ?? {}).get(field)
+}
+
+function shouldShowModified(field: string) {
+  if (!props.showModified) return false
+  const baseline = getBaselineModel()
+  if (!baseline || !props.model) return false
+  const current = o(props.model).get(field)
+  const initial = o(baseline).get(field)
+  return isFieldModified(current, initial)
+}
+
 defineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })
 </script>

package/src/components/form/is-field-modified.ts

@@ -0,0 +1,16 @@
+/** 判断字段当前值相对基准值是否已变更 */
+export function isFieldModified(current: unknown, initial: unknown): boolean {
+  if (current === initial) return false
+
+  const currentNullish = current === null || current === undefined || current === ''
+  const initialNullish = initial === null || initial === undefined || initial === ''
+  if (currentNullish && initialNullish) return false
+
+  const currentIsObject = current !== null && typeof current === 'object'
+  const initialIsObject = initial !== null && typeof initial === 'object'
+  if (currentIsObject || initialIsObject) {
+    return JSON.stringify(current) !== JSON.stringify(initial)
+  }
+
+  return true
+}

package/src/components/form/style.scss

@@ -16,12 +16,63 @@
   }
 
   @include m.e(data-before) {
-    width: 100%;
-    line-height: 1.3;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-wrap: wrap;
+    margin-top: 4px;
+    padding: 2px 8px;
+    border-left: 2px solid fn.use-var(color, info);
+    background-color: fn.color-a(color, 8, info);
+    border-radius: 2px;
+    width: fit-content;
+    max-width: 100%;
+    line-height: 1.4;
+    font-size: fn.use-var(font-size, assist, default);
+
+    // 文本类控件保持全宽，便于展示较长内容
+    &:has(#{fn.bem(input)}),
+    &:has(#{fn.bem(textarea)}),
+    &:has(#{fn.bem(select)}),
+    &:has(#{fn.bem(multi-select)}),
+    &:has(#{fn.bem(multi-tree-select)}),
+    &:has(#{fn.bem(auto-complete)}),
+    &:has(#{fn.bem(cascade)}),
+    &:has(#{fn.bem(date-picker)}),
+    &:has(#{fn.bem(date-range-picker)}),
+    &:has(#{fn.bem(number-input)}),
+    &:has(#{fn.bem(tree-select)}) {
+      width: 100%;
+    }
+
+    // 让内部只读控件更像辅助说明，减少「第二个输入框」感
+    @include m.bem(form-item, content) {
+      background: transparent;
+      padding: 0;
+    }
+
+    #{fn.bem(input)},
+    #{fn.bem(textarea)},
+    #{fn.bem(select)},
+    #{fn.bem(multi-select)},
+    #{fn.bem(multi-tree-select)},
+    #{fn.bem(auto-complete)},
+    #{fn.bem(cascade)},
+    #{fn.bem(date-picker)},
+    #{fn.bem(date-range-picker)} {
+      border: none;
+      box-shadow: none;
+      background: transparent;
+      min-height: auto;
+      height: auto;
+      padding: 0;
+    }
   }
 
   @include m.e(changed-tag) {
     color: fn.use-var(color, info);
     font-size: fn.use-var(font-size, assist, default);
+    font-style: normal;
+    flex-shrink: 0;
   }
 }

package/src/components/form/use-form-fields.ts

@@ -1,6 +1,6 @@
 import { copy, o } from '@cat-kit/core'
 import type { FormFieldItem } from '@veltra/utils'
-import { nextTick, watch } from 'vue'
+import { nextTick, shallowRef, watch } from 'vue'
 
 import type { FormProps } from '../../types/form'
 
@@ -42,7 +42,7 @@ export function useFormFields(options: Options) {
   let willValidate = true
 
   /** model 初始快照，供 reset 恢复 */
-  let initialSnapshot: Record<string, any> | undefined
+  const initialSnapshot = shallowRef<Record<string, any> | undefined>()
 
   function runWithoutChangeValidate(fn: () => void) {
     willValidate = false
@@ -59,7 +59,7 @@ export function useFormFields(options: Options) {
   watch(
     () => props.model,
     (model) => {
-      initialSnapshot = model ? copy(model) : undefined
+      initialSnapshot.value = model ? copy(model) : undefined
     },
     { immediate: true, deep: false }
   )
@@ -89,13 +89,27 @@ export function useFormFields(options: Options) {
   }
 
   function reset() {
-    if (!props.model || !initialSnapshot) return
+    if (!props.model || !initialSnapshot.value) return
 
     runWithoutChangeValidate(() => {
-      applySnapshot(props.model!, initialSnapshot!)
+      applySnapshot(props.model!, initialSnapshot.value!)
       Object.values(fields).forEach((item) => item.clearValidate?.())
     })
   }
 
-  return { fields, registerField, validate, unregisterField, clearValidate, reset, shouldValidate }
+  /** 变更前基准数据：优先 initialModel，否则为 model 引用变更时的快照 */
+  function getBaselineModel() {
+    return props.initialModel ?? initialSnapshot.value
+  }
+
+  return {
+    fields,
+    registerField,
+    validate,
+    unregisterField,
+    clearValidate,
+    reset,
+    shouldValidate,
+    getBaselineModel
+  }
 }

package/src/components/form-item/__test__/form-item.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, reactive } from 'vue'
+
+import { UForm } from '../../form'
+import { USelect } from '../../select'
+import { UFormItem } from '../index'
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const behaviorOptions = [
+  { label: '事件', value: 'event' },
+  { label: '接口', value: 'api' }
+]
+
+async function openSelect(host: HTMLElement) {
+  const input = host.querySelector('input')!
+  input.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  await nextTick()
+  await nextTick()
+}
+
+async function clickSelectOption(label: string) {
+  const option = [...document.body.querySelectorAll<HTMLElement>('.u-select__option')].find(
+    (el) => el.textContent === label
+  )
+  expect(option, `选项「${label}」应存在`).toBeTruthy()
+  option!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  await nextTick()
+  await sleep(50)
+}
+
+describe('UFormItem change', () => {
+  it('forwards Select change with option object', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const model = reactive({ behavior: 'event' })
+    const itemChanges: unknown[][] = []
+    const formChanges: { field: string; args: unknown[] }[] = []
+
+    const app = createApp({
+      render() {
+        return h(
+          UForm,
+          {
+            model,
+            'onField:change': (field: string, ...args: unknown[]) => {
+              formChanges.push({ field, args })
+            }
+          },
+          {
+            default: () =>
+              h(
+                UFormItem,
+                {
+                  field: 'behavior',
+                  label: '行为',
+                  onChange: (...args: unknown[]) => itemChanges.push(args)
+                },
+                {
+                  default: () =>
+                    h(USelect, {
+                      modelValue: model.behavior,
+                      'onUpdate:modelValue': (value: string) => {
+                        model.behavior = value
+                      },
+                      options: behaviorOptions
+                    })
+                }
+              )
+          }
+        )
+      }
+    })
+
+    app.mount(host)
+
+    await openSelect(host)
+    await clickSelectOption('接口')
+
+    expect(itemChanges).toHaveLength(1)
+    expect(itemChanges[0]![0]).toEqual({ label: '接口', value: 'api' })
+
+    expect(formChanges).toHaveLength(1)
+    expect(formChanges[0]).toEqual({ field: 'behavior', args: [{ label: '接口', value: 'api' }] })
+
+    app.unmount()
+    host.remove()
+  })
+})