fix(roundtable): 查看编排流程图按钮直接进入基本信息步骤
移除弹窗预览,改为跳转到第二步以便同时编辑基本信息并查看流程图。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
1 parent
56449ed129
commit
ab22b50faf
1 file changed
+5
-56
@@ -63,12 +63,6 @@ import {
|
|||||||
import { CSS } from "@dnd-kit/utilities";
|
import { CSS } from "@dnd-kit/utilities";
|
||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/components/ui/dialog";
|
|
||||||
import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
|
import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
|
||||||
import { listAgents } from "@/core/agents";
|
import { listAgents } from "@/core/agents";
|
||||||
|
|
||||||
@@ -112,7 +106,6 @@ import {
|
|||||||
type StageGroups,
|
type StageGroups,
|
||||||
} from "@/roundtable-planning/lib/chain-stages";
|
} from "@/roundtable-planning/lib/chain-stages";
|
||||||
import { getAvatarTypeFor } from "@/roundtable-planning/lib/roundtable-constants";
|
import { getAvatarTypeFor } from "@/roundtable-planning/lib/roundtable-constants";
|
||||||
import { DagFlowChart } from "@/roundtable-planning/components/DagFlowChart";
|
|
||||||
import { ChainFlowDiagram } from "@/roundtable-planning/components/ChainFlowDiagram";
|
import { ChainFlowDiagram } from "@/roundtable-planning/components/ChainFlowDiagram";
|
||||||
import { AgentDetailSheet } from "@/roundtable-planning/components/AgentDetailSheet";
|
import { AgentDetailSheet } from "@/roundtable-planning/components/AgentDetailSheet";
|
||||||
|
|
||||||
@@ -166,8 +159,7 @@ export default function BusinessChainEditorPage() {
|
|||||||
|
|
||||||
const [activeDrag, setActiveDrag] = useState<ActiveDrag>(null);
|
const [activeDrag, setActiveDrag] = useState<ActiveDrag>(null);
|
||||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||||
const [flowOpen, setFlowOpen] = useState(false);
|
// 两步向导:1=链条编排(双栏拖拽编辑器),2=基本信息(标题/描述/总控提示词 + 流程图预览)。
|
||||||
// 两步向导:1=基本信息(标题/描述/总控提示词),2=链条编排(双栏拖拽编辑器)。
|
|
||||||
const [step, setStep] = useState<1 | 2>(1);
|
const [step, setStep] = useState<1 | 2>(1);
|
||||||
// 详情抽屉:左栏点卡片本体、右栏点「查看详情」都打开它,展示该智能体详情。
|
// 详情抽屉:左栏点卡片本体、右栏点「查看详情」都打开它,展示该智能体详情。
|
||||||
const [detailAgent, setDetailAgent] = useState<{ id: string; name?: string } | null>(null);
|
const [detailAgent, setDetailAgent] = useState<{ id: string; name?: string } | null>(null);
|
||||||
@@ -207,29 +199,7 @@ export default function BusinessChainEditorPage() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
// ─── Phase 7 只读流程图预览(§2.2 底部 / §7)──────────────────────────────
|
// ─── Phase 7 只读流程图预览(§2.2 底部 / §7)──────────────────────────────
|
||||||
// 把当前分层(去掉空 stage)映射成 DagFlowChart 的 stages,并提供席位名/配色解析。
|
// 步骤二右侧「精美流程图」的数据源:过滤空 stage,带上各阶段目标作为依赖标签。
|
||||||
const previewStages = useMemo(
|
|
||||||
() =>
|
|
||||||
stageGroups
|
|
||||||
.filter((g) => g.seats.length > 0)
|
|
||||||
.map((g, i) => ({ id: `stage-${i}`, agentIds: g.seats.map((s) => s.agent_id) })),
|
|
||||||
[stageGroups],
|
|
||||||
);
|
|
||||||
const seatNameById = useMemo(() => {
|
|
||||||
const m = new Map<string, string>();
|
|
||||||
for (const g of displayStageGroups)
|
|
||||||
for (const s of g.seats) m.set(s.agent_id.toLowerCase(), s.name || s.agent_id);
|
|
||||||
return m;
|
|
||||||
}, [displayStageGroups]);
|
|
||||||
const resolvePreviewSeat = useCallback(
|
|
||||||
(agentId: string, order: number) => ({
|
|
||||||
name: seatNameById.get(agentId.toLowerCase()) ?? agentId,
|
|
||||||
avatarType: getAvatarTypeFor(agentId, order),
|
|
||||||
}),
|
|
||||||
[seatNameById],
|
|
||||||
);
|
|
||||||
|
|
||||||
// 步骤一右侧「精美流程图」的数据源:过滤空 stage,带上各阶段目标作为依赖标签。
|
|
||||||
const flowStages = useMemo(
|
const flowStages = useMemo(
|
||||||
() =>
|
() =>
|
||||||
displayStageGroups
|
displayStageGroups
|
||||||
@@ -1129,8 +1099,8 @@ export default function BusinessChainEditorPage() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Phase 7:分层 DAG 只读流程图预览(§2.2 底部)。空编排时不渲染。
|
{/* Phase 7:分层 DAG 只读流程图预览(§2.2 底部)。空编排时不渲染。
|
||||||
改为弹窗查看:底栏一个入口按钮,点击后在 Dialog 内展示完整流程图。 */}
|
底栏入口按钮直接进入第二步「基本信息」,右侧展示完整流程图。 */}
|
||||||
{step === 1 && previewStages.length > 0 && (
|
{step === 1 && hasFlowContent && (
|
||||||
<section className="shrink-0 flex items-center justify-between gap-2 border-t border-border bg-card px-6 py-2">
|
<section className="shrink-0 flex items-center justify-between gap-2 border-t border-border bg-card px-6 py-2">
|
||||||
<span className="flex items-center gap-2 text-[11px] font-semibold text-muted-foreground">
|
<span className="flex items-center gap-2 text-[11px] font-semibold text-muted-foreground">
|
||||||
<span>编排预览</span>
|
<span>编排预览</span>
|
||||||
@@ -1140,7 +1110,7 @@ export default function BusinessChainEditorPage() {
|
|||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setFlowOpen(true)}
|
onClick={() => setStep(2)}
|
||||||
className="inline-flex items-center gap-1.5 rounded-lg border border-primary/30 bg-primary/5 px-2.5 py-1 text-xs font-semibold text-primary transition hover:bg-primary/10"
|
className="inline-flex items-center gap-1.5 rounded-lg border border-primary/30 bg-primary/5 px-2.5 py-1 text-xs font-semibold text-primary transition hover:bg-primary/10"
|
||||||
>
|
>
|
||||||
<Network className="size-3.5" />
|
<Network className="size-3.5" />
|
||||||
@@ -1149,27 +1119,6 @@ export default function BusinessChainEditorPage() {
|
|||||||
</section>
|
</section>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 编排流程图弹窗 */}
|
|
||||||
{previewStages.length > 0 && (
|
|
||||||
<Dialog open={flowOpen} onOpenChange={setFlowOpen}>
|
|
||||||
<DialogContent className="flex max-h-[88vh] w-[94vw] flex-col gap-0 sm:max-w-[1100px]">
|
|
||||||
<DialogHeader className="shrink-0">
|
|
||||||
<DialogTitle className="flex items-center gap-2">
|
|
||||||
<Network className="size-5 text-primary" />
|
|
||||||
编排流程图
|
|
||||||
</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="min-h-0 flex-1 overflow-auto pt-2">
|
|
||||||
<DagFlowChart
|
|
||||||
stages={previewStages}
|
|
||||||
resolveSeat={resolvePreviewSeat}
|
|
||||||
showReportMilestone={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 智能体详情抽屉(左栏卡片 / 右栏席位共用) */}
|
{/* 智能体详情抽屉(左栏卡片 / 右栏席位共用) */}
|
||||||
<AgentDetailSheet
|
<AgentDetailSheet
|
||||||
agentId={detailAgent?.id ?? null}
|
agentId={detailAgent?.id ?? null}
|
||||||
|
|||||||
Reference in new issue
Block a user