workflow data save

ui/src/pages/setting/Notify.tsx

@@ -7,7 +7,7 @@ import NotifyTemplate from "@/components/notify/NotifyTemplate";
 import Telegram from "@/components/notify/Telegram";
 import Webhook from "@/components/notify/Webhook";
 import ServerChan from "@/components/notify/ServerChan";
-import Mail from "@/components/notify/Mail";
+import Email from "@/components/notify/Email";
 import Bark from "@/components/notify/Bark";
 import { NotifyProvider } from "@/providers/notify";
 
@@ -27,51 +27,52 @@ const Notify = () => {
             </AccordionItem>
           </Accordion>
         </div>
+
         <div className="border rounded-md p-5 mt-7 shadow-lg">
           <Accordion type={"single"} className="dark:text-stone-200">
-            <AccordionItem value="item-2" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.dingtalk")}</AccordionTrigger>
+            <AccordionItem value="item-email" className="dark:border-stone-200">
+              <AccordionTrigger>{t("common.provider.email")}</AccordionTrigger>
               <AccordionContent>
-                <DingTalk />
+                <Email />
               </AccordionContent>
             </AccordionItem>
 
-            <AccordionItem value="item-3" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.lark")}</AccordionTrigger>
-              <AccordionContent>
-                <Lark />
-              </AccordionContent>
-            </AccordionItem>
-
-            <AccordionItem value="item-4" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.telegram")}</AccordionTrigger>
-              <AccordionContent>
-                <Telegram />
-              </AccordionContent>
-            </AccordionItem>
-
-            <AccordionItem value="item-5" className="dark:border-stone-200">
+            <AccordionItem value="item-webhook" className="dark:border-stone-200">
               <AccordionTrigger>{t("common.provider.webhook")}</AccordionTrigger>
               <AccordionContent>
                 <Webhook />
               </AccordionContent>
             </AccordionItem>
 
-            <AccordionItem value="item-6" className="dark:border-stone-200">
+            <AccordionItem value="item-dingtalk" className="dark:border-stone-200">
+              <AccordionTrigger>{t("common.provider.dingtalk")}</AccordionTrigger>
+              <AccordionContent>
+                <DingTalk />
+              </AccordionContent>
+            </AccordionItem>
+
+            <AccordionItem value="item-lark" className="dark:border-stone-200">
+              <AccordionTrigger>{t("common.provider.lark")}</AccordionTrigger>
+              <AccordionContent>
+                <Lark />
+              </AccordionContent>
+            </AccordionItem>
+
+            <AccordionItem value="item-telegram" className="dark:border-stone-200">
+              <AccordionTrigger>{t("common.provider.telegram")}</AccordionTrigger>
+              <AccordionContent>
+                <Telegram />
+              </AccordionContent>
+            </AccordionItem>
+
+            <AccordionItem value="item-serverchan" className="dark:border-stone-200">
               <AccordionTrigger>{t("common.provider.serverchan")}</AccordionTrigger>
               <AccordionContent>
                 <ServerChan />
               </AccordionContent>
             </AccordionItem>
 
-            <AccordionItem value="item-7" className="dark:border-stone-200">
-              <AccordionTrigger>{t("common.provider.mail")}</AccordionTrigger>
-              <AccordionContent>
-                <Mail />
-              </AccordionContent>
-            </AccordionItem>
-
-            <AccordionItem value="item-8" className="dark:border-stone-200">
+            <AccordionItem value="item-bark" className="dark:border-stone-200">
               <AccordionTrigger>{t("common.provider.bark")}</AccordionTrigger>
               <AccordionContent>
                 <Bark />

ui/src/pages/workflow/WorkflowDetail.tsx

@@ -0,0 +1,102 @@
+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 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 { 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 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 = () => {
+    switchEnable();
+  };
+
+  const handleWorkflowSaveClick = () => {
+    save();
+  };
+
+  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 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} />
+              <div className="flex flex-col space-y-2">
+                <div className="">工作流</div>
+                <div className="text-sm text-muted-foreground">工作流详情</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;

ui/src/pages/workflow/index.tsx

@@ -1,50 +1,21 @@
-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,
-});
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import { useNavigate } from "react-router-dom";
 
 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]);
-
+  const navigate = useNavigate();
+  const handleCreateClick = () => {
+    navigate("/workflow/detail");
+  };
   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>
+      <div className="flex justify-between items-center">
+        <div className="text-muted-foreground">工作流</div>
+        <Button onClick={handleCreateClick}>
+          <Plus size={16} />
+          新建工作流
+        </Button>
+      </div>
     </>
   );
 };