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/Note.tsx

@@ -1,11 +1,12 @@
 import { Link, useParams } from 'react-router'
 import { useQuery } from '@tanstack/react-query'
-import { AlertTriangle } from 'lucide-react'
+import { ArrowLeft, ArrowRight, Clock, Eye } from 'lucide-react'
 import { api } from '../lib/api'
 import type { NoteDetail } from '../lib/api'
 import { useAuth } from '../lib/auth'
+import { useDocumentTitle } from '../features/site'
 import MarkdownViewer from '../components/MarkdownViewer'
-import { formatDate } from '../lib/utils'
+import { formatDateISO, readingMinutes } from '../lib/utils'
 
 export default function Note() {
   const { slug = '' } = useParams()
@@ -15,16 +16,16 @@ export default function Note() {
     queryFn: () => api<NoteDetail>(`/api/notes/${encodeURIComponent(slug)}`),
     retry: false,
   })
+  useDocumentTitle(note?.title)
 
-  if (isLoading) return <p className="py-12 text-center text-zinc-400">加载中…</p>
+  if (isLoading) return <p className="pn-home-list-empty">加载中…</p>
   if (error || !note) {
     return (
-      <div className="py-12 text-center">
-        <p className="text-4xl font-bold text-zinc-300 dark:text-zinc-700">404</p>
-        <p className="mt-2 text-zinc-500">笔记不存在或未公开</p>
-        <Link to="/" className="mt-4 inline-block text-sm text-blue-600 hover:underline">
-          ← 返回首页
-        </Link>
+      <div className="pn-note-article">
+        <p className="pn-home-list-empty">笔记不存在或未公开</p>
+        <p style={{ textAlign: 'center', marginTop: -40 }}>
+          <Link to="/" className="btn ghost pn-note-back"><ArrowLeft size={14} />返回首页</Link>
+        </p>
       </div>
     )
   }
@@ -32,55 +33,51 @@ export default function Note() {
   const privatePreview = note.status === 'private'
 
   return (
-    <article>
-      <nav className="mb-4 text-xs text-zinc-400">
-        <Link to="/" className="hover:text-zinc-600">首页</Link>
-        <span className="mx-1.5">/</span>
-        <span>{note.title}</span>
-      </nav>
+    <article className="pn-note-article">
+      <Link to="/" className="btn ghost pn-note-back">
+        <ArrowLeft size={14} />返回首页
+      </Link>
 
       {privatePreview && authenticated && (
-        <div className="mb-6 flex items-center gap-2 rounded-lg border border-amber-300 bg-amber-50 px-4 py-2.5 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300">
-          <AlertTriangle size={16} />
+        <div className="pn-note-private" role="note">
+          <Eye size={15} />
           私有预览：此笔记未公开，仅管理员可见
         </div>
       )}
 
-      <header className="mb-8">
-        <h1 className="text-3xl font-bold leading-tight">{note.title}</h1>
-        <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-zinc-400">
-          <time>{formatDate(note.created_at)}</time>
-          {note.tags.map((t) => (
-            <Link
-              key={t}
-              to={`/tags/${encodeURIComponent(t)}`}
-              className="rounded-full bg-zinc-100 px-2 py-0.5 hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
-            >
-              #{t}
-            </Link>
-          ))}
-        </div>
-      </header>
+      <h1 className="pn-note-title">{note.title}</h1>
+
+      <div className="pn-note-meta">
+        <time className="pn-note-meta-date" dateTime={formatDateISO(note.created_at)}>
+          {formatDateISO(note.created_at)}
+        </time>
+        <span className="pn-note-meta-sep">·</span>
+        <span className="pn-note-meta-read"><Clock size={14} />约 {readingMinutes(note.content)} 分钟阅读</span>
+        {note.tags.length > 0 && (
+          <>
+            <span className="pn-note-meta-sep">·</span>
+            {note.tags.map((t) => (
+              <Link key={t} to={`/tags/${encodeURIComponent(t)}`} className="pn-note-tag">{t}</Link>
+            ))}
+          </>
+        )}
+      </div>
 
       <MarkdownViewer source={note.content} />
 
-      <nav className="mt-12 flex justify-between gap-4 border-t border-zinc-100 pt-6 text-sm dark:border-zinc-900">
+      <nav className="pn-note-postnav" aria-label="笔记导航">
         {note.prev ? (
-          <Link
-            to={`/notes/${encodeURIComponent(note.prev.slug)}`}
-            className="text-zinc-600 hover:text-blue-600 dark:text-zinc-400"
-          >
-            ← {note.prev.title}
+          <Link to={`/notes/${encodeURIComponent(note.prev.slug)}`} className="card pn-note-nav-card">
+            <span className="pn-note-nav-label"><ArrowLeft size={14} />上一篇</span>
+            <span className="pn-note-nav-title">{note.prev.title}</span>
           </Link>
         ) : (
           <span />
         )}
         {note.next ? (
-          <Link
-            to={`/notes/${encodeURIComponent(note.next.slug)}`}
-            className="text-right text-zinc-600 hover:text-blue-600 dark:text-zinc-400"
-          >
-            {note.next.title} →
+          <Link to={`/notes/${encodeURIComponent(note.next.slug)}`} className="card pn-note-nav-card pn-note-nav-next">
+            <span className="pn-note-nav-label">下一篇<ArrowRight size={14} /></span>
+            <span className="pn-note-nav-title">{note.next.title}</span>
           </Link>
         ) : (
           <span />