776 lines
28 KiB
TypeScript
776 lines
28 KiB
TypeScript
|
import { useEffect, useState } from "react";
|
||
|
|
import {
|
||
|
|
Banner,
|
||
|
|
Button,
|
||
|
|
Input,
|
||
|
|
InputNumber,
|
||
|
|
Pagination,
|
||
|
|
TextArea,
|
||
|
|
Toast,
|
||
|
|
} from "@douyinfe/semi-ui-19";
|
||
|
|
import { api, post } from "../api";
|
||
|
|
import type { PageContext, UIAction } from "../ai/types";
|
||
|
|
import { FlowCanvas, type NodeType } from "./FlowCanvas";
|
||
|
|
import { FlowLaunchForm } from "./FlowLaunchForm";
|
||
|
|
import { FlowRunView } from "./FlowRunView";
|
||
|
|
import type { FlowNode, FlowRun, Workflow } from "./flowTypes";
|
||
|
|
import { flowStatus } from "./flowTypes";
|
||
|
|
import "./workspace.css";
|
||
|
|
type WorkflowAsset = {
|
||
|
|
id: string;
|
||
|
|
version: number;
|
||
|
|
name: string;
|
||
|
|
content: Workflow;
|
||
|
|
};
|
||
|
|
type RefAsset = { id: string; version: number; name: string; kind: string };
|
||
|
|
const empty: Workflow = {
|
||
|
|
name: "新研究流程",
|
||
|
|
nodes: [
|
||
|
|
{ id: "input", type: "input", label: "固定输入", x: 40, y: 80, config: {} },
|
||
|
|
],
|
||
|
|
edges: [],
|
||
|
|
};
|
||
|
|
function readDraft(key: string, fallback: Workflow): Workflow {
|
||
|
|
try {
|
||
|
|
const value = JSON.parse(
|
||
|
|
localStorage.getItem(`quantflow-draft:${key}`) || "null",
|
||
|
|
);
|
||
|
|
const graph = value?.graph || value;
|
||
|
|
return graph?.nodes && graph?.edges && graph?.name ? graph : fallback;
|
||
|
|
} catch {
|
||
|
|
return fallback;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export function QuantFlowPage({
|
||
|
|
active,
|
||
|
|
onContext,
|
||
|
|
onAction,
|
||
|
|
}: {
|
||
|
|
active: boolean;
|
||
|
|
onContext: (c: PageContext) => void;
|
||
|
|
onAction: (a: UIAction) => void;
|
||
|
|
}) {
|
||
|
|
const [assets, setAssets] = useState<WorkflowAsset[]>([]),
|
||
|
|
[total, setTotal] = useState(0),
|
||
|
|
[page, setPage] = useState(1);
|
||
|
|
const [types, setTypes] = useState<NodeType[]>([]),
|
||
|
|
[refs, setRefs] = useState<RefAsset[]>([]);
|
||
|
|
const [asset, setAsset] = useState<WorkflowAsset | null>(null),
|
||
|
|
[versions, setVersions] = useState<{ version: number }[]>([]);
|
||
|
|
const [graph, setGraph] = useState<Workflow>(() => readDraft("new", empty));
|
||
|
|
const [selected, setSelected] = useState<string | null>("input"),
|
||
|
|
[nodeType, setNodeType] = useState("generate");
|
||
|
|
const [source, setSource] = useState(""),
|
||
|
|
[target, setTarget] = useState(""),
|
||
|
|
[branch, setBranch] = useState("");
|
||
|
|
const [error, setError] = useState(""),
|
||
|
|
[valid, setValid] = useState(false),
|
||
|
|
[busy, setBusy] = useState(false);
|
||
|
|
const [mode, setMode] = useState<"edit" | "launch" | "runs">(() =>
|
||
|
|
localStorage.getItem("quantflow-mode") === "runs" ? "runs" : "edit",
|
||
|
|
);
|
||
|
|
const [runs, setRuns] = useState<FlowRun[]>([]),
|
||
|
|
[runTotal, setRunTotal] = useState(0),
|
||
|
|
[runPage, setRunPage] = useState(1);
|
||
|
|
const [runId, setRunId] = useState<string | null>(() =>
|
||
|
|
localStorage.getItem("quantflow-selected-run"),
|
||
|
|
);
|
||
|
|
const [run, setRun] = useState<FlowRun | null>(null),
|
||
|
|
[revision, setRevision] = useState(0);
|
||
|
|
useEffect(() => {
|
||
|
|
localStorage.setItem("quantflow-mode", mode === "runs" ? "runs" : "edit");
|
||
|
|
}, [mode]);
|
||
|
|
const node = graph.nodes.find((n) => n.id === selected);
|
||
|
|
const dirty =
|
||
|
|
!asset || JSON.stringify(graph) !== JSON.stringify(asset.content);
|
||
|
|
useEffect(() => {
|
||
|
|
if (active)
|
||
|
|
onContext({
|
||
|
|
page: "quantflow",
|
||
|
|
research_asset_id: asset?.id,
|
||
|
|
research_run_id: mode === "runs" ? runId : null,
|
||
|
|
});
|
||
|
|
}, [active, asset?.id, runId, mode, onContext]);
|
||
|
|
useEffect(() => {
|
||
|
|
try {
|
||
|
|
localStorage.setItem(
|
||
|
|
`quantflow-draft:${asset?.id || "new"}`,
|
||
|
|
JSON.stringify({ graph, asset }),
|
||
|
|
);
|
||
|
|
} catch {
|
||
|
|
/* The in-memory draft remains usable when local storage is full. */
|
||
|
|
}
|
||
|
|
}, [graph, asset?.id]);
|
||
|
|
useEffect(() => {
|
||
|
|
if (!active) return;
|
||
|
|
const c = new AbortController();
|
||
|
|
Promise.all([
|
||
|
|
api<{ items: WorkflowAsset[]; total: number }>(
|
||
|
|
`/research/assets?kind=workflow&offset=${(page - 1) * 25}`,
|
||
|
|
{ signal: c.signal },
|
||
|
|
),
|
||
|
|
api<{ items: NodeType[] }>("/research/flows/nodes", { signal: c.signal }),
|
||
|
|
api<{ items: RefAsset[] }>("/research/assets?kind=feature&limit=100", {
|
||
|
|
signal: c.signal,
|
||
|
|
}),
|
||
|
|
api<{ items: RefAsset[] }>("/research/assets?kind=template&limit=100", {
|
||
|
|
signal: c.signal,
|
||
|
|
}),
|
||
|
|
])
|
||
|
|
.then(([a, t, f, m]) => {
|
||
|
|
setAssets(a.items);
|
||
|
|
setTotal(a.total);
|
||
|
|
setTypes(t.items);
|
||
|
|
setRefs([...f.items, ...m.items]);
|
||
|
|
})
|
||
|
|
.catch((e) => {
|
||
|
|
if (!c.signal.aborted) setError(e.message);
|
||
|
|
});
|
||
|
|
return () => c.abort();
|
||
|
|
}, [active, page, revision]);
|
||
|
|
useEffect(() => {
|
||
|
|
if (!active || mode !== "runs") return;
|
||
|
|
const c = new AbortController();
|
||
|
|
let timer: ReturnType<typeof setTimeout>;
|
||
|
|
async function refresh() {
|
||
|
|
try {
|
||
|
|
const list = await api<{ items: FlowRun[]; total: number }>(
|
||
|
|
`/research/flows/runs?kind=quantflow&offset=${(runPage - 1) * 25}`,
|
||
|
|
{ signal: c.signal },
|
||
|
|
);
|
||
|
|
setRuns(list.items);
|
||
|
|
setRunTotal(list.total);
|
||
|
|
if (runId)
|
||
|
|
setRun(
|
||
|
|
await api(`/research/flows/runs/${runId}`, { signal: c.signal }),
|
||
|
|
);
|
||
|
|
} catch (e) {
|
||
|
|
if (!c.signal.aborted) setError((e as Error).message);
|
||
|
|
} finally {
|
||
|
|
if (!c.signal.aborted) timer = setTimeout(() => void refresh(), 1500);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
void refresh();
|
||
|
|
return () => {
|
||
|
|
c.abort();
|
||
|
|
clearTimeout(timer);
|
||
|
|
};
|
||
|
|
}, [active, mode, runId, runPage, revision]);
|
||
|
|
function change(value: Workflow) {
|
||
|
|
setGraph(value);
|
||
|
|
setValid(false);
|
||
|
|
setError("");
|
||
|
|
}
|
||
|
|
async function open(item: WorkflowAsset, version?: number) {
|
||
|
|
try {
|
||
|
|
const loaded = version
|
||
|
|
? await api<WorkflowAsset>(
|
||
|
|
`/research/assets/${item.id}?version=${version}`,
|
||
|
|
)
|
||
|
|
: item;
|
||
|
|
let baseline = loaded;
|
||
|
|
if (!version) {
|
||
|
|
try {
|
||
|
|
const draft = JSON.parse(
|
||
|
|
localStorage.getItem(`quantflow-draft:${loaded.id}`) || "null",
|
||
|
|
);
|
||
|
|
if (draft?.asset?.id === loaded.id) baseline = draft.asset;
|
||
|
|
} catch {
|
||
|
|
/* Keep the server version when the local draft is unavailable. */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
setAsset(baseline);
|
||
|
|
change(version ? loaded.content : readDraft(loaded.id, loaded.content));
|
||
|
|
setSelected(loaded.content.nodes[0]?.id || null);
|
||
|
|
setMode("edit");
|
||
|
|
setVersions(await api(`/research/assets/${item.id}/versions`));
|
||
|
|
} catch (e) {
|
||
|
|
setError((e as Error).message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
async function validate(value = graph) {
|
||
|
|
await post("/research/flows/validate", value);
|
||
|
|
setValid(true);
|
||
|
|
setError("");
|
||
|
|
}
|
||
|
|
async function save(copy = false) {
|
||
|
|
setBusy(true);
|
||
|
|
try {
|
||
|
|
await validate();
|
||
|
|
const result = await api<WorkflowAsset>(
|
||
|
|
asset && !copy ? `/research/assets/${asset.id}` : "/research/assets",
|
||
|
|
{
|
||
|
|
method: asset && !copy ? "PUT" : "POST",
|
||
|
|
body: JSON.stringify({
|
||
|
|
kind: "workflow",
|
||
|
|
content: graph,
|
||
|
|
...(asset && !copy ? { version: asset.version } : {}),
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
);
|
||
|
|
setAsset(result);
|
||
|
|
setGraph(result.content);
|
||
|
|
setValid(true);
|
||
|
|
setVersions(await api(`/research/assets/${result.id}/versions`));
|
||
|
|
setRevision((v) => v + 1);
|
||
|
|
Toast.success(`已保存流程 v${result.version}`);
|
||
|
|
} catch (e) {
|
||
|
|
setError((e as Error).message);
|
||
|
|
} finally {
|
||
|
|
setBusy(false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function updateNode(config: Partial<FlowNode>) {
|
||
|
|
if (node)
|
||
|
|
change({
|
||
|
|
...graph,
|
||
|
|
nodes: graph.nodes.map((n) =>
|
||
|
|
n.id === node.id ? { ...n, ...config } : n,
|
||
|
|
),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function addNode() {
|
||
|
|
const type = types.find((t) => t.type === nodeType);
|
||
|
|
if (!type || graph.nodes.length >= 50) return;
|
||
|
|
const id = `${nodeType}_${crypto.randomUUID().slice(0, 8)}`;
|
||
|
|
change({
|
||
|
|
...graph,
|
||
|
|
nodes: [
|
||
|
|
...graph.nodes,
|
||
|
|
{
|
||
|
|
id,
|
||
|
|
type: nodeType,
|
||
|
|
label: type.label,
|
||
|
|
x: 60 + (graph.nodes.length % 4) * 250,
|
||
|
|
y: 80 + Math.floor(graph.nodes.length / 4) * 180,
|
||
|
|
config:
|
||
|
|
nodeType === "iterate"
|
||
|
|
? { max_rounds: 3 }
|
||
|
|
: nodeType === "variant"
|
||
|
|
? { method: "structure" }
|
||
|
|
: {},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
setSelected(id);
|
||
|
|
}
|
||
|
|
function addEdge() {
|
||
|
|
const a = graph.nodes.find((n) => n.id === source),
|
||
|
|
b = graph.nodes.find((n) => n.id === target);
|
||
|
|
if (!a || !b || source === target) {
|
||
|
|
setError("请选择两个不同的连线端点");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (
|
||
|
|
!types
|
||
|
|
.find((t) => t.type === b.type)
|
||
|
|
?.accepts.includes(types.find((t) => t.type === a.type)?.produces || "")
|
||
|
|
) {
|
||
|
|
setError("输入输出类型不兼容");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const edge = {
|
||
|
|
source,
|
||
|
|
target,
|
||
|
|
branch: a.type === "condition" && branch ? branch : null,
|
||
|
|
};
|
||
|
|
if (
|
||
|
|
graph.edges.some(
|
||
|
|
(e) =>
|
||
|
|
e.source === source &&
|
||
|
|
e.target === target &&
|
||
|
|
e.branch === edge.branch,
|
||
|
|
)
|
||
|
|
) {
|
||
|
|
setError("连线重复");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
change({ ...graph, edges: [...graph.edges, edge] });
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<section className="research-workspace quantflow-workspace">
|
||
|
|
<div className="section-toolbar">
|
||
|
|
<div>
|
||
|
|
<h2>QuantFlow</h2>
|
||
|
|
<p className="muted">组合原生研究节点，复用回测、评估与有限预算。</p>
|
||
|
|
</div>
|
||
|
|
<div className="inline-actions">
|
||
|
|
<Button onClick={() => setMode("edit")}>编辑画布</Button>
|
||
|
|
<Button onClick={() => setMode("runs")}>运行记录</Button>
|
||
|
|
<Button
|
||
|
|
onClick={() => {
|
||
|
|
setAsset(null);
|
||
|
|
setVersions([]);
|
||
|
|
change(readDraft("new", empty));
|
||
|
|
setMode("edit");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
新建流程
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
onClick={async () => {
|
||
|
|
try {
|
||
|
|
const recipe = await api<Workflow>("/research/flows/recipe");
|
||
|
|
setAsset(null);
|
||
|
|
setVersions([]);
|
||
|
|
change({ ...recipe, name: "固定研究配方副本" });
|
||
|
|
setMode("edit");
|
||
|
|
} catch (e) {
|
||
|
|
setError((e as Error).message);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
复制固定配方
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{error && <Banner type="danger" description={error} />}
|
||
|
|
<div className="research-layout">
|
||
|
|
<aside className="research-library">
|
||
|
|
<h3>{mode === "runs" ? "画布运行" : "流程库"}</h3>
|
||
|
|
{mode === "runs" ? (
|
||
|
|
<>
|
||
|
|
{runs.map((r) => (
|
||
|
|
<button
|
||
|
|
className={`research-library-item ${runId === r.id ? "selected" : ""}`}
|
||
|
|
key={r.id}
|
||
|
|
onClick={() => {
|
||
|
|
setRunId(r.id);
|
||
|
|
setRun(null);
|
||
|
|
localStorage.setItem("quantflow-selected-run", r.id);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<strong>{r.name}</strong>
|
||
|
|
<span>
|
||
|
|
{flowStatus[r.status]} · 第 {r.round} 轮
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
<Pagination
|
||
|
|
size="small"
|
||
|
|
total={runTotal}
|
||
|
|
currentPage={runPage}
|
||
|
|
pageSize={25}
|
||
|
|
onPageChange={setRunPage}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
{assets.map((a) => (
|
||
|
|
<button
|
||
|
|
className={`research-library-item ${asset?.id === a.id ? "selected" : ""}`}
|
||
|
|
key={a.id}
|
||
|
|
onClick={() => void open(a)}
|
||
|
|
>
|
||
|
|
<strong>{a.name}</strong>
|
||
|
|
<span>
|
||
|
|
v{a.version} · {a.content.nodes.length} 个节点
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
<Pagination
|
||
|
|
size="small"
|
||
|
|
total={total}
|
||
|
|
currentPage={page}
|
||
|
|
pageSize={25}
|
||
|
|
onPageChange={setPage}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</aside>
|
||
|
|
<div className="research-main">
|
||
|
|
{mode === "runs" ? (
|
||
|
|
run ? (
|
||
|
|
<>
|
||
|
|
<FlowCanvas
|
||
|
|
graph={run.definition}
|
||
|
|
types={types}
|
||
|
|
selected={selected}
|
||
|
|
onSelect={setSelected}
|
||
|
|
run={run}
|
||
|
|
/>
|
||
|
|
{selected && (
|
||
|
|
<div className="research-card">
|
||
|
|
<h4>所选节点产物</h4>
|
||
|
|
{run.steps
|
||
|
|
.filter((s) => s.node_id === selected)
|
||
|
|
.map((s) => (
|
||
|
|
<details key={s.id}>
|
||
|
|
<summary>
|
||
|
|
第 {s.round} 轮 · {flowStatus[s.status]}
|
||
|
|
</summary>
|
||
|
|
<pre className="code-block">
|
||
|
|
{JSON.stringify(s.output, null, 2)}
|
||
|
|
</pre>
|
||
|
|
</details>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<FlowRunView
|
||
|
|
run={run}
|
||
|
|
onRefresh={() => setRevision((v) => v + 1)}
|
||
|
|
onAction={onAction}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<p className="research-card">选择一条运行查看节点状态和产物。</p>
|
||
|
|
)
|
||
|
|
) : mode === "launch" && asset ? (
|
||
|
|
<>
|
||
|
|
<Button onClick={() => setMode("edit")}>返回流程</Button>
|
||
|
|
<FlowLaunchForm
|
||
|
|
workflow={asset}
|
||
|
|
onStarted={(r) => {
|
||
|
|
setRun(r);
|
||
|
|
setRunId(r.id);
|
||
|
|
localStorage.setItem("quantflow-selected-run", r.id);
|
||
|
|
setMode("runs");
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="research-card">
|
||
|
|
<div className="section-toolbar">
|
||
|
|
<Input
|
||
|
|
aria-label="流程名称"
|
||
|
|
value={graph.name}
|
||
|
|
onChange={(name) => change({ ...graph, name })}
|
||
|
|
/>
|
||
|
|
<div className="inline-actions">
|
||
|
|
{asset && (
|
||
|
|
<label>
|
||
|
|
历史版本
|
||
|
|
<select
|
||
|
|
aria-label="流程版本"
|
||
|
|
value={asset.version}
|
||
|
|
onChange={(e) =>
|
||
|
|
void open(asset, Number(e.target.value))
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{versions.map((v) => (
|
||
|
|
<option key={v.version} value={v.version}>
|
||
|
|
v{v.version}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
)}
|
||
|
|
<Button
|
||
|
|
disabled={busy}
|
||
|
|
onClick={() =>
|
||
|
|
void validate().catch((e) => setError(e.message))
|
||
|
|
}
|
||
|
|
>
|
||
|
|
校验连接
|
||
|
|
</Button>
|
||
|
|
<Button disabled={busy} onClick={() => void save()}>
|
||
|
|
保存流程版本
|
||
|
|
</Button>
|
||
|
|
{asset && (
|
||
|
|
<Button disabled={busy} onClick={() => void save(true)}>
|
||
|
|
另存流程
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
<Button
|
||
|
|
theme="solid"
|
||
|
|
disabled={dirty || busy}
|
||
|
|
onClick={() => setMode("launch")}
|
||
|
|
>
|
||
|
|
启动已保存流程
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p className="research-hint">
|
||
|
|
{valid
|
||
|
|
? "连接校验通过。"
|
||
|
|
: "保存时核验节点类型、连接和循环。"}{" "}
|
||
|
|
{dirty
|
||
|
|
? "有未保存草稿，启动前请保存版本。"
|
||
|
|
: `当前 v${asset?.version}，运行固定此版本。`}{" "}
|
||
|
|
普通连接无环；终点迭代节点重复整个流程，每次运行都受预算约束。
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="flow-editor">
|
||
|
|
<div>
|
||
|
|
<FlowCanvas
|
||
|
|
graph={graph}
|
||
|
|
types={types}
|
||
|
|
selected={selected}
|
||
|
|
onSelect={setSelected}
|
||
|
|
onChange={change}
|
||
|
|
/>
|
||
|
|
<div className="research-card">
|
||
|
|
<h4>连线</h4>
|
||
|
|
<div className="flow-connect">
|
||
|
|
<select
|
||
|
|
aria-label="连线起点"
|
||
|
|
value={source}
|
||
|
|
onChange={(e) => setSource(e.target.value)}
|
||
|
|
>
|
||
|
|
<option value="">选择上游</option>
|
||
|
|
{graph.nodes.map((n) => (
|
||
|
|
<option key={n.id} value={n.id}>
|
||
|
|
{n.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
<span>→</span>
|
||
|
|
<select
|
||
|
|
aria-label="连线终点"
|
||
|
|
value={target}
|
||
|
|
onChange={(e) => setTarget(e.target.value)}
|
||
|
|
>
|
||
|
|
<option value="">选择下游</option>
|
||
|
|
{graph.nodes.map((n) => (
|
||
|
|
<option key={n.id} value={n.id}>
|
||
|
|
{n.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
<select
|
||
|
|
aria-label="连线条件"
|
||
|
|
value={branch}
|
||
|
|
disabled={
|
||
|
|
graph.nodes.find((n) => n.id === source)?.type !==
|
||
|
|
"condition"
|
||
|
|
}
|
||
|
|
onChange={(e) => setBranch(e.target.value)}
|
||
|
|
>
|
||
|
|
<option value="">始终</option>
|
||
|
|
{["pass", "review", "block"].map((v) => (
|
||
|
|
<option key={v}>{v}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
<Button onClick={addEdge}>添加连线</Button>
|
||
|
|
</div>
|
||
|
|
<div className="flow-edge-list">
|
||
|
|
{graph.edges.map((e, i) => (
|
||
|
|
<div key={i}>
|
||
|
|
<span>
|
||
|
|
{graph.nodes.find((n) => n.id === e.source)?.label}{" "}
|
||
|
|
→{" "}
|
||
|
|
{graph.nodes.find((n) => n.id === e.target)?.label}{" "}
|
||
|
|
{e.branch && `· ${e.branch}`}
|
||
|
|
</span>
|
||
|
|
<Button
|
||
|
|
size="small"
|
||
|
|
aria-label={`删除连线 ${i + 1}`}
|
||
|
|
onClick={() =>
|
||
|
|
change({
|
||
|
|
...graph,
|
||
|
|
edges: graph.edges.filter((_, j) => j !== i),
|
||
|
|
})
|
||
|
|
}
|
||
|
|
>
|
||
|
|
删除
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<aside className="research-card flow-inspector">
|
||
|
|
<h4>原生节点</h4>
|
||
|
|
<select
|
||
|
|
aria-label="新增节点类型"
|
||
|
|
value={nodeType}
|
||
|
|
onChange={(e) => setNodeType(e.target.value)}
|
||
|
|
>
|
||
|
|
{types
|
||
|
|
.filter((t) => t.type !== "input")
|
||
|
|
.map((t) => (
|
||
|
|
<option key={t.type} value={t.type}>
|
||
|
|
{t.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
<Button disabled={graph.nodes.length >= 50} onClick={addNode}>
|
||
|
|
添加节点
|
||
|
|
</Button>
|
||
|
|
{node && (
|
||
|
|
<>
|
||
|
|
<h4>节点配置</h4>
|
||
|
|
<label>
|
||
|
|
显示名称
|
||
|
|
<Input
|
||
|
|
aria-label="节点名称"
|
||
|
|
value={node.label}
|
||
|
|
onChange={(label) => updateNode({ label })}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<p className="research-hint">{node.id}</p>
|
||
|
|
{["generate", "feature"].includes(node.type) && (
|
||
|
|
<label>
|
||
|
|
研究说明
|
||
|
|
<TextArea
|
||
|
|
aria-label="节点研究说明"
|
||
|
|
value={String(node.config.prompt || "")}
|
||
|
|
onChange={(prompt) =>
|
||
|
|
updateNode({ config: { ...node.config, prompt } })
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
)}
|
||
|
|
{["feature", "expand"].includes(node.type) && (
|
||
|
|
<>
|
||
|
|
<label>
|
||
|
|
固定素材版本
|
||
|
|
<select
|
||
|
|
aria-label="节点素材"
|
||
|
|
value={String(node.config.asset_id || "")}
|
||
|
|
onChange={(e) => {
|
||
|
|
const ref = refs.find(
|
||
|
|
(r) => r.id === e.target.value,
|
||
|
|
);
|
||
|
|
const {
|
||
|
|
asset_id: _,
|
||
|
|
version: __,
|
||
|
|
...rest
|
||
|
|
} = node.config;
|
||
|
|
updateNode({
|
||
|
|
config: ref
|
||
|
|
? {
|
||
|
|
...rest,
|
||
|
|
asset_id: ref.id,
|
||
|
|
version: ref.version,
|
||
|
|
}
|
||
|
|
: rest,
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<option value="">
|
||
|
|
{node.type === "feature"
|
||
|
|
? "由模型生成方案"
|
||
|
|
: "使用上游或启动模板"}
|
||
|
|
</option>
|
||
|
|
{refs
|
||
|
|
.filter(
|
||
|
|
(r) =>
|
||
|
|
r.kind ===
|
||
|
|
(node.type === "feature"
|
||
|
|
? "feature"
|
||
|
|
: "template"),
|
||
|
|
)
|
||
|
|
.map((r) => (
|
||
|
|
<option key={r.id} value={r.id}>
|
||
|
|
{r.name} · v{r.version}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
{Boolean(node.config.asset_id) && (
|
||
|
|
<label>
|
||
|
|
素材版本
|
||
|
|
<InputNumber
|
||
|
|
aria-label="节点素材版本"
|
||
|
|
min={1}
|
||
|
|
precision={0}
|
||
|
|
value={Number(node.config.version)}
|
||
|
|
onChange={(version) => {
|
||
|
|
if (typeof version === "number")
|
||
|
|
updateNode({
|
||
|
|
config: { ...node.config, version },
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
{node.type === "variant" && (
|
||
|
|
<label>
|
||
|
|
生成方法
|
||
|
|
<select
|
||
|
|
aria-label="变体方法"
|
||
|
|
value={String(node.config.method || "structure")}
|
||
|
|
onChange={(e) =>
|
||
|
|
updateNode({ config: { method: e.target.value } })
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<option value="structure">结构与字段变体</option>
|
||
|
|
<option value="settings">市场与设置变体</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
)}
|
||
|
|
{node.type === "filter" && (
|
||
|
|
<fieldset>
|
||
|
|
<legend>保留评估结论</legend>
|
||
|
|
{["pass", "review", "block"].map((v) => (
|
||
|
|
<label key={v}>
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={(
|
||
|
|
(node.config.verdicts as string[]) || ["pass"]
|
||
|
|
).includes(v)}
|
||
|
|
onChange={(e) => {
|
||
|
|
const values = (node.config
|
||
|
|
.verdicts as string[]) || ["pass"];
|
||
|
|
updateNode({
|
||
|
|
config: {
|
||
|
|
verdicts: e.target.checked
|
||
|
|
? [...values, v]
|
||
|
|
: values.filter((x) => x !== v),
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
{v}
|
||
|
|
</label>
|
||
|
|
))}
|
||
|
|
</fieldset>
|
||
|
|
)}
|
||
|
|
{node.type === "iterate" && (
|
||
|
|
<label>
|
||
|
|
整个流程最大轮数
|
||
|
|
<InputNumber
|
||
|
|
aria-label="节点迭代轮数"
|
||
|
|
min={1}
|
||
|
|
max={100}
|
||
|
|
precision={0}
|
||
|
|
value={Number(node.config.max_rounds || 1)}
|
||
|
|
onChange={(max_rounds) => {
|
||
|
|
if (typeof max_rounds === "number")
|
||
|
|
updateNode({ config: { max_rounds } });
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
)}
|
||
|
|
{node.type === "condition" && (
|
||
|
|
<p>
|
||
|
|
根据上游规则评估的 pass / review / block
|
||
|
|
选择出边。模型建议不改变分支判断。
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
{node.type !== "input" && (
|
||
|
|
<Button
|
||
|
|
type="danger"
|
||
|
|
onClick={() => {
|
||
|
|
change({
|
||
|
|
...graph,
|
||
|
|
nodes: graph.nodes.filter(
|
||
|
|
(n) => n.id !== node.id,
|
||
|
|
),
|
||
|
|
edges: graph.edges.filter(
|
||
|
|
(e) =>
|
||
|
|
e.source !== node.id && e.target !== node.id,
|
||
|
|
),
|
||
|
|
});
|
||
|
|
setSelected("input");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
删除节点
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|