fix(F006-W17.6.1): TableActions 收紧间距 + 理顺布局逻辑

用户反馈: 按钮没显示全 + 间距太大不美观

间距收紧:
- el-button text padding 0 8px → 0 4px (默认太松散)
- .rr-table-actions gap 4px → 0 (按钮紧贴)
- ⋯ 触发器 26px → 22px (更小巧)
- 实测: 按钮间距 0px, 按钮到⋯ 间距 2px

布局逻辑理顺:
- 多个 computed (visibleActions/isCollapsing/primaryActions/moreActions)
  → 合并为单一 layout computed ({primary, more})
- 减少中间依赖, 更可靠

Playwright 验证通过 (订单页):
- status=1 行: [详情,付款] + ⋯ (4按钮前2显)
- status=4 行: [详情,退款,打印] (3按钮全显无⋯)
- status≥5 行: [详情,打印] (2按钮无⋯)
This commit is contained in:
Sisyphus 2026-07-09 14:31:53 +08:00
parent 2f7ec67903
commit 63b32e999f

View File

@ -71,18 +71,14 @@ const visibleActions = computed<ActionItem[]>(() =>
props.actions.filter(item => !item.when || item.when(props.row)) props.actions.filter(item => !item.when || item.when(props.row))
) )
// 按钮总数 ≤3 全部常驻, >3 才拆分前 visibleCount 个常驻 + 其余收纳 // 拆分结果: 前 N 个常驻 + 其余收纳 (≤3 全常驻, >3 前 visibleCount 常驻)
const isCollapsing = computed(() => visibleActions.value.length > 3) const layout = computed(() => {
const all = visibleActions.value
// 常驻文字按钮 (前 N 个, N = isCollapsing ? visibleCount : 全部) if (all.length > 3) {
const primaryActions = computed<ActionItem[]>(() => return { primary: all.slice(0, props.visibleCount), more: all.slice(props.visibleCount) }
isCollapsing.value ? visibleActions.value.slice(0, props.visibleCount) : visibleActions.value }
) return { primary: all, more: [] as ActionItem[] }
})
// 收进 ⋯ 的按钮 (第 visibleCount 个及之后, 仅 isCollapsing 时有值)
const moreActions = computed<ActionItem[]>(() =>
isCollapsing.value ? visibleActions.value.slice(props.visibleCount) : []
)
// 执行操作 (处理二次确认) // 执行操作 (处理二次确认)
async function runAction(item: ActionItem) { async function runAction(item: ActionItem) {
@ -106,7 +102,7 @@ async function runAction(item: ActionItem) {
<div class="rr-table-actions"> <div class="rr-table-actions">
<!-- 常驻文字按钮 --> <!-- 常驻文字按钮 -->
<el-button <el-button
v-for="(item, i) in primaryActions" v-for="(item, i) in layout.primary"
:key="`p${i}`" :key="`p${i}`"
text text
:type="resolveType(item) as any" :type="resolveType(item) as any"
@ -116,9 +112,9 @@ async function runAction(item: ActionItem) {
<!-- 收纳下拉 (仅在按钮 >3 时渲染) --> <!-- 收纳下拉 (仅在按钮 >3 时渲染) -->
<el-dropdown <el-dropdown
v-if="moreActions.length" v-if="layout.more.length"
trigger="click" trigger="click"
@command="(cmd: number) => runAction(moreActions[cmd])" @command="(cmd: number) => runAction(layout.more[cmd])"
> >
<span class="rr-more-trigger"> <span class="rr-more-trigger">
<el-icon><MoreFilled /></el-icon> <el-icon><MoreFilled /></el-icon>
@ -126,7 +122,7 @@ async function runAction(item: ActionItem) {
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item <el-dropdown-item
v-for="(item, i) in moreActions" v-for="(item, i) in layout.more"
:key="`m${i}`" :key="`m${i}`"
:command="i" :command="i"
:divided="item.divided" :divided="item.divided"
@ -142,18 +138,27 @@ async function runAction(item: ActionItem) {
.rr-table-actions { .rr-table-actions {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 0;
// 收紧 el-button text 的内边距, 默认 padding: 8px 15px 太松散
:deep(.el-button.is-text) {
padding: 0 4px;
margin: 0;
font-size: 13px;
height: auto;
min-height: 0;
}
} }
.rr-more-trigger { .rr-more-trigger {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 26px; width: 22px;
height: 26px; height: 22px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
color: var(--ink-2, #475569); color: var(--ink-2, #475569);
font-size: 16px; font-size: 15px;
margin-left: 2px;
transition: all 0.15s; transition: all 0.15s;
&:hover { &:hover {
background: var(--el-fill-color-light, #F4F4F5); background: var(--el-fill-color-light, #F4F4F5);