"use client"; // 详情抽屉区块 —— 按钮触发右滑 Drawer，展示单条记录的 // Descriptions 字段表 + 状态 Tag/StatusDot + Timeline 操作历史。 // 数据全内联，复制即独立运行。 import { useState } from "react"; import { FileText } from "lucide-react"; import { Button, Descriptions, DescriptionsItem, Drawer, DrawerContent, StatusDot, Tag, Timeline, type TimelineItemProps, } from "@hulianui/ui"; interface Ticket { id: string; title: string; reporter: string; assignee: string; priority: "高" | "中" | "低"; status: "open" | "in_progress" | "resolved" | "closed"; createdAt: string; updatedAt: string; desc: string; } const TICKET: Ticket = { id: "TK-20260605-042", title: "生产环境登录接口 503 偶发", reporter: "陈晓雨", assignee: "王磊", priority: "高", status: "in_progress", createdAt: "2026-06-05 09:12", updatedAt: "2026-06-05 14:38", desc: "部分用户反馈登录时收到 503，复现概率约 15%，初步定位为网关层连接池耗尽。", }; const STATUS_DOT_MAP: Record = { open: { dot: "maintenance", label: "待处理" }, in_progress: { dot: "degraded", label: "处理中" }, resolved: { dot: "online", label: "已解决" }, closed: { dot: "offline", label: "已关闭" }, }; const STATUS_TAG_TONE: Record = { open: "neutral", in_progress: "warning", resolved: "success", closed: "danger", }; const PRIORITY_TONE: Record = { 高: "danger", 中: "warning", 低: "neutral", }; const HISTORY: TimelineItemProps[] = [ { color: "success", label: "09:12", children: (

陈晓雨创建工单并标记优先级「高」

), }, { color: "primary", label: "09:35", children: (

系统自动分配给王磊

), }, { color: "primary", label: "10:08", children: (

王磊开始处理，状态变更为「处理中」

), }, { color: "warning", label: "11:44", children: (

王磊追加备注：连接池最大值从 200 调至 800，观察中

), }, { color: "default", label: "14:38", children: (

王磊等待压测验证，预计 16:00 前给出结论

), }, ]; export function DetailDrawerBlock() { const [open, setOpen] = useState(false); const ticket = TICKET; const dotMeta = STATUS_DOT_MAP[ticket.status]; return (

{/* 触发区 —— 模拟列表行的操作入口 */}

{ticket.id}

{ticket.title}

{/* 右滑抽屉 */}

{/* 字段概要 */} {ticket.id} {dotMeta.label} {ticket.priority} {ticket.reporter} {ticket.assignee} {ticket.createdAt} {ticket.updatedAt} {ticket.desc} {/* 操作历史 */}

操作历史

); }