zyc/AirGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: responsive layout + UI polish for all pages

Browse Source 
- 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>
This commit is contained in:
seaislee1209 2026-03-19 16:05:30 +08:00
parent 3213d6d98a
commit f305ae4262
6 changed files with 109 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/style.css
View File

@ -14,3 +14,35 @@ body {
width: 100%; width: 100%;
min-height: 100vh; 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;
}

20
frontend/src/views/alerts/AlertList.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div> <div>
<h2 style="margin-bottom: 20px;">告警记录</h2> <div class="page-header">
<h2>告警记录</h2>
</div>
<el-card> <el-card>
<div style="margin-bottom: 16px;"> <div style="margin-bottom: 16px;">
<el-radio-group v-model="typeFilter" @change="loadAlerts"> <el-radio-group v-model="typeFilter" @change="loadAlerts">
@ -11,25 +13,25 @@
<el-radio-button value="error">错误</el-radio-button> <el-radio-button value="error">错误</el-radio-button>
</el-radio-group> </el-radio-group>
</div> </div>
<el-table :data="alerts" stripe v-loading="loading" style="width: 100%;" empty-text="暂无记录"> <el-table :data="alerts" stripe v-loading="loading" table-layout="auto" empty-text="暂无记录">
<el-table-column prop="created_at" label="时间" width="180"> <el-table-column prop="created_at" label="时间" min-width="160">
<template #default="{ row }">{{ new Date(row.created_at).toLocaleString('zh-CN') }}</template> <template #default="{ row }">{{ new Date(row.created_at).toLocaleString('zh-CN') }}</template>
</el-table-column> </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 }"> <template #default="{ row }">
<el-tag :type="typeMap[row.alert_type]?.tag || 'info'" size="small"> <el-tag :type="typeMap[row.alert_type]?.tag || 'info'" size="small">
{{ typeMap[row.alert_type]?.label || row.alert_type }} {{ typeMap[row.alert_type]?.label || row.alert_type }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="iam_username" label="子账号" width="140" /> <el-table-column prop="iam_username" label="子账号" min-width="120" />
<el-table-column prop="title" label="标题" /> <el-table-column prop="title" label="标题" min-width="200" />
<el-table-column prop="spending_amount" label="消费金额" width="120"> <el-table-column prop="spending_amount" label="消费金额" min-width="100" align="right">
<template #default="{ row }"> <template #default="{ row }">
{{ row.spending_amount ? `¥${row.spending_amount}` : '-' }} {{ row.spending_amount ? `¥${Number(row.spending_amount).toLocaleString()}` : '-' }}
</template> </template>
</el-table-column> </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 }"> <template #default="{ row }">
<el-icon :color="row.notified ? '#67c23a' : '#ccc'"><CircleCheck /></el-icon> <el-icon :color="row.notified ? '#67c23a' : '#ccc'"><CircleCheck /></el-icon>
</template> </template>

