From 43c245e37e2d72dc46a1b6153a97415ef5b81b21 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sat, 2 May 2026 20:01:31 +0800
Subject: [PATCH] feat(ticket): rebuild lightweight ticket workspace

---
 .../_components/ticket-assign-dialog.tsx      |   2 +-
 .../_components/ticket-detail-dialog.tsx      | 309 +++++++++++
 web/app/dashboard/tickets/page.tsx            | 512 ++++++++++++------
 web/lib/api/ticket.ts                         |   1 +
 4 files changed, 655 insertions(+), 169 deletions(-)
 create mode 100644 web/app/dashboard/tickets/_components/ticket-detail-dialog.tsx

diff --git a/web/app/dashboard/tickets/_components/ticket-assign-dialog.tsx b/web/app/dashboard/tickets/_components/ticket-assign-dialog.tsx
index bbaa2ab..ad1e19d 100644
--- a/web/app/dashboard/tickets/_components/ticket-assign-dialog.tsx
+++ b/web/app/dashboard/tickets/_components/ticket-assign-dialog.tsx
@@ -62,7 +62,7 @@ export function TicketAssignDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       {open ? (
         <TicketAssignDialogBody
-          key={ticketId ?? "ticket-assign"}
+          key={ticketId ?? ticketIds?.join(",") ?? "ticket-assign"}
           ticketId={ticketId}
           ticketIds={ticketIds}
           currentAssigneeId={currentAssigneeId}
diff --git a/web/app/dashboard/tickets/_components/ticket-detail-dialog.tsx b/web/app/dashboard/tickets/_components/ticket-detail-dialog.tsx
new file mode 100644
index 0000000..8e70d1f
--- /dev/null
+++ b/web/app/dashboard/tickets/_components/ticket-detail-dialog.tsx
@@ -0,0 +1,309 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { MessageSquareTextIcon, RefreshCcwIcon, SendIcon, UserRoundIcon } from "lucide-react"
+import { toast } from "sonner"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  changeTicketStatus,
+  createTicketProgress,
+  fetchTicketDetail,
+  type TicketDetail,
+  type TicketStatus,
+} from "@/lib/api/ticket"
+import { cn, formatDateTime } from "@/lib/utils"
+import { TicketAssignDialog } from "./ticket-assign-dialog"
+import { TicketStatusBadge } from "./ticket-status-badge"
+
+type TicketDetailDialogProps = {
+  ticketId: number | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onChanged: () => void
+}
+
+const statusOptions: Array<{ value: TicketStatus; label: string }> = [
+  { value: "pending", label: "待处理" },
+  { value: "in_progress", label: "处理中" },
+  { value: "done", label: "已处理" },
+]
+
+function sourceLabel(source: string) {
+  switch (source) {
+    case "manual":
+      return "手动创建"
+    case "conversation":
+      return "会话生成"
+    default:
+      return source || "-"
+  }
+}
+
+function metadataValue(value?: string | number | null) {
+  if (value === undefined || value === null || value === "") {
+    return "-"
+  }
+  return String(value)
+}
+
+export function TicketDetailDialog({
+  ticketId,
+  open,
+  onOpenChange,
+  onChanged,
+}: TicketDetailDialogProps) {
+  const [detail, setDetail] = useState<TicketDetail | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [statusSaving, setStatusSaving] = useState<TicketStatus | null>(null)
+  const [progressSaving, setProgressSaving] = useState(false)
+  const [progressContent, setProgressContent] = useState("")
+  const [assignOpen, setAssignOpen] = useState(false)
+
+  const loadDetail = useCallback(async () => {
+    if (!open || !ticketId) {
+      setDetail(null)
+      return
+    }
+    setLoading(true)
+    try {
+      const data = await fetchTicketDetail(ticketId)
+      setDetail(data)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "加载工单详情失败")
+    } finally {
+      setLoading(false)
+    }
+  }, [open, ticketId])
+
+  useEffect(() => {
+    void loadDetail()
+  }, [loadDetail])
+
+  async function handleStatusChange(status: TicketStatus) {
+    if (!detail || detail.ticket.status === status) {
+      return
+    }
+    setStatusSaving(status)
+    try {
+      await changeTicketStatus({ ticketId: detail.ticket.id, status })
+      toast.success("工单状态已更新")
+      await loadDetail()
+      onChanged()
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "更新工单状态失败")
+    } finally {
+      setStatusSaving(null)
+    }
+  }
+
+  async function handleCreateProgress() {
+    if (!detail) {
+      return
+    }
+    const content = progressContent.trim()
+    if (!content) {
+      toast.error("请填写处理进展")
+      return
+    }
+    setProgressSaving(true)
+    try {
+      await createTicketProgress({
+        ticketId: detail.ticket.id,
+        content,
+      })
+      toast.success("处理进展已记录")
+      setProgressContent("")
+      await loadDetail()
+      onChanged()
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "记录处理进展失败")
+    } finally {
+      setProgressSaving(false)
+    }
+  }
+
+  async function handleAssigned() {
+    await loadDetail()
+    onChanged()
+  }
+
+  const ticket = detail?.ticket
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-h-[88vh] gap-0 p-0 sm:max-w-3xl">
+          <DialogHeader className="border-b px-6 py-4">
+            <DialogTitle className="flex min-w-0 items-center gap-2 text-base">
+              <span className="truncate">{ticket?.title ?? "工单详情"}</span>
+              {ticket ? <TicketStatusBadge status={ticket.status} /> : null}
+            </DialogTitle>
+            {ticket ? (
+              <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                <span className="font-mono">{ticket.ticketNo}</span>
+                <span>{sourceLabel(ticket.source)}</span>
+                <span>创建人：{metadataValue(ticket.createdByName || ticket.createdBy)}</span>
+              </div>
+            ) : null}
+          </DialogHeader>
+
+          <ScrollArea className="max-h-[calc(88vh-74px)]">
+            {loading && !ticket ? (
+              <div className="flex items-center justify-center gap-2 px-6 py-12 text-sm text-muted-foreground">
+                <RefreshCcwIcon className="size-4 animate-spin" />
+                加载中...
+              </div>
+            ) : ticket ? (
+              <div className="space-y-5 p-6">
+                <section className="space-y-2">
+                  <div className="text-xs font-medium text-muted-foreground">描述</div>
+                  <div className="whitespace-pre-wrap rounded-md border bg-muted/30 px-3 py-2 text-sm leading-6">
+                    {ticket.description || "暂无描述"}
+                  </div>
+                </section>
+
+                <section className="grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
+                  <div className="space-y-2">
+                    <div className="text-xs font-medium text-muted-foreground">状态</div>
+                    <div className="flex flex-wrap gap-2">
+                      {statusOptions.map((option) => (
+                        <Button
+                          key={option.value}
+                          type="button"
+                          size="sm"
+                          variant={ticket.status === option.value ? "default" : "outline"}
+                          disabled={!!statusSaving}
+                          onClick={() => void handleStatusChange(option.value)}
+                        >
+                          {statusSaving === option.value ? "更新中..." : option.label}
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="text-xs font-medium text-muted-foreground">负责人</div>
+                    <div className="flex items-center justify-between gap-2 rounded-md border px-3 py-2">
+                      <div className="flex min-w-0 items-center gap-2 text-sm">
+                        <UserRoundIcon className="size-4 shrink-0 text-muted-foreground" />
+                        <span className="truncate">{ticket.currentAssigneeName || "未分配"}</span>
+                      </div>
+                      <Button type="button" size="sm" variant="outline" onClick={() => setAssignOpen(true)}>
+                        指派
+                      </Button>
+                    </div>
+                  </div>
+                </section>
+
+                <section className="space-y-2">
+                  <div className="text-xs font-medium text-muted-foreground">标签</div>
+                  {ticket.tags && ticket.tags.length > 0 ? (
+                    <div className="flex flex-wrap gap-1.5">
+                      {ticket.tags.map((tag) => (
+                        <Badge key={tag.id} variant="outline">
+                          {tag.name}
+                        </Badge>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="text-sm text-muted-foreground">暂无标签</div>
+                  )}
+                </section>
+
+                <section className="grid gap-3 rounded-md border p-3 text-sm sm:grid-cols-2">
+                  <MetadataItem label="客户" value={ticket.customer?.name || ticket.customerId} />
+                  <MetadataItem label="联系方式" value={ticket.customer?.primaryMobile || ticket.customer?.primaryEmail} />
+                  <MetadataItem label="来源" value={sourceLabel(ticket.source)} />
+                  <MetadataItem label="渠道" value={ticket.channel} />
+                  <MetadataItem label="会话 ID" value={ticket.conversationId || undefined} />
+                  <MetadataItem label="最后更新" value={ticket.updatedAt ? formatDateTime(ticket.updatedAt) : undefined} />
+                </section>
+
+                <Separator />
+
+                <section className="space-y-3">
+                  <div className="flex items-center gap-2 text-sm font-medium">
+                    <MessageSquareTextIcon className="size-4 text-muted-foreground" />
+                    处理进展
+                  </div>
+                  <div className="space-y-2">
+                    <Textarea
+                      rows={3}
+                      placeholder="记录本次处理进展"
+                      value={progressContent}
+                      onChange={(event) => setProgressContent(event.target.value)}
+                    />
+                    <div className="flex justify-end">
+                      <Button type="button" size="sm" disabled={progressSaving} onClick={() => void handleCreateProgress()}>
+                        <SendIcon className="size-3.5" />
+                        {progressSaving ? "提交中..." : "添加进展"}
+                      </Button>
+                    </div>
+                  </div>
+
+                  {detail.progresses && detail.progresses.length > 0 ? (
+                    <div className="space-y-3">
+                      {detail.progresses.map((progress, index) => (
+                        <div key={progress.id} className="flex gap-3">
+                          <div className="flex flex-col items-center">
+                            <span className="mt-1 size-2 rounded-full bg-primary" />
+                            <span
+                              className={cn(
+                                "mt-1 w-px flex-1 bg-border",
+                                index === detail.progresses!.length - 1 ? "opacity-0" : "opacity-100",
+                              )}
+                            />
+                          </div>
+                          <div className="min-w-0 flex-1 pb-3">
+                            <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                              <span>{progress.authorName || `用户#${progress.authorId}`}</span>
+                              <span>{progress.createdAt ? formatDateTime(progress.createdAt) : "-"}</span>
+                            </div>
+                            <div className="mt-1 whitespace-pre-wrap text-sm leading-6">{progress.content}</div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">
+                      暂无处理进展
+                    </div>
+                  )}
+                </section>
+              </div>
+            ) : (
+              <div className="px-6 py-12 text-center text-sm text-muted-foreground">请选择工单</div>
+            )}
+          </ScrollArea>
+        </DialogContent>
+      </Dialog>
+
+      <TicketAssignDialog
+        open={assignOpen}
+        ticketId={ticket?.id ?? null}
+        currentAssigneeId={ticket?.currentAssigneeId}
+        onOpenChange={setAssignOpen}
+        onSuccess={handleAssigned}
+      />
+    </>
+  )
+}
+
+function MetadataItem({ label, value }: { label: string; value?: string | number | null }) {
+  return (
+    <div className="min-w-0">
+      <div className="text-xs text-muted-foreground">{label}</div>
+      <div className="mt-1 truncate">{metadataValue(value)}</div>
+    </div>
+  )
+}
diff --git a/web/app/dashboard/tickets/page.tsx b/web/app/dashboard/tickets/page.tsx
index 250bcc7..656a79f 100644
--- a/web/app/dashboard/tickets/page.tsx
+++ b/web/app/dashboard/tickets/page.tsx
@@ -1,29 +1,49 @@
 "use client"
 
-import { PlusIcon, RefreshCcwIcon } from "lucide-react"
-import { useCallback, useEffect, useState } from "react"
+import { RefreshCcwIcon, SearchXIcon } from "lucide-react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { toast } from "sonner"
 
-import { OptionCombobox } from "@/components/option-combobox"
+import { OptionCombobox, type ComboboxOption } from "@/components/option-combobox"
+import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
 import { Input } from "@/components/ui/input"
 import {
-  createTicket,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  fetchAgentProfilesAll,
+  fetchTagsAll,
+  type AdminAgentProfile,
+  type TagTree,
+} from "@/lib/api/admin"
+import {
   fetchTicketSummary,
   fetchTickets,
-  updateTicket,
-  type CreateTicketPayload,
   type TicketItem,
   type TicketListQuery,
   type TicketStatus,
   type TicketSummary,
-  type UpdateTicketPayload,
 } from "@/lib/api/ticket"
-import { formatDateTime } from "@/lib/utils"
-import { EditDialog } from "./_components/edit"
+import { cn, formatDateTime } from "@/lib/utils"
 import { TicketAssignDialog } from "./_components/ticket-assign-dialog"
+import { TicketDetailDialog } from "./_components/ticket-detail-dialog"
 import { TicketStatusBadge } from "./_components/ticket-status-badge"
-import { TicketStatusDialog } from "./_components/ticket-status-dialog"
+
+type QuickViewKey =
+  | "all"
+  | "pending"
+  | "in_progress"
+  | "done"
+  | "unassigned"
+  | "mine"
+  | "stale"
 
 const emptySummary: TicketSummary = {
   all: 0,
@@ -35,73 +55,186 @@ const emptySummary: TicketSummary = {
   stale: 0,
 }
 
-const statusOptions = [
-  { value: "", label: "全部状态" },
-  { value: "pending", label: "待处理" },
-  { value: "in_progress", label: "处理中" },
-  { value: "done", label: "已处理" },
+const assigneeAllOption: ComboboxOption = { value: "0", label: "全部负责人" }
+const tagAllOption: ComboboxOption = { value: "0", label: "全部标签" }
+const staleHourOptions: ComboboxOption[] = [
+  { value: "24", label: "24 小时" },
+  { value: "48", label: "48 小时" },
+  { value: "168", label: "168 小时" },
 ]
 
-function isUpdatePayload(payload: CreateTicketPayload | UpdateTicketPayload): payload is UpdateTicketPayload {
-  return "ticketId" in payload
+function buildTagOptions(nodes: TagTree[], parentPath = ""): ComboboxOption[] {
+  const result: ComboboxOption[] = []
+  nodes.forEach((item) => {
+    const currentPath = parentPath ? `${parentPath}/${item.name}` : item.name
+    result.push({
+      value: String(item.id),
+      label: currentPath,
+    })
+    if (item.children.length > 0) {
+      result.push(...buildTagOptions(item.children, currentPath))
+    }
+  })
+  return result
+}
+
+function sourceLabel(source: string) {
+  switch (source) {
+    case "manual":
+      return "手动"
+    case "conversation":
+      return "会话"
+    default:
+      return source || "-"
+  }
+}
+
+function assigneeLabel(ticket: TicketItem) {
+  if (ticket.currentAssigneeName) {
+    return ticket.currentAssigneeName
+  }
+  if (ticket.currentAssigneeId > 0) {
+    return `客服#${ticket.currentAssigneeId}`
+  }
+  return "未分配"
 }
 
 export default function TicketsPage() {
   const [tickets, setTickets] = useState<TicketItem[]>([])
   const [summary, setSummary] = useState<TicketSummary>(emptySummary)
+  const [quickView, setQuickView] = useState<QuickViewKey>("all")
   const [keyword, setKeyword] = useState("")
-  const [status, setStatus] = useState("")
+  const [assigneeId, setAssigneeId] = useState("0")
+  const [tagId, setTagId] = useState("0")
+  const [staleHours, setStaleHours] = useState("24")
+  const [assigneeOptions, setAssigneeOptions] = useState<ComboboxOption[]>([assigneeAllOption])
+  const [tagOptions, setTagOptions] = useState<ComboboxOption[]>([tagAllOption])
   const [loading, setLoading] = useState(false)
-  const [saving, setSaving] = useState(false)
-  const [editOpen, setEditOpen] = useState(false)
-  const [editingId, setEditingId] = useState<number | null>(null)
-  const [assignTicketItem, setAssignTicketItem] = useState<TicketItem | null>(null)
-  const [statusTicketItem, setStatusTicketItem] = useState<TicketItem | null>(null)
+  const [selectedTicketIds, setSelectedTicketIds] = useState<Set<number>>(new Set())
+  const [batchAssignOpen, setBatchAssignOpen] = useState(false)
+  const [selectedTicketId, setSelectedTicketId] = useState<number | null>(null)
+  const [detailOpen, setDetailOpen] = useState(false)
+
+  const quickViews = useMemo(
+    () =>
+      [
+        { key: "all", label: "全部工单", count: summary.all },
+        { key: "pending", label: "待处理", count: summary.pending },
+        { key: "in_progress", label: "处理中", count: summary.inProgress },
+        { key: "done", label: "已处理", count: summary.done },
+        { key: "unassigned", label: "待分配", count: summary.unassigned },
+        { key: "mine", label: "我的工单", count: summary.mine },
+        { key: "stale", label: "长时间未更新", count: summary.stale },
+      ] satisfies Array<{ key: QuickViewKey; label: string; count: number }>,
+    [summary],
+  )
+
+  const selectedIds = useMemo(() => Array.from(selectedTicketIds), [selectedTicketIds])
+  const allPageSelected = tickets.length > 0 && tickets.every((ticket) => selectedTicketIds.has(ticket.id))
 
   const loadData = useCallback(async () => {
     setLoading(true)
     try {
+      const staleThreshold = Number(staleHours)
       const query: TicketListQuery = {
         page: 1,
         limit: 50,
         keyword: keyword.trim() || undefined,
-        status: status ? (status as TicketStatus) : undefined,
+        currentAssigneeId: assigneeId !== "0" ? Number(assigneeId) : undefined,
+        tagId: tagId !== "0" ? Number(tagId) : undefined,
       }
+
+      if (quickView === "pending" || quickView === "in_progress" || quickView === "done") {
+        query.status = quickView as TicketStatus
+      }
+      if (quickView === "unassigned") {
+        query.unassigned = 1
+      }
+      if (quickView === "mine") {
+        query.mine = 1
+      }
+      if (quickView === "stale") {
+        query.staleHours = staleThreshold
+      }
+
       const [ticketData, summaryData] = await Promise.all([
         fetchTickets(query),
-        fetchTicketSummary(),
+        fetchTicketSummary({ staleHours: staleThreshold }),
       ])
       setTickets(Array.isArray(ticketData.results) ? ticketData.results : [])
       setSummary(summaryData ?? emptySummary)
+      setSelectedTicketIds(new Set())
     } catch (error) {
       toast.error(error instanceof Error ? error.message : "加载工单失败")
     } finally {
       setLoading(false)
     }
-  }, [keyword, status])
+  }, [assigneeId, keyword, quickView, staleHours, tagId])
 
   useEffect(() => {
     void loadData()
   }, [loadData])
 
-  async function handleEditSubmit(payload: CreateTicketPayload | UpdateTicketPayload) {
-    setSaving(true)
-    try {
-      if (isUpdatePayload(payload)) {
-        await updateTicket(payload)
-        toast.success("工单已更新")
-      } else {
-        await createTicket(payload)
-        toast.success("工单已创建")
-      }
-      setEditOpen(false)
-      setEditingId(null)
-      await loadData()
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : "保存工单失败")
-    } finally {
-      setSaving(false)
+  useEffect(() => {
+    let active = true
+    Promise.all([fetchAgentProfilesAll(), fetchTagsAll()])
+      .then(([agents, tags]) => {
+        if (!active) {
+          return
+        }
+        setAssigneeOptions([
+          assigneeAllOption,
+          ...(Array.isArray(agents) ? agents : []).map((agent: AdminAgentProfile) => ({
+            value: String(agent.userId),
+            label:
+              agent.displayName ||
+              agent.nickname ||
+              agent.username ||
+              `客服#${agent.userId}`,
+          })),
+        ])
+        setTagOptions([tagAllOption, ...buildTagOptions(Array.isArray(tags) ? tags : [])])
+      })
+      .catch((error) => {
+        toast.error(error instanceof Error ? error.message : "加载筛选项失败")
+      })
+    return () => {
+      active = false
     }
+  }, [])
+
+  function toggleTicket(ticketId: number, checked: boolean) {
+    setSelectedTicketIds((current) => {
+      const next = new Set(current)
+      if (checked) {
+        next.add(ticketId)
+      } else {
+        next.delete(ticketId)
+      }
+      return next
+    })
+  }
+
+  function togglePage(checked: boolean) {
+    setSelectedTicketIds((current) => {
+      const next = new Set(current)
+      tickets.forEach((ticket) => {
+        if (checked) {
+          next.add(ticket.id)
+        } else {
+          next.delete(ticket.id)
+        }
+      })
+      return next
+    })
+  }
+
+  function resetFilters() {
+    setQuickView("all")
+    setKeyword("")
+    setAssigneeId("0")
+    setTagId("0")
+    setStaleHours("24")
   }
 
   return (
@@ -109,44 +242,43 @@ export default function TicketsPage() {
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div>
           <h1 className="text-2xl font-semibold tracking-normal">工单</h1>
-          <p className="text-sm text-muted-foreground">轻量工单列表临时入口</p>
+          <p className="text-sm text-muted-foreground">按状态、负责人和标签快速处理轻量工单</p>
         </div>
-        <div className="flex items-center gap-2">
-          <Button type="button" variant="outline" onClick={() => void loadData()} disabled={loading}>
-            <RefreshCcwIcon className="size-4" />
-            刷新
-          </Button>
-          <Button
-            type="button"
-            onClick={() => {
-              setEditingId(null)
-              setEditOpen(true)
-            }}
-          >
-            <PlusIcon className="size-4" />
-            新建工单
-          </Button>
+        <Button type="button" variant="outline" onClick={() => void loadData()} disabled={loading}>
+          <RefreshCcwIcon className={cn("size-4", loading ? "animate-spin" : "")} />
+          刷新
+        </Button>
+      </div>
+
+      <div className="rounded-lg border bg-background/80 p-2">
+        <div className="flex flex-wrap gap-2">
+          {quickViews.map((view) => (
+            <button
+              key={view.key}
+              type="button"
+              className={cn(
+                "inline-flex min-w-0 items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition",
+                quickView === view.key
+                  ? "border-primary bg-primary text-primary-foreground"
+                  : "border-border bg-background hover:bg-muted",
+              )}
+              onClick={() => setQuickView(view.key)}
+            >
+              <span className="truncate font-medium">{view.label}</span>
+              <span
+                className={cn(
+                  "rounded-full px-1.5 py-0.5 text-[11px] font-semibold tabular-nums",
+                  quickView === view.key ? "bg-primary-foreground/20" : "bg-muted text-muted-foreground",
+                )}
+              >
+                {view.count}
+              </span>
+            </button>
+          ))}
         </div>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-7">
-        {[
-          ["全部", summary.all],
-          ["待处理", summary.pending],
-          ["处理中", summary.inProgress],
-          ["已处理", summary.done],
-          ["未分配", summary.unassigned],
-          ["我的", summary.mine],
-          ["超时未动", summary.stale],
-        ].map(([label, value]) => (
-          <div key={label} className="rounded-lg border border-border bg-background p-3">
-            <div className="text-xs text-muted-foreground">{label}</div>
-            <div className="mt-1 text-xl font-semibold">{value}</div>
-          </div>
-        ))}
-      </div>
-
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex flex-wrap items-center gap-2 rounded-lg border bg-background/80 p-3">
         <Input
           className="w-full sm:w-72"
           placeholder="搜索编号、标题或描述"
@@ -160,111 +292,155 @@ export default function TicketsPage() {
         />
         <div className="w-full sm:w-44">
           <OptionCombobox
-            value={status}
-            onChange={setStatus}
-            placeholder="全部状态"
-            options={statusOptions}
+            value={assigneeId}
+            onChange={setAssigneeId}
+            placeholder="全部负责人"
+            options={assigneeOptions}
           />
         </div>
+        <div className="w-full sm:w-44">
+          <OptionCombobox
+            value={tagId}
+            onChange={setTagId}
+            placeholder="全部标签"
+            options={tagOptions}
+          />
+        </div>
+        <div className="w-full sm:w-40">
+          <OptionCombobox
+            value={staleHours}
+            onChange={setStaleHours}
+            placeholder="未更新阈值"
+            options={staleHourOptions}
+          />
+        </div>
+        <Button type="button" variant="outline" onClick={resetFilters}>
+          <SearchXIcon className="size-4" />
+          重置
+        </Button>
+      </div>
+
+      <div className="flex min-h-8 flex-wrap items-center justify-between gap-2">
+        <div className="text-sm text-muted-foreground">
+          已选择 <span className="font-medium text-foreground">{selectedTicketIds.size}</span> 张工单
+        </div>
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          disabled={selectedTicketIds.size === 0}
+          onClick={() => setBatchAssignOpen(true)}
+        >
+          批量指派
+        </Button>
       </div>
 
       <div className="overflow-hidden rounded-lg border border-border">
-        <div className="grid grid-cols-[minmax(0,1fr)_120px_140px_180px] gap-3 border-b bg-muted/40 px-4 py-2 text-xs font-medium text-muted-foreground">
-          <div>工单</div>
-          <div>状态</div>
-          <div>处理人</div>
-          <div className="text-right">操作</div>
-        </div>
-        {tickets.length === 0 ? (
-          <div className="px-4 py-10 text-center text-sm text-muted-foreground">
-            {loading ? "加载中..." : "暂无工单"}
-          </div>
-        ) : (
-          tickets.map((ticket) => (
-            <div
-              key={ticket.id}
-              className="grid grid-cols-[minmax(0,1fr)_120px_140px_180px] gap-3 border-b px-4 py-3 last:border-b-0"
-            >
-              <div className="min-w-0">
-                <div className="truncate text-sm font-medium">{ticket.title}</div>
-                <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                  <span>{ticket.ticketNo}</span>
-                  <span>{ticket.updatedAt ? formatDateTime(ticket.updatedAt) : "-"}</span>
-                </div>
-              </div>
-              <div>
-                <TicketStatusBadge status={ticket.status} />
-              </div>
-              <div className="truncate text-sm text-muted-foreground">
-                {ticket.currentAssigneeName || "未分配"}
-              </div>
-              <div className="flex justify-end gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => {
-                    setEditingId(ticket.id)
-                    setEditOpen(true)
-                  }}
-                >
-                  编辑
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setAssignTicketItem(ticket)}
-                >
-                  指派
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setStatusTicketItem(ticket)}
-                >
-                  状态
-                </Button>
-              </div>
-            </div>
-          ))
-        )}
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-10">
+                <Checkbox
+                  checked={allPageSelected}
+                  onCheckedChange={(checked) => togglePage(!!checked)}
+                  aria-label="选择当前页工单"
+                />
+              </TableHead>
+              <TableHead>工单</TableHead>
+              <TableHead className="w-28">状态</TableHead>
+              <TableHead className="w-36">负责人</TableHead>
+              <TableHead className="w-40">最后更新</TableHead>
+              <TableHead className="w-24 text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {tickets.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={6} className="py-12 text-center text-sm text-muted-foreground">
+                  {loading ? "加载中..." : "暂无工单"}
+                </TableCell>
+              </TableRow>
+            ) : (
+              tickets.map((ticket) => (
+                <TableRow key={ticket.id}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selectedTicketIds.has(ticket.id)}
+                      onCheckedChange={(checked) => toggleTicket(ticket.id, !!checked)}
+                      aria-label={`选择工单 ${ticket.ticketNo}`}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="min-w-0 space-y-1">
+                      <div className="truncate text-sm font-medium">{ticket.title}</div>
+                      <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                        <span className="font-mono">{ticket.ticketNo}</span>
+                        <span>{ticket.customer?.name || (ticket.customerId ? `客户#${ticket.customerId}` : "无客户")}</span>
+                        <span>{sourceLabel(ticket.source)}</span>
+                        {ticket.channel ? <span>{ticket.channel}</span> : null}
+                      </div>
+                      {ticket.tags && ticket.tags.length > 0 ? (
+                        <div className="flex flex-wrap gap-1">
+                          {ticket.tags.slice(0, 3).map((tag) => (
+                            <Badge key={tag.id} variant="outline" className="px-1.5 py-0 text-[11px]">
+                              {tag.name}
+                            </Badge>
+                          ))}
+                          {ticket.tags.length > 3 ? (
+                            <Badge variant="outline" className="px-1.5 py-0 text-[11px]">
+                              +{ticket.tags.length - 3}
+                            </Badge>
+                          ) : null}
+                        </div>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <TicketStatusBadge status={ticket.status} />
+                  </TableCell>
+                  <TableCell className="max-w-36 truncate text-sm text-muted-foreground">
+                    {assigneeLabel(ticket)}
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {ticket.updatedAt ? formatDateTime(ticket.updatedAt) : "-"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        setSelectedTicketId(ticket.id)
+                        setDetailOpen(true)
+                      }}
+                    >
+                      详情
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
       </div>
 
-      <EditDialog
-        open={editOpen}
-        saving={saving}
-        itemId={editingId}
-        onOpenChange={(open) => {
-          setEditOpen(open)
-          if (!open) {
-            setEditingId(null)
-          }
-        }}
-        onSubmit={handleEditSubmit}
-      />
       <TicketAssignDialog
-        open={!!assignTicketItem}
-        ticketId={assignTicketItem?.id ?? null}
-        currentAssigneeId={assignTicketItem?.currentAssigneeId}
-        onOpenChange={(open) => {
-          if (!open) {
-            setAssignTicketItem(null)
-          }
-        }}
+        open={batchAssignOpen}
+        ticketId={null}
+        ticketIds={selectedIds}
+        onOpenChange={setBatchAssignOpen}
         onSuccess={loadData}
       />
-      <TicketStatusDialog
-        open={!!statusTicketItem}
-        ticketId={statusTicketItem?.id ?? null}
-        currentStatus={statusTicketItem?.status}
+      <TicketDetailDialog
+        open={detailOpen}
+        ticketId={selectedTicketId}
         onOpenChange={(open) => {
+          setDetailOpen(open)
           if (!open) {
-            setStatusTicketItem(null)
+            setSelectedTicketId(null)
           }
         }}
-        onSuccess={loadData}
+        onChanged={loadData}
       />
     </div>
   )
diff --git a/web/lib/api/ticket.ts b/web/lib/api/ticket.ts
index b46b0f8..63c3edd 100644
--- a/web/lib/api/ticket.ts
+++ b/web/lib/api/ticket.ts
@@ -96,6 +96,7 @@ export type TicketListQuery = {
   channel?: string
   mine?: number | boolean
   unassigned?: number | boolean
+  staleHours?: number
 }
 
 export type CreateTicketPayload = {