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