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

- 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 已含全部映射类
2026-08-31 21:38:44 +08:00
parent 70fdb97dd8
commit 860a7f454a
2 changed files with 31 additions and 31 deletions
@@ -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" />
@@ -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>