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

@@ -1,12 +1,16 @@
-import { Link, useNavigate } from 'react-router'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { Pencil, Plus, Trash2 } from 'lucide-react'
-import { useState } from 'react'
+import { Link } from 'react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { CirclePlus, Eye, EyeOff, Pencil, Pin, Search, Trash2 } from 'lucide-react'
+import { useMemo, useState } from 'react'
 import { api } from '../lib/api'
 import type { NoteItem } from '../lib/api'
 import { invalidatePublic } from '../lib/invalidate'
-import { useAuth } from '../lib/auth'
-import { formatDateTime } from '../lib/utils'
+import { useDocumentTitle } from '../features/site'
+import { formatDateISO } from '../lib/utils'
+import { AdminTopbar } from '../components/Layout'
+import Toast from '../components/Toast'
+
+type StatusFilter = 'all' | 'public' | 'private'
 
 function useAdminNotes() {
   return useQuery({
@@ -16,19 +20,23 @@ function useAdminNotes() {
 }
 
 export default function AdminList() {
+  useDocumentTitle('笔记管理')
   const { data, isLoading } = useAdminNotes()
-  const { logout } = useAuth()
-  const navigate = useNavigate()
   const qc = useQueryClient()
-  const [confirmId, setConfirmId] = useState<number | null>(null)
+  const [confirmNote, setConfirmNote] = useState<NoteItem | null>(null)
+  const [filter, setFilter] = useState<StatusFilter>('all')
+  const [query, setQuery] = useState('')
+  const [toast, setToast] = useState<{ msg: string; kind: 'success' | 'error' } | null>(null)
 
   const trashMutation = useMutation({
     mutationFn: (id: number) => api(`/api/admin/notes/${id}`, { method: 'DELETE' }),
     onSuccess: () => {
-      setConfirmId(null)
+      setConfirmNote(null)
+      setToast({ msg: '笔记已移至回收站', kind: 'success' })
       void qc.invalidateQueries({ queryKey: ['admin'] })
       invalidatePublic(qc)
     },
+    onError: () => setToast({ msg: '操作失败，请重试', kind: 'error' }),
   })
 
   const toggleStatus = useMutation({
@@ -48,117 +56,205 @@ export default function AdminList() {
         }),
       })
     },
-    onSuccess: () => {
+    onSuccess: (_d, note) => {
+      setToast({ msg: note.status === 'public' ? '已转为私有' : '已转为公开', kind: 'success' })
       void qc.invalidateQueries({ queryKey: ['admin'] })
       invalidatePublic(qc)
     },
+    onError: () => setToast({ msg: '操作失败，请重试', kind: 'error' }),
   })
 
+  const items = data?.items ?? []
+  const publicCount = items.filter((n) => n.status === 'public').length
+  const privateCount = items.length - publicCount
+
+  const visible = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return items.filter((n) => {
+      if (filter === 'public' && n.status !== 'public') return false
+      if (filter === 'private' && n.status === 'public') return false
+      if (q) {
+        const hay = `${n.title} ${n.slug} ${n.tags.join(' ')}`.toLowerCase()
+        if (!hay.includes(q)) return false
+      }
+      return true
+    })
+  }, [items, filter, query])
+
   return (
-    <div>
-      <div className="mb-4 flex items-center justify-between">
-        <h1 className="text-lg font-semibold">笔记管理（{data?.total ?? 0}）</h1>
-        <div className="flex gap-2">
-          <Link
-            to="/admin/notes/new"
-            className="inline-flex items-center gap-1 rounded-lg bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
-          >
-            <Plus size={15} /> 新建
-          </Link>
-          <button
-            type="button"
-            onClick={() => void logout().then(() => navigate('/'))}
-            className="rounded-lg border border-zinc-300 px-3 py-1.5 text-sm text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800"
-          >
-            登出
-          </button>
-        </div>
+    <>
+      <AdminTopbar title="笔记管理">
+        <label className="pn-admin-search">
+          <Search size={14} aria-hidden />
+          <input
+            type="search"
+            placeholder="搜索笔记…"
+            aria-label="搜索笔记"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </label>
+        <Link to="/admin/notes/new" className="btn primary">
+          <CirclePlus size={15} />
+          <span>新建笔记</span>
+        </Link>
+      </AdminTopbar>
+
+      <div className="pn-admin-content">
+        <section className="pn-al-metrics">
+          <article className="card metric">
+            <span className="eyebrow">笔记</span>
+            <strong className="value">{data?.total ?? items.length}</strong>
+            <span className="meta">全部笔记，含 {privateCount} 篇私有</span>
+          </article>
+          <article className="card metric">
+            <span className="eyebrow">已发布</span>
+            <strong className="value">{publicCount}</strong>
+            <span className="meta">对外公开的笔记</span>
+          </article>
+          <article className="card metric">
+            <span className="eyebrow">私有</span>
+            <strong className="value">{privateCount}</strong>
+            <span className="meta">尚未公开，仅自己可见</span>
+          </article>
+        </section>
+
+        <section className="table-card pn-al-table-card">
+          <div className="pn-al-table-head">
+            <nav className="tabs" aria-label="笔记筛选">
+              <button type="button" className={filter === 'all' ? 'active' : undefined} onClick={() => setFilter('all')}>
+                全部<span className="pn-al-tab-num">{items.length}</span>
+              </button>
+              <button type="button" className={filter === 'public' ? 'active' : undefined} onClick={() => setFilter('public')}>
+                已发布<span className="pn-al-tab-num">{publicCount}</span>
+              </button>
+              <button type="button" className={filter === 'private' ? 'active' : undefined} onClick={() => setFilter('private')}>
+                私有<span className="pn-al-tab-num">{privateCount}</span>
+              </button>
+            </nav>
+            <span className="pn-al-table-note">共 {visible.length} 篇笔记</span>
+          </div>
+
+          {isLoading ? (
+            <div className="empty">加载中…</div>
+          ) : visible.length === 0 ? (
+            <div className="empty">
+              {items.length === 0 ? '还没有笔记，点击「新建笔记」开始' : '没有符合筛选条件的笔记'}
+            </div>
+          ) : (
+            <div className="pn-table-scroll">
+              <table className="table" aria-label="笔记列表">
+                <thead>
+                  <tr>
+                    <th>标题</th>
+                    <th>标签</th>
+                    <th>日期</th>
+                    <th>状态</th>
+                    <th className="pn-al-col-actions">操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {visible.map((n) => {
+                    const isPublic = n.status === 'public'
+                    return (
+                      <tr key={n.id} className={isPublic ? undefined : 'pn-al-is-draft'}>
+                        <td>
+                          <Link to={`/admin/notes/${n.id}/edit`} className="pn-al-note-title" style={{ textDecoration: 'none' }}>
+                            {n.pinned && <Pin size={12} aria-label="置顶" />}
+                            <span>{n.title}</span>
+                          </Link>
+                          <span className="pn-al-note-slug">/{n.slug}</span>
+                        </td>
+                        <td>
+                          {n.tags.length > 0 ? (
+                            <div className="pn-al-tags">
+                              {n.tags.map((t) => <span key={t} className="pn-al-tag">{t}</span>)}
+                            </div>
+                          ) : (
+                            <span className="pn-al-note-slug">—</span>
+                          )}
+                        </td>
+                        <td><span className="pn-al-date">{formatDateISO(n.updated_at)}</span></td>
+                        <td>
+                          <span className={`pn-al-status ${isPublic ? 'pn-al-is-public' : 'pn-al-is-draft'}`}>
+                            <span className="dot" />{isPublic ? '已发布' : '私有'}
+                          </span>
+                        </td>
+                        <td>
+                          <div className="pn-al-actions-cell">
+                            <button
+                              type="button"
+                              className="btn ghost pn-icon-btn"
+                              title={isPublic ? '转为私有' : '转为公开'}
+                              aria-label={isPublic ? '转为私有' : '转为公开'}
+                              disabled={toggleStatus.isPending}
+                              onClick={() => void toggleStatus.mutate(n)}
+                            >
+                              {isPublic ? <EyeOff size={15} /> : <Eye size={15} />}
+                            </button>
+                            <Link
+                              to={`/admin/notes/${n.id}/edit`}
+                              className="btn ghost pn-icon-btn"
+                              title="编辑"
+                              aria-label={`编辑笔记：${n.title}`}
+                            >
+                              <Pencil size={15} />
+                            </Link>
+                            <button
+                              type="button"
+                              className="btn ghost pn-icon-btn danger"
+                              title="移至回收站"
+                              aria-label={`移至回收站：${n.title}`}
+                              onClick={() => setConfirmNote(n)}
+                            >
+                              <Trash2 size={15} />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          <div className="pn-al-table-foot">
+            <span className="pn-al-foot-note">共 {data?.total ?? 0} 篇 · 显示 {visible.length} 篇</span>
+          </div>
+        </section>
       </div>
 
-      {isLoading ? (
-        <p className="py-12 text-center text-zinc-400">加载中…</p>
-      ) : !data || data.items.length === 0 ? (
-        <p className="py-12 text-center text-zinc-400">还没有笔记，点击「新建」开始</p>
-      ) : (
-        <ul className="divide-y divide-zinc-100 rounded-lg border border-zinc-200 dark:divide-zinc-900 dark:border-zinc-800">
-          {data.items.map((n) => (
-            <li key={n.id} className="flex items-center gap-3 px-4 py-3">
-              <span
-                className={`rounded px-1.5 py-0.5 text-xs ${
-                  n.status === 'public'
-                    ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400'
-                    : 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400'
-                }`}
-              >
-                {n.status === 'public' ? '公开' : '私有'}
-              </span>
-              {n.pinned && <span className="text-xs text-amber-600">置顶</span>}
-              <div className="min-w-0 flex-1">
-                <Link to={`/admin/notes/${n.id}/edit`} className="block truncate font-medium hover:text-blue-600">
-                  {n.title}
-                </Link>
-                <p className="truncate text-xs text-zinc-400">
-                  /{n.slug} · {formatDateTime(n.updated_at)}
-                  {n.tags.length > 0 && ' · ' + n.tags.map((t) => '#' + t).join(' ')}
-                </p>
-              </div>
+      {confirmNote && (
+        <div
+          className="pn-modal-overlay"
+          role="dialog"
+          aria-modal="true"
+          aria-label="移入回收站"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setConfirmNote(null)
+          }}
+        >
+          <div className="card pn-modal">
+            <h3>移入回收站？</h3>
+            <p>「{confirmNote.title}」将被软删除，30 天内可在回收站恢复。</p>
+            {trashMutation.isError && <p style={{ color: 'var(--destructive-text)' }}>操作失败，请重试</p>}
+            <div className="pn-modal-actions">
+              <button type="button" className="btn secondary" onClick={() => setConfirmNote(null)}>取消</button>
               <button
                 type="button"
-                onClick={() => void toggleStatus.mutate(n)}
-                disabled={toggleStatus.isPending}
-                className="rounded px-2 py-1 text-xs text-zinc-500 hover:bg-zinc-100 disabled:opacity-50 dark:hover:bg-zinc-800"
+                className="btn danger"
+                disabled={trashMutation.isPending}
+                onClick={() => trashMutation.mutate(confirmNote.id)}
               >
-                {n.status === 'public' ? '转私有' : '转公开'}
+                {trashMutation.isPending ? '删除中…' : '确认删除'}
               </button>
-              <Link
-                to={`/admin/notes/${n.id}/edit`}
-                className="rounded p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800"
-                title="编辑"
-              >
-                <Pencil size={15} />
-              </Link>
-              <button
-                type="button"
-                onClick={() => setConfirmId(n.id)}
-                className="rounded p-1.5 text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
-                title="删除（进回收站）"
-              >
-                <Trash2 size={15} />
-              </button>
-              {confirmId === n.id && (
-                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4">
-                  <div className="w-full max-w-sm rounded-xl bg-white p-6 dark:bg-zinc-900">
-                    <h3 className="font-semibold">移入回收站？</h3>
-                    <p className="mt-1 text-sm text-zinc-500">
-                      「{n.title}」将被软删除，30 天内可在回收站恢复。
-                    </p>
-                    {trashMutation.isError && (
-                      <p className="mt-2 text-sm text-red-600">操作失败，请重试</p>
-                    )}
-                    <div className="mt-4 flex justify-end gap-2">
-                      <button
-                        type="button"
-                        onClick={() => setConfirmId(null)}
-                        className="rounded-lg border border-zinc-300 px-3 py-1.5 text-sm dark:border-zinc-700"
-                      >
-                        取消
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => trashMutation.mutate(n.id)}
-                        disabled={trashMutation.isPending}
-                        className="rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-50"
-                      >
-                        {trashMutation.isPending ? '删除中…' : '确认删除'}
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </li>
-          ))}
-        </ul>
+            </div>
+          </div>
+        </div>
       )}
-    </div>
+
+      <Toast message={toast?.msg ?? null} kind={toast?.kind} onDone={() => setToast(null)} />
+    </>
   )
 }