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>
This commit is contained in:
seaislee1209
parent
e04712cc79
commit
277de4651f
@ -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 */
|
||||
|
||||
@ -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' }}>
|
||||
|
||||
@ -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; }
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -200,19 +200,21 @@ export function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{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) }} />
|
||||
<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(300, sortedTeams.length * 36) }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
<div className={styles.chartSection}>
|
||||
<h2 className={styles.sectionTitle}>用户消费排行（Top 10 · 本月）</h2>
|
||||
<div className={styles.chartWrapper}>
|
||||
<ReactEChartsCore echarts={echarts} option={barOption} style={{ height: Math.max(300, sortedUsers.length * 36) }} />
|
||||
<div className={styles.chartSection}>
|
||||
<h2 className={styles.sectionTitle}>用户消费排行（Top 10 · 本月）</h2>
|
||||
<div className={styles.chartWrapper}>
|
||||
<ReactEChartsCore echarts={echarts} option={barOption} style={{ height: Math.max(300, sortedUsers.length * 36) }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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); }
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -341,6 +342,7 @@ export function SettingsPage() {
|
||||
{saving ? '保存中...' : '保存异常检测设置'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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); }
|
||||
|
||||
|
||||
@ -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); }
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user