From d4cda618b8714386e3aabcc1cc6d93165bb904f8 Mon Sep 17 00:00:00 2001
From: Sisyphus <sisyphus@direv.local>
Date: Thu, 9 Jul 2026 15:33:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(F006-W17.8.1):=20=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=92=91=E6=BB=A1=E5=AE=B9=E5=99=A8=20(1920=20=E8=A7=86?=
 =?UTF-8?q?=E5=8F=A3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈: 集成管理-应用列表 (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  | 38 +++++++++++++++++++++++--
 src/modules/openapi/OpenAppListView.vue |  2 +-
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/components/DataTable/DataTable.vue b/src/components/DataTable/DataTable.vue
index b2aebf3..c2e68ff 100644
--- a/src/components/DataTable/DataTable.vue
+++ b/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"
diff --git a/src/modules/openapi/OpenAppListView.vue b/src/modules/openapi/OpenAppListView.vue
index 53abd57..ed07bc7 100644
--- a/src/modules/openapi/OpenAppListView.vue
+++ b/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 接管 */