This commit is contained in:
yoan 2024-11-09 11:31:44 +08:00
parent 8809eef2ce
commit b06ffc0eef
9 changed files with 289 additions and 62 deletions

View File

@ -43,13 +43,13 @@ const Mail = () => {
id: config.id ?? "", id: config.id ?? "",
name: "notifyChannels", name: "notifyChannels",
data: { data: {
senderAddress: "", senderAddress: "",
receiverAddresses: "", receiverAddresses: "",
smtpHostAddr: "", smtpHostAddr: "",
smtpHostPort: "25", smtpHostPort: "25",
username: "", username: "",
password: "", password: "",
enabled: false, enabled: false,
}, },
}); });
@ -79,13 +79,13 @@ const Mail = () => {
const getDetailMail = () => { const getDetailMail = () => {
const df: NotifyChannelMail = { const df: NotifyChannelMail = {
senderAddress: "", senderAddress: "",
receiverAddresses: "", receiverAddresses: "",
smtpHostAddr: "", smtpHostAddr: "",
smtpHostPort: "25", smtpHostPort: "25",
username: "", username: "",
password: "", password: "",
enabled: false, enabled: false,
}; };
if (!config.content) { if (!config.content) {
return df; return df;
@ -99,7 +99,14 @@ const Mail = () => {
}; };
const checkChanged = (data: NotifyChannelMail) => { const checkChanged = (data: NotifyChannelMail) => {
if (data.senderAddress !== originMail.data.senderAddress || data.receiverAddresses !== originMail.data.receiverAddresses || data.smtpHostAddr !== originMail.data.smtpHostAddr || data.smtpHostPort !== originMail.data.smtpHostPort || data.username !== originMail.data.username || data.password !== originMail.data.password) { if (
data.senderAddress !== originMail.data.senderAddress ||
data.receiverAddresses !== originMail.data.receiverAddresses ||
data.smtpHostAddr !== originMail.data.smtpHostAddr ||
data.smtpHostPort !== originMail.data.smtpHostPort ||
data.username !== originMail.data.username ||
data.password !== originMail.data.password
) {
setChanged(true); setChanged(true);
} else { } else {
setChanged(false); setChanged(false);
@ -236,55 +243,55 @@ const Mail = () => {
checkChanged(newData.data); checkChanged(newData.data);
setmail(newData); setmail(newData);
}} }}
/> />
<Input <Input
placeholder={t("settings.notification.mail.smtp_port.placeholder")} placeholder={t("settings.notification.mail.smtp_port.placeholder")}
className="mt-2" className="mt-2"
value={mail.data.smtpHostPort} value={mail.data.smtpHostPort}
onChange={(e) => { onChange={(e) => {
const newData = { const newData = {
...mail, ...mail,
data: { data: {
...mail.data, ...mail.data,
smtpHostPort: e.target.value, smtpHostPort: e.target.value,
}, },
}; };
checkChanged(newData.data); checkChanged(newData.data);
setmail(newData); setmail(newData);
}} }}
/> />
<Input <Input
placeholder={t("settings.notification.mail.username.placeholder")} placeholder={t("settings.notification.mail.username.placeholder")}
className="mt-2" className="mt-2"
value={mail.data.username} value={mail.data.username}
onChange={(e) => { onChange={(e) => {
const newData = { const newData = {
...mail, ...mail,
data: { data: {
...mail.data, ...mail.data,
username: e.target.value, username: e.target.value,
}, },
}; };
checkChanged(newData.data); checkChanged(newData.data);
setmail(newData); setmail(newData);
}} }}
/> />
<Input <Input
placeholder={t("settings.notification.mail.password.placeholder")} placeholder={t("settings.notification.mail.password.placeholder")}
className="mt-2" className="mt-2"
value={mail.data.password} value={mail.data.password}
onChange={(e) => { onChange={(e) => {
const newData = { const newData = {
...mail, ...mail,
data: { data: {
...mail.data, ...mail.data,
password: e.target.value, password: e.target.value,
}, },
}; };
checkChanged(newData.data); checkChanged(newData.data);
setmail(newData); setmail(newData);
}} }}
/> />
<div className="flex items-center space-x-1 mt-2"> <div className="flex items-center space-x-1 mt-2">
<Switch id="airplane-mode" checked={mail.data.enabled} onCheckedChange={handleSwitchChange} /> <Switch id="airplane-mode" checked={mail.data.enabled} onCheckedChange={handleSwitchChange} />
<Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label> <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>

View File

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

View File

@ -22,7 +22,7 @@ const DeployPanelBody = ({ data }: DeployPanelBodyProps) => {
return ( 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> <div className="text-lg font-semibold text-gray-700"></div>
{deployTargets {deployTargets
.reduce((acc: DeployTarget[][], provider, index) => { .reduce((acc: DeployTarget[][], provider, index) => {

View File

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

View File

@ -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;

View File

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

View File

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

View File

@ -18,13 +18,7 @@ export type NotifyTemplate = {
}; };
export type NotifyChannels = { export type NotifyChannels = {
dingtalk?: NotifyChannel; [key: string]: NotifyChannel;
lark?: NotifyChannel;
telegram?: NotifyChannel;
webhook?: NotifyChannel;
serverchan?: NotifyChannel;
mail?: NotifyChannelMail;
bark?: NotifyChannelBark;
}; };
export type NotifyChannel = export type NotifyChannel =
@ -36,6 +30,37 @@ export type NotifyChannel =
| NotifyChannelMail | NotifyChannelMail
| NotifyChannelBark; | NotifyChannelBark;
export const channels = [
{
name: "dingtalk",
label: "common.provider.dingtalk",
},
{
name: "lark",
label: "common.provider.lark",
},
{
name: "telegram",
label: "common.provider.telegram",
},
{
name: "webhook",
label: "common.provider.webhook",
},
{
name: "serverchan",
label: "common.provider.serverchan",
},
{
name: "mail",
label: "common.provider.mail",
},
{
name: "bark",
label: "common.provider.bark",
},
];
export type NotifyChannelDingTalk = { export type NotifyChannelDingTalk = {
accessToken: string; accessToken: string;
secret: string; secret: string;
@ -94,3 +119,4 @@ export type SSLProviderSetting = {
}; };
}; };
}; };

View File

@ -8,6 +8,7 @@ export type NotifyContext = {
config: Setting<NotifyChannels>; config: Setting<NotifyChannels>;
setChannel: (data: { channel: string; data: NotifyChannel }) => void; setChannel: (data: { channel: string; data: NotifyChannel }) => void;
setChannels: (data: Setting<NotifyChannels>) => void; setChannels: (data: Setting<NotifyChannels>) => void;
initChannels: () => void;
}; };
const Context = createContext({} as NotifyContext); const Context = createContext({} as NotifyContext);
@ -22,13 +23,18 @@ export const NotifyProvider = ({ children }: NotifyProviderProps) => {
const [notify, dispatchNotify] = useReducer(notifyReducer, {}); const [notify, dispatchNotify] = useReducer(notifyReducer, {});
useEffect(() => { useEffect(() => {
const featchData = async () => { featchData();
const chanels = await getSetting<NotifyChannels>("notifyChannels"); }, []);
dispatchNotify({
type: "SET_CHANNELS", const featchData = async () => {
payload: chanels, const chanels = await getSetting<NotifyChannels>("notifyChannels");
}); dispatchNotify({
}; type: "SET_CHANNELS",
payload: chanels,
});
};
const initChannels = useCallback(() => {
featchData(); featchData();
}, []); }, []);
@ -52,6 +58,7 @@ export const NotifyProvider = ({ children }: NotifyProviderProps) => {
config: notify, config: notify,
setChannel, setChannel,
setChannels, setChannels,
initChannels,
}} }}
> >
{children} {children}