@veltra/desktop 1.0.12 → 1.0.14

package/src/components/action/action-group.vue

@@ -1,73 +1,143 @@
 <template>
-  <component v-for="node of getSlotsNodes()" :key="node.key" :is="node" />
+  <div :class="rootCls">
+    <component v-for="node of normalNodes" :key="node.key" :is="node" />
+
+    <u-tip
+      v-if="dropdownNodes.length"
+      :class="cls.e('dropdown')"
+      direction="bottom"
+      alignment="end"
+      trigger="click"
+    >
+      <template #content>
+        <component v-for="node of dropdownNodes" :key="node.key" :is="node" />
+      </template>
+
+      <u-action
+        :class="cls.e('more')"
+        :type
+        :size
+        :text
+        :circle="hover"
+        :icon="hover ? MoreFilled : undefined"
+        title="更多"
+      >
+        <template v-if="!hover">
+          更多
+          <u-icon>
+            <ArrowDown />
+          </u-icon>
+        </template>
+      </u-action>
+    </u-tip>
+  </div>
 </template>
 
-<script lang="tsx" setup>
-import type { ActionGroupProps } from "../../types";
-import { ArrowDown } from '@veltra/icons/normal'
-import { UIcon } from "../icon";
-import { UButton } from "../button";
-import { provide, type VNode } from "vue";
-import { bem, extractNormalVNodes } from "@veltra/utils";
-import { UTip } from "../tip";
-import { ActionDIKey } from "./di";
+<script lang="ts" setup>
+import { ArrowDown, MoreFilled } from '@veltra/icons/normal'
+import { bem, extractNormalVNodes } from '@veltra/utils'
+import type { ColorType } from '@veltra/utils'
+import { cloneVNode, computed, provide, type VNode } from 'vue'
+
+import type { ActionGroupProps } from '../../types'
+import { UIcon } from '../icon'
+import { UTip } from '../tip'
+import UAction from './action.vue'
+import { ActionDIKey } from './di'
 
 defineOptions({
-  name: "ActionGroup",
-  inheritAttrs: false,
-});
+  name: 'ActionGroup',
+  inheritAttrs: false
+})
+
+// 此处不直接复用 `ActionGroupProps` 类型作为 `defineProps` 泛型参数，
+// 是为了规避 Vue SFC 编译器在跨文件类型解析时偶发的 prop 未注册问题
+// （表现为运行时 `[Vue warn]: Property "x" was accessed during render but is not defined on instance`）。
+// 通过本地接口定义 + 类型相等性约束保证与外部类型一致。
+interface _Props {
+  loading?: boolean
+  circle?: boolean
+  max?: number
+  hover?: boolean
+  size?: 'small' | 'default' | 'large'
+  text?: boolean
+  type?: ColorType
+}
 
-const props = withDefaults(defineProps<ActionGroupProps>(), {
+type _AssertEqual = [ActionGroupProps] extends [_Props]
+  ? [_Props] extends [ActionGroupProps]
+    ? true
+    : never
+  : never
+
+const _assert: _AssertEqual = true
+void _assert
+
+const props = withDefaults(defineProps<_Props>(), {
   max: 3,
   loading: false,
   circle: false,
-});
+  hover: false,
+  size: 'small',
+  text: true,
+  type: 'primary'
+})
 
-const cls = bem("action-group");
-const actionCls = bem("action");
+const cls = bem('action-group')
 
 const slots = defineSlots<{
-  default?: () => VNode[];
-}>();
-
-function getSlotsNodes() {
-  const nodes = slots.default?.();
-
-  if (!nodes) return [];
-  const extractedNodes = extractNormalVNodes(nodes).filter(
-    // @ts-ignore
-    (node) => node.type?.name === "Action",
-  );
-
-  let normalNodes: VNode[] = [];
-  let hiddenNodes: VNode[] = [];
-  if (extractedNodes.length === props.max) {
-    normalNodes = extractedNodes;
-  } else {
-    normalNodes = extractedNodes.slice(0, props.max - 1);
-    hiddenNodes = extractedNodes.slice(props.max - 1);
-  }
+  default?: () => VNode[]
+}>()
 
