From f305ae4262b2e8671c873ae90f2aa990e45de8b1 Mon Sep 17 00:00:00 2001
From: seaislee1209 <seaislee129@gmail.com>
Date: Thu, 19 Mar 2026 16:05:30 +0800
Subject: [PATCH] fix: responsive layout + UI polish for all pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace fixed-width table columns with min-width + table-layout="auto"
  so tables stretch to fill available space instead of squeezing left
- Condense 6 action buttons into "划拨" + "更多" dropdown menu
- Add responsive grid columns for dashboard stats (xl:6 → xs:24)
- Unify page headers with .page-header CSS class
- Add global .el-table width:100% fix
- Consistent number formatting with toLocaleString()
- Clean up redundant style attributes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/style.css                        | 32 +++++++++++++
 frontend/src/views/alerts/AlertList.vue       | 20 ++++----
 frontend/src/views/billing/BillingView.vue    | 28 +++++------
 .../src/views/dashboard/DashboardView.vue     | 34 ++++++++------
 frontend/src/views/iam/IAMUserList.vue        | 47 ++++++++++++-------
 frontend/src/views/settings/SettingsView.vue  |  4 +-
 6 files changed, 109 insertions(+), 56 deletions(-)

diff --git a/frontend/src/style.css b/frontend/src/style.css
index fadb5b7..fc372dc 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -14,3 +14,35 @@ body {
   width: 100%;
   min-height: 100vh;
 }
+
+/* Element Plus table full-width fix */
+.el-table {
+  width: 100% !important;
+}
+
+.el-card {
+  width: 100%;
+}
+
+/* Page title bar */
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.page-header h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #1d1e2c;
+}
+
+.page-header .actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
diff --git a/frontend/src/views/alerts/AlertList.vue b/frontend/src/views/alerts/AlertList.vue
index d2e7ae0..aa7d3e8 100644
--- a/frontend/src/views/alerts/AlertList.vue
+++ b/frontend/src/views/alerts/AlertList.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <h2 style="margin-bottom: 20px;">告警记录</h2>
+    <div class="page-header">
+      <h2>告警记录</h2>
+    </div>
     <el-card>
       <div style="margin-bottom: 16px;">
         <el-radio-group v-model="typeFilter" @change="loadAlerts">
@@ -11,25 +13,25 @@
           <el-radio-button value="error">错误</el-radio-button>
         </el-radio-group>
       </div>
-      <el-table :data="alerts" stripe v-loading="loading" style="width: 100%;" empty-text="暂无记录">
-        <el-table-column prop="created_at" label="时间" width="180">
+      <el-table :data="alerts" stripe v-loading="loading" table-layout="auto" empty-text="暂无记录">
+        <el-table-column prop="created_at" label="时间" min-width="160">
           <template #default="{ row }">{{ new Date(row.created_at).toLocaleString('zh-CN') }}</template>
         </el-table-column>
