@veltra/desktop 1.0.13 → 1.0.14

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

@@ -2,7 +2,7 @@
   <u-table
     v-bind="tableProps"
     :slots="slots"
-    :class="cls.e('table')"
+    :class="[cls.e('table'), bem.is('editing', state.visible)]"
     :columns="columns"
     highlight-current
     :current-row="state.row"
@@ -12,40 +12,40 @@
     ref="tableRef"
   >
     <template #column:__action__="{ row }">
-      <u-action-group @click.stop :loading="row.operating" :max="9">
-        <template v-if="staticFeatures.has('create') || dynamicFeatures.create?.(row)">
-          <u-action
-            @run="handleInsertToPrev(row)"
-            :icon="InsertToPrev"
-            title="插入到上一行"
-            v-bind="props.actionsProps?.create"
-          />
-          <u-action
-            @run="handleInsertToNext(row)"
-            :icon="InsertToNext"
-            title="插入到下一行"
-            v-bind="props.actionsProps?.create"
-          />
-        </template>
-
+      <u-action-group :class="cls.e('row-actions')" hover circle :max="3" @click.stop>
         <u-action
-          v-if="
-            props.tree && (staticFeatures.has('createChild') || dynamicFeatures.createChild?.(row))
-          "
-          @run="handleInsertChild(row)"
-          :icon="AddChild"
-          title="添加子项"
-          v-bind="props.actionsProps?.createChild"
+          v-if="canEdit(row)"
+          :icon="props.readonly ? View : EditPen"
+          :title="props.readonly ? '查看' : '编辑'"
+          @run="handleEdit(row)"
+          v-bind="props.actionsProps?.update"
         />
 
         <u-action
-          v-if="staticFeatures.has('delete') || dynamicFeatures.delete?.(row)"
+          v-if="canDelete(row)"
           :icon="Delete"
           type="danger"
           title="删除"
           @run="handleDelete(row)"
           v-bind="props.actionsProps?.delete"
         />
+
+        <u-action v-if="allowed('create', row)" in-dropdown @run="handleInsertToPrev(row)">
+          在上方插入
+        </u-action>
+        <u-action v-if="allowed('create', row)" in-dropdown @run="handleInsertToNext(row)">
+          在下方插入
+        </u-action>
+        <u-action
+          v-if="!!props.tree && allowed('createChild', row)"
+          in-dropdown
+          @run="handleInsertChild(row)"
+        >
+          添加子级
+        </u-action>
+        <u-action v-if="allowed('copy', row)" in-dropdown @run="handleCopy(row)">
+          复制此行
+        </u-action>
       </u-action-group>
     </template>
 
@@ -60,16 +60,17 @@
       "
     >
       <div :class="cls.e('add')">
-        <u-button
-          plain
-          type="primary"
+        <button
+          type="button"
+          :class="[cls.e('add-btn'), bem.is('loading', state.loading)]"
+          :disabled="state.loading"
           @click.stop="handleCreate"
-          :loading="state.loading"
-          text
-          v-bind="props.actionsProps?.create"
         >
-          <span style="position: sticky; left: 50%; transform: translateX(-50%)"> 新增 </span>
-        </u-button>
+          <u-icon :class="cls.e('add-icon')">
+            <Plus />
+          </u-icon>
+          <span :class="cls.e('add-label')">新增一行</span>
+        </button>
       </div>
     </template>
   </u-table>
@@ -77,12 +78,13 @@
 
 <script setup lang="ts">
 import { o } from '@cat-kit/core'
-import { AddChild, Delete, InsertToNext, InsertToPrev } from '@veltra/icons/normal'
+import { Delete, EditPen, Plus, View } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
 import { computed, inject, type Slots } from 'vue'
 
 import type { BatchEditFeature, TableRow } from '../../types'
-import { UActionGroup, UAction } from '../action'
-import { UButton } from '../button'
+import { UAction, UActionGroup } from '../action'
+import { UIcon } from '../icon'
 import { UTable } from '../table'
 import { BatchEditDIKey } from './di'
 
