mirror of https://github.com/usual2970/certimate
129 lines
4.2 KiB
TypeScript
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;
|