@veltra/desktop 1.2.8 → 1.2.9

package/dist/types/index.d.ts

@@ -24,7 +24,7 @@ import { DatePanelEmits, DatePanelProps, PanelType } from "./date-panel.js";
 import { DialogEmits, DialogExposed, DialogProps, DialogTransition, _DialogExposed } from "./dialog.js";
 import { ActionEmits, ActionExposed, ActionGroupExposed, ActionGroupProps, ActionProps, _ActionExposed, _ActionGroupExposed } from "./action.js";
 import { TableColumn, TableColumnAlign, TableColumnNode, TableColumnRenderContext, TableColumnSlotsScope, TableEmits, TableExposed, TableProps, TableRow, TableRowSlotsScope, TableSummaryContext, _TableExposed } from "./table.js";
-import { BatchEditColumn, BatchEditEmits, BatchEditExposed, BatchEditFeature, BatchEditMode, BatchEditProps, _BatchEditExposed } from "./batch-edit.js";
+import { BatchEditColumn, BatchEditEmits, BatchEditExposed, BatchEditFeature, BatchEditFormStatus, BatchEditProps, BatchEditSlots, BatchEditStates, _BatchEditExposed } from "./batch-edit.js";
 import { BreadcrumbEmits, BreadcrumbExposed, BreadcrumbItem, BreadcrumbProps, BreadcrumbSlotScope, _BreadcrumbExposed } from "./breadcrumb.js";
 import { ListEmits, ListExposed, ListProps, _ListExposed } from "./list.js";
 import { EmptyEmits, EmptyExposed, EmptyProps, _EmptyExposed } from "./empty.js";
