ai-video-fullstack/frontend/src/components/workflow/WorkflowEditor.tsx

"use client";

/**
 * 工作流可视化编辑器。基于 @xyflow/react,样式套用 ai-video 设计 token。
 *
 * 工具栏:添加节点、工作流设置、动态变量。全局设置、节点、条件边编辑与调试预览
 * 复用画布右半覆盖层。
 * 节点目录来自后端 /api/node-types。数据通过 value/onChange 与外部 graph 同步。
 */

import { ReactFlowProvider } from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import { Loader2 } from "lucide-react";

import { WorkflowCanvas } from "./WorkflowCanvas";
import { useNodeSpecs } from "./useNodeSpecs";
import type { WorkflowEditorProps } from "./types";

export type { ModelOption, WorkflowEditorProps, WorkflowSettings } from "./types";

export function WorkflowEditor(props: WorkflowEditorProps) {
  const { byType, loading, error } = useNodeSpecs();

  if (loading) {
    return (
      <div className="flex h-full w-full items-center justify-center rounded-2xl border border-hairline bg-canvas-soft text-muted-foreground">
        <Loader2 className="mr-2 animate-spin" size={18} />
        正在加载节点目录…
      </div>
    );
  }
  if (error) {
    return (
      <div className="flex h-full w-full items-center justify-center rounded-2xl border border-hairline bg-canvas-soft px-6 text-center text-sm text-destructive">
        加载节点目录失败:{error}
      </div>
    );
  }

  return (
    <ReactFlowProvider>
      <WorkflowCanvas {...props} specsByType={byType} />
    </ReactFlowProvider>
  );
}