-  const dropdown = hiddenNodes.length ? (
-    <UTip direction="bottom" class={cls.e("dropdown")}>
-      {{
-        content: () => hiddenNodes,
-        default: () => (
-          <UButton text size="small" type="primary" class={actionCls.b}>
-            更多
-            <UIcon>
-              <ArrowDown />
-            </UIcon>
-          </UButton>
-        ),
-      }}
-    </UTip>
-  ) : null;
-
-  return dropdown ? [...normalNodes, dropdown] : normalNodes;
+const rootCls = computed(() => [cls.b, bem.is('hover', props.hover)])
+
+function isInDropdownNode(node: VNode): boolean {
+  const p = node.props as Record<string, unknown> | null
+  if (!p) return false
+  const v = p.inDropdown ?? p['in-dropdown']
+  return v === true || v === '' || v === 'true'
 }
 
+const partitioned = computed(() => {
+  const nodes = slots.default?.()
+
+  if (!nodes) return { visible: [] as VNode[], hidden: [] as VNode[] }
+
+  const extracted = extractNormalVNodes(nodes).filter(
+    // 仅保留 UAction 子节点
+    (node) => (node.type as { name?: string } | null | undefined)?.name === 'Action'
+  )
+
+  const visible: VNode[] = []
+  const fixedHidden: VNode[] = []
+
+  extracted.forEach((node) => {
+    if (isInDropdownNode(node)) {
+      fixedHidden.push(node)
+    } else {
+      visible.push(node)
+    }
+  })
+
+  const willOverflow = visible.length > props.max
+  const overflow = willOverflow ? visible.splice(props.max - 1) : []
+
+  return {
+    visible,
+    hidden: [...overflow, ...fixedHidden]
+  }
+})
+
+const normalNodes = computed(() => partitioned.value.visible)
+
+// 下拉菜单中的 UAction 强制以非圆形、文本模式呈现，避免视觉与其他菜单项不一致
+const dropdownNodes = computed(() => {
+  return partitioned.value.hidden.map((node) =>
+    cloneVNode(node, { inDropdown: true, circle: false })
+  )
+})
+
 provide(ActionDIKey, {
-  groupProps: props,
-});
+  groupProps: props
+})
 </script>

package/src/components/action/action.vue

@@ -47,32 +47,55 @@ defineOptions({
   inheritAttrs: false
 })
 
+// 这里所有可继承自 `<u-action-group>` 的默认值都强制为 `undefined`，
+// 否则 Vue 对 Boolean 类型 prop 的默认值（false）会让 `??` 兜底始终失效
 const props = withDefaults(defineProps<ActionProps>(), {
-  size: 'small',
-  text: true,
-  type: 'primary',
   inDropdown: false,
   loading: undefined,
-  circle: undefined
+  circle: undefined,
+  text: undefined,
+  size: undefined,
+  type: undefined
 })
 
-const buttonProps = computed(() => {
-  return o(props as Record<string, any>).omit(['needConfirm', 'loading', 'circle', 'propagate'])
-})
-
-const emit = defineEmits<ActionEmits>()
-
-const cls = bem('action')
-
 const ctx = inject(ActionDIKey, undefined)
 
+const size = computed(() => props.size ?? ctx?.groupProps.size ?? 'small')
+const text = computed(() => props.text ?? ctx?.groupProps.text ?? true)
+const type = computed(() => props.type ?? ctx?.groupProps.type ?? 'primary')
+
 const loading = computed(() => {
   return props.loading ?? ctx?.groupProps.loading
 })
 
+// 下拉菜单中的操作项强制非圆形以呈现完整文本，否则跟随用户/分组配置
 const circle = computed(() => {
+  if (props.inDropdown) return false
   return props.circle ?? ctx?.groupProps.circle
 })
+
+const buttonProps = computed(() => {
+  return {
+    ...o(props as Record<string, any>).omit([
+      'needConfirm',
+      'loading',
+      'circle',
+      'propagate',
+      'size',
+      'text',
+      'type',
+      'inDropdown'
+    ]),
+    size: size.value,
+    text: text.value,
+    type: type.value
+  }
+})
+
+const emit = defineEmits<ActionEmits>()
+
+const cls = bem('action')
+
 function handleConfirm() {
   emit('run')
 }

