@veltra/desktop 1.2.8 → 1.2.10

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,9 +64,10 @@
 </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 { _FormExposed, FormExposed } from '../../types/form'
 import { UButton } from '../button'
@@ -84,21 +76,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 +95,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, formRef })
 
 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?.()
+  })
+}

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

@@ -0,0 +1,61 @@
+import { o } from '@cat-kit/core'
+import { nextTick, shallowReactive, watch, type ShallowRef } from 'vue'
+
+import type { BatchEditProps, BatchEditStates, FormExposed } from '../../types'
+
+interface Options {
+  props: BatchEditProps
+  formRef: ShallowRef<FormExposed | null>
+}
+
+export function useEditState(options: Options) {
+  const { props, formRef } = options
+
+  const defaultState: BatchEditStates = {
+    depth: -1,
+    formVisible: false,
+    formActionType: 'create',
+    loading: false,
+    indexPath: []
+  }
+
+  const state = shallowReactive({ ...defaultState })
+
+  function resetState() {
+    if (state.row) {
+      state.row.isCurrent = false
+    }
+
+    Object.keys(state).forEach((key) => {
+      delete state[key]
+    })
+
+    Object.assign(state, defaultState)
+  }
+
+  watch(
+    () => state.row,
+    (row) => {
+      formRef.value?.reset()
+
+      if (row) {
+        /** 延迟设置 model，防止表单初始状态丢失 */
+        nextTick(() => {
+          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]
+
+        return
+      }
+
+      resetState()
+    }
+  )
+
+  return { state, resetState }
+}