style: elevate enterprise admin visual foundation

frontend/src/features/tickets/TicketFilterBar.tsx

@@ -32,7 +32,7 @@ export function TicketFilterBar({
     <AppFilterBar
       actions={
         <Button variant="outline" onClick={onReset}>
-          <RotateCcw className="size-4" />
+          <RotateCcw data-icon="inline-start" />
           重置筛选
         </Button>
       }

frontend/src/features/tickets/TicketMetricCards.tsx

@@ -1,5 +1,6 @@
 import { AlertTriangle, Clock3, Flame, RotateCcw } from 'lucide-react'
 
+import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 import type { Ticket } from './types'
@@ -11,25 +12,25 @@ type TicketMetricCardsProps = {
 const metricConfig = [
   {
     label: '待处理',
-    description: '需要分派或开始处理',
+    badge: '分派',
     icon: Clock3,
     value: (tickets: Ticket[]) => tickets.filter((ticket) => ticket.status === 'pending').length
   },
   {
     label: '处理中',
-    description: '技术支持正在跟进',
+    badge: '跟进',
     icon: RotateCcw,
     value: (tickets: Ticket[]) => tickets.filter((ticket) => ticket.status === 'in_progress').length
   },
   {
     label: '待确认',
-    description: '等待业务侧确认结果',
+    badge: '确认',
     icon: AlertTriangle,
     value: (tickets: Ticket[]) => tickets.filter((ticket) => ticket.status === 'pending_confirm').length
   },
   {
     label: '高优先级',
-    description: '高或紧急优先级',
+    badge: '风险',
     icon: Flame,
     value: (tickets: Ticket[]) =>
       tickets.filter((ticket) => ticket.priority === 'high' || ticket.priority === 'urgent').length
@@ -42,18 +43,19 @@ export function TicketMetricCards({ tickets }: TicketMetricCardsProps) {
       {metricConfig.map((metric) => {
         const Icon = metric.icon
         return (
-          <Card key={metric.label}>
+          <Card key={metric.label} className="relative">
             <CardHeader className="grid grid-cols-[minmax(0,1fr)_auto] items-start">
-              <div>
+              <div className="min-w-0">
                 <CardTitle className="text-sm">{metric.label}</CardTitle>
-                <p className="mt-1 text-xs text-muted-foreground">{metric.description}</p>
+                <Badge variant="outline" className="mt-2">{metric.badge}</Badge>
               </div>
-              <div className="flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
+              <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary ring-1 ring-primary/15">
                 <Icon className="size-4" />
               </div>
             </CardHeader>
-            <CardContent>
-              <p className="text-2xl font-semibold text-foreground">{metric.value(tickets)}</p>
+            <CardContent className="grid gap-2">
+              <p className="text-3xl font-semibold tabular-nums text-foreground">{metric.value(tickets)}</p>
+              <p className="text-xs text-muted-foreground">当前列表范围</p>
             </CardContent>
           </Card>
         )