novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(admin): 替换硬编码 gray/white 为设计 token(login + layout)

Browse Source 
- login/page.tsx、admin-layout.tsx 全部 Tailwind gray-* / bg-white / bg-black/50 映射至语义 token
- 深色面板(bg-gray-900/800 激活态、头像、登录按钮)映射 bg-dark-bg / bg-dark-bg-secondary,保持两模式深色
- 深色面板上的文字用 text-dark-text-primary(固定亮色),规避 text-white 在暗黑模式反色为暗的陷阱
- 遮罩 bg-black/50 → bg-overlay/50(独立 token,不随反色)
- 验证: type-check 0 / lint 0 / 产物 CSS 已含全部映射类
This commit is contained in:
zhangxiang
2026-08-31 21:38:44 +08:00
parent 70fdb97dd8
commit 860a7f454a
2 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/login/page.tsx
+11 -11
View File
@@ -30,32 +30,32 @@ export default function AdminLoginPage() {
}; };
return ( return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4"> <div className="min-h-screen bg-bg-secondary flex items-center justify-center p-4">
<div className="w-full max-w-md"> <div className="w-full max-w-md">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h1 className="text-2xl font-bold text-gray-900">Novalon CMS</h1> <h1 className="text-2xl font-bold text-text-primary">Novalon CMS</h1>
<p className="text-sm text-gray-500 mt-1">内容管理系统</p> <p className="text-sm text-text-muted mt-1">内容管理系统</p>
</div> </div>
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-5" className="bg-bg-primary rounded-xl shadow-sm border border-border-primary p-6 space-y-5"
> >
{error && ( {error && (
<div className="bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-sm"> <div className="bg-error-bg border border-border-secondary text-error rounded-lg px-4 py-3 text-sm">
{error} {error}
</div> </div>
)} )}
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1.5"> <label className="block text-sm font-medium text-text-secondary mb-1.5">
用户名 用户名
</label> </label>
<input <input
type="text" type="text"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent transition-shadow" className="w-full px-3 py-2.5 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent transition-shadow"
placeholder="请输入用户名" placeholder="请输入用户名"
required required
autoFocus autoFocus
@@ -63,7 +63,7 @@ export default function AdminLoginPage() {
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1.5"> <label className="block text-sm font-medium text-text-secondary mb-1.5">
密码 密码
</label> </label>
<div className="relative"> <div className="relative">
@@ -71,14 +71,14 @@ export default function AdminLoginPage() {
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className="w-full px-3 py-2.5 pr-10 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent transition-shadow" className="w-full px-3 py-2.5 pr-10 border border-border-secondary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-border-dark focus:border-transparent transition-shadow"
placeholder="请输入密码" placeholder="请输入密码"
required required
/> />
<button <button
type="button" type="button"
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600" className="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-tertiary"
> >
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button> </button>
@@ -88,7 +88,7 @@ export default function AdminLoginPage() {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="w-full flex items-center justify-center gap-2 bg-gray-900 text-white rounded-lg py-2.5 text-sm font-medium hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" className="w-full flex items-center justify-center gap-2 bg-dark-bg text-dark-text-primary rounded-lg py-2.5 text-sm font-medium hover:bg-dark-bg-secondary disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
> >
{loading ? ( {loading ? (
<span className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" /> <span className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
src/components/admin/admin-layout.tsx
+20 -20
View File
@@ -139,28 +139,28 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
}; };
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-bg-secondary">
{/* Mobile overlay */} {/* Mobile overlay */}
{sidebarOpen && ( {sidebarOpen && (
<div <div
className="fixed inset-0 bg-black/50 z-40 lg:hidden" className="fixed inset-0 bg-overlay/50 z-40 lg:hidden"
onClick={() => setSidebarOpen(false)} onClick={() => setSidebarOpen(false)}
/> />
)} )}
{/* Sidebar */} {/* Sidebar */}
<aside <aside
className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform duration-200 ease-in-out lg:translate-x-0 ${ className={`fixed top-0 left-0 z-50 h-full w-64 bg-bg-primary border-r border-border-primary transform transition-transform duration-200 ease-in-out lg:translate-x-0 ${
sidebarOpen ? 'translate-x-0' : '-translate-x-full' sidebarOpen ? 'translate-x-0' : '-translate-x-full'
}`} }`}
> >
<div className="flex items-center justify-between h-16 px-4 border-b border-gray-200"> <div className="flex items-center justify-between h-16 px-4 border-b border-border-primary">
<Link href="/admin" className="flex items-center gap-2"> <Link href="/admin" className="flex items-center gap-2">
<span className="text-lg font-bold text-gray-900">Novalon CMS</span> <span className="text-lg font-bold text-text-primary">Novalon CMS</span>
</Link> </Link>
<button <button
onClick={() => setSidebarOpen(false)} onClick={() => setSidebarOpen(false)}
className="lg:hidden p-1 rounded hover:bg-gray-100" className="lg:hidden p-1 rounded hover:bg-bg-hover"
> >
<X className="w-5 h-5" /> <X className="w-5 h-5" />
</button> </button>
@@ -172,8 +172,8 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
href="/admin" href="/admin"
className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${ className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
pathname === '/admin' pathname === '/admin'
? 'bg-gray-900 text-white' ? 'bg-dark-bg text-dark-text-primary'
: 'text-gray-600 hover:bg-gray-100' : 'text-text-tertiary hover:bg-bg-hover'
}`} }`}
> >
<LayoutDashboard className="w-4 h-4" /> <LayoutDashboard className="w-4 h-4" />
@@ -189,8 +189,8 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
onClick={() => toggleMenu(group.label)} onClick={() => toggleMenu(group.label)}
className={`flex items-center justify-between w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${ className={`flex items-center justify-between w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
hasActiveChild hasActiveChild
? 'bg-gray-100 text-gray-900' ? 'bg-bg-hover text-text-primary'
: 'text-gray-600 hover:bg-gray-100' : 'text-text-tertiary hover:bg-bg-hover'
}`} }`}
> >
<span className="flex items-center gap-3"> <span className="flex items-center gap-3">
@@ -212,8 +212,8 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
href={item.href} href={item.href}
className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${ className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
isActive(item.href) isActive(item.href)
? 'bg-gray-900 text-white' ? 'bg-dark-bg text-dark-text-primary'
: 'text-gray-500 hover:bg-gray-100' : 'text-text-muted hover:bg-bg-hover'
}`} }`}
> >
<item.icon className="w-3.5 h-3.5" /> <item.icon className="w-3.5 h-3.5" />
@@ -228,20 +228,20 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
</nav> </nav>
{/* User info */} {/* User info */}
<div className="border-t border-gray-200 p-3"> <div className="border-t border-border-primary p-3">
<div className="flex items-center gap-3 px-3 py-2"> <div className="flex items-center gap-3 px-3 py-2">
<div className="w-8 h-8 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-medium"> <div className="w-8 h-8 rounded-full bg-dark-bg text-dark-text-primary flex items-center justify-center text-sm font-medium">
{user?.nickname?.charAt(0) || 'A'} {user?.nickname?.charAt(0) || 'A'}
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate"> <p className="text-sm font-medium text-text-primary truncate">
{user?.nickname || user?.username} {user?.nickname || user?.username}
</p> </p>
<p className="text-xs text-gray-500">{user?.role === 'admin' ? '管理员' : '编辑'}</p> <p className="text-xs text-text-muted">{user?.role === 'admin' ? '管理员' : '编辑'}</p>
</div> </div>
<button <button
onClick={handleLogout} onClick={handleLogout}
className="p-1.5 rounded hover:bg-gray-100 text-gray-400 hover:text-red-500 transition-colors" className="p-1.5 rounded hover:bg-bg-hover text-text-muted hover:text-red-500 transition-colors"
title="退出登录" title="退出登录"
> >
<LogOut className="w-4 h-4" /> <LogOut className="w-4 h-4" />
@@ -253,10 +253,10 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
{/* Main content */} {/* Main content */}
<div className="lg:pl-64"> <div className="lg:pl-64">
{/* Top bar */} {/* Top bar */}
<header className="sticky top-0 z-30 h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 lg:px-6"> <header className="sticky top-0 z-30 h-16 bg-bg-primary border-b border-border-primary flex items-center justify-between px-4 lg:px-6">
<button <button
onClick={() => setSidebarOpen(true)} onClick={() => setSidebarOpen(true)}
className="lg:hidden p-2 rounded hover:bg-gray-100" className="lg:hidden p-2 rounded hover:bg-bg-hover"
> >
<Menu className="w-5 h-5" /> <Menu className="w-5 h-5" />
</button> </button>
@@ -267,7 +267,7 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
<Link <Link
href="/" href="/"
target="_blank" target="_blank"
className="text-sm text-gray-500 hover:text-gray-700 transition-colors" className="text-sm text-text-muted hover:text-text-secondary transition-colors"
> >
查看网站 查看网站
</Link> </Link>