style: polish admin operations pages

This commit is contained in:
boos
2026-06-06 22:19:42 +08:00
parent 6629d9d0a3
commit 16162095f7
9 changed files with 462 additions and 19 deletions
+1 -1
View File
@@ -1339,7 +1339,7 @@ export default function Accounts() {
: canAddVerifiedConnection;
return (
<div className="animate-fade-in">
<div className="animate-fade-in admin-ops-page accounts-ops-page">
<div className="page-header">
<h2 className="page-title">{tr("连接管理")}</h2>
{activeSegment !== "tokens" && (
+1 -1
View File
@@ -1065,7 +1065,7 @@ export default function DownstreamKeys() {
const empty = !loading && visibleItems.length === 0;
return (
<div className="animate-fade-in" style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
<div className="animate-fade-in admin-ops-page downstream-keys-page" style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
<div className="page-header" style={{ marginBottom: 0 }}>
<div>
<h2 className="page-title">下游密钥</h2>
+4 -4
View File
@@ -179,7 +179,7 @@ export default function NotificationSettings() {
if (loading) {
return (
<div className="animate-fade-in">
<div className="animate-fade-in admin-ops-page notification-settings-page">
<div className="skeleton" style={{ width: 220, height: 28, marginBottom: 20 }} />
<div className="skeleton" style={{ width: '100%', height: 320, borderRadius: 'var(--radius-sm)' }} />
</div>
@@ -187,7 +187,7 @@ export default function NotificationSettings() {
}
return (
<div className="animate-fade-in notification-settings-page" style={{ paddingBottom: 40 }}>
<div className="animate-fade-in admin-ops-page notification-settings-page" style={{ paddingBottom: 40 }}>
<PageHeader
title={tr('通知设置')}
actions={(
@@ -204,7 +204,7 @@ export default function NotificationSettings() {
<div className="notification-settings-layout" style={{ maxWidth: 980, display: 'flex', flexDirection: 'column', gap: 20 }}>
<div className="card animate-slide-up stagger-1" style={{ padding: 20 }}>
<div className="card notification-settings-card animate-slide-up stagger-1" style={{ padding: 20 }}>
<div style={{ fontWeight: 600, fontSize: 15, marginBottom: 8 }}>告警去噪与冷静期</div>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)', marginBottom: 12 }}>
相同告警在冷静期内不会重复推送;冷静期结束后会自动合并重复条数。
@@ -227,7 +227,7 @@ export default function NotificationSettings() {
</div>
{/* 卡片:Webhook & Bark */}
<div className="card animate-slide-up stagger-2" style={{ padding: 24, border: (runtime.webhookEnabled || runtime.barkEnabled) ? '1px solid var(--color-primary)' : '1px solid var(--color-border-light)' }}>
<div className="card notification-channel-card animate-slide-up stagger-2" style={{ padding: 24, border: (runtime.webhookEnabled || runtime.barkEnabled) ? '1px solid var(--color-primary)' : '1px solid var(--color-border-light)' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--color-primary-light)', color: 'var(--color-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+1 -1
View File
@@ -2016,7 +2016,7 @@ export default function OAuthManagement() {
);
return (
<div className="page-container animate-fade-in">
<div className="page-container animate-fade-in admin-ops-page oauth-ops-page">
<div className="page-header">
<div>
<h2 className="page-title">OAuth 管理</h2>
+1 -1
View File
@@ -2105,7 +2105,7 @@ export default function ProxyLogs() {
);
return (
<div className="animate-fade-in">
<div className="animate-fade-in admin-ops-page proxy-logs-page">
<div className="page-header" style={{ marginBottom: 16 }}>
<div>
<h2 className="page-title">{tr("使用日志")}</h2>
+10 -9
View File
@@ -176,7 +176,7 @@ export default function SiteAnnouncements() {
};
return (
<div className="animate-fade-in">
<div className="animate-fade-in admin-ops-page site-announcements-page">
<PageHeader
title={tr('用户公告')}
subtitle="管理员发布给普通用户的站内公告,会在普通用户面板中展示。"
@@ -201,9 +201,9 @@ export default function SiteAnnouncements() {
)}
/>
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(280px, 360px) 1fr', gap: 14, alignItems: 'start' }}>
<div className="card" style={{ padding: 18 }}>
<h3 style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>
<div className="site-announcements-layout" style={{ display: 'grid', gridTemplateColumns: 'minmax(280px, 360px) 1fr', gap: 14, alignItems: 'start' }}>
<div className="card site-announcements-form-card" style={{ padding: 18 }}>
<h3 className="site-announcements-section-title" style={{ fontSize: 15, fontWeight: 600, marginBottom: 14 }}>
{form.id ? '编辑公告' : '发布公告'}
</h3>
<div style={{ display: 'grid', gap: 12 }}>
@@ -265,8 +265,9 @@ export default function SiteAnnouncements() {
</div>
</div>
<div className="card" style={{ padding: 0 }}>
<div className="card site-announcements-list-card" style={{ padding: 0 }}>
<div
className="site-announcements-list-head"
style={{
padding: '14px 18px',
borderBottom: '1px solid var(--color-border-light)',
@@ -297,13 +298,13 @@ export default function SiteAnnouncements() {
return (
<div
key={row.id}
className={`animate-slide-up stagger-${Math.min(index + 1, 5)}`}
className={`site-announcements-row animate-slide-up stagger-${Math.min(index + 1, 5)}`}
style={{
padding: '16px 18px',
borderBottom: index === rows.length - 1 ? 'none' : '1px solid var(--color-border-light)',
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'flex-start', marginBottom: 8 }}>
<div className="site-announcements-row-head" style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'flex-start', marginBottom: 8 }}>
<div>
<div style={{ fontSize: 15, fontWeight: 600 }}>{row.title}</div>
<div style={{ marginTop: 5, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
@@ -316,7 +317,7 @@ export default function SiteAnnouncements() {
<span className="badge badge-muted">已读 {row.readCount || 0}</span>
</div>
</div>
<div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
<div className="site-announcements-row-actions" style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
<button type="button" className="btn btn-link btn-link-primary" onClick={() => editRow(row)}>
编辑
</button>
@@ -326,7 +327,7 @@ export default function SiteAnnouncements() {
</div>
</div>
<SiteAnnouncementContent content={row.content} />
<div style={{ marginTop: 8, fontSize: 12, color: 'var(--color-text-muted)' }}>
<div className="site-announcements-meta" style={{ marginTop: 8, fontSize: 12, color: 'var(--color-text-muted)' }}>
发布时间:{row.publishedAt || row.firstSeenAt || '-'}
</div>
</div>
+1 -1
View File
@@ -1148,7 +1148,7 @@ export default function Sites() {
};
return (
<div className="animate-fade-in">
<div className="animate-fade-in admin-ops-page sites-ops-page">
<div className="page-header">
<h2 className="page-title">{tr('站点管理')}</h2>
<div className="page-actions sites-page-actions">
+1 -1
View File
@@ -1559,7 +1559,7 @@ export default function TokenRoutes() {
};
return (
<div className="animate-fade-in" style={{ minHeight: 400 }}>
<div className="animate-fade-in admin-ops-page token-routes-page" style={{ minHeight: 400 }}>
{/* Toolbar: search + sort + actions */}
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
<div className="toolbar-search" style={{ minWidth: 220, flex: 1, maxWidth: 360 }}>