feat: redesign ticket detail experience

frontend/src/features/tickets/TicketMetaPanel.tsx

@@ -0,0 +1,59 @@
+import { AppField } from '@/components/app/AppField'
+import { AppPriorityBadge } from '@/components/app/AppPriorityBadge'
+import { AppStatusBadge } from '@/components/app/AppStatusBadge'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Separator } from '@/components/ui/separator'
+
+import type { Ticket } from './types'
+
+type TicketMetaPanelProps = {
+  ticket: Ticket
+}
+
+function displayUser(user: Ticket['assignee']) {
+  return user?.display_name || user?.username || '未设置'
+}
+
+export function TicketMetaPanel({ ticket }: TicketMetaPanelProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>工单属性</CardTitle>
+        <CardDescription>当前处理状态和关键上下文。</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-3">
+          <AppField label="当前状态">
+            <AppStatusBadge status={ticket.status} />
+          </AppField>
+          <AppField label="优先级">
+            <AppPriorityBadge priority={ticket.priority} />
+          </AppField>
+          <Separator />
+          <AppField label="处理人">
+            <span className="text-sm text-foreground">{displayUser(ticket.assignee)}</span>
+          </AppField>
+          <AppField label="请求人">
+            <span className="text-sm text-foreground">{displayUser(ticket.requester)}</span>
+          </AppField>
+          <Separator />
+          <AppField label="关联系统">
+            <span className="text-sm text-foreground">{ticket.related_system || '未填写'}</span>
+          </AppField>
+          <AppField label="运行环境">
+            <span className="text-sm text-foreground">{ticket.environment || '未填写'}</span>
+          </AppField>
+          <AppField label="影响范围">
+            <span className="text-sm text-foreground">{ticket.impact_scope || '未填写'}</span>
+          </AppField>
+          <Separator />
+          <div className="flex items-center justify-between gap-3">
+            <span className="text-xs font-medium text-muted-foreground">SLA</span>
+            <Badge variant="outline">后续接入</Badge>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}