diff --git a/ui/src/components/workflow/AddNode.tsx b/ui/src/components/workflow/AddNode.tsx index f577e693..30322391 100644 --- a/ui/src/components/workflow/AddNode.tsx +++ b/ui/src/components/workflow/AddNode.tsx @@ -19,6 +19,7 @@ import { } from "../ui/dropdown-menu"; import DropdownMenuItemIcon from "./DropdownMenuItemIcon"; import Show from "../Show"; +import { useTranslation } from "react-i18next"; const selectState = (state: WorkflowState) => ({ addNode: state.addNode, @@ -26,6 +27,7 @@ const selectState = (state: WorkflowState) => ({ const AddNode = ({ data }: NodeProps | BrandNodeProps) => { const { addNode } = useWorkflowStore(useShallow(selectState)); + const { t } = useTranslation(); const handleTypeSelected = (type: WorkflowNodeType, provider?: string) => { const node = newWorkflowNode(type, { @@ -44,7 +46,7 @@ const AddNode = ({ data }: NodeProps | BrandNodeProps) => { - 选择节点类型 + {t("workflow.node.selectNodeType.label")} {workflowNodeDropdownList.map((item) => ( { }); const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config }); + updateNode({ ...data, config, validated: true }); hidePanel(); }; diff --git a/ui/src/components/workflow/BranchNode.tsx b/ui/src/components/workflow/BranchNode.tsx index 8bbfd0ce..b513c112 100644 --- a/ui/src/components/workflow/BranchNode.tsx +++ b/ui/src/components/workflow/BranchNode.tsx @@ -6,6 +6,7 @@ import { memo } from "react"; import { BrandNodeProps } from "./types"; import { useWorkflowStore, WorkflowState } from "@/providers/workflow"; import { useShallow } from "zustand/shallow"; +import { useTranslation } from "react-i18next"; const selectState = (state: WorkflowState) => ({ addBranch: state.addBranch, @@ -13,6 +14,8 @@ const selectState = (state: WorkflowState) => ({ const BranchNode = memo(({ data }: BrandNodeProps) => { const { addBranch } = useWorkflowStore(useShallow(selectState)); + const { t } = useTranslation(); + const renderNodes = (node: WorkflowBranchNode | WorkflowNode | undefined, branchNodeId?: string, branchIndex?: number) => { const elements: JSX.Element[] = []; let current = node; @@ -34,7 +37,7 @@ const BranchNode = memo(({ data }: BrandNodeProps) => { variant={"outline"} className="text-xs px-2 h-6 rounded-full absolute -top-3 left-[50%] -translate-x-1/2 z-10" > - 添加分支 + {t("workflow.node.addBranch.label")} {data.branches.map((branch, index) => ( diff --git a/ui/src/components/workflow/DeployToAliyunALB.tsx b/ui/src/components/workflow/DeployToAliyunALB.tsx index af4f2a5a..e58a5673 100644 --- a/ui/src/components/workflow/DeployToAliyunALB.tsx +++ b/ui/src/components/workflow/DeployToAliyunALB.tsx @@ -74,8 +74,10 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => { }, }); + const resourceType = form.watch("resourceType"); + const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config: { ...config } }); + updateNode({ ...data, config: { ...config }, validated: true }); hidePanel(); }; @@ -94,7 +96,7 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => { name="certificate" render={({ field }) => ( - 证书 + {t("workflow.common.certificate.label")} + - ( - - {t("domain.deployment.form.aliyun_alb_loadbalancer_id.label")} - - - + + + )} + /> + )} - - - )} - /> + {resourceType === "listener" && ( + ( + + {t("domain.deployment.form.aliyun_alb_listener_id.label")} + + + - ( - - {t("domain.deployment.form.aliyun_alb_listener_id.label")} - - - - - - - )} - /> + + + )} + /> + )}
diff --git a/ui/src/components/workflow/DeployToAliyunCDN.tsx b/ui/src/components/workflow/DeployToAliyunCDN.tsx index 394fb173..5ec5d303 100644 --- a/ui/src/components/workflow/DeployToAliyunCDN.tsx +++ b/ui/src/components/workflow/DeployToAliyunCDN.tsx @@ -59,7 +59,7 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => { }); const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config: { ...config } }); + updateNode({ ...data, config: { ...config }, validated: true }); hidePanel(); }; @@ -78,7 +78,7 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => { name="certificate" render={({ field }) => ( - 证书 + {t("workflow.common.certificate.label")} { }} > - + {beforeOutput.map((item) => ( @@ -190,20 +192,22 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => { )} /> - ( - - {t("domain.deployment.form.aliyun_clb_listener_port.label")} - - - + {resouceType === "listener" && ( + ( + + {t("domain.deployment.form.aliyun_clb_listener_port.label")} + + + - - - )} - /> + + + )} + /> + )}
diff --git a/ui/src/components/workflow/DeployToAliyunNLB.tsx b/ui/src/components/workflow/DeployToAliyunNLB.tsx index f1389475..f0a2a926 100644 --- a/ui/src/components/workflow/DeployToAliyunNLB.tsx +++ b/ui/src/components/workflow/DeployToAliyunNLB.tsx @@ -74,8 +74,10 @@ const DeployToAliyunNLB = ({ data }: DeployFormProps) => { }, }); + const resourceType = form.watch("resourceType"); + const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config: { ...config } }); + updateNode({ ...data, config: { ...config }, validated: true }); hidePanel(); }; @@ -94,7 +96,7 @@ const DeployToAliyunNLB = ({ data }: DeployFormProps) => { name="certificate" render={({ field }) => ( - 证书 + {t("workflow.common.certificate.label")} - + {resourceType === "loadbalancer" && ( + ( + + {t("domain.deployment.form.aliyun_nlb_loadbalancer_id.label")} + + + - - - )} - /> + + + )} + /> + )} - ( - - {t("domain.deployment.form.aliyun_nlb_listener_id.label")} - - - + {resourceType === "listener" && ( + ( + + {t("domain.deployment.form.aliyun_nlb_listener_id.label")} + + + - - - )} - /> + + + )} + /> + )}
diff --git a/ui/src/components/workflow/DeployToAliyunOss.tsx b/ui/src/components/workflow/DeployToAliyunOss.tsx index 854802a7..f9d1d274 100644 --- a/ui/src/components/workflow/DeployToAliyunOss.tsx +++ b/ui/src/components/workflow/DeployToAliyunOss.tsx @@ -68,7 +68,7 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => { }); const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config: { ...config } }); + updateNode({ ...data, config: { ...config }, validated: true }); hidePanel(); }; @@ -87,7 +87,7 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => { name="certificate" render={({ field }) => ( - 证书 + {t("workflow.common.certificate.label")} { }} > - + {beforeOutput.map((item) => ( diff --git a/ui/src/components/workflow/DeployToDogeCloudCDN.tsx b/ui/src/components/workflow/DeployToDogeCloudCDN.tsx index 3cc2e608..c38c9c1b 100644 --- a/ui/src/components/workflow/DeployToDogeCloudCDN.tsx +++ b/ui/src/components/workflow/DeployToDogeCloudCDN.tsx @@ -59,7 +59,7 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => { }); const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config: { ...config } }); + updateNode({ ...data, config: { ...config }, validated: true }); hidePanel(); }; @@ -78,7 +78,7 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => { name="certificate" render={({ field }) => ( - 证书 + {t("workflow.common.certificate.label")} { }} > - + {beforeOutput.map((item) => ( diff --git a/ui/src/components/workflow/DeployToHuaweiCloudELB.tsx b/ui/src/components/workflow/DeployToHuaweiCloudELB.tsx index 39e6637f..f20516d9 100644 --- a/ui/src/components/workflow/DeployToHuaweiCloudELB.tsx +++ b/ui/src/components/workflow/DeployToHuaweiCloudELB.tsx @@ -86,7 +86,7 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => { }); const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config: { ...config } }); + updateNode({ ...data, config: { ...config }, validated: true }); hidePanel(); }; @@ -105,7 +105,7 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => { name="certificate" render={({ field }) => ( - 证书 + {t("workflow.common.certificate.label")} { }} > - + {beforeOutput.map((item) => ( diff --git a/ui/src/components/workflow/DeployToLocal.tsx b/ui/src/components/workflow/DeployToLocal.tsx index b4f369c6..93e18d06 100644 --- a/ui/src/components/workflow/DeployToLocal.tsx +++ b/ui/src/components/workflow/DeployToLocal.tsx @@ -114,7 +114,7 @@ const DeployToLocal = ({ data }: DeployFormProps) => { }, [format]); const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config }); + updateNode({ ...data, config, validated: true }); hidePanel(); }; @@ -203,7 +203,7 @@ Remove-Item -Path "$pfxPath" -Force name="certificate" render={({ field }) => ( - 证书 + {t("workflow.common.certificate.label")} { }} > - + {beforeOutput.map((item) => ( diff --git a/ui/src/components/workflow/DeployToSSH.tsx b/ui/src/components/workflow/DeployToSSH.tsx index 433a7321..71952e8a 100644 --- a/ui/src/components/workflow/DeployToSSH.tsx +++ b/ui/src/components/workflow/DeployToSSH.tsx @@ -109,7 +109,7 @@ const DeployToSSH = ({ data }: DeployFormProps) => { }, [format]); const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config }); + updateNode({ ...data, config, validated: true }); hidePanel(); }; @@ -121,7 +121,7 @@ const DeployToSSH = ({ data }: DeployFormProps) => { name="certificate" render={({ field }) => ( - 证书 + {t("workflow.common.certificate.label")} { }} > - + {beforeOutput.map((item) => ( diff --git a/ui/src/components/workflow/DeployToTencentCLB.tsx b/ui/src/components/workflow/DeployToTencentCLB.tsx index 9599f911..b028217a 100644 --- a/ui/src/components/workflow/DeployToTencentCLB.tsx +++ b/ui/src/components/workflow/DeployToTencentCLB.tsx @@ -98,7 +98,7 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => { }); const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config: { ...config } }); + updateNode({ ...data, config: { ...config }, validated: true }); hidePanel(); }; @@ -117,7 +117,7 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => { name="certificate" render={({ field }) => ( - 证书 + {t("workflow.common.certificate.label")} { }} > - + {beforeOutput.map((item) => ( diff --git a/ui/src/components/workflow/DeployToTencentTEO.tsx b/ui/src/components/workflow/DeployToTencentTEO.tsx index c340cc94..c17383f8 100644 --- a/ui/src/components/workflow/DeployToTencentTEO.tsx +++ b/ui/src/components/workflow/DeployToTencentTEO.tsx @@ -61,7 +61,7 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => { }); const onSubmit = async (config: z.infer) => { - updateNode({ ...data, config: { ...config } }); + updateNode({ ...data, config: { ...config }, validated: true }); hidePanel(); }; @@ -80,7 +80,7 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => { name="certificate" render={({ field }) => ( - 证书 + {t("workflow.common.certificate.label")} { }} > - + {beforeOutput.map((item) => ( diff --git a/ui/src/components/workflow/End.tsx b/ui/src/components/workflow/End.tsx index a2db1d53..f4c3f9bc 100644 --- a/ui/src/components/workflow/End.tsx +++ b/ui/src/components/workflow/End.tsx @@ -1,8 +1,11 @@ +import { useTranslation } from "react-i18next"; + const End = () => { + const { t } = useTranslation(); return (
-
流程结束
+
{t("workflow.node.end.title")}
); }; diff --git a/ui/src/components/workflow/Node.tsx b/ui/src/components/workflow/Node.tsx index d2000469..f369d186 100644 --- a/ui/src/components/workflow/Node.tsx +++ b/ui/src/components/workflow/Node.tsx @@ -6,11 +6,17 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge import { Ellipsis, Trash2 } from "lucide-react"; import { usePanel } from "./PanelProvider"; import PanelBody from "./PanelBody"; +import { useTranslation } from "react-i18next"; +import Show from "../Show"; +import { deployTargetsMap } from "@/domain/domain"; +import { channelLabelMap } from "@/domain/settings"; type NodeProps = { data: WorkflowNode; }; +const i18nPrefix = "workflow.node"; + const selectState = (state: WorkflowState) => ({ updateNode: state.updateNode, removeNode: state.removeNode, @@ -23,12 +29,61 @@ const Node = ({ data }: NodeProps) => { const { showPanel } = usePanel(); + const { t } = useTranslation(); + const handleNodeSettingClick = () => { showPanel({ name: data.name, children: , }); }; + + const getSetting = () => { + console.log(data); + if (!data.validated) { + return <>{t(`${i18nPrefix}.setting.label`)}; + } + + switch (data.type) { + case WorkflowNodeType.Start: + return ( +
+
+ {t(`workflow.node.start.form.executionMethod.options.manual`)}}> + {t(`workflow.node.start.form.executionMethod.options.auto`) + ":"} + +
+ +
{data.config?.crontab as string}
+ +
+ ); + case WorkflowNodeType.Apply: + return
{data.config?.domain as string}
; + case WorkflowNodeType.Deploy: { + const provider = deployTargetsMap.get(data.config?.providerType as string); + return ( +
+ +
{t(provider?.name ?? "")}
+
+ ); + } + case WorkflowNodeType.Notify: { + const channelLabel = channelLabelMap.get(data.config?.channel as string); + return ( +
+
{t(channelLabel?.label ?? "")}
+
{(data.config?.title as string) ?? ""}
+
+ ); + } + + default: + return <>{t(`${i18nPrefix}.setting.label`)}; + } + }; + return ( <>
@@ -45,7 +100,7 @@ const Node = ({ data }: NodeProps) => { removeNode(data.id); }} > -
删除节点
+
{t(`${i18nPrefix}.delete.label`)}
@@ -64,7 +119,7 @@ const Node = ({ data }: NodeProps) => {
- 设置节点 + {getSetting()}
diff --git a/ui/src/components/workflow/NotifyForm.tsx b/ui/src/components/workflow/NotifyForm.tsx index 991972aa..d5047a97 100644 --- a/ui/src/components/workflow/NotifyForm.tsx +++ b/ui/src/components/workflow/NotifyForm.tsx @@ -28,6 +28,8 @@ type ChannelName = { name: string; label: string; }; + +const i18nPrefix = "workflow.node.notify.form"; const NotifyForm = ({ data }: NotifyFormProps) => { const { updateNode } = useWorkflowStore(useShallow(selectState)); const { hidePanel } = usePanel(); @@ -79,7 +81,7 @@ const NotifyForm = ({ data }: NotifyFormProps) => { }); const onSubmit = (config: z.infer) => { - updateNode({ ...data, config }); + updateNode({ ...data, config, validated: true }); hidePanel(); }; @@ -100,7 +102,7 @@ const NotifyForm = ({ data }: NotifyFormProps) => {
-
推送渠道
+
{t(`${i18nPrefix}.channel.label`)}
initChannels()} />
{ target="_blank" className="flex justify-between items-center space-x-1 font-normal text-primary hover:underline cursor-pointer" > -
设置推送渠道
+
{t(`${i18nPrefix}.settingChannel.label`)}
 @@ -120,7 +122,7 @@ const NotifyForm = ({ data }: NotifyFormProps) => { }} > - + @@ -143,9 +145,9 @@ const NotifyForm = ({ data }: NotifyFormProps) => { name="title" render={({ field }) => ( - 标题 + {t(`${i18nPrefix}.title.label`)} - + @@ -158,9 +160,9 @@ const NotifyForm = ({ data }: NotifyFormProps) => { name="content" render={({ field }) => ( - 内容 + {t(`${i18nPrefix}.content.label`)} -