53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
|
import End from "@/components/workflow/End";
|
|
import NodeRender from "@/components/workflow/NodeRender";
|
|
|
|
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
|
|
import { WorkflowNode } from "@/domain/workflow";
|
|
import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
|
|
import { useMemo } from "react";
|
|
|
|
import { useShallow } from "zustand/shallow";
|
|
|
|
const selectState = (state: WorkflowState) => ({
|
|
root: state.root,
|
|
});
|
|
|
|
const Workflow = () => {
|
|
// 3. 使用正确的选择器和 shallow 比较
|
|
const { root } = useWorkflowStore(useShallow(selectState));
|
|
|
|
const elements = useMemo(() => {
|
|
let current = root;
|
|
|
|
const elements: JSX.Element[] = [];
|
|
|
|
while (current) {
|
|
// 处理普通节点
|
|
elements.push(<NodeRender data={current} key={current.id} />);
|
|
current = current.next as WorkflowNode;
|
|
}
|
|
|
|
elements.push(<End key="workflow-end" />);
|
|
|
|
return elements;
|
|
}, [root]);
|
|
|
|
return (
|
|
<>
|
|
<WorkflowProvider>
|
|
<ScrollArea className="h-[100vh] w-full relative bg-background">
|
|
<div className="h-16 sticky top-0 left-0 z-20 shadow-md bg-muted/40"></div>
|
|
|
|
<div className=" flex flex-col items-center mt-8">{elements}</div>
|
|
|
|
<ScrollBar orientation="vertical" />
|
|
<ScrollBar orientation="horizontal" />
|
|
</ScrollArea>
|
|
</WorkflowProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Workflow;
|