fix(F006-W17.8): openapi/app 表格撑满 + 操作列按钮完整显示

用户反馈: 应用列表表格不撑满 + 操作列按钮显示不全
对比参考页 (用户列表) 修复:

列宽调整 (参考 RoleListView/UserListView 列宽方案):
- 应用名称 minWidth 180 → 220 (让列总宽超过容器, el-table 自然撑满)
- AppID minWidth 220 → 240 (增加密度)
- 新增最后调用列 (lastUsedAt, width 170) - 真实业务字段, 表格更充实
- 操作列 width 140 → 160 + align: center + fixed: right
  * 加宽 20px 给重发二维码 + ⋯ 留出空间
  * fixed: right 避免 el-table 重排时把操作列挤压到中间
  * align: center 跟其他列 (W17.7) 表头居中保持一致

测量对比 (1440 视口, 左菜单 260 + 主区 padding 28x2 = 316 可用):
- 用户列表 (参考):  表格 1152px, 右边距 28px
- openapi/app (修后): 表格 1150px, 右边距 29px → 视觉一致 ✅

操作列按钮完整性 (Playwright 实测):
- 行 0/2 (status=0/1): [详情, 重发二维码] + ⋯ (4按钮前2+⋯) ✅
- 行 1 (status=2):    [详情, 删除] (1按钮无⋯) ✅
This commit is contained in:
Sisyphus 2026-07-09 15:22:41 +08:00
parent 87e278749b
commit 458adb15af

View File

@ -161,11 +161,12 @@ async function loadCustomers() {
const columns = [ const columns = [
{ prop: 'customerName', label: '客户名', minWidth: 180 }, { prop: 'customerName', label: '客户名', minWidth: 180 },
{ prop: 'appName', label: '应用名称', minWidth: 180 }, { prop: 'appName', label: '应用名称', minWidth: 220 },
{ prop: 'appId', label: 'AppID', minWidth: 220 }, { prop: 'appId', label: 'AppID', minWidth: 240 },
{ prop: 'status', label: '状态', width: 100, slot: 'status' as const }, { prop: 'status', label: '状态', width: 100, slot: 'status' as const },
{ prop: 'createDate', label: '创建时间', width: 170, slot: 'createDate' as const }, { prop: 'createDate', label: '创建时间', width: 170, slot: 'createDate' as const },
{ label: '操作', width: 140, slot: 'action' as const } { prop: 'lastUsedAt', label: '最后调用', width: 170, formatter: (row: any) => fmtDate(row.lastUsedAt) },
{ label: '操作', width: 160, align: 'center' as const, fixed: 'right' as const, slot: 'action' as const }
] ]
function onSearch() { page.value = 1; load() } function onSearch() { page.value = 1; load() }