@@ -33,7 +33,7 @@ import { FloatButtonEmits, FloatButtonExposed, FloatButtonItem, FloatButtonProps
 import { CalendarDay, CalendarEmits, CalendarExposed, CalendarMonth, CalendarProps, CalendarYear, _CalendarExposed } from "./calendar.js";
 import { PaletteColorType, PaletteEmits, PaletteExposed, PaletteHSV, PaletteProps, PaletteRGB, _PaletteExposed } from "./palette.js";
 import { InputEmits, InputExposed, InputProps, _InputExposed } from "./input.js";
-import { FormExposed, FormProps, _FormExposed } from "./form.js";
+import { FormEmits, FormExposed, FormProps, _FormExposed } from "./form.js";
 import { UploaderEmits, UploaderExposed, UploaderProps, _UploaderExposed } from "./file-picker.js";
 import { PopEmits, PopExposed, PopProps, _PopExposed } from "./pop.js";
 import { GridInputEmits, GridInputExposed, GridInputProps, _GridInputExposed } from "./grid-input.js";
@@ -82,7 +82,7 @@ export type * from "@veltra/utils";
 
 //#region src/types/index.d.ts
 declare namespace index_d_exports {
-  export { ActionEmits, ActionExposed, ActionGroupExposed, ActionGroupProps, ActionProps, AnimationEmits, AnimationExposed, AnimationProps, AutoCompleteEmits, AutoCompleteExposed, AutoCompleteProps, BadgeEmits, BadgeExposed, BadgeProps, BarType, BatchEditColumn, BatchEditEmits, BatchEditExposed, BatchEditFeature, BatchEditMode, BatchEditProps, BreadcrumbEmits, BreadcrumbExposed, BreadcrumbItem, BreadcrumbProps, BreadcrumbSlotScope, BreakCols, Breakpoint, ButtonEmits, ButtonExposed, ButtonProps, ButtonType, CalendarDay, CalendarEmits, CalendarExposed, CalendarMonth, CalendarProps, CalendarYear, CardActionProps, CardContentProps, CardCoverProps, CardEmits, CardExposed, CardProps, CascadeEmits, CascadeExposed, CascadeNode, CascadeProps, CheckTagEmits, CheckTagExposed, CheckTagProps, CheckboxButtonEmits, CheckboxButtonProps, CheckboxEmits, CheckboxExposed, CheckboxGroupEmits, CheckboxGroupExposed, CheckboxGroupProps, CheckboxProps, CodeEditorEmits, CodeEditorExposed, CodeEditorLang, CodeEditorProps, CollapseEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue, ConditionConnector, ConditionEditorEmits, ConditionEditorExposed, ConditionEditorProps, ConditionExpression, ConditionField, ConditionGroup, ConditionLeaf, ConditionNode, ConditionValue, ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, CssTransitionEmits, CssTransitionExposed, CssTransitionProps, DatePanelEmits, DatePanelProps, DatePickerEmits, DatePickerExposed, DatePickerProps, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DialogEmits, DialogExposed, DialogProps, DialogTransition, DrawerDirection, DrawerEmits, DrawerExposed, DrawerMode, DrawerProps, DropdownEmits, DropdownExposed, DropdownProps, DualNavEmits, DualNavExposed, DualNavProps, DualNavRootItem, EmptyEmits, EmptyExposed, EmptyProps, ExpressionEditorEmits, ExpressionEditorExposed, ExpressionEditorProps, ExpressionSelectableLevels, FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, FileViewerProps, FloatButtonEmits, FloatButtonExposed, FloatButtonItem, FloatButtonProps, FormExposed, FormItemEmits, FormItemExposed, FormItemProps, FormProps, GanttChartEmits, GanttChartExposed, GanttChartProps, GridEmits, GridExposed, GridInputEmits, GridInputExposed, GridInputProps, GridItemProps, GridProps, GroupInputEmits, GroupInputExposed, GroupInputProps, IconEmits, IconExposed, IconProps, InputEmits, InputExposed, InputProps, LayoutEmits, LayoutExposed, LayoutProps, ListEmits, ListExposed, ListProps, LoadingEmits, LoadingExposed, LoadingProps, LoadingType, Message, MessageConfirmEmits, MessageConfirmExposed, MessageConfirmProps, MessageEmits, MessageExposed, MessageInstance, MessageOptions, MessageProps, MessageType, MultiAutoCompleteEmits, MultiAutoCompleteExposed, MultiAutoCompleteProps, MultiSelectEmits, MultiSelectExposed, MultiSelectProps, MultiTreeSelectEmits, MultiTreeSelectExposed, MultiTreeSelectProps, NavEmits, NavExposed, NavItem, NavProps, NodeRenderExposed, NodeRenderProps, NotificationEmits, NotificationExposed, NotificationProps, NumberEmits, NumberExposed, NumberInputEmits, NumberInputExposed, NumberInputProps, NumberProps, NumberRangeInputEmits, NumberRangeInputExposed, NumberRangeInputProps, NumberRangeTuple, PaginatorEmits, PaginatorExposed, PaginatorProps, PaletteColorType, PaletteEmits, PaletteExposed, PaletteHSV, PaletteProps, PaletteRGB, PanelItem, PanelType, PasswordInputEmits, PasswordInputExposed, PasswordInputProps, PopConfirmEmits, PopConfirmExposed, PopConfirmProps, PopEmits, PopExposed, PopProps, ProgressEmits, ProgressExposed, ProgressNodesEmits, ProgressNodesExposed, ProgressNodesProps, ProgressProps, QuickBatchEditEmits, QuickBatchEditExposed, QuickBatchEditProps, RadioEmits, RadioExposed, RadioGroupEmits, RadioGroupExposed, RadioGroupProps, RadioProps, RichTextEditorEmits, RichTextEditorExposed, RichTextEditorProps, RichTextFormat, ScrollEmits, ScrollExposed, ScrollPosition, ScrollProps, SelectEmits, SelectExposed, SelectProps, SliderEmits, SliderExposed, SliderProps, StepsEmits, StepsExposed, StepsProps, StepsSlotScope, SwitchEmits, SwitchExposed, SwitchProps, TabItem, TableColumn, TableColumnAlign, TableColumnNode, TableColumnRenderContext, TableColumnSlotsScope, TableEditorEmits, TableEditorExposed, TableEditorProps, TableEmits, TableExposed, TableProps, TableRow, TableRowSlotsScope, TableSummaryContext, TabsEmits, TabsExposed, TabsHorizontalEmits, TabsHorizontalExposed, TabsHorizontalProps, TabsProps, TabsVerticalEmits, TabsVerticalExposed, TabsVerticalProps, TagEmits, TagExposed, TagProps, TextEditorEmits, TextEditorExposed, TextEditorProps, TextEmits, TextExposed, TextProps, TextareaEmits, TextareaExposed, TextareaProps, ThemeExposed, ThemeProps, TipAlign, TipDirection, TipEmits, TipExposed, TipProps, ToolbarItem, TreeEmit, TreeExposed, TreeNode, TreeNodeProps, TreeProps, TreeSelectEmits, TreeSelectExposed, TreeSelectProps, UploaderEmits, UploaderExposed, UploaderProps, VariableItem, WatermarkEmits, WatermarkExposed, WatermarkProps, _ActionExposed, _ActionGroupExposed, _AnimationExposed, _AutoCompleteExposed, _BadgeExposed, _BatchEditExposed, _BreadcrumbExposed, _ButtonExposed, _CalendarExposed, _CardExposed, _CascadeExposed, _CheckTagExposed, _CodeEditorExposed, _ConditionEditorExposed, _ContextmenuExposed, _CssTransitionExposed, _DatePickerExposed, _DateRangePickerExposed, _DialogExposed, _DrawerExposed, _DropdownExposed, _DualNavExposed, _EmptyExposed, _ExpressionEditorExposed, _FileViewerExposed, _FloatButtonExposed, _FormExposed, _GanttChartExposed, _GridExposed, _GridInputExposed, _GroupInputExposed, _InputExposed, _LayoutExposed, _ListExposed, _LoadingExposed, _MessageConfirmExposed, _MessageExposed, _MultiAutoCompleteExposed, _MultiSelectExposed, _MultiTreeSelectExposed, _NavExposed, _NotificationExposed, _PaginatorExposed, _PaletteExposed, _PasswordInputExposed, _PopConfirmExposed, _PopExposed, _ProgressExposed, _ProgressNodesExposed, _QuickBatchEditExposed, _RadioExposed, _RadioGroupExposed, _RichTextEditorExposed, _ScrollExposed, _SelectExposed, _SliderExposed, _StepsExposed, _SwitchExposed, _TableEditorExposed, _TableExposed, _TabsExposed, _TabsHorizontalExposed, _TabsVerticalExposed, _TextEditorExposed, _TextExposed, _TextareaExposed, _ThemeExposed, _TipExposed, _TreeExposed, _TreeSelectExposed, _UploaderExposed, _WatermarkExposed };
+  export { ActionEmits, ActionExposed, ActionGroupExposed, ActionGroupProps, ActionProps, AnimationEmits, AnimationExposed, AnimationProps, AutoCompleteEmits, AutoCompleteExposed, AutoCompleteProps, BadgeEmits, BadgeExposed, BadgeProps, BarType, BatchEditColumn, BatchEditEmits, BatchEditExposed, BatchEditFeature, BatchEditFormStatus, BatchEditProps, BatchEditSlots, BatchEditStates, BreadcrumbEmits, BreadcrumbExposed, BreadcrumbItem, BreadcrumbProps, BreadcrumbSlotScope, BreakCols, Breakpoint, ButtonEmits, ButtonExposed, ButtonProps, ButtonType, CalendarDay, CalendarEmits, CalendarExposed, CalendarMonth, CalendarProps, CalendarYear, CardActionProps, CardContentProps, CardCoverProps, CardEmits, CardExposed, CardProps, CascadeEmits, CascadeExposed, CascadeNode, CascadeProps, CheckTagEmits, CheckTagExposed, CheckTagProps, CheckboxButtonEmits, CheckboxButtonProps, CheckboxEmits, CheckboxExposed, CheckboxGroupEmits, CheckboxGroupExposed, CheckboxGroupProps, CheckboxProps, CodeEditorEmits, CodeEditorExposed, CodeEditorLang, CodeEditorProps, CollapseEmits, CollapseItemProps, CollapseModelValue, CollapseProps, CollapseValue, ConditionConnector, ConditionEditorEmits, ConditionEditorExposed, ConditionEditorProps, ConditionExpression, ConditionField, ConditionGroup, ConditionLeaf, ConditionNode, ConditionValue, ContextmenuEmits, ContextmenuExposed, ContextmenuItem, ContextmenuProps, CssTransitionEmits, CssTransitionExposed, CssTransitionProps, DatePanelEmits, DatePanelProps, DatePickerEmits, DatePickerExposed, DatePickerProps, DateRangePickerEmits, DateRangePickerExposed, DateRangePickerProps, DialogEmits, DialogExposed, DialogProps, DialogTransition, DrawerDirection, DrawerEmits, DrawerExposed, DrawerMode, DrawerProps, DropdownEmits, DropdownExposed, DropdownProps, DualNavEmits, DualNavExposed, DualNavProps, DualNavRootItem, EmptyEmits, EmptyExposed, EmptyProps, ExpressionEditorEmits, ExpressionEditorExposed, ExpressionEditorProps, ExpressionSelectableLevels, FileViewerEmits, FileViewerExposed, FileViewerItem, FileViewerKind, FileViewerProps, FloatButtonEmits, FloatButtonExposed, FloatButtonItem, FloatButtonProps, FormEmits, FormExposed, FormItemEmits, FormItemExposed, FormItemProps, FormProps, GanttChartEmits, GanttChartExposed, GanttChartProps, GridEmits, GridExposed, GridInputEmits, GridInputExposed, GridInputProps, GridItemProps, GridProps, GroupInputEmits, GroupInputExposed, GroupInputProps, IconEmits, IconExposed, IconProps, InputEmits, InputExposed, InputProps, LayoutEmits, LayoutExposed, LayoutProps, ListEmits, ListExposed, ListProps, LoadingEmits, LoadingExposed, LoadingProps, LoadingType, Message, MessageConfirmEmits, MessageConfirmExposed, MessageConfirmProps, MessageEmits, MessageExposed, MessageInstance, MessageOptions, MessageProps, MessageType, MultiAutoCompleteEmits, MultiAutoCompleteExposed, MultiAutoCompleteProps, MultiSelectEmits, MultiSelectExposed, MultiSelectProps, MultiTreeSelectEmits, MultiTreeSelectExposed, MultiTreeSelectProps, NavEmits, NavExposed, NavItem, NavProps, NodeRenderExposed, NodeRenderProps, NotificationEmits, NotificationExposed, NotificationProps, NumberEmits, NumberExposed, NumberInputEmits, NumberInputExposed, NumberInputProps, NumberProps, NumberRangeInputEmits, NumberRangeInputExposed, NumberRangeInputProps, NumberRangeTuple, PaginatorEmits, PaginatorExposed, PaginatorProps, PaletteColorType, PaletteEmits, PaletteExposed, PaletteHSV, PaletteProps, PaletteRGB, PanelItem, PanelType, PasswordInputEmits, PasswordInputExposed, PasswordInputProps, PopConfirmEmits, PopConfirmExposed, PopConfirmProps, PopEmits, PopExposed, PopProps, ProgressEmits, ProgressExposed, ProgressNodesEmits, ProgressNodesExposed, ProgressNodesProps, ProgressProps, QuickBatchEditEmits, QuickBatchEditExposed, QuickBatchEditProps, RadioEmits, RadioExposed, RadioGroupEmits, RadioGroupExposed, RadioGroupProps, RadioProps, RichTextEditorEmits, RichTextEditorExposed, RichTextEditorProps, RichTextFormat, ScrollEmits, ScrollExposed, ScrollPosition, ScrollProps, SelectEmits, SelectExposed, SelectProps, SliderEmits, SliderExposed, SliderProps, StepsEmits, StepsExposed, StepsProps, StepsSlotScope, SwitchEmits, SwitchExposed, SwitchProps, TabItem, TableColumn, TableColumnAlign, TableColumnNode, TableColumnRenderContext, TableColumnSlotsScope, TableEditorEmits, TableEditorExposed, TableEditorProps, TableEmits, TableExposed, TableProps, TableRow, TableRowSlotsScope, TableSummaryContext, TabsEmits, TabsExposed, TabsHorizontalEmits, TabsHorizontalExposed, TabsHorizontalProps, TabsProps, TabsVerticalEmits, TabsVerticalExposed, TabsVerticalProps, TagEmits, TagExposed, TagProps, TextEditorEmits, TextEditorExposed, TextEditorProps, TextEmits, TextExposed, TextProps, TextareaEmits, TextareaExposed, TextareaProps, ThemeExposed, ThemeProps, TipAlign, TipDirection, TipEmits, TipExposed, TipProps, ToolbarItem, TreeEmit, TreeExposed, TreeNode, TreeNodeProps, TreeProps, TreeSelectEmits, TreeSelectExposed, TreeSelectProps, UploaderEmits, UploaderExposed, UploaderProps, VariableItem, WatermarkEmits, WatermarkExposed, WatermarkProps, _ActionExposed, _ActionGroupExposed, _AnimationExposed, _AutoCompleteExposed, _BadgeExposed, _BatchEditExposed, _BreadcrumbExposed, _ButtonExposed, _CalendarExposed, _CardExposed, _CascadeExposed, _CheckTagExposed, _CodeEditorExposed, _ConditionEditorExposed, _ContextmenuExposed, _CssTransitionExposed, _DatePickerExposed, _DateRangePickerExposed, _DialogExposed, _DrawerExposed, _DropdownExposed, _DualNavExposed, _EmptyExposed, _ExpressionEditorExposed, _FileViewerExposed, _FloatButtonExposed, _FormExposed, _GanttChartExposed, _GridExposed, _GridInputExposed, _GroupInputExposed, _InputExposed, _LayoutExposed, _ListExposed, _LoadingExposed, _MessageConfirmExposed, _MessageExposed, _MultiAutoCompleteExposed, _MultiSelectExposed, _MultiTreeSelectExposed, _NavExposed, _NotificationExposed, _PaginatorExposed, _PaletteExposed, _PasswordInputExposed, _PopConfirmExposed, _PopExposed, _ProgressExposed, _ProgressNodesExposed, _QuickBatchEditExposed, _RadioExposed, _RadioGroupExposed, _RichTextEditorExposed, _ScrollExposed, _SelectExposed, _SliderExposed, _StepsExposed, _SwitchExposed, _TableEditorExposed, _TableExposed, _TabsExposed, _TabsHorizontalExposed, _TabsVerticalExposed, _TextEditorExposed, _TextExposed, _TextareaExposed, _ThemeExposed, _TipExposed, _TreeExposed, _TreeSelectExposed, _UploaderExposed, _WatermarkExposed };
 }
 import * as import__veltra_utils from "@veltra/utils";
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "files": [
     "dist",
     "src"
@@ -68,11 +68,11 @@
     "@cat-kit/core": ">=1.1.6",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.6",
-    "@veltra/compositions": "1.2.8",
-    "@veltra/directives": "1.2.8",
-    "@veltra/icons": "1.2.8",
-    "@veltra/styles": "1.2.8",
-    "@veltra/utils": "1.2.8",
+    "@veltra/compositions": "1.2.9",
+    "@veltra/directives": "1.2.9",
+    "@veltra/icons": "1.2.9",
+    "@veltra/styles": "1.2.9",
+    "@veltra/utils": "1.2.9",
     "vue": ">=3.5.0"
   }
 }

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

