109 lines
4.2 KiB
TypeScript
109 lines
4.2 KiB
TypeScript
import { AppDataTable, type AppDataTableColumn } from '@/components/app/AppDataTable'
|
||
import { AppDetailLayout } from '@/components/app/AppDetailLayout'
|
||
import { AppEmptyState } from '@/components/app/AppEmptyState'
|
||
import { AppFilterBar } from '@/components/app/AppFilterBar'
|
||
import { AppPageHeader } from '@/components/app/AppPageHeader'
|
||
import { AppPriorityBadge } from '@/components/app/AppPriorityBadge'
|
||
import { AppSection } from '@/components/app/AppSection'
|
||
import { AppStatusBadge } from '@/components/app/AppStatusBadge'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||
|
||
type PreviewRow = {
|
||
id: number
|
||
name: string
|
||
status: string
|
||
priority: string
|
||
}
|
||
|
||
const previewRows: PreviewRow[] = [
|
||
{ id: 1, name: '登录失败无法进入生产系统', status: 'in_progress', priority: 'urgent' },
|
||
{ id: 2, name: '报表导出结果缺少字段', status: 'pending', priority: 'medium' }
|
||
]
|
||
|
||
const previewColumns: AppDataTableColumn<PreviewRow>[] = [
|
||
{ key: 'name', header: '问题', cell: (row) => row.name },
|
||
{ key: 'status', header: '状态', cell: (row) => <AppStatusBadge status={row.status} /> },
|
||
{ key: 'priority', header: '优先级', cell: (row) => <AppPriorityBadge priority={row.priority} /> },
|
||
{ key: 'action', header: '操作', cell: () => <Button variant="ghost">查看</Button> }
|
||
]
|
||
|
||
export function DesignSystemPreview() {
|
||
return (
|
||
<main className="min-h-screen bg-background p-6 text-foreground">
|
||
<div className="mx-auto flex max-w-6xl flex-col gap-6">
|
||
<AppPageHeader
|
||
title="设计系统预览"
|
||
actions={<Button>创建工单</Button>}
|
||
/>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-sm">按钮</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="flex flex-wrap gap-2">
|
||
<Button>主要操作</Button>
|
||
<Button variant="secondary">次要操作</Button>
|
||
<Button variant="ghost">轻量操作</Button>
|
||
<Button variant="destructive">高风险操作</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-sm">状态与优先级</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="flex flex-wrap gap-2">
|
||
<Badge>默认</Badge>
|
||
<Badge variant="success">成功</Badge>
|
||
<Badge variant="warning">提醒</Badge>
|
||
<Badge variant="danger">风险</Badge>
|
||
<Badge variant="info">信息</Badge>
|
||
<Badge variant="ai">AI</Badge>
|
||
<AppStatusBadge status="in_progress" />
|
||
<AppPriorityBadge priority="urgent" />
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<AppFilterBar actions={<Button variant="outline">重置筛选</Button>}>
|
||
<Input placeholder="搜索工单标题或编号" />
|
||
<Select defaultValue="all">
|
||
<SelectTrigger className="w-full">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectGroup>
|
||
<SelectItem value="all">全部状态</SelectItem>
|
||
<SelectItem value="pending">待处理</SelectItem>
|
||
<SelectItem value="in_progress">处理中</SelectItem>
|
||
</SelectGroup>
|
||
</SelectContent>
|
||
</Select>
|
||
</AppFilterBar>
|
||
|
||
<AppDataTable
|
||
columns={previewColumns}
|
||
rows={previewRows}
|
||
getRowKey={(row) => row.id}
|
||
emptyTitle="暂无数据"
|
||
/>
|
||
|
||
<AppDetailLayout
|
||
side={
|
||
<AppSection title="右侧面板">
|
||
<AppEmptyState title="等待接入" />
|
||
</AppSection>
|
||
}
|
||
>
|
||
<AppSection title="详情区块">
|
||
<p className="text-sm text-muted-foreground">页面级布局只复用 App 组件，业务字段由页面自行传入。</p>
|
||
</AppSection>
|
||
</AppDetailLayout>
|
||
</div>
|
||
</main>
|
||
)
|
||
}
|