@@ -103,6 +105,8 @@ const {
   staticFeatures,
   dynamicFeatures,
   handleCreate,
+  handleEdit,
+  handleCopy,
   handleDelete,
   handleInsertToNext,
   handleInsertToPrev,
@@ -123,23 +127,36 @@ const tableProps = computed(() => {
 
 const hasNot = (value: BatchEditFeature[]) => value.every((v) => !staticFeatures.value.has(v))
 
+const allowed = (feature: BatchEditFeature, row?: TableRow) => {
+  return staticFeatures.value.has(feature) || !!dynamicFeatures.value[feature]?.(row)
+}
+
 const columns = computed(() => {
-  if (props.readonly || hasNot(['create', 'delete', 'createChild'])) return props.columns
+  if (props.readonly || hasNot(['create', 'delete', 'createChild', 'update', 'copy']))
+    return props.columns
 
   return (props.columns ?? []).concat({
     name: '操作',
     key: '__action__',
     align: 'center',
-    width: 180,
+    width: 132,
     fixed: 'right',
     resizable: false
   })
 })
 
 function handleUpdateCurrentRow(row?: TableRow) {
-  if (staticFeatures.value.has('update') || dynamicFeatures.value.update?.(row)) {
+  if (allowed('update', row)) {
     state.row = row
     state.depth = row?.depth
   }
 }
+
+function canEdit(row: TableRow) {
+  return !props.readonly ? allowed('update', row) : true
+}
+
+function canDelete(row: TableRow) {
+  return !props.readonly && allowed('delete', row)
+}
 </script>

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

@@ -1,5 +1,13 @@
 <template>
-  <u-layout :class="cls.b" :cols="cols" rows="100%" gap="8px" resizable @keyup.esc="handleClose">
+  <u-layout
+    :class="cls.b"
+    :cols="cols"
+    rows="100%"
+    gap="8px"
+    resizable
+    @keydown="handleKeydown"
+    tabindex="-1"
+  >
     <!-- 编辑列表 -->
     <BatchEditList :slots="slots" />
 
@@ -34,7 +42,7 @@ import { useEdit } from './use-edit'
 defineOptions({ name: 'BatchEdit' })
 
 const props = withDefaults(defineProps<BatchEditProps<Model>>(), {
-  cols: () => ['1fr', '400px'],
+  cols: () => ['1fr', '420px'],
   mode: 'normal'
 })
 
@@ -53,10 +61,13 @@ const staticFeatures = computed(() => {
     return defaultFeatures
   }
 
-  // 排除函数和false的部分
+  // 函数与 false 的特性视为关闭；显式 true 视为开启（即便不在默认集合内）
   Object.entries(features).forEach(([key, value]) => {
+    const k = key as BatchEditFeature
     if (typeof value === 'function' || value === false) {
-      defaultFeatures.delete(key as BatchEditFeature)
+      defaultFeatures.delete(k)
+    } else if (value === true) {
+      defaultFeatures.add(k)
     }
   })
   return defaultFeatures
@@ -113,7 +124,7 @@ const tableRef = shallowRef<TableExposed>()
 
 const editCtx = useEdit({ props, emit, tableRef })
 
-const { state, handleClose } = editCtx
+const { state, handleClose, handleSave, handleDelete, handleCreate } = editCtx
 
 provide(BatchEditDIKey, {
   cls,
@@ -127,7 +138,6 @@ provide(BatchEditDIKey, {
 
 const dialogCtx = inject(DialogDIKey, undefined)
 
-// 如果在dialog上下文中
 dialogCtx &&
   watch(dialogCtx.visible, (visible) => {
     !visible && editCtx.handleClose()
@@ -136,4 +146,45 @@ dialogCtx &&
 const cols = computed(() => {
   return !!state.row || state.visible ? props.cols : undefined
 })
+
+/**
+ * 键盘快捷键：
+ * - Esc        关闭表单
+ * - ⌘/Ctrl + S   保存
+ * - ⌘/Ctrl + Backspace 删除当前编辑行
+ * - ⌘/Ctrl + N   新增（仅在不在表单中时）
+ */
+function handleKeydown(e: KeyboardEvent) {
+  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) {
+    e.preventDefault()
+    handleSave()
+    return
+  }
+
+  if (e.key === 'Backspace' && state.row && state.type === 'update') {
+    e.preventDefault()
+    handleDelete(state.row)
+    return
+  }
+
+  if (key === 'n' && !state.visible) {
+    e.preventDefault()
+    handleCreate()
+  }
+}
 </script>

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

@@ -2,67 +2,281 @@
 @use 'pkg:@veltra/styles/functions' as fn;
 @use 'pkg:@veltra/styles/vars';
 
-@keyframes blink {
-  0% {
-    opacity: 0.3;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 $root-name: batch-edit;
 
 @include m.b($root-name) {
-  // border: fn.use-var(border);
+  position: relative;
   overflow: hidden;
-
   border-radius: fn.use-var(radius, default);
 
-  @include m.e(table, form-wrap) {
+  // ---------- 表格容器 ----------
+  @include m.e(table) {
     flex-grow: 1;
   }
 
-  @include m.e(list, form) {
-    display: flex;
-    flex-direction: column;
+  // ---------- 行内悬浮动作条（操作列） ----------
+  // 操作组使用 `u-action-group` 的 hover 模式
+  // 这里在父级表格行 hover / 当前激活时强制显现整组
+  .u-table__row:hover .#{vars.$namespace}action-group.is-hover,
+  .u-table__row.is-current .#{vars.$namespace}action-group.is-hover {
+    opacity: 1;
+    background-color: color-mix(in srgb, #{fn.use-var(bg-color, top)} 70%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    box-shadow: 0 1px 4px color-mix(in srgb, #{fn.use-var(shadow, color)} 35%, transparent);
+  }
+
+  // ---------- 底部"新增一行"按钮 ----------
+  // 按钮通过水平方向 sticky 始终贴住滚动视口左侧，
+  // 避免列很长横向滚动时按钮内容被滚出视口外
+  @include m.e(add) {
+    position: sticky;
+    left: 0;
+    bottom: 0;
+    z-index: 1;
+    padding: 8px 12px;
+    background-color: fn.use-var(bg-color, top);
+  }
+
+  @include m.e(add-btn) {
+    --add-color: #{fn.use-var(color, primary)};
+    --add-border: #{color-mix(in srgb, fn.use-var(color, primary) 60%, transparent)};
+    --add-bg: #{color-mix(in srgb, fn.use-var(color, primary) 5%, transparent)};
+
+    position: sticky;
+    left: 12px;
+    height: 36px;
+    min-width: 220px;
+    max-width: 320px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 0 20px;
+    background: var(--add-bg);
+    border: 1px dashed var(--add-border);
+    border-radius: fn.use-var(radius, default);
+    color: var(--add-color);
+    font-size: fn.use-var(font-size-main, default);
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      border-color 0.18s ease,
+      color 0.18s ease,
+      background-color 0.18s ease,
+      transform 0.18s ease;
+    font-family: inherit;
+
+    &:hover:not(:disabled) {
+      --add-border: #{fn.use-var(color, primary)};
+      --add-bg: #{fn.use-var(color, primary, light-9)};
+      border-style: solid;
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(1px);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+
+    @include m.is(loading) {
+      pointer-events: none;
+    }
+  }
+
+  @include m.e(add-icon) {
+    font-size: 16px;
+    display: inline-flex;
+    transition: transform 0.18s ease;
+  }
+
+  .#{vars.$namespace}#{$root-name}__add-btn:hover .#{vars.$namespace}#{$root-name}__add-icon {
+    transform: rotate(90deg);
+  }
+
+  @include m.e(add-label) {
+    line-height: 1;
   }
 
+  // ---------- 右侧表单侧栏 ----------
   @include m.e(form) {
+    --u-batch-edit-form-radius: #{fn.use-var(radius, large)};
+    --u-batch-edit-form-padding: 16px;
+
+    display: flex;
+    flex-direction: column;
     background-color: fn.use-var(bg-color, top);
+    border-radius: var(--u-batch-edit-form-radius);
+    box-shadow:
+      0 1px 2px color-mix(in srgb, #{fn.use-var(shadow, color)} 40%, transparent),
+      0 12px 32px -16px color-mix(in srgb, #{fn.use-var(shadow, color)} 50%, transparent);
+    overflow: hidden;
+    isolation: isolate;
+    min-height: 0;
 
-    &-wrap {
-      padding: 8px 12px;
+    // 顶部装饰渐变条
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(
+        90deg,
+        fn.use-var(color, primary) 0%,
+        color-mix(in srgb, #{fn.use-var(color, primary)} 50%, transparent) 100%
+      );
+      opacity: 0.7;
+      z-index: 1;
     }
   }
 
-  @include m.e(tools) {
-    padding: 0 fn.use-var(gap, default);
+  @include m.e(form-header) {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    border-bottom: 1px solid fn.use-var(border-color);
+    flex-shrink: 0;
   }
 
-  @include m.e(add) {
-    width: 100%;
-    // background-color: fn.use-var(bg-color, top);
-    position: sticky;
-    bottom: 0;
-    padding: 4px;
-
-    & > {
-      @include m.bem(button) {
-        width: 100%;
-        text-align: unset;
-        display: block;
-      }
+  @include m.e(form-icon) {
+    --tone-color: #{fn.use-var(color, primary)};
+    --tone-bg: #{fn.use-var(color, primary, light-9)};
+
+    width: 30px;
+    height: 30px;
+    border-radius: fn.use-var(radius, default);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--tone-color);
+    background-color: var(--tone-bg);
+    font-size: 16px;
+    transition:
+      color 0.2s ease,
+      background-color 0.2s ease;
+
+    @include m.is(create) {
+      --tone-color: #{fn.use-var(color, success)};
+      --tone-bg: #{fn.use-var(color, success, light-9)};
+    }
+    @include m.is(child) {
+      --tone-color: #{fn.use-var(color, warning)};
+      --tone-bg: #{fn.use-var(color, warning, light-9)};
+    }
+    @include m.is(view) {
+      --tone-color: #{fn.use-var(text-color, second)};
+      --tone-bg: #{fn.use-var(bg-color, hover)};
+    }
+  }
+
+  @include m.e(form-title) {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    &-text {
+      margin: 0;
+      font-size: fn.use-var(font-size-title, default);
+      font-weight: 600;
+      color: fn.use-var(text-color, title);
+      line-height: 1.25;
+    }
+  }
+
+  @include m.e(form-chip) {
+    display: inline-block;
+    align-self: flex-start;
+    padding: 1px 8px;
+    font-size: 12px;
+    line-height: 18px;
+    border-radius: 999px;
+    background-color: fn.use-var(bg-color, hover);
+    color: fn.use-var(text-color, second);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  @include m.e(form-close) {
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+
+  @include m.e(form-body) {
+    flex: 1 1 auto;
+    min-height: 0;
+
+    // 仅限定 batch-edit 内的 u-form 表单滚动区内边距
+    .#{vars.$namespace}form__body {
+      padding: 10px var(--u-batch-edit-form-padding) 4px;
     }
   }
 
-  @include m.e(action) {
-    @include m.flex($justify: space-between);
+  @include m.e(form-footer) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 6px 12px;
+    border-top: 1px solid fn.use-var(border-color);
+    background-color: fn.use-var(bg-color, top);
+    flex-shrink: 0;
   }
 
-  @include m.bem(table, row) {
-    @include m.is(blink) {
-      animation: blink 0.5s ease-in;
+  @include m.e(form-hint) {
+    font-size: 12px;
+    color: fn.use-var(text-color, placeholder);
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    & > kbd {
+      display: inline-block;
+      min-width: 18px;
+      padding: 1px 5px;
+      margin: 0 1px;
+      font-size: 11px;
+      font-family:
+        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+        monospace;
+      color: fn.use-var(text-color, second);
+      background-color: fn.use-var(bg-color, hover);
+      border: 1px solid fn.use-var(border-color);
+      border-radius: 4px;
+      line-height: 1;
+      vertical-align: 1px;
     }
   }
+
+  @include m.e(form-actions) {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+}
+
+// 表单面板进出过渡：从右侧滑入并轻微缩放
+.batch-edit-panel-enter-active,
+.batch-edit-panel-leave-active {
+  transition:
+    transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
+    opacity 0.24s ease;
+}
+
+.batch-edit-panel-enter-from,
+.batch-edit-panel-leave-to {
+  transform: translateX(16px) scale(0.985);
+  opacity: 0;
 }

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

@@ -1,13 +1,10 @@
-import '../layout/style'
+import '../action/style'
+import '../button/style'
 import '../form/style'
-import '../table/style'
+import '../icon/style'
+import '../layout/style'
 import '../scroll/style'
-import '../card/style'
-import '../checkbox/style'
-import '../tip/style'
-import '../button/style'
-import '../action/style'
+import '../table/style'
 import '@veltra/directives/ripple/style.js'
 import '@veltra/styles/anime/fade.scss'
 import './style.scss'
-// import './style-new.scss'