worldquant-alpha-system/frontend/src/research/QuantFlowPage.tsx

import { ResearchList } from "./ResearchList";
import { useEffect, useState } from "react";
import {
  Banner,
  Button,
  Input,
  InputNumber,
  Pagination,
  TextArea,
  Toast,
} from "@douyinfe/semi-ui-19";
import { api, post, formatTime } 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 [route, setRoute] = useState(() => location.hash);
  const [query, setQuery] = useState("");
  const detail = /^#quantflow\/(new|workflows\/[^/]+|runs\/[^/]+)$/.test(route);
  useEffect(() => {
    const changed = () => setRoute(location.hash);
    window.addEventListener("hashchange", changed);
    return () => window.removeEventListener("hashchange", changed);
  }, []);
  function navigate(path: string) {
    location.hash = `quantflow${path}`;
    setRoute(`#quantflow${path}`);
  }
  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}&q=${encodeURIComponent(query)}`,
        { 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, query]);
  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]);
  useEffect(() => {
    if (!active) return;
    const runMatch = route.match(/^#quantflow\/runs\/([^/]+)$/);
    const workflowMatch = route.match(/^#quantflow\/workflows\/([^/]+)$/);
    if (runMatch) {
      setMode("runs");
      if (runId !== runMatch[1]) {
        setRun(null);
        setRunId(runMatch[1]);
      }
    } else if (route === "#quantflow/runs") {
      setMode("runs");
    } else {
      setMode("edit");
      if (route === "#quantflow/new" && asset) {
        setAsset(null);
        setVersions([]);
        change(readDraft("new", empty));
      }
      if (workflowMatch && asset?.id !== workflowMatch[1]) {
        const controller = new AbortController();
        void api<WorkflowAsset>(
          `/research/assets/${encodeURIComponent(workflowMatch[1])}`,
          { signal: controller.signal },
        )
          .then((item) => {
            if (!controller.signal.aborted) void open(item);
          })
          .catch((e) => {
            if (!controller.signal.aborted) setError(e.message);
          });
        return () => controller.abort();
      }
    }
  }, [active, route]);
  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. */
        }
      }
      navigate(`/workflows/${item.id}`);
      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 } : {}),
          }),
        },
      );
      history.replaceState(null, "", `#quantflow/workflows/${result.id}`);
      setRoute(`#quantflow/workflows/${result.id}`);
      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 research-list-page quantflow-workspace">
      {error && <Banner type="danger" description={error} />}
      {!detail ? (
        <ResearchList
          resetKey={JSON.stringify([mode, query, page, runPage])}
          label="QuantFlow"
          filters={
            <>
              <select
                aria-label="QuantFlow 列表"
                value={mode === "runs" ? "runs" : "workflows"}
                onChange={(e) => {
                  setMode(e.target.value === "runs" ? "runs" : "edit");
                  navigate(e.target.value === "runs" ? "/runs" : "");
                }}
              >
                <option value="workflows">流程库</option>
                <option value="runs">运行记录</option>
              </select>
              {mode !== "runs" && (
                <Input
                  aria-label="搜索流程"
                  placeholder="搜索流程名称"
                  value={query}
                  onChange={(value) => {
                    setQuery(value);
                    setPage(1);
                  }}
                />
              )}
            </>
          }
          actions={
            <>
              <Button
                theme="solid"
                onClick={() => {
                  setAsset(null);
                  setVersions([]);
                  change(readDraft("new", empty));
                  setMode("edit");
                  navigate("/new");
                }}
              >
                新建流程
              </Button>
              <Button
                onClick={async () => {
                  try {
                    const recipe = await api<Workflow>(
                      "/research/flows/recipe",
                    );
                    setAsset(null);
                    setVersions([]);
                    change({ ...recipe, name: "固定研究配方副本" });
                    setMode("edit");
                    navigate("/new");
                  } catch (e) {
                    setError((e as Error).message);
                  }
                }}
              >
                复制固定配方
              </Button>
            </>
          }
          pagination={
            <>
              <span>共 {mode === "runs" ? runTotal : total} 条</span>
              {(mode === "runs" ? runTotal : total) > 0 && (
                <Pagination
                  size="small"
                  total={mode === "runs" ? runTotal : total}
                  currentPage={mode === "runs" ? runPage : page}
                  pageSize={25}
                  onPageChange={mode === "runs" ? setRunPage : setPage}
                />
              )}
            </>
          }
        >
          {mode === "runs" ? (
            <>
              <table className="research-table">
                <thead>
                  <tr>
                    <th>运行名称</th>
                    <th>状态</th>
                    <th>轮次</th>
                    <th>创建时间</th>
                  </tr>
                </thead>
                <tbody>
                  {runs.map((r) => (
                    <tr key={r.id}>
                      <td>
                        <Button
                          theme="borderless"
                          onClick={() => {
                            setRunId(r.id);
                            setRun(null);
                            localStorage.setItem(
                              "quantflow-selected-run",
                              r.id,
                            );
                            navigate(`/runs/${r.id}`);
                          }}
                        >
                          {r.name}
                        </Button>
                      </td>
                      <td>{flowStatus[r.status]}</td>
                      <td>{r.round}</td>
                      <td>{formatTime(r.created_at)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              {!runs.length && (
                <p className="research-list-empty">暂无流程运行记录。</p>
              )}
            </>
          ) : (
            <>
              <table className="research-table">
                <thead>
                  <tr>
                    <th>流程名称</th>
                    <th>版本</th>
                    <th>节点数量</th>
                    <th>连接数量</th>
                  </tr>
                </thead>
                <tbody>
                  {assets.map((a) => (
                    <tr key={a.id}>
                      <td>
                        <Button theme="borderless" onClick={() => void open(a)}>
                          {a.name}
                        </Button>
                      </td>
                      <td>v{a.version}</td>
                      <td>{a.content.nodes.length}</td>
                      <td>{a.content.edges.length}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              {!assets.length && (
                <p className="research-list-empty">
                  暂无流程，请新建流程或复制固定配方。
                </p>
              )}
            </>
          )}
        </ResearchList>
      ) : (
        <>
          <div className="inline-actions quantflow-detail-actions">
            <Button onClick={() => navigate(mode === "runs" ? "/runs" : "")}>
              返回列表
            </Button>
          </div>
          <div className="quantflow-detail-body">
            <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");
                      navigate(`/runs/${r.id}`);
                    }}
                  />
                </>
              ) : (
                <>
                  <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>
  );
}