@veltra/desktop 1.7.16 → 1.7.18

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

@@ -107,6 +107,10 @@ function queryRows(host: HTMLElement) {
   return [...host.querySelectorAll<HTMLElement>('tr.u-table__row')]
 }
 
+function queryEditButton(host: HTMLElement, index: number) {
+  return queryRows(host)[index]?.querySelector<HTMLElement>('button[title="编辑"]')
+}
+
 async function clickRow(host: HTMLElement, index: number) {
   const row = queryRows(host)[index]
   expect(row, `第 ${index} 行应存在`).toBeTruthy()
@@ -115,19 +119,27 @@ async function clickRow(host: HTMLElement, index: number) {
   await nextTick()
 }
 
+async function clickEditRow(host: HTMLElement, index: number) {
+  const btn = queryEditButton(host, index)
+  expect(btn, `第 ${index} 行的编辑按钮应存在`).toBeTruthy()
+  btn!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  await nextTick()
+  await nextTick()
+}
+
 describe('UBatchEdit quick-edit 切换编辑行', () => {
   it('切换行时先重置表单再回显，不污染行数据', async () => {
     const { host, data, model, unmount } = mountBatchEdit()
 
-    // 第一次点击第 1 行：正常回显
-    await clickRow(host, 0)
+    // 第一次点击第 1 行的编辑按钮：正常回显
+    await clickEditRow(host, 0)
     expect(model.label).toBe('存草稿')
     expect(model.behavior).toBe('common-resource')
     expect(model.submitType).toBe('DRAFT')
     expect(model.apiMethod).toBeUndefined()
 
-    // 再点击第 2 行：先重置回 model 初始快照，再回显第 2 行数据
-    await clickRow(host, 1)
+    // 再点击第 2 行的编辑按钮：先重置回 model 初始快照，再回显第 2 行数据
+    await clickEditRow(host, 1)
     expect(model.label).toBe('调接口')
     expect(model.behavior).toBe('api')
     expect(model.submitType).toBe('SUBMIT')
@@ -142,14 +154,32 @@ describe('UBatchEdit quick-edit 切换编辑行', () => {
     unmount()
   })
 
-  it('取消选中行后表单数据重置为 model 初始值', async () => {
+  it('点击行不触发编辑，仅编辑按钮打开表单', async () => {
+    const { host, model, unmount } = mountBatchEdit()
+
+    await clickRow(host, 0)
+
+    const aside = host.querySelector<HTMLElement>('.u-batch-edit__form')!
+    expect(aside.style.display).toBe('none')
+    expect(model.label).toBe('')
+
+    await clickEditRow(host, 0)
+    expect(aside.style.display).not.toBe('none')
+    expect(model.label).toBe('存草稿')
+
+    unmount()
+  })
+
+  it('关闭表单后表单数据重置为 model 初始值', async () => {
     const { host, data, model, unmount } = mountBatchEdit()
 
-    await clickRow(host, 1)
+    await clickEditRow(host, 1)
     expect(model.label).toBe('调接口')
 
-    // 再次点击当前行 → 取消选中，表单恢复到 model 初始快照
-    await clickRow(host, 1)
+    // 点击「取消」关闭表单，model 恢复到初始快照
+    clickEl(queryCancelButton(host)!)
+    await nextTick()
+    await nextTick()
     expect(model.label).toBe('')
     expect(model.behavior).toBe('event')
     expect(model.submitType).toBeUndefined()
@@ -169,16 +199,16 @@ describe('UBatchEdit quick-edit 切换编辑行', () => {
   it('表单常驻挂载（v-show 控制显隐），切换行不重建表单', async () => {
     const { host, unmount } = mountBatchEdit()
 
-    // model 存在即挂载表单，未选中行时仅隐藏（快照只在首次挂载时拍一次）
+    // model 存在即挂载表单，未编辑行时仅隐藏（快照只在首次挂载时拍一次）
     const aside = host.querySelector<HTMLElement>('.u-batch-edit__form')
     expect(aside).toBeTruthy()
     expect(aside!.style.display).toBe('none')
 
-    await clickRow(host, 0)
+    await clickEditRow(host, 0)
     const formBody = host.querySelector('.u-batch-edit__form-body')
     expect(aside!.style.display).not.toBe('none')
 
-    await clickRow(host, 1)
+    await clickEditRow(host, 1)
     // 同一 DOM 节点：表单未因切行销毁重建，初始快照不会被重新生成
     expect(host.querySelector('.u-batch-edit__form-body')).toBe(formBody)
 
@@ -188,7 +218,7 @@ describe('UBatchEdit quick-edit 切换编辑行', () => {
   it('quick-edit 下用户输入仍实时写回行数据', async () => {
     const { host, data, unmount } = mountBatchEdit()
 
-    await clickRow(host, 0)
+    await clickEditRow(host, 0)
 
     const input = host.querySelector<HTMLInputElement>('.u-input input')
     expect(input).toBeTruthy()
@@ -205,18 +235,71 @@ describe('UBatchEdit quick-edit 切换编辑行', () => {
   })
 })
 
+describe('UBatchEdit 操作列', () => {
+  it('按钮顺序：编辑在最前，上/下插入在最后', async () => {
+    const { host, unmount } = mountBatchEdit({ props: { tree: true } })
+    await nextTick()
+
+    const titles = [...queryRows(host)[0]!.querySelectorAll<HTMLElement>('button[title]')].map(
+      (btn) => btn.title
+    )
+    expect(titles).toEqual(['编辑', '添加子级', '删除', '在上方插入', '在下方插入'])
+
+    unmount()
+  })
+
+  it('readonly 模式操作列只保留「查看」按钮，点击打开只读表单', async () => {
+    const { host, unmount } = mountBatchEdit({ props: { readonly: true } })
+    await nextTick()
+
+    const row = queryRows(host)[0]!
+    const viewBtn = row.querySelector<HTMLElement>('button[title="查看"]')
+    expect(viewBtn).toBeTruthy()
+    expect(row.querySelector('button[title="删除"]')).toBeNull()
+    expect(row.querySelector('button[title="在上方插入"]')).toBeNull()
+    expect(host.querySelector('.u-batch-edit__add-btn')).toBeNull()
+
+    viewBtn!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    await nextTick()
+    await nextTick()
+
+    expect(host.querySelector('.u-batch-edit__form-title-text')!.textContent).toBe('查看详情')
+
+    unmount()
+  })
+})
+
 function queryDialog() {
   return document.body.querySelector<HTMLElement>('.u-batch-edit__form-dialog')
 }
 
-/** 等弹框（teleport 到 body）的进入 / 离开过渡走完 */
-async function flushDialog() {
+/** 等弹框（teleport 到 body）打开：进入过渡在 CI 高负载下可能超过固定时长，轮询等待 */
+async function waitDialogOpen() {
+  await vi.waitFor(() => {
+    expect(queryDialog()).toBeTruthy()
+  })
+}
+
+/** 等弹框关闭卸载：离开过渡在 CI 高负载下可能超过固定时长，轮询等待 */
+async function waitDialogClosed() {
+  await vi.waitFor(() => {
+    expect(queryDialog()).toBeNull()
+  })
+}
+
+/** 等一次校验 / 保存等异步处理落地（固定短等，避免两次点击的 handleSave 重叠） */
+async function waitDialogSettled() {
   await nextTick()
   await nextTick()
   await new Promise((resolve) => setTimeout(resolve, 20))
   await nextTick()
 }
 
+/** 当前用例弹框的遮罩（body 上可能残留前序用例未卸载的弹框，必须按当前弹框定位） */
+function currentOverlay() {
+  return queryDialog()!.closest<HTMLElement>('.u-dialog__overlay')!
+}
+
 function clickEl(el: HTMLElement) {
   el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
 }
@@ -232,8 +315,8 @@ function querySaveButton(dialog: HTMLElement) {
   return dialog.querySelector<HTMLElement>('.u-batch-edit__form-actions button[title="保存"]')
 }
 
-function queryCancelButton(dialog: HTMLElement) {
-  return [...dialog.querySelectorAll<HTMLElement>('.u-batch-edit__form-actions button')].find(
+function queryCancelButton(container: HTMLElement) {
+  return [...container.querySelectorAll<HTMLElement>('.u-batch-edit__form-actions button')].find(
     (btn) => btn.textContent?.includes('取消')
   )
 }
@@ -242,7 +325,7 @@ describe('UBatchEdit formMode', () => {
   it('默认（不传 formMode）仍渲染右侧面板，不出现弹框', async () => {
     const { host, unmount } = mountBatchEdit()
 
-    await clickRow(host, 0)
+    await clickEditRow(host, 0)
     const aside = host.querySelector<HTMLElement>('.u-batch-edit__form')
     expect(aside).toBeTruthy()
     expect(aside!.style.display).not.toBe('none')
@@ -259,8 +342,8 @@ describe('UBatchEdit formMode', () => {
     expect(host.querySelector('.u-batch-edit__form')).toBeNull()
     expect(queryDialog()).toBeNull()
 
-    await clickRow(host, 0)
-    await flushDialog()
+    await clickEditRow(host, 0)
+    await waitDialogOpen()
 
     const dialog = queryDialog()
     expect(dialog).toBeTruthy()
@@ -285,12 +368,11 @@ describe('UBatchEdit formMode', () => {
 
     // 打开新增弹框
     clickEl(host.querySelector<HTMLElement>('.u-batch-edit__add-btn')!)
-    await flushDialog()
-    expect(queryDialog()).toBeTruthy()
+    await waitDialogOpen()
 
     // 必填校验失败：不调用 saveMethod，弹框保持打开
     clickEl(querySaveButton(queryDialog()!)!)
-    await flushDialog()
+    await waitDialogSettled()
     expect(saveMethod).not.toHaveBeenCalled()
     expect(queryDialog()).toBeTruthy()
 
@@ -299,14 +381,13 @@ describe('UBatchEdit formMode', () => {
     await nextTick()
     await nextTick()
     clickEl(querySaveButton(queryDialog()!)!)
-    await flushDialog()
+    await waitDialogClosed()
 
     expect(saveMethod).toHaveBeenCalledTimes(1)
     expect(saveMethod.mock.calls[0]![0]).toMatchObject({ label: '新名称' })
     expect(saveMethod.mock.calls[0]![1]).toBe('create')
     expect(data.value).toHaveLength(3)
     expect(data.value[2]).toMatchObject({ label: '新名称' })
-    expect(queryDialog()).toBeNull()
 
     unmount()
   })
@@ -318,24 +399,23 @@ describe('UBatchEdit formMode', () => {
     })
 
     // 编辑第 1 行后取消
-    await clickRow(host, 0)
-    await flushDialog()
+    await clickEditRow(host, 0)
+    await waitDialogOpen()
     setInputValue(queryDialog()!.querySelector<HTMLInputElement>('.u-input input')!, '改过的名称')
     await nextTick()
     await nextTick()
     clickEl(queryCancelButton(queryDialog()!)!)
-    await flushDialog()
+    await waitDialogClosed()
 
     expect(saveMethod).not.toHaveBeenCalled()
     expect(data.value[0]).toMatchObject({ label: '存草稿' })
     // model 恢复初始快照，而不是残留上一行数据
     expect(model.label).toBe('')
     expect(model.submitType).toBeUndefined()
-    expect(queryDialog()).toBeNull()
 
     // 取消后再新增：表单应为初始值（快照不被上一行污染）
     clickEl(host.querySelector<HTMLElement>('.u-batch-edit__add-btn')!)
-    await flushDialog()
+    await waitDialogOpen()
     expect(queryDialog()!.querySelector<HTMLInputElement>('.u-input input')!.value).toBe('')
 
     // 表单头部的关闭按钮同样不保存
@@ -343,27 +423,73 @@ describe('UBatchEdit formMode', () => {
     await nextTick()
     await nextTick()
     clickEl(queryDialog()!.querySelector<HTMLElement>('.u-batch-edit__form-close')!)
-    await flushDialog()
+    await waitDialogClosed()
     expect(saveMethod).not.toHaveBeenCalled()
     expect(model.label).toBe('')
     expect(data.value).toHaveLength(2)
-    expect(queryDialog()).toBeNull()
 
     // 弹框自身关闭交互（点击遮罩）也不保存
-    await clickRow(host, 1)
-    await flushDialog()
+    await clickEditRow(host, 1)
+    await waitDialogOpen()
     setInputValue(queryDialog()!.querySelector<HTMLInputElement>('.u-input input')!, '改过的名称')
     await nextTick()
     await nextTick()
-    document
-      .querySelector<HTMLElement>('.u-dialog__overlay')!
-      .dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }))
-    await flushDialog()
+    currentOverlay().dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }))
+    await waitDialogClosed()
 
     expect(saveMethod).not.toHaveBeenCalled()
     expect(data.value[1]).toMatchObject({ label: '调接口' })
     expect(model.label).toBe('')
-    expect(queryDialog()).toBeNull()
+
+    unmount()
+  })
+})
+
+describe('UBatchEdit 重入保护', () => {
+  it('保存进行中重复触发（快捷键/连点）被忽略：saveMethod 只调一次、只插一行、弹框正常关闭', async () => {
+    const saveMethod = vi.fn()
+    const { host, data, unmount } = mountBatchEdit({
+      props: { formMode: 'dialog', quickEdit: false, saveMethod },
+      labelRules: { required: true }
+    })
+
+    clickEl(host.querySelector<HTMLElement>('.u-batch-edit__add-btn')!)
+    await waitDialogOpen()
+
+    setInputValue(queryDialog()!.querySelector<HTMLInputElement>('.u-input input')!, '新名称')
+    await nextTick()
+    await nextTick()
+
+    // 同一 tick 内连续两次触发保存（模拟保存进行中再按 Ctrl/Cmd+S），中间故意不等待
+    const saveBtn = querySaveButton(queryDialog()!)!
+    clickEl(saveBtn)
+    clickEl(saveBtn)
+
+    await waitDialogClosed()
+
+    expect(saveMethod).toHaveBeenCalledTimes(1)
+    expect(data.value).toHaveLength(3)
+    expect(data.value[2]).toMatchObject({ label: '新名称' })
+
+    unmount()
+  })
+
+  it('删除进行中重复触发被忽略：deleteMethod 只调一次、只删一行', async () => {
+    const deleteMethod = vi.fn()
+    const { host, data, unmount } = mountBatchEdit({ props: { deleteMethod } })
+    await nextTick()
+
+    // 同一 tick 内连续两次点击删除，中间故意不等待
+    const deleteBtn = queryRows(host)[0]!.querySelector<HTMLElement>('button[title="删除"]')!
+    clickEl(deleteBtn)
+    clickEl(deleteBtn)
+
+    await waitDialogSettled()
+
+    expect(deleteMethod).toHaveBeenCalledTimes(1)
+    expect(deleteMethod.mock.calls[0]![0]).toHaveLength(1)
+    expect(data.value).toHaveLength(1)
+    expect(data.value[0]).toMatchObject({ id: '2' })
 
     unmount()
   })

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

@@ -7,7 +7,7 @@
     v-show="state.formVisible"
   >
     <header :class="cls.e('form-header')">
-      <span :class="[cls.e('form-icon'), bem.is(state.formActionType)]">
+      <span :class="[cls.e('form-icon'), iconToneCls]">
         <u-icon>
           <component :is="headerInfo.icon" />
         </u-icon>
@@ -152,4 +152,10 @@ const showSaveBtn = computed(() => {
 })
 
 const headerInfo = computed(() => FORM_ACTION_HEADER_MAP[state.formActionType])
+
+/** 头部图标色调修饰类：样式中 createChild 对应的修饰类为 is-child */
+const iconToneCls = computed(() => {
+  const type = state.formActionType
+  return bem.is(type === 'createChild' ? 'child' : type)
+})
 </script>

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

@@ -4,28 +4,21 @@
     :slots="slots"
     :class="[cls.e('table')]"
     :columns="columns"
-    highlight-current
     :current="state.row"
-    @update:current="handleUpdateCurrentRow"
     @update:checked="emit('update:checked', $event)"
     @update:selected="emit('update:selected', $event)"
   >
     <template #column:__action__="{ row }">
-      <u-action-group :class="cls.e('row-actions')" :max="5" @click.stop circle>
+      <u-action-group :max="5" circle>
         <u-action
-          v-if="allowed('create', row)"
-          :icon="InsertToPrev"
-          title="在上方插入"
-          @run="handleInsertToPrev(row)"
-        />
-        <u-action
-          v-if="allowed('create', row)"
-          :icon="InsertToNext"
-          title="在下方插入"
-          @run="handleInsertToNext(row)"
+          v-if="allowed('update', row)"
+          :icon="props.readonly ? View : EditPen"
+          :title="props.readonly ? '查看' : '编辑'"
+          @run="startEdit(row)"
+          v-bind="props.actionsProps?.update"
         />
         <u-action
-          v-if="!!props.tree && allowed('createChild', row)"
+          v-if="!props.readonly && !!props.tree && allowed('createChild', row)"
           :icon="AddChild"
           title="添加子级"
           @run="handleInsertChild(row)"
@@ -38,6 +31,18 @@
           @run="handleDelete(row)"
           v-bind="props.actionsProps?.delete"
         />
+        <u-action
+          v-if="!props.readonly && allowed('create', row)"
+          :icon="InsertToPrev"
+          title="在上方插入"
+          @run="handleInsertToPrev(row)"
+        />
+        <u-action
+          v-if="!props.readonly && allowed('create', row)"
+          :icon="InsertToNext"
+          title="在下方插入"
+          @run="handleInsertToNext(row)"
+        />
       </u-action-group>
     </template>
 
@@ -61,7 +66,15 @@
 
 <script setup lang="ts">
 import { o } from '@cat-kit/core'
-import { AddChild, Delete, InsertToNext, InsertToPrev, Plus } from '@veltra/icons/normal'
+import {
+  AddChild,
+  Delete,
+  EditPen,
+  InsertToNext,
+  InsertToPrev,
+  Plus,
+  View
+} from '@veltra/icons/normal'
 import { computed, inject, type Slots } from 'vue'
 
 import type { BatchEditFeature, TableRow } from '../../types'
@@ -81,6 +94,7 @@ const {
   emit,
   staticFeatures,
   dynamicFeatures,
+  startEdit,
   handleCreate,
   handleDelete,
   handleInsertToNext,
@@ -97,9 +111,11 @@ const tableProps = computed(() => {
     'deleteMethod',
     'saveMethod',
     'features',
-    'mode',
     'beforeCreate',
-    'formMode'
+    'formMode',
+    'quickEdit',
+    'labelWidth',
+    'actionsProps'
   ])
 })
 
@@ -110,7 +126,11 @@ const allowed = (feature: BatchEditFeature, row?: TableRow) => {
 }
 
 const columns = computed(() => {
-  if (props.readonly || hasNot(['create', 'delete', 'createChild', 'update'])) return props.columns
+  // 只读模式的操作列只保留「查看」入口
+  const related: BatchEditFeature[] = props.readonly
+    ? ['update']
+    : ['create', 'delete', 'createChild', 'update']
+  if (hasNot(related)) return props.columns
 
   return (props.columns ?? []).concat({
     name: '操作',
@@ -122,12 +142,6 @@ const columns = computed(() => {
   })
 })
 
-function handleUpdateCurrentRow(row?: TableRow) {
-  if (allowed('update', row)) {
-    state.row = row
-  }
-}
-
 function canDelete(row: TableRow) {
   return !props.readonly && allowed('delete', row)
 }

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

@@ -64,7 +64,7 @@ const cls = bem('batch-edit')
 
 const formRef = useTemplateRef<FormExposed>('form')
 
-const { state, resetState, syncing } = useEditState({ props, formRef })
+const { state, resetState, startEdit, syncing } = useEditState({ props, formRef })
 
 const { staticFeatures, dynamicFeatures } = useFeatures({ props })
 
@@ -91,6 +91,7 @@ provide(BatchEditDIKey, {
   dynamicFeatures,
   focused,
   syncing,
+  startEdit,
   ...handlers
 })
 </script>

package/src/components/batch-edit/di.ts

@@ -24,5 +24,7 @@ export const BatchEditDIKey: InjectionKey<
     focused: ShallowRef<boolean>
     /** 是否正在以编程方式重置/回显表单，此期间禁止 quick-edit 回写行数据 */
     syncing: ShallowRef<boolean>
+    /** 开始编辑/查看一行（操作列「编辑」按钮触发） */
+    startEdit: (row: TableRow) => void
   } & EditReturned
 > = Symbol('BatchEditDIKey')

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

@@ -1,7 +1,7 @@
 import { copy, o } from '@cat-kit/core'
 import { nextTick, shallowReactive, shallowRef, watch, type ShallowRef } from 'vue'
 
-import type { BatchEditProps, BatchEditStates, FormExposed } from '../../types'
+import type { BatchEditProps, BatchEditStates, FormExposed, TableRow } from '../../types'
 
 interface Options {
   props: BatchEditProps
@@ -56,10 +56,6 @@ export function useEditState(options: Options) {
   function resetState() {
     resetModel()
 
-    if (state.row) {
-      state.row.isCurrent = false
-    }
-
     Object.keys(state).forEach((key) => {
       delete state[key]
     })
@@ -67,33 +63,30 @@ export function useEditState(options: Options) {
     Object.assign(state, defaultState)
   }
 
-  watch(
-    () => state.row,
-    (row) => {
-      syncing.value = true
-
-      // 先重置回 model 初始快照，再同步回显行数据。
-      // 同一 tick 内的连续写入会被表单字段 watcher 合并，
-      // 重置产生的默认值不会触发 field:update 回写行数据
-      resetModel()
-
-      if (row) {
-        if (props.model) {
-          o(props.model).deepExtend(row.data)
-        }
-        state.formActionType = props.readonly ? 'view' : 'update'
-        state.formVisible = true
-        state.depth = row.depth
-        state.indexPath = [...row.indexes]
-      } else {
-        resetState()
-      }
-
-      nextTick(() => {
-        syncing.value = false
-      })
+  /**
+   * 开始编辑/查看一行：先重置回 model 初始快照，再回显行数据。
+   * 同一 tick 内的连续写入会被表单字段 watcher 合并，
+   * 重置产生的默认值不会触发 field:update 回写行数据
+   */
+  function startEdit(row: TableRow) {
+    syncing.value = true
+
+    resetModel()
+
+    if (props.model) {
+      o(props.model).deepExtend(row.data)
     }
-  )
 
-  return { state, resetState, syncing }
+    state.row = row
+    state.formActionType = props.readonly ? 'view' : 'update'
+    state.formVisible = true
+    state.depth = row.depth
+    state.indexPath = [...row.indexes]
+
+    nextTick(() => {
+      syncing.value = false
+    })
+  }
+
+  return { state, resetState, startEdit, syncing }
 }

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

@@ -135,6 +135,8 @@ export function useHandlers(options: Options): EditReturned {
 
   function runWithLoading<Arg extends any[]>(fn: (...args: Arg) => Promise<void> | void) {
     return async (...args: Arg) => {
+      // 重入保护：进行中（快捷键/按钮并发触发）直接忽略
+      if (state.loading) return
       state.loading = true
       if (state.row) {
         state.row.operating = true