feat: 更新样式和功能,优化徽章、登录页面和文章页面的布局,增强可访问性和用户体验

This commit is contained in:
2026-04-03 04:10:35 +08:00
parent 36d505ece6
commit 83f3c8d249
8 changed files with 353 additions and 153 deletions

View File

@@ -11,7 +11,7 @@ const badgeVariants = cva(
default: 'border-primary/20 bg-primary/10 text-primary',
secondary: 'border-border bg-secondary text-secondary-foreground',
outline: 'border-border/80 bg-background/60 text-muted-foreground',
success: 'border-emerald-500/20 bg-emerald-500/12 text-emerald-600',
success: 'border-emerald-300 bg-emerald-100 text-emerald-900',
warning: 'border-amber-500/20 bg-amber-500/12 text-amber-700',
danger: 'border-rose-500/20 bg-rose-500/12 text-rose-600',
},

View File

@@ -7,8 +7,8 @@
--card-foreground: oklch(0.18 0.02 255);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.18 0.02 255);
--primary: oklch(0.57 0.17 255);
--primary-foreground: oklch(0.98 0.01 255);
--primary: oklch(0.5 0.16 255);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.94 0.02 220);
--secondary-foreground: oklch(0.28 0.03 250);
--muted: oklch(0.95 0.01 250);
@@ -20,7 +20,7 @@
--border: oklch(0.9 0.01 250);
--input: oklch(0.91 0.01 250);
--ring: oklch(0.57 0.17 255);
--success: oklch(0.72 0.16 160);
--success: oklch(0.63 0.14 160);
--warning: oklch(0.81 0.16 78);
--radius: 1.15rem;
}

View File

@@ -21,7 +21,10 @@ export function LoginPage({
const [password, setPassword] = useState('admin123')
return (
<div className="flex min-h-screen items-center justify-center px-4 py-10">
<main
className="flex min-h-screen items-center justify-center px-4 py-10"
aria-labelledby="admin-login-title"
>
<div className="grid w-full max-w-5xl gap-6 lg:grid-cols-[1.1fr_0.9fr]">
<Card className="overflow-hidden border-primary/12 bg-gradient-to-br from-card via-card to-primary/5">
<CardHeader className="space-y-4">
@@ -57,7 +60,7 @@ export function LoginPage({
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-3">
<CardTitle id="admin-login-title" className="flex items-center gap-3">
<span className="flex h-11 w-11 items-center justify-center rounded-2xl border border-primary/20 bg-primary/10 text-primary">
<LockKeyhole className="h-5 w-5" />
</span>
@@ -119,6 +122,6 @@ export function LoginPage({
</CardContent>
</Card>
</div>
</div>
</main>
)
}