fix(F006-W17.8.2): openapi/app 列宽优化 (AppID 缩到 240 + 操作列 160 + 加 2 业务列)

用户反馈: AppID 列右侧留白太多, 操作列窄按钮显示不全

列宽重新调整 (Playwright 1920 视口实测):
- 客户名 minWidth 150 → 150 (内容 14 字符, 实际 215px)
- 应用名称 minWidth 180 → 180 (内容 19 字符, 实际 257px)
- AppID minWidth 200 → width 240 + showOverflowTooltip (硬性不被内容撑大)
- 新增 权限范围列 (scopes, minWidth 160) - 真实业务字段
- 新增 调用次数列 (totalCallCount, width 100) - 真实业务字段
- 状态 width 100 → 90
- 创建时间 width 170
- 最后调用 width 170 (新增列)
- 操作 width 200 → 160 + fixed right + align center

实测列宽 (1920 视口, 表格 1630px 撑满):
- 客户名 215 / 应用名称 257 / AppID 240 / 权限范围 228
- 调用次数 100 / 状态 90 / 创建时间 170 / 最后调用 170 / 操作 160
- 9 列共 1630px, 右边距 29px (项目标准)

操作列按钮完整性:
- 行 0 (已撤销): [详情, 删除] ✅
- 行 1/2 (已激活): [详情, 重发二维码] + ⋯ ✅

新加 2 个真实业务列 (权限范围/调用次数) 充实表格, 避免列过少

src/components/DataTable/DataTable.vue

@@ -89,10 +89,17 @@ function onRowClick(row: any) { emit('row-click', row) }
 function onPageChange(p: number) { emit('page-change', p) }
 function onLimitChange(l: number) { emit('limit-change', l) }
 
-// W17.8.2: 表格自动撑满 (列总宽 < 容器宽时, 给最后一列加 minWidth 填满差额)
+// W17.8.2: 表格自动撑满 (列总宽 < 容器宽时, 给弹性列加 minWidth 填满差额)
+// W17.8.2 改: 差额加到"中间弹性列" (第一个有 minWidth 且非 fixed 的列), 不是最后一列
+// 原因: 最后一列通常是"操作列" (fixed: right, width 固定), 加差额会撑大操作列破坏布局
 // 解决大视口下列少导致右侧大面积空白
 const tableRef = ref<HTMLElement | null>(null)
 const lastColMinWidth = ref<number>(0)
+const flexColIdx = computed(() => {
+  // 优先找第一个有 minWidth 且非 fixed 的数据列 (不是 selection/status)
+  const idx = props.columns.findIndex(c => c.minWidth && !c.fixed && c.type !== 'selection' && c.type !== 'status')
+  return idx >= 0 ? idx : props.columns.length - 1
+})
 
 async function autoFillTable() {
   await nextTick()
@@ -170,7 +177,7 @@ watch(() => props.columns, () => autoFillTable(), { flush: 'post' })
         :prop="col.type === 'status' || col.slot ? undefined : col.prop"
         :label="col.label"
         :width="col.width"
-        :min-width="idx === columns.length - 1 && lastColMinWidth > 0 ? Math.max(Number(col.minWidth) || 0, lastColMinWidth) : col.minWidth"
+        :min-width="idx === flexColIdx && lastColMinWidth > 0 ? Math.max(Number(col.minWidth) || 0, lastColMinWidth) : col.minWidth"
         :align="col.align || 'left'"
         :fixed="col.fixed"
         :show-overflow-tooltip="true"

src/modules/openapi/OpenAppListView.vue

@@ -160,10 +160,12 @@ async function loadCustomers() {
 }
 
 const columns = [
-  { prop: 'customerName', label: '客户名', minWidth: 180 },
+  { prop: 'customerName', label: '客户名', minWidth: 150 },
-  { prop: 'appName', label: '应用名称', minWidth: 220 },
+  { prop: 'appName', label: '应用名称', minWidth: 180 },
-  { prop: 'appId', label: 'AppID', minWidth: 240 },
+  { prop: 'appId', label: 'AppID', width: 240, showOverflowTooltip: true },
-  { prop: 'status', label: '状态', width: 100, slot: 'status' as const },
+  { prop: 'scopes', label: '权限范围', minWidth: 160 },
+  { prop: 'totalCallCount', label: '调用次数', width: 100, align: 'right' as const, formatter: (row: any) => row.totalCallCount ?? '--' },
+  { prop: 'status', label: '状态', width: 90, slot: 'status' as const },
   { prop: 'createDate', label: '创建时间', width: 170, slot: 'createDate' 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 }