@veltra/desktop 1.1.3 → 1.1.5

package/src/components/action/di.ts

@@ -2,4 +2,5 @@ import type { InjectionKey } from 'vue'
 
 import type { ActionGroupProps } from '../../types'
 
-export const ActionDIKey: InjectionKey<{ groupProps: ActionGroupProps }> = Symbol('ActionDIKey')
+export const ActionDIKey: InjectionKey<{ groupProps: ActionGroupProps; closeTip: () => void }> =
+  Symbol('ActionDIKey')

package/src/components/action/style.scss

@@ -1,5 +1,6 @@
 @use 'pkg:@veltra/styles/mixins' as m;
 @use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
 
 $root-name: action;
 $group-name: action-group;
@@ -8,39 +9,29 @@ $group-name: action-group;
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
-  gap: 6px;
+  gap: 2px;
+  padding: 2px 4px;
+  border-radius: 999px;
+  background-color: color-mix(in srgb, #{fn.use-var(bg-color, top)} 70%, transparent);
+  backdrop-filter: fn.use-var(bg-filter);
+  -webkit-backdrop-filter: fn.use-var(bg-filter);
+  box-shadow: 0 1px 4px color-mix(in srgb, #{fn.use-var(shadow, color)} 35%, transparent);
 
-  // 下拉触发按钮的占位类（与子项一致的间距处理）
   @include m.e(more) {
     flex-shrink: 0;
   }
 
-  // 紧凑悬浮模式：默认半透明，仅在悬浮 / 当前激活态显现
-  // 适用于行内（表格行、列表项）操作栏，搭配 .u-action-group 子项达到一致的圆形按钮观感
-  @include m.is(hover) {
-    gap: 2px;
-    padding: 2px 4px;
-    border-radius: 999px;
-    opacity: 0.45;
-    transition:
-      opacity 0.18s ease,
-      background-color 0.18s ease,
-      box-shadow 0.18s ease;
-
-    &:hover,
-    &:focus-within {
-      opacity: 1;
-      background-color: color-mix(in srgb, #{fn.use-var(bg-color, top)} 70%, transparent);
-      backdrop-filter: fn.use-var(bg-filter);
-      -webkit-backdrop-filter: fn.use-var(bg-filter);
-      box-shadow: 0 1px 4px color-mix(in srgb, #{fn.use-var(shadow, color)} 35%, transparent);
-    }
+  @include m.e(separator) {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 1px;
+    vertical-align: middle;
+    height: 0.8em;
+    margin: 0 4px;
+    background-color: fn.use-var(border-color);
   }
 
-  // 下拉菜单内容容器：模拟菜单项视觉
   @include m.e(dropdown) {
-    padding: 4px;
-    min-width: 140px;
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -48,9 +39,8 @@ $group-name: action-group;
     @include m.b(button) {
       width: 100%;
       justify-content: flex-start;
-      padding: 0 12px;
+      padding: 0 10px;
 
-      // 下拉项不再使用同级间距，恢复块级布局
       & + & {
         margin-left: 0;
       }
@@ -58,6 +48,11 @@ $group-name: action-group;
   }
 }
 
+// 覆盖 tip 组件尺寸类（.tip--default）的 padding，下拉菜单需要更紧凑的间距
+.#{vars.$namespace}#{$group-name}__dropdown#{vars.$namespace}tip__content {
+  padding: 4px;
+}
+
 @include m.b($root-name) {
   flex-shrink: 0;
 }

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

@@ -1,77 +1,75 @@
 <template>
-  <transition name="batch-edit-panel" appear>
-    <aside :class="cls.e('form')" v-if="state.visible && !!props.model">
-      <header :class="cls.e('form-header')">
-        <span :class="[cls.e('form-icon'), bem.is(headerInfo.tone)]">
-          <u-icon>
-            <component :is="headerInfo.icon" />
-          </u-icon>
+  <aside :class="cls.e('form')" v-if="state.visible && !!props.model">
+    <header :class="cls.e('form-header')">
+      <span :class="[cls.e('form-icon'), bem.is(headerInfo.tone)]">
+        <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 :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')"
-          :icon="Close"
-          text
-          circle
-          size="small"
-          title="关闭"
-          @click="handleClose"
-        />
-      </header>
+      </div>
+      <u-button
+        :class="cls.e('form-close')"
+        :icon="Close"
+        text
+        circle
+        size="small"
+        title="关闭"
+        @click="handleClose"
+      />
+    </header>
 
+    <u-scroll always :class="cls.e('form-body')" :key="bodyKey">
       <transition name="fade" appear mode="out-in">
-        <u-scroll always :class="cls.e('form-body')" :key="bodyKey">
-          <u-form
-            :model="props.model"
-            :readonly="props.readonly"
-            @keyup.enter="handleSave"
-            :label-width="props.labelWidth"
-          >
-            <template #default="{ data, model }">
-              <slot
-                v-bind="{
-                  data,
-                  model,
-                  row: state.row,
-                  depth: state.depth,
-                  indexes: insertIndexes,
-                  index: state.row?.index
-                }"
-              />
-            </template>
-          </u-form>
-        </u-scroll>
+        <u-form
+          :model="props.model"
+          :readonly="props.readonly"
+          @keyup.enter="handleSave"
+          :label-width="props.labelWidth"
+        >
+          <template #default="{ data, model }">
+            <slot
+              v-bind="{
+                data,
+                model,
+                row: state.row,
+                depth: state.depth,
+                indexes: insertIndexes,
+                index: state.row?.index
+              }"
+            />
+          </template>
+        </u-form>
       </transition>
+    </u-scroll>
 
-      <footer :class="cls.e('form-footer')">
-        <span :class="cls.e('form-hint')" v-if="!props.readonly && state.dataUpdated">
-          有未保存改动
-        </span>
-        <span :class="cls.e('form-hint')" v-else-if="!props.readonly">
-          <kbd>Enter</kbd> 保存 · <kbd>Esc</kbd> 关闭
-        </span>
-        <span :class="cls.e('form-hint')" v-else>只读模式</span>
+    <footer :class="cls.e('form-footer')">
+      <span :class="cls.e('form-hint')" v-if="!props.readonly && state.dataUpdated">
+        有未保存改动
+      </span>
+      <span :class="cls.e('form-hint')" v-else-if="!props.readonly">
+        <kbd>Enter</kbd> 保存 · <kbd>Esc</kbd> 关闭
+      </span>
+      <span :class="cls.e('form-hint')" v-else>只读模式</span>
 
-        <div :class="cls.e('form-actions')">
-          <u-button text :loading="state.loading" @click="handleClose"> 取消 </u-button>
-          <u-button
-            v-if="!props.readonly && (creatable || updatable)"
-            :type="state.type === 'create' ? 'success' : 'primary'"
-            :loading="state.loading"
-            :disabled="!state.dataUpdated"
-            @click="handleSave"
-          >
-            {{ state.type === 'create' ? '保存新增' : '保存修改' }}
-          </u-button>
-        </div>
-      </footer>
-    </aside>
-  </transition>
+      <div :class="cls.e('form-actions')">
+        <u-button text :loading="state.loading" @click="handleClose"> 取消 </u-button>
+        <u-button
+          v-if="!props.readonly && (creatable || updatable)"
+          :type="state.type === 'create' ? 'success' : 'primary'"
+          :loading="state.loading"
+          :disabled="!state.dataUpdated"
+          @click="handleSave"
+        >
+          保存
+        </u-button>
+      </div>
+    </footer>
+  </aside>
 </template>
 
 <script lang="ts" setup>
@@ -140,9 +138,6 @@ const headerInfo = computed<HeaderInfo>(() => {
     return {
       icon: Plus,
       title: '新增',
-      chip: insertIndexes.value.length
-        ? `插入到第 ${insertIndexes.value[insertIndexes.value.length - 1]! + 1} 位`
-        : undefined,
       tone: 'create'
     }
   }

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

@@ -5,20 +5,37 @@
     :class="[cls.e('table'), bem.is('editing', state.visible)]"
     :columns="columns"
     highlight-current
-    :current-row="state.row"
+    :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')" hover circle :max="3" @click.stop>
+      <u-action-group :class="cls.e('row-actions')" :max="5" @click.stop circle>
         <u-action
-          v-if="canEdit(row)"
-          :icon="props.readonly ? View : EditPen"
-          :title="props.readonly ? '查看' : '编辑'"
-          @run="handleEdit(row)"
-          v-bind="props.actionsProps?.update"
+          v-if="allowed('create', row)"
+          :icon="InsertToPrev"
+          title="在上方插入"
+          @run="handleInsertToPrev(row)"
+        />
+        <u-action
+          v-if="allowed('create', row)"
+          :icon="InsertToNext"
+          title="在下方插入"
+          @run="handleInsertToNext(row)"
+        />
+        <u-action
+          v-if="!!props.tree && allowed('createChild', row)"
+          :icon="AddChild"
+          title="添加子级"
+          @run="handleInsertChild(row)"
+        />
+        <u-action
+          v-if="allowed('copy', row)"
+          :icon="Copy"
+          title="复制此行"
+          @run="handleCopy(row)"
         />
 
         <u-action
@@ -29,23 +46,6 @@
           @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,17 +60,16 @@
       "
     >
       <div :class="cls.e('add')">
-        <button
-          type="button"
-          :class="[cls.e('add-btn'), bem.is('loading', state.loading)]"
-          :disabled="state.loading"
+        <u-button
+          :class="cls.e('add-btn')"
+          :icon="Plus"
+          :loading="state.loading"
+          type="primary"
+          plain
           @click.stop="handleCreate"
         >
-          <u-icon :class="cls.e('add-icon')">
-            <Plus />
-          </u-icon>
-          <span :class="cls.e('add-label')">新增一行</span>
-        </button>
+          新增一行
+        </u-button>
       </div>
     </template>
   </u-table>
@@ -78,13 +77,13 @@
 
 <script setup lang="ts">
 import { o } from '@cat-kit/core'
-import { Delete, EditPen, Plus, View } from '@veltra/icons/normal'
+import { AddChild, Copy, Delete, InsertToNext, InsertToPrev, Plus } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { computed, inject, type Slots } from 'vue'
 
 import type { BatchEditFeature, TableRow } from '../../types'
 import { UAction, UActionGroup } from '../action'
-import { UIcon } from '../icon'
+import { UButton } from '../button'
 import { UTable } from '../table'
 import { BatchEditDIKey } from './di'
 
@@ -105,7 +104,6 @@ const {
   staticFeatures,
   dynamicFeatures,
   handleCreate,
-  handleEdit,
   handleCopy,
   handleDelete,
   handleInsertToNext,
@@ -139,7 +137,7 @@ const columns = computed(() => {
     name: '操作',
     key: '__action__',
     align: 'center',
-    width: 132,
+    width: 180,
     fixed: 'right',
     resizable: false
   })
@@ -152,10 +150,6 @@ function handleUpdateCurrentRow(row?: TableRow) {
   }
 }
 
-function canEdit(row: TableRow) {
-  return !props.readonly ? allowed('update', row) : true
-}
-
 function canDelete(row: TableRow) {
   return !props.readonly && allowed('delete', row)
 }

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

@@ -9,26 +9,17 @@ $root-name: batch-edit;
   overflow: hidden;
   border-radius: fn.use-var(radius, default);
 
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
   // ---------- 表格容器 ----------
   @include m.e(table) {
     flex-grow: 1;
   }
 
-  // ---------- 行内悬浮动作条（操作列） ----------
-  // 操作组使用 `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: fn.use-var(bg-filter);
-    -webkit-backdrop-filter: fn.use-var(bg-filter);
-    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;
@@ -39,72 +30,14 @@ $root-name: batch-edit;
   }
 
   @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;
+    --u-batch-edit-form-padding: 18px;
 
     display: flex;
     flex-direction: column;
@@ -116,31 +49,19 @@ $root-name: batch-edit;
     overflow: hidden;
     isolation: isolate;
     min-height: 0;
-
-    // 顶部装饰渐变条
-    &::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(form-header) {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 8px 14px;
+    gap: 12px;
+    padding: 10px 14px;
     border-bottom: 1px solid fn.use-var(border-color);
+    background-color: color-mix(
+      in srgb,
+      #{fn.use-var(bg-color, top)} 96%,
+      #{fn.use-var(bg-color, hover)}
+    );
     flex-shrink: 0;
   }
 
@@ -180,8 +101,8 @@ $root-name: batch-edit;
     flex: 1 1 auto;
     min-width: 0;
     display: flex;
-    flex-direction: column;
-    gap: 2px;
+    align-items: center;
+    gap: 8px;
 
     &-text {
       margin: 0;
@@ -194,32 +115,26 @@ $root-name: batch-edit;
 
   @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);
+    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: 100%;
+    max-width: 60%;
   }
 
   @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;
-    }
+    padding: 6px 8px 0;
   }
 
   @include m.e(form-footer) {
@@ -266,17 +181,3 @@ $root-name: batch-edit;
     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;
-}