worklfow

ui/src/components/workflow/DeployForm.tsx

@@ -4,15 +4,17 @@ import DeployToAliyunOSS from "./DeployToAliyunOss";
 
 export type DeployFormProps = {
   data: WorkflowNode;
+  defaultProivder?: string;
 };
-const DeployForm = ({ data }: DeployFormProps) => {
-  return getForm(data);
+const DeployForm = ({ data, defaultProivder }: DeployFormProps) => {
+  return getForm(data, defaultProivder);
 };
 
 export default memo(DeployForm);
 
-const getForm = (data: WorkflowNode) => {
-  switch (data.config?.providerType) {
+const getForm = (data: WorkflowNode, defaultProivder?: string) => {
+  const provider = defaultProivder || data.config?.providerType;
+  switch (provider) {
     case "aliyun-oss":
       return <DeployToAliyunOSS data={data} />;
     case "tencent":

ui/src/components/workflow/DeployPanelBody.tsx

@@ -22,7 +22,7 @@ const DeployPanelBody = ({ data }: DeployPanelBodyProps) => {
   return (
     <>
       {/* 默认展示服务商列表 */}
-      <Show when={!providerType} fallback={<DeployForm data={data} />}>
+      <Show when={!providerType} fallback={<DeployForm data={data} defaultProivder={providerType} />}>
         <div className="text-lg font-semibold text-gray-700">选择服务商</div>
         {deployTargets
           .reduce((acc: DeployTarget[][], provider, index) => {

ui/src/components/workflow/DeployToAliyunOss.tsx

@@ -105,7 +105,7 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
                           <SelectGroup key={item.id}>
                             <SelectLabel>{item.name}</SelectLabel>
                             {item.output?.map((output) => (
-                              <SelectItem key={output.name} value={`${item.id}-${output.name}`}>
+                              <SelectItem key={output.name} value={`${item.id}#${output.name}`}>
                                 <div>
                                   {item.name}-{output.label}
                                 </div>

ui/src/components/workflow/NotifyForm.tsx

@@ -0,0 +1,181 @@
+import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "../ui/select";
+import { Input } from "../ui/input";
+import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
+import { useShallow } from "zustand/shallow";
+import { usePanel } from "./PanelProvider";
+import { useTranslation } from "react-i18next";
+import { Button } from "../ui/button";
+import { useNotifyContext } from "@/providers/notify";
+import { useEffect, useState } from "react";
+import { NotifyChannels, channels as supportedChannels } from "@/domain/settings";
+import { SelectValue } from "@radix-ui/react-select";
+import { Textarea } from "../ui/textarea";
+import { RefreshCw, Settings } from "lucide-react";
+
+type NotifyFormProps = {
+  data: WorkflowNode;
+};
+
+const selectState = (state: WorkflowState) => ({
+  updateNode: state.updateNode,
+});
+type ChannelName = {
+  name: string;
+  label: string;
+};
+const NotifyForm = ({ data }: NotifyFormProps) => {
+  const { updateNode } = useWorkflowStore(useShallow(selectState));
+  const { hidePanel } = usePanel();
+  const { t } = useTranslation();
+  const { config: notifyConfig, initChannels } = useNotifyContext();
+
+  const [chanels, setChanels] = useState<ChannelName[]>([]);
+
+  useEffect(() => {
+    setChanels(getChannels());
+  }, [notifyConfig]);
+
+  const getChannels = () => {
+    const rs: ChannelName[] = [];
+    if (!notifyConfig.content) {
+      return rs;
+    }
+
+    const chanels = notifyConfig.content as NotifyChannels;
+    for (const channel of supportedChannels) {
+      if (chanels[channel.name] && chanels[channel.name].enabled) {
+        rs.push(channel);
+      }
+    }
+    return rs;
+  };
+
+  const formSchema = z.object({
+    channel: z.string(),
+    title: z.string().min(1),
+    content: z.string().min(1),
+  });
+
+  let config: WorkflowNodeConfig = {
+    channel: "",
+    title: "",
+    content: "",
+  };
+
+  if (data) config = data.config ?? config;
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      channel: config.channel as string,
+      title: config.title as string,
+      content: config.content as string,
+    },
+  });
+
+  const onSubmit = (config: z.infer<typeof formSchema>) => {
+    updateNode({ ...data, config });
+    hidePanel();
+  };
+
+  return (
+    <>
+      <Form {...form}>
+        <form
+          onSubmit={(e) => {
+            e.stopPropagation();
+            form.handleSubmit(onSubmit)(e);
+          }}
+          className="space-y-8"
+        >
+          <FormField
+            control={form.control}
+            name="channel"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between items-center">
+                  <div className="flex space-x-2 items-center">
+                    <div>推送渠道</div>
+                    <RefreshCw size={16} className="cursor-pointer" onClick={() => initChannels()} />
+                  </div>
+                  <a
+                    href="#/setting/notify"
+                    target="_blank"
+                    className="flex justify-between items-center space-x-1 font-normal text-primary hover:underline cursor-pointer"
+                  >
+                    <Settings size={16} /> <div>设置推送渠道</div>
+                  </a>
+                </FormLabel>
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("channel", value);
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="选择推送渠道" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        {chanels.map((item) => (
+                          <SelectItem key={item.name} value={item.name}>
+                            <div>{t(item.label)}</div>
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>标题</FormLabel>
+                <FormControl>
+                  <Input placeholder="请输入消息标题" {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="content"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>内容</FormLabel>
+                <FormControl>
+                  <Textarea placeholder="请输入消息内容" {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex justify-end">
+            <Button type="submit">{t("common.save")}</Button>
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+};
+
+export default NotifyForm;
+

ui/src/components/workflow/PanelBody.tsx

@@ -2,6 +2,7 @@ import { WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
 import StartForm from "./StartForm";
 import DeployPanelBody from "./DeployPanelBody";
 import ApplyForm from "./ApplyForm";
+import NotifyForm from "./NotifyForm";
 
 type PanelBodyProps = {
   data: WorkflowNode;
@@ -16,7 +17,7 @@ const PanelBody = ({ data }: PanelBodyProps) => {
       case WorkflowNodeType.Deploy:
         return <DeployPanelBody data={data} />;
       case WorkflowNodeType.Notify:
-        return <DeployPanelBody data={data} />;
+        return <NotifyForm data={data} />;
       case WorkflowNodeType.Branch:
         return <div>分支节点</div>;
       case WorkflowNodeType.Condition:

ui/src/components/workflow/WorkflowProvider.tsx

@@ -1,11 +1,14 @@
 import { ConfigProvider } from "@/providers/config";
 import React from "react";
 import { PanelProvider } from "./PanelProvider";
+import { NotifyProvider } from "@/providers/notify";
 
 const WorkflowProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ConfigProvider>
-      <PanelProvider>{children}</PanelProvider>
+      <NotifyProvider>
+        <PanelProvider>{children}</PanelProvider>
+      </NotifyProvider>
     </ConfigProvider>
   );
 };