feat(studio/articles): Dimzou draft preview

Adds a 预览 action (enabled once an article has a Dimzou document) opening a
sheet that fetches and renders the draft — cover, title, summary, and body HTML
(typography/prose). Re-enables the @tailwindcss/typography plugin for prose.
This commit is contained in:
2026-07-08 22:23:49 +08:00
parent a84e5dcb54
commit 3f3a8347eb
4 changed files with 126 additions and 3 deletions
+17 -3
View File
@@ -4,6 +4,7 @@ import type { ColumnDef } from '@tanstack/react-table'
import type { StudioArticle } from '@/api/types'
import { fetchArticles } from '@/api/modules/studio'
import { useListPage } from '@/lib/list-page'
import { ArticlePreviewSheet } from '@/features/studio/article-preview-sheet'
import { DetailSheet } from '@/features/studio/detail-sheet'
import { DataTable } from '@/components/data-table/data-table'
import { PageHeader } from '@/components/page-header'
@@ -26,6 +27,7 @@ const STATUSES = ['planned', 'drafting', 'drafted', 'published', 'scheduled'] as
function ArticlesPage() {
const [status, setStatus] = useState('all')
const [detail, setDetail] = useState<StudioArticle | null>(null)
const [preview, setPreview] = useState<StudioArticle | null>(null)
const list = useListPage(
'studio-articles',
fetchArticles,
@@ -67,9 +69,19 @@ function ArticlesPage() {
{
header: '操作',
cell: ({ row }) => (
<Button size="sm" variant="ghost" onClick={() => setDetail(row.original)}>
</Button>
<div className="flex gap-1.5">
<Button
size="sm"
variant="outline"
disabled={!row.original.dimzou_document_id}
onClick={() => setPreview(row.original)}
>
</Button>
<Button size="sm" variant="ghost" onClick={() => setDetail(row.original)}>
</Button>
</div>
),
},
]
@@ -132,6 +144,8 @@ function ArticlesPage() {
{ label: '发布排期', value: detail?.publish_schedule },
]}
/>
<ArticlePreviewSheet article={preview} onOpenChange={(open) => !open && setPreview(null)} />
</div>
)
}