前端：React 19 + Vite 8 + Tailwind 4 博客与管理后台 SPA

- 渲染管线（§8.2）：react-markdown + remark-gfm + rehype-sanitize （GitHub schema 扩展 hljs class 与 checked）+ rehype-highlight 纯 class 高亮；链接强制 target=_blank + rel=nofollow noopener noreferrer； schema 快照与恶意 Markdown 冒烟测试（vitest 6 用例） - 编辑器：CodeMirror 6 源码编辑 + 分屏实时预览 + 工具栏 + 粘贴/拖拽图片上传；slug 首存定稿（冲突 409 就地高亮）、摘要留空自动截取、2s 防抖自动保存 - 页面：博客首页（置顶/分页/标签云）、详情（面包屑/上一篇下一篇）、标签页、登录、管理列表/回收站/设置/改密、404 - lib：api 客户端（统一包络 + 内存态 CSRF，禁 localStorage）、 AuthContext（/api/me 重取）、暗色主题（class 切换 + 系统跟随） - index.html 内嵌 Go template 占位符供服务端 meta 注入； vite base 固定 '/'（防深链白屏）；/api 代理 127.0.0.1:8080
2026-09-08 08:14:52 +08:00
parent 6e83426ca9
commit e9316c9169
29 changed files with 8278 additions and 0 deletions
@@ -0,0 +1,126 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import { useQuery } from '@tanstack/react-query'
+import { Pin } from 'lucide-react'
+import { api } from '../lib/api'
+import type { NoteItem, NoteList, TagCount } from '../lib/api'
+import { formatDate } from '../lib/utils'
+
+function useNotes(page: number, tag?: string) {
+  const qs = new URLSearchParams({ page: String(page), page_size: '10' })
+  if (tag) qs.set('tag', tag)
+  return useQuery({
+    queryKey: ['notes', page, tag ?? ''],
+    queryFn: () => api<NoteList>(`/api/notes?${qs}`),
+  })
+}
+
+function useTags() {
+  return useQuery({
+    queryKey: ['tags'],
+    queryFn: () => api<{ tags: TagCount[] }>('/api/tags'),
+  })
+}
+
+function NoteCard({ note }: { note: NoteItem }) {
+  return (
+    <article className="group border-b border-zinc-100 py-6 first:pt-0 dark:border-zinc-900">
+      <div className="flex items-center gap-2">
+        {note.pinned && (
+          <span className="inline-flex items-center gap-1 rounded bg-amber-100 px-1.5 py-0.5 text-xs text-amber-700 dark:bg-amber-900/40 dark:text-amber-400">
+            <Pin size={11} /> 置顶
+          </span>
+        )}
+        <time className="text-xs text-zinc-400">{formatDate(note.updated_at)}</time>
+      </div>
+      <h2 className="mt-1 text-xl font-semibold leading-snug">
+        <Link
+          to={`/notes/${encodeURIComponent(note.slug)}`}
+          className="hover:text-blue-600 dark:hover:text-blue-400"
+        >
+          {note.title}
+        </Link>
+      </h2>
+      {note.summary && (
+        <p className="mt-2 line-clamp-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+          {note.summary}
+        </p>
+      )}
+      {note.tags.length > 0 && (
+        <div className="mt-3 flex flex-wrap gap-2">
+          {note.tags.map((t) => (
+            <Link
+              key={t}
+              to={`/tags/${encodeURIComponent(t)}`}
+              className="rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs text-zinc-600 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700"
+            >
+              #{t}
+            </Link>
+          ))}
+        </div>
+      )}
+    </article>
+  )
+}
+
+export default function Home() {
+  const [page, setPage] = useState(1)
+  const { data, isLoading } = useNotes(page)
+  const { data: tagsData } = useTags()
+  const totalPages = data ? Math.max(1, Math.ceil(data.total / data.page_size)) : 1
+
+  return (
+    <div className="flex flex-col gap-8 lg:flex-row-reverse">
+      <aside className="lg:w-48 lg:shrink-0">
+        {tagsData && tagsData.tags.length > 0 && (
+          <div className="rounded-lg border border-zinc-200 p-4 dark:border-zinc-800">
+            <h3 className="mb-2 text-xs font-medium uppercase tracking-wider text-zinc-400">标签</h3>
+            <div className="flex flex-wrap gap-2 lg:flex-col lg:gap-1">
+              {tagsData.tags.map((t) => (
+                <Link
+                  key={t.name}
+                  to={`/tags/${encodeURIComponent(t.name)}`}
+                  className="text-sm text-zinc-600 hover:text-blue-600 dark:text-zinc-400 dark:hover:text-blue-400"
+                >
+                  #{t.name} <span className="text-zinc-400">({t.count})</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </aside>
+      <section className="min-w-0 flex-1">
+        {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>
+        ) : (
+          data.items.map((n) => <NoteCard key={n.slug} note={n} />)
+        )}
+        {totalPages > 1 && (
+          <nav className="mt-8 flex items-center justify-between text-sm">
+            <button
+              type="button"
+              disabled={page <= 1}
+              onClick={() => setPage((p) => p - 1)}
+              className="rounded px-3 py-1.5 disabled:opacity-40 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+            >
+              ← 上一页
+            </button>
+            <span className="text-zinc-400">
+              {page} / {totalPages}
+            </span>
+            <button
+              type="button"
+              disabled={page >= totalPages}
+              onClick={() => setPage((p) => p + 1)}
+              className="rounded px-3 py-1.5 disabled:opacity-40 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+            >
+              下一页 →
+            </button>
+          </nav>
+        )}
+      </section>
+    </div>
+  )
+}