fix(F006-W17.8.1): 表格撑满容器 (1920 视口)

用户反馈: 集成管理-应用列表 (openapi/app) 在 1920 视口下右侧大面积留空,
操作列按钮显示不全。参考用户列表 (图二) 已撑满做统一标准。

根因 (W17 早期遗留):
- .rr-openapi-app { max-width: 1400px } 锁死容器宽度
- 适合 1440 视口, 但 1920 视口暴露问题
- 用户列表用 .rr-page { max-width: 100% } 早已不受限

修法 (统一标准):
- openapi/app .rr-openapi-app { max-width: 1400px } → 100%
- DataTable 组件增强: 加 tableRef + lastColMinWidth 状态
  * mounted/resize/data 变化时测量: 容器宽 vs 列总宽
  * 差额自动加到最后一列 minWidth (统一标准: 视口撑满)
  * 即使其他页面 max-width 仍写 1400px, 也能通过 JS 撑满

W17.8 列宽调整 (W17.8 已 commit, 现 +W17.8.1):
- 应用名称 minWidth 180 → 220
- AppID minWidth 220 → 240
- 新增最后调用列 (lastUsedAt, width 170)
- 操作列 width 140 → 160 + align: center + fixed: right

Playwright 1920 视口实测:
- 用户列表 (参考): 1632px 表格 / 28px 右边距 ✅
- 应用列表 (修后): 1630px 表格 / 29px 右边距 ✅ (与参考页一致)

操作列按钮完整性:
- 行 0/2/3 (status=0/1): [详情, 重发二维码] + ⋯ ✅
- 行 1 (status=2): [详情, 删除] (无⋯, 符合规则) ✅

src/components/DataTable/DataTable.vue

@@ -22,7 +22,7 @@
  *     </template>
  *   </DataTable>
  */
-import { computed } from 'vue'
+import { computed, nextTick, ref, watch, onMounted } from 'vue'
 
 interface Column {
   prop?: string
@@ -88,10 +88,42 @@ function onSelectionChange(rows: any[]) { emit('selection-change', rows) }
 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 填满差额)
+// 解决大视口下列少导致右侧大面积空白
+const tableRef = ref<HTMLElement | null>(null)
+const lastColMinWidth = ref<number>(0)
+
+async function autoFillTable() {
+  await nextTick()
+  // 双重 nextTick 等待列渲染
+  await nextTick()
+  const el = tableRef.value
+  if (!el) return
+  const table = el.querySelector('.el-table') as HTMLElement | null
+  if (!table) return
+  const containerW = el.clientWidth
+  const tableW = table.scrollWidth
+  if (tableW >= containerW - 4) {
+    lastColMinWidth.value = 0
+    return
+  }
+  // 差额 + 一些 buffer (避免 border 抖动)
+  const diff = containerW - tableW + 4
+  lastColMinWidth.value = diff
+}
+
+onMounted(() => {
+  autoFillTable()
+  window.addEventListener('resize', autoFillTable)
+})
+
+watch(() => props.data, () => autoFillTable(), { flush: 'post' })
+watch(() => props.columns, () => autoFillTable(), { flush: 'post' })
 </script>
 
 <template>
-  <div class="rr-data-table" :class="{ borderless }">
+  <div ref="tableRef" class="rr-data-table" :class="{ borderless }">
     <el-table
       :data="data"
       :loading="loading"
@@ -138,7 +170,7 @@ function onLimitChange(l: number) { emit('limit-change', l) }
         :prop="col.type === 'status' || col.slot ? undefined : col.prop"
         :label="col.label"
         :width="col.width"
-        :min-width="col.minWidth"
+        :min-width="idx === columns.length - 1 && 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

@@ -536,7 +536,7 @@ onMounted(() => { load(); loadCustomers() })
 </template>
 
 <style scoped lang="scss">
-.rr-openapi-app { max-width: 1400px; }
+.rr-openapi-app { max-width: 100%; }
 
 /* PageHeader/SearchBar 接管 */
 /* PageHeader/SearchBar 接管 */