前端：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,91 @@
+import { Link, useParams } from 'react-router'
+import { useQuery } from '@tanstack/react-query'
+import { AlertTriangle } from 'lucide-react'
+import { api } from '../lib/api'
+import type { NoteDetail } from '../lib/api'
+import { useAuth } from '../lib/auth'
+import MarkdownViewer from '../components/MarkdownViewer'
+import { formatDate } from '../lib/utils'
+
+export default function Note() {
+  const { slug = '' } = useParams()
+  const { authenticated } = useAuth()
+  const { data: note, isLoading, error } = useQuery({
+    queryKey: ['note', slug],
+    queryFn: () => api<NoteDetail>(`/api/notes/${encodeURIComponent(slug)}`),
+    retry: false,
+  })
+
+  if (isLoading) return <p className="py-12 text-center text-zinc-400">加载中…</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>
+    )
+  }
+
+  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>
+
+      {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>
+      )}
+
+      <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>
+
+      <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">
+        {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>
+        ) : (
+          <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>
+        ) : (
+          <span />
+        )}
+      </nav>
+    </article>
+  )
+}