mlogclub
1272 lines
50 KiB
TypeScript
1272 lines
50 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ChevronDownIcon,
|
|
ChevronRightIcon,
|
|
Cog,
|
|
ExternalLinkIcon,
|
|
Heart,
|
|
MessageSquarePlusIcon,
|
|
PanelRightCloseIcon,
|
|
PanelRightOpenIcon,
|
|
PencilIcon,
|
|
PlusIcon,
|
|
RefreshCcwIcon,
|
|
RotateCcwIcon,
|
|
UserRoundPlusIcon,
|
|
XIcon,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useState,
|
|
type ReactNode,
|
|
} from "react";
|
|
import { toast } from "sonner";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ButtonGroup } from "@/components/ui/button-group";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import {
|
|
fetchAgentProfilesAll,
|
|
fetchConversationDetail,
|
|
type AdminAgentProfile,
|
|
type AdminConversationDetail,
|
|
} from "@/lib/api/admin";
|
|
import {
|
|
deleteTicketCollaborator,
|
|
deleteTicketRelation,
|
|
fetchTicketDetail,
|
|
unwatchTicket,
|
|
updateTicket,
|
|
watchTicket,
|
|
type CreateTicketPayload,
|
|
type TicketDetail,
|
|
type TicketItem,
|
|
type UpdateTicketPayload,
|
|
} from "@/lib/api/ticket";
|
|
import { readSession } from "@/lib/auth";
|
|
import { getEnumLabel } from "@/lib/enums";
|
|
import {
|
|
IMConversationStatus,
|
|
IMConversationStatusLabels,
|
|
} from "@/lib/generated/enums";
|
|
import { formatDateTime } from "@/lib/utils";
|
|
import { EditDialog } from "../_components/edit";
|
|
import { TicketAssignDialog } from "../_components/ticket-assign-dialog";
|
|
import { TicketCollaboratorDialog } from "../_components/ticket-collaborator-dialog";
|
|
import { TicketCustomerPanel } from "../_components/ticket-customer-panel";
|
|
import { TicketPriorityBadge } from "../_components/ticket-priority-badge";
|
|
import { TicketReasonDialog } from "../_components/ticket-reason-dialog";
|
|
import { TicketRelationDialog } from "../_components/ticket-relation-dialog";
|
|
import { TicketReplyDialog } from "../_components/ticket-reply-dialog";
|
|
import { TicketSLABadge } from "../_components/ticket-sla-badge";
|
|
import {
|
|
TicketStatusBadge,
|
|
ticketStatusLabel,
|
|
} from "../_components/ticket-status-badge";
|
|
import { TicketStatusDialog } from "../_components/ticket-status-dialog";
|
|
|
|
function formatTicketSource(source?: string) {
|
|
switch (source) {
|
|
case "conversation":
|
|
return "会话转工单";
|
|
case "manual":
|
|
return "手动创建";
|
|
case "email":
|
|
return "邮件";
|
|
case "api":
|
|
return "API";
|
|
case "system":
|
|
return "系统";
|
|
default:
|
|
return source || "—";
|
|
}
|
|
}
|
|
|
|
function formatSLAStatus(status: string) {
|
|
switch (status) {
|
|
case "running":
|
|
return "进行中";
|
|
case "paused":
|
|
return "已暂停";
|
|
case "completed":
|
|
return "已完成";
|
|
case "breached":
|
|
return "已超时";
|
|
default:
|
|
return status;
|
|
}
|
|
}
|
|
|
|
function ticketSeverityLabel(severity: number) {
|
|
switch (severity) {
|
|
case 1:
|
|
return "轻微";
|
|
case 2:
|
|
return "一般";
|
|
case 3:
|
|
return "严重";
|
|
default:
|
|
return String(severity);
|
|
}
|
|
}
|
|
|
|
function ticketRelationLabel(relationType?: string) {
|
|
switch (relationType) {
|
|
case "duplicate":
|
|
return "重复工单";
|
|
case "related":
|
|
return "相关工单";
|
|
case "parent":
|
|
return "父工单";
|
|
case "child":
|
|
return "子工单";
|
|
default:
|
|
return relationType || "关联工单";
|
|
}
|
|
}
|
|
|
|
function ticketEventLabel(eventType?: string) {
|
|
switch (eventType) {
|
|
case "mentioned":
|
|
return "提及协作人";
|
|
case "internal_noted":
|
|
return "内部备注";
|
|
case "replied":
|
|
return "回复客户";
|
|
case "status_changed":
|
|
return "状态变更";
|
|
case "assigned":
|
|
return "指派工单";
|
|
case "transferred":
|
|
return "转派工单";
|
|
default:
|
|
return eventType || "事件";
|
|
}
|
|
}
|
|
|
|
function getMainSLA(ticket: TicketItem | null) {
|
|
return (
|
|
ticket?.sla?.find((item) => item.slaType === "resolution") ??
|
|
ticket?.sla?.[0] ??
|
|
null
|
|
);
|
|
}
|
|
|
|
function parseMentionUserIds(payload?: string) {
|
|
if (!payload) {
|
|
return [];
|
|
}
|
|
try {
|
|
const data = JSON.parse(payload) as { mentionUserIds?: number[] };
|
|
return Array.isArray(data.mentionUserIds) ? data.mentionUserIds : [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function isDoneTicketStatus(status?: string) {
|
|
return status === "resolved" || status === "closed" || status === "cancelled";
|
|
}
|
|
|
|
export default function TicketDetailPage() {
|
|
const searchParams = useSearchParams();
|
|
const router = useRouter();
|
|
const ticketId = Number(searchParams.get("id") || 0);
|
|
const [detail, setDetail] = useState<TicketDetail | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [replyDialogOpen, setReplyDialogOpen] = useState(false);
|
|
const [assignDialogOpen, setAssignDialogOpen] = useState(false);
|
|
const [statusDialogOpen, setStatusDialogOpen] = useState(false);
|
|
const [closeDialogOpen, setCloseDialogOpen] = useState(false);
|
|
const [reopenDialogOpen, setReopenDialogOpen] = useState(false);
|
|
const [editDialogOpen, setEditDialogOpen] = useState(false);
|
|
const [relationDialogOpen, setRelationDialogOpen] = useState(false);
|
|
const [collaboratorDialogOpen, setCollaboratorDialogOpen] = useState(false);
|
|
const [collapsedSections, setCollapsedSections] = useState<
|
|
Record<string, boolean>
|
|
>({});
|
|
const [rightPanelCollapsed, setRightPanelCollapsed] = useState(false);
|
|
const [sourceConversation, setSourceConversation] =
|
|
useState<AdminConversationDetail | null>(null);
|
|
const [agents, setAgents] = useState<AdminAgentProfile[]>([]);
|
|
|
|
const ticket = detail?.ticket ?? null;
|
|
const currentUserId = readSession()?.user?.id ?? 0;
|
|
const isWatching = Boolean(
|
|
detail?.watchers?.some((item) => item.userId === currentUserId),
|
|
);
|
|
const resolutionSLA = useMemo(() => getMainSLA(ticket), [ticket]);
|
|
const childRelations = useMemo(
|
|
() =>
|
|
(detail?.relatedTickets || []).filter(
|
|
(item) => item.relationType === "child",
|
|
),
|
|
[detail?.relatedTickets],
|
|
);
|
|
const childProgress = useMemo(() => {
|
|
const total = childRelations.length;
|
|
const completed = childRelations.filter((item) =>
|
|
isDoneTicketStatus(item.relatedTicketStatus),
|
|
).length;
|
|
return {
|
|
total,
|
|
completed,
|
|
active: total - completed,
|
|
};
|
|
}, [childRelations]);
|
|
|
|
const toggleSection = useCallback((sectionKey: string) => {
|
|
setCollapsedSections((current) => ({
|
|
...current,
|
|
[sectionKey]: !current[sectionKey],
|
|
}));
|
|
}, []);
|
|
|
|
const loadDetail = useCallback(async () => {
|
|
if (!ticketId) {
|
|
setDetail(null);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
const data = await fetchTicketDetail(ticketId);
|
|
setDetail(data);
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : "加载工单详情失败");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [ticketId]);
|
|
|
|
useEffect(() => {
|
|
void loadDetail();
|
|
}, [loadDetail]);
|
|
|
|
useEffect(() => {
|
|
void (async () => {
|
|
try {
|
|
const data = await fetchAgentProfilesAll();
|
|
setAgents(Array.isArray(data) ? data : []);
|
|
} catch {
|
|
setAgents([]);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!ticket?.conversationId) {
|
|
setSourceConversation(null);
|
|
return;
|
|
}
|
|
void (async () => {
|
|
try {
|
|
const data = await fetchConversationDetail(ticket.conversationId);
|
|
setSourceConversation(data);
|
|
} catch {
|
|
setSourceConversation(null);
|
|
}
|
|
})();
|
|
}, [ticket?.conversationId]);
|
|
|
|
async function handleWatchToggle() {
|
|
if (!ticket) {
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
if (isWatching) {
|
|
await unwatchTicket(ticket.id);
|
|
toast.success("已取消关注");
|
|
} else {
|
|
await watchTicket(ticket.id);
|
|
toast.success("已关注工单");
|
|
}
|
|
await loadDetail();
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : "更新关注状态失败");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handleEditSubmit(
|
|
payload: CreateTicketPayload | UpdateTicketPayload,
|
|
) {
|
|
if (!("ticketId" in payload)) {
|
|
toast.error("详情页仅支持编辑现有工单");
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
await updateTicket(payload);
|
|
toast.success("工单基础信息已更新");
|
|
setEditDialogOpen(false);
|
|
await loadDetail();
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : "更新工单失败");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handleDeleteRelation(relationId: number) {
|
|
if (!ticket) {
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
await deleteTicketRelation({ ticketId: ticket.id, relationId });
|
|
toast.success("关联工单已移除");
|
|
await loadDetail();
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : "移除关联工单失败");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handleDeleteCollaborator(collaboratorId: number) {
|
|
if (!ticket) {
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
await deleteTicketCollaborator({ ticketId: ticket.id, collaboratorId });
|
|
toast.success("协作人已移除");
|
|
await loadDetail();
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : "移除协作人失败");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-[calc(100vh-4rem)] min-w-0 overflow-hidden">
|
|
{loading ? (
|
|
<div className="min-w-0 flex-1 p-4 lg:p-6">
|
|
<div className="py-20 text-center text-muted-foreground">
|
|
加载中...
|
|
</div>
|
|
</div>
|
|
) : ticket ? (
|
|
<>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex h-full flex-col">
|
|
{/* 工单header */}
|
|
<div className="border-b border-border/70 bg-muted/10 flex flex-col gap-2.5 px-8 py-2">
|
|
<div className="flex flex-col gap-2.5 xl:flex-row xl:items-start xl:justify-between">
|
|
<div className="min-w-0 space-y-2">
|
|
<div className="text-xs font-medium tracking-wide text-muted-foreground">
|
|
{ticket.ticketNo}
|
|
</div>
|
|
<div className="flex min-w-0 flex-wrap items-center gap-2">
|
|
<TicketStatusBadge status={ticket.status} />
|
|
<TicketPriorityBadge priority={ticket.priority} priorityName={ticket.priorityName} />
|
|
<TicketSLABadge ticket={ticket} />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap justify-end gap-2">
|
|
<ButtonGroup>
|
|
<Button
|
|
size="sm"
|
|
variant={isWatching ? "default" : "outline"}
|
|
onClick={() => void handleWatchToggle()}
|
|
disabled={saving || !ticket}
|
|
>
|
|
<Heart className="size-4" />
|
|
{isWatching ? "已关注" : "关注"}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setReplyDialogOpen(true)}
|
|
>
|
|
<MessageSquarePlusIcon className="size-4" />
|
|
回复/备注
|
|
</Button>
|
|
{ticket.status === "closed" ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setReopenDialogOpen(true)}
|
|
disabled={saving}
|
|
>
|
|
<RotateCcwIcon className="size-4" />
|
|
重开工单
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setCloseDialogOpen(true)}
|
|
disabled={saving || !ticket}
|
|
>
|
|
<XIcon className="size-4" />
|
|
关闭工单
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setAssignDialogOpen(true)}
|
|
>
|
|
<UserRoundPlusIcon className="size-4" />
|
|
分配处理人
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setStatusDialogOpen(true)}
|
|
>
|
|
<Cog className="size-4" />
|
|
变更状态
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setEditDialogOpen(true)}
|
|
>
|
|
<PencilIcon className="size-4" />
|
|
{/* 编辑 */}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => void loadDetail()}
|
|
disabled={loading || saving}
|
|
>
|
|
<RefreshCcwIcon className="size-4" />
|
|
{/* 刷新 */}
|
|
</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="min-h-0 overflow-y-auto">
|
|
<div className="space-y-0">
|
|
<DetailSection className="px-4 lg:px-6">
|
|
<div className="space-y-2.5">
|
|
<h1 className="text-xl font-semibold tracking-tight text-foreground">
|
|
{ticket.title}
|
|
</h1>
|
|
<div className="border-l-2 pl-3 border-border/70 ">
|
|
<div className="whitespace-pre-wrap break-words text-sm leading-6 text-foreground/80">
|
|
{ticket.description || "暂无工单描述"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DetailSection>
|
|
|
|
<DetailSection className="px-4 pt-4 lg:px-6">
|
|
<Tabs defaultValue="comments" className="gap-3">
|
|
<TabsList>
|
|
<TabsTrigger value="comments">回复&备注</TabsTrigger>
|
|
<TabsTrigger value="events">事件记录</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="comments" className="space-y-3">
|
|
{(detail?.comments?.length || 0) > 0 ? (
|
|
<div className="relative pl-6">
|
|
<div className="absolute top-0 bottom-0 left-[0.55rem] w-px bg-border/70" />
|
|
<div className="space-y-4">
|
|
{detail?.comments?.map((comment) => (
|
|
<div
|
|
key={`comment-${comment.id}`}
|
|
className="relative"
|
|
>
|
|
<div
|
|
className={`absolute top-2 -left-6 size-3 rounded-full ring-4 ring-background ${
|
|
comment.commentType === "public_reply"
|
|
? "bg-emerald-500"
|
|
: "bg-amber-500"
|
|
}`}
|
|
/>
|
|
<div className="rounded-lg border border-border/60 bg-muted/15 px-3.5 py-3">
|
|
<div className="mb-2 flex items-start justify-between gap-3">
|
|
<div className="min-w-0 space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="text-sm font-medium">
|
|
{comment.authorName ||
|
|
`用户#${comment.authorId}`}
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className={
|
|
comment.commentType ===
|
|
"public_reply"
|
|
? "border-emerald-200 bg-emerald-50 text-emerald-700"
|
|
: "border-amber-200 bg-amber-50 text-amber-700"
|
|
}
|
|
>
|
|
{comment.commentType ===
|
|
"public_reply"
|
|
? "客户回复"
|
|
: "内部备注"}
|
|
</Badge>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{comment.createdAt
|
|
? formatDateTime(comment.createdAt)
|
|
: "—"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{comment.commentType === "internal_note" &&
|
|
parseMentionUserIds(comment.payload).length ? (
|
|
<div className="mb-2 flex flex-wrap gap-2">
|
|
{parseMentionUserIds(comment.payload).map(
|
|
(userId) => {
|
|
const user = agents.find(
|
|
(item) => item.userId === userId,
|
|
);
|
|
return (
|
|
<span
|
|
key={`${comment.id}-${userId}`}
|
|
className="rounded-full border px-2 py-1 text-xs text-muted-foreground"
|
|
>
|
|
@
|
|
{user?.displayName ||
|
|
user?.nickname ||
|
|
user?.username ||
|
|
`用户#${userId}`}
|
|
</span>
|
|
);
|
|
},
|
|
)}
|
|
</div>
|
|
) : null}
|
|
<div className="whitespace-pre-wrap break-words text-sm leading-6 text-foreground/90">
|
|
{comment.content}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-sm text-muted-foreground">
|
|
暂无评论记录
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
<TabsContent value="events" className="space-y-2">
|
|
{(detail?.events?.length || 0) > 0 ? (
|
|
detail?.events?.map((event) => (
|
|
<div
|
|
key={`event-${event.id}`}
|
|
className={`rounded-lg border px-3 py-2.5 ${
|
|
event.eventType === "mentioned"
|
|
? "border-amber-200 bg-amber-50/60"
|
|
: "border-border/60 bg-muted/20"
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2">
|
|
{event.eventType === "mentioned" ? (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-amber-300 bg-amber-100 text-amber-800"
|
|
>
|
|
提及
|
|
</Badge>
|
|
) : null}
|
|
<div className="text-sm font-medium">
|
|
{event.content ||
|
|
ticketEventLabel(event.eventType)}
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{event.createdAt
|
|
? formatDateTime(event.createdAt)
|
|
: "—"}
|
|
</div>
|
|
</div>
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
{event.operatorName ||
|
|
`用户#${event.operatorId}`}
|
|
</div>
|
|
{event.payload &&
|
|
event.eventType === "mentioned" &&
|
|
parseMentionUserIds(event.payload).length ? (
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
{parseMentionUserIds(event.payload).map(
|
|
(userId) => {
|
|
const user = agents.find(
|
|
(item) => item.userId === userId,
|
|
);
|
|
return (
|
|
<span
|
|
key={`${event.id}-${userId}`}
|
|
className="rounded-full border border-amber-200 px-2 py-1 text-xs text-amber-800"
|
|
>
|
|
@
|
|
{user?.displayName ||
|
|
user?.nickname ||
|
|
user?.username ||
|
|
`用户#${userId}`}
|
|
</span>
|
|
);
|
|
},
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="text-sm text-muted-foreground">
|
|
暂无事件记录
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DetailSection>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative hidden shrink-0 border-l border-border/70 bg-background lg:block">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="absolute top-2.5 left-1/2 z-10 size-6.5 -translate-x-1/2 rounded-full shadow-sm"
|
|
onClick={() => setRightPanelCollapsed((value) => !value)}
|
|
aria-label={
|
|
rightPanelCollapsed ? "展开右侧信息面板" : "折叠右侧信息面板"
|
|
}
|
|
>
|
|
{rightPanelCollapsed ? (
|
|
<PanelRightOpenIcon className="size-3.5" />
|
|
) : (
|
|
<PanelRightCloseIcon className="size-3.5" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
<div
|
|
className={`min-w-0 shrink-0 overflow-hidden bg-background transition-[width] duration-200 ${
|
|
rightPanelCollapsed ? "w-0" : "w-full lg:w-[360px]"
|
|
}`}
|
|
>
|
|
{rightPanelCollapsed ? null : (
|
|
<div className="h-full">
|
|
<div className="flex h-full flex-col gap-4">
|
|
<div className="min-h-0 overflow-y-auto">
|
|
<div className="space-y-0">
|
|
<DetailSection
|
|
title="基础信息"
|
|
collapsible
|
|
collapsed={Boolean(collapsedSections.basics)}
|
|
onToggle={() => toggleSection("basics")}
|
|
className="px-4 pt-3 lg:px-6 lg:pt-4"
|
|
action={
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setEditDialogOpen(true)}
|
|
>
|
|
<PencilIcon className="size-3.5" />
|
|
编辑
|
|
</Button>
|
|
}
|
|
contentClassName="space-y-0 text-sm"
|
|
>
|
|
<InfoRow label="工单号" value={ticket.ticketNo} />
|
|
<InfoRow
|
|
label="状态"
|
|
value={ticketStatusLabel(ticket.status)}
|
|
/>
|
|
<InfoRow
|
|
label="标签"
|
|
value={
|
|
ticket.tags && ticket.tags.length > 0
|
|
? ticket.tags.map((tag) => tag.name).join(" / ")
|
|
: "未打标签"
|
|
}
|
|
/>
|
|
<InfoRow
|
|
label="优先级"
|
|
value={ticket.priorityName || String(ticket.priority)}
|
|
/>
|
|
<InfoRow
|
|
label="严重度"
|
|
value={ticketSeverityLabel(ticket.severity)}
|
|
/>
|
|
<InfoRow
|
|
label="处理人"
|
|
value={ticket.currentAssigneeName || "未指派"}
|
|
/>
|
|
<InfoRow
|
|
label="处理团队"
|
|
value={ticket.currentTeamName || "未分组"}
|
|
/>
|
|
<InfoRow
|
|
label="解决时限"
|
|
value={
|
|
resolutionSLA
|
|
? `${resolutionSLA.targetMinutes} 分钟 / ${formatSLAStatus(resolutionSLA.status)}`
|
|
: "未设置"
|
|
}
|
|
/>
|
|
<InfoRow
|
|
label="来源"
|
|
value={formatTicketSource(ticket.source)}
|
|
/>
|
|
<InfoRow label="渠道" value={ticket.channel || "—"} />
|
|
<InfoRow
|
|
label="重开次数"
|
|
value={String(ticket.reopenedCount)}
|
|
/>
|
|
<InfoRow
|
|
label="创建时间"
|
|
value={
|
|
ticket.createdAt
|
|
? formatDateTime(ticket.createdAt)
|
|
: "—"
|
|
}
|
|
/>
|
|
<InfoRow
|
|
label="更新时间"
|
|
value={
|
|
ticket.updatedAt
|
|
? formatDateTime(ticket.updatedAt)
|
|
: "—"
|
|
}
|
|
/>
|
|
<InfoRow
|
|
label="截止时间"
|
|
value={
|
|
ticket.dueAt ? formatDateTime(ticket.dueAt) : "—"
|
|
}
|
|
/>
|
|
<InfoRow
|
|
label="首次响应"
|
|
value={
|
|
ticket.firstResponseAt
|
|
? formatDateTime(ticket.firstResponseAt)
|
|
: "—"
|
|
}
|
|
/>
|
|
</DetailSection>
|
|
|
|
<DetailSection
|
|
title="客户信息"
|
|
collapsible
|
|
collapsed={Boolean(collapsedSections.customer)}
|
|
onToggle={() => toggleSection("customer")}
|
|
className="px-4 pt-4 lg:px-6"
|
|
contentClassName="text-sm"
|
|
>
|
|
<TicketCustomerPanel
|
|
ticketId={ticket.id}
|
|
customerId={ticket.customerId}
|
|
onRefresh={loadDetail}
|
|
/>
|
|
</DetailSection>
|
|
|
|
<DetailSection
|
|
title="SLA 信息"
|
|
collapsible
|
|
collapsed={Boolean(collapsedSections.sla)}
|
|
onToggle={() => toggleSection("sla")}
|
|
className="px-4 pt-4 lg:px-6"
|
|
contentClassName="space-y-3 text-sm"
|
|
>
|
|
{ticket.sla?.length ? (
|
|
ticket.sla.map((sla) => (
|
|
<SurfacePanel key={sla.slaType} className="p-2.5">
|
|
<div className="font-medium">
|
|
{sla.slaType === "first_response"
|
|
? "首次响应"
|
|
: "解决时效"}
|
|
</div>
|
|
<div className="mt-1 text-muted-foreground">
|
|
目标：{sla.targetMinutes} 分钟
|
|
</div>
|
|
<div className="mt-1 text-muted-foreground">
|
|
状态：{formatSLAStatus(sla.status)}
|
|
</div>
|
|
<div className="mt-1 text-muted-foreground">
|
|
已耗时：{sla.elapsedMin} 分钟
|
|
</div>
|
|
{sla.breachedAt ? (
|
|
<div className="mt-1 text-muted-foreground">
|
|
超时于：{formatDateTime(sla.breachedAt)}
|
|
</div>
|
|
) : null}
|
|
</SurfacePanel>
|
|
))
|
|
) : (
|
|
<div className="rounded-lg border border-amber-200 bg-amber-50/70 p-3 text-sm text-amber-900">
|
|
当前工单未生成 SLA 记录，请检查工单 SLA
|
|
配置；如果系统仍在使用默认策略，也需要确认配置是否已补齐。
|
|
<Link
|
|
href="/dashboard/ticket-priorities"
|
|
className="ml-1 font-medium underline underline-offset-4"
|
|
>
|
|
前往配置优先级
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</DetailSection>
|
|
|
|
<DetailSection
|
|
title="解决信息"
|
|
collapsible
|
|
collapsed={Boolean(collapsedSections.resolution)}
|
|
onToggle={() => toggleSection("resolution")}
|
|
className="px-4 pt-4 lg:px-6"
|
|
contentClassName="space-y-0 text-sm"
|
|
>
|
|
<InfoRow
|
|
label="解决码"
|
|
value={
|
|
ticket.resolutionCodeName ||
|
|
ticket.resolutionCode ||
|
|
"—"
|
|
}
|
|
/>
|
|
<InfoRow
|
|
label="解决说明"
|
|
value={ticket.resolutionSummary || "—"}
|
|
/>
|
|
<InfoRow
|
|
label="关闭原因"
|
|
value={ticket.closeReason || "—"}
|
|
/>
|
|
<InfoRow
|
|
label="解决时间"
|
|
value={
|
|
ticket.resolvedAt
|
|
? formatDateTime(ticket.resolvedAt)
|
|
: "—"
|
|
}
|
|
/>
|
|
<InfoRow
|
|
label="关闭时间"
|
|
value={
|
|
ticket.closedAt
|
|
? formatDateTime(ticket.closedAt)
|
|
: "—"
|
|
}
|
|
/>
|
|
</DetailSection>
|
|
|
|
<DetailSection
|
|
title="来源关联"
|
|
collapsible
|
|
collapsed={Boolean(collapsedSections.source)}
|
|
onToggle={() => toggleSection("source")}
|
|
className="px-4 pt-4 lg:px-6"
|
|
contentClassName="space-y-3 text-sm"
|
|
>
|
|
<InfoRow
|
|
label="关联会话"
|
|
value={
|
|
ticket.conversationId
|
|
? `#${ticket.conversationId}`
|
|
: "未关联"
|
|
}
|
|
/>
|
|
{sourceConversation ? (
|
|
<SurfacePanel className="p-2.5">
|
|
<div className="text-sm font-medium">
|
|
{sourceConversation.subject || "未命名会话"}
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap gap-2 text-xs text-muted-foreground">
|
|
<span>
|
|
状态：
|
|
{getEnumLabel(
|
|
IMConversationStatusLabels,
|
|
sourceConversation.status as IMConversationStatus,
|
|
)}
|
|
</span>
|
|
<span>
|
|
处理人：
|
|
{sourceConversation.currentAssigneeName ||
|
|
"未指派"}
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 text-xs leading-6 text-muted-foreground">
|
|
{sourceConversation.lastMessageSummary ||
|
|
"暂无最近消息摘要"}
|
|
</div>
|
|
<div className="mt-2 text-xs text-muted-foreground">
|
|
最近活跃：
|
|
{sourceConversation.lastActiveAt
|
|
? formatDateTime(sourceConversation.lastActiveAt)
|
|
: "—"}
|
|
</div>
|
|
</SurfacePanel>
|
|
) : null}
|
|
{ticket.conversationId ? (
|
|
<Button
|
|
variant="outline"
|
|
className="w-full"
|
|
onClick={() => router.push("/dashboard/conversations")}
|
|
>
|
|
<RotateCcwIcon className="size-4" />
|
|
前往会话工作台
|
|
</Button>
|
|
) : null}
|
|
</DetailSection>
|
|
|
|
<DetailSection
|
|
title="关联工单"
|
|
collapsible
|
|
collapsed={Boolean(collapsedSections.related)}
|
|
onToggle={() => toggleSection("related")}
|
|
className="px-4 pt-4 lg:px-6"
|
|
action={
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setRelationDialogOpen(true)}
|
|
>
|
|
<PlusIcon className="size-4" />
|
|
新增关联
|
|
</Button>
|
|
}
|
|
contentClassName="space-y-3 text-sm"
|
|
>
|
|
{childProgress.total > 0 ? (
|
|
<div className="rounded-lg border border-blue-200 bg-blue-50/70 p-3">
|
|
<div className="text-sm font-medium text-blue-900">
|
|
子工单进展
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap gap-2 text-xs text-blue-900">
|
|
<span>总数：{childProgress.total}</span>
|
|
<span>已完成：{childProgress.completed}</span>
|
|
<span>进行中：{childProgress.active}</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{detail?.relatedTickets?.length ? (
|
|
detail.relatedTickets.map((relation) => (
|
|
<SurfacePanel key={relation.id} className="p-2.5">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 space-y-1">
|
|
<div className="text-xs text-muted-foreground">
|
|
{ticketRelationLabel(relation.relationType)}
|
|
</div>
|
|
<div className="truncate font-medium">
|
|
{relation.relatedTicketNo ||
|
|
`#${relation.relatedTicketId}`}
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
{relation.relatedTicketTitle || "未命名工单"}
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() =>
|
|
router.push(
|
|
`/tickets/detail?id=${relation.relatedTicketId}`,
|
|
)
|
|
}
|
|
>
|
|
<ExternalLinkIcon className="size-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
disabled={saving}
|
|
onClick={() =>
|
|
void handleDeleteRelation(relation.id)
|
|
}
|
|
>
|
|
<XIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap gap-2 text-xs text-muted-foreground">
|
|
{relation.relationType === "child" ? (
|
|
<Badge
|
|
variant="outline"
|
|
className={
|
|
isDoneTicketStatus(
|
|
relation.relatedTicketStatus,
|
|
)
|
|
? "border-emerald-300 bg-emerald-50 text-emerald-800"
|
|
: "border-orange-300 bg-orange-50 text-orange-800"
|
|
}
|
|
>
|
|
{isDoneTicketStatus(
|
|
relation.relatedTicketStatus,
|
|
)
|
|
? "子单已完成"
|
|
: "子单处理中"}
|
|
</Badge>
|
|
) : null}
|
|
<span>
|
|
状态：
|
|
{ticketStatusLabel(
|
|
relation.relatedTicketStatus || "",
|
|
)}
|
|
</span>
|
|
<span>
|
|
团队：{relation.currentTeamName || "未分组"}
|
|
</span>
|
|
<span>
|
|
处理人：
|
|
{relation.currentAssigneeName || "未指派"}
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 text-xs text-muted-foreground">
|
|
最近更新：
|
|
{relation.updatedAt
|
|
? formatDateTime(relation.updatedAt)
|
|
: "—"}
|
|
</div>
|
|
</SurfacePanel>
|
|
))
|
|
) : (
|
|
<div className="text-muted-foreground">
|
|
暂无关联工单
|
|
</div>
|
|
)}
|
|
</DetailSection>
|
|
|
|
<DetailSection
|
|
title="协作人"
|
|
collapsible
|
|
collapsed={Boolean(collapsedSections.collaborators)}
|
|
onToggle={() => toggleSection("collaborators")}
|
|
className="px-4 pt-4 lg:px-6"
|
|
action={
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setCollaboratorDialogOpen(true)}
|
|
>
|
|
<PlusIcon className="size-4" />
|
|
新增协作人
|
|
</Button>
|
|
}
|
|
contentClassName="space-y-3 text-sm"
|
|
>
|
|
{detail?.collaborators?.length ? (
|
|
detail.collaborators.map((collaborator) => (
|
|
<SurfacePanel
|
|
key={collaborator.id}
|
|
className="flex items-center justify-between gap-3 p-2.5"
|
|
>
|
|
<div className="min-w-0">
|
|
<div className="font-medium">
|
|
{collaborator.userName ||
|
|
`用户#${collaborator.userId}`}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{collaborator.teamName || "未分组"}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
disabled={saving}
|
|
onClick={() =>
|
|
void handleDeleteCollaborator(collaborator.id)
|
|
}
|
|
>
|
|
<XIcon className="size-4" />
|
|
</Button>
|
|
</SurfacePanel>
|
|
))
|
|
) : (
|
|
<div className="text-muted-foreground">暂无协作人</div>
|
|
)}
|
|
</DetailSection>
|
|
|
|
<DetailSection
|
|
title="关注人"
|
|
collapsible
|
|
collapsed={Boolean(collapsedSections.watchers)}
|
|
onToggle={() => toggleSection("watchers")}
|
|
className="px-4 pt-4 lg:px-6"
|
|
contentClassName="space-y-3 text-sm"
|
|
>
|
|
{detail?.watchers?.length ? (
|
|
detail.watchers.map((watcher) => (
|
|
<InfoRow
|
|
key={watcher.id}
|
|
label={`用户#${watcher.userId}`}
|
|
value={watcher.userName || "未命名"}
|
|
/>
|
|
))
|
|
) : (
|
|
<div className="text-muted-foreground">暂无关注人</div>
|
|
)}
|
|
</DetailSection>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="min-w-0 flex-1 p-4 lg:p-6">
|
|
<div className="py-20 text-center text-muted-foreground">
|
|
工单不存在
|
|
</div>
|
|
</div>
|
|
)}
|
|
<TicketReplyDialog
|
|
open={replyDialogOpen}
|
|
ticketId={ticket?.id ?? null}
|
|
onOpenChange={setReplyDialogOpen}
|
|
onSuccess={loadDetail}
|
|
/>
|
|
<TicketAssignDialog
|
|
open={assignDialogOpen}
|
|
ticketId={ticket?.id ?? null}
|
|
currentTeamId={ticket?.currentTeamId}
|
|
currentAssigneeId={ticket?.currentAssigneeId}
|
|
onOpenChange={setAssignDialogOpen}
|
|
onSuccess={loadDetail}
|
|
/>
|
|
<TicketStatusDialog
|
|
open={statusDialogOpen}
|
|
ticketId={ticket?.id ?? null}
|
|
currentStatus={ticket?.status}
|
|
onOpenChange={setStatusDialogOpen}
|
|
onSuccess={loadDetail}
|
|
/>
|
|
<TicketReasonDialog
|
|
open={closeDialogOpen}
|
|
mode="close"
|
|
ticketId={ticket?.id ?? null}
|
|
defaultReason={ticket?.closeReason || "处理完成"}
|
|
onOpenChange={setCloseDialogOpen}
|
|
onSuccess={loadDetail}
|
|
/>
|
|
<TicketReasonDialog
|
|
open={reopenDialogOpen}
|
|
mode="reopen"
|
|
ticketId={ticket?.id ?? null}
|
|
defaultReason="客户有新反馈"
|
|
onOpenChange={setReopenDialogOpen}
|
|
onSuccess={loadDetail}
|
|
/>
|
|
<EditDialog
|
|
open={editDialogOpen}
|
|
saving={saving}
|
|
itemId={ticket?.id ?? null}
|
|
onOpenChange={setEditDialogOpen}
|
|
onSubmit={handleEditSubmit}
|
|
/>
|
|
<TicketRelationDialog
|
|
open={relationDialogOpen}
|
|
ticketId={ticket?.id ?? null}
|
|
onOpenChange={setRelationDialogOpen}
|
|
onSuccess={loadDetail}
|
|
/>
|
|
<TicketCollaboratorDialog
|
|
open={collaboratorDialogOpen}
|
|
ticketId={ticket?.id ?? null}
|
|
onOpenChange={setCollaboratorDialogOpen}
|
|
onSuccess={loadDetail}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InfoRow({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="grid grid-cols-[78px_minmax(0,1fr)] items-start gap-3 py-1">
|
|
<span className="text-sm text-muted-foreground">{label}</span>
|
|
<span className="text-right text-sm text-foreground wrap-break-word">
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DetailSection({
|
|
title,
|
|
description,
|
|
action,
|
|
collapsible,
|
|
collapsed,
|
|
onToggle,
|
|
className,
|
|
contentClassName,
|
|
children,
|
|
}: {
|
|
title?: string;
|
|
description?: string;
|
|
action?: ReactNode;
|
|
collapsible?: boolean;
|
|
collapsed?: boolean;
|
|
onToggle?: () => void;
|
|
className?: string;
|
|
contentClassName?: string;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<section
|
|
className={`border-b border-border/70 py-4 last:border-b-0 ${className ?? ""}`}
|
|
>
|
|
{title || description || action ? (
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="min-w-0 space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
{collapsible ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-6 shrink-0"
|
|
onClick={onToggle}
|
|
aria-label={collapsed ? "展开面板" : "折叠面板"}
|
|
>
|
|
{collapsed ? (
|
|
<ChevronRightIcon className="size-4" />
|
|
) : (
|
|
<ChevronDownIcon className="size-4" />
|
|
)}
|
|
</Button>
|
|
) : null}
|
|
{title ? <h2 className="text-base font-medium">{title}</h2> : null}
|
|
</div>
|
|
{description ? (
|
|
<p className="text-sm leading-5 text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
{action ? <div className="shrink-0">{action}</div> : null}
|
|
</div>
|
|
) : null}
|
|
{collapsed ? null :<div className="pt-3"><div className={contentClassName}>{children}</div></div>}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function SurfacePanel({
|
|
className,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`rounded-lg border border-border/60 bg-muted/20 ${className ?? ""}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|