feat(web): 整体替换 UI 框架为 Ant Design 6 并接入自定义主题

以 antd ConfigProvider + antd-style 承载 zinc 风格自定义主题（明暗双套 token），
button/input/select/notification 用 createStyles 定制；三态主题经
darkAlgorithm 无刷新切换；use-toast 改基于 antd notification；
移除 shadcn/ui 组件目录与 radix 依赖；样式桥接层保证排版与多端布局不变。

web/src/pages/AdminList.tsx

@@ -1,14 +1,16 @@
-import { Link } from 'react-router'
+import { useMemo, useState } from 'react'
+import { Link, useNavigate } 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 { Button, Card, Input, Modal, Segmented, Table, Tag } from 'antd'
+import type { TableProps } from 'antd'
 import { api } from '../lib/api'
 import type { NoteItem } from '../lib/api'
 import { invalidatePublic } from '../lib/invalidate'
 import { useDocumentTitle } from '../features/site'
 import { formatDateISO } from '../lib/utils'
 import { AdminTopbar } from '../components/Layout'
-import Toast from '../components/Toast'
+import { useToast } from '@/hooks/use-toast'
 
 type StatusFilter = 'all' | 'public' | 'private'
 
@@ -23,20 +25,21 @@ export default function AdminList() {
   useDocumentTitle('笔记管理')
   const { data, isLoading } = useAdminNotes()
   const qc = useQueryClient()
+  const navigate = useNavigate()
+  const { toast } = useToast()
   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: () => {
       setConfirmNote(null)
-      setToast({ msg: '笔记已移至回收站', kind: 'success' })
+      toast({ description: '笔记已移至回收站' })
       void qc.invalidateQueries({ queryKey: ['admin'] })
       invalidatePublic(qc)
     },
-    onError: () => setToast({ msg: '操作失败，请重试', kind: 'error' }),
+    onError: () => toast({ description: '操作失败，请重试', variant: 'error' }),
   })
 
   const toggleStatus = useMutation({
@@ -57,11 +60,11 @@ export default function AdminList() {
       })
     },
     onSuccess: (_d, note) => {
-      setToast({ msg: note.status === 'public' ? '已转为私有' : '已转为公开', kind: 'success' })
+      toast({ description: note.status === 'public' ? '已转为私有' : '已转为公开' })
       void qc.invalidateQueries({ queryKey: ['admin'] })
       invalidatePublic(qc)
     },
-    onError: () => setToast({ msg: '操作失败，请重试', kind: 'error' }),
+    onError: () => toast({ description: '操作失败，请重试', variant: 'error' }),
   })
 
   const items = data?.items ?? []
@@ -81,12 +84,97 @@ export default function AdminList() {
     })
   }, [items, filter, query])
 
