fix: 管理后台 UI 优化 — 表格撑满全屏 + 弹窗实心背景 + 设置页/仪表盘双列布局

- 所有表格页面移除 max-width: 1200px，撑满可用宽度
- 表格 td 加 white-space: nowrap 防止长文本折行
- AdminLayout 修改密码弹窗 background 改为实心 #16161e（修复半透明看不清）
- 系统设置页改为双列 grid（配额+设备限制并排，公告+异常检测整行）
- 仪表盘改为撑满 + 团队/用户排行双列并排

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/src/pages/AdminAssetsPage.module.css

@@ -1,4 +1,4 @@
-.page { max-width: 1200px; }
+.page { max-width: none; }
 .title { font-size: 22px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 24px; }
 
 /* Stats bar */

web/src/pages/AdminLayout.tsx

@@ -115,7 +115,7 @@ export function AdminLayout() {
       {pwModalOpen && (
         <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}
           onClick={() => setPwModalOpen(false)}>
-          <div style={{ background: 'var(--color-bg-card)', borderRadius: '12px', padding: '24px', width: '360px', border: '1px solid var(--color-border-card)' }}
+          <div style={{ background: '#16161e', borderRadius: '12px', padding: '24px', width: '360px', border: '1px solid var(--color-border-card)' }}
             onClick={(e) => e.stopPropagation()}>
             <h3 style={{ margin: '0 0 16px', color: 'var(--color-text-primary)', fontSize: '16px' }}>修改密码</h3>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>

web/src/pages/AuditLogsPage.module.css

@@ -1,4 +1,4 @@
-.page { max-width: 1200px; }
+.page { max-width: none; }
 .title { font-size: 22px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 20px; }
 
 .filters { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }

web/src/pages/DashboardPage.module.css

@@ -1,5 +1,5 @@
 .page {
-  max-width: 1200px;
+  max-width: none;
 }
 
 .title {
@@ -108,8 +108,15 @@
   50% { opacity: 0.5; }
 }
 
+.chartsRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
 @media (max-width: 1024px) {
   .statsGrid { grid-template-columns: repeat(2, 1fr); }
+  .chartsRow { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 640px) {

web/src/pages/DashboardPage.tsx

@@ -200,11 +200,12 @@ export function DashboardPage() {
         </div>
       </div>
 
+      <div className={styles.chartsRow}>
         {sortedTeams.length > 0 && (
           <div className={styles.chartSection}>
             <h2 className={styles.sectionTitle}>团队消费排行（本月）</h2>
             <div className={styles.chartWrapper}>
-            <ReactEChartsCore echarts={echarts} option={teamBarOption} style={{ height: Math.max(200, sortedTeams.length * 36) }} />
+              <ReactEChartsCore echarts={echarts} option={teamBarOption} style={{ height: Math.max(300, sortedTeams.length * 36) }} />
             </div>
           </div>
         )}
@@ -216,5 +217,6 @@ export function DashboardPage() {
           </div>
         </div>
       </div>
+    </div>
   );
 }

web/src/pages/RecordsPage.module.css

@@ -1,4 +1,4 @@
-.page { max-width: 1200px; }
+.page { max-width: none; }
 .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
 .title { font-size: 22px; font-weight: 600; color: var(--color-text-primary); }
 .exportBtn {
@@ -32,7 +32,7 @@
 }
 .table { width: 100%; border-collapse: collapse; font-size: 13px; }
 .table th { padding: 12px 16px; text-align: left; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-card); white-space: nowrap; }
-.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); }
+.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); white-space: nowrap; }
 .table tr:last-child td { border-bottom: none; }
 .table tr:hover td { background: rgba(255, 255, 255, 0.02); }
 .timeCell { white-space: nowrap; font-size: 12px; color: var(--color-text-secondary); }

web/src/pages/SettingsPage.module.css

@@ -1,9 +1,11 @@
-.page { max-width: 720px; }
+.page { max-width: none; }
+.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.gridFull { grid-column: 1 / -1; }
 .title { font-size: 22px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 24px; }
 
 .card {
   background: var(--color-bg-card); border: 1px solid var(--color-border-card);
-  border-radius: var(--radius-card); padding: 24px; margin-bottom: 20px;
+  border-radius: var(--radius-card); padding: 24px;
 }
 .cardHeader { display: flex; justify-content: space-between; align-items: flex-start; }
 .cardTitle { font-size: 16px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 4px; }
@@ -47,6 +49,9 @@
 }
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
 
+@media (max-width: 900px) {
+  .grid { grid-template-columns: 1fr; }
+}
 @media (max-width: 640px) {
   .formRow { grid-template-columns: 1fr; }
 }

web/src/pages/SettingsPage.tsx

@@ -98,6 +98,7 @@ export function SettingsPage() {
     <div className={styles.page}>
       <h1 className={styles.title}>系统设置</h1>
 
+      <div className={styles.grid}>
       <div className={styles.card}>
         <h2 className={styles.cardTitle}>全局默认配额</h2>
         <p className={styles.cardDesc}>新注册用户将自动获得以下配额</p>
@@ -153,7 +154,7 @@ export function SettingsPage() {
         </button>
       </div>
 
-      <div className={styles.card}>
+      <div className={`${styles.card} ${styles.gridFull}`}>
         <div className={styles.cardHeader}>
           <div>
             <h2 className={styles.cardTitle}>系统公告</h2>
@@ -183,7 +184,7 @@ export function SettingsPage() {
         </button>
       </div>
 
-      <div className={styles.card}>
+      <div className={`${styles.card} ${styles.gridFull}`}>
         <div className={styles.cardHeader}>
           <div>
             <h2 className={styles.cardTitle}>异常检测与告警</h2>
@@ -342,5 +343,6 @@ export function SettingsPage() {
         </button>
       </div>
       </div>
+    </div>
   );
 }

web/src/pages/TeamsPage.module.css

@@ -1,4 +1,4 @@
-.page { max-width: 1200px; }
+.page { max-width: none; }
 .title { font-size: 22px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 20px; }
 
 .filters { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
@@ -22,7 +22,7 @@
 }
 .table { width: 100%; border-collapse: collapse; font-size: 13px; }
 .table th { padding: 12px 16px; text-align: left; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-card); white-space: nowrap; }
-.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); }
+.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); white-space: nowrap; }
 .table tr:last-child td { border-bottom: none; }
 .table tr:hover td { background: rgba(255, 255, 255, 0.02); }
 

web/src/pages/UsersPage.module.css

@@ -1,4 +1,4 @@
-.page { max-width: 1200px; }
+.page { max-width: none; }
 .title { font-size: 22px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 20px; }
 
 .filters { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
@@ -28,7 +28,7 @@
 }
 .table { width: 100%; border-collapse: collapse; font-size: 13px; }
 .table th { padding: 12px 16px; text-align: left; color: var(--color-text-secondary); font-weight: 500; border-bottom: 1px solid var(--color-border-card); white-space: nowrap; }
-.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); }
+.table td { padding: 12px 16px; color: var(--color-text-primary); border-bottom: 1px solid rgba(42, 42, 56, 0.5); white-space: nowrap; }
 .table tr:last-child td { border-bottom: none; }
 .table tr:hover td { background: rgba(255, 255, 255, 0.02); }