From f8af731bc3fbab8978f3b1df17c1b5a572d2466f Mon Sep 17 00:00:00 2001
From: hailin <wbwang_hailin@kingdee.com>
Date: Thu, 2 Jul 2026 16:18:04 +0800
Subject: [PATCH] refactor: refine ticket center operations view

---
 .../src/features/tickets/TicketListPage.tsx   | 277 ++++++++++--------
 1 file changed, 155 insertions(+), 122 deletions(-)

diff --git a/frontend/src/features/tickets/TicketListPage.tsx b/frontend/src/features/tickets/TicketListPage.tsx
index b205694..18e485e 100644
--- a/frontend/src/features/tickets/TicketListPage.tsx
+++ b/frontend/src/features/tickets/TicketListPage.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ArrowRight, Plus } from 'lucide-react'
+import { ArrowRight, Clock3, Plus } from 'lucide-react'
 
 import { AppDataTable, type AppDataTableColumn } from '@/components/app/AppDataTable'
 import { AppEmptyState } from '@/components/app/AppEmptyState'
@@ -7,7 +7,9 @@ import { AppPage } from '@/components/app/AppPage'
 import { AppPageHeader } from '@/components/app/AppPageHeader'
 import { AppPriorityBadge } from '@/components/app/AppPriorityBadge'
 import { AppStatusBadge } from '@/components/app/AppStatusBadge'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
 import {
   Pagination,
   PaginationContent,
@@ -18,6 +20,7 @@ import {
 } from '@/components/ui/pagination'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { formatDateTime } from '@/lib/format'
 import { cn } from '@/lib/utils'
 
 import { listTickets } from './api'
@@ -43,61 +46,77 @@ const viewTabs: Array<{ value: TicketListView; label: string }> = [
   { value: 'high_priority', label: '高优先级' }
 ]
 
+function displayUser(user: Ticket['assignee']) {
+  return user?.display_name || user?.username || '未分派'
+}
+
+function getTicketAgeLabel(ticket: Ticket) {
+  const createdAt = new Date(ticket.created_at).getTime()
+  const diffHours = Math.max(0, Math.floor((Date.now() - createdAt) / 1000 / 60 / 60))
+  if (diffHours < 1) return '1 小时内'
+  if (diffHours < 24) return `${diffHours} 小时`
+  return `${Math.floor(diffHours / 24)} 天`
+}
+
 const columns: AppDataTableColumn<Ticket>[] = [
   {
-    key: 'ticket_no',
-    header: '编号',
-    className: 'w-[14%]',
-    cell: (ticket) => <span className="font-medium text-foreground">{ticket.ticket_no}</span>
-  },
-  {
-    key: 'title',
-    header: '标题',
-    className: 'w-[24%] whitespace-normal',
+    key: 'ticket',
+    header: '工单',
+    className: 'w-[34%] whitespace-normal',
     cell: (ticket) => (
       <div className="min-w-0">
-        <p className="line-clamp-1 font-medium text-foreground">{ticket.title}</p>
-        <p className="mt-1 line-clamp-1 text-xs text-muted-foreground">
-          {ticket.requester?.display_name ? `请求人：${ticket.requester.display_name}` : ticket.environment || '暂无环境信息'}
-        </p>
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge variant="outline">{ticket.ticket_no}</Badge>
+          <span className="text-xs text-muted-foreground">请求人：{displayUser(ticket.requester)}</span>
+        </div>
+        <p className="mt-2 line-clamp-1 font-medium text-foreground">{ticket.title}</p>
+        <p className="mt-1 line-clamp-1 text-xs text-muted-foreground">{ticket.description || '暂无问题描述'}</p>
       </div>
     )
   },
   {
-    key: 'status',
-    header: '状态',
-    className: 'w-[8%]',
-    cell: (ticket) => <AppStatusBadge status={ticket.status} />
+    key: 'workflow',
+    header: '流程',
+    className: 'w-[16%]',
+    cell: (ticket) => (
+      <div className="flex flex-wrap gap-1.5">
+        <AppStatusBadge status={ticket.status} />
+        <AppPriorityBadge priority={ticket.priority} />
+      </div>
+    )
   },
   {
-    key: 'priority',
-    header: '优先级',
-    className: 'w-[7%]',
-    cell: (ticket) => <AppPriorityBadge priority={ticket.priority} />
-  },
-  {
-    key: 'related_system',
-    header: '关联系统',
-    className: 'w-[10%]',
-    cell: (ticket) => <span className="block truncate text-muted-foreground">{ticket.related_system || '-'}</span>
-  },
-  {
-    key: 'impact_scope',
-    header: '影响范围',
-    className: 'w-[11%]',
-    cell: (ticket) => <span className="block truncate text-muted-foreground">{ticket.impact_scope || '-'}</span>
+    key: 'context',
+    header: '业务上下文',
+    className: 'w-[22%] whitespace-normal',
+    cell: (ticket) => (
+      <div className="grid min-w-0 gap-1">
+        <p className="truncate text-sm text-foreground">{ticket.related_system || '未填写系统'}</p>
+        <p className="line-clamp-1 text-xs text-muted-foreground">{ticket.impact_scope || ticket.environment || '暂无影响范围'}</p>
+      </div>
+    )
   },
   {
     key: 'assignee',
-    header: '处理人',
-    className: 'w-[8%]',
-    cell: (ticket) => <span className="block truncate text-muted-foreground">{ticket.assignee?.display_name || '未分派'}</span>
+    header: '责任人',
+    className: 'w-[12%]',
+    cell: (ticket) => (
+      <div className="grid gap-1">
+        <span className="truncate text-sm text-foreground">{displayUser(ticket.assignee)}</span>
+        <span className="text-xs text-muted-foreground">{ticket.assignee ? '已分派' : '待分派'}</span>
+      </div>
+    )
   },
   {
-    key: 'created_at',
-    header: '创建时间',
+    key: 'updated_at',
+    header: '时间',
     className: 'w-[10%]',
-    cell: (ticket) => <span className="text-muted-foreground">{formatTicketTableDate(ticket.created_at)}</span>
+    cell: (ticket) => (
+      <div className="grid gap-1 text-muted-foreground">
+        <span className="text-sm">{formatTicketTableDate(ticket.updated_at)}</span>
+        <span className="text-xs">已创建 {getTicketAgeLabel(ticket)}</span>
+      </div>
+    )
   },
   {
     key: 'actions',
@@ -194,97 +213,111 @@ export function TicketListPage() {
     setPage(target)
   }
 
+  const hasActiveFilters = status !== 'all' || priority !== 'all' || relatedSystem.trim() || q.trim()
+
   return (
     <AppPage contentClassName="gap-5">
-        <AppPageHeader
-          title="工单中心"
-          actions={
-            <Button onClick={() => (window.location.hash = '/tickets/new')}>
-              <Plus data-icon="inline-start" />
-              新建工单
-            </Button>
-          }
-        />
+      <AppPageHeader
+        title="工单中心"
+        description="集中查看、筛选和推进企业技术支持请求。"
+        meta={hasActiveFilters ? <Badge variant="info">已筛选</Badge> : <Badge variant="outline">全部范围</Badge>}
+        actions={
+          <Button onClick={() => (window.location.hash = '/tickets/new')}>
+            <Plus data-icon="inline-start" />
+            新建工单
+          </Button>
+        }
+      />
 
-        <TicketMetricCards tickets={result.items} />
+      <TicketMetricCards tickets={result.items} />
 
-        <Tabs value={view} onValueChange={updateView}>
-          <TabsList>
-            {viewTabs.map((tab) => (
-              <TabsTrigger key={tab.value} value={tab.value}>
-                {tab.label}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
+      <Card className="py-0">
+        <CardContent className="flex flex-col gap-3 p-3 lg:flex-row lg:items-center lg:justify-between">
+          <Tabs value={view} onValueChange={updateView}>
+            <TabsList>
+              {viewTabs.map((tab) => (
+                <TabsTrigger key={tab.value} value={tab.value}>
+                  {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Clock3 className="size-4" />
+            最近更新：{result.items[0]?.updated_at ? formatDateTime(result.items[0].updated_at) : '暂无数据'}
+          </div>
+        </CardContent>
+      </Card>
 
-        <TicketFilterBar
-          q={q}
-          status={status}
-          priority={priority}
-          relatedSystem={relatedSystem}
-          onQChange={updateQuery}
-          onStatusChange={updateStatus}
-          onPriorityChange={updatePriority}
-          onRelatedSystemChange={updateRelatedSystem}
-          onReset={resetFilters}
-        />
+      <TicketFilterBar
+        q={q}
+        status={status}
+        priority={priority}
+        relatedSystem={relatedSystem}
+        onQChange={updateQuery}
+        onStatusChange={updateStatus}
+        onPriorityChange={updatePriority}
+        onRelatedSystemChange={updateRelatedSystem}
+        onReset={resetFilters}
+      />
 
-        {error ? <AppEmptyState title="无法加载工单" description={error} /> : null}
-        {loading && !error ? (
-          <div className="grid gap-3 rounded-lg border border-border bg-surface p-4">
+      {error ? <AppEmptyState title="无法加载工单" description={error} /> : null}
+      {loading && !error ? (
+        <Card>
+          <CardContent className="grid gap-3 p-4">
             <Skeleton className="h-8 w-48" />
             <Skeleton className="h-32 w-full" />
             <Skeleton className="h-8 w-64" />
-          </div>
-        ) : null}
-        {!error && !loading ? (
-          <AppDataTable
-            columns={columns}
-            rows={result.items}
-            getRowKey={(ticket) => ticket.id}
-            emptyTitle="暂无工单"
-            emptyDescription="调整筛选条件，或创建第一张工单后再查看。"
-            footer={
-              <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-                <p className="text-sm text-muted-foreground">
-                  共 {result.total} 条，当前第 {result.page} / {Math.max(result.total_pages, 1)} 页
-                </p>
-                <Pagination className="mx-0 w-auto justify-start md:justify-end">
-                  <PaginationContent>
-                    <PaginationItem>
-                      <PaginationPrevious
-                        href="#"
-                        className={cn(result.page <= 1 && 'pointer-events-none opacity-50')}
-                        onClick={(event) => {
-                          event.preventDefault()
-                          goToPage(result.page - 1)
-                        }}
-                      />
-                    </PaginationItem>
-                    <PaginationItem>
-                      <PaginationLink href="#" isActive onClick={(event) => event.preventDefault()}>
-                        {result.page}
-                      </PaginationLink>
-                    </PaginationItem>
-                    <PaginationItem>
-                      <PaginationNext
-                        href="#"
-                        className={cn(result.page >= result.total_pages && 'pointer-events-none opacity-50')}
-                        onClick={(event) => {
-                          event.preventDefault()
-                          goToPage(result.page + 1)
-                        }}
-                      />
-                    </PaginationItem>
-                  </PaginationContent>
-                </Pagination>
-              </div>
-            }
-            tableClassName="table-fixed"
-            onRowClick={(ticket) => (window.location.hash = `/tickets/${ticket.id}`)}
-          />
-        ) : null}
+          </CardContent>
+        </Card>
+      ) : null}
+      {!error && !loading ? (
+        <AppDataTable
+          columns={columns}
+          rows={result.items}
+          getRowKey={(ticket) => ticket.id}
+          emptyTitle="暂无工单"
+          emptyDescription="调整筛选条件，或创建第一张工单后再查看。"
+          footer={
+            <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+              <p className="text-sm text-muted-foreground">
+                共 {result.total} 条，当前第 {result.page} / {Math.max(result.total_pages, 1)} 页
+              </p>
+              <Pagination className="mx-0 w-auto justify-start md:justify-end">
+                <PaginationContent>
+                  <PaginationItem>
+                    <PaginationPrevious
+                      href="#"
+                      className={cn(result.page <= 1 && 'pointer-events-none opacity-50')}
+                      onClick={(event) => {
+                        event.preventDefault()
+                        goToPage(result.page - 1)
+                      }}
+                    />
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationLink href="#" isActive onClick={(event) => event.preventDefault()}>
+                      {result.page}
+                    </PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationNext
+                      href="#"
+                      className={cn(result.page >= result.total_pages && 'pointer-events-none opacity-50')}
+                      onClick={(event) => {
+                        event.preventDefault()
+                        goToPage(result.page + 1)
+                      }}
+                    />
+                  </PaginationItem>
+                </PaginationContent>
+              </Pagination>
+            </div>
+          }
+          tableClassName="table-fixed min-w-[980px]"
+          onRowClick={(ticket) => (window.location.hash = `/tickets/${ticket.id}`)}
+        />
+      ) : null}
     </AppPage>
   )
 }