@@ -1,16 +1,13 @@
 <template>
-  <aside :class="cls.e('form')" v-if="state.visible && props.model">
+  <aside :class="cls.e('form')" v-if="state.formVisible && !!props.model">
     <header :class="cls.e('form-header')">
-      <span :class="[cls.e('form-icon'), bem.is(headerInfo.tone)]">
+      <span :class="[cls.e('form-icon'), bem.is(state.formActionType)]">
         <u-icon>
           <component :is="headerInfo.icon" />
         </u-icon>
       </span>
       <div :class="cls.e('form-title')">
         <h3 :class="cls.e('form-title-text')">{{ headerInfo.title }}</h3>
-        <span v-if="headerInfo.chip" :class="cls.e('form-chip')">
-          {{ headerInfo.chip }}
-        </span>
       </div>
       <u-button
         :class="cls.e('form-close')"
@@ -30,12 +27,13 @@
           :model="props.model"
           :readonly="props.readonly"
           :label-width="props.labelWidth"
+          @field:change="handleFieldChange"
         >
           <slot
             v-bind="{
               row: state.row,
               depth: state.depth,
-              indexes: insertIndexes,
+              indexes: state.indexPath,
               index: state.row?.index
             }"
           />
@@ -44,27 +42,20 @@
     </u-scroll>
 
     <footer :class="cls.e('form-footer')">
