前端：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,71 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
+import { Lock } from 'lucide-react'
+import { useAuth } from '../lib/auth'
+import { ApiError } from '../lib/api'
+
+export default function Login() {
+  const { login, authenticated } = useAuth()
+  const navigate = useNavigate()
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  if (authenticated) {
+    navigate('/admin', { replace: true })
+  }
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSubmitting(true)
+    try {
+      await login(password)
+      navigate('/admin', { replace: true })
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.status === 429 ? '尝试过于频繁，请稍后再试' : '密码错误')
+      } else {
+        setError('登录失败，请重试')
+      }
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4">
+      <form
+        onSubmit={onSubmit}
+        className="w-full max-w-sm rounded-xl border border-zinc-200 p-8 dark:border-zinc-800"
+      >
+        <div className="mb-6 flex items-center justify-center gap-2 text-zinc-500">
+          <Lock size={18} />
+          <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">管理员登录</h1>
+        </div>
+        <label className="block text-sm text-zinc-600 dark:text-zinc-400" htmlFor="password">
+          口令
+        </label>
+        <input
+          id="password"
+          type="password"
+          autoFocus
+          required
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="mt-1.5 w-full rounded-lg border border-zinc-300 bg-transparent px-3 py-2 text-sm outline-none focus:border-blue-500 dark:border-zinc-700"
+          placeholder="输入管理员口令"
+        />
+        {error && <p className="mt-2 text-sm text-red-600 dark:text-red-400">{error}</p>}
+        <button
+          type="submit"
+          disabled={submitting || password.length === 0}
+          className="mt-4 w-full rounded-lg bg-zinc-900 py-2 text-sm font-medium text-white hover:bg-zinc-800 disabled:opacity-50 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
+        >
+          {submitting ? '登录中…' : '登录'}
+        </button>
+        <p className="mt-4 text-center text-xs text-zinc-400">连续失败将被暂时锁定</p>
+      </form>
+    </div>
+  )
+}