package/src/components/action/style.scss

@@ -1,27 +1,63 @@
 @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;
 
 @include m.b($group-name) {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: 6px;
+
+  // 下拉触发按钮的占位类（与子项一致的间距处理）
+  @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: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      box-shadow: 0 1px 4px color-mix(in srgb, #{fn.use-var(shadow, color)} 35%, transparent);
+    }
+  }
+
+  // 下拉菜单内容容器：模拟菜单项视觉
   @include m.e(dropdown) {
-    padding: 6px;
-    min-width: 100px;
+    padding: 4px;
+    min-width: 140px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
 
     @include m.b(button) {
       width: 100%;
-      display: block;
-      margin-left: 0 !important;
-      margin-bottom: 6px;
+      justify-content: flex-start;
+      padding: 0 12px;
+
+      // 下拉项不再使用同级间距，恢复块级布局
+      & + & {
+        margin-left: 0;
+      }
     }
   }
 }
 
 @include m.b($root-name) {
-  & + & {
-    margin-left: 6px;
-  }
+  flex-shrink: 0;
 }

package/src/components/action/style.ts

@@ -1,4 +1,5 @@
 import '../button/style'
-import '../dropdown/style'
+import '../icon/style'
 import '../pop-confirm/style'
+import '../tip/style'
 import './style.scss'

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

@@ -1,58 +1,87 @@
 <template>
-  <u-card :class="cls.e('form')" v-if="state.visible && !!props.model">
-    <u-card-header>
-      <template v-if="props.readonly">详情</template>
-      <template v-else-if="!!state.parentRow">新增子级</template>
-      <template v-else-if="state.type === 'create'">新增</template>
-      <template v-else-if="state.type === 'update'">编辑</template>
-    </u-card-header>
+  <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>
+        </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>
 
-    <transition name="fade" appear mode="out-in">
-      <u-scroll always :class="cls.e('form-wrap')">
-        <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>
-    </transition>
+      <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>
+      </transition>
 
-    <u-card-action :class="cls.e('action')">
-      <u-button text type="primary" :loading="state.loading" @click="handleClose"> 关闭 </u-button>
+      <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>
 
-      <u-button
-        v-if="!props.readonly && state.dataUpdated && (creatable || updatable)"
-        :type="state.type === 'create' ? 'success' : 'primary'"
-        :loading="state.loading"
-        @click="handleSave"
-        plain
-      >
-        确认{{ state.type === 'create' ? '新增' : '修改' }}
-      </u-button>
-    </u-card-action>
-  </u-card>
+        <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>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from 'vue'
+import { AddChild, Close, EditPen, Plus, View } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, inject, type Component } from 'vue'
 
 import { UButton } from '../button'
-import { UCard, UCardAction, UCardHeader } from '../card'
 import { UForm } from '../form'
+import { UIcon } from '../icon'
 import { UScroll } from '../scroll'
 import { BatchEditDIKey } from './di'
 
@@ -82,4 +111,51 @@ const updatable = computed(() => {
     (staticFeatures.value.has('update') || dynamicFeatures.value.update?.(state.row))
   )
 })
+
+interface HeaderInfo {
+  icon: Component
+  title: string
+  chip?: string
+  tone: 'create' | 'update' | 'view' | 'child'
+}
+
+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: '新增',
+      chip: insertIndexes.value.length
+        ? `插入到第 ${insertIndexes.value[insertIndexes.value.length - 1]! + 1} 位`
+        : undefined,
+      tone: 'create'
+    }
+  }
+  return {
+    icon: EditPen,
+    title: '编辑',
+    chip: state.row ? `第 ${state.row.index + 1} 行` : undefined,
+    tone: 'update'
+  }
+})
+
+/** 通过 row 切换 / 类型切换驱动表单内容淡出淡入 */
+const bodyKey = computed(() => {
+  return `${state.type}-${state.row?.uid ?? 'create'}-${state.parentRow?.uid ?? 'root'}`
+})
 </script>