-      <span :class="cls.e('form-hint')" v-if="props.readonly">只读模式</span>
-      <span :class="cls.e('form-hint')" v-else-if="isQuickUpdate">
-        实时编辑
-        <span :class="{ [bem.is('concealed')]: !focused }"> · <u-kbd>Esc</u-kbd> 关闭</span>
-      </span>
-      <span :class="cls.e('form-hint')" v-else>
+      <span :class="cls.e('form-hint')">
+        <template v-if="props.readonly"> 只读模式 </template>
+
         <span :class="{ [bem.is('concealed')]: !focused }">
-          <u-kbd>Ctrl + S</u-kbd> 保存 · <u-kbd>Esc</u-kbd> 关闭
+          <template v-if="!(state.formActionType === 'update' && props.quickEdit)">
+            <u-kbd>Ctrl + S</u-kbd> 保存 ·
+          </template>
+          <u-kbd>Esc</u-kbd> 关闭
         </span>
       </span>
 
       <div :class="cls.e('form-actions')">
         <u-button text :loading="state.loading" @click="handleClose"> 取消 </u-button>
-        <u-button
-          v-if="
-            !props.readonly && ((isNormal && (creatable || updatable)) || (isQuick && creatable))
-          "
-          :type="state.type === 'create' ? 'success' : 'primary'"
-          :loading="state.loading"
-          @click="handleSave"
-        >
+        <u-button v-if="showSaveBtn" type="primary" :loading="state.loading" @click="handleSave">
           保存
         </u-button>
       </div>
