feat: 任务工作区可配置跳转按钮(按钮管理) + 底部快捷跳转栏 + 目的树收起/空自动问答
- 新增「按钮管理」admin 页(/admin/task-buttons):按业务(rwfx/3qfx/xdfx)配置跳转按钮, 支持改名称/类型(外链·切换业务·目的树弹框)/目标/追加参数名(id·task_id)/任务id·行动id/启停/排序 - 跳转按钮从左侧栏移到工作区底部「快捷跳转」栏:红底白字、靠右、变大;rwfx 历史 4 按钮纳入配置 - 后端新增全局共享 store /api/task-buttons (table task_buttons,admin 整体替换) - xdfx 行动id/任务id:登录暂存原始行动id,按钮可选追加任一;id 参数名可自定义 - rwfx 清除记录移到「新建对话」下、去掉任务操作框;查询任务目的为空时自动发第一次问答 - 目的树面板默认收起;「弹框查看」抽成可复用 TaskPurposeDialog,可作为按钮配置到任意页面 - 文档(根/后端 CLAUDE.md) + 后端测试 tests/test_task_buttons.py Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
ecb79ce49c
commit
16afa9bcbb
22 files changed
+1341
-130
No files matched your search
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* 任务工作区可配置跳转按钮(按钮管理)API 客户端 + React Query hooks。
|
||||
*
|
||||
* 后端:`/api/task-buttons`(见 app/gateway/routers/task_buttons.py)。
|
||||
* 全局共享、无用户隔离;读对所有登录用户开放(工作区要用),写仅 admin(整体替换)。
|
||||
* snake_case ⇄ camelCase 在此边界收敛。见 [[task-buttons]]。
|
||||
*/
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import { apiFetch } from "@/core/api/fetch-client";
|
||||
import { getBackendBaseURL } from "@/core/config";
|
||||
import type {
|
||||
TaskBusiness,
|
||||
TaskButton,
|
||||
TaskButtonIdKind,
|
||||
TaskButtonLinkType,
|
||||
} from "@/core/auth/task-buttons";
|
||||
|
||||
const BASE = () => `${getBackendBaseURL()}/api/task-buttons`;
|
||||
|
||||
interface ServerButton {
|
||||
id: string;
|
||||
business: string;
|
||||
label: string;
|
||||
link_type: string;
|
||||
target: string;
|
||||
append_task_id: boolean;
|
||||
id_param: string;
|
||||
id_kind: string;
|
||||
enabled: boolean;
|
||||
sort_order: number;
|
||||
}
|
||||
|
||||
function toButton(s: ServerButton): TaskButton {
|
||||
return {
|
||||
id: s.id,
|
||||
business: (s.business as TaskBusiness) ?? "rwfx",
|
||||
label: s.label ?? "",
|
||||
linkType: (s.link_type as TaskButtonLinkType) ?? "url",
|
||||
target: s.target ?? "",
|
||||
appendTaskId: s.append_task_id ?? true,
|
||||
idParam: s.id_param || "id",
|
||||
idKind: (s.id_kind as TaskButtonIdKind) ?? "task",
|
||||
enabled: s.enabled ?? true,
|
||||
sortOrder: s.sort_order ?? 0,
|
||||
};
|
||||
}
|
||||
|
||||
function toBody(b: TaskButton): ServerButton {
|
||||
return {
|
||||
id: b.id,
|
||||
business: b.business,
|
||||
label: b.label,
|
||||
link_type: b.linkType,
|
||||
target: b.target,
|
||||
append_task_id: b.appendTaskId,
|
||||
id_param: b.idParam,
|
||||
id_kind: b.idKind,
|
||||
enabled: b.enabled,
|
||||
sort_order: b.sortOrder,
|
||||
};
|
||||
}
|
||||
|
||||
async function readJson<T>(res: Response, ctx: string): Promise<T> {
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => null as unknown);
|
||||
const detail =
|
||||
data && typeof data === "object" && "detail" in data
|
||||
? String((data as { detail: unknown }).detail)
|
||||
: `${ctx} failed (${res.status})`;
|
||||
throw new Error(detail);
|
||||
}
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
export async function listTaskButtons(): Promise<TaskButton[]> {
|
||||
const res = await apiFetch(BASE(), { method: "GET" });
|
||||
const data = await readJson<{ buttons: ServerButton[] }>(res, "list task buttons");
|
||||
return (data.buttons ?? []).map(toButton);
|
||||
}
|
||||
|
||||
export async function replaceTaskButtons(buttons: TaskButton[]): Promise<TaskButton[]> {
|
||||
const res = await apiFetch(BASE(), {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ buttons: buttons.map(toBody) }),
|
||||
});
|
||||
const data = await readJson<{ buttons: ServerButton[] }>(res, "save task buttons");
|
||||
return (data.buttons ?? []).map(toButton);
|
||||
}
|
||||
|
||||
// ── React Query hooks(工作区 + 管理页共用缓存) ────────────────────────────
|
||||
|
||||
const TASK_BUTTONS_KEY = "task-buttons";
|
||||
|
||||
export function useTaskButtons() {
|
||||
return useQuery({
|
||||
queryKey: [TASK_BUTTONS_KEY],
|
||||
queryFn: listTaskButtons,
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: 60_000,
|
||||
});
|
||||
}
|
||||
|
||||
export function useTaskButtonActions() {
|
||||
const queryClient = useQueryClient();
|
||||
return {
|
||||
save: useMutation({
|
||||
mutationFn: replaceTaskButtons,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: [TASK_BUTTONS_KEY] }),
|
||||
}),
|
||||
};
|
||||
}
|
||||
+132
-96
@@ -16,7 +16,7 @@
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
import { ArrowRight, ExternalLink, Loader2, MessageSquare, PlusSquare, Trash2 } from "lucide-react";
|
||||
import { ArrowRight, ExternalLink, Loader2, Maximize2, MessageSquare, PlusSquare, Trash2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -28,20 +28,27 @@ import {
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { deleteTaskPurpose, readTaskContext } from "@/core/auth/task-purpose";
|
||||
import { readCopTaskDetail } from "@/core/auth/task-deeplink";
|
||||
import {
|
||||
buildTreemapEditUrl,
|
||||
buildTreemapNextUrl,
|
||||
deleteTaskPurpose,
|
||||
readTaskContext,
|
||||
} from "@/core/auth/task-purpose";
|
||||
import { readCopTaskDetail, resolveTaskDeeplinkTarget } from "@/core/auth/task-deeplink";
|
||||
import { fetchTaskDeeplinkConfig } from "@/core/auth/task-deeplink-config";
|
||||
DEFAULT_TASK_DEEPLINK_CONFIG,
|
||||
fetchTaskDeeplinkConfig,
|
||||
type TaskDeeplinkConfig,
|
||||
} from "@/core/auth/task-deeplink-config";
|
||||
import {
|
||||
buttonsForBusiness,
|
||||
resolveTaskButtons,
|
||||
runTaskButton,
|
||||
type TaskBusiness,
|
||||
} from "@/core/auth/task-buttons";
|
||||
import { useTaskButtons } from "@/strategy-components/api/task-buttons";
|
||||
import { useTaskThreads } from "@/core/threads/use-task-threads";
|
||||
import { titleOfThread } from "@/core/threads/utils";
|
||||
import { desensitize } from "@/lib/desensitize";
|
||||
import { cn } from "@/lib/utils";
|
||||
import AgentChatPage from "@/pages/AgentChatPage";
|
||||
import { ChatRuntime } from "@/pages/WorkspaceRoutes";
|
||||
import { TaskPurposeDialog } from "@/strategy-components/components/task-components/TaskPurposePanel";
|
||||
|
||||
function useChatsBase(taskBase: string): { taskId: string; agentId: string; chatsBase: string } {
|
||||
const { agent_id } = useParams<{ agent_id: string }>();
|
||||
@@ -90,8 +97,72 @@ function parseThreadId(pathname: string, chatsBase: string): string | null {
|
||||
}
|
||||
|
||||
/**
|
||||
* 左侧任务对话列表:顶部「当前任务」卡片 +「新建对话」+(rwfx)跳转三情分析;下方对话列表(1:N)。
|
||||
* ``lite``(3qfx/xdfx)隐藏跳转按钮与底部任务操作面板。
|
||||
* 底部「快捷跳转」栏:横跨整个工作区底部,按配置顺序渲染该业务启用的跳转按钮(按钮管理里排序)。
|
||||
* 后端为准,整张表为空才回退种子默认;地址依赖实时深链配置,故把配置拉进 state。见 [[task-buttons]]。
|
||||
*/
|
||||
function TaskJumpBar({ business, taskId }: { business: TaskBusiness; taskId: string }) {
|
||||
const navigate = useNavigate();
|
||||
const [cfg, setCfg] = useState<TaskDeeplinkConfig>(() => DEFAULT_TASK_DEEPLINK_CONFIG);
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
void fetchTaskDeeplinkConfig().then((c) => {
|
||||
if (alive) setCfg(c);
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
const { data: storedButtons = [] } = useTaskButtons();
|
||||
const jumpButtons = useMemo(
|
||||
() => buttonsForBusiness(resolveTaskButtons(storedButtons, cfg), business),
|
||||
[storedButtons, cfg, business],
|
||||
);
|
||||
|
||||
// 目的树弹框(purpose 类型按钮)由组件层打开。
|
||||
const [purposeOpen, setPurposeOpen] = useState(false);
|
||||
|
||||
if (jumpButtons.length === 0) return null;
|
||||
|
||||
const handleRun = (btn: (typeof jumpButtons)[number]) => {
|
||||
if (btn.linkType === "purpose") {
|
||||
setPurposeOpen(true);
|
||||
return;
|
||||
}
|
||||
void runTaskButton(btn, {
|
||||
taskId,
|
||||
actionId: readTaskContext()?.actionId,
|
||||
navigate,
|
||||
onError: (m) => toast.error(m),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-border/70 bg-background/90 flex shrink-0 flex-wrap items-center justify-end gap-3 border-t px-5 py-3 backdrop-blur-xl dark:border-[#1b477e]/70 dark:bg-[#061b35]/85">
|
||||
{jumpButtons.map((btn) => (
|
||||
<Button
|
||||
key={btn.id}
|
||||
className="h-11 gap-2 border-transparent bg-[#cf1322] px-6 text-base text-white shadow-sm hover:bg-[#a30f1b]"
|
||||
onClick={() => handleRun(btn)}
|
||||
title={btn.label}
|
||||
>
|
||||
<span className="truncate">{btn.label}</span>
|
||||
{btn.linkType === "url" ? (
|
||||
<ExternalLink className="h-5 w-5 shrink-0" />
|
||||
) : btn.linkType === "purpose" ? (
|
||||
<Maximize2 className="h-5 w-5 shrink-0" />
|
||||
) : (
|
||||
<ArrowRight className="h-5 w-5 shrink-0" />
|
||||
)}
|
||||
</Button>
|
||||
))}
|
||||
<TaskPurposeDialog taskId={taskId} open={purposeOpen} onOpenChange={setPurposeOpen} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 左侧任务对话列表:顶部「当前任务」卡片 +「新建对话」;下方对话列表(1:N)。
|
||||
* 跳转按钮已移到工作区底部「快捷跳转」栏(见 ``TaskJumpBar``)。
|
||||
*/
|
||||
function TaskConversationsList({
|
||||
taskId,
|
||||
@@ -109,22 +180,6 @@ function TaskConversationsList({
|
||||
const { threads, isLoading } = useTaskThreads(taskId, agentId);
|
||||
const currentThreadId = useMemo(() => parseThreadId(pathname, chatsBase), [pathname, chatsBase]);
|
||||
|
||||
// rwfx:带当前任务(同一 taskId)跳到三情分析工作区。复用深链解析(会按 3Q 业务码重绑任务上下文)。
|
||||
const handleJumpToSentiment = async () => {
|
||||
const detail = readCopTaskDetail();
|
||||
if (!detail || !taskId) {
|
||||
toast.error("缺少任务信息,无法跳转三情分析");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const target = await resolveTaskDeeplinkTarget("3qfx", detail, taskId);
|
||||
if (target) navigate(target.path, { state: target.state });
|
||||
else toast.error("未配置三情分析智能体");
|
||||
} catch {
|
||||
toast.error("跳转失败,请稍后再试");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-background/85 border-border/70 flex w-64 shrink-0 flex-col border-r shadow-[12px_0_30px_-30px_rgba(15,23,42,0.45)] backdrop-blur-xl dark:border-[#1b477e]/70 dark:bg-[#061b35]/82">
|
||||
<div className="border-border/70 border-b p-3 dark:border-[#1b477e]/70">
|
||||
@@ -144,17 +199,7 @@ function TaskConversationsList({
|
||||
>
|
||||
<PlusSquare className="h-4 w-4" /> 新建对话
|
||||
</Button>
|
||||
{!lite && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="mt-2 h-9 w-full border-[var(--card-border)] bg-background/80 text-[var(--color-main)] hover:bg-[var(--bg-color)] hover:text-[var(--color-main)] dark:border-[#2b8ffe]/50 dark:bg-[#0b2546]/80 dark:text-[#bde9ff] dark:hover:bg-[#10375f]"
|
||||
onClick={handleJumpToSentiment}
|
||||
title="带当前任务跳转到三情分析"
|
||||
>
|
||||
切换到三情分析 <ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
{!lite && <TaskClearButton taskId={taskId} />}
|
||||
</div>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-2">
|
||||
@@ -191,24 +236,18 @@ function TaskConversationsList({
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
{!lite && <TaskActionsPanel taskId={taskId} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 左侧任务栏底部操作区:编辑 / 下一步 / 清除任务记录。
|
||||
* 跟随任务对话面板布局,不再覆盖右侧聊天输入框。
|
||||
* 「清除记录」按钮(rwfx):放在「新建对话」下面,仅调 delete 接口清空 B 系统目的策划数据
|
||||
* (聊天对话保留)。带二次确认弹框。
|
||||
*/
|
||||
function TaskActionsPanel({ taskId }: { taskId: string }) {
|
||||
function TaskClearButton({ taskId }: { taskId: string }) {
|
||||
const [clearOpen, setClearOpen] = useState(false);
|
||||
const [clearing, setClearing] = useState(false);
|
||||
|
||||
const openExternal = (url: string, label: string) => {
|
||||
if (url) window.open(url, "_blank", "noopener,noreferrer");
|
||||
else toast.error(`未配置${label}地址`);
|
||||
};
|
||||
|
||||
const handleClear = async () => {
|
||||
setClearing(true);
|
||||
try {
|
||||
@@ -225,44 +264,16 @@ function TaskActionsPanel({ taskId }: { taskId: string }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="border-border/70 shrink-0 border-t p-3 dark:border-[#1b477e]/70">
|
||||
<div className="rounded-md border border-[var(--card-border)] bg-background/80 p-2 shadow-sm dark:border-[#2b8ffe]/45 dark:bg-[#0b2546]/72">
|
||||
<div className="text-muted-foreground mb-2 px-1 text-xs font-medium">
|
||||
任务操作
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-8 border-[var(--card-border)] bg-background/80 text-[var(--color-main)] hover:bg-[var(--bg-color)] hover:text-[var(--color-main)] dark:border-[#2b8ffe]/50 dark:bg-[#0b2546]/80 dark:text-[#bde9ff] dark:hover:bg-[#10375f]"
|
||||
onClick={() => openExternal(buildTreemapEditUrl(taskId), "编辑")}
|
||||
disabled={!taskId}
|
||||
title="编辑任务"
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" /> 编辑
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-8 bg-[var(--color-main)] text-white shadow-[0_8px_18px_-12px_var(--color-main)] hover:bg-[var(--brand-950)]"
|
||||
onClick={() => openExternal(buildTreemapNextUrl(taskId), "下一步")}
|
||||
disabled={!taskId}
|
||||
title="进入下一步"
|
||||
>
|
||||
下一步 <ArrowRight className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="col-span-2 h-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive dark:text-[#ccd2da] dark:hover:bg-[#5c0011]/35"
|
||||
onClick={() => setClearOpen(true)}
|
||||
disabled={!taskId}
|
||||
title="清除任务记录"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" /> 清除记录
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-muted-foreground hover:bg-destructive/10 hover:text-destructive dark:text-[#ccd2da] dark:hover:bg-[#5c0011]/35 mt-2 h-9 w-full"
|
||||
onClick={() => setClearOpen(true)}
|
||||
disabled={!taskId}
|
||||
title="清除任务记录"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" /> 清除记录
|
||||
</Button>
|
||||
|
||||
<Dialog open={clearOpen} onOpenChange={(o) => !clearing && setClearOpen(o)}>
|
||||
<DialogContent>
|
||||
@@ -290,18 +301,30 @@ function TaskActionsPanel({ taskId }: { taskId: string }) {
|
||||
* 任务工作区布局:左列表 + 右 Outlet。
|
||||
* ``lite``(3qfx/xdfx)= 精简版:左列表无跳转按钮、无底部任务操作面板。
|
||||
*/
|
||||
export function TaskFxWorkspace({ taskBase, lite }: { taskBase: string; lite?: boolean }) {
|
||||
export function TaskFxWorkspace({
|
||||
taskBase,
|
||||
business,
|
||||
lite,
|
||||
}: {
|
||||
taskBase: string;
|
||||
business: TaskBusiness;
|
||||
lite?: boolean;
|
||||
}) {
|
||||
const { taskId, agentId, chatsBase } = useChatsBase(taskBase);
|
||||
// 预拉配置,保证(rwfx)「编辑/下一步」的同步 URL 构造能读到缓存。
|
||||
useEffect(() => {
|
||||
void fetchTaskDeeplinkConfig();
|
||||
}, []);
|
||||
return (
|
||||
<div className="flex size-full min-h-0 overflow-hidden">
|
||||
<TaskConversationsList taskId={taskId} agentId={agentId} chatsBase={chatsBase} lite={lite} />
|
||||
<div className="relative min-h-0 min-w-0 flex-1">
|
||||
<Outlet />
|
||||
<div className="flex size-full min-h-0 flex-col overflow-hidden">
|
||||
<div className="flex min-h-0 flex-1 overflow-hidden">
|
||||
<TaskConversationsList
|
||||
taskId={taskId}
|
||||
agentId={agentId}
|
||||
chatsBase={chatsBase}
|
||||
lite={lite}
|
||||
/>
|
||||
<div className="relative min-h-0 min-w-0 flex-1">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
<TaskJumpBar business={business} taskId={taskId} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -328,12 +351,25 @@ export function TaskFxIndexResolver({ taskBase }: { taskBase: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
/** 右侧对话宿主(rwfx):AgentChatPage taskGate → 新建对话顶部展示目的树闸门面板 + 老对话停止。 */
|
||||
export function TaskFxChat({ taskBase }: { taskBase: string }) {
|
||||
/**
|
||||
* 右侧对话宿主(rwfx / xdfx):AgentChatPage taskGate → 新建对话顶部展示目的树闸门面板 + 老对话停止。
|
||||
* ``autoStartWhenPurposeEmpty``(rwfx):查询任务目的为空数据时自动开始第一次问答。
|
||||
*/
|
||||
export function TaskFxChat({
|
||||
taskBase,
|
||||
autoStartWhenPurposeEmpty,
|
||||
}: {
|
||||
taskBase: string;
|
||||
autoStartWhenPurposeEmpty?: boolean;
|
||||
}) {
|
||||
const { agent_id } = useParams<{ agent_id: string }>();
|
||||
return (
|
||||
<ChatRuntime>
|
||||
<AgentChatPage chatBasePath={`${taskBase}/agent/${agent_id}/chats`} taskGate />
|
||||
<AgentChatPage
|
||||
chatBasePath={`${taskBase}/agent/${agent_id}/chats`}
|
||||
taskGate
|
||||
autoStartWhenPurposeEmpty={autoStartWhenPurposeEmpty}
|
||||
/>
|
||||
</ChatRuntime>
|
||||
);
|
||||
}
|
||||
|
||||
+87
-24
@@ -10,8 +10,8 @@
|
||||
* onStart 由父组件(AgentChatPage 闸门态)实现:发出开场消息、开始问答。
|
||||
*/
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { ExternalLink, Loader2, Maximize2 } from "lucide-react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { ChevronDown, ChevronRight, Loader2, Maximize2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -24,7 +24,6 @@ import {
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
buildDetail3qUrl,
|
||||
deleteTaskPurpose,
|
||||
fetchTaskPurposeDetail,
|
||||
flattenPurposeTree,
|
||||
@@ -34,7 +33,7 @@ import {
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/** 目的树表格:拍平成行,列数随数据自适应;层级缺失补空、字段变动不崩。 */
|
||||
function PurposeTable({ tree, className }: { tree: PurposeTreeNode[]; className?: string }) {
|
||||
export function PurposeTable({ tree, className }: { tree: PurposeTreeNode[]; className?: string }) {
|
||||
const rows = useMemo(() => flattenPurposeTree(tree), [tree]);
|
||||
const headers = useMemo(() => {
|
||||
const maxDepth = rows.reduce((m, r) => Math.max(m, r.length), 0);
|
||||
@@ -91,26 +90,86 @@ function PurposeTable({ tree, className }: { tree: PurposeTreeNode[]; className?
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 独立的「任务目的弹框」:按需拉取目的树并放大展示。供底部「快捷跳转」栏的 ``purpose`` 类型
|
||||
* 按钮复用(任意页面可配置「弹框查看」)。打开时才拉取。
|
||||
*/
|
||||
export function TaskPurposeDialog({
|
||||
taskId,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
taskId: string;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [result, setResult] = useState<TaskPurposeResult | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
fetchTaskPurposeDetail(taskId)
|
||||
.then((r) => !cancelled && setResult(r))
|
||||
.catch(() => !cancelled && setResult({ tree: [], hasData: false }))
|
||||
.finally(() => !cancelled && setLoading(false));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [open, taskId]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="w-[90vw] !max-w-[90vw] sm:!max-w-[90vw]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>任务目的(任务 {taskId})</DialogTitle>
|
||||
</DialogHeader>
|
||||
{loading ? (
|
||||
<div className="text-muted-foreground flex items-center gap-2 py-6 text-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" /> 正在查询任务目的…
|
||||
</div>
|
||||
) : (
|
||||
<PurposeTable tree={result?.tree ?? []} className="max-h-[70vh] rounded border border-border/60" />
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export function TaskPurposePanel({
|
||||
taskId,
|
||||
onStart,
|
||||
autoStartWhenEmpty,
|
||||
}: {
|
||||
taskId: string;
|
||||
/** 闸门通过(无数据 / 覆盖成功),开始问答。 */
|
||||
onStart: () => void;
|
||||
/** rwfx:查询任务目的为空数据时,自动开始第一次问答(跳过手动点「开始问答」)。 */
|
||||
autoStartWhenEmpty?: boolean;
|
||||
}) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [result, setResult] = useState<TaskPurposeResult | null>(null);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [working, setWorking] = useState(false);
|
||||
const [zoomOpen, setZoomOpen] = useState(false);
|
||||
// 任务目的默认收起(不展开),点标题切换。
|
||||
const [collapsed, setCollapsed] = useState(true);
|
||||
// rwfx 空数据自动开始:防止重复触发。
|
||||
const autoStartedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
fetchTaskPurposeDetail(taskId)
|
||||
.then((r) => {
|
||||
if (!cancelled) setResult(r);
|
||||
if (cancelled) return;
|
||||
setResult(r);
|
||||
// 查询任务目的为空数据 → 默认直接开始第一次问答(跳过手动「开始问答」)。
|
||||
if (autoStartWhenEmpty && !r.hasData && !autoStartedRef.current) {
|
||||
autoStartedRef.current = true;
|
||||
onStart();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setResult({ tree: [], hasData: false });
|
||||
@@ -121,6 +180,8 @@ export function TaskPurposePanel({
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
// onStart/autoStartWhenEmpty 在一次新建会话内稳定;仅按 taskId 重新拉取。
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [taskId]);
|
||||
|
||||
const handleStart = () => {
|
||||
@@ -152,37 +213,39 @@ export function TaskPurposePanel({
|
||||
return (
|
||||
<div className="border-border/70 bg-card/60 shrink-0 border-b px-4 py-3">
|
||||
<div className="mb-2 flex items-center justify-between gap-2">
|
||||
<span className="text-sm font-medium">任务目的(任务 {taskId})</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCollapsed((c) => !c)}
|
||||
className="flex items-center gap-1 text-sm font-medium hover:text-[var(--color-main)]"
|
||||
title={collapsed ? "展开任务目的" : "收起任务目的"}
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="h-4 w-4 shrink-0" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 shrink-0" />
|
||||
)}
|
||||
任务目的(任务 {taskId})
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
{hasTree && (
|
||||
<Button size="sm" variant="outline" onClick={() => setZoomOpen(true)}>
|
||||
<Maximize2 className="h-3.5 w-3.5" /> 弹框查看
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const url = buildDetail3qUrl(taskId);
|
||||
if (url) window.open(url, "_blank", "noopener,noreferrer");
|
||||
else toast.error("未配置3q详情地址");
|
||||
}}
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" /> 3q详情
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleStart} disabled={loading || working}>
|
||||
{result?.hasData ? "覆盖并开始问答" : "开始问答"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-muted-foreground flex items-center gap-2 py-2 text-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" /> 正在查询任务目的…
|
||||
</div>
|
||||
) : (
|
||||
<PurposeTable tree={result?.tree ?? []} className="max-h-48 rounded border border-border/60" />
|
||||
)}
|
||||
{!collapsed &&
|
||||
(loading ? (
|
||||
<div className="text-muted-foreground flex items-center gap-2 py-2 text-sm">
|
||||
<Loader2 className="h-4 w-4 animate-spin" /> 正在查询任务目的…
|
||||
</div>
|
||||
) : (
|
||||
<PurposeTable tree={result?.tree ?? []} className="max-h-48 rounded border border-border/60" />
|
||||
))}
|
||||
|
||||
{/* 弹框查看:放大显示完整表格 */}
|
||||
<Dialog open={zoomOpen} onOpenChange={setZoomOpen}>
|
||||
|
||||
Reference in new issue
Block a user