+  const columns: TableProps<NoteItem>['columns'] = [
+    {
+      title: '标题',
+      key: 'title',
+      render: (_, n) => (
+        <>
+          <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>
+        </>
+      ),
+    },
+    {
+      title: '标签',
+      key: 'tags',
+      render: (_, n) =>
+        n.tags.length > 0 ? (
+          <div className="pn-al-tags">
+            {n.tags.map((t) => <Tag key={t}>{t}</Tag>)}
+          </div>
+        ) : (
+          <span className="pn-al-note-slug">—</span>
+        ),
+    },
+    {
+      title: '日期',
+      key: 'date',
+      render: (_, n) => <span className="pn-al-date">{formatDateISO(n.updated_at)}</span>,
+    },
+    {
+      title: '状态',
+      key: 'status',
+      render: (_, n) => {
+        const isPublic = n.status === 'public'
+        return (
+          <span className={`pn-al-status ${isPublic ? 'pn-al-is-public' : 'pn-al-is-draft'}`}>
+            <span className="dot" />{isPublic ? '已发布' : '私有'}
+          </span>
+        )
+      },
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      className: 'pn-al-col-actions',
+      render: (_, n) => {
+        const isPublic = n.status === 'public'
+        return (
+          <div className="pn-al-actions-cell">
+            <Button
+              type="text"
+              icon={isPublic ? <EyeOff size={15} /> : <Eye size={15} />}
+              title={isPublic ? '转为私有' : '转为公开'}
+              aria-label={isPublic ? '转为私有' : '转为公开'}
+              disabled={toggleStatus.isPending}
+              onClick={() => void toggleStatus.mutate(n)}
+            />
+            <Button
+              type="text"
+              icon={<Pencil size={15} />}
+              title="编辑"
+              aria-label={`编辑笔记：${n.title}`}
+              onClick={() => void navigate(`/admin/notes/${n.id}/edit`)}
+            />
+            <Button
+              type="text"
+              className="pn-btn-danger-outline"
+              icon={<Trash2 size={15} />}
+              title="移至回收站"
+              aria-label={`移至回收站：${n.title}`}
+              onClick={() => setConfirmNote(n)}
+            />
+          </div>
+        )
+      },
+    },
+  ]
+
   return (
     <>
       <AdminTopbar title="笔记管理">
         <label className="pn-admin-search">
           <Search size={14} aria-hidden />
-          <input
+          <Input
+            variant="borderless"
             type="search"
             placeholder="搜索笔记…"
             aria-label="搜索笔记"
@@ -94,167 +182,104 @@ export default function AdminList() {
             onChange={(e) => setQuery(e.target.value)}
           />
         </label>
-        <Link to="/admin/notes/new" className="btn primary">
-          <CirclePlus size={15} />
-          <span>新建笔记</span>
-        </Link>
+        <Button
+          type="primary"
+          icon={<CirclePlus size={15} />}
+          onClick={() => void navigate('/admin/notes/new')}
+        >
+          新建笔记
+        </Button>
       </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>
+          <Card className="pn-al-metric" styles={{ body: { padding: '16px 18px' } }}>
+            <span className="text-[11.5px] tracking-[0.04em] text-muted-foreground">笔记</span>
+            <strong className="my-0.5 text-[28px] font-bold leading-[1.2] tracking-[-0.03em] text-card-foreground max-md:text-[22px]">
+              {data?.total ?? items.length}
+            </strong>
+            <span className="text-xs leading-normal text-muted-foreground max-md:hidden">
+              全部笔记，含 {privateCount} 篇私有
+            </span>
+          </Card>
+          <Card className="pn-al-metric" styles={{ body: { padding: '16px 18px' } }}>
+            <span className="text-[11.5px] tracking-[0.04em] text-muted-foreground">已发布</span>
+            <strong className="my-0.5 text-[28px] font-bold leading-[1.2] tracking-[-0.03em] text-card-foreground max-md:text-[22px]">
+              {publicCount}
+            </strong>
+            <span className="text-xs leading-normal text-muted-foreground max-md:hidden">
+              对外公开的笔记
+            </span>
+          </Card>
+          <Card className="pn-al-metric" styles={{ body: { padding: '16px 18px' } }}>
+            <span className="text-[11.5px] tracking-[0.04em] text-muted-foreground">私有</span>
+            <strong className="my-0.5 text-[28px] font-bold leading-[1.2] tracking-[-0.03em] text-card-foreground max-md:text-[22px]">
+              {privateCount}
+            </strong>
+            <span className="text-xs leading-normal text-muted-foreground max-md:hidden">
+              尚未公开，仅自己可见
+            </span>
+          </Card>
         </section>
 
-        <section className="table-card pn-al-table-card">
+        <Card className="pn-al-card min-w-0 flex-1 overflow-hidden" styles={{ body: { padding: 0 } }}>
           <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>
+            <Segmented
+              value={filter}
+              onChange={(v) => setFilter(v as StatusFilter)}
+              className="min-w-0"
+              options={[
+                { value: 'all', label: <>全部<span className="pn-al-tab-num">{items.length}</span></> },
+                { value: 'public', label: <>已发布<span className="pn-al-tab-num">{publicCount}</span></> },
+                { value: 'private', label: <>私有<span className="pn-al-tab-num">{privateCount}</span></> },
+              ]}
+            />
             <span className="pn-al-table-note">共 {visible.length} 篇笔记</span>
           </div>
 
           {isLoading ? (
-            <div className="empty">加载中…</div>
+            <div className="pn-empty">加载中…</div>
           ) : visible.length === 0 ? (
-            <div className="empty">
+            <div className="pn-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>
+            <Table
+              className="pn-al-table"
+              columns={columns}
+              dataSource={visible}
+              rowKey="id"
+              pagination={false}
+              scroll={{ x: 600 }}
+              rowClassName={(n) => (n.status === 'public' ? '' : 'pn-al-is-draft')}
+            />
           )}
 
           <div className="pn-al-table-foot">
             <span className="pn-al-foot-note">共 {data?.total ?? 0} 篇 · 显示 {visible.length} 篇</span>
           </div>
-        </section>
+        </Card>
       </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"
-                className="btn danger"
-                disabled={trashMutation.isPending}
-                onClick={() => trashMutation.mutate(confirmNote.id)}
-              >
-                {trashMutation.isPending ? '删除中…' : '确认删除'}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      <Toast message={toast?.msg ?? null} kind={toast?.kind} onDone={() => setToast(null)} />
+      <Modal
+        open={confirmNote !== null}
+        onCancel={() => setConfirmNote(null)}
+        title="移入回收站？"
+        width={380}
+        centered
+        maskClosable={false}
+        cancelText="取消"
+        okText={trashMutation.isPending ? '删除中…' : '确认删除'}
+        confirmLoading={trashMutation.isPending}
+        onOk={() => {
+          if (confirmNote) trashMutation.mutate(confirmNote.id)
+        }}
+      >
+        <p className="pn-modal-desc">
+          「{confirmNote?.title}」将被软删除，30 天内可在回收站恢复。
+        </p>
+        {trashMutation.isError && <p className="pn-modal-error">操作失败，请重试</p>}
+      </Modal>
     </>
   )
 }