58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { Search } from 'lucide-react';
|
|
import {
|
|
Badge,
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
Input,
|
|
PageShell,
|
|
Section,
|
|
Table,
|
|
TBody,
|
|
TD,
|
|
TH,
|
|
THead,
|
|
TR,
|
|
} from '@/ui';
|
|
|
|
export function ListPageTemplate() {
|
|
return (
|
|
<PageShell
|
|
title="页面标题"
|
|
description="用一句话说明这个页面帮助用户完成什么。"
|
|
actions={<Button>新增项目</Button>}
|
|
>
|
|
<Section
|
|
title="列表筛选"
|
|
actions={<Input aria-label="搜索" placeholder="搜索" leading={<Search />} />}
|
|
>
|
|
<Card>
|
|
<CardHeader title="数据列表" description="保持密集、清晰、可扫描。" />
|
|
<CardContent>
|
|
<Table>
|
|
<THead>
|
|
<TR>
|
|
<TH>名称</TH>
|
|
<TH>状态</TH>
|
|
<TH>更新时间</TH>
|
|
</TR>
|
|
</THead>
|
|
<TBody>
|
|
<TR>
|
|
<TD>示例项目</TD>
|
|
<TD>
|
|
<Badge tone="brand">进行中</Badge>
|
|
</TD>
|
|
<TD>刚刚</TD>
|
|
</TR>
|
|
</TBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</Section>
|
|
</PageShell>
|
|
);
|
|
}
|
|
|