28
frontend/src/views/billing/BillingView.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;"> <div class="page-header">
<h2>消费监控</h2> <h2>消费监控</h2>
<div> <div class="actions">
<el-button @click="refreshSpending" :loading="refreshing"> <el-button @click="refreshSpending" :loading="refreshing">
<el-icon><Refresh /></el-icon> 刷新消费数据 <el-icon><Refresh /></el-icon> 刷新消费数据
</el-button> </el-button>
@ -11,7 +11,7 @@
</div> </div>
<el-row :gutter="20" style="margin-bottom: 20px;" v-if="balance"> <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-card shadow="hover">
<el-statistic title="主账号可用余额" :value="Number(balance.AvailableBalance || balance.availableBalance || 0)" <el-statistic title="主账号可用余额" :value="Number(balance.AvailableBalance || balance.availableBalance || 0)"
:precision="2" prefix="¥" /> :precision="2" prefix="¥" />
@ -23,29 +23,29 @@
<template #header> <template #header>
<span>各子账号消费与额度</span> <span>各子账号消费与额度</span>
</template> </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' }"> :default-sort="{ prop: 'consumed_total', order: 'descending' }">
<el-table-column prop="username" label="用户名" width="160" /> <el-table-column prop="username" label="用户名" min-width="120" />
<el-table-column prop="display_name" label="显示名" width="140" /> <el-table-column prop="display_name" label="显示名" min-width="100" />
<el-table-column prop="project_name" label="项目" width="160" /> <el-table-column prop="project_name" label="项目" min-width="120" />
<el-table-column prop="consumed_total" label="累计消费" width="140" sortable> <el-table-column prop="consumed_total" label="累计消费" min-width="110" sortable align="right">
<template #default="{ row }"> <template #default="{ row }">
<span style="font-weight: 600; color: #e6a23c;"> <span style="font-weight: 600; color: #e6a23c;">
¥{{ Number(row.consumed_total).toLocaleString() }} ¥{{ Number(row.consumed_total).toLocaleString() }}
</span> </span>
</template> </template>
</el-table-column> </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> <template #default="{ row }">¥{{ Number(row.allocated_quota).toLocaleString() }}</template>
</el-table-column> </el-table-column>
<el-table-column label="剩余额度" width="120"> <el-table-column label="剩余" min-width="100" align="right">
<template #default="{ row }"> <template #default="{ row }">
<span :style="{ color: Number(row.remaining_quota) <= 0 ? '#f56c6c' : '#67c23a', fontWeight: 600 }"> <span :style="{ color: Number(row.remaining_quota) <= 0 ? '#f56c6c' : '#67c23a', fontWeight: 600 }">
¥{{ Number(row.remaining_quota).toLocaleString() }} ¥{{ Number(row.remaining_quota).toLocaleString() }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="额度使用率" min-width="200"> <el-table-column label="使用率" min-width="160">
<template #default="{ row }"> <template #default="{ row }">
<el-progress v-if="Number(row.allocated_quota) > 0" <el-progress v-if="Number(row.allocated_quota) > 0"
:percentage="Math.min(100, row.usage_percent || 0)" :percentage="Math.min(100, row.usage_percent || 0)"
@ -56,16 +56,16 @@
<span v-else style="color:#999;font-size:12px;">未划拨</span> <span v-else style="color:#999;font-size:12px;">未划拨</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="告警阶梯" width="150"> <el-table-column label="告警" min-width="110" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-tag v-for="step in (row.effective_alert_thresholds || [])" :key="step" <el-tag v-for="step in (row.effective_alert_thresholds || [])" :key="step"
:type="(row.triggered_alerts || []).includes(step) ? 'danger' : 'info'" :type="(row.triggered_alerts || []).includes(step) ? 'danger' : 'info'"
size="small" style="margin:1px 2px;"> size="small" style="margin:1px;">
{{ step }}% {{ step }}%
</el-tag> </el-tag>
</template> </template>
</el-table-column> </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 }"> <template #default="{ row }">
{{ row.spending_updated_at ? new Date(row.spending_updated_at).toLocaleString('zh-CN') : '暂无' }} {{ row.spending_updated_at ? new Date(row.spending_updated_at).toLocaleString('zh-CN') : '暂无' }}
</template> </template>

34
frontend/src/views/dashboard/DashboardView.vue
View File

