feat: add chinese workbench page

frontend/src/features/design-system/DesignSystemPreview.tsx

@@ -1,9 +1,35 @@
+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 } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, 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 (
@@ -11,37 +37,71 @@ export function DesignSystemPreview() {
       <div className="mx-auto flex max-w-6xl flex-col gap-6">
         <AppPageHeader
           title="设计系统预览"
-          description="业务页面必须基于这些 token 和组件开发。"
+          description="业务页面必须基于 shadcn 原子组件和 App 组件层开发。"
           actions={<Button>创建工单</Button>}
         />
 
         <Card>
           <CardHeader>
-            <h2 className="text-sm font-medium">Buttons</h2>
+            <h2 className="text-sm font-medium">按钮</h2>
           </CardHeader>
           <CardContent className="flex flex-wrap gap-2">
-            <Button>Primary</Button>
-            <Button variant="secondary">Secondary</Button>
-            <Button variant="ghost">Ghost</Button>
-            <Button variant="destructive">Danger</Button>
+            <Button>主要操作</Button>
+            <Button variant="secondary">次要操作</Button>
+            <Button variant="ghost">轻量操作</Button>
+            <Button variant="destructive">高风险操作</Button>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader>
-            <h2 className="text-sm font-medium">Badges</h2>
+            <h2 className="text-sm font-medium">状态与优先级</h2>
           </CardHeader>
           <CardContent className="flex flex-wrap gap-2">
-            <Badge>Default</Badge>
-            <Badge variant="success">Success</Badge>
-            <Badge variant="warning">Warning</Badge>
-            <Badge variant="danger">Danger</Badge>
-            <Badge variant="info">Info</Badge>
+            <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>
+              <SelectItem value="all">全部状态</SelectItem>
+              <SelectItem value="pending">待处理</SelectItem>
+              <SelectItem value="in_progress">处理中</SelectItem>
+            </SelectContent>
+          </Select>
+        </AppFilterBar>
+
+        <AppDataTable
+          columns={previewColumns}
+          rows={previewRows}
+          getRowKey={(row) => row.id}
+          emptyTitle="暂无数据"
+          emptyDescription="符合条件的数据会显示在这里。"
+        />
+
+        <AppDetailLayout
+          side={
+            <AppSection title="右侧面板" description="用于关键字段、关联方案和 AI 分析。">
+              <AppEmptyState title="等待接入" description="后续阶段会接入 Agent 执行结果。" />
+            </AppSection>
+          }
+        >
+          <AppSection title="详情区块" description="用于承载工单概览、问题描述和处理动态。">
+            <p className="text-sm text-muted-foreground">页面级布局只复用 App 组件，业务字段由页面自行传入。</p>
+          </AppSection>
+        </AppDetailLayout>
       </div>
     </main>
   )