前端: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
This commit is contained in:
@@ -0,0 +1,159 @@
|
||||
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 { api } from '../lib/api'
|
||||
import type { NoteItem } from '../lib/api'
|
||||
import { useAuth } from '../lib/auth'
|
||||
import { formatDateTime } from '../lib/utils'
|
||||
|
||||
function useAdminNotes() {
|
||||
return useQuery({
|
||||
queryKey: ['admin', 'notes'],
|
||||
queryFn: () => api<{ items: NoteItem[]; total: number }>('/api/admin/notes'),
|
||||
})
|
||||
}
|
||||
|
||||
export default function AdminList() {
|
||||
const { data, isLoading } = useAdminNotes()
|
||||
const { logout } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const qc = useQueryClient()
|
||||
const [confirmId, setConfirmId] = useState<number | null>(null)
|
||||
|
||||
const trashMutation = useMutation({
|
||||
mutationFn: (id: number) => api(`/api/admin/notes/${id}`, { method: 'DELETE' }),
|
||||
onSuccess: () => {
|
||||
setConfirmId(null)
|
||||
void qc.invalidateQueries({ queryKey: ['admin'] })
|
||||
},
|
||||
})
|
||||
|
||||
const toggleStatus = useMutation({
|
||||
mutationFn: async (note: NoteItem) => {
|
||||
// 状态切换:读全文 → 翻转 status → PUT
|
||||
const full = await api<NoteItem & { content: string }>(`/api/admin/notes/${note.id}`)
|
||||
return api(`/api/admin/notes/${note.id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
title: full.title,
|
||||
slug: full.slug,
|
||||
summary: full.summary,
|
||||
content: full.content,
|
||||
status: full.status === 'public' ? 'private' : 'public',
|
||||
tags: full.tags,
|
||||
pinned: full.pinned,
|
||||
}),
|
||||
})
|
||||
},
|
||||
onSuccess: () => void qc.invalidateQueries({ queryKey: ['admin'] }),
|
||||
})
|
||||
|
||||
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>
|
||||
</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>
|
||||
<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"
|
||||
>
|
||||
{n.status === 'public' ? '转私有' : '转公开'}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user