@ -1,27 +1,29 @@
<template> <template>
<div> <div>
<h2 style="margin-bottom: 24px;">仪表盘</h2> <div class="page-header">
<el-row :gutter="20" style="margin-bottom: 24px;"> <h2>仪表盘</h2>
<el-col :span="6"> </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-card shadow="hover">
<el-statistic title="子账号总数" :value="data.total_users" /> <el-statistic title="子账号总数" :value="data.total_users" />
</el-card> </el-card>
</el-col> </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-card shadow="hover">
<el-statistic title="正常运行" :value="data.active_users"> <el-statistic title="正常运行" :value="data.active_users">
<template #suffix><span style="color:#67c23a;font-size:14px;"> 个</span></template> <template #suffix><span style="color:#67c23a;font-size:14px;"> 个</span></template>
</el-statistic> </el-statistic>
</el-card> </el-card>
</el-col> </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-card shadow="hover">
<el-statistic title="已停用" :value="data.disabled_users"> <el-statistic title="已停用" :value="data.disabled_users">
<template #suffix><span style="color:#f56c6c;font-size:14px;"> 个</span></template> <template #suffix><span style="color:#f56c6c;font-size:14px;"> 个</span></template>
</el-statistic> </el-statistic>
</el-card> </el-card>
</el-col> </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-card shadow="hover">
<el-statistic title="累计总消费" :value="Number(data.total_spending)" :precision="2" <el-statistic title="累计总消费" :value="Number(data.total_spending)" :precision="2"
prefix="¥" /> prefix="¥" />
@ -33,21 +35,22 @@
<template #header> <template #header>
<span>最近告警</span> <span>最近告警</span>
</template> </template>
<el-table :data="data.recent_alerts" stripe style="width: 100%;" empty-text="暂无告警"> <el-table :data="data.recent_alerts" stripe table-layout="auto" empty-text="暂无告警">
<el-table-column prop="created_at" label="时间" width="180"> <el-table-column prop="created_at" label="时间" min-width="160">
<template #default="{ row }">{{ formatTime(row.created_at) }}</template> <template #default="{ row }">{{ formatTime(row.created_at) }}</template>
</el-table-column> </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 }"> <template #default="{ row }">
<el-tag :type="row.alert_type === 'disable' ? 'danger' : row.alert_type === 'warning' ? 'warning' : 'info'" size="small"> <el-tag :type="typeTagMap[row.alert_type] || 'info'" size="small">
{{ row.alert_type === 'disable' ? '停用' : row.alert_type === 'warning' ? '告警' : row.alert_type }} {{ typeLabelMap[row.alert_type] || row.alert_type }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="title" label="标题" /> <el-table-column prop="iam_username" label="子账号" min-width="120" />
<el-table-column prop="spending_amount" label="消费" 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 }"> <template #default="{ row }">
{{ row.spending_amount ? `¥${row.spending_amount}` : '-' }} {{ row.spending_amount ? `¥${Number(row.spending_amount).toLocaleString()}` : '-' }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -64,6 +67,9 @@ const data = ref({
monitored_users: 0, total_spending: '0', recent_alerts: [], 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 () => { onMounted(async () => {
try { try {
const res = await api.get('/api/v1/dashboard/') const res = await api.get('/api/v1/dashboard/')

47
frontend/src/views/iam/IAMUserList.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;"> <div class="page-header">
<h2>子账号管理</h2> <h2>子账号管理</h2>
<div style="display:flex; gap:8px;"> <div class="actions">
<el-button type="success" @click="showCreate = true"> <el-button type="success" @click="showCreate = true">
<el-icon><Plus /></el-icon> 创建子账号 <el-icon><Plus /></el-icon> 创建子账号
</el-button> </el-button>
@ -13,34 +13,34 @@
</div> </div>
<el-card> <el-card>
<el-table :data="users" stripe v-loading="loading" style="width: 100%;"> <el-table :data="users" stripe v-loading="loading" table-layout="auto">
<el-table-column prop="username" label="用户名" width="140" /> <el-table-column prop="username" label="用户名" min-width="120" />
<el-table-column prop="display_name" label="显示名" width="110" /> <el-table-column prop="display_name" label="显示名" min-width="100" />
<el-table-column prop="status" label="状态" width="80"> <el-table-column prop="status" label="状态" min-width="70" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-tag :type="row.status === 'active' ? 'success' : row.status === 'disabled' ? 'danger' : 'info'" size="small"> <el-tag :type="row.status === 'active' ? 'success' : row.status === 'disabled' ? 'danger' : 'info'" size="small">
{{ row.status === 'active' ? '正常' : row.status === 'disabled' ? '已停用' : '未知' }} {{ row.status === 'active' ? '正常' : row.status === 'disabled' ? '已停用' : '未知' }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </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> <template #default="{ row }">¥{{ Number(row.allocated_quota).toLocaleString() }}</template>
</el-table-column> </el-table-column>
<el-table-column label="累计消费" width="120"> <el-table-column label="已消费" min-width="100" align="right">
<template #default="{ row }"> <template #default="{ row }">
<span :style="{ color: Number(row.consumed_total) > 0 ? '#e6a23c' : '' }"> <span :style="{ color: Number(row.consumed_total) > 0 ? '#e6a23c' : '' }">
¥{{ Number(row.consumed_total).toLocaleString() }} ¥{{ Number(row.consumed_total).toLocaleString() }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="剩余额度" width="120"> <el-table-column label="剩余" min-width="100" align="right">
<template #default="{ row }"> <template #default="{ row }">
<span :style="{ color: Number(row.remaining_quota) <= 0 ? '#f56c6c' : '#67c23a', fontWeight: 600 }"> <span :style="{ color: Number(row.remaining_quota) <= 0 ? '#f56c6c' : '#67c23a', fontWeight: 600 }">
¥{{ Number(row.remaining_quota).toLocaleString() }} ¥{{ Number(row.remaining_quota).toLocaleString() }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="使用率" width="140"> <el-table-column label="使用率" min-width="130">
<template #default="{ row }"> <template #default="{ row }">
<el-progress v-if="Number(row.allocated_quota) > 0" <el-progress v-if="Number(row.allocated_quota) > 0"
:percentage="Math.min(100, row.usage_percent || 0)" :percentage="Math.min(100, row.usage_percent || 0)"
@ -51,23 +51,34 @@
<span v-else style="color:#999;font-size:12px;">未划拨</span> <span v-else style="color:#999;font-size:12px;">未划拨</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="告警阶梯" width="130"> <el-table-column label="告警" min-width="110" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-tag v-for="step in (row.effective_alert_thresholds || [])" :key="step" <el-tag v-for="step in (row.effective_alert_thresholds || [])" :key="step"
:type="(row.triggered_alerts || []).includes(step) ? 'danger' : 'info'" :type="(row.triggered_alerts || []).includes(step) ? 'danger' : 'info'"
size="small" style="margin:1px 2px;"> size="small" style="margin:1px;">
{{ step }}% {{ step }}%
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="320" fixed="right"> <el-table-column label="操作" width="200" fixed="right" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-button size="small" type="warning" @click="openAllocate(row)">划拨</el-button> <el-button size="small" type="warning" @click="openAllocate(row)">划拨</el-button>
<el-button size="small" @click="openConfig(row)">配置</el-button> <el-dropdown trigger="click" style="margin-left:8px;">
<el-button v-if="row.status === 'active'" size="small" type="danger" @click="handleDisable(row)">停用</el-button> <el-button size="small">
<el-button v-if="row.status === 'disabled'" size="small" type="success" @click="handleEnable(row)">恢复</el-button> 更多 <el-icon style="margin-left:4px;"><ArrowDown /></el-icon>
<el-button size="small" @click="openPolicies(row)">权限</el-button> </el-button>
<el-button size="small" @click="openQuotaHistory(row)">记录</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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

4
frontend/src/views/settings/SettingsView.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div> <div>
<h2 style="margin-bottom: 20px;">系统设置</h2> <div class="page-header">
<h2>系统设置</h2>
</div>
<!-- Global Config --> <!-- Global Config -->
<el-card style="margin-bottom: 20px;"> <el-card style="margin-bottom: 20px;">