certimate/ui/src/pages/workflow/WorkflowDetail.tsx

129 lines
4.2 KiB
TypeScript

import Show from "@/components/Show";
import { Button } from "@/components/ui/button";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Switch } from "@/components/ui/switch";
import { Toaster } from "@/components/ui/toaster";
import { useToast } from "@/components/ui/use-toast";
import End from "@/components/workflow/End";
import NodeRender from "@/components/workflow/NodeRender";
import WorkflowBaseInfoEditDialog from "@/components/workflow/WorkflowBaseInfoEditDialog";
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
import { allNodesValidated, WorkflowNode } from "@/domain/workflow";
import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
import { ArrowLeft } from "lucide-react";
import { useEffect, useMemo } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useShallow } from "zustand/shallow";
const selectState = (state: WorkflowState) => ({
workflow: state.workflow,
init: state.init,
switchEnable: state.switchEnable,
save: state.save,
});
const WorkflowDetail = () => {
// 3. 使用正确的选择器和 shallow 比较
const { workflow, init, switchEnable, save } = useWorkflowStore(useShallow(selectState));
// 从 url 中获取 workflowId
const [searchParams] = useSearchParams();
const id = searchParams.get("id");
useEffect(() => {
console.log(id);
init(id ?? "");
}, [id]);
const navigate = useNavigate();
const { toast } = useToast();
const elements = useMemo(() => {
let current = workflow.draft as WorkflowNode;
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;
}, [workflow]);
const handleBackClick = () => {
navigate("/workflow");
};
const handleEnableChange = () => {
if (!workflow.enabled && !allNodesValidated(workflow.draft as WorkflowNode)) {
toast({
title: "无法启用",
description: "有尚未设置完成的节点",
variant: "destructive",
});
return;
}
switchEnable();
};
const handleWorkflowSaveClick = () => {
if (!allNodesValidated(workflow.draft as WorkflowNode)) {
toast({
title: "保存失败",
description: "有尚未设置完成的节点",
variant: "destructive",
});
return;
}
save();
};
return (
<>
<WorkflowProvider>
<Toaster />
<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 flex justify-between items-center">
<div className="px-5 text-stone-700 dark:text-stone-200 flex items-center space-x-2">
<ArrowLeft className="cursor-pointer" onClick={handleBackClick} />
<WorkflowBaseInfoEditDialog
trigger={
<div className="flex flex-col space-y-1 cursor-pointer items-start">
<div className="">{workflow.name ? workflow.name : "未命名工作流"}</div>
<div className="text-sm text-muted-foreground">{workflow.description ? workflow.description : "添加流程说明"}</div>
</div>
}
/>
</div>
<div className="px-5 flex items-center space-x-3">
<Show when={!!workflow.enabled}>
<Show when={!!workflow.hasDraft} fallback={<Button variant={"secondary"}></Button>}>
<Button variant={"secondary"} onClick={handleWorkflowSaveClick}>
</Button>
</Show>
</Show>
<Switch className="dark:data-[state=unchecked]:bg-stone-400" checked={workflow.enabled ?? false} onCheckedChange={handleEnableChange} />
</div>
</div>
<div className=" flex flex-col items-center mt-8">{elements}</div>
<ScrollBar orientation="vertical" />
<ScrollBar orientation="horizontal" />
</ScrollArea>
</WorkflowProvider>
</>
);
};
export default WorkflowDetail;