wangairnan
87d9bab5dc
以 antd ConfigProvider + antd-style 承载 zinc 风格自定义主题（明暗双套 token）， button/input/select/notification 用 createStyles 定制；三态主题经 darkAlgorithm 无刷新切换；use-toast 改基于 antd notification； 移除 shadcn/ui 组件目录与 radix 依赖；样式桥接层保证排版与多端布局不变。
286 lines
10 KiB
TypeScript
286 lines
10 KiB
TypeScript
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 { 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 { useToast } from '@/hooks/use-toast'
|
|
|
|
type StatusFilter = 'all' | 'public' | 'private'
|
|
|
|
function useAdminNotes() {
|
|
return useQuery({
|
|
queryKey: ['admin', 'notes'],
|
|
queryFn: () => api<{ items: NoteItem[]; total: number }>('/api/admin/notes'),
|
|
})
|
|
}
|
|
|
|
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 trashMutation = useMutation({
|
|
mutationFn: (id: number) => api(`/api/admin/notes/${id}`, { method: 'DELETE' }),
|
|
onSuccess: () => {
|
|
setConfirmNote(null)
|
|
toast({ description: '笔记已移至回收站' })
|
|
void qc.invalidateQueries({ queryKey: ['admin'] })
|
|
invalidatePublic(qc)
|
|
},
|
|
onError: () => toast({ description: '操作失败，请重试', variant: 'error' }),
|
|
})
|
|
|
|
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: (_d, note) => {
|
|
toast({ description: note.status === 'public' ? '已转为私有' : '已转为公开' })
|
|
void qc.invalidateQueries({ queryKey: ['admin'] })
|
|
invalidatePublic(qc)
|
|
},
|
|
onError: () => toast({ description: '操作失败，请重试', variant: 'error' }),
|
|
})
|
|
|
|
const items = data?.items ?? []
|
|
const publicCount = items.filter((n) => n.status === 'public').length
|
|
const privateCount = items.length - publicCount
|
|
|
|
const visible = useMemo(() => {
|
|
const q = query.trim().toLowerCase()
|
|
return items.filter((n) => {
|
|
if (filter === 'public' && n.status !== 'public') return false
|
|
if (filter === 'private' && n.status === 'public') return false
|
|
if (q) {
|
|
const hay = `${n.title} ${n.slug} ${n.tags.join(' ')}`.toLowerCase()
|
|
if (!hay.includes(q)) return false
|
|
}
|
|
return true
|
|
})
|
|
}, [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
|
|
variant="borderless"
|
|
type="search"
|
|
placeholder="搜索笔记…"
|
|
aria-label="搜索笔记"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
/>
|
|
</label>
|
|
<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">
|
|
<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>
|
|
|
|
<Card className="pn-al-card min-w-0 flex-1 overflow-hidden" styles={{ body: { padding: 0 } }}>
|
|
<div className="pn-al-table-head">
|
|
<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="pn-empty">加载中…</div>
|
|
) : visible.length === 0 ? (
|
|
<div className="pn-empty">
|
|
{items.length === 0 ? '还没有笔记，点击「新建笔记」开始' : '没有符合筛选条件的笔记'}
|
|
</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>
|
|
</Card>
|
|
</div>
|
|
|
|
<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>
|
|
</>
|
|
)
|
|
}
|