From 860a7f454a4f67ee129e0d5ec8f9a88d279925c4 Mon Sep 17 00:00:00 2001
From: zhangxiang <zhangxiang@novalon.cn>
Date: Mon, 31 Aug 2026 21:38:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor(admin):=20=E6=9B=BF=E6=8D=A2=E7=A1=AC?=
 =?UTF-8?q?=E7=BC=96=E7=A0=81=20gray/white=20=E4=B8=BA=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=20token(login=20+=20layout)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 已含全部映射类
---
 src/app/admin/login/page.tsx          | 22 +++++++--------
 src/components/admin/admin-layout.tsx | 40 +++++++++++++--------------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/app/admin/login/page.tsx b/src/app/admin/login/page.tsx
index a412763..a488ec3 100644
--- a/src/app/admin/login/page.tsx
+++ b/src/app/admin/login/page.tsx
@@ -30,32 +30,32 @@ export default function AdminLoginPage() {
   };
 
   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="text-center mb-8">
-          <h1 className="text-2xl font-bold text-gray-900">Novalon CMS</h1>
-          <p className="text-sm text-gray-500 mt-1">内容管理系统</p>
+          <h1 className="text-2xl font-bold text-text-primary">Novalon CMS</h1>
+          <p className="text-sm text-text-muted mt-1">内容管理系统</p>
         </div>
 
         <form
           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 && (
-            <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}
             </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>
             <input
               type="text"
               value={username}
               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="请输入用户名"
               required
               autoFocus
@@ -63,7 +63,7 @@ export default function AdminLoginPage() {
           </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>
             <div className="relative">
@@ -71,14 +71,14 @@ export default function AdminLoginPage() {
                 type={showPassword ? 'text' : 'password'}
                 value={password}
                 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="请输入密码"
                 required
               />
               <button
                 type="button"
                 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" />}
               </button>
@@ -88,7 +88,7 @@ export default function AdminLoginPage() {
           <button
             type="submit"
             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 ? (
               <span className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
diff --git a/src/components/admin/admin-layout.tsx b/src/components/admin/admin-layout.tsx
index 399b7d4..61cf674 100644
--- a/src/components/admin/admin-layout.tsx
+++ b/src/components/admin/admin-layout.tsx
@@ -139,28 +139,28 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-bg-secondary">
       {/* Mobile overlay */}
       {sidebarOpen && (
         <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)}
         />
       )}
 
       {/* Sidebar */}
       <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'
         }`}
       >
-        <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">
-            <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>
           <button
             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" />
           </button>
@@ -172,8 +172,8 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
             href="/admin"
             className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
               pathname === '/admin'
-                ? 'bg-gray-900 text-white'
-                : 'text-gray-600 hover:bg-gray-100'
+                ? 'bg-dark-bg text-dark-text-primary'
+                : 'text-text-tertiary hover:bg-bg-hover'
             }`}
           >
             <LayoutDashboard className="w-4 h-4" />
@@ -189,8 +189,8 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
                 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 ${
                   hasActiveChild
-                    ? 'bg-gray-100 text-gray-900'
-                    : 'text-gray-600 hover:bg-gray-100'
+                    ? 'bg-bg-hover text-text-primary'
+                    : 'text-text-tertiary hover:bg-bg-hover'
                 }`}
               >
                 <span className="flex items-center gap-3">
@@ -212,8 +212,8 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
                       href={item.href}
                       className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
                         isActive(item.href)
-                          ? 'bg-gray-900 text-white'
-                          : 'text-gray-500 hover:bg-gray-100'
+                          ? 'bg-dark-bg text-dark-text-primary'
+                          : 'text-text-muted hover:bg-bg-hover'
                       }`}
                     >
                       <item.icon className="w-3.5 h-3.5" />
@@ -228,20 +228,20 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
         </nav>
 
         {/* 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="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'}
             </div>
             <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}
               </p>
-              <p className="text-xs text-gray-500">{user?.role === 'admin' ? '管理员' : '编辑'}</p>
+              <p className="text-xs text-text-muted">{user?.role === 'admin' ? '管理员' : '编辑'}</p>
             </div>
             <button
               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="退出登录"
             >
               <LogOut className="w-4 h-4" />
@@ -253,10 +253,10 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
       {/* Main content */}
       <div className="lg:pl-64">
         {/* 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
             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" />
           </button>
@@ -267,7 +267,7 @@ export function AdminLayout({ children }: { children: React.ReactNode }) {
             <Link
               href="/"
               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>