feat(web): 重构 9 页面界面并统一设计令牌与响应式布局

- index.css 以 Tailwind 4 @theme 落地设计令牌，全部页面按新设计稿重写
  样式：首页/笔记详情/标签页/登录/后台列表/编辑/回收站/设置/404
- Layout 重构导航与主题切换；新增 Toast 轻提示组件
- 移除 vite 手动 codeSplitting：分组 chunk 会被提升进入口静态依赖并对
  HTML 发出 modulepreload，lazy 路由的 CodeMirror 在所有页面被预加载
  （Lighthouse unused-javascript 549KiB 的根因）
- vite dev 代理补 changeOrigin:false，保留浏览器原始 Host，避免后端
  Origin 校验误判跨源 403

web/src/pages/Login.tsx

@@ -1,13 +1,16 @@
 import { useState } from 'react'
-import { useNavigate } from 'react-router'
-import { Lock } from 'lucide-react'
+import { Link, useNavigate } from 'react-router'
+import { ArrowLeft, ArrowRight, CircleAlert, Eye, EyeOff, Lock } from 'lucide-react'
 import { useAuth } from '../lib/auth'
 import { ApiError } from '../lib/api'
+import { useDocumentTitle } from '../features/site'
 
 export default function Login() {
+  useDocumentTitle('管理员登录')
   const { login, authenticated } = useAuth()
   const navigate = useNavigate()
   const [password, setPassword] = useState('')
+  const [showPw, setShowPw] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
 
@@ -24,7 +27,9 @@ export default function Login() {
       navigate('/admin', { replace: true })
     } catch (err) {
       if (err instanceof ApiError) {
-        setError(err.status === 429 ? '尝试过于频繁，请稍后再试' : '密码错误')
+        if (err.status === 429) setError('尝试过于频繁，请稍后再试')
+        else if (err.status === 403) setError('请求被安全策略拦截，请刷新页面后重试')
+        else setError('密码错误，请重试')
       } else {
         setError('登录失败，请重试')
       }
@@ -34,38 +39,60 @@ export default function Login() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center px-4">
-      <form
-        onSubmit={onSubmit}
-        className="w-full max-w-sm rounded-xl border border-zinc-200 p-8 dark:border-zinc-800"
-      >
-        <div className="mb-6 flex items-center justify-center gap-2 text-zinc-500">
-          <Lock size={18} />
-          <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">管理员登录</h1>
+    <div className="pn-login-wrap">
+      <div className="pn-login-brand">
+        <span className="pn-login-eyebrow">ADMIN</span>
+        <span className="pn-login-wordmark">Pure Note</span>
+      </div>
+
+      <form className="card pn-login-card" onSubmit={onSubmit}>
+        <h1 className="pn-login-title">管理员登录</h1>
+        <p className="pn-login-sub">请输入管理密码以继续</p>
+
+        <label htmlFor="pn-login-password" className="sr-only">管理密码</label>
+        <div className="pn-login-field">
+          <Lock size={16} className="pn-login-icon" aria-hidden />
+          <input
+            id="pn-login-password"
+            className="pn-login-input"
+            type={showPw ? 'text' : 'password'}
+            name="password"
+            placeholder="请输入管理密码"
+            autoComplete="current-password"
+            autoFocus
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <button
+            type="button"
+            className="pn-login-eye"
+            aria-label={showPw ? '隐藏密码' : '显示密码'}
+            onClick={() => setShowPw((v) => !v)}
+          >
+            {showPw ? <EyeOff size={16} /> : <Eye size={16} />}
+          </button>
         </div>
-        <label className="block text-sm text-zinc-600 dark:text-zinc-400" htmlFor="password">
-          口令
-        </label>
-        <input
-          id="password"
-          type="password"
-          autoFocus
-          required
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          className="mt-1.5 w-full rounded-lg border border-zinc-300 bg-transparent px-3 py-2 text-sm outline-none focus:border-blue-500 dark:border-zinc-700"
-          placeholder="输入管理员口令"
-        />
-        {error && <p className="mt-2 text-sm text-red-600 dark:text-red-400">{error}</p>}
-        <button
-          type="submit"
-          disabled={submitting || password.length === 0}
-          className="mt-4 w-full rounded-lg bg-zinc-900 py-2 text-sm font-medium text-white hover:bg-zinc-800 disabled:opacity-50 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
-        >
-          {submitting ? '登录中…' : '登录'}
+
+        {error && (
+          <div className="pn-login-error" role="alert">
+            <CircleAlert size={15} />
+            <span>{error}</span>
+          </div>
+        )}
+
+        <button type="submit" className="btn primary pn-login-submit" disabled={submitting || password.length === 0}>
+          <span>{submitting ? '登录中…' : '登录'}</span>
+          <ArrowRight size={16} />
         </button>
-        <p className="mt-4 text-center text-xs text-zinc-400">连续失败将被暂时锁定</p>
+
+        <p className="pn-login-hint">连续失败将被暂时锁定</p>
       </form>
+
+      <Link to="/" className="btn ghost pn-login-back">
+        <ArrowLeft size={14} />
+        <span>返回博客</span>
+      </Link>
     </div>
   )
 }