@@ -73,10 +64,12 @@
 </template>
 
 <script lang="ts" setup>
-import { AddChild, Close, EditPen, Plus, View } from '@veltra/icons/normal'
+import { o } from '@cat-kit/core'
+import { Close } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, shallowRef, toRef, type Component } from 'vue'
+import { computed, inject, shallowRef, toRef } from 'vue'
 
+import type { BatchEditSlots } from '../../types'
 import type { _FormExposed, FormExposed } from '../../types/form'
 import { UButton } from '../button'
 import { UForm } from '../form'
@@ -84,21 +77,13 @@ import { UIcon } from '../icon'
 import { UKbd } from '../kbd'
 import { UScroll } from '../scroll'
 import { BatchEditDIKey } from './di'
+import { FORM_ACTION_HEADER_MAP } from './form-action-header'
 
 defineOptions({ name: 'BatchEditForm' })
 
 const batchEditCtx = inject(BatchEditDIKey)!
 
-const {
-  cls,
-  props,
-  state,
-  insertIndexes,
-  handleSave,
-  handleClose,
-  staticFeatures,
-  dynamicFeatures
-} = batchEditCtx
+const { cls, props, state, handleClose, handleSave, staticFeatures, dynamicFeatures } = batchEditCtx
 
 const focused = toRef(batchEditCtx, 'focused')
 
@@ -111,61 +96,37 @@ defineExpose<_FormExposed>({
   reset: () => formComponentRef.value?.reset()
 })
 