-        <el-table-column prop="alert_type" label="类型" width="100">
+        <el-table-column prop="alert_type" label="类型" min-width="80" align="center">
           <template #default="{ row }">
             <el-tag :type="typeMap[row.alert_type]?.tag || 'info'" size="small">
               {{ typeMap[row.alert_type]?.label || row.alert_type }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="iam_username" label="子账号" width="140" />
-        <el-table-column prop="title" label="标题" />
-        <el-table-column prop="spending_amount" label="消费金额" width="120">
+        <el-table-column prop="iam_username" label="子账号" min-width="120" />
+        <el-table-column prop="title" label="标题" min-width="200" />
+        <el-table-column prop="spending_amount" label="消费金额" min-width="100" align="right">
           <template #default="{ row }">
-            {{ row.spending_amount ? `¥${row.spending_amount}` : '-' }}
+            {{ row.spending_amount ? `¥${Number(row.spending_amount).toLocaleString()}` : '-' }}
           </template>
         </el-table-column>
-        <el-table-column prop="notified" label="已通知" width="80">
+        <el-table-column prop="notified" label="已通知" min-width="70" align="center">
           <template #default="{ row }">
             <el-icon :color="row.notified ? '#67c23a' : '#ccc'"><CircleCheck /></el-icon>
           </template>
diff --git a/frontend/src/views/billing/BillingView.vue b/frontend/src/views/billing/BillingView.vue
index e972921..64582c3 100644
--- a/frontend/src/views/billing/BillingView.vue
+++ b/frontend/src/views/billing/BillingView.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
+    <div class="page-header">
       <h2>消费监控</h2>
-      <div>
+      <div class="actions">
         <el-button @click="refreshSpending" :loading="refreshing">
           <el-icon><Refresh /></el-icon> 刷新消费数据
         </el-button>
@@ -11,7 +11,7 @@
     </div>
 
     <el-row :gutter="20" style="margin-bottom: 20px;" v-if="balance">
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <el-card shadow="hover">
           <el-statistic title="主账号可用余额" :value="Number(balance.AvailableBalance || balance.availableBalance || 0)"
                         :precision="2" prefix="¥" />
@@ -23,29 +23,29 @@
       <template #header>
         <span>各子账号消费与额度</span>
       </template>
-      <el-table :data="overview.users || []" stripe v-loading="loading" style="width:100%;"
+      <el-table :data="overview.users || []" stripe v-loading="loading" table-layout="auto"
                 :default-sort="{ prop: 'consumed_total', order: 'descending' }">
-        <el-table-column prop="username" label="用户名" width="160" />
-        <el-table-column prop="display_name" label="显示名" width="140" />
-        <el-table-column prop="project_name" label="项目" width="160" />
-        <el-table-column prop="consumed_total" label="累计消费" width="140" sortable>
+        <el-table-column prop="username" label="用户名" min-width="120" />
+        <el-table-column prop="display_name" label="显示名" min-width="100" />
+        <el-table-column prop="project_name" label="项目" min-width="120" />
+        <el-table-column prop="consumed_total" label="累计消费" min-width="110" sortable align="right">
           <template #default="{ row }">
             <span style="font-weight: 600; color: #e6a23c;">
               ¥{{ Number(row.consumed_total).toLocaleString() }}
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="已划拨额度" width="120">
+        <el-table-column label="已划拨" min-width="100" align="right">
           <template #default="{ row }">¥{{ Number(row.allocated_quota).toLocaleString() }}</template>
         </el-table-column>
-        <el-table-column label="剩余额度" width="120">
+        <el-table-column label="剩余" min-width="100" align="right">
           <template #default="{ row }">
             <span :style="{ color: Number(row.remaining_quota) <= 0 ? '#f56c6c' : '#67c23a', fontWeight: 600 }">
               ¥{{ Number(row.remaining_quota).toLocaleString() }}
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="额度使用率" min-width="200">
+        <el-table-column label="使用率" min-width="160">
           <template #default="{ row }">
             <el-progress v-if="Number(row.allocated_quota) > 0"
               :percentage="Math.min(100, row.usage_percent || 0)"
@@ -56,16 +56,16 @@
             <span v-else style="color:#999;font-size:12px;">未划拨</span>
           </template>
         </el-table-column>
-        <el-table-column label="告警阶梯" width="150">
+        <el-table-column label="告警" min-width="110" align="center">
           <template #default="{ row }">
             <el-tag v-for="step in (row.effective_alert_thresholds || [])" :key="step"
                     :type="(row.triggered_alerts || []).includes(step) ? 'danger' : 'info'"
-                    size="small" style="margin:1px 2px;">
+                    size="small" style="margin:1px;">
               {{ step }}%
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="spending_updated_at" label="更新时间" width="180">
+        <el-table-column prop="spending_updated_at" label="更新时间" min-width="150">
           <template #default="{ row }">
             {{ row.spending_updated_at ? new Date(row.spending_updated_at).toLocaleString('zh-CN') : '暂无' }}
           </template>
diff --git a/frontend/src/views/dashboard/DashboardView.vue b/frontend/src/views/dashboard/DashboardView.vue
index b115901..b54637e 100644
--- a/frontend/src/views/dashboard/DashboardView.vue
+++ b/frontend/src/views/dashboard/DashboardView.vue
@@ -1,27 +1,29 @@
 <template>
   <div>
-    <h2 style="margin-bottom: 24px;">仪表盘</h2>
-    <el-row :gutter="20" style="margin-bottom: 24px;">
-      <el-col :span="6">
+    <div class="page-header">
+      <h2>仪表盘</h2>
+    </div>
+    <el-row :gutter="16" style="margin-bottom: 24px;">
+      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="margin-bottom:12px;">
         <el-card shadow="hover">
           <el-statistic title="子账号总数" :value="data.total_users" />
         </el-card>
       </el-col>
-      <el-col :span="6">
+      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="margin-bottom:12px;">
         <el-card shadow="hover">
           <el-statistic title="正常运行" :value="data.active_users">
             <template #suffix><span style="color:#67c23a;font-size:14px;"> 个</span></template>
           </el-statistic>
         </el-card>
       </el-col>
-      <el-col :span="6">
+      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="margin-bottom:12px;">
         <el-card shadow="hover">
           <el-statistic title="已停用" :value="data.disabled_users">
             <template #suffix><span style="color:#f56c6c;font-size:14px;"> 个</span></template>
           </el-statistic>
         </el-card>
       </el-col>
-      <el-col :span="6">
+      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="margin-bottom:12px;">
         <el-card shadow="hover">
           <el-statistic title="累计总消费" :value="Number(data.total_spending)" :precision="2"
                         prefix="¥" />
@@ -33,21 +35,22 @@
       <template #header>
         <span>最近告警</span>
       </template>
-      <el-table :data="data.recent_alerts" stripe style="width: 100%;" empty-text="暂无告警">
-        <el-table-column prop="created_at" label="时间" width="180">
+      <el-table :data="data.recent_alerts" stripe table-layout="auto" empty-text="暂无告警">
+        <el-table-column prop="created_at" label="时间" min-width="160">
           <template #default="{ row }">{{ formatTime(row.created_at) }}</template>
         </el-table-column>
-        <el-table-column prop="alert_type" label="类型" width="100">
+        <el-table-column prop="alert_type" label="类型" min-width="80" align="center">
           <template #default="{ row }">
-            <el-tag :type="row.alert_type === 'disable' ? 'danger' : row.alert_type === 'warning' ? 'warning' : 'info'" size="small">
-              {{ row.alert_type === 'disable' ? '停用' : row.alert_type === 'warning' ? '告警' : row.alert_type }}
+            <el-tag :type="typeTagMap[row.alert_type] || 'info'" size="small">
+              {{ typeLabelMap[row.alert_type] || row.alert_type }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="title" label="标题" />
-        <el-table-column prop="spending_amount" label="消费" width="120">
+        <el-table-column prop="iam_username" label="子账号" min-width="120" />
+        <el-table-column prop="title" label="标题" min-width="200" />
+        <el-table-column prop="spending_amount" label="消费" min-width="100" align="right">
           <template #default="{ row }">
-            {{ row.spending_amount ? `¥${row.spending_amount}` : '-' }}
+            {{ row.spending_amount ? `¥${Number(row.spending_amount).toLocaleString()}` : '-' }}
           </template>
         </el-table-column>
       </el-table>
@@ -64,6 +67,9 @@ const data = ref({
   monitored_users: 0, total_spending: '0', recent_alerts: [],
 })
 
+const typeLabelMap = { warning: '告警', disable: '停用', manual: '操作', error: '错误' }
+const typeTagMap = { warning: 'warning', disable: 'danger', manual: '', error: 'danger' }
+
 onMounted(async () => {
   try {
     const res = await api.get('/api/v1/dashboard/')
diff --git a/frontend/src/views/iam/IAMUserList.vue b/frontend/src/views/iam/IAMUserList.vue
index 9fae0fe..51d297f 100644
--- a/frontend/src/views/iam/IAMUserList.vue
+++ b/frontend/src/views/iam/IAMUserList.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
+    <div class="page-header">
       <h2>子账号管理</h2>
-      <div style="display:flex; gap:8px;">
+      <div class="actions">
         <el-button type="success" @click="showCreate = true">
           <el-icon><Plus /></el-icon> 创建子账号
         </el-button>
@@ -13,34 +13,34 @@
     </div>
 
     <el-card>
-      <el-table :data="users" stripe v-loading="loading" style="width: 100%;">
-        <el-table-column prop="username" label="用户名" width="140" />
-        <el-table-column prop="display_name" label="显示名" width="110" />
-        <el-table-column prop="status" label="状态" width="80">
+      <el-table :data="users" stripe v-loading="loading" table-layout="auto">
+        <el-table-column prop="username" label="用户名" min-width="120" />
+        <el-table-column prop="display_name" label="显示名" min-width="100" />
+        <el-table-column prop="status" label="状态" min-width="70" align="center">
           <template #default="{ row }">
             <el-tag :type="row.status === 'active' ? 'success' : row.status === 'disabled' ? 'danger' : 'info'" size="small">
               {{ row.status === 'active' ? '正常' : row.status === 'disabled' ? '已停用' : '未知' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="已划拨额度" width="120">
+        <el-table-column label="已划拨" min-width="100" align="right">
           <template #default="{ row }">¥{{ Number(row.allocated_quota).toLocaleString() }}</template>
         </el-table-column>
-        <el-table-column label="累计消费" width="120">
+        <el-table-column label="已消费" min-width="100" align="right">
           <template #default="{ row }">
             <span :style="{ color: Number(row.consumed_total) > 0 ? '#e6a23c' : '' }">
               ¥{{ Number(row.consumed_total).toLocaleString() }}
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="剩余额度" width="120">
+        <el-table-column label="剩余" min-width="100" align="right">
           <template #default="{ row }">
             <span :style="{ color: Number(row.remaining_quota) <= 0 ? '#f56c6c' : '#67c23a', fontWeight: 600 }">
               ¥{{ Number(row.remaining_quota).toLocaleString() }}
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="使用率" width="140">
+        <el-table-column label="使用率" min-width="130">
           <template #default="{ row }">
             <el-progress v-if="Number(row.allocated_quota) > 0"
               :percentage="Math.min(100, row.usage_percent || 0)"
@@ -51,23 +51,34 @@
             <span v-else style="color:#999;font-size:12px;">未划拨</span>
           </template>
         </el-table-column>
-        <el-table-column label="告警阶梯" width="130">
+        <el-table-column label="告警" min-width="110" align="center">
           <template #default="{ row }">
             <el-tag v-for="step in (row.effective_alert_thresholds || [])" :key="step"
                     :type="(row.triggered_alerts || []).includes(step) ? 'danger' : 'info'"
-                    size="small" style="margin:1px 2px;">
+                    size="small" style="margin:1px;">
               {{ step }}%
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="320" fixed="right">
+        <el-table-column label="操作" width="200" fixed="right" align="center">
           <template #default="{ row }">
             <el-button size="small" type="warning" @click="openAllocate(row)">划拨</el-button>
-            <el-button size="small" @click="openConfig(row)">配置</el-button>
-            <el-button v-if="row.status === 'active'" size="small" type="danger" @click="handleDisable(row)">停用</el-button>
-            <el-button v-if="row.status === 'disabled'" size="small" type="success" @click="handleEnable(row)">恢复</el-button>
-            <el-button size="small" @click="openPolicies(row)">权限</el-button>
-            <el-button size="small" @click="openQuotaHistory(row)">记录</el-button>
+            <el-dropdown trigger="click" style="margin-left:8px;">
+              <el-button size="small">
+                更多 <el-icon style="margin-left:4px;"><ArrowDown /></el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="openConfig(row)">监控配置</el-dropdown-item>
+                  <el-dropdown-item @click="openPolicies(row)">权限策略</el-dropdown-item>
+                  <el-dropdown-item @click="openQuotaHistory(row)">划拨记录</el-dropdown-item>
+                  <el-dropdown-item v-if="row.status === 'active'" divided
+                    @click="handleDisable(row)" style="color:#f56c6c;">停用账号</el-dropdown-item>
+                  <el-dropdown-item v-if="row.status === 'disabled'" divided
+                    @click="handleEnable(row)" style="color:#67c23a;">恢复账号</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </template>
         </el-table-column>
       </el-table>
diff --git a/frontend/src/views/settings/SettingsView.vue b/frontend/src/views/settings/SettingsView.vue
index e922571..44f01bf 100644
--- a/frontend/src/views/settings/SettingsView.vue
+++ b/frontend/src/views/settings/SettingsView.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <h2 style="margin-bottom: 20px;">系统设置</h2>
+    <div class="page-header">
+      <h2>系统设置</h2>
+    </div>
 
     <!-- Global Config -->
     <el-card style="margin-bottom: 20px;">