+ + 阶段 {stageIdx + 1} + {isParallel ? ( + 并行 ×{seats.length} + ) : ( + 串行 + )} + + onStageReorder(-1)} + title="上移" + type="button" + > + + + onStageReorder(1)} + title="下移" + type="button" + > + + + + + + + + onGoalChange(String(value ?? ""))} + /> + <div className="mat-stage-seats" ref={setNodeRef}> + {seats.length === 0 ? ( + <div className="mat-stage-seat-empty">空阶段 —— 把左侧智能体拖到此处，或删除该阶段。</div> + ) : ( + <SortableContext items={seatItemIds} strategy={verticalListSortingStrategy}> + {seats.map((seat, index) => ( + <SeatStrip + globalIndex={startIndex + index} + isLastStage={isLastStage} + isFirstStage={isFirstStage} + key={seat.agent_id} + onDetail={() => onSeatDetail(seat)} + onMergeDown={() => onMergeSeat(seat.agent_id, stageIdx + 1)} + onMergeUp={() => onMergeSeat(seat.agent_id, stageIdx - 1)} + onRemove={() => onRemoveSeat(seat.agent_id)} + onSplit={() => onSplitSeat(seat.agent_id)} + seat={seat} + /> + ))} + </SortableContext> + )} + </div> + </article> + ); +} + +// ── 「新建阶段」落区（点击新增 / 拖席位到此独立成最后阶段）──────────────── + +function NewStageDropZone({ + hasEmptyStage, + onAddStage, +}: { + hasEmptyStage: boolean; + onAddStage: () => void; +}) { + const { setNodeRef, isOver } = useDroppable({ id: NEWSTAGE_DROPPABLE_ID }); + return ( + <button + className={`mat-stage-dropzone${isOver ? " is-over" : ""}`} + disabled={hasEmptyStage} + onClick={onAddStage} + ref={setNodeRef} + title={hasEmptyStage ? "已有空阶段，先填充它" : "新建一个串在最后的阶段"} + type="button" + > + <Plus size={15} /> + 新建阶段（串在最后） · 或把席位拖到此处独立成阶段 + </button> + ); +} + +// ── 页面 ────────────────────────────────────────────────────────────────── + +export default function TaskEditPage({ + mode, + taskId, +}: { + mode: "create" | "edit"; + taskId: string | null; +}) { + const navigate = useNavigate(); + const { tasks, isLoading: tasksLoading } = useMultiAgentTasks(); + const actions = useMultiAgentTaskActions(); + const [poolSearch, setPoolSearch] = useState(""); + const { agents, isLoading: agentsLoading } = useAgents({ + search: poolSearch.trim() || undefined, + }); + + const [name, setName] = useState(""); + const [description, setDescription] = useState(""); + const [schedule, setSchedule] = useState<ScheduleConfig>(defaultScheduleConfig()); + const [enabled, setEnabled] = useState(true); + const [prompt, setPrompt] = useState(""); + const [coordinatorPrompt, setCoordinatorPrompt] = useState(""); + const [stageGroups, setStageGroups] = useState<StageGroups>([]); + const [initialized, setInitialized] = useState(false); + + const [settingsOpen, setSettingsOpen] = useState(false); + const [confirmOpen, setConfirmOpen] = useState(false); + const [saving, setSaving] = useState(false); + const [activeDrag, setActiveDrag] = useState<ActiveDrag>(null); + const [detailTarget, setDetailTarget] = useState<AgentDetailTarget | null>(null); + + const editingTask = useMemo( + () => (mode === "edit" ? (tasks.find((task) => task.id === taskId) ?? null) : null), + [mode, taskId, tasks], + ); + + useEffect(() => { + if (initialized || mode === "create") { + setInitialized(true); + return; + } + if (!tasksLoading && taskId) { + if (editingTask) { + const draft = draftFromTask(editingTask); + setName(draft.name); + setDescription(draft.description); + setSchedule(draft.schedule); + setEnabled(draft.enabled); + setPrompt(draft.prompt); + setCoordinatorPrompt(draft.coordinatorPrompt); + setStageGroups(draft.stageGroups); + } + setInitialized(true); + } + }, [editingTask, initialized, mode, taskId, tasksLoading]); + + const sensors = useSensors( + useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), + ); + + const usedAgentIds = useMemo( + () => new Set(stageGroups.flatMap((group) => group.seats.map((seat) => seat.agent_id))), + [stageGroups], + ); + const seatCount = useMemo(() => countSeats(stageGroups), [stageGroups]); + const hasEmptyStage = stageGroups.some((group) => group.seats.length === 0); + + const backToList = useCallback(() => { + navigate(`${OFFICIAL_DEERFLOW_ROUTE_PREFIX}/workspace/multi-agent-tasks`); + }, [navigate]); + + // ── 编排操作（全部复用 chain-stages 纯函数，agent_id 定位）─────────────── + const addAgentAsStage = useCallback((agent: Agent) => { + if (seatCount >= MAX_SEATS) { + toast.warning(`编排最多 ${MAX_SEATS} 个智能体`); + return; + } + setStageGroups((prev) => addSeatAsNewStage(prev, seatFromAgent(agent))); + }, [seatCount]); + + const onDragStart = useCallback((event: DragStartEvent) => { + const id = String(event.active.id); + const agentId = id.startsWith(POOL_PREFIX) + ? id.slice(POOL_PREFIX.length) + : id.startsWith(SEAT_PREFIX) + ? id.slice(SEAT_PREFIX.length) + : null; + if (!agentId) return; + const seatName = + agents.find((agent) => agent.id === agentId)?.name ?? + stageGroups + .flatMap((group) => group.seats as MatSeat[]) + .find((seat) => seat.agent_id === agentId)?.name ?? + agentId; + setActiveDrag({ name: seatName }); + }, [agents, stageGroups]); + + const onDragEnd = useCallback( + (event: DragEndEvent) => { + setActiveDrag(null); + const activeId = String(event.active.id); + const overId = event.over ? String(event.over.id) : null; + if (!overId) return; + + let targetStage = -1; + let atIndex: number | undefined; + if (overId === NEWSTAGE_DROPPABLE_ID) { + targetStage = -1; + } else if (overId.startsWith(STAGE_PREFIX)) { + targetStage = Number(overId.slice(STAGE_PREFIX.length)); + } else if (overId.startsWith(SEAT_PREFIX)) { + const overAgent = overId.slice(SEAT_PREFIX.length); + targetStage = findStageIndexOfSeat(stageGroups, overAgent); + atIndex = stageGroups[targetStage]?.seats.findIndex( + (seat) => seat.agent_id === overAgent, + ); + } + + const toNewStage = overId === NEWSTAGE_DROPPABLE_ID; + + if (activeId.startsWith(POOL_PREFIX)) { + const agentId = activeId.slice(POOL_PREFIX.length); + if (usedAgentIds.has(agentId)) return; + const agent = agents.find((candidate) => candidate.id === agentId); + if (!agent || seatCount >= MAX_SEATS) return; + const seat = seatFromAgent(agent); + setStageGroups((prev) => + toNewStage || targetStage < 0 + ? addSeatAsNewStage(prev, seat) + : addSeatToStage(prev, seat, targetStage, atIndex), + ); + return; + } + + if (activeId.startsWith(SEAT_PREFIX)) { + const agentId = activeId.slice(SEAT_PREFIX.length); + setStageGroups((prev) => { + if (toNewStage) { + const withEmpty = addEmptyStage(prev); + return moveSeatToStage(withEmpty, agentId, withEmpty.length - 1); + } + if (targetStage < 0) return prev; + return moveSeatToStage(prev, agentId, targetStage, atIndex); + }); + } + }, + [agents, seatCount, stageGroups, usedAgentIds], + ); + + // ── 保存：校验 → 确认弹窗 → 提交 ──────────────────────────────────────── + const previewGroups = stageGroups.filter((group) => group.seats.length > 0); + const previewStages = previewGroups.map((group) => + (group.seats as MatSeat[]).map((seat) => seat.agent_id), + ); + const previewSeats = groupsToPayloadSeats(stageGroups); + + const tryOpenConfirm = () => { + if (!name.trim()) { + toast.warning("请填写任务名称"); + return; + } + if (seatCount < MIN_SEATS) { + toast.warning(`编排至少需要 ${MIN_SEATS} 个智能体`); + return; + } + if (hasEmptyStage) { + toast.warning("还有空阶段，请填充或删除"); + return; + } + if (!prompt.trim()) { + setSettingsOpen(true); + toast.warning("请先在「执行设置」中填写任务指令"); + return; + } + setConfirmOpen(true); + }; + + const submitTask = async () => { + setSaving(true); + try { + // 填了总控提示也强制落显式分层（该提示仅分层模式注入），与业务链条语义一致。 + const forceExplicit = coordinatorPrompt.trim().length > 0; + const payload: MatTaskPayload = { + name: name.trim(), + description: description.trim() || undefined, + prompt: prompt.trim(), + coordinator_prompt: coordinatorPrompt.trim() || undefined, + cron_expr: buildCron(schedule), + timezone: editingTask?.timezone || DEFAULT_TIMEZONE, + enabled, + seats: previewSeats, + stages: stageGroupsToStagePayload(stageGroups, forceExplicit), + stage_goals: stageGroupsToStageGoals(stageGroups, forceExplicit), + }; + if (mode === "edit" && taskId) { + await actions.update.mutateAsync({ id: taskId, payload }); + toast.success("任务已更新"); + } else { + await actions.create.mutateAsync(payload); + toast.success("任务已创建"); + } + setConfirmOpen(false); + backToList(); + } catch { + toast.error("保存失败，请重试"); + } finally { + setSaving(false); + } + }; + + if (mode === "edit" && !tasksLoading && initialized && !editingTask) { + return ( + <section className="mat-edit-page"> + <div className="mat-state mat-state--empty"> + <h3>任务不存在或已被删除</h3> + <Button theme="primary" onClick={backToList}> + 返回任务列表 + </Button> + </div> + </section> + ); + } + + let seatCursor = 0; + const settingsSummary = `${describeScheduleConfig(schedule)} · ${enabled ? "已启用" : "已暂停"}`; + + return ( + <section className="mat-edit-page"> + <header className="mat-edit-header"> + <button aria-label="返回任务列表" className="mat-edit-back" onClick={backToList} type="button"> + <ArrowLeft size={18} /> + </button> + <div className="mat-edit-heading"> + <h1>{mode === "edit" ? `编辑：${editingTask?.name ?? "多智能体定时任务"}` : "新建多智能体定时任务"}</h1> + <p>同阶段并行执行 · 阶段之间串行执行；拖拽或点击左侧候选智能体加入编排</p> + </div> + <Button + variant="outline" + onClick={() => setSettingsOpen(true)} + title="执行频率 / 任务指令 / 总控提示 / 启用" + > + <Settings2 aria-hidden="true" size={15} /> + 执行设置 + <span className="mat-settings-summary">{settingsSummary}</span> + </Button> + <Button theme="primary" onClick={tryOpenConfirm}> + <Save aria-hidden="true" size={15} /> + 保存任务 + </Button> + </header> + + <div className="mat-edit-formbar"> + <label className="mat-formbar-field"> + <span className="mat-formbar-label"> + 任务名称<i>*</i> + </span> + <Input + clearable + maxlength={40} + placeholder="例如：每日舆情早报" + value={name} + onChange={(value) => setName(String(value ?? ""))} + /> + </label> + <label className="mat-formbar-field mat-formbar-field--wide"> + <span className="mat-formbar-label">任务描述</span> + <Input + clearable + maxlength={200} + placeholder="一句话说明这个编排任务要达成什么（可选）" + value={description} + onChange={(value) => setDescription(String(value ?? ""))} + /> + </label> + </div> + + <div className="mat-edit-formbar mat-edit-formbar--area"> + <span className="mat-formbar-label">总控提示</span> + <Textarea + autosize={{ minRows: 1, maxRows: 4 }} + className="mat-formbar-textarea" + maxlength={1000} + placeholder="写给总控（协调者）的编排要求，例如各阶段如何衔接、产出格式约束等（可选）" + value={coordinatorPrompt} + onChange={(value) => setCoordinatorPrompt(String(value ?? ""))} + /> + </div> + + <div className="mat-edit-body"> + <section className="mat-edit-card"> + <DndContext + collisionDetection={closestCenter} + onDragEnd={onDragEnd} + onDragStart={onDragStart} + sensors={sensors} + > + <div className="mat-edit-orchestra"> + <aside className="mat-pool"> + <header className="mat-pool-head"> + <span>候选智能体</span> + <em> + {seatCount}/{MAX_SEATS} 已编排 · {agents.length} 个可选 + </em> + </header> + <div className="mat-pool-search"> + <Search aria-hidden="true" size={15} /> + <input + onChange={(event) => setPoolSearch(event.target.value)} + placeholder="搜索智能体" + value={poolSearch} + /> + </div> + <div className="mat-pool-list"> + {agentsLoading ? ( + <p className="mat-pool-tip">正在加载智能体…</p> + ) : agents.length ? ( + agents.map((agent) => ( + <PoolAgentCard + agent={agent} + key={agent.id} + onAdd={() => addAgentAsStage(agent)} + onShowDetail={() => + setDetailTarget({ + agentId: agent.id, + fallbackName: agent.name, + fallbackDescription: agent.description ?? undefined, + }) + } + used={usedAgentIds.has(agent.id)} + /> + )) + ) : ( + <p className="mat-pool-tip">没有匹配的智能体</p> + )} + </div> + </aside> + + <div className="mat-stage-editor"> + <div className="mat-stage-list"> + {stageGroups.map((group, stageIdx) => { + const startIndex = seatCursor; + seatCursor += (group.seats as MatSeat[]).length; + return ( + <StageBox + group={group} + key={`stage-box-${stageIdx}`} + onGoalChange={(goal) => + setStageGroups((prev) => setStageGoal(prev, stageIdx, goal)) + } + onMergeSeat={(agentId, target) => + setStageGroups((prev) => moveSeatToStage(prev, agentId, target)) + } + onRemoveSeat={(agentId) => + setStageGroups((prev) => removeSeat(prev, agentId)) + } + onSeatDetail={(seat) => + setDetailTarget({ + agentId: seat.agent_id, + fallbackName: seat.name, + fallbackDescription: seat.description, + }) + } + onSplitSeat={(agentId) => + setStageGroups((prev) => splitSeatToNewStage(prev, agentId)) + } + onStageDelete={() => + setStageGroups((prev) => deleteStage(prev, stageIdx)) + } + onStageReorder={(dir) => + setStageGroups((prev) => moveStage(prev, stageIdx, dir)) + } + stageCount={stageGroups.length} + stageIdx={stageIdx} + startIndex={startIndex} + /> + ); + })} + <NewStageDropZone + hasEmptyStage={hasEmptyStage} + onAddStage={() => setStageGroups((prev) => addEmptyStage(prev))} + /> + {!stageGroups.length && ( + <p className="mat-stage-empty"> + 从左侧点击或拖拽候选智能体加入编排，至少 {MIN_SEATS} 个。 + </p> + )} + </div> + </div> + </div> + + <DragOverlay> + {activeDrag ? ( + <div className="mat-drag-overlay"> + <GripVertical size={14} /> + {activeDrag.name} + </div> + ) : null} + </DragOverlay> + </DndContext> + </section> + </div> + + <Dialog + className="mat-settings-dialog" + closeBtn + closeOnOverlayClick={false} + destroyOnClose + footer={ + <div className="mat-confirm-footer"> + <Button variant="outline" onClick={() => setSettingsOpen(false)}> + 取消 + </Button> + <Button theme="primary" onClick={() => setSettingsOpen(false)}> + 确定 + </Button> + </div> + } + header="执行设置" + placement="top" + visible={settingsOpen} + width={620} + onClose={() => setSettingsOpen(false)} + > + <div className="mat-settings"> + <div className="mat-field"> + <span className="mat-field-label">执行频率</span> + <SchedulePicker value={schedule} onChange={setSchedule} /> + </div> + <label className="mat-field"> + <span className="mat-field-label"> + 任务指令<i>*</i> + </span> + <Textarea + autosize={{ minRows: 4, maxRows: 8 }} + maxlength={2000} + placeholder="描述每次定时执行要让智能体编队完成的事情，例如：汇总过去 24 小时重点舆情并生成早报…" + value={prompt} + onChange={(value) => setPrompt(String(value ?? ""))} + /> + </label> + <div className="mat-field mat-field--switch"> + <span className="mat-field-label">保存后立即启用</span> + <Switch value={enabled} onChange={(value) => setEnabled(!!value)} /> + </div> + </div> + </Dialog> + + <Dialog + className="mat-confirm-dialog" + closeBtn + closeOnOverlayClick={false} + destroyOnClose + footer={ + <div className="mat-confirm-footer"> + <Button variant="outline" onClick={() => setConfirmOpen(false)}> + 再改改 + </Button> + <Button loading={saving} theme="primary" onClick={() => void submitTask()}> + 确认保存 + </Button> + </div> + } + header="确认保存任务" + placement="top" + visible={confirmOpen} + width={720} + onClose={() => setConfirmOpen(false)} + > + <div className="mat-confirm"> + <div className="mat-confirm-grid"> + <div> + <span>任务名称</span> + <strong>{name.trim() || "—"}</strong> + </div> + <div> + <span>执行频率</span> + <strong>{describeCron(buildCron(schedule))}</strong> + </div> + <div> + <span>启用状态</span> + <strong>{enabled ? "启用" : "暂停"}</strong> + </div> + <div> + <span>智能体 / 阶段</span> + <strong> + {previewSeats.length} 个智能体 · {previewStages.length} 个阶段 + </strong> + </div> + </div> + <div className="mat-confirm-flow"> + <AgentFlow + seats={previewSeats} + showGoals + size="sm" + stageGoals={previewGroups.map((group) => (group.goal ?? "").trim() || null)} + stages={previewStages} + /> + </div> + <p className="mat-confirm-legend"> + <span> + <i className="mat-flow-mode is-parallel" style={{ cursor: "default" }} /> 并行：同阶段智能体同时执行 + </span> + <span> + <i className="mat-flow-mode is-serial" style={{ cursor: "default" }} /> 串行：阶段之间依次执行 + </span> + </p> + {prompt.trim() && ( + <div className="mat-confirm-prompt"> + <span>任务指令</span> + <p>{prompt.trim()}</p> + </div> + )} + </div> + </Dialog> + + <AgentDetailDrawer + target={detailTarget} + onClose={() => setDetailTarget(null)} + /> + </section> + ); +} diff --git a/frontend-web/src/pages/official-multi-agent-tasks/components/AgentDetailDrawer.tsx b/frontend-web/src/pages/official-multi-agent-tasks/components/AgentDetailDrawer.tsx new file mode 100644 index 00000000..3ea80783 --- /dev/null +++ b/frontend-web/src/pages/official-multi-agent-tasks/components/AgentDetailDrawer.tsx @@ -0,0 +1,164 @@ +/** + * 智能体详情抽屉：候选池卡片 / 编排席位条「查看详情」共用。 + * 后端查不到（本地演示席位）时回退到编排里保存的名称/描述快照。 + */ + +import { Bot } from "lucide-react"; +import { Drawer, Tag } from "tdesign-react"; + +import { useAgent } from "@/core/agents"; + +export interface AgentDetailTarget { + agentId: string; + fallbackName?: string; + fallbackDescription?: string; +} + +function formatDateTime(value: string | null | undefined): string { + if (!value) return "—"; + const date = new Date(value); + if (Number.isNaN(date.getTime())) return "—"; + return new Intl.DateTimeFormat("zh-CN", { + year: "numeric", + month: "2-digit", + day: "2-digit", + hour: "2-digit", + minute: "2-digit", + hour12: false, + }).format(date); +} + +export default function AgentDetailDrawer({ + target, + onClose, +}: { + target: AgentDetailTarget | null; + onClose: () => void; +}) { + const { agent, isLoading } = useAgent(target?.agentId ?? null, { + enabled: !!target, + }); + + const name = agent?.name ?? target?.fallbackName ?? target?.agentId ?? ""; + const description = + agent?.description ?? target?.fallbackDescription ?? agent?.description ?? ""; + + return ( + <Drawer + className="mat-agent-drawer" + closeBtn + destroyOnClose + footer={null} + header={ + <div className="mat-agent-header"> + <span className="mat-agent-glyph" aria-hidden="true"> + <Bot size={17} /> + </span> + <div className="mat-agent-heading"> + <h3>{name}</h3> + <p>智能体详情</p> + </div> + {agent && ( + <Tag size="small" theme={agent.builtin ? "default" : "primary"} variant="light"> + {agent.builtin ? "内置" : agent.published ? "已发布" : "私有"} + </Tag> + )} + </div> + } + placement="right" + size="460px" + visible={!!target} + onClose={onClose} + > + {target && ( + <div className="mat-agent"> + {isLoading ? ( + <p className="mat-agent-loading">正在加载智能体详情…</p> + ) : agent ? ( + <> + <div className="mat-detail-grid"> + <div> + <span>创建者</span> + <strong> + {agent.owner_username + ? agent.owner_username + : agent.builtin + ? "内置智能体" + : "—"} + </strong> + </div> + <div> + <span>执行模型</span> + <strong>{agent.model || "默认模型"}</strong> + </div> + <div> + <span>创建时间</span> + <strong>{formatDateTime(agent.created_at)}</strong> + </div> + <div> + <span>技能数</span> + <strong>{agent.skills?.length ?? 0} 个</strong> + </div> + </div> + + {agent.description && ( + <section className="mat-agent-section"> + <header className="mat-detail-section-head"> + <h4>简介</h4> + </header> + <p className="mat-agent-desc">{agent.description}</p> + </section> + )} + + {!!agent.tags?.length && ( + <section className="mat-agent-section"> + <header className="mat-detail-section-head"> + <h4>标签</h4> + </header> + <div className="mat-agent-tags"> + {agent.tags.map((tag) => ( + <Tag key={tag.id} size="small" variant="light"> + {tag.name} + </Tag> + ))} + </div> + </section> + )} + + {!!agent.skills?.length && ( + <section className="mat-agent-section"> + <header className="mat-detail-section-head"> + <h4>已配置技能</h4> + </header> + <div className="mat-agent-tags"> + {agent.skills.map((skill) => ( + <Tag key={skill} size="small" theme="primary" variant="light"> + {skill} + </Tag> + ))} + </div> + </section> + )} + </> + ) : ( + <div className="mat-agent-local"> + <div className="mat-detail-grid"> + <div> + <span>创建者</span> + <strong>本地演示</strong> + </div> + <div> + <span>数据来源</span> + <strong>编排内置快照</strong> + </div> + </div> + <p className="mat-agent-desc"> + {description || "该席位来自演示种子数据，未对应后端智能体目录中的记录。接入后端后，编排将引用真实智能体。"} + </p> + </div> + )} + </div> + )} + </Drawer> + ); +} diff --git a/frontend-web/src/pages/official-multi-agent-tasks/components/AgentFlow.tsx b/frontend-web/src/pages/official-multi-agent-tasks/components/AgentFlow.tsx index f6757d9d..6b4af95d 100644 --- a/frontend-web/src/pages/official-multi-agent-tasks/components/AgentFlow.tsx +++ b/frontend-web/src/pages/official-multi-agent-tasks/components/AgentFlow.tsx @@ -1,4 +1,4 @@ -import { MoveRight } from "lucide-react"; +import { Bot, MoveRight } from "lucide-react"; import { Fragment } from "react"; import type { MatSeat, MatSeatRunState } from "../types"; @@ -23,12 +23,6 @@ const STATE_LABEL: Record<MatSeatRunState, string> = { failed: "失败", }; -function initialsOf(name: string): string { - const trimmed = name.trim(); - if (!trimmed) return "?"; - return trimmed.slice(0, 2).toUpperCase(); -} - export default function AgentFlow({ stages, seats, @@ -88,7 +82,9 @@ export default function AgentFlow({ : (seat?.name ?? agentId) } > - <span className="mat-seat-avatar">{initialsOf(seat?.name ?? agentId)}</span> + <span className="mat-seat-avatar"> + <Bot size={size === "sm" ? 11 : 12} strokeWidth={2.2} /> + </span> <span className="mat-seat-name">{seat?.name ?? agentId}</span> {state && ( <span className={`mat-seat-dot is-${state}`} title={STATE_LABEL[state]} /> diff --git a/frontend-web/src/pages/official-multi-agent-tasks/components/TaskEditorDialog.tsx b/frontend-web/src/pages/official-multi-agent-tasks/components/TaskEditorDialog.tsx deleted file mode 100644 index 69c3da51..00000000 --- a/frontend-web/src/pages/official-multi-agent-tasks/components/TaskEditorDialog.tsx +++ /dev/null @@ -1,571 +0,0 @@ -import { - ArrowDown, - ArrowUp, - ChevronDown, - ChevronUp, - Plus, - Search, - SplitSquareVertical, - Trash2, - X, -} from "lucide-react"; -import { useEffect, useMemo, useState } from "react"; -import { - Button, - Dialog, - Input, - MessagePlugin, - Select, - Steps, - Switch, - Textarea, -} from "tdesign-react"; - -import { useAgents } from "@/core/agents"; -import { - type ScheduleConfig, - buildCron, - parseCron, -} from "@/components/workspace/scheduled-tasks/schedule-builder"; - -import AgentFlow from "./AgentFlow"; -import SchedulePicker from "./SchedulePicker"; -import type { MatSeat, MatStageGroup, MatTask, MatTaskPayload } from "../types"; -import { defaultScheduleConfig, expandStages } from "../utils"; - -const TIMEZONE_OPTIONS = ["Asia/Shanghai", "UTC", "America/New_York", "Europe/London"].map( - (zone) => ({ label: zone, value: zone }), -); - -const MAX_SEATS = 20; -const MIN_SEATS = 2; - -interface EditorDraft { - name: string; - description: string; - schedule: ScheduleConfig; - timezone: string; - enabled: boolean; - stageGroups: MatStageGroup[]; - prompt: string; - coordinatorPrompt: string; -} - -function draftFromTask(task: MatTask | null): EditorDraft { - if (!task) { - return { - name: "", - description: "", - schedule: defaultScheduleConfig(), - timezone: "Asia/Shanghai", - enabled: true, - stageGroups: [], - prompt: "", - coordinatorPrompt: "", - }; - } - const stages = expandStages(task); - const seatById = new Map(task.seats.map((seat) => [seat.agent_id, seat])); - return { - name: task.name, - description: task.description ?? "", - schedule: parseCron(task.cron_expr) ?? defaultScheduleConfig(), - timezone: task.timezone || "Asia/Shanghai", - enabled: task.enabled, - stageGroups: stages.map((stage, index) => ({ - seats: stage - .map((agentId) => seatById.get(agentId)) - .filter((seat): seat is MatSeat => !!seat), - goal: task.stage_goals?.[index] ?? "", - })), - prompt: task.prompt, - coordinatorPrompt: task.coordinator_prompt ?? "", - }; -} - -function draftToPayload(draft: EditorDraft): MatTaskPayload { - const groups = draft.stageGroups.filter((group) => group.seats.length > 0); - const seats = groups.flatMap((group) => group.seats); - const anyParallel = groups.some((group) => group.seats.length > 1); - const anyGoal = groups.some((group) => group.goal.trim().length > 0); - const explicit = anyParallel || anyGoal; - return { - name: draft.name.trim(), - description: draft.description.trim() || undefined, - prompt: draft.prompt.trim(), - coordinator_prompt: draft.coordinatorPrompt.trim() || undefined, - cron_expr: buildCron(draft.schedule), - timezone: draft.timezone, - enabled: draft.enabled, - seats, - stages: explicit ? groups.map((group) => group.seats.map((seat) => seat.agent_id)) : null, - stage_goals: explicit ? groups.map((group) => group.goal.trim() || null) : null, - }; -} - -export default function TaskEditorDialog({ - visible, - task, - submitting, - onClose, - onSubmit, -}: { - visible: boolean; - task: MatTask | null; - submitting: boolean; - onClose: () => void; - onSubmit: (payload: MatTaskPayload) => void; -}) { - const [step, setStep] = useState(0); - const [draft, setDraft] = useState<EditorDraft>(() => draftFromTask(task)); - const [poolSearch, setPoolSearch] = useState(""); - const [stageAddValues, setStageAddValues] = useState<Record<number, string | undefined>>({}); - - useEffect(() => { - if (visible) { - setStep(0); - setPoolSearch(""); - setDraft(draftFromTask(task)); - } - }, [visible, task]); - - const { agents, isLoading: agentsLoading } = useAgents({ search: poolSearch.trim() || undefined }); - - const usedAgentIds = useMemo( - () => new Set(draft.stageGroups.flatMap((group) => group.seats.map((seat) => seat.agent_id))), - [draft.stageGroups], - ); - const seatTotal = usedAgentIds.size; - - const updateDraft = (patch: Partial<EditorDraft>) => setDraft((prev) => ({ ...prev, ...patch })); - const updateGroups = ( - updater: (groups: MatStageGroup[]) => MatStageGroup[], - ) => updateDraft({ stageGroups: updater(draft.stageGroups) }); - - const addAgentAsNewStage = (seat: MatSeat) => { - if (usedAgentIds.has(seat.agent_id) || seatTotal >= MAX_SEATS) return; - updateGroups((groups) => [...groups, { seats: [seat], goal: "" }]); - }; - - const addAgentToStage = (seat: MatSeat, stageIndex: number) => { - if (usedAgentIds.has(seat.agent_id) || seatTotal >= MAX_SEATS) return; - updateGroups((groups) => - groups.map((group, index) => - index === stageIndex ? { ...group, seats: [...group.seats, seat] } : group, - ), - ); - }; - - const removeSeat = (stageIndex: number, seatIndex: number) => { - updateGroups((groups) => - groups - .map((group, index) => - index === stageIndex - ? { ...group, seats: group.seats.filter((_, seatIdx) => seatIdx !== seatIndex) } - : group, - ) - .filter((group) => group.seats.length > 0), - ); - }; - - const moveSeatAcrossStage = (stageIndex: number, seatIndex: number, delta: 1 | -1) => { - const target = stageIndex + delta; - if (target < 0 || target >= draft.stageGroups.length) return; - updateGroups((groups) => { - const next = groups.map((group) => ({ seats: [...group.seats], goal: group.goal })); - const seat = next[stageIndex]!.seats[seatIndex]; - if (!seat) return groups; - next[stageIndex]!.seats.splice(seatIndex, 1); - next[target]!.seats.push(seat); - return next.filter((group) => group.seats.length > 0); - }); - }; - - const splitSeatToStage = (stageIndex: number, seatIndex: number) => { - updateGroups((groups) => { - const next = groups.map((group) => ({ seats: [...group.seats], goal: group.goal })); - const seat = next[stageIndex]!.seats[seatIndex]; - if (!seat) return groups; - next[stageIndex]!.seats.splice(seatIndex, 1); - next.splice(stageIndex + 1, 0, { seats: [seat], goal: "" }); - return next.filter((group) => group.seats.length > 0); - }); - }; - - const moveStage = (stageIndex: number, delta: 1 | -1) => { - const target = stageIndex + delta; - if (target < 0 || target >= draft.stageGroups.length) return; - updateGroups((groups) => { - const next = [...groups]; - const [group] = next.splice(stageIndex, 1); - if (!group) return groups; - next.splice(target, 0, group); - return next; - }); - }; - - const deleteStage = (stageIndex: number) => { - updateGroups((groups) => groups.filter((_, index) => index !== stageIndex)); - }; - - const setStageGoal = (stageIndex: number, goal: string) => { - updateGroups((groups) => - groups.map((group, index) => (index === stageIndex ? { ...group, goal } : group)), - ); - }; - - const trySubmit = () => { - if (!draft.name.trim()) { - setStep(0); - void MessagePlugin.warning("请填写任务名称"); - return; - } - if (seatTotal < MIN_SEATS) { - setStep(1); - void MessagePlugin.warning(`编排至少需要 ${MIN_SEATS} 个智能体`); - return; - } - if (!draft.prompt.trim()) { - setStep(2); - void MessagePlugin.warning("请填写任务指令"); - return; - } - onSubmit(draftToPayload(draft)); - }; - - const previewStages = draft.stageGroups - .filter((group) => group.seats.length > 0) - .map((group) => group.seats.map((seat) => seat.agent_id)); - const previewSeats = draft.stageGroups.flatMap((group) => group.seats); - - return ( - <Dialog - className="mat-editor-dialog" - closeBtn - closeOnOverlayClick={false} - destroyOnClose - footer={null} - header={task ? "编辑多智能体定时任务" : "新建多智能体定时任务"} - placement="top" - visible={visible} - width={980} - onClose={onClose} - > - <div className="mat-editor"> - <Steps className="mat-editor-steps" current={step} readonly> - <Steps.StepItem title="基本信息" /> - <Steps.StepItem title="智能体编排" /> - <Steps.StepItem title="执行设置" /> - </Steps> - - {step === 0 && ( - <div className="mat-editor-pane"> - <label className="mat-field"> - <span className="mat-field-label"> - 任务名称<i>*</i> - </span> - <Input - clearable - maxlength={40} - placeholder="例如：每日舆情早报" - value={draft.name} - onChange={(value) => updateDraft({ name: String(value ?? "") })} - /> - </label> - <label className="mat-field"> - <span className="mat-field-label">任务描述</span> - <Textarea - autosize={{ minRows: 2, maxRows: 4 }} - maxlength={200} - placeholder="一句话说明这个编排任务要达成什么（可选）" - value={draft.description} - onChange={(value) => updateDraft({ description: String(value ?? "") })} - /> - </label> - <div className="mat-field"> - <span className="mat-field-label">执行频率</span> - <SchedulePicker - value={draft.schedule} - onChange={(schedule) => updateDraft({ schedule })} - /> - </div> - <div className="mat-field-row"> - <label className="mat-field"> - <span className="mat-field-label">时区</span> - <Select - options={TIMEZONE_OPTIONS} - value={draft.timezone} - onChange={(value) => updateDraft({ timezone: String(value) })} - /> - </label> - <label className="mat-field mat-field--switch"> - <span className="mat-field-label">创建后立即启用</span> - <Switch value={draft.enabled} onChange={(value) => updateDraft({ enabled: !!value })} /> - </label> - </div> - </div> - )} - - {step === 1 && ( - <div className="mat-editor-pane mat-editor-pane--wide"> - <aside className="mat-pool"> - <header className="mat-pool-head"> - <span>候选智能体</span> - <em> - {seatTotal} / {MAX_SEATS} - </em> - </header> - <div className="mat-pool-search"> - <Search aria-hidden="true" size={15} /> - <input - onChange={(event) => setPoolSearch(event.target.value)} - placeholder="搜索智能体" - value={poolSearch} - /> - </div> - <div className="mat-pool-list"> - {agentsLoading ? ( - <p className="mat-pool-tip">正在加载智能体…</p> - ) : agents.length ? ( - agents.map((agent) => { - const used = usedAgentIds.has(agent.id); - const seat: MatSeat = { - agent_id: agent.id, - name: agent.name, - description: agent.description ?? undefined, - }; - return ( - <button - className="mat-pool-item" - disabled={used || seatTotal >= MAX_SEATS} - key={agent.id} - onClick={() => addAgentAsNewStage(seat)} - title={used ? "该智能体已在编排中" : "点击追加为新阶段"} - type="button" - > - <span className="mat-pool-item-name">{agent.name}</span> - <span className="mat-pool-item-desc"> - {agent.description || "暂无简介"} - </span> - <span className="mat-pool-item-add" aria-hidden="true"> - <Plus size={14} /> - </span> - </button> - ); - }) - ) : ( - <p className="mat-pool-tip">没有匹配的智能体</p> - )} - </div> - </aside> - - <section className="mat-stage-editor"> - <header className="mat-stage-editor-head"> - <span>阶段编排</span> - <small>同阶段并行执行 · 阶段之间串行；点击候选智能体追加为新阶段</small> - </header> - <div className="mat-stage-list"> - {draft.stageGroups.map((group, stageIndex) => { - const unusedOptions = agents - .filter((agent) => !usedAgentIds.has(agent.id)) - .map((agent) => ({ label: agent.name, value: agent.id, agent })); - return ( - <article className="mat-stage-box" key={`stage-box-${stageIndex}`}> - <header className="mat-stage-box-head"> - <span className="mat-stage-box-no">阶段 {stageIndex + 1}</span> - {group.seats.length > 1 ? ( - <span className="mat-flow-mode is-parallel">并行 ×{group.seats.length}</span> - ) : ( - <span className="mat-flow-mode is-serial">串行</span> - )} - <span className="mat-stage-box-ops"> - <button - aria-label="阶段上移" - disabled={stageIndex === 0} - onClick={() => moveStage(stageIndex, -1)} - title="上移" - type="button" - > - <ArrowUp size={14} /> - </button> - <button - aria-label="阶段下移" - disabled={stageIndex === draft.stageGroups.length - 1} - onClick={() => moveStage(stageIndex, 1)} - title="下移" - type="button" - > - <ArrowDown size={14} /> - </button> - <button - aria-label="删除阶段" - onClick={() => deleteStage(stageIndex)} - title="删除整个阶段" - type="button" - > - <Trash2 size={14} /> - </button> - </span> - </header> - <Textarea - autosize - className="mat-stage-goal" - maxlength={120} - placeholder="本阶段目标（可选）：告诉总控本阶段要产出什么、如何衔接上一阶段" - value={group.goal} - onChange={(value) => setStageGoal(stageIndex, String(value ?? ""))} - /> - <div className="mat-stage-seats"> - {group.seats.map((seat, seatIndex) => ( - <div className="mat-seat-row" key={seat.agent_id}> - <span className="mat-seat-row-name" title={seat.description}> - {seat.name} - </span> - <span className="mat-seat-row-ops"> - <button - aria-label="并入上一阶段（与其并行）" - disabled={stageIndex === 0} - onClick={() => moveSeatAcrossStage(stageIndex, seatIndex, -1)} - title="并入上一阶段（与其并行）" - type="button" - > - <ChevronUp size={14} /> - </button> - <button - aria-label="独立成阶段" - onClick={() => splitSeatToStage(stageIndex, seatIndex)} - title="独立成阶段" - type="button" - > - <SplitSquareVertical size={14} /> - </button> - <button - aria-label="并入下一阶段（与其并行）" - disabled={stageIndex === draft.stageGroups.length - 1} - onClick={() => moveSeatAcrossStage(stageIndex, seatIndex, 1)} - title="并入下一阶段（与其并行）" - type="button" - > - <ChevronDown size={14} /> - </button> - <button - aria-label="移除智能体" - onClick={() => removeSeat(stageIndex, seatIndex)} - title="移除" - type="button" - > - <X size={14} /> - </button> - </span> - </div> - ))} - </div> - {seatTotal < MAX_SEATS && unusedOptions.length > 0 && ( - <Select - className="mat-stage-add" - filterable - options={unusedOptions.map(({ label, value }) => ({ label, value }))} - placeholder="+ 添加智能体到本阶段（并行）" - value={stageAddValues[stageIndex] ?? undefined} - onChange={(value) => { - const agent = unusedOptions.find( - (option) => option.value === value, - )?.agent; - if (agent) { - addAgentToStage( - { agent_id: agent.id, name: agent.name, description: agent.description ?? undefined }, - stageIndex, - ); - } - setStageAddValues((prev) => ({ ...prev, [stageIndex]: undefined })); - }} - /> - )} - </article> - ); - })} - <button - className="mat-stage-new" - onClick={() => updateGroups((groups) => [...groups, { seats: [], goal: "" }])} - type="button" - > - <Plus size={15} /> - 新增空阶段（串在最后） - </button> - {!draft.stageGroups.length && ( - <p className="mat-stage-empty">从左侧候选智能体点击添加，至少编排 {MIN_SEATS} 个智能体。</p> - )} - </div> - </section> - </div> - )} - - {step === 2 && ( - <div className="mat-editor-pane"> - <label className="mat-field"> - <span className="mat-field-label"> - 任务指令<i>*</i> - </span> - <Textarea - autosize={{ minRows: 4, maxRows: 8 }} - maxlength={2000} - placeholder="描述每次定时执行要让智能体编队完成的事情，例如：汇总过去 24 小时重点舆情并生成早报…" - value={draft.prompt} - onChange={(value) => updateDraft({ prompt: String(value ?? "") })} - /> - </label> - <label className="mat-field"> - <span className="mat-field-label">总控提示（可选）</span> - <Textarea - autosize={{ minRows: 3, maxRows: 6 }} - maxlength={1000} - placeholder="写给总控（协调者）的编排要求，例如各阶段如何衔接、产出格式约束等" - value={draft.coordinatorPrompt} - onChange={(value) => updateDraft({ coordinatorPrompt: String(value ?? "") })} - /> - </label> - {previewStages.length > 0 && ( - <div className="mat-field"> - <span className="mat-field-label">编排预览</span> - <div className="mat-editor-preview"> - <AgentFlow - seats={previewSeats} - showGoals - size="sm" - stageGoals={draft.stageGroups.map((group) => group.goal.trim() || null)} - stages={previewStages} - /> - </div> - </div> - )} - </div> - )} - - <footer className="mat-editor-footer"> - <span className="mat-editor-hint"> - {step === 1 ? `已编排 ${seatTotal} 个智能体 · 至少 ${MIN_SEATS} 个` : ""} - </span> - <div className="mat-editor-footer-ops"> - <Button variant="outline" onClick={onClose}> - 取消 - </Button> - {step > 0 && ( - <Button variant="outline" onClick={() => setStep((current) => current - 1)}> - 上一步 - </Button> - )} - {step < 2 ? ( - <Button theme="primary" onClick={() => setStep((current) => current + 1)}> - 下一步 - </Button> - ) : ( - <Button loading={submitting} theme="primary" onClick={trySubmit}> - {task ? "保存修改" : "创建任务"} - </Button> - )} - </div> - </footer> - </div> - </Dialog> - ); -} diff --git a/frontend-web/src/pages/official-multi-agent-tasks/multi-agent-tasks.css b/frontend-web/src/pages/official-multi-agent-tasks/multi-agent-tasks.css index 9fd039a8..9263b730 100644 --- a/frontend-web/src/pages/official-multi-agent-tasks/multi-agent-tasks.css +++ b/frontend-web/src/pages/official-multi-agent-tasks/multi-agent-tasks.css @@ -1,132 +1,273 @@ /* ============================================================ - 多智能体定时任务 —— 独立设计体系（不沿用 official-* / 旧任务页样式） - 命名前缀 mat-：仅在 .mat-page / .mat-editor-dialog / .mat-detail-drawer 内生效 + 多智能体定时任务 —— 浅红色 UI 规范主题 + （docs/浅红色UI规范：§1 色彩 · §3 阴影 · §4 圆角 · §6 间距 · §20 语义色 + · §5 按钮 · §11 页签 · §13 输入框 · §17 弹窗 · §27 实体卡片 · §28 布局） + 命名前缀 mat-；TDesign 品牌变量在页面局部锁定为规范红，不受全局主题切换影响。 ============================================================ */ -.mat-page { - --mat-primary: #0052d9; - --mat-primary-weak: #2b6de8; - --mat-ink: #1b2a4b; - --mat-ink-soft: #52607a; - --mat-ink-muted: #8a96ab; - --mat-canvas: #f2f4f8; +/* 变量同时声明在页面容器与各浮层根（Drawer/Dialog 挂在 body 下，继承不到页面容器） */ +.mat-page, +.mat-edit-page, +.mat-detail-drawer, +.mat-agent-drawer, +.mat-confirm-dialog, +.mat-settings-dialog { + /* 主色 · 渐红系 ZS-001 */ + --zs-001: #cf1322; + --zs-001-02: #fef6f6; + --zs-001-03: #feeded; + --zs-001-04: #fddadc; + --zs-001-05: #fcb5b9; + --zs-001-06: #fa9196; + --zs-001-07: #f86c73; + --zs-001-09: #f5222d; + --zs-001-10: #bc0d1e; + --zs-001-11: #a8071a; + + /* 主色 · 渐蓝系 ZS-002（信息 / 链接） */ + --zs-002-02: #f4f9ff; + --zs-002-03: #eaf4ff; + --zs-002-07: #55a6fe; + --zs-002-09: #0079fe; + --zs-002-10: #0056c6; + --zs-002-11: #004ab3; + + /* 辅色 */ + --fs-001-03: #fff6ea; + --fs-001-09: #ff9900; + --fs-001-10: #c66d00; + --fs-001-11: #b35f00; + --fs-002-03: #eefcf7; + --fs-002-09: #2fd69a; + --fs-002-10: #189d72; + --fs-003-03: #effafe; + --fs-003-09: #45c3f3; + --fs-003-11: #1e76a6; + + /* 中性灰系 FS-004 */ + --fs-004: #222222; + --fs-004-02: #fafafa; + --fs-004-03: #f5f5f5; + --fs-004-04: #e8e8e8; + --fs-004-05: #dbdbdb; + --fs-004-06: #c1c1c1; + --fs-004-07: #a6a6a6; + --fs-004-08: #7f7f7f; + --fs-004-09: #575757; + --fs-004-10: #3d3d3d; + + /* 语义别名（§1.1.8 / §20） */ + --mat-primary: var(--zs-001-09); + --mat-primary-hover: var(--zs-001); + --mat-primary-active: var(--zs-001-11); + --mat-info: var(--zs-002-09); + --mat-success: var(--fs-002-10); + --mat-success-fill: var(--fs-002-09); + --mat-warning: var(--fs-001-09); + --mat-warning-deep: var(--fs-001-10); + --mat-danger: var(--zs-001-09); + --mat-ink: var(--fs-004); + --mat-ink-soft: var(--fs-004-09); + --mat-ink-muted: var(--fs-004-07); + --mat-canvas: var(--fs-004-02); --mat-panel: #ffffff; - --mat-line: #e3e9f3; - --mat-line-soft: #edf1f7; - --mat-tint: #f7f9fc; - --mat-success: #2ba471; - --mat-warning: #e37318; - --mat-danger: #d54941; + --mat-line: var(--fs-004-04); + --mat-line-strong: var(--fs-004-05); + + /* 阴影（§3.1.3 中性投影） */ + --mat-shadow-1: 0 2px 8px rgba(34, 34, 34, 0.08); + --mat-shadow-2: 0 4px 16px rgba(34, 34, 34, 0.12); + --mat-shadow-3: 0 8px 32px rgba(34, 34, 34, 0.16); + + /* 字体（§2.2）：中文 Noto Sans S Chinese，数字 D-DIN（Arial 回退） */ + --mat-font: "Noto Sans S Chinese", "Noto Sans SC", "Source Han Sans SC", + "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; + --mat-font-num: "D-DIN", "Arial", "Noto Sans S Chinese", sans-serif; + + /* TDesign 局部锁定规范红（浮层挂 body 时也能拿到正确品牌色） */ + --td-brand-color: #f5222d; + --td-brand-color-hover: #cf1322; + --td-brand-color-focus: #feeded; + --td-brand-color-active: #a8071a; + --td-brand-color-disabled: #fa9196; + --td-brand-color-light: #fef6f6; + --td-brand-color-light-hover: #feeded; +} + +/* 浮层根基础字体/文字色（背景交给 TDesign 白底） */ +.mat-detail-drawer, +.mat-agent-drawer, +.mat-confirm-dialog, +.mat-settings-dialog { + color: var(--mat-ink); + font-family: var(--mat-font); +} + +.mat-page, +.mat-edit-page { background: var(--mat-canvas); color: var(--mat-ink); display: flex; flex-direction: column; - font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Inter", system-ui, - -apple-system, sans-serif; + font-family: var(--mat-font); min-height: 100%; } .mat-page *, -.mat-editor-dialog *, +.mat-edit-page *, +.mat-confirm-dialog *, .mat-detail-drawer * { box-sizing: border-box; } -/* ---------- 顶部横幅 ---------- */ +/* TDesign 控件圆角统一 2px（§4） */ +.mat-page .t-button, +.mat-edit-page .t-button, +.mat-confirm-dialog .t-button, +.mat-settings-dialog .t-button, +.mat-detail-drawer .t-button, +.mat-agent-drawer .t-button, +.mat-page .t-input, +.mat-edit-page .t-input, +.mat-confirm-dialog .t-input, +.mat-settings-dialog .t-input, +.mat-page .t-textarea__inner, +.mat-edit-page .t-textarea__inner, +.mat-confirm-dialog .t-textarea__inner, +.mat-settings-dialog .t-textarea__inner, +.mat-page .t-select, +.mat-edit-page .t-select, +.mat-confirm-dialog .t-select, +.mat-settings-dialog .t-select, +.mat-page .t-tag, +.mat-confirm-dialog .t-tag, +.mat-settings-dialog .t-tag, +.mat-detail-drawer .t-tag, +.mat-agent-drawer .t-tag { + border-radius: 2px; +} -.mat-hero { +/* ---------- 页头（§28 列表卡片页） ---------- */ + +.mat-page-head { align-items: flex-end; - background: - radial-gradient(1200px 420px at 88% -160px, rgba(88, 152, 255, 0.45), transparent 60%), - linear-gradient(112deg, #14224a 0%, #1d3a8a 48%, #0b5bdd 100%); - background-color: #1d3a8a; - color: #fff; + background: var(--mat-panel); + border-bottom: 1px solid var(--mat-line); display: flex; flex-wrap: wrap; - gap: 24px; + gap: 16px; justify-content: space-between; - padding: 34px 42px 30px; + padding: 24px 24px 20px; } -.mat-hero-eyebrow { - align-items: center; - color: rgba(255, 255, 255, 0.72); - display: flex; - font-size: 12px; - gap: 6px; - letter-spacing: 2px; - margin: 0 0 10px; -} - -.mat-hero h1 { - font-size: 26px; +.mat-page-head h1 { + font-size: 18px; font-weight: 700; - letter-spacing: 0.5px; - margin: 0 0 8px; + letter-spacing: 0.2px; + margin: 0 0 4px; } -.mat-hero-desc { - color: rgba(255, 255, 255, 0.76); - font-size: 13.5px; +.mat-page-head-copy > p { + color: var(--mat-ink-soft); + font-size: 14px; line-height: 1.6; margin: 0; - max-width: 560px; + max-width: 620px; } -.mat-hero-side { - align-items: flex-end; +/* ---------- 指标卡行（§26.1：横向等分 · 竖线分隔 · D-DIN 数字） ---------- */ + +.mat-stats { + background: var(--mat-panel); + border-bottom: 1px solid var(--mat-line); + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.mat-stat { + align-items: center; display: flex; - flex-direction: column; - gap: 14px; + gap: 12px; + padding: 16px 24px; } -.mat-hero-stats { - display: flex; - gap: 8px; +.mat-stat + .mat-stat { + border-left: 1px solid var(--mat-line); } -.mat-hero-stat { - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(6px); - border: 1px solid rgba(255, 255, 255, 0.16); - border-radius: 10px; - min-width: 76px; - padding: 9px 14px 8px; - text-align: center; +/* 指标图标（§20 语义浅底 + 深字） */ +.mat-stat-icon { + align-items: center; + border-radius: 4px; + display: inline-flex; + flex-shrink: 0; + height: 36px; + justify-content: center; + width: 36px; } -.mat-hero-stat strong { +.mat-stat-icon.is-primary { + background: var(--zs-001-03); + color: var(--mat-primary); +} + +.mat-stat-icon.is-success { + background: var(--fs-002-03); + color: var(--fs-002-10); +} + +.mat-stat-icon.is-info { + background: var(--zs-002-03); + color: var(--zs-002-09); +} + +.mat-stat-icon.is-warning, +.mat-stat-icon.is-live { + background: var(--fs-001-03); + color: var(--fs-001-10); +} + +.mat-stat-icon.is-muted { + background: var(--fs-004-03); + color: var(--fs-004-07); +} + +.mat-stat-copy { + min-width: 0; +} + +.mat-stat-copy strong { + color: var(--mat-ink); display: block; - font-size: 19px; + font-family: var(--mat-font-num); + font-size: 26px; font-weight: 700; line-height: 1.15; } -.mat-hero-stat span { - color: rgba(255, 255, 255, 0.66); +.mat-stat-copy strong.is-live { + color: var(--fs-001-10); +} + +.mat-stat-copy span { + color: var(--fs-004-07); display: block; - font-size: 11px; - margin-top: 3px; + font-size: 12px; + margin-top: 4px; } -.mat-hero-create .t-button__text { - display: inline-flex; - align-items: center; - gap: 6px; -} - -/* ---------- 内容区 ---------- */ +/* ---------- 内容区与工具条 ---------- */ .mat-body { flex: 1; - padding: 20px 42px 46px; + padding: 24px; } .mat-toolbar { align-items: center; display: flex; flex-wrap: wrap; - gap: 12px 22px; + gap: 12px 24px; justify-content: space-between; margin-bottom: 16px; } @@ -135,6 +276,7 @@ width: 320px; } +/* 筛选页签（§11.1：激活红字 + 2px 红下划线压在 1px 基线上） */ .mat-toolbar-tabs { flex: 1; min-width: 320px; @@ -142,37 +284,64 @@ .mat-toolbar-tabs .t-tabs__header { background: transparent; - border-bottom: 0; } -/* Tabs 仅作为筛选器使用，隐藏空的面板内容区 */ +.mat-toolbar-tabs .t-tabs__nav-item { + border-radius: 0; + color: var(--mat-ink); + font-size: 14px; + font-weight: 500; + padding: 8px 4px; +} + +.mat-toolbar-tabs .t-tabs__nav-item:hover { + color: var(--mat-primary); +} + +.mat-toolbar-tabs .t-tabs__nav-item.t-is-active { + color: var(--mat-primary); + font-weight: 600; +} + +.mat-toolbar-tabs .t-tabs__nav-item.t-is-active::after { + background: var(--mat-primary); + height: 2px; +} + +.mat-toolbar-tabs .t-tabs__nav-container::after, +.mat-toolbar-tabs .t-tabs__nav-wrap::after { + background: var(--mat-line); + height: 1px; +} + +/* Tabs 仅作筛选器，隐藏空面板 */ .mat-toolbar-tabs .t-tabs__content { display: none; } -/* ---------- 任务卡片网格 ---------- */ +/* ---------- 任务卡片网格（§27 实体卡片） ---------- */ .mat-grid { display: grid; - gap: 16px; + gap: 24px; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); } .mat-card { background: var(--mat-panel); border: 1px solid var(--mat-line); - border-radius: 14px; + border-radius: 4px; + box-shadow: var(--mat-shadow-1); display: flex; flex-direction: column; gap: 12px; - padding: 18px 20px 14px; - transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease; + padding: 16px 16px 12px; + transition: box-shadow 140ms ease, border-color 140ms ease; } .mat-card:hover { - border-color: #c9d6ee; - box-shadow: 0 12px 32px rgba(23, 43, 99, 0.08); - transform: translateY(-1px); + border-color: var(--mat-line-strong); + box-shadow: var(--mat-shadow-2); } .mat-card-head { @@ -184,14 +353,14 @@ .mat-card-glyph { align-items: center; - background: linear-gradient(135deg, #2e4d9e, #0052d9); - border-radius: 10px; - color: #fff; + background: var(--zs-001-03); + border-radius: 4px; + color: var(--mat-primary); display: inline-flex; flex-shrink: 0; - height: 38px; + height: 36px; justify-content: center; - width: 38px; + width: 36px; } .mat-card-title { @@ -200,10 +369,11 @@ } .mat-card-title h3 { - font-size: 15px; - font-weight: 600; + color: var(--mat-ink); + font-size: 16px; + font-weight: 700; letter-spacing: 0.2px; - margin: 1px 0 5px; + margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -211,15 +381,16 @@ .mat-card-title p { align-items: center; - color: var(--mat-ink-muted); + color: var(--mat-ink-soft); display: flex; - font-size: 12px; - gap: 5px; + font-size: 14px; + gap: 4px; margin: 0; } .mat-card-title p em { - color: #a5aFC2; + color: var(--fs-004-07); + font-size: 12px; font-style: normal; } @@ -227,12 +398,12 @@ -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--mat-ink-soft); + cursor: pointer; display: -webkit-box; - font-size: 12.5px; + font-size: 14px; line-height: 1.6; margin: 0; overflow: hidden; - cursor: pointer; } .mat-card-flow { @@ -241,20 +412,20 @@ .mat-card-foot { align-items: center; - border-top: 1px solid var(--mat-line-soft); + border-top: 1px solid var(--mat-line); display: flex; gap: 12px; justify-content: space-between; margin-top: 2px; - padding-top: 11px; + padding-top: 12px; } .mat-card-meta { - color: var(--mat-ink-muted); + color: var(--fs-004-07); display: flex; flex-direction: column; font-size: 12px; - gap: 3px; + gap: 4px; min-width: 0; } @@ -268,14 +439,22 @@ align-items: center; display: flex; flex-shrink: 0; - gap: 2px; +} + +/* 文本操作按钮：红字，hover 下划线（§5.2.4） */ +.mat-card-ops .t-button, +.mat-detail-footer .t-button, +.mat-edit-header .t-button { + gap: 4px; } .mat-card-ops .t-button__text, -.mat-detail-footer .t-button__text { +.mat-detail-footer .t-button__text, +.mat-edit-header .t-button__text, +.mat-page-head .t-button__text { display: inline-flex; align-items: center; - gap: 5px; + gap: 4px; } .mat-danger-btn { @@ -289,112 +468,109 @@ .mat-run-text.is-succeeded { color: var(--mat-success); } .mat-run-text.is-failed { color: var(--mat-danger); } .mat-run-text.is-running, -.mat-run-text.is-pending { color: var(--mat-warning); } +.mat-run-text.is-pending { color: var(--mat-warning-deep); } -/* ---------- 编排流程图 ---------- */ +/* ---------- 编排流程图（席位色取 §1.1.10 通用图表色序） ---------- */ .mat-flow { align-items: stretch; display: flex; flex-wrap: wrap; - gap: 6px; - row-gap: 10px; + gap: 4px; + row-gap: 8px; } .mat-flow-arrow { align-self: center; - color: #a2aec6; + color: var(--fs-004-07); display: inline-flex; flex-shrink: 0; - padding: 0 1px; } .mat-flow-stage { - background: var(--mat-tint); + background: var(--fs-004-02); border: 1px solid var(--mat-line); - border-radius: 10px; + border-radius: 4px; display: flex; flex-direction: column; min-width: 0; - padding: 8px 10px 9px; + padding: 8px; transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease; } .mat-flow-stage.is-active { - background: #eef3ff; - border-color: #7c9cf5; - box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.08); + background: var(--zs-001-02); + border-color: var(--mat-primary); + box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.08); } .mat-flow-stage.is-done { - opacity: 0.88; + opacity: 0.85; } .mat-flow-stage-head { align-items: center; display: flex; - gap: 6px; - margin-bottom: 7px; + gap: 4px; + margin-bottom: 8px; } .mat-flow-stage-no { - color: #33415c; - font-size: 11px; + color: var(--fs-004-10); + font-size: 12px; font-weight: 700; - letter-spacing: 0.5px; } +/* 徽章（§18.2 Tag：2px 圆角 · 12px · 语义浅底）：并行=信息蓝，串行=中性灰 */ .mat-flow-mode { - border-radius: 999px; - font-size: 10px; + border-radius: 2px; + font-size: 12px; line-height: 1; - padding: 3px 7px; + padding: 3px 8px; white-space: nowrap; } .mat-flow-mode.is-parallel { - background: #e3edff; - color: #0052d9; + background: var(--zs-002-03); + color: var(--mat-info); } .mat-flow-mode.is-serial { - background: #eef0f5; - color: #6b7a93; + background: var(--fs-004-03); + color: var(--fs-004-08); } .mat-flow-seats { display: flex; flex-direction: column; - gap: 5px; + gap: 4px; } -.mat-flow--sm .mat-flow-stage { padding: 6px 8px 7px; } -.mat-flow--sm .mat-flow-stage-head { margin-bottom: 5px; } +.mat-flow--sm .mat-flow-stage { padding: 6px; } +.mat-flow--sm .mat-flow-stage-head { margin-bottom: 6px; } +/* 席位胶囊：浅底（-03 系）+ 深字（-10 系）+ 实填头像（-09），色序=§1.1.10 */ .mat-seat { align-items: center; - border-radius: 999px; + border-radius: 2px; display: inline-flex; font-size: 12px; - gap: 6px; + gap: 4px; max-width: 220px; - padding: 3px 9px 3px 3px; + padding: 2px 8px 2px 2px; } .mat-flow--sm .mat-seat { - font-size: 11.5px; + font-size: 12px; max-width: 200px; - padding: 2px 8px 2px 2px; } .mat-seat-avatar { align-items: center; - border-radius: 999px; + border-radius: 2px; color: #fff; display: inline-flex; flex-shrink: 0; - font-size: 10px; - font-weight: 700; height: 20px; justify-content: center; width: 20px; @@ -412,58 +588,59 @@ } .mat-seat-dot { - border-radius: 999px; + border-radius: 50%; flex-shrink: 0; - height: 7px; - width: 7px; + height: 6px; + width: 6px; } -.mat-seat-dot.is-waiting { background: #c1c9d6; } -.mat-seat-dot.is-done { background: var(--mat-success); } +/* 状态点（§20 语义色）：等待灰 · 执行中橙(脉冲) · 成功绿 · 失败红 */ +.mat-seat-dot.is-waiting { background: var(--fs-004-06); } +.mat-seat-dot.is-done { background: var(--mat-success-fill); } .mat-seat-dot.is-failed { background: var(--mat-danger); } .mat-seat-dot.is-running, .mat-seat.is-running .mat-seat-dot { animation: mat-pulse 1.1s ease-in-out infinite; - background: var(--mat-primary); + background: var(--mat-warning); } .mat-flow-goal { - color: var(--mat-ink-muted); - font-size: 11px; + color: var(--fs-004-07); + font-size: 12px; line-height: 1.5; - margin: 7px 0 0; + margin: 8px 0 0; } -/* 席位配色（c0..c7） */ -.mat-seat--c0 { background: #e8effc; color: #1b4fb8; } -.mat-seat--c0 .mat-seat-avatar { background: #3563d9; } -.mat-seat--c1 { background: #e6f7f1; color: #0d775a; } -.mat-seat--c1 .mat-seat-avatar { background: #2ba471; } -.mat-seat--c2 { background: #fdf1e4; color: #a4601a; } -.mat-seat--c2 .mat-seat-avatar { background: #e37318; } -.mat-seat--c3 { background: #f0eafc; color: #5d3fb3; } -.mat-seat--c3 .mat-seat-avatar { background: #7b5cd6; } -.mat-seat--c4 { background: #fcebec; color: #b03248; } -.mat-seat--c4 .mat-seat-avatar { background: #d54941; } -.mat-seat--c5 { background: #e4f4fb; color: #0f6d96; } -.mat-seat--c5 .mat-seat-avatar { background: #1a8cc4; } -.mat-seat--c6 { background: #f2f4f8; color: #46536b; } -.mat-seat--c6 .mat-seat-avatar { background: #5d6b85; } -.mat-seat--c7 { background: #fbf6e8; color: #8a6d1a; } -.mat-seat--c7 .mat-seat-avatar { background: #c9a53f; } +.mat-seat--c0 { background: var(--zs-001-03); color: var(--zs-001); } +.mat-seat--c0 .mat-seat-avatar { background: var(--zs-001-09); } +.mat-seat--c1 { background: var(--zs-002-03); color: var(--zs-002-10); } +.mat-seat--c1 .mat-seat-avatar { background: var(--zs-002-09); } +.mat-seat--c2 { background: var(--fs-001-03); color: var(--fs-001-10); } +.mat-seat--c2 .mat-seat-avatar { background: var(--fs-001-09); } +.mat-seat--c3 { background: var(--fs-002-03); color: var(--fs-002-10); } +.mat-seat--c3 .mat-seat-avatar { background: var(--fs-002-09); } +.mat-seat--c4 { background: var(--fs-003-03); color: var(--fs-003-11); } +.mat-seat--c4 .mat-seat-avatar { background: var(--fs-003-09); } +.mat-seat--c5 { background: var(--zs-001-02); color: var(--zs-001-11); } +.mat-seat--c5 .mat-seat-avatar { background: var(--zs-001-06); } +.mat-seat--c6 { background: var(--zs-002-02); color: var(--zs-002-11); } +.mat-seat--c6 .mat-seat-avatar { background: var(--zs-002-07); } +.mat-seat--c7 { background: #fffaf4; color: var(--fs-001-11); } +.mat-seat--c7 .mat-seat-avatar { background: #ffbb55; } -/* ---------- 空态 / 加载态 ---------- */ +/* ---------- 空态 / 加载态（§27.3） ---------- */ .mat-state { align-items: center; background: var(--mat-panel); - border: 1px dashed var(--mat-line); - border-radius: 14px; + border: 1px solid var(--mat-line); + border-radius: 4px; + box-shadow: var(--mat-shadow-1); color: var(--mat-ink-soft); display: flex; font-size: 14px; - gap: 9px; + gap: 8px; justify-content: center; min-height: 320px; } @@ -471,32 +648,33 @@ .mat-state--empty { flex-direction: column; gap: 0; - padding: 46px 20px; + padding: 40px 20px; text-align: center; } .mat-state-glyph { align-items: center; - background: #e8edf7; - border-radius: 14px; - color: #3d5aa5; + background: var(--fs-004-03); + border-radius: 4px; + color: var(--fs-004-06); display: flex; - height: 52px; + height: 48px; justify-content: center; - margin-bottom: 14px; - width: 52px; + margin-bottom: 12px; + width: 48px; } .mat-state--empty h3 { - font-size: 16px; - font-weight: 600; - margin: 0 0 7px; + color: var(--mat-ink-soft); + font-size: 14px; + font-weight: 400; + margin: 0 0 6px; } .mat-state--empty p { - color: var(--mat-ink-muted); - font-size: 13px; - margin: 0 0 18px; + color: var(--fs-004-07); + font-size: 14px; + margin: 0 0 16px; max-width: 420px; } @@ -506,18 +684,22 @@ .mat-footnote { align-items: center; - color: #a3adc0; + color: var(--fs-004-07); display: flex; font-size: 12px; - gap: 5px; + gap: 4px; justify-content: center; - margin: 20px 0 0; + margin: 24px 0 0; } -/* ---------- 详情抽屉 ---------- */ +/* ---------- 详情抽屉（§17：三级阴影 · 4px · 红竖条节标题） ---------- */ + +.mat-detail-drawer.t-drawer { + border-radius: 4px 0 0 4px; +} -.mat-detail-drawer.t-drawer, .mat-detail-drawer .t-drawer__content-wrapper { + border-top: 3px solid var(--mat-primary); padding: 0; } @@ -525,20 +707,25 @@ align-items: center; display: flex; gap: 12px; - padding-right: 8px; + padding-right: 44px; width: 100%; } +.mat-detail-header .t-drawer__header-content { + flex: 1; + min-width: 0; +} + .mat-detail-glyph { align-items: center; - background: linear-gradient(135deg, #2e4d9e, #0052d9); - border-radius: 10px; - color: #fff; + background: var(--zs-001-03); + border-radius: 4px; + color: var(--mat-primary); display: inline-flex; flex-shrink: 0; - height: 38px; + height: 36px; justify-content: center; - width: 38px; + width: 36px; } .mat-detail-heading { @@ -547,16 +734,17 @@ } .mat-detail-heading h3 { + color: var(--mat-ink); font-size: 16px; - font-weight: 600; - margin: 0 0 3px; + font-weight: 700; + margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mat-detail-heading p { - color: var(--mat-ink-muted); + color: var(--mat-ink-soft); font-size: 12px; margin: 0; } @@ -564,77 +752,79 @@ .mat-detail { display: flex; flex-direction: column; - gap: 18px; + gap: 24px; } .mat-detail-desc { color: var(--mat-ink-soft); - font-size: 13px; + font-size: 14px; line-height: 1.65; margin: 0; } .mat-detail-grid { display: grid; - gap: 10px; + gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mat-detail-grid > div { - background: var(--mat-tint); - border: 1px solid var(--mat-line-soft); - border-radius: 10px; - padding: 10px 13px; + background: var(--fs-004-02); + border: 1px solid var(--mat-line); + border-radius: 4px; + padding: 12px 16px; } .mat-detail-grid span { - color: var(--mat-ink-muted); + color: var(--fs-004-07); display: block; - font-size: 11px; + font-size: 12px; margin-bottom: 4px; } .mat-detail-grid strong { color: var(--mat-ink); - font-size: 13px; + font-size: 14px; font-weight: 600; } .mat-detail-section-head { align-items: baseline; display: flex; - gap: 10px; - margin-bottom: 10px; + gap: 8px; + margin-bottom: 12px; } +/* 节标题：3px 主色红竖条（§18.1 类目竖条） */ .mat-detail-section-head h4 { align-items: center; + color: var(--mat-ink); display: flex; - font-size: 14px; - font-weight: 600; + font-size: 16px; + font-weight: 700; margin: 0; } .mat-detail-section-head h4::before { - background: linear-gradient(180deg, #2b6de8, #0052d9); - border-radius: 999px; + background: var(--mat-primary); + border-radius: 0; content: ""; display: inline-block; - height: 14px; + height: 16px; margin-right: 8px; width: 3px; } .mat-detail-section-head h5 { color: var(--mat-ink-soft); - font-size: 13px; + font-size: 14px; font-weight: 600; margin: 0; } .mat-detail-section-head small { - color: var(--mat-ink-muted); - font-size: 11.5px; + color: var(--fs-004-07); + font-size: 12px; } .mat-detail-section-head--sub { @@ -643,26 +833,26 @@ .mat-detail-flow { background: var(--mat-panel); - border: 1px solid var(--mat-line-soft); - border-radius: 12px; + border: 1px solid var(--mat-line); + border-radius: 4px; overflow-x: auto; - padding: 14px; + padding: 16px; } .mat-flow-legend { align-items: center; - color: var(--mat-ink-muted); + color: var(--mat-ink-soft); display: flex; - font-size: 11.5px; + font-size: 12px; gap: 16px; - margin-top: 10px; + margin-top: 12px; padding-left: 2px; } .mat-flow-legend span { align-items: center; display: inline-flex; - gap: 5px; + gap: 4px; } .mat-flow-legend i { @@ -670,14 +860,14 @@ } .mat-detail-prompt { - background: var(--mat-tint); - border: 1px solid var(--mat-line-soft); - border-radius: 10px; + background: var(--fs-004-02); + border: 1px solid var(--mat-line); + border-radius: 4px; color: var(--mat-ink-soft); - font-size: 13px; + font-size: 14px; line-height: 1.75; margin: 0; - padding: 12px 14px; + padding: 12px 16px; white-space: pre-wrap; } @@ -696,46 +886,47 @@ align-items: center; background: var(--mat-panel); border: 1px solid var(--mat-line); - border-radius: 10px; + border-radius: 2px; color: var(--mat-ink-soft); cursor: pointer; display: grid; - font-size: 12.5px; - gap: 10px; + font-size: 12px; + gap: 12px; grid-template-columns: 76px minmax(0, 1fr) 84px 110px; - padding: 10px 12px; + padding: 12px 16px; text-align: left; transition: border-color 120ms ease, background 120ms ease; } .mat-run-item:hover { - background: var(--mat-tint); - border-color: #c9d6ee; + background: var(--fs-004-02); + border-color: var(--mat-line-strong); } .mat-run-item.is-active { - background: #eef3ff; - border-color: #7c9cf5; + background: var(--zs-001-02); + border-color: var(--mat-primary); } .mat-run-item-time { color: var(--mat-ink); + font-family: var(--mat-font-num); font-weight: 500; } .mat-run-item-trigger, .mat-run-item-duration { - color: var(--mat-ink-muted); + color: var(--fs-004-07); font-size: 12px; text-align: right; white-space: nowrap; } .mat-detail-empty { - border: 1px dashed var(--mat-line); - border-radius: 10px; - color: var(--mat-ink-muted); - font-size: 12.5px; + border: 1px dashed var(--mat-line-strong); + border-radius: 4px; + color: var(--fs-004-07); + font-size: 12px; margin: 0; padding: 16px; text-align: center; @@ -743,67 +934,200 @@ .mat-detail-error { align-items: center; - background: #fdf0ef; - border: 1px solid #f5cfcc; - border-radius: 10px; + background: var(--zs-001-03); + border: 1px solid var(--zs-001-04); + border-radius: 2px; color: var(--mat-danger); display: flex; - font-size: 12.5px; - gap: 6px; - margin: 10px 0 0; - padding: 9px 12px; + font-size: 12px; + gap: 4px; + margin: 12px 0 0; + padding: 8px 12px; +} + +.mat-detail-drawer .t-drawer__footer { + border-top: 1px solid var(--mat-line); } .mat-detail-footer { display: flex; - gap: 10px; + gap: 8px; + justify-content: flex-end; } -/* ---------- 编辑弹窗 ---------- */ +/* ---------- 任务编辑页（上表单 · 下编排） ---------- */ -.mat-editor-dialog.t-dialog, -.mat-editor-dialog .t-dialog { - border-radius: 16px; +.mat-edit-header { + align-items: center; + background: var(--mat-panel); + border-bottom: 1px solid var(--mat-line); + display: flex; + gap: 12px; + padding: 16px 24px; } -.mat-editor { +/* 返回：图标描边按钮（§5.2.5） */ +.mat-edit-back { + align-items: center; + background: var(--mat-panel); + border: 1px solid var(--mat-line-strong); + border-radius: 2px; + color: var(--mat-ink-soft); + cursor: pointer; + display: inline-flex; + flex-shrink: 0; + height: 32px; + justify-content: center; + transition: border-color 120ms ease, color 120ms ease; + width: 32px; +} + +.mat-edit-back:hover { + border-color: var(--mat-primary); + color: var(--mat-primary); +} + +.mat-edit-heading { + flex: 1; + min-width: 0; +} + +.mat-edit-heading h1 { + color: var(--mat-ink); + font-size: 18px; + font-weight: 700; + letter-spacing: 0.2px; + margin: 0 0 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mat-edit-heading p { + color: var(--mat-ink-soft); + font-size: 12px; + margin: 0; +} + +/* 执行设置按钮里的摘要文字 */ +.mat-settings-summary { + border-left: 1px solid var(--mat-line); + color: var(--mat-primary); + font-size: 12px; + margin-left: 4px; + padding-left: 8px; +} + +/* 紧凑表单条：任务名称 + 任务描述（其余表单项在「执行设置」弹窗） */ +.mat-edit-formbar { + background: var(--mat-panel); + border-bottom: 1px solid var(--mat-line); + display: flex; + gap: 16px; + padding: 12px 24px; +} + +.mat-formbar-field { + align-items: center; + display: flex; + flex: 1; + gap: 8px; + min-width: 0; +} + +.mat-formbar-field--wide { + flex: 2.2; +} + +.mat-formbar-label { + color: var(--mat-ink-soft); + flex-shrink: 0; + font-size: 14px; +} + +.mat-formbar-label i { + color: var(--mat-danger); + font-style: normal; +} + +/* 总控提示行：label + 自适应多行输入 */ +.mat-edit-formbar--area { + align-items: flex-start; + gap: 8px; +} + +.mat-edit-formbar--area .mat-formbar-label { + padding-top: 7px; +} + +.mat-formbar-textarea { + flex: 1; + min-width: 0; +} + +.mat-edit-body { display: flex; flex-direction: column; - font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Inter", system-ui, - sans-serif; + padding: 16px 24px 32px; } -.mat-editor-steps { - margin-bottom: 20px; +.mat-edit-card { + background: var(--mat-panel); + border: 1px solid var(--mat-line); + border-radius: 4px; + box-shadow: var(--mat-shadow-1); + padding: 16px; } -.mat-editor-pane { +.mat-edit-card-head { + align-items: baseline; + border-bottom: 1px solid var(--mat-line); display: flex; - flex-direction: column; - gap: 15px; - max-height: 56vh; - overflow-y: auto; - padding: 2px 6px 6px 2px; + gap: 12px; + justify-content: space-between; + margin: -16px -16px 16px; + padding: 12px 16px; } -.mat-editor-pane--wide { +.mat-edit-card-head h2 { + align-items: center; + color: var(--mat-ink); + display: flex; + font-size: 16px; + font-weight: 700; + margin: 0; +} + +.mat-edit-card-head h2::before { + background: var(--mat-primary); + content: ""; + display: inline-block; + height: 16px; + margin-right: 8px; + width: 3px; +} + +.mat-edit-card-head span { + color: var(--fs-004-07); + font-size: 12px; +} + +.mat-edit-form { display: grid; - flex: none; - gap: 14px; - grid-template-columns: 288px minmax(0, 1fr); - max-height: 60vh; + gap: 12px 16px; + grid-template-columns: repeat(2, minmax(0, 1fr)); } -.mat-field { - display: block; +.mat-field--wide { + grid-column: 1 / -1; } +/* 表单 label（§12.1）：14px · #575757 · 必填星号红 */ .mat-field-label { color: var(--mat-ink-soft); display: block; - font-size: 12.5px; - font-weight: 600; - margin-bottom: 6px; + font-size: 14px; + margin-bottom: 8px; } .mat-field-label i { @@ -812,16 +1136,10 @@ margin-left: 2px; } -.mat-field-row { - display: grid; - gap: 14px; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); -} - .mat-field--switch { align-items: center; border: 1px solid var(--mat-line); - border-radius: 10px; + border-radius: 2px; display: flex; justify-content: space-between; padding: 8px 12px; @@ -832,7 +1150,7 @@ } .mat-schedule-picker { - row-gap: 8px; + row-gaps: 8px; } .mat-schedule-row { @@ -848,62 +1166,68 @@ } .mat-schedule-preview { - color: var(--mat-ink-muted); + color: var(--fs-004-07); font-size: 12px; - margin: 7px 0 0; + margin: 8px 0 0; } -/* 候选智能体池 */ +.mat-edit-orchestra { + display: grid; + gap: 16px; + grid-template-columns: 300px minmax(0, 1fr); +} + +/* ---------- 候选智能体池 ---------- */ .mat-pool { - background: var(--mat-tint); + background: var(--fs-004-02); border: 1px solid var(--mat-line); - border-radius: 12px; + border-radius: 4px; display: flex; flex-direction: column; - max-height: 60vh; - min-height: 420px; + max-height: 720px; + min-height: 460px; overflow: hidden; - padding: 10px; + padding: 8px; } .mat-pool-head { align-items: center; - color: var(--mat-ink-soft); + color: var(--mat-ink); display: flex; - font-size: 12.5px; + font-size: 14px; font-weight: 700; justify-content: space-between; - padding: 2px 4px 8px; + padding: 4px 4px 8px; } .mat-pool-head em { - color: var(--mat-ink-muted); + color: var(--fs-004-07); font-style: normal; - font-weight: 500; + font-weight: 400; } .mat-pool-search { align-items: center; - background: #fff; - border: 1px solid var(--mat-line); - border-radius: 8px; - color: var(--mat-ink-muted); + background: var(--mat-panel); + border: 1px solid var(--mat-line-strong); + border-radius: 2px; + color: var(--fs-004-07); display: flex; - gap: 6px; + gap: 8px; margin-bottom: 8px; - padding: 7px 9px; + padding: 6px 8px; } .mat-pool-search:focus-within { - border-color: #7c9cf5; + border-color: var(--mat-primary); } .mat-pool-search input { background: transparent; border: 0; color: var(--mat-ink); - font-size: 12.5px; + font-size: 14px; min-width: 0; outline: 0; width: 100%; @@ -913,47 +1237,107 @@ display: flex; flex-direction: column; flex: 1; - gap: 7px; + gap: 8px; overflow-y: auto; - padding: 1px; + /* 上下 4px：滚动容器裁切会让首尾卡片的边框/阴影被吃掉 */ + padding: 4px 2px; } .mat-pool-tip { - color: var(--mat-ink-muted); + color: var(--fs-004-07); font-size: 12px; margin: 0; - padding: 10px 4px; + padding: 12px 4px; text-align: center; } .mat-pool-item { - align-items: flex-start; - background: #fff; + align-items: stretch; + background: var(--mat-panel); border: 1px solid var(--mat-line); - border-radius: 9px; - cursor: pointer; - display: grid; - font: inherit; - gap: 3px 10px; - grid-template-columns: minmax(0, 1fr) 22px; - padding: 9px 10px; - text-align: left; - transition: border-color 120ms ease, box-shadow 120ms ease; + border-radius: 2px; + display: flex; + flex-shrink: 0; + overflow: hidden; + transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease; } -.mat-pool-item:hover:not(:disabled) { - border-color: #7c9cf5; - box-shadow: 0 3px 12px rgba(23, 43, 99, 0.07); +.mat-pool-item:hover { + border-color: var(--mat-primary); + box-shadow: var(--mat-shadow-1); } -.mat-pool-item:disabled { +.mat-pool-item.is-used { + opacity: 0.55; +} + +.mat-pool-item.is-dragging { + opacity: 0.35; +} + +.mat-pool-grip { + align-items: center; + background: var(--fs-004-03); + border: 0; + border-right: 1px solid var(--mat-line); + color: var(--fs-004-07); + cursor: grab; + display: inline-flex; + flex-shrink: 0; + justify-content: center; + touch-action: none; + width: 28px; +} + +.mat-pool-grip:hover { + color: var(--mat-primary); +} + +.mat-pool-item.is-used .mat-pool-grip { cursor: not-allowed; - opacity: 0.45; +} + +.mat-pool-main { + align-items: center; + background: transparent; + border: 0; + cursor: pointer; + display: flex; + flex: 1; + font: inherit; + gap: 8px; + min-width: 0; + padding: 8px; + text-align: left; +} + +.mat-pool-item.is-used .mat-pool-main { + cursor: not-allowed; +} + +.mat-pool-icon { + align-items: center; + background: var(--zs-001-03); + border-radius: 2px; + color: var(--mat-primary); + display: inline-flex; + flex-shrink: 0; + height: 24px; + justify-content: center; + width: 24px; +} + +.mat-pool-copy { + display: flex; + flex: 1; + flex-direction: column; + gap: 2px; + min-width: 0; } .mat-pool-item-name { color: var(--mat-ink); - font-size: 13px; + font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; @@ -961,63 +1345,115 @@ } .mat-pool-item-desc { - color: var(--mat-ink-muted); - font-size: 11.5px; - grid-column: 1 / -1; + color: var(--fs-004-07); + font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.mat-pool-item-add { - align-items: center; - background: #eef3ff; - border-radius: 6px; - color: #0052d9; - display: inline-flex; - height: 22px; - justify-content: center; - width: 22px; +.mat-pool-used { + align-self: center; + background: var(--fs-004-03); + border-radius: 2px; + color: var(--fs-004-08); + flex-shrink: 0; + font-size: 12px; + padding: 3px 8px; } -/* 阶段编排 */ +.mat-pool-add { + align-items: center; + align-self: center; + background: var(--zs-001-03); + border-radius: 2px; + color: var(--mat-primary); + display: inline-flex; + flex-shrink: 0; + height: 24px; + justify-content: center; + width: 24px; +} + +/* 加入按钮（点击追加为新阶段；点卡片本体是看详情） */ +.mat-pool-join { + align-items: center; + align-self: stretch; + background: transparent; + border: 0; + border-left: 1px solid var(--mat-line); + color: var(--fs-004-07); + cursor: pointer; + display: inline-flex; + flex-shrink: 0; + justify-content: center; + transition: color 120ms ease, background 120ms ease; + width: 32px; +} + +.mat-pool-join:hover { + background: var(--zs-001-03); + color: var(--mat-primary); +} + +.mat-pool-item.is-used .mat-pool-used { + align-items: center; + align-self: stretch; + border-left: 1px solid var(--mat-line); + display: inline-flex; + font-size: 12px; + padding: 0 10px; +} + +/* ---------- 阶段编排 ---------- */ .mat-stage-editor { display: flex; flex-direction: column; - gap: 10px; + gap: 12px; min-width: 0; overflow-y: auto; - padding: 1px 3px 1px 1px; + padding: 4px 4px 4px 2px; } .mat-stage-editor-head { - color: var(--mat-ink-soft); + color: var(--mat-ink); display: flex; flex-direction: column; - font-size: 12.5px; + font-size: 14px; font-weight: 700; gap: 2px; padding: 2px 4px; } .mat-stage-editor-head small { - color: var(--mat-ink-muted); - font-size: 11.5px; + color: var(--fs-004-07); + font-size: 12px; font-weight: 400; } .mat-stage-list { display: flex; flex-direction: column; - gap: 10px; + gap: 12px; } .mat-stage-box { - background: #fff; + background: var(--mat-panel); border: 1px solid var(--mat-line); - border-radius: 12px; - padding: 10px 12px; + border-radius: 4px; + flex-shrink: 0; + padding: 8px; + transition: border-color 120ms ease, box-shadow 120ms ease; +} + +.mat-stage-box.is-over { + border-color: var(--mat-primary); + box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.08); +} + +.mat-stage-box.is-over .mat-stage-seats { + background: var(--zs-001-02); } .mat-stage-box-head { @@ -1028,9 +1464,12 @@ } .mat-stage-box-no { - color: #33415c; + background: var(--zs-001-03); + border-radius: 2px; + color: var(--mat-primary); font-size: 12px; font-weight: 700; + padding: 3px 8px; } .mat-stage-box-ops { @@ -1044,8 +1483,8 @@ align-items: center; background: transparent; border: 0; - border-radius: 6px; - color: var(--mat-ink-muted); + border-radius: 2px; + color: var(--fs-004-07); cursor: pointer; display: inline-flex; height: 24px; @@ -1054,7 +1493,7 @@ } .mat-stage-box-ops button:hover:not(:disabled) { - background: #eef0f5; + background: var(--fs-004-03); color: var(--mat-ink); } @@ -1064,32 +1503,114 @@ } .mat-stage-goal { - font-size: 12.5px; + font-size: 12px; } .mat-stage-seats { + border-radius: 2px; display: flex; flex-direction: column; - gap: 6px; + gap: 8px; margin-top: 8px; + min-height: 44px; + padding: 2px; + transition: background 120ms ease; +} + +.mat-stage-seat-empty { + border: 1px dashed var(--mat-line-strong); + border-radius: 2px; + color: var(--fs-004-07); + font-size: 12px; + padding: 12px; + text-align: center; } .mat-seat-row { - align-items: center; - background: var(--mat-tint); - border: 1px solid var(--mat-line-soft); - border-radius: 8px; - color: var(--mat-ink); + align-items: stretch; + background: var(--mat-panel); + border: 1px solid var(--mat-line); + border-radius: 2px; display: flex; - font-size: 13px; - font-weight: 500; - gap: 8px; - padding: 7px 6px 7px 12px; + overflow: hidden; +} + +.mat-seat-row.is-dragging { + box-shadow: var(--mat-shadow-2); + opacity: 0.6; + z-index: 5; +} + +.mat-seat-row-grip { + align-items: center; + background: var(--fs-004-03); + border: 0; + border-right: 1px solid var(--mat-line); + color: var(--fs-004-07); + cursor: grab; + display: inline-flex; + flex-shrink: 0; + justify-content: center; + touch-action: none; + width: 28px; +} + +.mat-seat-row-grip:hover { + color: var(--mat-primary); +} + +.mat-seat-row-no { + align-self: center; + background: var(--fs-004-03); + border-radius: 2px; + color: var(--fs-004-09); + flex-shrink: 0; + font-family: var(--mat-font-num); + font-size: 12px; + font-weight: 700; + height: 22px; + line-height: 22px; + margin-left: 8px; + text-align: center; + width: 22px; +} + +.mat-seat-row-icon { + align-items: center; + align-self: center; + background: var(--zs-001-03); + border-radius: 2px; + color: var(--mat-primary); + display: inline-flex; + flex-shrink: 0; + height: 24px; + justify-content: center; + margin-left: 8px; + width: 24px; +} + +.mat-seat-row-copy { + display: flex; + flex: 1; + flex-direction: column; + gap: 1px; + justify-content: center; + min-width: 0; + padding: 8px; } .mat-seat-row-name { - flex: 1; - min-width: 0; + color: var(--mat-ink); + font-size: 14px; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mat-seat-row-desc { + color: var(--fs-004-07); + font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1097,16 +1618,18 @@ .mat-seat-row-ops { align-items: center; + border-left: 1px solid var(--mat-line); display: flex; gap: 2px; + padding: 0 4px; } .mat-seat-row-ops button { align-items: center; background: transparent; border: 0; - border-radius: 6px; - color: var(--mat-ink-muted); + border-radius: 2px; + color: var(--fs-004-07); cursor: pointer; display: inline-flex; height: 24px; @@ -1115,8 +1638,8 @@ } .mat-seat-row-ops button:hover:not(:disabled) { - background: #e6ebf5; - color: #1b3a8a; + background: var(--fs-004-03); + color: var(--mat-primary); } .mat-seat-row-ops button:disabled { @@ -1124,82 +1647,324 @@ opacity: 0.35; } -.mat-stage-add { - margin-top: 8px; -} - -.mat-stage-new { +/* 「新建阶段」落区（§3.1.2 占位卡片：虚线 #DBDBDB，hover 红） */ +.mat-stage-dropzone { align-items: center; - background: transparent; - border: 1px dashed #b9c6dd; - border-radius: 10px; - color: var(--mat-ink-muted); + background: var(--mat-panel); + border: 1.5px dashed var(--mat-line-strong); + border-radius: 4px; + color: var(--fs-004-07); cursor: pointer; display: flex; font: inherit; - font-size: 12.5px; - gap: 6px; + font-size: 14px; + gap: 8px; justify-content: center; - padding: 9px; - transition: border-color 120ms ease, color 120ms ease; + padding: 12px; + transition: border-color 120ms ease, background 120ms ease, color 120ms ease; + width: 100%; } -.mat-stage-new:hover { - border-color: #7c9cf5; - color: #0052d9; +.mat-stage-dropzone:hover:not(:disabled) { + border-color: var(--mat-primary); + color: var(--mat-primary); +} + +.mat-stage-dropzone.is-over { + background: var(--zs-001-02); + border-color: var(--mat-primary); + color: var(--mat-primary); +} + +.mat-stage-dropzone:disabled { + cursor: not-allowed; + opacity: 0.5; } .mat-stage-empty { - border: 1px dashed #b9c6dd; - border-radius: 10px; - color: var(--mat-ink-muted); - font-size: 12.5px; + border: 1px dashed var(--mat-line-strong); + border-radius: 4px; + color: var(--fs-004-07); + font-size: 14px; margin: 0; - padding: 22px 16px; + padding: 24px 16px; text-align: center; } -.mat-editor-preview { - background: var(--mat-tint); - border: 1px solid var(--mat-line-soft); - border-radius: 12px; - overflow-x: auto; - padding: 13px; +/* ---------- 拖拽浮层（二级阴影） ---------- */ + +.mat-drag-overlay { + align-items: center; + background: var(--mat-panel); + border: 1px solid var(--mat-primary); + border-radius: 2px; + box-shadow: var(--mat-shadow-2); + color: var(--mat-ink); + display: flex; + font-size: 14px; + font-weight: 600; + gap: 4px; + padding: 8px 12px; } -.mat-editor-footer { +.mat-drag-overlay svg { + color: var(--mat-primary); +} + +/* ---------- 保存确认弹窗（§17：4px · 三级阴影 · 红竖条标题） ---------- */ + +.mat-confirm-dialog.t-dialog, +.mat-confirm-dialog .t-dialog { + border-radius: 4px; +} + +.mat-confirm-dialog .t-dialog__position { + padding-top: 8vh; +} + +.mat-confirm-dialog .t-dialog__header { + font-weight: 700; +} + +.mat-confirm-dialog .t-dialog__header-content::before { + background: var(--mat-primary); + content: ""; + display: inline-block; + height: 16px; + margin-right: 8px; + vertical-align: -3px; + width: 3px; +} + +.mat-confirm { + display: flex; + flex-direction: column; + gap: 16px; +} + +.mat-confirm-grid { + display: grid; + gap: 12px; + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.mat-confirm-grid > div { + background: var(--fs-004-02); + border: 1px solid var(--mat-line); + border-radius: 4px; + padding: 12px 16px; +} + +.mat-confirm-grid span { + color: var(--fs-004-07); + display: block; + font-size: 12px; + margin-bottom: 4px; +} + +.mat-confirm-grid strong { + color: var(--mat-ink); + font-size: 14px; + font-weight: 600; +} + +.mat-confirm-flow { + background: var(--fs-004-02); + border: 1px solid var(--mat-line); + border-radius: 4px; + overflow-x: auto; + padding: 16px; +} + +.mat-confirm-legend { + align-items: center; + color: var(--mat-ink-soft); + display: flex; + flex-wrap: wrap; + font-size: 12px; + gap: 8px 24px; + margin: 0; + padding-left: 2px; +} + +.mat-confirm-legend span { + align-items: center; + display: inline-flex; + gap: 4px; +} + +.mat-confirm-legend i { + font-style: normal; + line-height: 1; +} + +.mat-confirm-prompt { + border-top: 1px dashed var(--mat-line); + padding-top: 12px; +} + +.mat-confirm-prompt span { + color: var(--mat-ink-soft); + display: block; + font-size: 14px; + font-weight: 600; + margin-bottom: 8px; +} + +.mat-confirm-prompt p { + background: var(--fs-004-02); + border: 1px solid var(--mat-line); + border-radius: 4px; + color: var(--mat-ink-soft); + font-size: 12px; + line-height: 1.7; + margin: 0; + max-height: 120px; + overflow-y: auto; + padding: 8px 12px; + white-space: pre-wrap; +} + +.mat-confirm-footer { + display: flex; + gap: 8px; + justify-content: flex-end; +} + +/* ---------- 执行设置弹窗（表单收纳：频率/指令/总控/启用） ---------- */ + +.mat-settings-dialog.t-dialog, +.mat-settings-dialog .t-dialog { + border-radius: 4px; +} + +.mat-settings-dialog .t-dialog__header { + font-weight: 700; +} + +.mat-settings-dialog .t-dialog__header-content::before { + background: var(--mat-primary); + content: ""; + display: inline-block; + height: 16px; + margin-right: 8px; + vertical-align: -3px; + width: 3px; +} + +.mat-settings { + display: flex; + flex-direction: column; + gap: 12px; +} + +/* ---------- 智能体详情抽屉（候选池 / 编排席位共用） ---------- */ + +.mat-agent-drawer.t-drawer { + border-radius: 4px 0 0 4px; +} + +.mat-agent-drawer .t-drawer__content-wrapper { + border-top: 3px solid var(--mat-primary); + padding: 0; +} + +.mat-agent-drawer .t-drawer__body { + padding-top: 16px; +} + +.mat-agent-header { align-items: center; - border-top: 1px solid var(--mat-line-soft); display: flex; gap: 12px; - justify-content: space-between; - margin-top: 18px; - padding-top: 14px; + padding-right: 44px; + width: 100%; } -.mat-editor-hint { - color: var(--mat-ink-muted); +.mat-agent-glyph { + align-items: center; + background: var(--zs-001-03); + border-radius: 4px; + color: var(--mat-primary); + display: inline-flex; + flex-shrink: 0; + height: 36px; + justify-content: center; + width: 36px; +} + +.mat-agent-heading { + flex: 1; + min-width: 0; +} + +.mat-agent-heading h3 { + color: var(--mat-ink); + font-size: 16px; + font-weight: 700; + margin: 0 0 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.mat-agent-heading p { + color: var(--fs-004-07); font-size: 12px; - min-height: 18px; + margin: 0; } -.mat-editor-footer-ops { +.mat-agent { display: flex; - gap: 10px; + flex-direction: column; + gap: 16px; +} + +.mat-agent-loading { + border: 1px dashed var(--mat-line-strong); + border-radius: 4px; + color: var(--fs-004-07); + font-size: 12px; + margin: 0; + padding: 24px 16px; + text-align: center; +} + +.mat-agent-section { + display: flex; + flex-direction: column; +} + +.mat-agent-desc { + background: var(--fs-004-02); + border: 1px solid var(--mat-line); + border-radius: 4px; + color: var(--mat-ink-soft); + font-size: 14px; + line-height: 1.7; + margin: 0; + padding: 12px 16px; + white-space: pre-wrap; +} + +.mat-agent-tags { + display: flex; + flex-wrap: wrap; + gap: 8px; } /* ---------- 动画 ---------- */ @keyframes mat-pulse { - 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 82, 217, 0.35); } - 50% { box-shadow: 0 0 0 4px rgba(0, 82, 217, 0.12); } + 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.35); } + 50% { box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.12); } } @keyframes mat-rotate { to { transform: rotate(360deg); } } -/* ---------- 响应式 ---------- */ +/* ---------- 响应式（§6.2：按比例降一阶） ---------- */ @media (max-width: 1080px) { .mat-grid { @@ -1208,28 +1973,50 @@ } @media (max-width: 880px) { - .mat-hero { - padding: 26px 24px 22px; + .mat-page-head, + .mat-stats .mat-stat { + padding-left: 16px; + padding-right: 16px; } - .mat-hero-side { - align-items: flex-start; + .mat-stats { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .mat-stat:nth-child(3) { + border-left: 0; + } + + .mat-stat:nth-child(n + 3) { + border-top: 1px solid var(--mat-line); } .mat-body { - padding: 16px 24px 36px; + padding: 16px; } - .mat-editor-pane--wide { + .mat-edit-header { + padding: 12px 16px; + } + + .mat-edit-body { + padding: 16px; + } + + .mat-edit-form { + grid-template-columns: 1fr; + } + + .mat-edit-orchestra { grid-template-columns: 1fr; } .mat-pool { - max-height: 240px; + max-height: 260px; min-height: 0; } - .mat-field-row { + .mat-confirm-grid { grid-template-columns: 1fr; } diff --git a/frontend-web/src/pages/official-task-analysis/TaskAnalysisDetailPage.tsx b/frontend-web/src/pages/official-task-analysis/TaskAnalysisDetailPage.tsx new file mode 100644 index 00000000..46652f02 --- /dev/null +++ b/frontend-web/src/pages/official-task-analysis/TaskAnalysisDetailPage.tsx @@ -0,0 +1,340 @@ +/** + * 任务分析 · 详情页：左侧执行记录（定时 / 手动），右侧按选中运行回放流程图 + * （业务链风格节点状态 + 耗时，5 秒自动刷新），点击智能体节点打开执行过程抽屉。 + */ + +import { + ArrowLeft, + CalendarClock, + CircleAlert, + GitBranch, + MessageSquareText, + Pencil, + Pause, + Play, + RefreshCw, + Zap, +} from "lucide-react"; +import { useEffect, useMemo, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { Button, Switch, Tag } from "tdesign-react"; +import { toast } from "sonner"; + +import { OFFICIAL_DEERFLOW_ROUTE_PREFIX } from "@/core/official-deerflow/routes"; +import { + formatDateTime, + formatDuration, + formatRelative, +} from "@/pages/official-multi-agent-tasks/utils"; + +import BindingDialog from "./components/BindingDialog"; +import SeatProcessDrawer from "./components/SeatProcessDrawer"; +import { ChainFlowDiagram } from "@/roundtable-planning/components/ChainFlowDiagram"; +import { taskBadgeOf } from "./badge"; +import { useTaTaskActions, useTaTasks, useTaTaskRuns } from "./store"; + +const RUN_STATUS_TEXT: Record<string, string> = { + succeeded: "成功", + failed: "失败", + running: "执行中", + pending: "排队中", +}; + +const RUN_STATUS_THEME: Record<string, "success" | "danger" | "warning" | "default"> = { + succeeded: "success", + failed: "danger", + running: "warning", + pending: "default", +}; + +export default function TaskAnalysisDetailPage({ + routeTaskId, +}: { + routeTaskId: string | null; +}) { + const navigate = useNavigate(); + const { views, isLoading } = useTaTasks(); + const actions = useTaTaskActions(); + const taskView = views.find(({ task }) => task.id === routeTaskId) ?? null; + const task = taskView?.task ?? null; + const { runs, isLoading: runsLoading } = useTaTaskRuns(task?.id ?? null); + + const [selectedRunId, setSelectedRunId] = useState<string | null>(null); + const [seatAgentId, setSeatAgentId] = useState<string | null>(null); + const [bindingVisible, setBindingVisible] = useState(false); + const [busy, setBusy] = useState(false); + + // 默认选中最近一次运行；新触发的运行自动跟随。 + useEffect(() => { + if (!runs.length) return; + if (!selectedRunId || !runs.some((run) => run.id === selectedRunId)) { + setSelectedRunId(runs[0]!.id); + } + }, [runs, selectedRunId]); + + const selectedRun = useMemo( + () => runs.find((run) => run.id === selectedRunId) ?? runs[0] ?? null, + [runs, selectedRunId], + ); + + const backToList = () => { + navigate(`${OFFICIAL_DEERFLOW_ROUTE_PREFIX}/workspace/task-analysis`); + }; + + const runTrigger = async (manual: boolean) => { + if (!task) return; + setBusy(true); + try { + if (manual) { + await actions.triggerManualRun.mutateAsync(task.id); + toast.success("已发起手动执行（总控问答）"); + } else { + await actions.triggerRun.mutateAsync(task.id); + toast.success("已触发定时执行"); + } + setSelectedRunId(null); + } catch { + toast.error("任务未绑定分析方案"); + } finally { + setBusy(false); + } + }; + + const runToggle = async () => { + if (!task?.binding) return; + setBusy(true); + try { + await actions.setEnabled.mutateAsync({ + taskId: task.id, + enabled: !task.binding?.enabled, + }); + toast.success(task.binding?.enabled ? "已暂停" : "已恢复"); + } catch { + toast.error("操作失败，请重试"); + } finally { + setBusy(false); + } + }; + + if (!isLoading && !task) { + return ( + <section className="ta-page"> + <div className="ta-state ta-state--empty"> + <h3>任务不存在或已被删除</h3> + <Button theme="primary" onClick={backToList}> + 返回任务列表 + </Button> + </div> + </section> + ); + } + + const binding = task?.binding ?? null; + const taskBadge = task && taskView ? taskBadgeOf(task, taskView.runs) : null; + const live = selectedRun?.status === "running" || selectedRun?.status === "pending"; + + return ( + <section className="ta-page ta-detail-page"> + <header className="ta-detail-head"> + <button + aria-label="返回任务列表" + className="ta-back" + onClick={backToList} + type="button" + > + <ArrowLeft size={18} /> + </button> + <div className="ta-detail-heading"> + <h1> + {task?.name ?? "…"} + <em>{task?.sourceTaskId}</em> + </h1> + <p> + {binding ? ( + <> + <GitBranch aria-hidden="true" size={13} /> + {binding.chainTitle} · {binding.cronText} + {binding.directionNotes.length > 0 && + ` · ${binding.directionNotes.length} 条方向备注`} + </> + ) : ( + task?.description + )} + </p> + </div> + {taskBadge && ( + <Tag theme={taskBadge.theme} variant="light"> + {taskBadge.label} + </Tag> + )} + {binding && ( + <Switch value={binding.enabled} onChange={() => void runToggle()} /> + )} + <div className="ta-detail-ops"> + {binding && ( + <> + <Button + disabled={busy} + loading={busy} + theme="primary" + onClick={() => void runTrigger(false)} + > + <Zap aria-hidden="true" size={15} /> + 立即执行 + </Button> + <Button variant="outline" disabled={busy} onClick={() => void runTrigger(true)}> + <MessageSquareText aria-hidden="true" size={15} /> + 模拟手动执行 + </Button> + </> + )} + <Button variant="outline" onClick={() => setBindingVisible(true)}> + <Pencil aria-hidden="true" size={15} /> + {binding ? "编辑绑定" : "配置分析"} + </Button> + </div> + </header> + + {!binding ? ( + <div className="ta-detail-empty"> + <GitBranch aria-hidden="true" size={26} /> + <h3>尚未配置分析方案</h3> + <p>绑定业务链与内容块映射后，这里将展示执行记录与各智能体的执行流程。</p> + <Button theme="primary" onClick={() => setBindingVisible(true)}> + 配置分析 + </Button> + </div> + ) : ( + <div className="ta-detail-layout"> + <aside className="ta-runs"> + <header className="ta-runs-head"> + <h2>执行记录</h2> + <span> + <RefreshCw aria-hidden="true" className={live ? "ta-spin" : undefined} size={12} /> + 每 5 秒刷新 + </span> + </header> + <div className="ta-runs-list"> + {runsLoading && !runs.length ? ( + <p className="ta-runs-empty">正在加载执行记录…</p> + ) : runs.length ? ( + runs.map((run) => { + const active = selectedRun?.id === run.id; + const duration = run.finishedAt + ? formatDuration( + new Date(run.finishedAt).getTime() - new Date(run.startedAt).getTime(), + ) + : null; + return ( + <button + className={`ta-run-item${active ? " is-active" : ""}`} + key={run.id} + onClick={() => setSelectedRunId(run.id)} + type="button" + > + <span className="ta-run-item-top"> + {run.trigger === "manual" ? ( + <MessageSquareText aria-hidden="true" size={13} /> + ) : ( + <CalendarClock aria-hidden="true" size={13} /> + )} + <b>{run.trigger === "manual" ? "手动执行" : "定时执行"}</b> + <Tag size="small" theme={RUN_STATUS_THEME[run.status] ?? "default"} variant="light"> + {RUN_STATUS_TEXT[run.status] ?? run.status} + </Tag> + </span> + <span className="ta-run-item-time"> + {formatDateTime(run.startedAt)} · {duration ?? "进行中"} + </span> + {run.trigger === "manual" && run.manualSummary && ( + <span className="ta-run-item-summary">{run.manualSummary}</span> + )} + {run.trigger === "schedule" && ( + <span className="ta-run-item-blocks"> + 内容块 {run.blockStates.filter((b) => b.state === "done").length}/ + {run.blockStates.length} + </span> + )} + </button> + ); + }) + ) : ( + <p className="ta-runs-empty">还没有执行记录，点「立即执行」体验完整流程。</p> + )} + </div> + </aside> + + <section className="ta-flow-panel"> + {selectedRun ? ( + <> + <header className="ta-flow-head"> + <h2> + 执行流程 + <small> + {selectedRun.trigger === "manual" ? "手动执行" : "定时执行"} ·{" "} + {formatRelative(selectedRun.startedAt)} + {selectedRun.status === "running" && + ` · 阶段 ${Math.min(selectedRun.stageIndex + 1, selectedRun.stageTotal)}/${selectedRun.stageTotal} 执行中`} + </small> + </h2> + <span className="ta-flow-legend"> + <i className="ta-dot is-done" /> 完成 + <i className="ta-dot is-running" /> 执行中 + <i className="ta-dot is-waiting" /> 等待 + <i className="ta-dot is-failed" /> 失败 + </span> + </header> + <div className="ta-flow-canvas"> + <ChainFlowDiagram + className="ta-flow-diagram" + onNodeClick={(agentId) => setSeatAgentId(agentId)} + seatStates={selectedRun.seatInfos} + stages={selectedRun.stages.map((stage, index) => ({ + seats: stage.map((agentId) => ({ + agent_id: agentId, + name: selectedRun.seatNames[agentId] ?? agentId, + })), + goal: selectedRun.stageGoals?.[index] ?? null, + }))} + /> + </div> + {selectedRun.error && ( + <p className="ta-flow-error"> + <CircleAlert aria-hidden="true" size={14} /> + {selectedRun.error} + </p> + )} + </> + ) : ( + <div className="ta-flow-panel-empty">选择左侧一条执行记录查看流程</div> + )} + </section> + </div> + )} + + <SeatProcessDrawer + onClose={() => setSeatAgentId(null)} + run={selectedRun} + seatAgentId={seatAgentId} + task={task ?? undefined} + /> + + <BindingDialog + onClose={() => setBindingVisible(false)} + onSubmit={async (payload) => { + if (!task) return; + try { + await actions.bind.mutateAsync({ taskId: task.id, payload }); + toast.success(binding ? "绑定已更新" : "分析方案已绑定"); + setBindingVisible(false); + } catch { + toast.error("保存失败，请重试"); + } + }} + submitting={actions.bind.isPending} + task={task} + visible={bindingVisible} + /> + </section> + ); +} diff --git a/frontend-web/src/pages/official-task-analysis/TaskAnalysisPage.tsx b/frontend-web/src/pages/official-task-analysis/TaskAnalysisPage.tsx new file mode 100644 index 00000000..9b96a881 --- /dev/null +++ b/frontend-web/src/pages/official-task-analysis/TaskAnalysisPage.tsx @@ -0,0 +1,460 @@ +/** + * 任务分析 · 列表页：对方系统推送过来的外部任务 + 我们的绑定状态。 + * 任务卡片沿用多智能体定时任务的卡片视觉（浅红规范）。 + */ + +import { + CalendarClock, + CircleAlert, + CircleCheck, + Clock3, + GitBranch, + Link2, + Network, + Pencil, + Pause, + Play, + Plus, + Search, + Trash2, + Zap, +} from "lucide-react"; +import { useMemo, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { + Button, + DialogPlugin, + Input, + Popconfirm, + Switch, + Tabs, + Tag, +} from "tdesign-react"; +import { toast } from "sonner"; + +import { OFFICIAL_DEERFLOW_ROUTE_PREFIX } from "@/core/official-deerflow/routes"; + +import AgentFlow from "@/pages/official-multi-agent-tasks/components/AgentFlow"; +import type { MatSeat } from "@/pages/official-multi-agent-tasks/types"; +import { + formatDateTime, + formatRelative, +} from "@/pages/official-multi-agent-tasks/utils"; + +import BindingDialog from "./components/BindingDialog"; +import CreateTaskDialog, { + type TaCreateTaskPayload, +} from "./components/CreateTaskDialog"; +import { chainStagesOf, useTaTaskActions, useTaTasks } from "./store"; +import type { TaTask, TaTaskViewLike } from "./page-types"; +import { taskBadgeOf } from "./badge"; + +import "./task-analysis.css"; + +type StatusFilter = "all" | "unbound" | "enabled" | "paused" | "failed"; + +function isTaskLive(runs: TaTaskViewLike["runs"]) { + return runs.some((run) => run.status === "running" || run.status === "pending"); +} + +export default function TaskAnalysisPage() { + const navigate = useNavigate(); + const { views, isLoading } = useTaTasks(); + const actions = useTaTaskActions(); + const [search, setSearch] = useState(""); + const [filter, setFilter] = useState<StatusFilter>("all"); + const [bindingTask, setBindingTask] = useState<TaTask | null>(null); + const [bindingVisible, setBindingVisible] = useState(false); + const [createVisible, setCreateVisible] = useState(false); + const [busyTaskId, setBusyTaskId] = useState<string | null>(null); + + const visibleViews = useMemo(() => { + const keyword = search.trim().toLowerCase(); + return views.filter(({ task, runs }) => { + const lastStatus = runs[0]?.status ?? null; + const bound = !!task.binding; + const live = isTaskLive(runs); + if (filter === "unbound" && bound) return false; + if (filter === "enabled" && (!bound || !task.binding!.enabled || live)) return false; + if (filter === "paused" && (!bound || task.binding!.enabled)) return false; + if (filter === "failed" && lastStatus !== "failed") return false; + if (!keyword) return true; + return ( + task.name.toLowerCase().includes(keyword) || + task.description.toLowerCase().includes(keyword) || + task.sourceTaskId.toLowerCase().includes(keyword) + ); + }); + }, [views, search, filter]); + + const stats = useMemo( + () => ({ + total: views.length, + unbound: views.filter(({ task }) => !task.binding).length, + enabled: views.filter(({ task }) => task.binding?.enabled).length, + failed: views.filter(({ runs }) => runs[0]?.status === "failed").length, + }), + [views], + ); + + const openDetail = (taskId: string) => { + navigate(`${OFFICIAL_DEERFLOW_ROUTE_PREFIX}/workspace/task-analysis/${encodeURIComponent(taskId)}`); + }; + + const openBinding = (task: TaTask) => { + setBindingTask(task); + setBindingVisible(true); + }; + + const handleCreate = async (payload: TaCreateTaskPayload) => { + try { + const created = await actions.createTask.mutateAsync({ + name: payload.name, + sourceTaskId: payload.sourceTaskId, + description: payload.description, + }); + await actions.bind.mutateAsync({ taskId: created.id, payload: payload.binding }); + toast.success("任务已创建并绑定分析方案"); + setCreateVisible(false); + } catch { + toast.error("创建失败，请重试"); + } + }; + + const handleBind = async (payload: Parameters<typeof actions.bind.mutateAsync>[0]["payload"]) => { + if (!bindingTask) return; + try { + await actions.bind.mutateAsync({ taskId: bindingTask.id, payload }); + toast.success(bindingTask.binding ? "绑定已更新" : "分析方案已绑定"); + setBindingVisible(false); + setBindingTask(null); + } catch { + toast.error("保存失败，请重试"); + } + }; + + const runTrigger = async (taskId: string) => { + setBusyTaskId(taskId); + try { + await actions.triggerRun.mutateAsync(taskId); + toast.success("已触发执行"); + openDetail(taskId); + } catch { + toast.error("触发失败：任务未绑定分析方案"); + } finally { + setBusyTaskId(null); + } + }; + + const runToggle = async (task: TaTask) => { + setBusyTaskId(task.id); + try { + await actions.setEnabled.mutateAsync({ taskId: task.id, enabled: !task.binding?.enabled }); + toast.success(task.binding?.enabled ? "已暂停" : "已恢复"); + } catch { + toast.error("操作失败，请重试"); + } finally { + setBusyTaskId(null); + } + }; + + const confirmDelete = (task: TaTask) => { + const dialog = DialogPlugin.confirm({ + header: "删除外部任务", + body: `删除「${task.name}」将同时清除其绑定与全部执行记录（对应对外删除接口语义），确定删除？`, + confirmBtn: { content: "删除", theme: "danger" }, + cancelBtn: "取消", + onConfirm: () => { + dialog.destroy(); + void actions.removeTask.mutateAsync(task.id).then(() => { + toast.success("任务已删除"); + }); + }, + onClose: () => dialog.destroy(), + }); + }; + + return ( + <section className="ta-page"> + <header className="ta-page-head"> + <div className="ta-page-head-copy"> + <h1>任务分析定时</h1> + <p> + 外部系统任务接入多智能体定时分析：绑定业务链与内容块映射，按计划执行并沉淀时间线版本。 + </p> + </div> + <div className="ta-page-head-actions"> + <Button + variant="outline" + onClick={() => { + const unbound = views.find(({ task }) => !task.binding)?.task; + if (unbound) openBinding(unbound); + else toast.info("当前任务均已绑定分析方案"); + }} + > + 配置未绑定任务 + </Button> + <Button theme="primary" onClick={() => setCreateVisible(true)}> + <Plus aria-hidden="true" size={15} /> + 新建任务 + </Button> + </div> + </header> + + <div className="ta-stats" aria-label="任务统计"> + <div className="ta-stat"> + <span className="ta-stat-icon is-primary" aria-hidden="true"> + <Network size={18} /> + </span> + <div className="ta-stat-copy"> + <strong>{stats.total}</strong> + <span>外部任务</span> + </div> + </div> + <div className="ta-stat"> + <span className="ta-stat-icon is-warning" aria-hidden="true"> + <Link2 size={18} /> + </span> + <div className="ta-stat-copy"> + <strong>{stats.unbound}</strong> + <span>未配置</span> + </div> + </div> + <div className="ta-stat"> + <span className="ta-stat-icon is-success" aria-hidden="true"> + <CircleCheck size={18} /> + </span> + <div className="ta-stat-copy"> + <strong>{stats.enabled}</strong> + <span>已启用</span> + </div> + </div> + <div className="ta-stat"> + <span className="ta-stat-icon is-danger" aria-hidden="true"> + <CircleAlert size={18} /> + </span> + <div className="ta-stat-copy"> + <strong>{stats.failed}</strong> + <span>最近失败</span> + </div> + </div> + </div> + + <div className="ta-body"> + <div className="ta-toolbar"> + <div className="ta-toolbar-search"> + <Input + clearable + placeholder="搜索任务名称 / 简介 / 对方任务号" + prefixIcon={<Search aria-hidden="true" size={15} />} + value={search} + onChange={(value) => setSearch(String(value ?? ""))} + /> + </div> + <Tabs + className="ta-toolbar-tabs" + value={filter} + onChange={(value) => setFilter(value as StatusFilter)} + > + <Tabs.TabPanel label="全部" value="all" /> + <Tabs.TabPanel label="未配置" value="unbound" /> + <Tabs.TabPanel label="已启用" value="enabled" /> + <Tabs.TabPanel label="已暂停" value="paused" /> + <Tabs.TabPanel label="最近失败" value="failed" /> + </Tabs> + </div> + + {isLoading ? ( + <div className="ta-state"> + <Clock3 aria-hidden="true" className="ta-spin" size={18} /> + 正在加载外部任务… + </div> + ) : visibleViews.length ? ( + <div className="ta-grid"> + {visibleViews.map(({ task, runs }) => { + const badge = taskBadgeOf(task, runs); + const binding = task.binding; + const lastRun = runs[0] ?? null; + const busy = busyTaskId === task.id; + const stages = binding ? chainStagesOf(binding) : []; + const seats: MatSeat[] = stages + .flat() + .filter((id, index, all) => all.indexOf(id) === index) + .map((id) => ({ + agent_id: id, + name: lastRun?.seatNames[id] ?? id, + })); + return ( + <article className="ta-card" key={task.id}> + <header className="ta-card-head" onClick={() => openDetail(task.id)}> + <span className="ta-card-glyph" aria-hidden="true"> + <Network size={17} /> + </span> + <div className="ta-card-title"> + <h3> + {task.name} + <em>{task.sourceTaskId}</em> + </h3> + <p>{task.description}</p> + </div> + <Tag size="small" theme={badge.theme} variant="light"> + {badge.label} + </Tag> + </header> + + {binding ? ( + <> + <div className="ta-card-binding" onClick={() => openDetail(task.id)}> + <span> + <GitBranch aria-hidden="true" size={13} /> + {binding.chainTitle} + </span> + <span> + <CalendarClock aria-hidden="true" size={13} /> + {binding.cronText} + </span> + </div> + <div className="ta-card-flow" onClick={() => openDetail(task.id)}> + <AgentFlow seats={seats} size="sm" stages={stages} /> + </div> + </> + ) : ( + <button className="ta-card-unbound" onClick={() => openBinding(task)} type="button"> + <GitBranch aria-hidden="true" size={15} /> + 配置分析：选择业务链 · 内容块映射 · 执行频率 + </button> + )} + + <footer className="ta-card-foot"> + <div className="ta-card-meta"> + <span> + 下次{" "} + {binding?.enabled + ? formatDateTime(nextRunAt(binding.cron)) + : binding + ? "已暂停" + : "未配置"} + </span> + <span> + 上次 {lastRun ? formatRelative(lastRun.startedAt) : "未执行"} + {lastRun && lastRun.status !== "pending" && ( + <em className={`ta-run-text is-${lastRun.status}`}> + · {lastRun.status === "succeeded" ? "成功" : lastRun.status === "failed" ? "失败" : "执行中"} + </em> + )} + </span> + </div> + <div className="ta-card-ops"> + {binding && ( + <> + <Button + disabled={busy} + loading={busy} + size="small" + theme="primary" + variant="text" + onClick={() => void runTrigger(task.id)} + > + <Zap aria-hidden="true" size={14} /> + 立即执行 + </Button> + <Button + disabled={busy} + size="small" + variant="text" + onClick={() => void runToggle(task)} + > + {binding.enabled ? ( + <Pause aria-hidden="true" size={14} /> + ) : ( + <Play aria-hidden="true" size={14} /> + )} + {binding.enabled ? "暂停" : "恢复"} + </Button> + <Button size="small" variant="text" onClick={() => openBinding(task)}> + <Pencil aria-hidden="true" size={14} /> + 编辑绑定 + </Button> + </> + )} + <Popconfirm + content="删除后绑定与执行记录一并清除，确定？" + placement="bottom-right" + theme="danger" + onConfirm={() => confirmDelete(task)} + > + <Button className="ta-danger-btn" size="small" variant="text"> + <Trash2 aria-hidden="true" size={14} /> + </Button> + </Popconfirm> + </div> + </footer> + </article> + ); + })} + </div> + ) : ( + <div className="ta-state ta-state--empty"> + <span className="ta-state-glyph" aria-hidden="true"> + <Network size={22} /> + </span> + <h3>{views.length ? "没有符合条件的任务" : "还没有外部任务"}</h3> + <p> + {views.length + ? "换个关键词或筛选条件试试。" + : "对方系统创建任务并调用创建接口后，任务会出现在这里。"} + </p> + </div> + )} + + <p className="ta-footnote"> + <CircleAlert aria-hidden="true" size={13} /> + 前端演示阶段：任务与执行数据保存在本浏览器，业务链来自真实接口；后端服务接入后自动切换。 + </p> + </div> + + <CreateTaskDialog + onClose={() => setCreateVisible(false)} + onSubmit={handleCreate} + submitting={actions.createTask.isPending} + visible={createVisible} + /> + + <BindingDialog + onClose={() => { + setBindingVisible(false); + setBindingTask(null); + }} + onSubmit={handleBind} + submitting={actions.bind.isPending} + task={bindingTask} + visible={bindingVisible} + /> + </section> + ); +} + +/** 简易下次执行时间（覆盖本页生成的 cron 形态）。 */ +function nextRunAt(cron: string): string | null { + const parts = cron.trim().split(/\s+/); + if (parts.length !== 5) return null; + const [min, hour, , , wd] = parts; + const now = new Date(); + const candidate = new Date(now); + const minute = parseInt(min ?? "0", 10); + const hourNum = parseInt(hour ?? "9", 10); + if (`${hour}` === "*") { + candidate.setMinutes(minute, 0, 0); + if (candidate <= now) candidate.setHours(candidate.getHours() + 1); + } else if (`${wd}` !== "*") { + const weekday = parseInt(wd ?? "1", 10); + candidate.setHours(hourNum, minute, 0, 0); + let delta = (weekday - candidate.getDay() + 7) % 7; + if (delta === 0 && candidate <= now) delta = 7; + candidate.setDate(candidate.getDate() + delta); + } else { + candidate.setHours(hourNum, minute, 0, 0); + if (candidate <= now) candidate.setDate(candidate.getDate() + 1); + } + return candidate.toISOString(); +} diff --git a/frontend-web/src/pages/official-task-analysis/badge.ts b/frontend-web/src/pages/official-task-analysis/badge.ts new file mode 100644 index 00000000..fcbd9609 --- /dev/null +++ b/frontend-web/src/pages/official-task-analysis/badge.ts @@ -0,0 +1,19 @@ +import type { TaRunView, TaTask } from "./types"; + +export interface TaBadge { + label: string; + theme: "success" | "warning" | "danger" | "default"; +} + +/** 任务卡右上角状态徽标：最近一次执行优先，其次启停，未绑定给引导态。 */ +export function taskBadgeOf(task: TaTask, runs: TaRunView[]): TaBadge { + const status = runs[0]?.status; + if (status === "running" || status === "pending") { + return { label: "执行中", theme: "warning" }; + } + if (!task.binding) return { label: "未配置", theme: "default" }; + if (!task.binding.enabled) return { label: "已暂停", theme: "default" }; + if (status === "failed") return { label: "上次失败", theme: "danger" }; + if (status === "succeeded") return { label: "运行正常", theme: "success" }; + return { label: "已启用", theme: "success" }; +} diff --git a/frontend-web/src/pages/official-task-analysis/components/BindingDialog.tsx b/frontend-web/src/pages/official-task-analysis/components/BindingDialog.tsx new file mode 100644 index 00000000..9c7984ee --- /dev/null +++ b/frontend-web/src/pages/official-task-analysis/components/BindingDialog.tsx @@ -0,0 +1,223 @@ +/** + * 绑定配置弹窗：选业务链（真实 /api/roundtable-chains + 内置演示链）→ 配置 + * 对方详情块 → 席位映射 → 执行频率 / 启用 / 总控提示。 + */ + +import { Radio } from "lucide-react"; +import { useEffect, useMemo, useState } from "react"; +import { useQuery } from "@tanstack/react-query"; +import { Button, Dialog, Switch, Textarea } from "tdesign-react"; +import { toast } from "sonner"; + +import { listChains } from "@/roundtable-planning/api/chains"; +import type { BusinessChain } from "@/roundtable-planning/lib/business-chain"; +import { type ScheduleConfig } from "@/components/workspace/scheduled-tasks/schedule-builder"; + +import AgentFlow from "@/pages/official-multi-agent-tasks/components/AgentFlow"; +import SchedulePicker from "@/pages/official-multi-agent-tasks/components/SchedulePicker"; +import type { MatSeat } from "@/pages/official-multi-agent-tasks/types"; +import { + defaultScheduleConfig, + describeScheduleConfig, +} from "@/pages/official-multi-agent-tasks/utils"; + +import type { TaBinding, TaBindingPayload, TaTask } from "../types"; + +/** 内置演示链（种子里用它，保证无后端数据时链路可演示）。 */ +export const SEED_CHAIN: BusinessChain = { + id: "seed-chain-std", + title: "标准舆情分析链（内置）", + description: "采集 + 核查并行 → 研判 → 成稿，演示用内置编排。", + seats: [ + { agent_id: "collector", name: "全网舆情采集" }, + { agent_id: "verifier", name: "数据核查员" }, + { agent_id: "analyst", name: "舆情研判分析" }, + { agent_id: "writer", name: "报告撰写助手" }, + ], + stages: [ + ["collector", "verifier"], + ["analyst"], + ["writer"], + ], + stageGoals: null, + isPublic: true, +}; + +export function chainStages(chain: BusinessChain): string[][] { + if (chain.stages?.length) return chain.stages; + return chain.seats.map((seat) => [seat.agent_id]); +} + +export function chainSeats(chain: BusinessChain): MatSeat[] { + return chain.seats.map((seat) => ({ + agent_id: seat.agent_id, + name: seat.name, + description: seat.description, + })); +} + +/** 模块级空数组：data 未就绪时保持引用稳定，避免 effect 依赖无限循环。 */ +export const NO_CHAINS: BusinessChain[] = []; + +export default function BindingDialog({ + visible, + task, + submitting, + onClose, + onSubmit, +}: { + visible: boolean; + task: TaTask | null; + submitting: boolean; + onClose: () => void; + onSubmit: (payload: TaBindingPayload) => void; +}) { + const [chainId, setChainId] = useState(""); + const [schedule, setSchedule] = useState<ScheduleConfig>(defaultScheduleConfig()); + const [enabled, setEnabled] = useState(true); + const [coordinatorPrompt, setCoordinatorPrompt] = useState(""); + + const { data, isLoading: chainsLoading } = useQuery({ + queryKey: ["ta", "chains"], + queryFn: async () => { + const [mine, publicChains] = await Promise.all([ + listChains("mine").catch(() => [] as BusinessChain[]), + listChains("public").catch(() => [] as BusinessChain[]), + ]); + const byId = new Map<string, BusinessChain>(); + for (const chain of [SEED_CHAIN, ...mine, ...publicChains]) { + if (!byId.has(chain.id)) byId.set(chain.id, chain); + } + return [...byId.values()]; + }, + enabled: visible, + }); + const chains = data ?? NO_CHAINS; + + useEffect(() => { + if (!visible) return; + const binding: TaBinding | null = task?.binding ?? null; + const initialChain = + chains.find((chain) => chain.id === binding?.chainId) ?? + chains[0] ?? + SEED_CHAIN; + setChainId(binding?.chainId ?? initialChain.id); + setEnabled(binding?.enabled ?? true); + setCoordinatorPrompt(binding?.coordinatorPrompt ?? ""); + }, [visible, task, chains]); + + const selectedChain = useMemo( + () => chains.find((chain) => chain.id === chainId) ?? null, + [chains, chainId], + ); + const handleChainChange = (nextId: string) => { + setChainId(nextId); + }; + + const trySubmit = () => { + if (!selectedChain) { + toast.warning("请选择业务链"); + return; + } + onSubmit({ + chainId: selectedChain.id, + chainTitle: selectedChain.title, + schedule, + enabled, + coordinatorPrompt: coordinatorPrompt.trim() || undefined, + }); + }; + + return ( + <Dialog + className="ta-binding-dialog" + closeBtn + closeOnOverlayClick={false} + destroyOnClose + footer={ + <div className="ta-dialog-footer"> + <Button variant="outline" onClick={onClose}> + 取消 + </Button> + <Button loading={submitting} theme="primary" onClick={trySubmit}> + {task?.binding ? "保存绑定" : "创建绑定"} + </Button> + </div> + } + header={task?.binding ? `编辑绑定 · ${task.name}` : `配置分析 · ${task?.name ?? ""}`} + placement="top" + visible={visible} + width={860} + onClose={onClose} + > + <div className="ta-binding"> + <section className="ta-binding-section"> + <header className="ta-binding-section-head"> + <h4>选择业务链</h4> + <span>定时执行将按业务链的多智能体关系（同阶段并行 · 阶段间串行）运行</span> + </header> + {chainsLoading ? ( + <p className="ta-binding-tip">正在加载业务链…</p> + ) : ( + <div className="ta-chain-grid"> + {chains.map((chain) => { + const active = chain.id === chainId; + return ( + <button + className={`ta-chain-card${active ? " is-active" : ""}`} + key={chain.id} + onClick={() => handleChainChange(chain.id)} + type="button" + > + <header> + <Radio aria-hidden="true" size={14} /> + <span className="ta-chain-card-title">{chain.title}</span> + <em> + {chain.seats.length} 智能体 · {chainStages(chain).length} 阶段 + </em> + </header> + {chain.description && <p>{chain.description}</p>} + <div className="ta-chain-card-flow"> + <AgentFlow + seats={chainSeats(chain)} + size="sm" + stages={chainStages(chain)} + /> + </div> + </button> + ); + })} + </div> + )} + </section> + + <section className="ta-binding-section"> + <header className="ta-binding-section-head"> + <h4>执行设置</h4> + <span>{describeScheduleConfig(schedule)} 自动执行</span> + </header> + <div className="ta-binding-settings"> + <div className="ta-field"> + <span className="ta-field-label">执行频率</span> + <SchedulePicker value={schedule} onChange={setSchedule} /> + </div> + <label className="ta-field"> + <span className="ta-field-label">总控提示（可选）</span> + <Textarea + autosize={{ minRows: 2, maxRows: 4 }} + maxlength={500} + placeholder="写给总控（协调者）的编排要求；问答沉淀的「方向备注」也会注入后续执行" + value={coordinatorPrompt} + onChange={(value) => setCoordinatorPrompt(String(value ?? ""))} + /> + </label> + <div className="ta-field ta-field--switch"> + <span className="ta-field-label">绑定后立即启用</span> + <Switch value={enabled} onChange={(value) => setEnabled(!!value)} /> + </div> + </div> + </section> + </div> + </Dialog> + ); +} diff --git a/frontend-web/src/pages/official-task-analysis/components/CreateTaskDialog.tsx b/frontend-web/src/pages/official-task-analysis/components/CreateTaskDialog.tsx new file mode 100644 index 00000000..3f83ed27 --- /dev/null +++ b/frontend-web/src/pages/official-task-analysis/components/CreateTaskDialog.tsx @@ -0,0 +1,242 @@ +/** + * 新建任务弹窗（一步式）：任务信息（名称/任务号/简介）+ 业务链选择 + + * 执行设置（频率 / 总控提示 / 启用），提交后直接创建任务并完成绑定。 + */ + +import { Radio } from "lucide-react"; +import { useEffect, useMemo, useState } from "react"; +import { useQuery } from "@tanstack/react-query"; +import { Button, Dialog, Input, Switch, Textarea } from "tdesign-react"; +import { toast } from "sonner"; + +import { listChains } from "@/roundtable-planning/api/chains"; +import type { BusinessChain } from "@/roundtable-planning/lib/business-chain"; +import { type ScheduleConfig } from "@/components/workspace/scheduled-tasks/schedule-builder"; + +import AgentFlow from "@/pages/official-multi-agent-tasks/components/AgentFlow"; +import SchedulePicker from "@/pages/official-multi-agent-tasks/components/SchedulePicker"; +import { + defaultScheduleConfig, + describeScheduleConfig, +} from "@/pages/official-multi-agent-tasks/utils"; +import type { MatSeat } from "@/pages/official-multi-agent-tasks/types"; + +import { NO_CHAINS, SEED_CHAIN, chainSeats, chainStages } from "./BindingDialog"; +import type { TaBindingPayload } from "../types"; + +export interface TaCreateTaskPayload { + name: string; + sourceTaskId?: string; + description?: string; + binding: TaBindingPayload; +} + +export default function CreateTaskDialog({ + visible, + submitting, + onClose, + onSubmit, +}: { + visible: boolean; + submitting: boolean; + onClose: () => void; + onSubmit: (payload: TaCreateTaskPayload) => void; +}) { + const [name, setName] = useState(""); + const [sourceTaskId, setSourceTaskId] = useState(""); + const [description, setDescription] = useState(""); + const [chainId, setChainId] = useState(""); + const [schedule, setSchedule] = useState<ScheduleConfig>(defaultScheduleConfig()); + const [enabled, setEnabled] = useState(true); + const [coordinatorPrompt, setCoordinatorPrompt] = useState(""); + + const { data, isLoading: chainsLoading } = useQuery({ + queryKey: ["ta", "chains"], + queryFn: async () => { + const [mine, publicChains] = await Promise.all([ + listChains("mine").catch(() => [] as BusinessChain[]), + listChains("public").catch(() => [] as BusinessChain[]), + ]); + const byId = new Map<string, BusinessChain>(); + for (const chain of [SEED_CHAIN, ...mine, ...publicChains]) { + if (!byId.has(chain.id)) byId.set(chain.id, chain); + } + return [...byId.values()]; + }, + enabled: visible, + }); + const chains = data ?? NO_CHAINS; + + useEffect(() => { + if (!visible) return; + setName(""); + setSourceTaskId(""); + setDescription(""); + setSchedule(defaultScheduleConfig()); + setEnabled(true); + setCoordinatorPrompt(""); + setChainId((prev) => (chains.some((chain) => chain.id === prev) ? prev : chains[0]?.id ?? SEED_CHAIN.id)); + }, [visible, chains]); + + const selectedChain = useMemo( + () => chains.find((chain) => chain.id === chainId) ?? null, + [chains, chainId], + ); + + const trySubmit = () => { + if (!name.trim()) { + toast.warning("请填写任务名称"); + return; + } + if (!selectedChain) { + toast.warning("请选择业务链"); + return; + } + onSubmit({ + name, + sourceTaskId: sourceTaskId.trim() || undefined, + description: description.trim() || undefined, + binding: { + chainId: selectedChain.id, + chainTitle: selectedChain.title, + schedule, + enabled, + coordinatorPrompt: coordinatorPrompt.trim() || undefined, + }, + }); + }; + + return ( + <Dialog + className="ta-create-dialog" + closeBtn + closeOnOverlayClick={false} + destroyOnClose + footer={ + <div className="ta-dialog-footer"> + <Button variant="outline" onClick={onClose}> + 取消 + </Button> + <Button loading={submitting} theme="primary" onClick={trySubmit}> + 创建任务并绑定 + </Button> + </div> + } + header="新建任务" + placement="top" + visible={visible} + width={860} + onClose={onClose} + > + <div className="ta-binding"> + <section className="ta-binding-section"> + <header className="ta-binding-section-head"> + <h4>任务信息</h4> + <span>由本页录入；接入对方系统后，推送创建的任务同样出现在列表中</span> + </header> + <div className="ta-create-grid"> + <label className="ta-field"> + <span className="ta-field-label"> + 任务名称<i className="ta-required">*</i> + </span> + <Input + clearable + maxlength={40} + placeholder="例如：东南亚舆论环境监测" + value={name} + onChange={(value) => setName(String(value ?? ""))} + /> + </label> + <label className="ta-field"> + <span className="ta-field-label">对方任务号（可选）</span> + <Input + clearable + maxlength={32} + placeholder="留空自动生成" + value={sourceTaskId} + onChange={(value) => setSourceTaskId(String(value ?? ""))} + /> + </label> + <label className="ta-field ta-field--wide"> + <span className="ta-field-label">任务简介</span> + <Textarea + autosize={{ minRows: 2, maxRows: 4 }} + maxlength={200} + placeholder="一句话说明任务背景与分析目标，定时执行时作为任务上下文注入各智能体" + value={description} + onChange={(value) => setDescription(String(value ?? ""))} + /> + </label> + </div> + </section> + + <section className="ta-binding-section"> + <header className="ta-binding-section-head"> + <h4>执行设置</h4> + <span>{describeScheduleConfig(schedule)} 自动执行</span> + </header> + <div className="ta-binding-settings"> + <div className="ta-field"> + <span className="ta-field-label">执行频率</span> + <SchedulePicker value={schedule} onChange={setSchedule} /> + </div> + <label className="ta-field"> + <span className="ta-field-label">总控提示（可选）</span> + <Textarea + autosize={{ minRows: 2, maxRows: 4 }} + maxlength={500} + placeholder="写给总控（协调者）的编排要求；问答沉淀的「方向备注」也会注入后续执行" + value={coordinatorPrompt} + onChange={(value) => setCoordinatorPrompt(String(value ?? ""))} + /> + </label> + <div className="ta-field ta-field--switch"> + <span className="ta-field-label">创建后立即启用</span> + <Switch value={enabled} onChange={(value) => setEnabled(!!value)} /> + </div> + </div> + </section> + <section className="ta-binding-section"> + <header className="ta-binding-section-head"> + <h4>选择业务链</h4> + <span>定时执行按业务链的多智能体关系（同阶段并行 · 阶段间串行）运行</span> + </header> + {chainsLoading ? ( + <p className="ta-binding-tip">正在加载业务链…</p> + ) : ( + <div className="ta-chain-grid"> + {chains.map((chain) => { + const active = chain.id === chainId; + return ( + <button + className={`ta-chain-card${active ? " is-active" : ""}`} + key={chain.id} + onClick={() => setChainId(chain.id)} + type="button" + > + <header> + <Radio aria-hidden="true" size={14} /> + <span className="ta-chain-card-title">{chain.title}</span> + <em> + {chain.seats.length} 智能体 · {chainStages(chain).length} 阶段 + </em> + </header> + {chain.description && <p>{chain.description}</p>} + <div className="ta-chain-card-flow"> + <AgentFlow + seats={chainSeats(chain) as MatSeat[]} + size="sm" + stages={chainStages(chain)} + /> + </div> + </button> + ); + })} + </div> + )} + </section> + + </div> + </Dialog> + ); +} diff --git a/frontend-web/src/pages/official-task-analysis/components/SeatProcessDrawer.tsx b/frontend-web/src/pages/official-task-analysis/components/SeatProcessDrawer.tsx new file mode 100644 index 00000000..981365d7 --- /dev/null +++ b/frontend-web/src/pages/official-task-analysis/components/SeatProcessDrawer.tsx @@ -0,0 +1,122 @@ +/** + * 席位执行过程抽屉：点击流程图节点打开，展示该智能体在某次运行里的完整过程 + * （输入 → AI 分析 → 工具调用 → 产物块）。后端就绪后由 runs/{id}/messages?seat= 提供数据。 + */ + +import { ArrowDownRight, Bot, Wrench } from "lucide-react"; +import { Drawer, Tag } from "tdesign-react"; + +import { seatColorIndex } from "@/pages/official-multi-agent-tasks/utils"; +import { buildSeatProcess } from "../store"; +import type { TaRunView, TaSeatState, TaTask } from "../types"; + +const STATE_THEME: Record<TaSeatState, "success" | "warning" | "danger" | "default"> = { + done: "success", + running: "warning", + failed: "danger", + waiting: "default", +}; + +const STATE_TEXT: Record<TaSeatState, string> = { + waiting: "等待执行", + running: "执行中", + done: "已完成", + failed: "执行失败", +}; + +const KIND_LABEL: Record<string, string> = { + input: "输入", + ai: "分析", + tool: "工具", + artifact: "产物", +}; + +function formatDuration(ms: number): string { + if (!Number.isFinite(ms) || ms <= 0) return "—"; + const seconds = Math.round(ms / 1000); + if (seconds < 60) return `${seconds} 秒`; + return `${Math.floor(seconds / 60)} 分 ${seconds % 60} 秒`; +} + +export default function SeatProcessDrawer({ + run, + seatAgentId, + task, + onClose, +}: { + run: TaRunView | null; + seatAgentId: string | null; + task: TaTask | undefined; + onClose: () => void; +}) { + const visible = !!run && !!seatAgentId; + const process = + visible && run ? buildSeatProcess(run, seatAgentId!, task) : null; + const info = run?.seatInfos[seatAgentId ?? ""] ?? null; + + return ( + <Drawer + className="ta-seat-drawer" + closeBtn + destroyOnClose + footer={null} + header={ + process ? ( + <div className="ta-seat-header"> + <span className={`ta-seat-glyph ta-seat--c${seatColorIndex(seatAgentId ?? "")}`} aria-hidden="true"> + <Bot size={18} /> + </span> + <div className="ta-seat-heading"> + <h3>{process.seatName}</h3> + <p>执行过程 · {run?.trigger === "manual" ? "手动执行（总控问答）" : "定时执行"}</p> + </div> + {info && ( + <Tag size="small" theme={STATE_THEME[info.state]} variant="light"> + {STATE_TEXT[info.state]} + </Tag> + )} + </div> + ) : null + } + placement="right" + size="520px" + visible={visible} + onClose={onClose} + > + {process && ( + <div className="ta-seat-process"> + {info && ( + <div className="ta-seat-meta"> + <span>状态：{STATE_TEXT[info.state]}</span> + <span>耗时：{formatDuration(info.durationMs)}</span> + <span>所属阶段：第 {(run?.stages.findIndex((stage) => stage.includes(seatAgentId ?? "")) ?? -1) + 1} 阶段</span> + </div> + )} + <ol className="ta-seat-timeline"> + {process.messages.map((message, index) => ( + <li className={`ta-seat-item is-${message.kind}`} key={index}> + <span className="ta-seat-item-marker"> + {message.kind === "tool" ? ( + <Wrench size={11} /> + ) : ( + <ArrowDownRight size={11} /> + )} + </span> + <div className="ta-seat-item-body"> + <header> + <em className={`ta-seat-item-kind is-${message.kind}`}> + {KIND_LABEL[message.kind] ?? message.kind} + </em> + <span className="ta-seat-item-title">{message.title}</span> + </header> + <p>{message.content}</p> + {message.detail && <pre>{message.detail}</pre>} + </div> + </li> + ))} + </ol> + </div> + )} + </Drawer> + ); +} diff --git a/frontend-web/src/pages/official-task-analysis/page-types.ts b/frontend-web/src/pages/official-task-analysis/page-types.ts new file mode 100644 index 00000000..d7233e72 --- /dev/null +++ b/frontend-web/src/pages/official-task-analysis/page-types.ts @@ -0,0 +1,4 @@ +import type { TaRunView, TaTask } from "./types"; + +export type { TaRunView, TaTask }; +export type TaTaskViewLike = { task: TaTask; runs: TaRunView[] }; diff --git a/frontend-web/src/pages/official-task-analysis/store.ts b/frontend-web/src/pages/official-task-analysis/store.ts new file mode 100644 index 00000000..b48b35e0 --- /dev/null +++ b/frontend-web/src/pages/official-task-analysis/store.ts @@ -0,0 +1,607 @@ +/** + * 外部任务定时分析的本地 mock 存储层（与 multi-agent-tasks 同款模式）。 + * + * - 任务/绑定/运行记录落 localStorage；「立即执行 / 模拟手动执行」写入运行记录， + * 状态由 startedAt + durationMs 按当前时间推导（排队 → 按阶段推进 → 成功/失败）， + * 配合 React Query 轮询获得无后端的"实时"流程图推进。 + * - 席位执行过程消息在读取侧按席位生成（buildSeatProcess），不入库。 + * - 对外接口（创建/删除/详情时间线/问答）就绪后替换本层。 + */ + +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; + +import { buildCron } from "@/components/workspace/scheduled-tasks/schedule-builder"; +import { describeScheduleConfig } from "@/pages/official-multi-agent-tasks/utils"; +import { uuid } from "@/core/utils/uuid"; + +import type { + TaBlockMapping, + TaBinding, + TaBindingPayload, + TaRunRecord, + TaRunStatus, + TaRunView, + TaSeatRunInfo, + TaSeatState, + TaTask, +} from "./types"; + +const STORAGE_KEY = "deerflow.official.task-analysis.v1"; + +interface TaStore { + tasks: TaTask[]; + runs: TaRunRecord[]; + /** 上次绑定时选择的业务链 id（创建接口响应里的 default_chain_id 记忆）。 */ + lastChainId: string | null; +} + +const PENDING_MS = 2_000; +const STAGE_MS = 6_000; + +/** 对方系统定义的详情块类型（mock 固定清单；接接口后由创建方传入）。 */ +export const TA_BLOCK_TYPES: Array<{ key: string; name: string }> = [ + { key: "background", name: "任务背景" }, + { key: "dynamics", name: "动态分析" }, + { key: "risk", name: "风险研判" }, + { key: "action", name: "行动建议" }, + { key: "conclusion", name: "结论汇总" }, +]; + +function readStore(): TaStore { + try { + const raw = window.localStorage.getItem(STORAGE_KEY); + if (raw) { + const parsed = JSON.parse(raw) as Partial<TaStore>; + if (Array.isArray(parsed.tasks)) { + return { + tasks: parsed.tasks as TaTask[], + runs: parsed.runs ?? [], + lastChainId: parsed.lastChainId ?? null, + }; + } + } + } catch { + // 解析失败按首次访问处理。 + } + const seeded = seedStore(); + writeStore(seeded); + return seeded; +} + +function writeStore(store: TaStore) { + try { + window.localStorage.setItem(STORAGE_KEY, JSON.stringify(store)); + } catch { + // 存储被禁用时静默降级为内存态。 + } +} + +function mutateStore(mutator: (store: TaStore) => TaStore): TaStore { + const next = mutator(readStore()); + writeStore(next); + return next; +} + +function hoursAgo(hours: number): string { + return new Date(Date.now() - hours * 3_600_000).toISOString(); +} + +function seedStore(): TaStore { + const seats = { + collector: "全网舆情采集", + analyst: "舆情研判分析", + writer: "报告撰写助手", + verifier: "数据核查员", + forecaster: "趋势预测专家", + }; + + const tasks: TaTask[] = [ + { + id: "ta-task-1", + sourceTaskId: "TS-2026-0147", + name: "东南亚舆论环境监测", + description: "对方系统推送的任务：持续跟踪东南亚重点渠道舆论动向，输出结构化分析详情。", + binding: { + chainId: "seed-chain-std", + chainTitle: "标准舆情分析链", + cron: "0 9 * * *", + cronText: "每天 09:00", + enabled: true, + blocks: [ + { key: "background", name: "任务背景", seatAgentId: "collector" }, + { key: "dynamics", name: "动态分析", seatAgentId: "collector" }, + { key: "risk", name: "风险研判", seatAgentId: "analyst" }, + { key: "action", name: "行动建议", seatAgentId: "analyst" }, + { key: "conclusion", name: "结论汇总", seatAgentId: "writer" }, + ], + coordinatorPrompt: "采集阶段允许独立检索；研判阶段需引用采集阶段的原始线索。", + directionNotes: ["重点关注宗教节日前后的舆论波动。"], + timezone: "Asia/Shanghai", + }, + createdAt: hoursAgo(24 * 12), + }, + { + id: "ta-task-2", + sourceTaskId: "TS-2026-0152", + name: "竞品新品发布追踪", + description: "追踪 5 家核心竞品的新品发布与市场反应，按块更新详情内容。", + binding: { + chainId: "seed-chain-std", + chainTitle: "标准舆情分析链", + cron: "30 8 * * 1", + cronText: "每周一 08:30", + enabled: false, + blocks: [ + { key: "background", name: "任务背景", seatAgentId: "verifier" }, + { key: "dynamics", name: "动态分析", seatAgentId: "collector" }, + { key: "conclusion", name: "结论汇总", seatAgentId: "writer" }, + ], + directionNotes: [], + timezone: "Asia/Shanghai", + }, + createdAt: hoursAgo(24 * 8), + }, + { + id: "ta-task-3", + sourceTaskId: "TS-2026-0160", + name: "行业政策周报编制", + description: "对方系统刚创建的任务，尚未配置分析方案。", + binding: null, + createdAt: hoursAgo(5), + }, + ]; + + const stdStages = [ + ["collector", "verifier"], + ["analyst"], + ["writer"], + ]; + const stdNames = seats; + + const runs: TaRunRecord[] = [ + { + id: uuid() as string, + taskId: "ta-task-1", + trigger: "schedule", + scheduledFor: hoursAgo(2.1), + startedAt: hoursAgo(2.1), + durationMs: PENDING_MS + stdStages.length * STAGE_MS, + stages: stdStages, + stageGoals: ["并行完成全网采集与数据核查", "研判风险与行动方向", "汇总各块结论"], + seatNames: stdNames, + failStage: null, + }, + { + id: uuid() as string, + taskId: "ta-task-1", + trigger: "manual", + scheduledFor: hoursAgo(20), + startedAt: hoursAgo(20), + durationMs: PENDING_MS + stdStages.length * STAGE_MS, + stages: stdStages, + stageGoals: ["并行完成全网采集与数据核查", "研判风险与行动方向", "汇总各块结论"], + seatNames: stdNames, + failStage: null, + manualSummary: "总控问答：要求研判阶段补充跨平台对比维度，已确认应用到后续执行。", + }, + { + id: uuid() as string, + taskId: "ta-task-1", + trigger: "schedule", + scheduledFor: hoursAgo(26), + startedAt: hoursAgo(26), + durationMs: PENDING_MS + stdStages.length * STAGE_MS, + stages: stdStages, + stageGoals: ["并行完成全网采集与数据核查", "研判风险与行动方向", "汇总各块结论"], + seatNames: stdNames, + failStage: 1, + }, + { + id: uuid() as string, + taskId: "ta-task-2", + trigger: "schedule", + scheduledFor: hoursAgo(24 * 3), + startedAt: hoursAgo(24 * 3), + durationMs: PENDING_MS + stdStages.length * STAGE_MS, + stages: stdStages, + stageGoals: ["并行完成全网采集与数据核查", "研判风险与行动方向", "汇总各块结论"], + seatNames: stdNames, + failStage: null, + }, + ]; + + return { tasks, runs, lastChainId: "seed-chain-std" }; +} + +/** 由记录 + 当前时间推导运行视图：各席位状态/耗时、块产出状态。 */ +function resolveRunView(run: TaRunRecord, task: TaTask | undefined, now = Date.now()): TaRunView { + const startedAt = new Date(run.startedAt).getTime(); + const elapsed = now - startedAt; + const stageTotal = Math.max(1, run.stages.length); + const duration = run.durationMs || PENDING_MS + stageTotal * STAGE_MS; + + const buildSeatInfos = ( + status: TaRunStatus, + activeStage: number, + ): Record<string, TaSeatRunInfo> => { + const infos: Record<string, TaSeatRunInfo> = {}; + run.stages.forEach((stage, index) => { + const stageStart = PENDING_MS + index * STAGE_MS; + const stageEnd = stageStart + STAGE_MS; + const finished = status === "succeeded" || (status === "failed" && index < activeStage); + const active = !finished && index === activeStage && status !== "pending"; + const state: TaSeatState = finished + ? "done" + : active + ? status === "failed" + ? "failed" + : "running" + : "waiting"; + const durationMs = finished + ? Math.min(elapsed - stageStart, STAGE_MS) + : active + ? Math.min(elapsed - stageStart, STAGE_MS) + : 0; + stage.forEach((agentId) => { + infos[agentId] = { state, durationMs }; + }); + }); + return infos; + }; + + let status: TaRunStatus; + let stageIndex: number; + let finishedAt: string | null = null; + let error: string | null = null; + + if (elapsed < PENDING_MS) { + status = "pending"; + stageIndex = 0; + } else { + const progress = Math.min(elapsed - PENDING_MS, duration - PENDING_MS); + stageIndex = Math.min(Math.floor(progress / STAGE_MS), stageTotal - 1); + if (run.failStage !== null && stageIndex >= run.failStage) { + status = "failed"; + stageIndex = run.failStage; + finishedAt = new Date(startedAt + PENDING_MS + (run.failStage + 1) * STAGE_MS).toISOString(); + const failSeat = run.stages[run.failStage]?.[0]; + error = `阶段 ${run.failStage + 1} 执行失败：${run.seatNames[failSeat ?? ""] ?? "席位"} 模拟执行异常`; + } else if (elapsed >= duration) { + status = "succeeded"; + stageIndex = stageTotal - 1; + finishedAt = new Date(startedAt + duration).toISOString(); + } else { + status = "running"; + } + } + + const seatInfos = buildSeatInfos(status, status === "pending" ? -1 : stageIndex); + + const blockStates = (task?.binding?.blocks ?? []).map((block) => ({ + key: block.key, + name: block.name, + state: seatInfos[block.seatAgentId]?.state ?? "waiting", + })); + + return { + ...run, + finishedAt, + status, + stageIndex, + stageTotal, + seatInfos, + error, + blockStates, + }; +} + +function buildTaskViews(now = Date.now()): Array<{ task: TaTask; runs: TaRunView[] }> { + const store = readStore(); + return store.tasks.map((task) => { + const runs = store.runs + .filter((run) => run.taskId === task.id) + .map((run) => resolveRunView(run, task, now)) + .sort((a, b) => (a.startedAt < b.startedAt ? 1 : -1)); + return { task, runs }; + }); +} + +function anyRunLive(views: Array<{ runs: TaRunView[] }> | undefined): boolean { + return !!views?.some(({ runs }) => + runs.some((run) => run.status === "pending" || run.status === "running"), + ); +} + +/** 列表 + 每任务运行视图；运行中 5 秒轮询（设计定稿：流程图每 5 秒刷新）。 */ +export function useTaTasks() { + const query = useQuery({ + queryKey: ["ta", "tasks"], + queryFn: () => buildTaskViews(), + refetchInterval: (q) => + anyRunLive(q.state.data as Array<{ runs: TaRunView[] }> | undefined) ? 5_000 : false, + }); + const views = query.data ?? []; + return { views, tasks: views.map((view) => view.task), isLoading: query.isLoading }; +} + +export function useTaTaskRuns(taskId: string | null) { + const query = useQuery({ + queryKey: ["ta", "tasks", taskId], + queryFn: () => { + const view = buildTaskViews().find((item) => item.task.id === taskId); + return view?.runs ?? []; + }, + enabled: !!taskId, + refetchInterval: (q) => { + const runs = q.state.data as TaRunView[] | undefined; + const live = !!runs?.some((run) => run.status === "pending" || run.status === "running"); + return live ? 5_000 : false; + }, + }); + return { runs: query.data ?? [], isLoading: query.isLoading }; +} + +export function useTaTaskActions() { + const queryClient = useQueryClient(); + const invalidate = () => queryClient.invalidateQueries({ queryKey: ["ta"] }); + + /** 页面手动创建外部任务（名称必填；对方任务号留空则自动生成）。 */ + const createTask = useMutation({ + mutationFn: async (payload: { + name: string; + sourceTaskId?: string; + description?: string; + }) => { + const task: TaTask = { + id: uuid() as string, + sourceTaskId: + payload.sourceTaskId?.trim() || + `TS-${new Date().getFullYear()}-${String(Date.now()).slice(-5)}`, + name: payload.name.trim(), + description: payload.description?.trim() || "", + binding: null, + createdAt: new Date().toISOString(), + }; + mutateStore((store) => ({ ...store, tasks: [task, ...store.tasks] })); + return task; + }, + onSuccess: invalidate, + }); + + /** 绑定 / 修改绑定（记录 lastChainId 供创建接口返回默认项）。 */ + const bind = useMutation({ + mutationFn: async ({ taskId, payload }: { taskId: string; payload: TaBindingPayload }) => { + const cron = buildCron(payload.schedule); + mutateStore((store) => ({ + ...store, + lastChainId: payload.chainId, + tasks: store.tasks.map((task) => + task.id === taskId + ? { + ...task, + binding: { + chainId: payload.chainId, + chainTitle: payload.chainTitle, + cron, + cronText: describeScheduleConfig(payload.schedule), + enabled: payload.enabled, + blocks: payload.blocks ?? task.binding?.blocks ?? [], + coordinatorPrompt: payload.coordinatorPrompt, + directionNotes: task.binding?.directionNotes ?? [], + timezone: task.binding?.timezone ?? "Asia/Shanghai", + } satisfies TaBinding, + } + : task, + ), + })); + }, + onSuccess: invalidate, + }); + + const unbind = useMutation({ + mutationFn: async (taskId: string) => { + mutateStore((store) => ({ + ...store, + tasks: store.tasks.map((task) => + task.id === taskId ? { ...task, binding: null } : task, + ), + runs: store.runs.filter((run) => run.taskId !== taskId), + })); + }, + onSuccess: invalidate, + }); + + const setEnabled = useMutation({ + mutationFn: async ({ taskId, enabled }: { taskId: string; enabled: boolean }) => { + mutateStore((store) => ({ + ...store, + tasks: store.tasks.map((task) => + task.id === taskId && task.binding + ? { ...task, binding: { ...task.binding, enabled } } + : task, + ), + })); + }, + onSuccess: invalidate, + }); + + /** 删除外部任务（对应对外删除接口：任务 + 绑定 + 执行记录彻底删除）。 */ + const removeTask = useMutation({ + mutationFn: async (taskId: string) => { + mutateStore((store) => ({ + ...store, + tasks: store.tasks.filter((task) => task.id !== taskId), + runs: store.runs.filter((run) => run.taskId !== taskId), + })); + }, + onSuccess: invalidate, + }); + + /** 立即触发一次定时执行（schedule）。 */ + const triggerRun = useMutation({ + mutationFn: async (taskId: string) => { + const store = readStore(); + const task = store.tasks.find((item) => item.id === taskId); + const binding = task?.binding; + if (!task || !binding) throw new Error("任务未绑定分析方案"); + const stages = chainStagesOf(binding, store); + const now = new Date().toISOString(); + const run: TaRunRecord = { + id: uuid() as string, + taskId, + trigger: "schedule", + scheduledFor: now, + startedAt: now, + durationMs: PENDING_MS + stages.length * STAGE_MS, + stages, + stageGoals: stages.map((_, index) => stageGoalOf(index)), + seatNames: Object.fromEntries(stages.flat().map((id) => [id, seatDisplayName(id)])), + failStage: null, + }; + mutateStore((current) => ({ ...current, runs: [run, ...current.runs] })); + return run; + }, + onSuccess: invalidate, + }); + + /** 模拟一次手动执行（对方详情页总控问答产生）。 */ + const triggerManualRun = useMutation({ + mutationFn: async (taskId: string) => { + const store = readStore(); + const task = store.tasks.find((item) => item.id === taskId); + const binding = task?.binding; + if (!task || !binding) throw new Error("任务未绑定分析方案"); + const stages = chainStagesOf(binding, store); + const now = new Date().toISOString(); + const run: TaRunRecord = { + id: uuid() as string, + taskId, + trigger: "manual", + scheduledFor: now, + startedAt: now, + durationMs: PENDING_MS + stages.length * STAGE_MS, + stages, + stageGoals: stages.map((_, index) => stageGoalOf(index)), + seatNames: Object.fromEntries(stages.flat().map((id) => [id, seatDisplayName(id)])), + failStage: null, + manualSummary: "总控问答：按对方详情页提问，总控给对应席位派活并汇总结论。", + }; + mutateStore((current) => ({ ...current, runs: [run, ...current.runs] })); + return run; + }, + onSuccess: invalidate, + }); + + return { createTask, bind, unbind, setEnabled, removeTask, triggerRun, triggerManualRun }; +} + +/** 绑定链的编排（种子任务用内置编排；真实业务链按其 stages 展开，null = 线性）。 */ +export function chainStagesOf( + binding: Pick<TaBinding, "chainId">, + store: TaStore = readStore(), +): string[][] { + if (binding.chainId === "seed-chain-std") { + return [ + ["collector", "verifier"], + ["analyst"], + ["writer"], + ]; + } + // 真实业务链的编排由页面侧传入的 chain 数据展开；存储层兜底为单席位串行。 + const seats = seedSeatsOf(store); + return seats.map((agentId) => [agentId]); +} + +function seedSeatsOf(_store: TaStore): string[] { + return ["collector", "verifier", "analyst", "writer"]; +} + +/** 演示用的阶段目标（seed 链固定；真实链由绑定快照提供）。 */ +function stageGoalOf(stageIndex: number): string | null { + const goals = ["并行完成全网采集与数据核查", "研判风险与行动方向", "汇总各块结论"]; + return goals[stageIndex] ?? null; +} + +export function seatDisplayName(agentId: string): string { + const names: Record<string, string> = { + collector: "全网舆情采集", + verifier: "数据核查员", + analyst: "舆情研判分析", + writer: "报告撰写助手", + forecaster: "趋势预测专家", + }; + return names[agentId] ?? agentId; +} + +// ── 席位执行过程（读取侧生成 mock）──────────────────────────────────────── + +export interface TaSeatMessage { + kind: "input" | "ai" | "tool" | "artifact"; + title: string; + content: string; + detail?: string; +} + +/** 生成某席位在某次运行里的执行过程消息（后端就绪后换 runs/{id}/messages?seat=）。 */ +export function buildSeatProcess( + run: TaRunView, + seatAgentId: string, + task: TaTask | undefined, +): { seatName: string; messages: TaSeatMessage[]; blocks: TaBlockMapping[] } { + const seatName = run.seatNames[seatAgentId] ?? seatAgentId; + const info = run.seatInfos[seatAgentId] ?? { state: "waiting" as TaSeatState, durationMs: 0 }; + const stageIndex = run.stages.findIndex((stage) => stage.includes(seatAgentId)); + const blocks = (task?.binding?.blocks ?? []).filter( + (block) => block.seatAgentId === seatAgentId, + ); + + const messages: TaSeatMessage[] = [ + { + kind: "input", + title: "输入 · 任务上下文", + content: + `${task?.name ?? ""}（对方任务 ${task?.sourceTaskId ?? "-"}）\n` + + `${task?.description ?? ""}\n\n` + + (blocks.length + ? `本席位负责产出：${blocks.map((block) => block.name).join("、")}。` + : "按业务链席位职责执行。") + + (stageIndex > 0 + ? `\n上一阶段产出摘要：${run.stages[stageIndex - 1] + ?.map((id) => run.seatNames[id]) + .join("、")} 的中间结论已注入。` + : ""), + }, + ]; + + if (info.state === "waiting") { + return { seatName, messages, blocks }; + } + + messages.push({ + kind: "ai", + title: "AI 分析", + content: + `（${seatName} 的分析过程 · 演示内容）\n` + + `围绕任务简介拆解检索方向，交叉核对来源可信度，形成本席位负责块的结构化结论。`, + }); + + messages.push({ + kind: "tool", + title: "工具调用 · web_search", + content: "query=\"任务关键词 最新动态\" → 命中 12 条，采纳 7 条（含来源与时间）", + detail: + '{"results":[{"title":"来源A：行业动态","snippet":"……"},{"title":"来源B：政策更新","snippet":"……"}]}', + }); + + if (info.state === "done") { + blocks.forEach((block) => { + messages.push({ + kind: "artifact", + title: `产出 · ${block.name}`, + content: `（${block.name} 块内容摘要 · 演示）已按对方系统约定的结构生成，随本次执行写入时间线版本。`, + }); + }); + } + + return { seatName, messages, blocks }; +} diff --git a/frontend-web/src/pages/official-task-analysis/task-analysis.css b/frontend-web/src/pages/official-task-analysis/task-analysis.css new file mode 100644 index 00000000..3d499f08 --- /dev/null +++ b/frontend-web/src/pages/official-task-analysis/task-analysis.css @@ -0,0 +1,1353 @@ +/* ============================================================ + 任务分析定时 —— 浅红色 UI 规范主题（ta- 前缀） + 变量命名沿用 --mat-*，使复用的 AgentFlow 等组件样式零适配。 + 浮层（Dialog/Drawer 挂 body）的变量声明在各自根类上。 + ============================================================ */ + +.ta-page, +.ta-binding-dialog, +.ta-seat-drawer, +.ta-create-dialog { + --zs-001: #cf1322; + --zs-001-02: #fef6f6; + --zs-001-03: #feeded; + --zs-001-04: #fddadc; + --zs-001-09: #f5222d; + --zs-001-10: #bc0d1e; + --zs-001-11: #a8071a; + --zs-002-02: #f4f9ff; + --zs-002-03: #eaf4ff; + --zs-002-07: #55a6fe; + --zs-002-09: #0079fe; + --zs-002-10: #0056c6; + --zs-002-11: #004ab3; + --fs-001-03: #fff6ea; + --fs-001-09: #ff9900; + --fs-001-10: #c66d00; + --fs-002-03: #eefcf7; + --fs-002-09: #2fd69a; + --fs-002-10: #189d72; + --fs-003-03: #effafe; + --fs-003-09: #45c3f3; + --fs-003-11: #1e76a6; + --fs-004: #222222; + --fs-004-02: #fafafa; + --fs-004-03: #f5f5f5; + --fs-004-04: #e8e8e8; + --fs-004-05: #dbdbdb; + --fs-004-06: #c1c1c1; + --fs-004-07: #a6a6a6; + --fs-004-08: #7f7f7f; + --fs-004-09: #575757; + --fs-004-10: #3d3d3d; + + --mat-primary: var(--zs-001-09); + --mat-primary-hover: var(--zs-001); + --mat-primary-active: var(--zs-001-11); + --mat-info: var(--zs-002-09); + --mat-success: var(--fs-002-10); + --mat-success-fill: var(--fs-002-09); + --mat-warning: var(--fs-001-09); + --mat-warning-deep: var(--fs-001-10); + --mat-danger: var(--zs-001-09); + --mat-ink: var(--fs-004); + --mat-ink-soft: var(--fs-004-09); + --mat-ink-muted: var(--fs-004-07); + --mat-canvas: var(--fs-004-02); + --mat-panel: #ffffff; + --mat-line: var(--fs-004-04); + --mat-line-strong: var(--fs-004-05); + --mat-shadow-1: 0 2px 8px rgba(34, 34, 34, 0.08); + --mat-shadow-2: 0 4px 16px rgba(34, 34, 34, 0.12); + --mat-shadow-3: 0 8px 32px rgba(34, 34, 34, 0.16); + --mat-font: "Noto Sans S Chinese", "Noto Sans SC", "Source Han Sans SC", + "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; + --mat-font-num: "D-DIN", "Arial", "Noto Sans S Chinese", sans-serif; + + --td-brand-color: #f5222d; + --td-brand-color-hover: #cf1322; + --td-brand-color-focus: #feeded; + --td-brand-color-active: #a8071a; + --td-brand-color-disabled: #fa9196; + --td-brand-color-light: #fef6f6; + --td-brand-color-light-hover: #feeded; +} + +.ta-binding-dialog, +.ta-seat-drawer, +.ta-create-dialog { + color: var(--mat-ink); + font-family: var(--mat-font); +} + +.ta-page { + background: var(--mat-canvas); + color: var(--mat-ink); + display: flex; + flex-direction: column; + font-family: var(--mat-font); + min-height: 100%; +} + +.ta-page *, +.ta-binding-dialog *, +.ta-seat-drawer *, +.ta-create-dialog * { + box-sizing: border-box; +} + +/* TDesign 控件圆角统一 2px（§4） */ +.ta-page .t-button, +.ta-binding-dialog .t-button, +.ta-seat-drawer .t-button, +.ta-page .t-input, +.ta-binding-dialog .t-input, +.ta-page .t-textarea__inner, +.ta-binding-dialog .t-textarea__inner, +.ta-page .t-select, +.ta-binding-dialog .t-select, +.ta-page .t-tag, +.ta-binding-dialog .t-tag, +.ta-seat-drawer .t-tag { + border-radius: 2px; +} + +/* ---------- 页头与统计（§28.2 / §26.1） ---------- */ + +.ta-page-head { + align-items: flex-end; + background: var(--mat-panel); + border-bottom: 1px solid var(--mat-line); + display: flex; + flex-wrap: wrap; + gap: 16px; + justify-content: space-between; + padding: 24px 24px 20px; +} + +.ta-page-head h1 { + font-size: 18px; + font-weight: 700; + letter-spacing: 0.2px; + margin: 0 0 4px; +} + +.ta-page-head-copy > p { + color: var(--mat-ink-soft); + font-size: 14px; + line-height: 1.6; + margin: 0; + max-width: 640px; +} + +.ta-page-head-actions { + align-items: center; + display: flex; + flex-shrink: 0; + gap: 8px; +} + +.ta-page-head .t-button__text { + display: inline-flex; + align-items: center; + gap: 4px; +} + +.ta-stats { + background: var(--mat-panel); + border-bottom: 1px solid var(--mat-line); + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.ta-stat { + align-items: center; + display: flex; + gap: 12px; + padding: 16px 24px; +} + +.ta-stat + .ta-stat { + border-left: 1px solid var(--mat-line); +} + +.ta-stat-icon { + align-items: center; + border-radius: 4px; + display: inline-flex; + flex-shrink: 0; + height: 36px; + justify-content: center; + width: 36px; +} + +.ta-stat-icon.is-primary { background: var(--zs-001-03); color: var(--mat-primary); } +.ta-stat-icon.is-success { background: var(--fs-002-03); color: var(--fs-002-10); } +.ta-stat-icon.is-warning { background: var(--fs-001-03); color: var(--fs-001-10); } +.ta-stat-icon.is-danger { background: var(--zs-001-03); color: var(--mat-danger); } + +.ta-stat-copy strong { + color: var(--mat-ink); + display: block; + font-family: var(--mat-font-num); + font-size: 26px; + font-weight: 700; + line-height: 1.15; +} + +.ta-stat-copy span { + color: var(--fs-004-07); + display: block; + font-size: 12px; + margin-top: 4px; +} + +/* ---------- 工具条 ---------- */ + +.ta-body { + flex: 1; + padding: 24px; +} + +.ta-toolbar { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 12px 24px; + justify-content: space-between; + margin-bottom: 16px; +} + +.ta-toolbar-search { + width: 320px; +} + +.ta-toolbar-tabs { + flex: 1; + min-width: 320px; +} + +.ta-toolbar-tabs .t-tabs__header { background: transparent; } +.ta-toolbar-tabs .t-tabs__nav-item { + border-radius: 0; + color: var(--mat-ink); + font-size: 14px; + font-weight: 500; + padding: 8px 4px; +} +.ta-toolbar-tabs .t-tabs__nav-item:hover { color: var(--mat-primary); } +.ta-toolbar-tabs .t-tabs__nav-item.t-is-active { color: var(--mat-primary); font-weight: 600; } +.ta-toolbar-tabs .t-tabs__nav-item.t-is-active::after { + background: var(--mat-primary); + height: 2px; +} +.ta-toolbar-tabs .t-tabs__nav-container::after, +.ta-toolbar-tabs .t-tabs__nav-wrap::after { + background: var(--mat-line); + height: 1px; +} +.ta-toolbar-tabs .t-tabs__content { display: none; } + +/* ---------- 任务卡片（§27 实体卡片） ---------- */ + +.ta-grid { + display: grid; + gap: 24px; + grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); +} + +.ta-card { + background: var(--mat-panel); + border: 1px solid var(--mat-line); + border-radius: 4px; + box-shadow: var(--mat-shadow-1); + display: flex; + flex-direction: column; + gap: 12px; + padding: 16px 16px 12px; + transition: box-shadow 140ms ease, border-color 140ms ease; +} + +.ta-card:hover { + border-color: var(--mat-line-strong); + box-shadow: var(--mat-shadow-2); +} + +.ta-card-head { + align-items: flex-start; + cursor: pointer; + display: flex; + gap: 12px; +} + +.ta-card-glyph { + align-items: center; + background: var(--zs-001-03); + border-radius: 4px; + color: var(--mat-primary); + display: inline-flex; + flex-shrink: 0; + height: 36px; + justify-content: center; + width: 36px; +} + +.ta-card-title { + flex: 1; + min-width: 0; +} + +.ta-card-title h3 { + align-items: center; + color: var(--mat-ink); + display: flex; + font-size: 16px; + font-weight: 700; + gap: 8px; + margin: 0 0 4px; +} + +.ta-card-title h3 em { + background: var(--fs-004-03); + border-radius: 2px; + color: var(--fs-004-08); + flex-shrink: 0; + font-size: 11px; + font-style: normal; + font-weight: 500; + padding: 2px 6px; +} + +.ta-card-title p { + color: var(--mat-ink-soft); + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font-size: 13px; + line-height: 1.55; + margin: 0; + overflow: hidden; +} + +.ta-card-binding { + color: var(--mat-ink-soft); + display: flex; + flex-wrap: wrap; + cursor: pointer; + font-size: 12px; + gap: 6px 16px; +} + +.ta-card-binding span { + align-items: center; + display: inline-flex; + gap: 4px; +} + +.ta-card-binding svg { + color: var(--fs-004-07); +} + +.ta-card-flow { + cursor: pointer; +} + +.ta-card-unbound { + align-items: center; + background: var(--fs-004-02); + border: 1.5px dashed var(--mat-line-strong); + border-radius: 4px; + color: var(--fs-004-07); + cursor: pointer; + display: flex; + font: inherit; + font-size: 13px; + gap: 8px; + padding: 14px; + transition: border-color 120ms ease, color 120ms ease, background 120ms ease; +} + +.ta-card-unbound:hover { + background: var(--zs-001-02); + border-color: var(--mat-primary); + color: var(--mat-primary); +} + +.ta-card-foot { + align-items: center; + border-top: 1px solid var(--mat-line); + display: flex; + gap: 12px; + justify-content: space-between; + margin-top: 2px; + padding-top: 12px; +} + +.ta-card-meta { + color: var(--fs-004-07); + display: flex; + flex-direction: column; + font-size: 12px; + gap: 4px; + min-width: 0; +} + +.ta-card-meta span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ta-run-text.is-succeeded { color: var(--mat-success); } +.ta-run-text.is-failed { color: var(--mat-danger); } +.ta-run-text.is-running, +.ta-run-text.is-pending { color: var(--mat-warning-deep); } +.ta-card-meta em { font-style: normal; } + +.ta-card-ops { + align-items: center; + display: flex; + flex-shrink: 0; +} + +.ta-card-ops .t-button__text { + display: inline-flex; + align-items: center; + gap: 4px; +} + +.ta-danger-btn { + color: var(--mat-danger) !important; +} + +/* ---------- 空态 / 加载态 ---------- */ + +.ta-state { + align-items: center; + background: var(--mat-panel); + border: 1px solid var(--mat-line); + border-radius: 4px; + box-shadow: var(--mat-shadow-1); + color: var(--mat-ink-soft); + display: flex; + font-size: 14px; + gap: 8px; + justify-content: center; + min-height: 320px; +} + +.ta-state--empty { + flex-direction: column; + gap: 0; + padding: 40px 20px; + text-align: center; +} + +.ta-state-glyph { + align-items: center; + background: var(--fs-004-03); + border-radius: 4px; + color: var(--fs-004-06); + display: flex; + height: 48px; + justify-content: center; + margin-bottom: 12px; + width: 48px; +} + +.ta-state--empty h3 { + color: var(--mat-ink-soft); + font-size: 14px; + font-weight: 400; + margin: 0 0 6px; +} + +.ta-state--empty p { + color: var(--fs-004-07); + font-size: 14px; + margin: 0 0 16px; + max-width: 420px; +} + +.ta-spin { + animation: ta-rotate 900ms linear infinite; +} + +.ta-footnote { + align-items: center; + color: var(--fs-004-07); + display: flex; + font-size: 12px; + gap: 4px; + justify-content: center; + margin: 24px 0 0; +} + +/* ---------- 详情页：左执行记录 + 右流程图 ---------- */ + +.ta-detail-head { + align-items: center; + background: var(--mat-panel); + border-bottom: 1px solid var(--mat-line); + display: flex; + flex-wrap: wrap; + gap: 12px; + padding: 16px 24px; +} + +.ta-back { + align-items: center; + background: var(--mat-panel); + border: 1px solid var(--mat-line-strong); + border-radius: 2px; + color: var(--mat-ink-soft); + cursor: pointer; + display: inline-flex; + flex-shrink: 0; + height: 32px; + justify-content: center; + transition: border-color 120ms ease, color 120ms ease; + width: 32px; +} + +.ta-back:hover { + border-color: var(--mat-primary); + color: var(--mat-primary); +} + +.ta-detail-heading { + flex: 1; + min-width: 260px; +} + +.ta-detail-heading h1 { + align-items: center; + color: var(--mat-ink); + display: flex; + font-size: 18px; + font-weight: 700; + gap: 8px; + margin: 0 0 2px; +} + +.ta-detail-heading h1 em { + background: var(--fs-004-03); + border-radius: 2px; + color: var(--fs-004-08); + font-size: 11px; + font-style: normal; + font-weight: 500; + padding: 2px 6px; +} + +.ta-detail-heading p { + align-items: center; + color: var(--mat-ink-soft); + display: flex; + font-size: 12px; + gap: 4px; + margin: 0; +} + +.ta-detail-heading svg { + color: var(--fs-004-07); +} + +.ta-detail-ops { + align-items: center; + display: flex; + gap: 8px; +} + +.ta-detail-ops .t-button__text { + display: inline-flex; + align-items: center; + gap: 4px; +} + +.ta-detail-empty { + align-items: center; + color: var(--fs-004-07); + display: flex; + flex: 1; + flex-direction: column; + gap: 0; + justify-content: center; + padding: 48px 24px; + text-align: center; +} + +.ta-detail-empty h3 { + color: var(--mat-ink-soft); + font-size: 15px; + font-weight: 600; + margin: 12px 0 6px; +} + +.ta-detail-empty p { + font-size: 13px; + margin: 0 0 16px; + max-width: 420px; +} + +.ta-detail-layout { + display: grid; + flex: 1; + gap: 16px; + grid-template-columns: 340px minmax(0, 1fr); + padding: 16px 24px 32px; +} + +/* 左：执行记录 */ + +.ta-runs { + background: var(--mat-panel); + border: 1px solid var(--mat-line); + border-radius: 4px; + box-shadow: var(--mat-shadow-1); + display: flex; + flex-direction: column; + max-height: calc(100vh - 170px); + min-height: 420px; + overflow: hidden; +} + +.ta-runs-head { + align-items: center; + border-bottom: 1px solid var(--mat-line); + color: var(--mat-ink); + display: flex; + font-size: 14px; + font-weight: 700; + justify-content: space-between; + padding: 12px 16px; +} + +.ta-runs-head h2 { + font-size: 15px; + margin: 0; +} + +.ta-runs-head h2::before { + background: var(--mat-primary); + content: ""; + display: inline-block; + height: 15px; + margin-right: 8px; + width: 3px; + vertical-align: -2px; +} + +.ta-runs-head span { + align-items: center; + color: var(--fs-004-07); + display: inline-flex; + font-size: 11px; + font-weight: 400; + gap: 4px; +} + +.ta-runs-list { + display: flex; + flex-direction: column; + flex: 1; + gap: 8px; + overflow-y: auto; + padding: 4px; +} + +.ta-run-item { + background: var(--mat-panel); + border: 1px solid var(--mat-line); + border-radius: 2px; + cursor: pointer; + display: flex; + flex-direction: column; + flex-shrink: 0; + gap: 4px; + padding: 10px 12px; + text-align: left; + transition: border-color 120ms ease, background 120ms ease; +} + +.ta-run-item:hover { + background: var(--fs-004-02); + border-color: var(--mat-line-strong); +} + +.ta-run-item.is-active { + background: var(--zs-001-02); + border-color: var(--mat-primary); +} + +.ta-run-item-top { + align-items: center; + color: var(--mat-ink); + display: flex; + font-size: 13px; + gap: 6px; +} + +.ta-run-item-top svg { + color: var(--fs-004-07); +} + +.ta-run-item-top b { + font-weight: 600; +} + +.ta-run-item-top .t-tag { + margin-left: auto; +} + +.ta-run-item-time { + color: var(--fs-004-07); + font-family: var(--mat-font-num); + font-size: 12px; +} + +.ta-run-item-summary { + color: var(--mat-ink-soft); + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font-size: 12px; + line-height: 1.5; + overflow: hidden; +} + +.ta-run-item-blocks { + color: var(--fs-004-07); + font-size: 12px; +} + +.ta-runs-empty { + border: 1px dashed var(--mat-line-strong); + border-radius: 4px; + color: var(--fs-004-07); + font-size: 12px; + margin: 8px 4px; + padding: 16px; + text-align: center; +} + +/* 右：流程图面板（复用业务链拓扑画布，智能体节点 + 肘形连线） */ + +.ta-flow-panel { + background: var(--mat-panel); + border: 1px solid var(--mat-line); + border-radius: 4px; + box-shadow: var(--mat-shadow-1); + display: flex; + flex-direction: column; + min-width: 0; + padding: 16px; +} + +.ta-flow-panel-empty { + align-items: center; + color: var(--fs-004-07); + display: flex; + flex: 1; + font-size: 13px; + justify-content: center; +} + +.ta-flow-head { + align-items: baseline; + display: flex; + flex-wrap: wrap; + gap: 8px 16px; + justify-content: space-between; + margin-bottom: 12px; +} + +.ta-flow-head h2 { + color: var(--mat-ink); + display: flex; + font-size: 15px; + font-weight: 700; + gap: 8px; + margin: 0; +} + +.ta-flow-head h2::before { + background: var(--mat-primary); + content: ""; + display: inline-block; + height: 15px; + margin-right: 0; + width: 3px; + vertical-align: -2px; +} + +.ta-flow-head h2 small { + color: var(--fs-004-07); + font-size: 12px; + font-weight: 400; +} + +.ta-flow-legend { + align-items: center; + color: var(--mat-ink-soft); + display: inline-flex; + font-size: 12px; + gap: 6px; +} + +.ta-flow-legend i { + margin-left: 8px; +} + +.ta-flow-canvas { + border: 1px solid var(--mat-line); + border-radius: 4px; + flex: 1; + min-height: 460px; + min-width: 0; + overflow: hidden; + position: relative; +} + +.ta-flow-diagram { + height: 100%; + width: 100%; +} + +.ta-flow-error { + align-items: center; + background: var(--zs-001-03); + border: 1px solid var(--zs-001-04); + border-radius: 2px; + color: var(--mat-danger); + display: flex; + font-size: 12px; + gap: 4px; + margin: 12px 0 0; + padding: 8px 12px; +} + +/* 席位配色（与 mat 同槽位色序） */ +.ta-seat--c0 { background: var(--zs-001-03); color: var(--zs-001); } +.ta-seat--c1 { background: var(--zs-002-03); color: var(--zs-002-10); } +.ta-seat--c2 { background: var(--fs-001-03); color: var(--fs-001-10); } +.ta-seat--c3 { background: var(--fs-002-03); color: var(--fs-002-10); } +.ta-seat--c4 { background: var(--fs-003-03); color: var(--fs-003-11); } +.ta-seat--c5 { background: var(--zs-001-02); color: var(--zs-001-11); } +.ta-seat--c6 { background: var(--zs-002-02); color: var(--zs-002-11); } +.ta-seat--c7 { background: #fffaf4; color: #b35f00; } + +.ta-flow-seat.is-running { outline: 1px solid var(--fs-001-09); } +.ta-flow-seat.is-failed { outline: 1px dashed var(--mat-danger); } + +.ta-dot { + border-radius: 50%; + display: inline-block; + height: 8px; + width: 8px; +} + +.ta-dot.is-done { background: var(--fs-002-09); } +.ta-dot.is-running { background: var(--fs-001-09); } +.ta-dot.is-waiting { background: var(--fs-004-06); } +.ta-dot.is-failed { background: var(--mat-danger); } + +/* ---------- 绑定弹窗 ---------- */ + +.ta-binding-dialog.t-dialog, +.ta-binding-dialog .t-dialog { + border-radius: 4px; +} + +.ta-binding-dialog .t-dialog__header { + font-weight: 700; +} + +.ta-binding-dialog .t-dialog__header-content::before { + background: var(--mat-primary); + content: ""; + display: inline-block; + height: 16px; + margin-right: 8px; + vertical-align: -3px; + width: 3px; +} + +.ta-dialog-footer { + display: flex; + gap: 8px; + justify-content: flex-end; +} + +.ta-binding { + display: flex; + flex-direction: column; + gap: 20px; + max-height: 62vh; + overflow-y: auto; + padding: 2px 4px 2px 0; +} + +.ta-binding-section { + display: flex; + flex-direction: column; +} + +.ta-binding-section-head { + align-items: baseline; + display: flex; + gap: 12px; + margin-bottom: 10px; +} + +.ta-binding-section-head h4 { + color: var(--mat-ink); + font-size: 14px; + font-weight: 700; + margin: 0; +} + +.ta-binding-section-head h4::before { + background: var(--mat-primary); + content: ""; + display: inline-block; + height: 14px; + margin-right: 8px; + width: 3px; + vertical-align: -2px; +} + +.ta-binding-section-head span { + color: var(--fs-004-07); + font-size: 12px; +} + +.ta-binding-tip { + border: 1px dashed var(--mat-line-strong); + border-radius: 4px; + color: var(--fs-004-07); + font-size: 12px; + margin: 0; + padding: 16px; + text-align: center; +} + +.ta-chain-grid { + display: grid; + gap: 12px; + grid-template-columns: minmax(0, 1fr); +} + +.ta-chain-card { + align-items: center; + background: var(--mat-panel); + border: 1px solid var(--mat-line); + border-radius: 4px; + cursor: pointer; + display: grid; + font: inherit; + gap: 4px 16px; + grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); + padding: 12px 16px; + text-align: left; + transition: border-color 120ms ease, box-shadow 120ms ease; +} + +.ta-chain-card:hover { + border-color: var(--mat-line-strong); + box-shadow: var(--mat-shadow-1); +} + +.ta-chain-card.is-active { + border-color: var(--mat-primary); + box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.08); +} + +.ta-chain-card header { + align-items: center; + color: var(--mat-primary); + display: flex; + gap: 6px; + grid-column: 1; + width: 100%; +} + +.ta-chain-card.is-active header svg { + fill: currentColor; +} + +.ta-chain-card-title { + color: var(--mat-ink); + flex: 1; + font-size: 13px; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ta-chain-card header em { + color: var(--fs-004-07); + flex-shrink: 0; + font-size: 11px; + font-style: normal; +} + +.ta-chain-card p { + color: var(--fs-004-07); + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + font-size: 12px; + grid-column: 1; + line-height: 1.5; + margin: 0; + overflow: hidden; +} + +.ta-chain-card-flow { + align-self: center; + background: var(--fs-004-02); + border-radius: 2px; + grid-column: 2; + grid-row: 1 / span 2; + overflow-x: auto; + padding: 8px; + width: 100%; +} + +.ta-block-rows { + border: 1px solid var(--mat-line); + border-radius: 4px; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.ta-block-row { + align-items: center; + display: flex; + gap: 12px; + padding: 8px 12px; +} + +.ta-block-row + .block-row, +.ta-block-row + .ta-block-row { + border-top: 1px solid var(--mat-line); +} + +.ta-block-name { + color: var(--mat-ink); + flex-shrink: 0; + font-size: 13px; + font-weight: 600; + width: 88px; +} + +.ta-block-row .t-select { + flex: 1; +} + +.ta-binding-settings { + border: 1px solid var(--mat-line); + border-radius: 4px; + display: flex; + flex-direction: column; + gap: 12px; + padding: 12px; +} + +.ta-field-label { + color: var(--mat-ink-soft); + display: block; + font-size: 14px; + margin-bottom: 8px; +} + +.ta-field--switch { + align-items: center; + display: flex; + justify-content: space-between; +} + +.ta-field--switch .ta-field-label { + margin: 0; +} + +/* ---------- 新建任务弹窗 ---------- */ + +.ta-create-grid { + display: grid; + gap: 12px 16px; + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.ta-create-grid .ta-field--wide { + grid-column: 1 / -1; +} + +.ta-create-dialog.t-dialog, +.ta-create-dialog .t-dialog { + border-radius: 4px; +} + +.ta-create-dialog .t-dialog__header { + font-weight: 700; +} + +.ta-create-dialog .t-dialog__header-content::before { + background: var(--mat-primary); + content: ""; + display: inline-block; + height: 16px; + margin-right: 8px; + vertical-align: -3px; + width: 3px; +} + +.ta-create { + display: flex; + flex-direction: column; + gap: 12px; +} + +.ta-create .ta-field { + display: block; +} + +.ta-required { + color: var(--mat-danger); + font-style: normal; + margin-left: 2px; +} + +/* ---------- 席位执行过程抽屉 ---------- */ + +.ta-seat-drawer.t-drawer { + border-radius: 4px 0 0 4px; +} + +.ta-seat-drawer .t-drawer__content-wrapper { + border-top: 3px solid var(--mat-primary); + padding: 0; +} + +.ta-seat-drawer .t-drawer__body { + padding-top: 16px; +} + +.ta-seat-header { + align-items: center; + display: flex; + gap: 12px; + padding-right: 44px; + width: 100%; +} + +.ta-seat-glyph { + align-items: center; + border-radius: 4px; + display: inline-flex; + flex-shrink: 0; + height: 38px; + justify-content: center; + width: 38px; +} + +.ta-seat-heading { + flex: 1; + min-width: 0; +} + +.ta-seat-heading h3 { + color: var(--mat-ink); + font-size: 16px; + font-weight: 700; + margin: 0 0 2px; +} + +.ta-seat-heading p { + color: var(--fs-004-07); + font-size: 12px; + margin: 0; +} + +.ta-seat-process { + display: flex; + flex-direction: column; + gap: 12px; +} + +.ta-seat-meta { + background: var(--fs-004-02); + border: 1px solid var(--mat-line); + border-radius: 4px; + color: var(--mat-ink-soft); + display: flex; + flex-wrap: wrap; + font-size: 12px; + gap: 6px 16px; + padding: 10px 12px; +} + +.ta-seat-timeline { + border-left: 1px solid var(--mat-line); + display: flex; + flex-direction: column; + gap: 12px; + list-style: none; + margin: 0; + padding: 0 0 0 16px; +} + +.ta-seat-item { + display: flex; + gap: 8px; +} + +.ta-seat-item-marker { + align-items: center; + background: var(--fs-004-03); + border-radius: 50%; + color: var(--fs-004-08); + display: inline-flex; + flex-shrink: 0; + height: 22px; + justify-content: center; + margin-left: -27px; + width: 22px; +} + +.ta-seat-item.is-artifact .ta-seat-item-marker { + background: var(--fs-002-03); + color: var(--fs-002-10); +} + +.ta-seat-item.is-tool .ta-seat-item-marker { + background: var(--zs-002-03); + color: var(--zs-002-09); +} + +.ta-seat-item-body { + background: var(--fs-004-02); + border: 1px solid var(--mat-line); + border-radius: 4px; + flex: 1; + min-width: 0; + padding: 10px 12px; +} + +.ta-seat-item-body header { + align-items: center; + display: flex; + gap: 8px; + margin-bottom: 6px; +} + +.ta-seat-item-kind { + border-radius: 2px; + font-size: 11px; + font-style: normal; + font-weight: 600; + padding: 2px 6px; +} + +.ta-seat-item-kind.is-input { background: var(--fs-004-03); color: var(--fs-004-08); } +.ta-seat-item-kind.is-ai { background: var(--zs-001-03); color: var(--mat-primary); } +.ta-seat-item-kind.is-tool { background: var(--zs-002-03); color: var(--zs-002-09); } +.ta-seat-item-kind.is-artifact { background: var(--fs-002-03); color: var(--fs-002-10); } + +.ta-seat-item-title { + color: var(--mat-ink); + font-size: 13px; + font-weight: 600; +} + +.ta-seat-item-body p { + color: var(--mat-ink-soft); + font-size: 12.5px; + line-height: 1.7; + margin: 0; + white-space: pre-wrap; +} + +.ta-seat-item-body pre { + background: var(--mat-panel); + border: 1px solid var(--mat-line); + border-radius: 2px; + color: var(--fs-004-09); + font-size: 11px; + line-height: 1.6; + margin: 8px 0 0; + max-height: 160px; + overflow: auto; + padding: 8px 10px; + white-space: pre-wrap; + word-break: break-all; +} + +/* ---------- 动画 ---------- */ + +@keyframes ta-pulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.3); } + 50% { box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.12); } +} + +@keyframes ta-rotate { + to { transform: rotate(360deg); } +} + +/* ---------- 响应式 ---------- */ + +@media (max-width: 1080px) { + .ta-grid { + grid-template-columns: 1fr; + } + + .ta-detail-layout { + grid-template-columns: 1fr; + } + + .ta-runs { + max-height: 320px; + min-height: 0; + } +} + +@media (max-width: 880px) { + .ta-page-head, + .ta-stats .ta-stat { + padding-left: 16px; + padding-right: 16px; + } + + .ta-stats { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .ta-stat:nth-child(3) { border-left: 0; } + .ta-stat:nth-child(n + 3) { border-top: 1px solid var(--mat-line); } + + .ta-body { + padding: 16px; + } + + .ta-detail-head, + .ta-detail-layout { + padding-left: 16px; + padding-right: 16px; + } + + .ta-chain-grid { + grid-template-columns: 1fr; + } + + .ta-chain-card { + grid-template-columns: 1fr; + } + + .ta-chain-card-flow { + grid-column: 1; + grid-row: auto; + } +} diff --git a/frontend-web/src/pages/official-task-analysis/types.ts b/frontend-web/src/pages/official-task-analysis/types.ts new file mode 100644 index 00000000..aa8d0b0a --- /dev/null +++ b/frontend-web/src/pages/official-task-analysis/types.ts @@ -0,0 +1,105 @@ +/** + * 外部任务多智能体定时分析 —— 前端先行数据模型（后端接口就绪后替换 store 层）。 + * + * 对应设计定稿： + * - 外部任务（对方系统推送创建/删除）1:1 绑定「业务链 + 频率 + 块→席位映射」。 + * - 执行记录两类：schedule 定时执行 / manual 手动执行（对方详情页总控问答）。 + * - 时间线内容版本：每次定时执行产出各块内容（供对方详情接口拉取），管理页内 + * 在席位执行过程抽屉里预览。 + */ + +import type { ScheduleConfig } from "@/components/workspace/scheduled-tasks/schedule-builder"; + +export type TaRunTrigger = "schedule" | "manual"; +export type TaRunStatus = "pending" | "running" | "succeeded" | "failed"; +export type TaSeatState = "waiting" | "running" | "done" | "failed"; + +/** 对方详情的分块内容与业务链席位的映射（存在绑定上，业务链保持纯粹）。 */ +export interface TaBlockMapping { + /** 块类型 key（对方系统定义）。 */ + key: string; + /** 块展示名。 */ + name: string; + /** 产出该块的席位（业务链 agent_id）。 */ + seatAgentId: string; +} + +export interface TaBinding { + chainId: string; + /** 业务链标题快照（展示用，链被删后仍可读）。 */ + chainTitle: string; + cron: string; + cronText: string; + enabled: boolean; + blocks: TaBlockMapping[]; + coordinatorPrompt?: string; + /** 问答沉淀的「执行方向备注」，注入后续每次定时执行（累积追加）。 */ + directionNotes: string[]; + /** 绑定时记住，作为下次创建任务的默认业务链返回给对方系统。 */ + timezone: string; +} + +export interface TaTask { + id: string; + /** 对方系统任务 id。 */ + sourceTaskId: string; + name: string; + description: string; + binding: TaBinding | null; + createdAt: string; +} + +/** 落库的运行记录；状态由 startedAt + durationMs 在读取时按当前时间推导。 */ +export interface TaRunRecord { + id: string; + taskId: string; + trigger: TaRunTrigger; + scheduledFor: string; + startedAt: string; + durationMs: number; + /** 该次执行的业务链编排快照（席位/阶段），链后续修改不影响历史回放。 */ + stages: string[][]; + /** 各阶段目标快照（与 stages 同下标），供流程图连线标签展示。 */ + stageGoals?: (string | null)[] | null; + seatNames: Record<string, string>; + /** 在该阶段（下标）失败；null = 成功。 */ + failStage: number | null; + /** 手动执行（总控问答）的摘要。 */ + manualSummary?: string; +} + +/** 读取时推导出的运行视图（每席位状态 + 耗时）。 */ +export interface TaSeatRunInfo { + state: TaSeatState; + durationMs: number; +} + +export interface TaRunView { + id: string; + taskId: string; + trigger: TaRunTrigger; + scheduledFor: string; + startedAt: string; + finishedAt: string | null; + status: TaRunStatus; + stageIndex: number; + stageTotal: number; + seatInfos: Record<string, TaSeatRunInfo>; + error: string | null; + /** 各块产出状态（按绑定块映射推导；未绑定返回空）。 */ + blockStates: Array<{ key: string; name: string; state: TaSeatState }>; + manualSummary?: string; + stages: string[][]; + stageGoals?: (string | null)[] | null; + seatNames: Record<string, string>; +} + +/** 绑定弹窗的提交载荷（内容块映射已移除；blocks 仅为兼容旧数据保留）。 */ +export interface TaBindingPayload { + chainId: string; + chainTitle: string; + schedule: ScheduleConfig; + enabled: boolean; + blocks?: TaBlockMapping[]; + coordinatorPrompt?: string; +} diff --git a/frontend-web/src/roundtable-planning/components/ChainFlowDiagram.tsx b/frontend-web/src/roundtable-planning/components/ChainFlowDiagram.tsx index fae7eace..7bfa4bdc 100644 --- a/frontend-web/src/roundtable-planning/components/ChainFlowDiagram.tsx +++ b/frontend-web/src/roundtable-planning/components/ChainFlowDiagram.tsx @@ -39,11 +39,16 @@ export interface ChainFlowStage { goal?: string | null; } +/** 节点执行状态（任务分析回放传入；缺省展示 Ready）。 */ +export type ChainFlowSeatState = "waiting" | "running" | "done" | "failed"; + export interface ChainFlowDiagramProps { stages: ChainFlowStage[]; /** 点击席位节点卡片（总控节点不触发）。 */ onNodeClick?: (agentId: string, name?: string) => void; className?: string; + /** 传入时节点卡片叠加执行状态徽标（任务分析的运行回放）；不影响原有展示。 */ + seatStates?: Record<string, { state: ChainFlowSeatState; durationMs?: number }> | null; } // ── 布局常量（世界坐标，单位 px）───────────────────────────────────────────── @@ -84,7 +89,7 @@ interface PlacedNode { rightX: number; } -export function ChainFlowDiagram({ stages, onNodeClick, className }: ChainFlowDiagramProps) { +export function ChainFlowDiagram({ stages, onNodeClick, className, seatStates }: ChainFlowDiagramProps) { // ── 列 / 节点 / 连线 / 标签布局 ────────────────────────────────────────── const layout = useMemo(() => { // 列：总控 + 各 Stage。 @@ -315,15 +320,43 @@ export function ChainFlowDiagram({ stages, onNodeClick, className }: ChainFlowDi </svg> {/* 节点卡片（参考「业务链条配置器」样式：左彩色描边 + 头像 + 名称 + - L-阶段徽标 + 同色角色行 + 底部 Ready 心跳条；图标仍用我方 getAvatar）。 */} + L-阶段徽标 + 同色角色行 + 底部 Ready 心跳条；图标仍用我方 getAvatar）。 + seatStates 传入时（任务分析回放）叠加执行状态徽标与状态描边。 */} {layout.cols.flatMap((col, colIdx) => col.nodes.map((n) => { const isCoordinator = n.id === COORDINATOR_ID; const nc = nodeColorOf(n.avatarType); + const seatState = !isCoordinator && seatStates ? seatStates[n.id] : undefined; + const state = seatState?.state; + const stateStyle = state + ? ({ + waiting: "text-muted-foreground", + running: "text-amber-600 dark:text-amber-300", + done: "text-emerald-600 dark:text-emerald-300", + failed: "text-red-600 dark:text-red-400", + } as const)[state] + : null; + const stateLabel = + state === "waiting" + ? "等待" + : state === "running" + ? "执行中" + : state === "done" + ? "完成" + : state === "failed" + ? "失败" + : null; + const stateSeconds = seatState?.durationMs + ? Math.max(1, Math.round(seatState.durationMs / 1000)) + : null; return ( <div key={n.id} - className={cn("absolute", !isCoordinator && "cursor-pointer")} + className={cn( + "absolute", + !isCoordinator && "cursor-pointer", + state === "waiting" && "opacity-60", + )} style={{ left: n.x, top: n.y, width: NODE_W, height: NODE_H }} onPointerDown={(e) => e.stopPropagation()} onClick={() => { @@ -339,9 +372,15 @@ export function ChainFlowDiagram({ stages, onNodeClick, className }: ChainFlowDi isCoordinator ? "border-border bg-primary/[0.04]" : "border-border hover:-translate-y-0.5 hover:shadow-[0_8px_22px_rgba(15,23,42,0.10)]", + state === "running" && "border-amber-400/80", + state === "failed" && "border-red-500/70", )} // 左侧 4px 彩色描边：内联上色，避免被 border-border 的四边色覆盖。 - style={{ borderLeftColor: nc.hex, borderLeftWidth: 4 }} + style={{ + borderLeftColor: nc.hex, + borderLeftWidth: 4, + ...(state === "running" ? { boxShadow: "0 0 0 3px rgba(245,158,11,0.15)" } : {}), + }} > {/* 上：头像 + 名称 + 阶段徽标 + 角色行 */} <div className="flex items-start gap-2 overflow-hidden"> @@ -359,13 +398,34 @@ export function ChainFlowDiagram({ stages, onNodeClick, className }: ChainFlowDi </div> </div> - {/* 下：身份 + Ready 心跳条 */} + {/* 下：身份 + 状态行（回放模式显示执行状态，否则 Ready 心跳条） */} <div className="flex items-center justify-between border-t border-border/60 pt-1 text-[8px] text-muted-foreground"> <span className="truncate">{isCoordinator ? "总控协调核心" : "智能体席位"}</span> - <span className="ml-1.5 flex shrink-0 items-center gap-1 rounded bg-muted px-1 py-0.5 font-medium text-primary"> - <span className="size-1 rounded-full bg-emerald-500" /> - Ready - </span> + {state && stateLabel ? ( + <span + className={cn( + "ml-1.5 flex shrink-0 items-center gap-1 rounded px-1 py-0.5 font-medium", + stateStyle, + )} + > + <span + className={cn( + "size-1.5 rounded-full", + state === "done" && "bg-emerald-500", + state === "running" && "animate-pulse bg-amber-500", + state === "failed" && "bg-red-500", + state === "waiting" && "bg-muted-foreground/60", + )} + /> + {stateLabel} + {stateSeconds != null && state !== "waiting" ? ` · ${stateSeconds}s` : ""} + </span> + ) : ( + <span className="ml-1.5 flex shrink-0 items-center gap-1 rounded bg-muted px-1 py-0.5 font-medium text-primary"> + <span className="size-1 rounded-full bg-emerald-500" /> + Ready + </span> + )} </div> </div> </div> @@ -445,22 +505,33 @@ export function ChainFlowDiagram({ stages, onNodeClick, className }: ChainFlowDi style={{ width: mmW, height: mmH }} onClick={onMinimapClick} > - {/* 节点缩略块 */} - {layout.allNodes.map((n) => ( - <div - key={n.id} - className={cn( - "absolute rounded-[1px]", - n.id === COORDINATOR_ID ? "bg-primary/70" : "bg-foreground/35", - )} - style={{ - left: n.x * mmScale, - top: n.y * mmScale, - width: NODE_W * mmScale, - height: NODE_H * mmScale, - }} - /> - ))} + {/* 节点缩略块（回放模式按状态着色） */} + {layout.allNodes.map((n) => { + const state = n.id === COORDINATOR_ID ? null : seatStates?.[n.id]?.state ?? null; + return ( + <div + key={n.id} + className={cn( + "absolute rounded-[1px]", + n.id === COORDINATOR_ID + ? "bg-primary/70" + : state === "done" + ? "bg-emerald-500/70" + : state === "running" + ? "bg-amber-500/80" + : state === "failed" + ? "bg-red-500/80" + : "bg-foreground/35", + )} + style={{ + left: n.x * mmScale, + top: n.y * mmScale, + width: NODE_W * mmScale, + height: NODE_H * mmScale, + }} + /> + ); + })} {/* 当前视口框 */} <div className="absolute border-2 border-primary bg-primary/10" diff --git a/offline-backend-20260512/backend/config.yaml b/offline-backend-20260512/backend/config.yaml index b3fdab7e..3808609c 100644 --- a/offline-backend-20260512/backend/config.yaml +++ b/offline-backend-20260512/backend/config.yaml @@ -456,7 +456,10 @@ auth_login: # 点击后在新标签页打开下面的 url。enabled 关掉则不显示该入口。 database: - backend: sqlite + # 本地业务数据使用远程 MySQL；连接地址由 backend/.env.local 提供。 + # LangGraph 对话检查点仍由下方 checkpointer 保存到本机 SQLite。 + backend: mysql + mysql_url: $MYSQL_DATABASE_URL sqlite_dir: .deer-flow/data # 高斯/OpenGauss 业务库示例（启用前先执行 uv sync --extra gauss）： # backend: gauss diff --git a/offline-backend-20260512/backend/scripts/migrate_business_sqlite_to_mysql.py b/offline-backend-20260512/backend/scripts/migrate_business_sqlite_to_mysql.py index b233e9ab..74d192ae 100644 --- a/offline-backend-20260512/backend/scripts/migrate_business_sqlite_to_mysql.py +++ b/offline-backend-20260512/backend/scripts/migrate_business_sqlite_to_mysql.py @@ -31,6 +31,8 @@ BUSINESS_TABLES = [ "feedback", "agents", "skills", + "ai_writing_article_types", + "ai_writing_sessions", "scheduled_tasks", "scheduled_task_subscriptions", "scheduled_task_runs", diff --git a/scripts/start-deerflow-mysql-tunnel.ps1 b/scripts/start-deerflow-mysql-tunnel.ps1 new file mode 100644 index 00000000..8209518c --- /dev/null +++ b/scripts/start-deerflow-mysql-tunnel.ps1 @@ -0,0 +1,34 @@ +<# +.SYNOPSIS +Starts the SSH tunnel required by the local DeerFlow backend's remote MySQL connection. + +.DESCRIPTION +The local backend is configured to reach MySQL at 127.0.0.1:13307. This script forwards +that port over SSH to the MySQL listener on the remote server. It deliberately does not +store the SSH password; OpenSSH prompts for it when the tunnel starts. +#> +[CmdletBinding()] +param( + [string]$RemoteHost = "119.254.86.251", + [int]$SshPort = 22322, + [string]$SshUser = "root", + [int]$LocalPort = 13307, + [int]$RemoteMySqlPort = 3307 +) + +$existing = Get-NetTCPConnection -State Listen -LocalPort $LocalPort -ErrorAction SilentlyContinue +if ($existing) { + Write-Host "本地端口 $LocalPort 已在监听；SSH 隧道应已启动。" -ForegroundColor Yellow + exit 0 +} + +Write-Host "正在建立 MySQL SSH 隧道：127.0.0.1:$LocalPort -> $RemoteHost`:$RemoteMySqlPort" +Write-Host "请保持此窗口运行；按 Ctrl+C 可关闭隧道。" + +ssh -N ` + -o ExitOnForwardFailure=yes ` + -o ServerAliveInterval=30 ` + -o ServerAliveCountMax=3 ` + -L "${LocalPort}:127.0.0.1:${RemoteMySqlPort}" ` + -p $SshPort ` + "${SshUser}@${RemoteHost}"