914 lines
41 KiB
TypeScript
914 lines
41 KiB
TypeScript
import { useMemo, useState } from "react";
|
||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import {
|
||
BellRing,
|
||
CheckCircle2,
|
||
Filter,
|
||
LoaderCircle,
|
||
ShieldAlert,
|
||
SlidersHorizontal,
|
||
Sparkles,
|
||
} from "lucide-react";
|
||
import { aiPmoApi } from "@/api/aiPmo";
|
||
import { notificationsApi } from "@/api/notifications";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Switch } from "@/components/ui/switch";
|
||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import { useToast } from "@/components/ui/toast";
|
||
import { buildInboxView, getInboxSectionLabel } from "@/lib/inbox";
|
||
import { getApiErrorMessage } from "@/lib/apiError";
|
||
import { cn } from "@/lib/utils";
|
||
import { toZhPriority } from "@/lib/display";
|
||
import { parseBackendDate } from "@/lib/datetime";
|
||
import type { InboxActionDescriptor, InboxDisplayKind, InboxItemViewModel, InboxSectionKey } from "@/types/inbox";
|
||
|
||
const POLL_INTERVAL_MS = 15000;
|
||
|
||
const STATUS_LABELS: Record<InboxDisplayKind, string> = {
|
||
action_required: "需你决策",
|
||
auto_running: "AI 已接手",
|
||
auto_done: "AI 执行完成",
|
||
info: "仅通知",
|
||
};
|
||
|
||
const STATUS_STYLES: Record<InboxDisplayKind, string> = {
|
||
action_required: "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
|
||
auto_running: "border-sky-500/40 bg-sky-500/10 text-sky-700 dark:text-sky-300",
|
||
auto_done: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
|
||
info: "border-slate-400/40 bg-slate-500/10 text-slate-700 dark:text-slate-300",
|
||
};
|
||
|
||
const METRIC_CARD_STYLES = [
|
||
"bg-blue-50 text-blue-700",
|
||
"bg-sky-50 text-sky-700",
|
||
"bg-emerald-50 text-emerald-700",
|
||
"bg-amber-50 text-amber-700",
|
||
"bg-violet-50 text-violet-700",
|
||
];
|
||
|
||
const PRIORITY_OPTIONS = [
|
||
{ value: "all", label: "全部优先级" },
|
||
{ value: "high", label: "高优先级" },
|
||
{ value: "medium", label: "中优先级" },
|
||
{ value: "low", label: "低优先级" },
|
||
];
|
||
|
||
function matchesPriority(item: InboxItemViewModel, priorityFilter: string): boolean {
|
||
if (priorityFilter === "all") return true;
|
||
if (priorityFilter === "high") return item.priority_rank >= 3;
|
||
if (priorityFilter === "medium") return item.priority_rank === 2;
|
||
return item.priority_rank <= 1;
|
||
}
|
||
|
||
function buildScopedSections(items: InboxItemViewModel[]) {
|
||
const sectionKeys: InboxSectionKey[] = ["all", "action_required", "auto_running", "auto_done", "info"];
|
||
return sectionKeys.map((key) => ({
|
||
key,
|
||
label: getInboxSectionLabel(key),
|
||
count: key === "all" ? items.length : items.filter((item) => item.display_kind === key).length,
|
||
}));
|
||
}
|
||
|
||
function isToday(value?: string | null) {
|
||
const date = parseBackendDate(value);
|
||
if (!date) return false;
|
||
const now = new Date();
|
||
return (
|
||
date.getFullYear() === now.getFullYear() &&
|
||
date.getMonth() === now.getMonth() &&
|
||
date.getDate() === now.getDate()
|
||
);
|
||
}
|
||
|
||
function formatDetailTime(value?: string | null) {
|
||
const date = parseBackendDate(value);
|
||
if (!date) return value || "-";
|
||
return date.toLocaleString("zh-CN", { hour12: false });
|
||
}
|
||
|
||
function formatJsonBlock(value: unknown): string {
|
||
if (!value) return "暂无";
|
||
try {
|
||
return JSON.stringify(value, null, 2);
|
||
} catch {
|
||
return String(value);
|
||
}
|
||
}
|
||
|
||
function buildActionKey(item: InboxItemViewModel, action: InboxActionDescriptor): string {
|
||
return `${item.id}:${action.kind}:${action.label}`;
|
||
}
|
||
|
||
function renderMiniList(title: string, description: string, items: InboxItemViewModel[], onOpen: (item: InboxItemViewModel) => void) {
|
||
return (
|
||
<Card className="rounded-2xl border-0 bg-white shadow-[0_8px_22px_rgba(15,23,42,0.08)]">
|
||
<CardHeader className="pb-3">
|
||
<CardTitle className="text-base text-slate-900">{title}</CardTitle>
|
||
<CardDescription className="text-slate-500">{description}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3">
|
||
{items.length === 0 ? (
|
||
<div className="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-500">
|
||
当前为空
|
||
</div>
|
||
) : (
|
||
items.map((item) => (
|
||
<button
|
||
key={item.id}
|
||
type="button"
|
||
className="w-full rounded-xl border border-slate-100 bg-slate-50 px-3 py-3 text-left transition hover:border-slate-200 hover:bg-white"
|
||
onClick={() => onOpen(item)}
|
||
>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<span className="line-clamp-1 text-sm font-semibold text-slate-900">{item.title}</span>
|
||
<Badge variant="outline" className={cn("text-[11px]", STATUS_STYLES[item.display_kind])}>
|
||
{STATUS_LABELS[item.display_kind]}
|
||
</Badge>
|
||
</div>
|
||
<p className="mt-1 line-clamp-2 text-xs text-slate-500">{item.summary}</p>
|
||
</button>
|
||
))
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
function InboxCard({
|
||
item,
|
||
onAction,
|
||
pendingActionKey,
|
||
}: {
|
||
item: InboxItemViewModel;
|
||
onAction: (item: InboxItemViewModel, action: InboxActionDescriptor) => void;
|
||
pendingActionKey: string | null;
|
||
}) {
|
||
const stageCards = [
|
||
{ label: "当前阶段", value: item.stage_text || STATUS_LABELS[item.display_kind] },
|
||
{ label: "预计下一步", value: item.next_step_text || item.ai_plan || "-" },
|
||
{ label: "撤销状态", value: item.can_undo ? `可撤销，截止 ${item.undo_deadline || "-"}` : "不可撤销" },
|
||
];
|
||
const primaryActionKey = buildActionKey(item, item.primary_action);
|
||
const secondaryActionKey = buildActionKey(item, item.secondary_action);
|
||
const weakActionKey = buildActionKey(item, item.weak_action);
|
||
const primaryPending = pendingActionKey === primaryActionKey;
|
||
const secondaryPending = pendingActionKey === secondaryActionKey;
|
||
const weakPending = pendingActionKey === weakActionKey;
|
||
|
||
return (
|
||
<Card className="rounded-2xl border-0 bg-white shadow-[0_8px_22px_rgba(15,23,42,0.08)] transition hover:-translate-y-0.5 hover:shadow-[0_14px_30px_rgba(15,23,42,0.12)]">
|
||
<CardHeader className="space-y-3 pb-3">
|
||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Badge variant="outline" className={cn("text-[11px]", STATUS_STYLES[item.display_kind])}>
|
||
{STATUS_LABELS[item.display_kind]}
|
||
</Badge>
|
||
<span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
|
||
{toZhPriority(item.priority)}
|
||
</span>
|
||
{item.project_id && (
|
||
<span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
|
||
{item.project_name || `项目 #${item.project_id}`}
|
||
</span>
|
||
)}
|
||
{item.dedupe_count > 1 && (
|
||
<span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
|
||
重复 {item.dedupe_count} 次
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="text-right">
|
||
<div className="text-xs text-slate-400">{item.updated_at || item.created_at || "-"}</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="space-y-1">
|
||
<CardTitle className="text-base text-slate-900">{item.title}</CardTitle>
|
||
<CardDescription className="line-clamp-2 text-slate-500">{item.summary}</CardDescription>
|
||
</div>
|
||
<BellRing className="mt-0.5 h-4 w-4 shrink-0 text-slate-400" />
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
{item.ai_plan && (
|
||
<div className="rounded-xl bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">AI 已做/将做什么</div>
|
||
<p className="mt-2 text-sm leading-6 text-slate-700">{item.ai_plan}</p>
|
||
</div>
|
||
)}
|
||
|
||
{item.blocking_reason && (
|
||
<div className="rounded-xl border border-amber-100 bg-amber-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-amber-700">为什么需要你</div>
|
||
<p className="mt-2 text-sm leading-6 text-amber-900/80">{item.blocking_reason}</p>
|
||
</div>
|
||
)}
|
||
|
||
{(item.stage_text || item.next_step_text || item.can_undo) && (
|
||
<div className="grid gap-3 md:grid-cols-3">
|
||
{stageCards.map((stage) => (
|
||
<div key={stage.label} className="rounded-xl bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">{stage.label}</div>
|
||
<p className="mt-2 text-sm text-slate-700">{stage.value}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Button
|
||
className="bg-blue-600 text-white hover:bg-blue-700"
|
||
disabled={primaryPending}
|
||
onClick={() => onAction(item, item.primary_action)}
|
||
>
|
||
{primaryPending ? "处理中…" : item.primary_action.label}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
className="border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
|
||
disabled={secondaryPending}
|
||
onClick={() => onAction(item, item.secondary_action)}
|
||
>
|
||
{secondaryPending ? "加载中…" : item.secondary_action.label}
|
||
</Button>
|
||
{item.weak_action.kind === "none" ? (
|
||
<span className="px-3 py-2 text-sm text-slate-400">{item.weak_action.label}</span>
|
||
) : (
|
||
<Button
|
||
variant="ghost"
|
||
className="text-slate-500 hover:bg-slate-50 hover:text-slate-700"
|
||
disabled={weakPending}
|
||
onClick={() => onAction(item, item.weak_action)}
|
||
>
|
||
{weakPending ? "处理中…" : item.weak_action.label}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
export default function InboxPage() {
|
||
const navigate = useNavigate();
|
||
const queryClient = useQueryClient();
|
||
const { toast } = useToast();
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
const [notificationDetailItem, setNotificationDetailItem] = useState<InboxItemViewModel | null>(null);
|
||
const [workItemDetailItem, setWorkItemDetailItem] = useState<InboxItemViewModel | null>(null);
|
||
const [pendingActionKey, setPendingActionKey] = useState<string | null>(null);
|
||
const [priorityFilter, setPriorityFilter] = useState("all");
|
||
const [onlyDecision, setOnlyDecision] = useState(false);
|
||
const [onlyUnread, setOnlyUnread] = useState(false);
|
||
const activeSection = (searchParams.get("section") as InboxSectionKey) || "all";
|
||
const projectFilter = searchParams.get("project_id") || "all";
|
||
const searchValue = searchParams.get("q") || "";
|
||
|
||
const notificationsQuery = useQuery({
|
||
queryKey: ["notifications", "inbox"],
|
||
queryFn: () => notificationsApi.list({ limit: 60 }),
|
||
refetchInterval: POLL_INTERVAL_MS,
|
||
});
|
||
|
||
const workItemsQuery = useQuery({
|
||
queryKey: ["ai-pmo-work-items", "inbox"],
|
||
queryFn: () => aiPmoApi.listWorkItems({ limit: 60 }),
|
||
refetchInterval: POLL_INTERVAL_MS,
|
||
});
|
||
|
||
const workItemDetailQuery = useQuery({
|
||
queryKey: ["ai-pmo-work-item-detail", workItemDetailItem?.source_work_item?.id || null],
|
||
queryFn: () => aiPmoApi.getWorkItem(Number(workItemDetailItem?.source_work_item?.id)),
|
||
enabled: Boolean(workItemDetailItem?.source_work_item?.id),
|
||
});
|
||
|
||
const inboxData = useMemo(() => {
|
||
return buildInboxView({
|
||
notifications: notificationsQuery.data || { items: [], unread_count: 0 },
|
||
workItems: workItemsQuery.data || { items: [] },
|
||
});
|
||
}, [notificationsQuery.data, workItemsQuery.data]);
|
||
|
||
const projectOptions = useMemo(() => {
|
||
const map = new Map<string, string>();
|
||
for (const item of inboxData.items) {
|
||
if (!item.project_id) continue;
|
||
map.set(String(item.project_id), item.project_name || `项目 #${item.project_id}`);
|
||
}
|
||
return Array.from(map.entries()).map(([value, label]) => ({ value, label }));
|
||
}, [inboxData.items]);
|
||
|
||
const projectScopedItems = useMemo(() => {
|
||
return inboxData.items.filter((item) => {
|
||
if (projectFilter === "all") return true;
|
||
return String(item.project_id || "") === projectFilter;
|
||
});
|
||
}, [inboxData.items, projectFilter]);
|
||
|
||
const filteredItems = useMemo(() => {
|
||
const query = searchValue.trim().toLowerCase();
|
||
return projectScopedItems.filter((item) => {
|
||
if (activeSection !== "all" && item.display_kind !== activeSection) return false;
|
||
if (onlyDecision && item.display_kind !== "action_required") return false;
|
||
if (onlyUnread && item.is_read) return false;
|
||
if (!matchesPriority(item, priorityFilter)) return false;
|
||
if (!query) return true;
|
||
return `${item.title} ${item.summary} ${item.ai_plan || ""} ${item.project_name || ""}`.toLowerCase().includes(query);
|
||
});
|
||
}, [activeSection, onlyDecision, onlyUnread, priorityFilter, projectScopedItems, searchValue]);
|
||
|
||
const scopedSections = useMemo(() => buildScopedSections(projectScopedItems), [projectScopedItems]);
|
||
const scopedLeaderSummary = useMemo(() => {
|
||
return {
|
||
decision_count: projectScopedItems.filter((item) => item.display_kind === "action_required").length,
|
||
auto_running_count: projectScopedItems.filter((item) => item.display_kind === "auto_running").length,
|
||
auto_done_today: projectScopedItems.filter(
|
||
(item) => item.display_kind === "auto_done" && isToday(item.updated_at || item.created_at)
|
||
).length,
|
||
high_priority_blocked_count: projectScopedItems.filter(
|
||
(item) => item.display_kind === "action_required" && item.priority_rank >= 3 && Boolean(item.blocking_reason)
|
||
).length,
|
||
external_authorization_count: projectScopedItems.filter(
|
||
(item) =>
|
||
item.display_kind === "action_required" &&
|
||
/(github|gitlab|jira|接入|授权|跨系统|外部系统)/i.test(`${item.title} ${item.summary} ${item.blocking_reason || ""}`)
|
||
).length,
|
||
top_decisions: projectScopedItems.filter((item) => item.display_kind === "action_required").slice(0, 3),
|
||
recent_completions: projectScopedItems.filter((item) => item.display_kind === "auto_done").slice(0, 3),
|
||
};
|
||
}, [projectScopedItems]);
|
||
|
||
const setSection = (section: string) => {
|
||
const next = new URLSearchParams(searchParams);
|
||
next.set("section", section);
|
||
setSearchParams(next);
|
||
};
|
||
|
||
const setProject = (projectId: string) => {
|
||
const next = new URLSearchParams(searchParams);
|
||
if (projectId === "all") next.delete("project_id");
|
||
else next.set("project_id", projectId);
|
||
setSearchParams(next);
|
||
};
|
||
|
||
const setSearch = (value: string) => {
|
||
const next = new URLSearchParams(searchParams);
|
||
if (!value.trim()) next.delete("q");
|
||
else next.set("q", value.trim());
|
||
setSearchParams(next);
|
||
};
|
||
|
||
const refreshAll = async () => {
|
||
await Promise.all([
|
||
queryClient.invalidateQueries({ queryKey: ["notifications", "inbox"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["ai-pmo-work-items", "inbox"] }),
|
||
]);
|
||
};
|
||
|
||
const markNotificationRead = async (item: InboxItemViewModel) => {
|
||
if (item.source_kind === "notification" && item.source_notification && !item.source_notification.is_read) {
|
||
try {
|
||
await notificationsApi.markRead(Number(item.source_notification.id));
|
||
} catch {
|
||
// 不阻断后续跳转。
|
||
}
|
||
}
|
||
};
|
||
|
||
const openNotificationDetail = async (item: InboxItemViewModel) => {
|
||
await markNotificationRead(item);
|
||
setNotificationDetailItem(item);
|
||
await refreshAll();
|
||
};
|
||
|
||
const openWorkItemDetail = async (item: InboxItemViewModel) => {
|
||
setWorkItemDetailItem(item);
|
||
await refreshAll();
|
||
};
|
||
|
||
const openTarget = async (item: InboxItemViewModel, options?: { forceDirect?: boolean }) => {
|
||
if (!options?.forceDirect && item.source_kind === "notification" && item.display_kind === "info") {
|
||
await openNotificationDetail(item);
|
||
return;
|
||
}
|
||
|
||
await markNotificationRead(item);
|
||
|
||
if (item.target_url) {
|
||
if (item.target_url.startsWith("/")) navigate(item.target_url);
|
||
else window.location.assign(item.target_url);
|
||
await refreshAll();
|
||
return;
|
||
}
|
||
if (item.source_kind === "ai_pmo_work_item") {
|
||
await openWorkItemDetail(item);
|
||
return;
|
||
}
|
||
toast({ title: "当前卡片暂无可打开的详情入口", variant: "error" });
|
||
};
|
||
|
||
const handleAction = async (item: InboxItemViewModel, action: InboxActionDescriptor) => {
|
||
const actionKey = buildActionKey(item, action);
|
||
setPendingActionKey(actionKey);
|
||
try {
|
||
if (item.source_kind === "notification" && action.label === "查看详情") {
|
||
await openNotificationDetail(item);
|
||
return;
|
||
}
|
||
if (action.kind === "open_target") {
|
||
await openTarget(item);
|
||
return;
|
||
}
|
||
if (action.kind === "open_detail") {
|
||
if (item.source_kind === "notification") {
|
||
await openNotificationDetail(item);
|
||
return;
|
||
}
|
||
await openWorkItemDetail(item);
|
||
return;
|
||
}
|
||
if (action.kind === "confirm" && item.source_kind === "ai_pmo_work_item" && item.source_work_item) {
|
||
const result = await aiPmoApi.decideWorkItem(item.source_work_item.id, {
|
||
action: "approve",
|
||
project_id: item.project_id ?? undefined,
|
||
});
|
||
await refreshAll();
|
||
const followupReply = String(result.followup_reply || "").trim();
|
||
if (result.status === "succeeded") {
|
||
toast({ title: followupReply || "AI PMO 已继续执行并完成该工作项", variant: "success" });
|
||
} else if (result.status === "pending_manual") {
|
||
toast({ title: followupReply || "继续执行后仍需补充信息或人工确认", variant: "default" });
|
||
} else {
|
||
toast({ title: followupReply || "继续执行失败，请查看详情", variant: "error" });
|
||
}
|
||
setWorkItemDetailItem({
|
||
...item,
|
||
display_kind:
|
||
result.status === "succeeded"
|
||
? "auto_done"
|
||
: result.status === "pending_manual"
|
||
? "action_required"
|
||
: "info",
|
||
stage_text: String(result.target_state || item.stage_text || "").trim() || item.stage_text,
|
||
next_step_text: String(result.followup_reply || item.next_step_text || "").trim() || item.next_step_text,
|
||
});
|
||
return;
|
||
}
|
||
if (action.kind === "reject" && item.source_kind === "ai_pmo_work_item" && item.source_work_item) {
|
||
const result = await aiPmoApi.decideWorkItem(item.source_work_item.id, {
|
||
action: "reject",
|
||
reason: "人工审批拒绝，已标记失效",
|
||
});
|
||
await refreshAll();
|
||
const followupReply = String(result.followup_reply || "").trim();
|
||
toast({ title: followupReply || "已标记失效，不再继续执行", variant: "default" });
|
||
if (workItemDetailItem?.id === item.id) {
|
||
setWorkItemDetailItem(null);
|
||
}
|
||
return;
|
||
}
|
||
if (action.kind === "mark_read" && item.source_kind === "notification" && item.source_notification) {
|
||
await notificationsApi.markRead(item.source_notification.id);
|
||
await refreshAll();
|
||
return;
|
||
}
|
||
if (action.kind === "none") {
|
||
if (item.source_kind === "ai_pmo_work_item") {
|
||
await openWorkItemDetail(item);
|
||
return;
|
||
}
|
||
toast({ title: action.label, variant: "default" });
|
||
}
|
||
} catch (error) {
|
||
toast({ title: getApiErrorMessage(error), variant: "error" });
|
||
} finally {
|
||
setPendingActionKey((current) => (current === actionKey ? null : current));
|
||
}
|
||
};
|
||
|
||
const markAllRead = async () => {
|
||
try {
|
||
await notificationsApi.markAllRead();
|
||
toast({ title: "站内通知已全部设为已读", variant: "success" });
|
||
await refreshAll();
|
||
} catch (error) {
|
||
toast({ title: getApiErrorMessage(error, "全部已读失败"), variant: "error" });
|
||
}
|
||
};
|
||
|
||
const isLoading = notificationsQuery.isLoading || workItemsQuery.isLoading;
|
||
|
||
return (
|
||
<>
|
||
<div className="space-y-6 pb-16">
|
||
<section className="rounded-2xl bg-[#F8F9FA] p-4 md:p-5">
|
||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||
<div>
|
||
<h1 className="text-2xl font-bold tracking-tight text-slate-900">消息台</h1>
|
||
<p className="mt-1 text-slate-500">AI 决策收件箱 · 先看摘要，再处理真正需要你拍板的事项</p>
|
||
<p className="mt-1 text-xs text-slate-500">
|
||
当前结果：{filteredItems.length} 条
|
||
{projectFilter !== "all" ? `（已筛选项目 #${projectFilter}）` : "（全租户汇总）"}
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
variant="outline"
|
||
className="border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
|
||
onClick={markAllRead}
|
||
disabled={notificationsQuery.data?.unread_count === 0}
|
||
>
|
||
全部已读
|
||
</Button>
|
||
<Button className="bg-blue-600 text-white hover:bg-blue-700" onClick={() => setSection("action_required")}>
|
||
<SlidersHorizontal className="mr-2 h-4 w-4" />
|
||
先看待决策
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 rounded-2xl bg-white p-4 shadow-[0_8px_22px_rgba(15,23,42,0.08)]">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className="rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">
|
||
AI 决策收件箱
|
||
</span>
|
||
<p className="text-sm font-medium text-slate-700">铃铛只看摘要，完整工作流统一沉到 Inbox</p>
|
||
</div>
|
||
<CardDescription className="mt-2 text-slate-500">
|
||
只保留真正可执行的事项；查询、闲聊、健康提示默认不进入消息台。
|
||
</CardDescription>
|
||
<div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-5">
|
||
{[
|
||
{ icon: ShieldAlert, label: "需你决策", value: scopedLeaderSummary.decision_count },
|
||
{ icon: LoaderCircle, label: "AI处理中", value: scopedLeaderSummary.auto_running_count },
|
||
{ icon: CheckCircle2, label: "今日自动完成", value: scopedLeaderSummary.auto_done_today },
|
||
{ icon: Sparkles, label: "高优先级阻塞", value: scopedLeaderSummary.high_priority_blocked_count },
|
||
{ icon: Filter, label: "待授权外部接入", value: scopedLeaderSummary.external_authorization_count },
|
||
].map(({ icon: Icon, label, value }, index) => (
|
||
<div key={label} className="rounded-xl bg-slate-50 px-3 py-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<div className="text-xs font-semibold text-slate-500">{label}</div>
|
||
<div className="mt-2 text-2xl font-bold text-slate-900">{value}</div>
|
||
</div>
|
||
<span className={cn("inline-flex h-9 w-9 items-center justify-center rounded-full", METRIC_CARD_STYLES[index])}>
|
||
<Icon className="h-4 w-4" />
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 grid gap-4 lg:grid-cols-2">
|
||
{renderMiniList("最需要你拍板的 3 件事", "优先看高风险、上下文不完整或需要授权的事项。", scopedLeaderSummary.top_decisions, (item) =>
|
||
void handleAction(item, item.primary_action)
|
||
)}
|
||
{renderMiniList("AI 刚完成的 3 件事", "自动结果会优先给出产物和影响范围。", scopedLeaderSummary.recent_completions, (item) =>
|
||
void handleAction(item, item.primary_action)
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="rounded-2xl bg-[#F8F9FA] p-4 md:p-5">
|
||
<div className="rounded-2xl bg-white p-4 shadow-[0_8px_22px_rgba(15,23,42,0.08)]">
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<div className="w-full min-w-0 sm:min-w-[220px] sm:flex-1">
|
||
<Input
|
||
placeholder="搜索标题、摘要、项目"
|
||
defaultValue={searchValue}
|
||
className="border-slate-200 bg-white text-slate-700 placeholder:text-slate-400"
|
||
onBlur={(event) => setSearch(event.target.value)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter") setSearch((event.target as HTMLInputElement).value);
|
||
}}
|
||
/>
|
||
</div>
|
||
<select
|
||
value={projectFilter}
|
||
onChange={(event) => setProject(event.target.value)}
|
||
className="h-10 w-full rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-700 sm:w-auto"
|
||
>
|
||
<option value="all">全部项目</option>
|
||
{projectOptions.map((option) => (
|
||
<option key={option.value} value={option.value}>
|
||
{option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<select
|
||
value={priorityFilter}
|
||
onChange={(event) => setPriorityFilter(event.target.value)}
|
||
className="h-10 w-full rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-700 sm:w-auto"
|
||
>
|
||
{PRIORITY_OPTIONS.map((option) => (
|
||
<option key={option.value} value={option.value}>
|
||
{option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<label className="inline-flex items-center gap-2 rounded-full bg-slate-50 px-3 py-2 text-sm text-slate-600">
|
||
<Switch checked={onlyDecision} onCheckedChange={setOnlyDecision} />
|
||
仅需决策
|
||
</label>
|
||
<label className="inline-flex items-center gap-2 rounded-full bg-slate-50 px-3 py-2 text-sm text-slate-600">
|
||
<Switch checked={onlyUnread} onCheckedChange={setOnlyUnread} />
|
||
仅未读
|
||
</label>
|
||
</div>
|
||
|
||
<Tabs value={activeSection} onValueChange={setSection}>
|
||
<TabsList className="mt-4 grid h-auto w-full grid-cols-2 gap-2 rounded-2xl bg-slate-50 p-2 md:grid-cols-5">
|
||
{scopedSections.map((section) => (
|
||
<TabsTrigger
|
||
key={section.key}
|
||
value={section.key}
|
||
className="rounded-xl border border-transparent text-slate-600 data-[state=active]:border-slate-200 data-[state=active]:bg-white data-[state=active]:text-slate-900"
|
||
>
|
||
{section.label} {section.count}
|
||
</TabsTrigger>
|
||
))}
|
||
</TabsList>
|
||
</Tabs>
|
||
</div>
|
||
</section>
|
||
|
||
{isLoading ? (
|
||
<section className="rounded-2xl bg-[#F8F9FA] p-6">
|
||
<div className="flex items-center gap-2 rounded-xl bg-white px-4 py-3 text-slate-500 shadow-[0_4px_14px_rgba(15,23,42,0.06)]">
|
||
<span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" />
|
||
加载消息台中…
|
||
</div>
|
||
</section>
|
||
) : filteredItems.length === 0 ? (
|
||
<section className="rounded-2xl bg-[#F8F9FA] p-6">
|
||
<Card className="rounded-2xl border-0 bg-white shadow-[0_8px_22px_rgba(15,23,42,0.08)]">
|
||
<CardContent className="py-12 text-center text-slate-500">
|
||
<BellRing className="mx-auto mb-3 h-12 w-12 opacity-50" />
|
||
<p className="font-medium text-slate-700">当前没有匹配收件项</p>
|
||
<p className="mt-1 text-sm">请调整筛选条件后重试</p>
|
||
</CardContent>
|
||
</Card>
|
||
</section>
|
||
) : (
|
||
<section className="rounded-2xl bg-[#F8F9FA] p-4 md:p-5">
|
||
<div className="grid gap-4 xl:grid-cols-2">
|
||
{filteredItems.map((item) => (
|
||
<InboxCard
|
||
key={item.id}
|
||
item={item}
|
||
pendingActionKey={pendingActionKey}
|
||
onAction={(target, action) => void handleAction(target, action)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</section>
|
||
)}
|
||
</div>
|
||
|
||
<Dialog
|
||
open={Boolean(workItemDetailItem)}
|
||
onOpenChange={(open) => {
|
||
if (!open) setWorkItemDetailItem(null);
|
||
}}
|
||
>
|
||
<DialogContent className="max-h-[90vh] w-[min(720px,calc(100vw-1rem))] max-w-[calc(100vw-1rem)] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle>{workItemDetailItem?.title || "工作项详情"}</DialogTitle>
|
||
<DialogDescription>
|
||
{workItemDetailItem?.project_name || (workItemDetailItem?.project_id ? `项目 #${workItemDetailItem.project_id}` : "未绑定项目")}
|
||
{" · "}
|
||
{formatDetailTime(workItemDetailItem?.updated_at || workItemDetailItem?.created_at)}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
{workItemDetailItem && (
|
||
<div className="space-y-4">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Badge variant="outline" className={cn("text-[11px]", STATUS_STYLES[workItemDetailItem.display_kind])}>
|
||
{STATUS_LABELS[workItemDetailItem.display_kind]}
|
||
</Badge>
|
||
<span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
|
||
{toZhPriority(workItemDetailItem.priority)}
|
||
</span>
|
||
{workItemDetailItem.source_work_item?.intent && (
|
||
<span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
|
||
{workItemDetailItem.source_work_item.intent}
|
||
</span>
|
||
)}
|
||
{workItemDetailItem.source_work_item?.source_system && (
|
||
<span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
|
||
{workItemDetailItem.source_work_item.source_system}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">工作项摘要</div>
|
||
<p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-slate-700">
|
||
{workItemDetailItem.summary || "暂无摘要"}
|
||
</p>
|
||
</div>
|
||
|
||
{workItemDetailItem.source_work_item?.blocking_reason && (
|
||
<div className="rounded-xl border border-amber-100 bg-amber-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-amber-700">阻塞原因</div>
|
||
<p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-amber-900/80">
|
||
{workItemDetailItem.source_work_item.blocking_reason}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{workItemDetailItem.source_work_item?.ai_plan && (
|
||
<div className="rounded-xl border border-slate-200 bg-white px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">AI 执行计划</div>
|
||
<p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-slate-700">
|
||
{workItemDetailItem.source_work_item.ai_plan}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid gap-3 md:grid-cols-2">
|
||
<div className="rounded-xl bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">当前阶段</div>
|
||
<p className="mt-2 text-sm text-slate-700">
|
||
{workItemDetailItem.source_work_item?.stage_text || STATUS_LABELS[workItemDetailItem.display_kind]}
|
||
</p>
|
||
</div>
|
||
<div className="rounded-xl bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">下一步</div>
|
||
<p className="mt-2 whitespace-pre-wrap text-sm text-slate-700">
|
||
{workItemDetailItem.source_work_item?.next_step_text || "暂无"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{workItemDetailQuery.isLoading ? (
|
||
<div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500">
|
||
加载工作项详情中…
|
||
</div>
|
||
) : workItemDetailQuery.data ? (
|
||
<>
|
||
<div className="grid gap-3 md:grid-cols-3">
|
||
<div className="rounded-xl bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">决策记录</div>
|
||
<p className="mt-2 text-sm text-slate-700">{workItemDetailQuery.data.decision_records.length} 条</p>
|
||
</div>
|
||
<div className="rounded-xl bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">执行计划</div>
|
||
<p className="mt-2 text-sm text-slate-700">{workItemDetailQuery.data.plan_bundles.length} 条</p>
|
||
</div>
|
||
<div className="rounded-xl bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">回执记录</div>
|
||
<p className="mt-2 text-sm text-slate-700">{workItemDetailQuery.data.reply_receipts.length} 条</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">执行结果</div>
|
||
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-all text-xs leading-6 text-slate-700">
|
||
{formatJsonBlock(workItemDetailQuery.data.execution_result)}
|
||
</pre>
|
||
</div>
|
||
|
||
<div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">复盘摘要</div>
|
||
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-all text-xs leading-6 text-slate-700">
|
||
{formatJsonBlock(workItemDetailQuery.data.review_summary)}
|
||
</pre>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div className="rounded-xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
||
工作项详情加载失败，请稍后重试。
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setWorkItemDetailItem(null)}>
|
||
关闭
|
||
</Button>
|
||
{workItemDetailItem?.target_url && (
|
||
<Button
|
||
className="bg-blue-600 text-white hover:bg-blue-700"
|
||
onClick={() => {
|
||
void openTarget(workItemDetailItem, { forceDirect: true });
|
||
setWorkItemDetailItem(null);
|
||
}}
|
||
>
|
||
进入项目
|
||
</Button>
|
||
)}
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
<Dialog
|
||
open={Boolean(notificationDetailItem)}
|
||
onOpenChange={(open) => {
|
||
if (!open) setNotificationDetailItem(null);
|
||
}}
|
||
>
|
||
<DialogContent className="max-h-[90vh] w-[min(560px,calc(100vw-1rem))] max-w-[calc(100vw-1rem)] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle>{notificationDetailItem?.title || "通知详情"}</DialogTitle>
|
||
<DialogDescription>
|
||
{notificationDetailItem?.project_name || (notificationDetailItem?.project_id ? `项目 #${notificationDetailItem.project_id}` : "未绑定项目")}
|
||
{" · "}
|
||
{formatDetailTime(notificationDetailItem?.updated_at || notificationDetailItem?.created_at)}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
{notificationDetailItem && (
|
||
<div className="space-y-4">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Badge variant="outline" className={cn("text-[11px]", STATUS_STYLES[notificationDetailItem.display_kind])}>
|
||
{STATUS_LABELS[notificationDetailItem.display_kind]}
|
||
</Badge>
|
||
<span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
|
||
{toZhPriority(notificationDetailItem.priority)}
|
||
</span>
|
||
{notificationDetailItem.source_notification?.source && (
|
||
<span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
|
||
{notificationDetailItem.source_notification.source}
|
||
</span>
|
||
)}
|
||
{notificationDetailItem.source_work_item?.source_system && (
|
||
<span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
|
||
{notificationDetailItem.source_work_item.source_system}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">通知摘要</div>
|
||
<p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-slate-700">
|
||
{notificationDetailItem.source_notification?.content || notificationDetailItem.summary || "暂无摘要"}
|
||
</p>
|
||
</div>
|
||
|
||
{notificationDetailItem.ai_plan && (
|
||
<div className="rounded-xl bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">AI 已做/将做什么</div>
|
||
<p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-slate-700">{notificationDetailItem.ai_plan}</p>
|
||
</div>
|
||
)}
|
||
|
||
{notificationDetailItem.blocking_reason && (
|
||
<div className="rounded-xl border border-amber-100 bg-amber-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-amber-700">当前阻塞</div>
|
||
<p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-amber-900/80">{notificationDetailItem.blocking_reason}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid gap-3 md:grid-cols-2">
|
||
<div className="rounded-xl bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">当前阶段</div>
|
||
<p className="mt-2 text-sm text-slate-700">{notificationDetailItem.stage_text || STATUS_LABELS[notificationDetailItem.display_kind]}</p>
|
||
</div>
|
||
<div className="rounded-xl bg-slate-50 px-4 py-3">
|
||
<div className="text-xs font-semibold tracking-[0.18em] text-slate-500">建议下一步</div>
|
||
<p className="mt-2 text-sm text-slate-700">{notificationDetailItem.next_step_text || "先确认通知内容，再进入结果页处理。"}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setNotificationDetailItem(null)}>
|
||
关闭
|
||
</Button>
|
||
{notificationDetailItem?.target_url && (
|
||
<Button
|
||
className="bg-blue-600 text-white hover:bg-blue-700"
|
||
onClick={() => {
|
||
const currentItem = notificationDetailItem;
|
||
setNotificationDetailItem(null);
|
||
if (currentItem) {
|
||
void openTarget(currentItem, { forceDirect: true });
|
||
}
|
||
}}
|
||
>
|
||
进入结果页
|
||
</Button>
|
||
)}
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</>
|
||
);
|
||
}
|