+function handleFieldChange(field: string, value: any) {
+  if (state.row && props.quickEdit) {
+    o(state.row.data).set(field, value)
+  }
+}
+
 const creatable = computed(() => {
-  return (
-    state.type === 'create' &&
-    (staticFeatures.value.has('create') || dynamicFeatures.value.create?.(state.row))
-  )
+  if (state.formActionType !== 'create') return false
+  return staticFeatures.value.has('create') || dynamicFeatures.value.create?.(state.row)
 })
 
-const updatable = computed(() => {
-  return (
-    state.type === 'update' &&
-    (staticFeatures.value.has('update') || dynamicFeatures.value.update?.(state.row))
-  )
+const creatableChild = computed(() => {
+  if (state.formActionType !== 'createChild') return false
+  return staticFeatures.value.has('createChild') || dynamicFeatures.value.createChild?.(state.row)
 })
 
-const isQuick = computed(() => props.mode === 'quick')
-const isNormal = computed(() => props.mode !== 'quick')
-const isQuickUpdate = computed(() => isQuick.value && state.type === 'update')
-
-interface HeaderInfo {
-  icon: Component
-  title: string
-  chip?: string
-  tone: 'create' | 'update' | 'view' | 'child'
-}
+const updatable = computed(() => {
+  if (state.formActionType !== 'update') return false
+  return staticFeatures.value.has('update') || dynamicFeatures.value.update?.(state.row)
+})
 
-const headerInfo = computed<HeaderInfo>(() => {
-  if (props.readonly) {
-    return {
-      icon: View,
-      title: '查看详情',
-      chip: state.row ? `第 ${state.row.index + 1} 行` : undefined,
-      tone: 'view'
-    }
-  }
-  if (state.parentRow) {
-    return {
-      icon: AddChild,
-      title: '新增子级',
-      chip: `归属于第 ${state.parentRow.index + 1} 行`,
-      tone: 'child'
-    }
-  }
-  if (state.type === 'create') {
-    return { icon: Plus, title: '新增', tone: 'create' }
-  }
-  return {
-    icon: EditPen,
-    title: '编辑',
-    chip: state.row ? `第 ${state.row.index + 1} 行` : undefined,
-    tone: 'update'
-  }
+const showSaveBtn = computed(() => {
+  if (props.readonly) return false
+  if (props.quickEdit && state.formActionType === 'update') return false
+  return creatable.value || updatable.value || creatableChild.value
 })
 
+const headerInfo = computed(() => FORM_ACTION_HEADER_MAP[state.formActionType])
+
 /** 通过 row 切换 / 类型切换驱动表单内容淡出淡入 */
 const bodyKey = computed(() => {
-  return `${state.type}-${state.row?.uid ?? 'create'}-${state.parentRow?.uid ?? 'root'}`
+  return `${state.formActionType}-${state.row?.uid ?? 'create'}-${state.parentRow?.uid ?? 'root'}`
 })
 </script>

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

@@ -2,14 +2,13 @@
   <u-table
     v-bind="tableProps"
     :slots="slots"
-    :class="[cls.e('table'), bem.is('editing', state.visible)]"
+    :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)"
-    ref="tableRef"
   >
     <template #column:__action__="{ row }">
       <u-action-group :class="cls.e('row-actions')" :max="5" @click.stop circle>
@@ -31,13 +30,6 @@
           title="添加子级"
           @run="handleInsertChild(row)"
         />
-        <u-action
-          v-if="allowed('copy', row)"
-          :icon="Copy"
-          title="复制此行"
-          @run="handleCopy(row)"
-        />
-
         <u-action
           v-if="canDelete(row)"
           :icon="Delete"
@@ -49,16 +41,8 @@
       </u-action-group>
     </template>
 
-    <template #empty v-if="!props.readonly"> {{ null }} </template>
-
-    <template
-      #append
-      v-if="
-        !props.readonly &&
-        (staticFeatures.has('create') || dynamicFeatures.create?.()) &&
-        ((state.type === 'create' && !state.visible) || state.type === 'update')
-      "
-    >
+    <!-- 新增按钮 -->
+    <template #append v-if="showCreateBtn">
       <div :class="cls.e('add')">
         <u-button
           :class="cls.e('add-btn')"
@@ -77,8 +61,7 @@
 
 <script setup lang="ts">
 import { o } from '@cat-kit/core'
-import { AddChild, Copy, Delete, InsertToNext, InsertToPrev, Plus } from '@veltra/icons/normal'
-import { bem } from '@veltra/utils'
+import { AddChild, Delete, InsertToNext, InsertToPrev, Plus } from '@veltra/icons/normal'
 import { computed, inject, type Slots } from 'vue'
 
 import type { BatchEditFeature, TableRow } from '../../types'
@@ -94,13 +77,11 @@ defineProps<{ slots: Slots }>()
 const {
   cls,
   state,
-  tableRef,
   props,
   emit,
   staticFeatures,
   dynamicFeatures,
   handleCreate,
-  handleCopy,
   handleDelete,
   handleInsertToNext,
   handleInsertToPrev,
@@ -128,8 +109,7 @@ const allowed = (feature: BatchEditFeature, row?: TableRow) => {
 }
 
 const columns = computed(() => {
-  if (props.readonly || hasNot(['create', 'delete', 'createChild', 'update', 'copy']))
-    return props.columns
+  if (props.readonly || hasNot(['create', 'delete', 'createChild', 'update'])) return props.columns
 
   return (props.columns ?? []).concat({
     name: '操作',
@@ -143,15 +123,19 @@ const columns = computed(() => {
 
 function handleUpdateCurrentRow(row?: TableRow) {
   if (allowed('update', row)) {
-    if (row) {
-      state.type = 'update'
-    }
     state.row = row
-    state.depth = row?.depth
   }
 }
 
 function canDelete(row: TableRow) {
   return !props.readonly && allowed('delete', row)
 }
+
+const showCreateBtn = computed(() => {
+  if (props.readonly) return false
+
+  const hasFeature = staticFeatures.value.has('create') || dynamicFeatures.value.create?.()
+  const createActionVisible = state.formActionType === 'create' && state.formVisible
+  return hasFeature && !createActionVisible
+})
 </script>

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

@@ -2,7 +2,7 @@
   <u-layout
     :class="cls.b"
     :cols="cols"
-    rows="minmax(0, 1fr)"
+    rows="minmax(0, 1fr) "
     gap="8px"
     resizable
     tabindex="-1"
@@ -11,10 +11,10 @@
     @keydown.capture="handleKeydown"
   >
     <!-- 编辑列表 -->
-    <BatchEditList :slots="slots" ref="tableRef" />
+    <BatchEditList :slots="slots" />
 
     <!-- 编辑表单 -->
-    <BatchEditForm ref="formRef" v-slot="scoped">
+    <BatchEditForm ref="form" v-slot="scoped">
       <slot name="form" v-bind="scoped" />
     </BatchEditForm>
   </u-layout>
@@ -22,121 +22,56 @@
 
 <script lang="ts" setup>
 import { bem } from '@veltra/utils'
-import { computed, inject, provide, shallowRef, watch } from 'vue'
+import { computed, provide, useTemplateRef } from 'vue'
 
-import type {
-  BatchEditEmits,
-  BatchEditProps,
-  TableColumnSlotsScope,
-  TableExposed,
-  TableRow
-} from '../../types'
-import type { FormExposed } from '../../types/form'
-import { DialogDIKey } from '../dialog/di'
+import type { BatchEditEmits, BatchEditProps, BatchEditSlots, FormExposed } from '../../types'
 import { ULayout } from '../layout'
 import BatchEditForm from './batch-edit-form.vue'
 import BatchEditList from './batch-edit-list.vue'
 import { BatchEditDIKey } from './di'
-import { useEdit } from './use-edit'
+import { useEditState } from './use-edit-state'
 import { useFeatures } from './use-features'
+import { useHandlers } from './use-handlers'
+import { useShortcutKey } from './use-shortcut-key'
 
 defineOptions({ name: 'BatchEdit' })
 
-const props = withDefaults(defineProps<BatchEditProps>(), {
-  cols: () => ['1fr', '420px'],
-  mode: 'normal'
-})
+const props = withDefaults(defineProps<BatchEditProps>(), { cols: () => ['1fr', '420px'] })
 
 const emit = defineEmits<BatchEditEmits>()
 
-const slots = defineSlots<
-  {
-    form?: (props: {
-      /** 当前编辑的层级 */
-      depth?: number
-      /** 当前编辑的行 */
-      row?: TableRow
-      /** 当前编辑的行索引 */
-      index?: number
-      /** 操作的目标行索引路径 */
-      indexes?: number[]
-    }) => any
-
-    header?: () => any
-  } & Partial<{ [key: `column:${string}`]: (props: TableColumnSlotsScope) => any }>
->()
+const slots = defineSlots<BatchEditSlots>()
 
 const cls = bem('batch-edit')
 
-const tableRef = shallowRef<TableExposed>()
-const formRef = shallowRef<FormExposed>()
-const focused = shallowRef(false)
+const formRef = useTemplateRef<FormExposed>('form')
+
+const { state, resetState } = useEditState({ props })
 
 const { staticFeatures, dynamicFeatures } = useFeatures({ props })
 
-const editCtx = useEdit({ props, emit, formRef })
+const handlers = useHandlers({ props, emit, state, resetState, formRef })
+
+// 快捷键处理
+const { handleFocusIn, handleFocusOut, handleKeydown, focused } = useShortcutKey({
+  props,
+  onSave: handlers.handleSave,
+  onClose: handlers.handleClose,
+  state
+})
 
-const { state, handleClose, handleSave } = editCtx
+const cols = computed(() => {
+  return state.formVisible ? props.cols : undefined
+})
 
 provide(BatchEditDIKey, {
   cls,
   props,
   emit,
-  tableRef,
+  state,
   staticFeatures,
   dynamicFeatures,
   focused,
-  ...editCtx
-})
-
-const dialogCtx = inject(DialogDIKey, undefined)
-
-dialogCtx &&
-  watch(dialogCtx.visible, (visible) => {
-    !visible && editCtx.handleClose()
-  })
-
-const cols = computed(() => {
-  return !!state.row || state.visible ? props.cols : undefined
+  ...handlers
 })
-
-function handleFocusIn() {
-  focused.value = true
-}
-
-function handleFocusOut(e: FocusEvent) {
-  const root = e.currentTarget as HTMLElement
-  if (!root.contains(e.relatedTarget as Node | null)) {
-    focused.value = false
-  }
-}
-
-/**
- * 键盘快捷键（仅组件获焦时生效）：
- * - Esc          关闭表单
- * - ⌘/Ctrl + S   保存（快速编辑模式下编辑行时除外）
- */
-function handleKeydown(e: KeyboardEvent) {
-  if (!focused.value) return
-  if (props.readonly && e.key !== 'Escape') return
-
-  if (e.key === 'Escape') {
-    if (state.visible) {
-      e.preventDefault()
-      handleClose()
-    }
-    return
-  }
-
-  const meta = e.metaKey || e.ctrlKey
-  if (!meta) return
-
-  const key = e.key.toLowerCase()
-
-  if (key === 's' && state.visible) {
-    if (props.mode === 'quick' && state.type === 'update') return
-    e.preventDefault()
-    handleSave()
-  }
-}
 </script>

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

@@ -1,25 +1,26 @@
 import type { BEM } from '@veltra/utils'
-import type { ComputedRef, InjectionKey, ShallowRef, Ref } from 'vue'
+import type { ComputedRef, InjectionKey, ShallowRef } from 'vue'
 
 import type {
   BatchEditEmits,
   BatchEditFeature,
   BatchEditProps,
-  TableExposed,
+  BatchEditStates,
   TableRow
 } from '../../types'
-import type { EditReturned } from './use-edit'
+import type { EditReturned } from './use-handlers'
+
 export const BatchEditDIKey: InjectionKey<
   {
     cls: BEM<'batch-edit', 'u-'>
     props: BatchEditProps
     emit: BatchEditEmits
-    tableRef: ShallowRef<TableExposed | undefined>
+    state: BatchEditStates
     staticFeatures: ComputedRef<Set<BatchEditFeature>>
     dynamicFeatures: ComputedRef<
       Record<BatchEditFeature, ((row?: TableRow) => boolean) | undefined>
     >
     /** 组件或其子节点是否处于聚焦状态 */
-    focused: Ref<boolean>
+    focused: ShallowRef<boolean>
   } & EditReturned
 > = Symbol('BatchEditDIKey')

package/src/components/batch-edit/form-action-header.ts

@@ -0,0 +1,21 @@
+import { AddChild, EditPen, Plus, View } from '@veltra/icons/normal'
+import type { Component } from 'vue'
+
+import type { BatchEditStates } from '../../types'
+
+/** 表单操作类型对应的头部展示信息 */
+export interface FormActionHeaderInfo {
+  icon: Component
+  title: string
+}
+
+/** 按 formActionType 映射的表单头部信息 */
+export const FORM_ACTION_HEADER_MAP: Record<
+  BatchEditStates['formActionType'],
+  FormActionHeaderInfo
+> = {
+  create: { icon: Plus, title: '新增' },
+  update: { icon: EditPen, title: '编辑' },
+  view: { icon: View, title: '查看详情' },
+  createChild: { icon: AddChild, title: '新增子级' }
+}

package/src/components/batch-edit/style.scss

@@ -121,20 +121,6 @@ $root-name: batch-edit;
     }
   }
 
-  @include m.e(form-chip) {
-    display: inline-block;
-    padding: 1px 8px;
-    font-size: 12px;
-    line-height: 18px;
-    border-radius: fn.use-var(radius, default);
-    background-color: fn.use-var(bg-color, default);
-    color: fn.use-var(text-color, second);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 60%;
-  }
-
   @include m.e(form-close) {
     flex-shrink: 0;
   }

package/src/components/batch-edit/use-dialog-effect.ts

@@ -0,0 +1,21 @@
+import { inject, watch } from 'vue'
+
+import { DialogDIKey } from '../dialog/di'
+
+interface Options {
+  /** 关闭表单 */
+  closeForm: () => void
+}
+
+/**
+ * 在表单上的副作用。
+ * 包括：关闭表单
+ */
+export function useDialogEffect(options: Options) {
+  const dialogCtx = inject(DialogDIKey, undefined)
+  if (!dialogCtx) return
+
+  watch(dialogCtx.visible, (visible) => {
+    !visible && options.closeForm?.()
+  })
+}