style: polish admin operations pages
This commit is contained in:
@@ -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" && (
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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' }}>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 }}>
|
||||
|
||||
Reference in New Issue
Block a user