42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { RefreshCw } from 'lucide-react';
|
|
import {
|
|
Badge,
|
|
Button,
|
|
PageShell,
|
|
Progress,
|
|
Section,
|
|
} from '@/ui';
|
|
|
|
const rows = [
|
|
{ name: '图片生成队列', status: '运行中', progress: 72 },
|
|
{ name: '视频转码任务', status: '等待中', progress: 18 },
|
|
{ name: '发布中心同步', status: '已完成', progress: 100 },
|
|
];
|
|
|
|
export function StatusPageTemplate() {
|
|
return (
|
|
<PageShell
|
|
title="任务中心"
|
|
description="状态页面沿用 /image 的批次、进度和简洁信息密度。"
|
|
actions={<Button variant="outline" icon={<RefreshCw />}>刷新</Button>}
|
|
>
|
|
<Section title="今天">
|
|
<div className="tg-golden-status">
|
|
{rows.map((row) => (
|
|
<article className="tg-golden-status__row" key={row.name}>
|
|
<div>
|
|
<h3>{row.name}</h3>
|
|
<p>{row.progress}%</p>
|
|
</div>
|
|
<Progress value={row.progress} />
|
|
<Badge tone={row.progress === 100 ? 'success' : 'brand'}>
|
|
{row.status}
|
|
</Badge>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
</PageShell>
|
|
);
|
|
}
|