wood/certimate
1
0
Fork 0
mirror of https://github.com/woodchen-ink/certimate.git synced 2025-07-18 09:21:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): new WorkflowElements using antd

Browse Source
This commit is contained in:
Fu Diwei 2025-01-03 20:29:34 +08:00
parent c6a8f923e4
commit 8a16893082
43 changed files with 805 additions and 810 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Certimate - Your Trusted SSL Automation Partner</title> <title>Certimate - Your Trusted SSL Automation Partner</title>
</head> </head>
<body class="bg-background" style="pointer-events: auto !important"> <body style="pointer-events: auto !important">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>

5
ui/src/App.tsx
View File

@ -54,8 +54,9 @@ const RootApp = () => {
theme={{ theme={{
...antdTheme, ...antdTheme,
token: { token: {
colorPrimary: "hsl(24.6 95% 53.1%)", /* @see tailwind.config.js */
colorLink: "hsl(24.6 95% 53.1%)", colorPrimary: browserTheme === "dark" ? "hsl(20.5 90.2% 48.2%)" : "hsl(24.6 95% 53.1%)",
colorLink: browserTheme === "dark" ? "hsl(20.5 90.2% 48.2%)" : "hsl(24.6 95% 53.1%)",
}, },
}} }}
> >

0
ui/src/components/core/DrawerForm.tsx → ui/src/components/DrawerForm.tsx
View File

0
ui/src/components/core/ModalForm.tsx → ui/src/components/ModalForm.tsx
View File

0
ui/src/components/core/MultipleInput.tsx → ui/src/components/MultipleInput.tsx
View File

0
ui/src/components/core/Version.tsx → ui/src/components/Version.tsx
View File

2
ui/src/components/access/AccessEditForm.tsx
View File

@ -5,6 +5,7 @@ import { Form, type FormInstance, Input } from "antd";
import { createSchemaFieldRule } from "antd-zod"; import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod"; import { z } from "zod";
import AccessProviderSelect from "@/components/provider/AccessProviderSelect";
import { type AccessModel } from "@/domain/access"; import { type AccessModel } from "@/domain/access";
import { ACCESS_PROVIDERS } from "@/domain/provider"; import { ACCESS_PROVIDERS } from "@/domain/provider";
import { useAntdForm } from "@/hooks"; import { useAntdForm } from "@/hooks";
@ -28,7 +29,6 @@ import AccessEditFormSSHConfig from "./AccessEditFormSSHConfig";
import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig"; import AccessEditFormTencentCloudConfig from "./AccessEditFormTencentCloudConfig";
import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig"; import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig"; import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
import AccessProviderSelect from "./AccessProviderSelect";
type AccessEditFormFieldValues = Partial<MaybeModelRecord<AccessModel>>; type AccessEditFormFieldValues = Partial<MaybeModelRecord<AccessModel>>;
type AccessEditFormPresets = "add" | "edit"; type AccessEditFormPresets = "add" | "edit";

0
ui/src/components/access/AccessProviderSelect.tsx → ui/src/components/provider/AccessProviderSelect.tsx
View File

75
ui/src/components/provider/DeployProviderPicker.tsx Normal file
View File

@ -0,0 +1,75 @@
import { memo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDebounceEffect } from "ahooks";
import { Avatar, Card, Col, Empty, Flex, Input, Row, Typography } from "antd";
import Show from "@/components/Show";
import { deployProvidersMap } from "@/domain/provider";
export type DeployProviderPickerProps = {
className?: string;
style?: React.CSSProperties;
onSelect?: (value: string) => void;
};
const DeployProviderPicker = ({ className, style, onSelect }: DeployProviderPickerProps) => {
const { t } = useTranslation();
const allProviders = Array.from(deployProvidersMap.values());
const [providers, setProviders] = useState(allProviders);
const [keyword, setKeyword] = useState<string>();
useDebounceEffect(
() => {
if (keyword) {
setProviders(
allProviders.filter((provider) => {
const value = keyword.toLowerCase();
return provider.type.toLowerCase().includes(value) || provider.name.toLowerCase().includes(value);
})
);
} else {
setProviders(allProviders);
}
},
[keyword],
{ wait: 300 }
);
const handleProviderTypeSelect = (value: string) => {
onSelect?.(value);
};
return (
<div className={className} style={style}>
<Input.Search placeholder={t("workflow_node.deploy.search.provider_type.placeholder")} onChange={(e) => setKeyword(e.target.value.trim())} />
<div className="mt-4">
<Show when={providers.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
<Row gutter={[16, 16]}>
{providers.map((provider, index) => {
return (
<Col key={index} span={12}>
<Card
className="w-full h-16 shadow-sm overflow-hidden"
styles={{ body: { height: "100%", padding: "0.5rem 1rem" } }}
hoverable
onClick={() => {
handleProviderTypeSelect(provider.type);
}}
>
<Flex className="size-full overflow-hidden" align="center" gap={8}>
<Avatar src={provider.icon} size="small" />
<Typography.Text className="line-clamp-2">{t(provider.name)}</Typography.Text>
</Flex>
</Card>
</Col>
);
})}
</Row>
</Show>
</div>
</div>
);
};
export default memo(DeployProviderPicker);

51
ui/src/components/provider/DeployProviderSelect.tsx Normal file
View File

@ -0,0 +1,51 @@
import { memo } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Select, type SelectProps, Space, Typography } from "antd";
import { deployProvidersMap } from "@/domain/provider";
export type DeployProviderSelectProps = Omit<
SelectProps,
"filterOption" | "filterSort" | "labelRender" | "options" | "optionFilterProp" | "optionLabelProp" | "optionRender"
>;
const DeployProviderSelect = (props: DeployProviderSelectProps) => {
const { t } = useTranslation();
const options = Array.from(deployProvidersMap.values()).map((item) => ({
key: item.type,
value: item.type,
label: t(item.name),
}));
const renderOption = (key: string) => {
const provider = deployProvidersMap.get(key);
return (
<Space className="flex-grow max-w-full truncate overflow-hidden" size={4}>
<Avatar src={provider?.icon} size="small" />
<Typography.Text className="leading-loose" ellipsis>
{t(provider?.name ?? "")}
</Typography.Text>
</Space>
);
};
return (
<Select
{...props}
labelRender={({ label, value }) => {
if (label) {
return renderOption(value as string);
}
return <Typography.Text type="secondary">{props.placeholder}</Typography.Text>;
}}
options={options}
optionFilterProp={undefined}
optionLabelProp={undefined}
optionRender={(option) => renderOption(option.data.value)}
/>
);
};
export default memo(DeployProviderSelect);

65
ui/src/components/workflow/AddNode.tsx
View File

@ -1,65 +0,0 @@
import { PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons";
import { Dropdown } from "antd";
import { type WorkflowNodeType, newNode, workflowNodeDropdownList } from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
import DropdownMenuItemIcon from "./DropdownMenuItemIcon";
import { type BrandNodeProps, type NodeProps } from "./types";
const AddNode = ({ data }: NodeProps | BrandNodeProps) => {
const { addNode } = useWorkflowStore(useZustandShallowSelector(["addNode"]));
const handleTypeSelected = (type: WorkflowNodeType, provider?: string) => {
const node = newNode(type, {
providerType: provider,
});
addNode(node, data.id);
};
return (
<div className="before:content-[''] before:w-[2px] before:bg-stone-200 before:absolute before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0 py-6 relative">
<Dropdown
menu={{
items: workflowNodeDropdownList.map((item) => {
if (item.leaf) {
return {
key: item.type,
label: <div className="ml-2">{item.name}</div>,
icon: <DropdownMenuItemIcon type={item.icon.type} name={item.icon.name} />,
onClick: () => {
handleTypeSelected(item.type);
},
};
}
return {
key: item.type,
label: <div className="ml-2">{item.name}</div>,
icon: <DropdownMenuItemIcon type={item.icon.type} name={item.icon.name} />,
children: item.children?.map((subItem) => {
return {
key: subItem.providerType,
label: <div className="ml-2">{subItem.name}</div>,
icon: <DropdownMenuItemIcon type={subItem.icon.type} name={subItem.icon.name} />,
onClick: () => {
handleTypeSelected(item.type, subItem.providerType);
},
};
}),
};
}),
}}
trigger={["click"]}
>
<div className="bg-stone-400 hover:bg-stone-500 rounded-full size-5 z-[1] relative flex items-center justify-center cursor-pointer">
<PlusOutlinedIcon className="text-white" />
</div>
</Dropdown>
</div>
);
};
export default AddNode;

69
ui/src/components/workflow/BranchNode.tsx
View File

@ -1,69 +0,0 @@
import { memo } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "antd";
import { type WorkflowBranchNode, type WorkflowNode } from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
import AddNode from "./AddNode";
import NodeRender from "./NodeRender";
import { type BrandNodeProps } from "./types";
const BranchNode = memo(({ data }: BrandNodeProps) => {
const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"]));
const { t } = useTranslation();
const renderNodes = (node: WorkflowBranchNode | WorkflowNode | undefined, branchNodeId?: string, branchIndex?: number) => {
const elements: JSX.Element[] = [];
let current = node;
while (current) {
elements.push(<NodeRender data={current} branchId={branchNodeId} branchIndex={branchIndex} key={current.id} />);
current = current.next;
}
return elements;
};
return (
<>
<div className="border-t-[2px] border-b-[2px] relative flex gap-x-16 border-stone-200 bg-background">
<Button
size="small"
variant="outlined"
onClick={() => {
addBranch(data.id);
}}
className="text-xs px-2 h-6 rounded-full absolute -top-3 left-[50%] -translate-x-1/2 z-[1] dark:text-stone-200"
>
{t("workflow.node.addBranch.label")}
</Button>
{data.branches.map((branch, index) => (
<div
key={branch.id}
className="relative flex flex-col items-center before:content-[''] before:w-[2px] before:bg-stone-200 before:absolute before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0"
>
{index == 0 && (
<>
<div className="w-[50%] h-2 absolute -top-1 bg-background -left-[1px]"></div>
<div className="w-[50%] h-2 absolute -bottom-1 bg-background -left-[1px]"></div>
</>
)}
{index == data.branches.length - 1 && (
<>
<div className="w-[50%] h-2 absolute -top-1 bg-background -right-[1px]"></div>
<div className="w-[50%] h-2 absolute -bottom-1 bg-background -right-[1px]"></div>
</>
)}
{/* 条件 1 */}
<div className="relative flex flex-col items-center">{renderNodes(branch, data.id, index)}</div>
</div>
))}
</div>
<AddNode data={data} />
</>
);
});
export default BranchNode;

50
ui/src/components/workflow/ConditionNode.tsx
View File

@ -1,50 +0,0 @@
import { DeleteOutlined as DeleteOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
import { Dropdown } from "antd";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
import AddNode from "./AddNode";
import { type NodeProps } from "./types";
const ConditionNode = ({ data, branchId, branchIndex }: NodeProps) => {
const { updateNode, removeBranch } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeBranch"]));
const handleNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
updateNode({ ...data, name: e.target.innerText });
};
return (
<>
<div className="rounded-md shadow-md w-[261px] mt-10 relative z-[1]">
<Dropdown
menu={{
items: [
{
key: "delete",
label: "删除分支",
icon: <DeleteOutlinedIcon />,
danger: true,
onClick: () => {
removeBranch(branchId ?? "", branchIndex ?? 0);
},
},
],
}}
trigger={["click"]}
>
<div className="absolute right-2 top-1 cursor-pointer">
<EllipsisOutlinedIcon size={17} className="text-stone-600" />
</div>
</Dropdown>
<div className="w-[261px] flex flex-col justify-center text-foreground rounded-md bg-white px-5 py-5">
<div contentEditable suppressContentEditableWarning onBlur={handleNameBlur} className="text-center outline-slate-200 dark:text-stone-600">
{data.name}
</div>
</div>
</div>
<AddNode data={data} />
</>
);
};
export default ConditionNode;

48
ui/src/components/workflow/DeployPanelBody.tsx
View File

@ -1,48 +0,0 @@
import { memo, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import Show from "@/components/Show";
import { deployProvidersMap } from "@/domain/provider";
import { type WorkflowNode } from "@/domain/workflow";
import DeployNodeForm from "./node/DeployNodeForm";
type DeployPanelBodyProps = {
data: WorkflowNode;
};
const DeployPanelBody = ({ data }: DeployPanelBodyProps) => {
const { t } = useTranslation();
const [providerType, setProviderType] = useState("");
useEffect(() => {
if (data.config?.providerType) {
setProviderType(data.config.providerType as string);
}
}, [data]);
return (
<>
{/* 默认展示服务商列表 */}
<Show when={!providerType} fallback={<DeployNodeForm data={data} defaultProivderType={providerType} />}>
<div className="text-lg font-semibold text-gray-700">选择服务商</div>
{Array.from(deployProvidersMap.values()).map((provider, index) => {
return (
<div
key={index}
className="flex space-x-2 w-[47%] items-center cursor-pointer hover:bg-slate-100 p-2 rounded-sm"
onClick={() => {
setProviderType(provider.type);
}}
>
<img src={provider.icon} alt={provider.type} className="w-8 h-8" />
<div className="text-muted-foreground text-sm">{t(provider.name)}</div>
</div>
);
})}
</Show>
</>
);
};
export default memo(DeployPanelBody);

30
ui/src/components/workflow/DropdownMenuItemIcon.tsx
View File

@ -1,30 +0,0 @@
import {
CloudUploadOutlined as CloudUploadOutlinedIcon,
SendOutlined as SendOutlinedIcon,
SisternodeOutlined as SisternodeOutlinedIcon,
SolutionOutlined as SolutionOutlinedIcon,
} from "@ant-design/icons";
import { Avatar } from "antd";
import { type WorkflowNodeDropdwonItemIcon, WorkflowNodeDropdwonItemIconType } from "@/domain/workflow";
const icons = new Map([
["ApplyNodeIcon", <SolutionOutlinedIcon />],
["DeployNodeIcon", <CloudUploadOutlinedIcon />],
["BranchNodeIcon", <SisternodeOutlinedIcon />],
["NotifyNodeIcon", <SendOutlinedIcon />],
]);
const DropdownMenuItemIcon = ({ type, name }: WorkflowNodeDropdwonItemIcon) => {
const getIcon = () => {
if (type === WorkflowNodeDropdwonItemIconType.Icon) {
return icons.get(name);
} else {
return <Avatar src={name} size="small" />;
}
};
return getIcon();
};
export default DropdownMenuItemIcon;

147
ui/src/components/workflow/Node.tsx
View File

@ -1,147 +0,0 @@
import { useTranslation } from "react-i18next";
import { DeleteOutlined as DeleteOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
import { Button, Dropdown } from "antd";
import { produce } from "immer";
import Show from "@/components/Show";
import { deployProvidersMap } from "@/domain/provider";
import { notifyChannelsMap } from "@/domain/settings";
import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
import AddNode from "./AddNode";
import PanelBody from "./PanelBody";
import { usePanel } from "./PanelProvider";
type NodeProps = {
data: WorkflowNode;
};
const i18nPrefix = "workflow.node";
const Node = ({ data }: NodeProps) => {
const { t } = useTranslation();
const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
const { showPanel } = usePanel();
const handleNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
const oldName = data.name;
const newName = e.target.innerText.trim();
if (oldName === newName) {
return;
}
updateNode(
produce(data, (draft) => {
draft.name = newName;
})
);
};
const handleNodeSettingClick = () => {
showPanel({
name: data.name,
children: <PanelBody data={data} />,
});
};
const getSetting = () => {
if (!data.validated) {
return <>{t(`${i18nPrefix}.setting.label`)}</>;
}
switch (data.type) {
case WorkflowNodeType.Start:
return (
<div className="flex space-x-2 items-baseline">
<div className="text-stone-700">
<Show when={data.config?.executionMethod == "auto"} fallback={<>{t(`workflow.props.trigger.manual`)}</>}>
{t(`workflow.props.trigger.auto`) + ":"}
</Show>
</div>
<Show when={data.config?.executionMethod == "auto"}>
<div className="text-muted-foreground">{data.config?.crontab as string}</div>
</Show>
</div>
);
case WorkflowNodeType.Apply:
return <div className="text-muted-foreground truncate">{data.config?.domain as string}</div>;
case WorkflowNodeType.Deploy: {
const provider = deployProvidersMap.get(data.config?.providerType as string);
return (
<div className="flex space-x-2 items-center text-muted-foreground">
<img src={provider?.icon} className="w-6 h-6" />
<div>{t(provider?.name ?? "")}</div>
</div>
);
}
case WorkflowNodeType.Notify: {
const channelLabel = notifyChannelsMap.get(data.config?.channel as string);
return (
<div className="flex space-x-2 items-center justify-between">
<div className="text-stone-700 truncate">{t(channelLabel?.name ?? "")}</div>
<div className="text-muted-foreground truncate">{(data.config?.subject as string) ?? ""}</div>
</div>
);
}
default:
return <>{t(`${i18nPrefix}.setting.label`)}</>;
}
};
return (
<>
<div className="relative w-[256px] rounded-md shadow-md overflow-hidden">
<Show when={data.type != WorkflowNodeType.Start}>
<Dropdown
menu={{
items: [
{
key: "delete",
label: t(`${i18nPrefix}.delete.label`),
icon: <DeleteOutlinedIcon />,
danger: true,
onClick: () => {
removeNode(data.id);
},
},
],
}}
trigger={["click"]}
>
<div className="absolute right-2 top-1">
<Button icon={<EllipsisOutlinedIcon style={{ color: "white" }} />} size="small" type="text" />
</div>
</Dropdown>
</Show>
<div className="w-[256px] h-[48px] flex flex-col justify-center items-center bg-primary text-white rounded-t-md px-4 line-clamp-2">
<div
className="w-full text-center outline-none focus:bg-white focus:text-stone-600 focus:rounded-sm"
contentEditable
suppressContentEditableWarning
onBlur={handleNameBlur}
>
{data.name}
</div>
</div>
<div className="p-2 text-sm text-primary flex flex-col justify-center bg-white">
<div className="leading-7 text-primary cursor-pointer" onClick={handleNodeSettingClick}>
{getSetting()}
</div>
</div>
</div>
<AddNode data={data} />
</>
);
};
export default Node;

24
ui/src/components/workflow/NodeRender.tsx
View File

@ -1,31 +1,31 @@
import { memo } from "react"; import { memo } from "react";
import { type WorkflowBranchNode, type WorkflowNode, WorkflowNodeType } from "@/domain/workflow"; import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
import BranchNode from "./BranchNode"; import WorkflowElement from "./WorkflowElement";
import ConditionNode from "./ConditionNode"; import BranchNode from "./node/BranchNode";
import End from "./End"; import ConditionNode from "./node/ConditionNode";
import Node from "./Node"; import EndNode from "./node/EndNode";
import { type NodeProps } from "./types"; import { type NodeProps } from "./types";
const NodeRender = memo(({ data, branchId, branchIndex }: NodeProps) => { const NodeRender = ({ node: data, branchId, branchIndex }: NodeProps) => {
const render = () => { const render = () => {
switch (data.type) { switch (data.type) {
case WorkflowNodeType.Start: case WorkflowNodeType.Start:
case WorkflowNodeType.Apply: case WorkflowNodeType.Apply:
case WorkflowNodeType.Deploy: case WorkflowNodeType.Deploy:
case WorkflowNodeType.Notify: case WorkflowNodeType.Notify:
return <Node data={data} />; return <WorkflowElement node={data} />;
case WorkflowNodeType.End: case WorkflowNodeType.End:
return <End />; return <EndNode />;
case WorkflowNodeType.Branch: case WorkflowNodeType.Branch:
return <BranchNode data={data as WorkflowBranchNode} />; return <BranchNode node={data} />;
case WorkflowNodeType.Condition: case WorkflowNodeType.Condition:
return <ConditionNode data={data as WorkflowNode} branchId={branchId} branchIndex={branchIndex} />; return <ConditionNode node={data as WorkflowNode} branchId={branchId} branchIndex={branchIndex} />;
} }
}; };
return <>{render()}</>; return <>{render()}</>;
}); };
export default NodeRender; export default memo(NodeRender);

15
ui/src/components/workflow/PanelBody.tsx
View File

@ -1,28 +1,25 @@
import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow"; import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
import DeployPanelBody from "./DeployPanelBody";
import ApplyNodeForm from "./node/ApplyNodeForm"; import ApplyNodeForm from "./node/ApplyNodeForm";
import DeployNodeForm from "./node/DeployNodeForm";
import NotifyNodeForm from "./node/NotifyNodeForm"; import NotifyNodeForm from "./node/NotifyNodeForm";
import StartNodeForm from "./node/StartNodeForm"; import StartNodeForm from "./node/StartNodeForm";
type PanelBodyProps = { type PanelBodyProps = {
data: WorkflowNode; data: WorkflowNode;
}; };
const PanelBody = ({ data }: PanelBodyProps) => { const PanelBody = ({ data }: PanelBodyProps) => {
const getBody = () => { const getBody = () => {
switch (data.type) { switch (data.type) {
case WorkflowNodeType.Start: case WorkflowNodeType.Start:
return <StartNodeForm data={data} />; return <StartNodeForm node={data} />;
case WorkflowNodeType.Apply: case WorkflowNodeType.Apply:
return <ApplyNodeForm data={data} />; return <ApplyNodeForm node={data} />;
case WorkflowNodeType.Deploy: case WorkflowNodeType.Deploy:
return <DeployPanelBody data={data} />; return <DeployNodeForm node={data} />;
case WorkflowNodeType.Notify: case WorkflowNodeType.Notify:
return <NotifyNodeForm data={data} />; return <NotifyNodeForm node={data} />;
case WorkflowNodeType.Branch:
return <div>分支节点</div>;
case WorkflowNodeType.Condition:
return <div>条件节点</div>;
default: default:
return <> </>; return <> </>;
} }

158
ui/src/components/workflow/WorkflowElement.tsx Normal file
View File

@ -0,0 +1,158 @@
import { useTranslation } from "react-i18next";
import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
import { Avatar, Button, Card, Dropdown, Popover, Space, Typography } from "antd";
import { produce } from "immer";
import Show from "@/components/Show";
import { deployProvidersMap } from "@/domain/provider";
import { notifyChannelsMap } from "@/domain/settings";
import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
import PanelBody from "./PanelBody";
import { usePanel } from "./PanelProvider";
import AddNode from "./node/AddNode";
export type NodeProps = {
node: WorkflowNode;
};
const WorkflowElement = ({ node }: NodeProps) => {
const { t } = useTranslation();
const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
const { showPanel } = usePanel();
const renderNodeContent = () => {
if (!node.validated) {
return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
}
switch (node.type) {
case WorkflowNodeType.Start: {
return (
<div className="flex space-x-2 items-center justify-between">
<Typography.Text className="truncate">
{node.config?.executionMethod === "auto"
? t("workflow.props.trigger.auto")
: node.config?.executionMethod === "manual"
? t("workflow.props.trigger.manual")
: ""}
</Typography.Text>
<Typography.Text className="truncate" type="secondary">
{node.config?.executionMethod === "auto" ? (node.config?.crontab as string) : ""}
</Typography.Text>
</div>
);
}
case WorkflowNodeType.Apply: {
return <Typography.Text className="truncate">{node.config?.domain as string}</Typography.Text>;
}
case WorkflowNodeType.Deploy: {
const provider = deployProvidersMap.get(node.config?.providerType as string);
return (
<Space>
<Avatar src={provider?.icon} size="small" />
<Typography.Text className="truncate">{t(provider?.name ?? "")}</Typography.Text>
</Space>
);
}
case WorkflowNodeType.Notify: {
const channel = notifyChannelsMap.get(node.config?.channel as string);
return (
<div className="flex space-x-2 items-center justify-between">
<Typography.Text className="truncate">{t(channel?.name ?? "")}</Typography.Text>
<Typography.Text className="truncate" type="secondary">
{(node.config?.subject as string) ?? ""}
</Typography.Text>
</div>
);
}
default: {
return <></>;
}
}
};
const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
const oldName = node.name;
const newName = e.target.innerText.trim();
if (oldName === newName) {
return;
}
updateNode(
produce(node, (draft) => {
draft.name = newName;
})
);
};
const handleNodeClick = () => {
showPanel({
name: node.name,
children: <PanelBody data={node} />,
});
};
return (
<>
<Popover
arrow={false}
content={
<Show when={node.type !== WorkflowNodeType.Start}>
<Dropdown
menu={{
items: [
{
key: "delete",
label: t("workflow_node.action.delete_node"),
icon: <CloseCircleOutlinedIcon />,
danger: true,
onClick: () => {
removeNode(node.id);
},
},
],
}}
trigger={["click"]}
>
<Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
</Dropdown>
</Show>
}
overlayClassName="shadow-md"
overlayInnerStyle={{ padding: 0 }}
placement="rightTop"
>
<Card className="relative w-[256px] shadow-md overflow-hidden" styles={{ body: { padding: 0 } }} hoverable>
<div className="h-[48px] px-4 py-2 flex flex-col justify-center items-center bg-primary text-white truncate">
<div
className="w-full text-center outline-none overflow-hidden focus:bg-background focus:text-foreground focus:rounded-sm"
contentEditable
suppressContentEditableWarning
onBlur={handleNodeNameBlur}
>
{node.name}
</div>
</div>
<div className="px-4 py-2 flex flex-col justify-center">
<div className="text-sm cursor-pointer" onClick={handleNodeClick}>
{renderNodeContent()}
</div>
</div>
</Card>
</Popover>
<AddNode node={node} />
</>
);
};
export default WorkflowElement;

41
ui/src/components/workflow/WorkflowElements.tsx Normal file
View File

@ -0,0 +1,41 @@
import { useMemo } from "react";
import NodeRender from "@/components/workflow/NodeRender";
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
import EndNode from "@/components/workflow/node/EndNode";
import { type WorkflowNode } from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
export type WorkflowElementsProps = {
className?: string;
style?: React.CSSProperties;
};
const WorkflowElements = ({ className, style }: WorkflowElementsProps) => {
const { workflow } = useWorkflowStore(useZustandShallowSelector(["workflow"]));
const elements = useMemo(() => {
const nodes: JSX.Element[] = [];
let current = workflow.draft as WorkflowNode;
while (current) {
nodes.push(<NodeRender node={current} key={current.id} />);
current = current.next as WorkflowNode;
}
nodes.push(<EndNode key="workflow-end" />);
return nodes;
}, [workflow]);
return (
<div className={className} style={style}>
<div className="flex flex-col items-center overflow-auto">
<WorkflowProvider>{elements}</WorkflowProvider>
</div>
</div>
);
};
export default WorkflowElements;

0
ui/src/components/workflow/run/WorkflowRunDetailDrawer.tsx → ui/src/components/workflow/WorkflowRunDetailDrawer.tsx
View File

0
ui/src/components/workflow/run/WorkflowRuns.tsx → ui/src/components/workflow/WorkflowRuns.tsx
View File

72
ui/src/components/workflow/node/AddNode.tsx Normal file
View File

@ -0,0 +1,72 @@
import {
CloudUploadOutlined as CloudUploadOutlinedIcon,
PlusOutlined as PlusOutlinedIcon,
SendOutlined as SendOutlinedIcon,
SisternodeOutlined as SisternodeOutlinedIcon,
SolutionOutlined as SolutionOutlinedIcon,
} from "@ant-design/icons";
import { Dropdown } from "antd";
import { WorkflowNodeType, newNode, workflowNodeTypeDefaultNames } from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
import { type BrandNodeProps, type NodeProps } from "../types";
const dropdownMenus = [
{
type: WorkflowNodeType.Apply,
label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Apply),
icon: <SolutionOutlinedIcon />,
},
{
type: WorkflowNodeType.Deploy,
label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Deploy),
icon: <CloudUploadOutlinedIcon />,
},
{
type: WorkflowNodeType.Branch,
label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Branch),
icon: <SisternodeOutlinedIcon />,
},
{
type: WorkflowNodeType.Notify,
label: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Notify),
icon: <SendOutlinedIcon />,
},
];
const AddNode = ({ node: supnode }: NodeProps | BrandNodeProps) => {
const { addNode } = useWorkflowStore(useZustandShallowSelector(["addNode"]));
const handleNodeTypeSelect = (type: WorkflowNodeType) => {
const node = newNode(type);
addNode(node, supnode.id);
};
return (
<div className="relative py-6 before:content-[''] before:absolute before:w-[2px] before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0 before:bg-stone-200">
<Dropdown
menu={{
items: dropdownMenus.map((item) => {
return {
key: item.type,
label: item.label,
icon: item.icon,
onClick: () => {
handleNodeTypeSelect(item.type);
},
};
}),
}}
trigger={["click"]}
>
<div className="bg-stone-400 hover:bg-stone-500 rounded-full size-5 z-[1] relative flex items-center justify-center cursor-pointer">
<PlusOutlinedIcon className="text-white" />
</div>
</Dropdown>
</div>
);
};
export default AddNode;

16
ui/src/components/workflow/node/ApplyNodeForm.tsx
View File

@ -7,10 +7,10 @@ import { createSchemaFieldRule } from "antd-zod";
import { produce } from "immer"; import { produce } from "immer";
import { z } from "zod"; import { z } from "zod";
import ModalForm from "@/components/ModalForm";
import MultipleInput from "@/components/MultipleInput";
import AccessEditModal from "@/components/access/AccessEditModal"; import AccessEditModal from "@/components/access/AccessEditModal";
import AccessSelect from "@/components/access/AccessSelect"; import AccessSelect from "@/components/access/AccessSelect";
import ModalForm from "@/components/core/ModalForm";
import MultipleInput from "@/components/core/MultipleInput";
import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider"; import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
import { type WorkflowNode } from "@/domain/workflow"; import { type WorkflowNode } from "@/domain/workflow";
import { useAntdForm, useZustandShallowSelector } from "@/hooks"; import { useAntdForm, useZustandShallowSelector } from "@/hooks";
@ -20,7 +20,7 @@ import { validDomainName, validIPv4Address, validIPv6Address } from "@/utils/val
import { usePanel } from "../PanelProvider"; import { usePanel } from "../PanelProvider";
export type ApplyNodeFormProps = { export type ApplyNodeFormProps = {
data: WorkflowNode; node: WorkflowNode;
}; };
const MULTIPLE_INPUT_DELIMITER = ";"; const MULTIPLE_INPUT_DELIMITER = ";";
@ -35,7 +35,7 @@ const initFormModel = () => {
}; };
}; };
const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => { const ApplyNodeForm = ({ node }: ApplyNodeFormProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { addEmail } = useContactEmailsStore(useZustandShallowSelector("addEmail")); const { addEmail } = useContactEmailsStore(useZustandShallowSelector("addEmail"));
@ -74,12 +74,12 @@ const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
formPending, formPending,
formProps, formProps,
} = useAntdForm<z.infer<typeof formSchema>>({ } = useAntdForm<z.infer<typeof formSchema>>({
initialValues: data?.config ?? initFormModel(), initialValues: node?.config ?? initFormModel(),
onSubmit: async (values) => { onSubmit: async (values) => {
await formInst.validateFields(); await formInst.validateFields();
await addEmail(values.email); await addEmail(values.email);
await updateNode( await updateNode(
produce(data, (draft) => { produce(node, (draft) => {
draft.config = { ...values }; draft.config = { ...values };
draft.validated = true; draft.validated = true;
}) })
@ -88,8 +88,8 @@ const ApplyNodeForm = ({ data }: ApplyNodeFormProps) => {
}, },
}); });
const [fieldDomains, setFieldDomains] = useState(data?.config?.domain as string); const [fieldDomains, setFieldDomains] = useState(node?.config?.domain as string);
const [fieldNameservers, setFieldNameservers] = useState(data?.config?.nameservers as string); const [fieldNameservers, setFieldNameservers] = useState(node?.config?.nameservers as string);
const handleFieldDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFieldDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value; const value = e.target.value;

63
ui/src/components/workflow/node/BranchNode.tsx Normal file
View File

@ -0,0 +1,63 @@
import { memo } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "antd";
import { type WorkflowNode } from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
import NodeRender from "../NodeRender";
import AddNode from "./AddNode";
export type BrandNodeProps = {
node: WorkflowNode;
};
const BranchNode = ({ node }: BrandNodeProps) => {
const { t } = useTranslation();
const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"]));
const renderNodes = (node: WorkflowNode, branchNodeId?: string, branchIndex?: number) => {
const elements: JSX.Element[] = [];
let current = node as WorkflowNode | undefined;
while (current) {
elements.push(<NodeRender key={current.id} node={current} branchId={branchNodeId} branchIndex={branchIndex} />);
current = current.next;
}
return elements;
};
return (
<>
<div className="relative flex gap-x-16 before:content-[''] before:absolute before:h-[2px] before:left-[128px] before:right-[128px] before:top-0 before:bg-stone-200">
<Button
className="text-xs absolute left-[50%] -translate-x-1/2 -translate-y-1/2 z-[1]"
size="small"
shape="round"
variant="outlined"
onClick={() => {
addBranch(node.id);
}}
>
{t("workflow_node.action.add_branch")}
</Button>
{node.branches!.map((branch, index) => (
<div
key={branch.id}
className="relative flex flex-col items-center before:content-[''] before:w-[2px] before:bg-stone-200 before:absolute before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0"
>
<div className="relative flex flex-col items-center">{renderNodes(branch, node.id, index)}</div>
</div>
))}
</div>
<AddNode node={node} />
</>
);
};
export default memo(BranchNode);

78
ui/src/components/workflow/node/ConditionNode.tsx Normal file
View File

@ -0,0 +1,78 @@
import { useTranslation } from "react-i18next";
import { CloseCircleOutlined as CloseCircleOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
import { Button, Card, Dropdown, Popover } from "antd";
import { produce } from "immer";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";
import AddNode from "./AddNode";
import { type NodeProps } from "../types";
const ConditionNode = ({ node, branchId, branchIndex }: NodeProps) => {
const { t } = useTranslation();
const { updateNode, removeBranch } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeBranch"]));
const handleNodeNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
const oldName = node.name;
const newName = e.target.innerText.trim();
if (oldName === newName) {
return;
}
updateNode(
produce(node, (draft) => {
draft.name = newName;
})
);
};
return (
<>
<Popover
arrow={false}
content={
<Dropdown
menu={{
items: [
{
key: "delete",
label: t("workflow_node.action.delete_branch"),
icon: <CloseCircleOutlinedIcon />,
danger: true,
onClick: () => {
removeBranch(branchId ?? "", branchIndex ?? 0);
},
},
],
}}
trigger={["click"]}
>
<Button color="primary" icon={<EllipsisOutlinedIcon />} variant="text" />
</Dropdown>
}
overlayClassName="shadow-md"
overlayInnerStyle={{ padding: 0 }}
placement="rightTop"
>
<Card className="relative w-[256px] shadow-md mt-10 z-[1]" styles={{ body: { padding: 0 } }} hoverable>
<div className="h-[48px] px-4 py-2 flex flex-col justify-center items-center truncate">
<div
className="w-full text-center outline-slate-200 overflow-hidden focus:bg-background focus:text-foreground focus:rounded-sm"
contentEditable
suppressContentEditableWarning
onBlur={handleNodeNameBlur}
>
{node.name}
</div>
</div>
</Card>
</Popover>
<AddNode node={node} />
</>
);
};
export default ConditionNode;

224
ui/src/components/workflow/node/DeployNodeForm.tsx
View File

@ -1,13 +1,16 @@
import { memo, useEffect, useMemo, useState } from "react"; import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons"; import { PlusOutlined as PlusOutlinedIcon, QuestionCircleOutlined as QuestionCircleOutlinedIcon } from "@ant-design/icons";
import { Avatar, Button, Divider, Form, Select, Space, Tooltip, Typography } from "antd"; import { Button, Divider, Form, Select, Tooltip, Typography } from "antd";
import { createSchemaFieldRule } from "antd-zod"; import { createSchemaFieldRule } from "antd-zod";
import { produce } from "immer"; import { produce } from "immer";
import { z } from "zod"; import { z } from "zod";
import Show from "@/components/Show";
import AccessEditModal from "@/components/access/AccessEditModal"; import AccessEditModal from "@/components/access/AccessEditModal";
import AccessSelect from "@/components/access/AccessSelect"; import AccessSelect from "@/components/access/AccessSelect";
import DeployProviderPicker from "@/components/provider/DeployProviderPicker";
import DeployProviderSelect from "@/components/provider/DeployProviderSelect";
import { ACCESS_USAGES, DEPLOY_PROVIDERS, accessProvidersMap, deployProvidersMap } from "@/domain/provider"; import { ACCESS_USAGES, DEPLOY_PROVIDERS, accessProvidersMap, deployProvidersMap } from "@/domain/provider";
import { type WorkflowNode } from "@/domain/workflow"; import { type WorkflowNode } from "@/domain/workflow";
import { useAntdForm, useZustandShallowSelector } from "@/hooks"; import { useAntdForm, useZustandShallowSelector } from "@/hooks";
@ -38,15 +41,14 @@ import DeployNodeFormVolcEngineLiveFields from "./DeployNodeFormVolcEngineLiveFi
import DeployNodeFormWebhookFields from "./DeployNodeFormWebhookFields"; import DeployNodeFormWebhookFields from "./DeployNodeFormWebhookFields";
export type DeployFormProps = { export type DeployFormProps = {
data: WorkflowNode; node: WorkflowNode;
defaultProivderType?: string;
}; };
const initFormModel = () => { const initFormModel = () => {
return {}; return {};
}; };
const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => { const DeployNodeForm = ({ node }: DeployFormProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"])); const { updateNode, getWorkflowOuptutBeforeId } = useWorkflowStore(useZustandShallowSelector(["updateNode", "getWorkflowOuptutBeforeId"]));
@ -67,11 +69,11 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
formPending, formPending,
formProps, formProps,
} = useAntdForm<z.infer<typeof formSchema>>({ } = useAntdForm<z.infer<typeof formSchema>>({
initialValues: data?.config ?? initFormModel(), initialValues: node?.config ?? initFormModel(),
onSubmit: async (values) => { onSubmit: async (values) => {
await formInst.validateFields(); await formInst.validateFields();
await updateNode( await updateNode(
produce(data, (draft) => { produce(node, (draft) => {
draft.config = { ...values }; draft.config = { ...values };
draft.validated = true; draft.validated = true;
}) })
@ -82,12 +84,11 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
const [previousOutput, setPreviousOutput] = useState<WorkflowNode[]>([]); const [previousOutput, setPreviousOutput] = useState<WorkflowNode[]>([]);
useEffect(() => { useEffect(() => {
const rs = getWorkflowOuptutBeforeId(data.id, "certificate"); const rs = getWorkflowOuptutBeforeId(node.id, "certificate");
setPreviousOutput(rs); setPreviousOutput(rs);
}, [data, getWorkflowOuptutBeforeId]); }, [node, getWorkflowOuptutBeforeId]);
const fieldProviderType = Form.useWatch("providerType", formInst); const fieldProviderType = Form.useWatch("providerType", { form: formInst, preserve: true });
// const fieldAccess = Form.useWatch("access", formInst);
const formFieldsComponent = useMemo(() => { const formFieldsComponent = useMemo(() => {
/* /*
@ -144,11 +145,18 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
} }
}, [fieldProviderType]); }, [fieldProviderType]);
const handleProviderTypePick = useCallback(
(value: string) => {
formInst.setFieldValue("providerType", value);
},
[formInst]
);
const handleProviderTypeSelect = (value: string) => { const handleProviderTypeSelect = (value: string) => {
if (fieldProviderType === value) return; if (fieldProviderType === value) return;
// 切换部署目标时重置表单，避免其他部署目标的配置字段影响当前部署目标 // 切换部署目标时重置表单，避免其他部署目标的配置字段影响当前部署目标
if (data.config?.providerType === value) { if (node.config?.providerType === value) {
formInst.resetFields(); formInst.resetFields();
} else { } else {
const oldValues = formInst.getFieldsValue(); const oldValues = formInst.getFieldsValue();
@ -161,119 +169,107 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
} }
} }
formInst.setFieldsValue(newValues); formInst.setFieldsValue(newValues);
if (deployProvidersMap.get(fieldProviderType)?.provider !== deployProvidersMap.get(value)?.provider) {
formInst.setFieldValue("access", undefined);
}
} }
}; };
return ( return (
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical"> <Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
<Form.Item name="providerType" label={t("workflow_node.deploy.form.provider_type.label")} rules={[formRule]} initialValue={defaultProivderType}> <Show when={!!fieldProviderType} fallback={<DeployProviderPicker onSelect={handleProviderTypePick} />}>
<Select <Form.Item name="providerType" label={t("workflow_node.deploy.form.provider_type.label")} rules={[formRule]}>
showSearch <DeployProviderSelect
placeholder={t("workflow_node.deploy.form.provider_type.placeholder")} allowClear
filterOption={(searchValue, option) => { placeholder={t("workflow_node.deploy.form.provider_type.placeholder")}
const type = String(option?.value ?? ""); showSearch
const target = deployProvidersMap.get(type); onSelect={handleProviderTypeSelect}
const filter = (v?: string) => v?.toLowerCase()?.includes(searchValue.toLowerCase()) ?? false;
return filter(type) || filter(t(target?.name ?? ""));
}}
onSelect={handleProviderTypeSelect}
>
{Array.from(deployProvidersMap.values()).map((item) => {
return (
<Select.Option key={item.type} label={t(item.name)} value={item.type} title={t(item.name)}>
<Space className="flex-grow max-w-full truncate" size={4}>
<Avatar src={item.icon} size="small" />
<Typography.Text className="leading-loose" ellipsis>
{t(item.name)}
</Typography.Text>
</Space>
</Select.Option>
);
})}
</Select>
</Form.Item>
<Form.Item className="mb-0">
<label className="block mb-1">
<div className="flex items-center justify-between gap-4 w-full">
<div className="flex-grow max-w-full truncate">
<span>{t("workflow_node.deploy.form.provider_access.label")}</span>
<Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
<Typography.Text className="ms-1" type="secondary">
<QuestionCircleOutlinedIcon />
</Typography.Text>
</Tooltip>
</div>
<div className="text-right">
<AccessEditModal
data={{ configType: deployProvidersMap.get(defaultProivderType!)?.provider }}
preset="add"
trigger={
<Button size="small" type="link">
<PlusOutlinedIcon />
{t("workflow_node.deploy.form.provider_access.button")}
</Button>
}
onSubmit={(record) => {
const provider = accessProvidersMap.get(record.configType);
if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
formInst.setFieldValue("access", record.id);
}
}}
/>
</div>
</div>
</label>
<Form.Item name="access" rules={[formRule]}>
<AccessSelect
placeholder={t("workflow_node.deploy.form.provider_access.placeholder")}
filter={(record) => {
if (defaultProivderType) {
return deployProvidersMap.get(defaultProivderType)?.provider === record.configType;
}
const provider = accessProvidersMap.get(record.configType);
return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
}}
/> />
</Form.Item> </Form.Item>
</Form.Item>
<Form.Item <Form.Item className="mb-0">
name="certificate" <label className="block mb-1">
label={t("workflow_node.deploy.form.certificate.label")} <div className="flex items-center justify-between gap-4 w-full">
rules={[formRule]} <div className="flex-grow max-w-full truncate">
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.certificate.tooltip") }}></span>} <span>{t("workflow_node.deploy.form.provider_access.label")}</span>
> <Tooltip title={t("workflow_node.deploy.form.provider_access.tooltip")}>
<Select <Typography.Text className="ms-1" type="secondary">
options={previousOutput.map((item) => { <QuestionCircleOutlinedIcon />
return { </Typography.Text>
label: item.name, </Tooltip>
options: item.output?.map((output) => { </div>
return { <div className="text-right">
label: `${item.name} - ${output.label}`, <AccessEditModal
value: `${item.id}#${output.name}`, data={{ configType: deployProvidersMap.get(fieldProviderType!)?.provider }}
}; preset="add"
}), trigger={
}; <Button size="small" type="link">
})} <PlusOutlinedIcon />
placeholder={t("workflow_node.deploy.form.certificate.placeholder")} {t("workflow_node.deploy.form.provider_access.button")}
/> </Button>
</Form.Item> }
onSubmit={(record) => {
const provider = accessProvidersMap.get(record.configType);
if (ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.DEPLOY === provider?.usage) {
formInst.setFieldValue("access", record.id);
}
}}
/>
</div>
</div>
</label>
<Form.Item name="access" rules={[formRule]}>
<AccessSelect
placeholder={t("workflow_node.deploy.form.provider_access.placeholder")}
filter={(record) => {
if (fieldProviderType) {
return deployProvidersMap.get(fieldProviderType)?.provider === record.configType;
}
<Divider className="my-1"> const provider = accessProvidersMap.get(record.configType);
<Typography.Text className="font-normal text-xs" type="secondary"> return ACCESS_USAGES.ALL === provider?.usage || ACCESS_USAGES.APPLY === provider?.usage;
{t("workflow_node.deploy.form.params_config.label")} }}
</Typography.Text> />
</Divider> </Form.Item>
</Form.Item>
{formFieldsComponent} <Form.Item
name="certificate"
label={t("workflow_node.deploy.form.certificate.label")}
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.certificate.tooltip") }}></span>}
>
<Select
options={previousOutput.map((item) => {
return {
label: item.name,
options: item.output?.map((output) => {
return {
label: `${item.name} - ${output.label}`,
value: `${item.id}#${output.name}`,
};
}),
};
})}
placeholder={t("workflow_node.deploy.form.certificate.placeholder")}
/>
</Form.Item>
<Form.Item> <Divider className="my-1">
<Button type="primary" htmlType="submit" loading={formPending}> <Typography.Text className="font-normal text-xs" type="secondary">
{t("common.button.save")} {t("workflow_node.deploy.form.params_config.label")}
</Button> </Typography.Text>
</Form.Item> </Divider>
{formFieldsComponent}
<Form.Item>
<Button type="primary" htmlType="submit" loading={formPending}>
{t("common.button.save")}
</Button>
</Form.Item>
</Show>
</Form> </Form>
); );
}; };

10
ui/src/components/workflow/End.tsx → ui/src/components/workflow/node/EndNode.tsx
View File

@ -1,13 +1,17 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Typography } from "antd";
const End = () => { const EndNode = () => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="size-[20px] rounded-full bg-stone-400"></div> <div className="size-[20px] rounded-full bg-stone-400"></div>
<div className="text-sm text-stone-400 mt-2">{t("workflow_node.end.label")}</div> <div className="text-sm mt-2">
<Typography.Text type="secondary">{t("workflow_node.end.label")}</Typography.Text>
</div>
</div> </div>
); );
}; };
export default End; export default EndNode;

8
ui/src/components/workflow/node/NotifyNodeForm.tsx
View File

@ -15,7 +15,7 @@ import { useWorkflowStore } from "@/stores/workflow";
import { usePanel } from "../PanelProvider"; import { usePanel } from "../PanelProvider";
export type NotifyNodeFormProps = { export type NotifyNodeFormProps = {
data: WorkflowNode; node: WorkflowNode;
}; };
const initFormModel = () => { const initFormModel = () => {
@ -25,7 +25,7 @@ const initFormModel = () => {
}; };
}; };
const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => { const NotifyNodeForm = ({ node }: NotifyNodeFormProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { const {
@ -57,11 +57,11 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
formPending, formPending,
formProps, formProps,
} = useAntdForm<z.infer<typeof formSchema>>({ } = useAntdForm<z.infer<typeof formSchema>>({
initialValues: data?.config ?? initFormModel(), initialValues: node?.config ?? initFormModel(),
onSubmit: async (values) => { onSubmit: async (values) => {
await formInst.validateFields(); await formInst.validateFields();
await updateNode( await updateNode(
produce(data, (draft) => { produce(node, (draft) => {
draft.config = { ...values }; draft.config = { ...values };
draft.validated = true; draft.validated = true;
}) })

16
ui/src/components/workflow/node/StartNodeForm.tsx
View File

@ -14,7 +14,7 @@ import { getNextCronExecutions, validCronExpression } from "@/utils/cron";
import { usePanel } from "../PanelProvider"; import { usePanel } from "../PanelProvider";
export type StartNodeFormProps = { export type StartNodeFormProps = {
data: WorkflowNode; node: WorkflowNode;
}; };
const initFormModel = () => { const initFormModel = () => {
@ -24,7 +24,7 @@ const initFormModel = () => {
}; };
}; };
const StartNodeForm = ({ data }: StartNodeFormProps) => { const StartNodeForm = ({ node }: StartNodeFormProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"])); const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
@ -54,11 +54,11 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
formPending, formPending,
formProps, formProps,
} = useAntdForm<z.infer<typeof formSchema>>({ } = useAntdForm<z.infer<typeof formSchema>>({
initialValues: data?.config ?? initFormModel(), initialValues: node?.config ?? initFormModel(),
onSubmit: async (values) => { onSubmit: async (values) => {
await formInst.validateFields(); await formInst.validateFields();
await updateNode( await updateNode(
produce(data, (draft) => { produce(node, (draft) => {
draft.config = { ...values }; draft.config = { ...values };
draft.validated = true; draft.validated = true;
}) })
@ -67,12 +67,12 @@ const StartNodeForm = ({ data }: StartNodeFormProps) => {
}, },
}); });
const [triggerType, setTriggerType] = useState(data?.config?.executionMethod); const [triggerType, setTriggerType] = useState(node?.config?.executionMethod);
const [triggerCronLastExecutions, setTriggerCronExecutions] = useState<Date[]>([]); const [triggerCronLastExecutions, setTriggerCronExecutions] = useState<Date[]>([]);
useEffect(() => { useEffect(() => {
setTriggerType(data?.config?.executionMethod); setTriggerType(node?.config?.executionMethod);
setTriggerCronExecutions(getNextCronExecutions(data?.config?.crontab as string, 5)); setTriggerCronExecutions(getNextCronExecutions(node?.config?.crontab as string, 5));
}, [data?.config?.executionMethod, data?.config?.crontab]); }, [node?.config?.executionMethod, node?.config?.crontab]);
const handleTriggerTypeChange = (value: string) => { const handleTriggerTypeChange = (value: string) => {
setTriggerType(value); setTriggerType(value);

10
ui/src/components/workflow/types.ts
View File

@ -1,11 +1,17 @@
import { type WorkflowBranchNode, type WorkflowNode } from "@/domain/workflow"; import { type WorkflowBranchNode, type WorkflowNode } from "@/domain/workflow";
/**
* @deprecated
*/
export type NodeProps = { export type NodeProps = {
data: WorkflowNode | WorkflowBranchNode; node: WorkflowNode | WorkflowBranchNode;
branchId?: string; branchId?: string;
branchIndex?: number; branchIndex?: number;
}; };
/**
* @deprecated
*/
export type BrandNodeProps = { export type BrandNodeProps = {
data: WorkflowBranchNode; node: WorkflowBranchNode;
}; };

12
ui/src/domain/settings.ts
View File

@ -1,12 +1,8 @@
export const SETTINGS_NAME_EMAILS = "emails" as const;
export const SETTINGS_NAME_NOTIFYTEMPLATES = "notifyTemplates" as const;
export const SETTINGS_NAME_NOTIFYCHANNELS = "notifyChannels" as const;
export const SETTINGS_NAME_SSLPROVIDER = "sslProvider" as const;
export const SETTINGS_NAMES = Object.freeze({ export const SETTINGS_NAMES = Object.freeze({
EMAILS: SETTINGS_NAME_EMAILS, EMAILS: "emails",
NOTIFY_TEMPLATES: SETTINGS_NAME_NOTIFYTEMPLATES, NOTIFY_TEMPLATES: "notifyTemplates",
NOTIFY_CHANNELS: SETTINGS_NAME_NOTIFYCHANNELS, NOTIFY_CHANNELS: "notifyChannels",
SSL_PROVIDER: SETTINGS_NAME_SSLPROVIDER, SSL_PROVIDER: "sslProvider",
} as const); } as const);
export type SettingsNames = (typeof SETTINGS_NAMES)[keyof typeof SETTINGS_NAMES]; export type SettingsNames = (typeof SETTINGS_NAMES)[keyof typeof SETTINGS_NAMES];

103
ui/src/domain/workflow.ts
View File

@ -28,7 +28,7 @@ export enum WorkflowNodeType {
Custom = "custom", Custom = "custom",
} }
const workflowNodeTypeDefaultNames: Map<WorkflowNodeType, string> = new Map([ export const workflowNodeTypeDefaultNames: Map<WorkflowNodeType, string> = new Map([
[WorkflowNodeType.Start, i18n.t("workflow_node.start.label")], [WorkflowNodeType.Start, i18n.t("workflow_node.start.label")],
[WorkflowNodeType.End, i18n.t("workflow_node.end.label")], [WorkflowNodeType.End, i18n.t("workflow_node.end.label")],
[WorkflowNodeType.Branch, i18n.t("workflow_node.branch.label")], [WorkflowNodeType.Branch, i18n.t("workflow_node.branch.label")],
@ -39,7 +39,7 @@ const workflowNodeTypeDefaultNames: Map<WorkflowNodeType, string> = new Map([
[WorkflowNodeType.Custom, i18n.t("workflow_node.custom.title")], [WorkflowNodeType.Custom, i18n.t("workflow_node.custom.title")],
]); ]);
const workflowNodeTypeDefaultInputs: Map<WorkflowNodeType, WorkflowNodeIO[]> = new Map([ export const workflowNodeTypeDefaultInputs: Map<WorkflowNodeType, WorkflowNodeIO[]> = new Map([
[WorkflowNodeType.Apply, []], [WorkflowNodeType.Apply, []],
[ [
WorkflowNodeType.Deploy, WorkflowNodeType.Deploy,
@ -48,14 +48,14 @@ const workflowNodeTypeDefaultInputs: Map<WorkflowNodeType, WorkflowNodeIO[]> = n
name: "certificate", name: "certificate",
type: "certificate", type: "certificate",
required: true, required: true,
label: i18n.t("workflow.common.certificate.label"), label: "证书",
}, },
], ],
], ],
[WorkflowNodeType.Notify, []], [WorkflowNodeType.Notify, []],
]); ]);
const workflowNodeTypeDefaultOutputs: Map<WorkflowNodeType, WorkflowNodeIO[]> = new Map([ export const workflowNodeTypeDefaultOutputs: Map<WorkflowNodeType, WorkflowNodeIO[]> = new Map([
[ [
WorkflowNodeType.Apply, WorkflowNodeType.Apply,
[ [
@ -63,7 +63,7 @@ const workflowNodeTypeDefaultOutputs: Map<WorkflowNodeType, WorkflowNodeIO[]> =
name: "certificate", name: "certificate",
type: "certificate", type: "certificate",
required: true, required: true,
label: i18n.t("workflow.common.certificate.label"), label: "证书",
}, },
], ],
], ],
@ -148,10 +148,9 @@ export const initWorkflow = (options: InitWorkflowOptions = {}): WorkflowModel =
type NewNodeOptions = { type NewNodeOptions = {
branchIndex?: number; branchIndex?: number;
providerType?: string;
}; };
export const newNode = (nodeType: WorkflowNodeType, options: NewNodeOptions): WorkflowNode | WorkflowBranchNode => { export const newNode = (nodeType: WorkflowNodeType, options: NewNodeOptions = {}): WorkflowNode | WorkflowBranchNode => {
const nodeTypeName = workflowNodeTypeDefaultNames.get(nodeType) || ""; const nodeTypeName = workflowNodeTypeDefaultNames.get(nodeType) || "";
const nodeName = options.branchIndex != null ? `${nodeTypeName} ${options.branchIndex + 1}` : nodeTypeName; const nodeName = options.branchIndex != null ? `${nodeTypeName} ${options.branchIndex + 1}` : nodeTypeName;
@ -165,9 +164,7 @@ export const newNode = (nodeType: WorkflowNodeType, options: NewNodeOptions): Wo
case WorkflowNodeType.Apply: case WorkflowNodeType.Apply:
case WorkflowNodeType.Deploy: case WorkflowNodeType.Deploy:
{ {
node.config = { node.config = {};
providerType: options.providerType,
};
node.input = workflowNodeTypeDefaultInputs.get(nodeType); node.input = workflowNodeTypeDefaultInputs.get(nodeType);
node.output = workflowNodeTypeDefaultOutputs.get(nodeType); node.output = workflowNodeTypeDefaultOutputs.get(nodeType);
} }
@ -389,89 +386,3 @@ export const getExecuteMethod = (node: WorkflowNode): { type: string; crontab: s
}; };
} }
}; };
/**
* @deprecated
*/
type WorkflowNodeDropdwonItem = {
type: WorkflowNodeType;
providerType?: string;
name: string;
icon: WorkflowNodeDropdwonItemIcon;
leaf?: boolean;
children?: WorkflowNodeDropdwonItem[];
};
/**
* @deprecated
*/
export enum WorkflowNodeDropdwonItemIconType {
Icon,
Provider,
}
/**
* @deprecated
*/
export type WorkflowNodeDropdwonItemIcon = {
type: WorkflowNodeDropdwonItemIconType;
name: string;
};
/**
* @deprecated
*/
const workflowNodeDropdownDeployList: WorkflowNodeDropdwonItem[] = Array.from(deployProvidersMap.values()).map((item) => {
return {
type: WorkflowNodeType.Apply,
providerType: item.type,
name: i18n.t(item.name),
leaf: true,
icon: {
type: WorkflowNodeDropdwonItemIconType.Provider,
name: item.icon,
},
};
});
/**
* @deprecated
*/
export const workflowNodeDropdownList: WorkflowNodeDropdwonItem[] = [
{
type: WorkflowNodeType.Apply,
name: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Apply) ?? "",
icon: {
type: WorkflowNodeDropdwonItemIconType.Icon,
name: "ApplyNodeIcon",
},
leaf: true,
},
{
type: WorkflowNodeType.Deploy,
name: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Deploy) ?? "",
icon: {
type: WorkflowNodeDropdwonItemIconType.Icon,
name: "DeployNodeIcon",
},
children: workflowNodeDropdownDeployList,
},
{
type: WorkflowNodeType.Branch,
name: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Branch) ?? "",
leaf: true,
icon: {
type: WorkflowNodeDropdwonItemIconType.Icon,
name: "BranchNodeIcon",
},
},
{
type: WorkflowNodeType.Notify,
name: workflowNodeTypeDefaultNames.get(WorkflowNodeType.Notify) ?? "",
leaf: true,
icon: {
type: WorkflowNodeDropdwonItemIconType.Icon,
name: "NotifyNodeIcon",
},
},
];

32
ui/src/global.css
View File

@ -5,41 +5,13 @@
@layer base { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
--foreground: 20 14.3% 4.1%; --foreground: 0, 0%, 8%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--primary: 24.6 95% 53.1%; --primary: 24.6 95% 53.1%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--ring: 24.6 95% 53.1%;
} }
.dark { .dark {
--background: 20 14.3% 4.1%; --background: 0, 0%, 8%;
--foreground: 60 9.1% 97.8%; --foreground: 60 9.1% 97.8%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--primary: 20.5 90.2% 48.2%; --primary: 20.5 90.2% 48.2%;
--primary-foreground: 60 9.1% 97.8%;
--secondary: 12 6.5% 15.1%;
--secondary-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--accent: 12 6.5% 15.1%;
--accent-foreground: 60 9.1% 97.8%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 12 6.5% 15.1%;
--input: 12 6.5% 15.1%;
--ring: 20.5 90.2% 48.2%;
} }
} }

7
ui/src/i18n/locales/en/nls.workflow.json
View File

@ -44,10 +44,5 @@
"workflow.detail.orchestration.action.release.failed.uncompleted": "Please complete the orchestration first", "workflow.detail.orchestration.action.release.failed.uncompleted": "Please complete the orchestration first",
"workflow.detail.orchestration.action.run": "Run", "workflow.detail.orchestration.action.run": "Run",
"workflow.detail.orchestration.action.run.confirm": "There are unreleased changes, are you sure to run this workflow based on the latest released version?", "workflow.detail.orchestration.action.run.confirm": "There are unreleased changes, are you sure to run this workflow based on the latest released version?",
"workflow.detail.runs.tab": "History runs", "workflow.detail.runs.tab": "History runs"
"workflow.common.certificate.label": "Certificate",
"workflow.node.setting.label": "Setting Node",
"workflow.node.delete.label": "Delete Node",
"workflow.node.addBranch.label": "Add Branch"
} }

7
ui/src/i18n/locales/en/nls.workflow.nodes.json
View File

@ -1,4 +1,10 @@
{ {
"workflow_node.action.configure_node": "Configure",
"workflow_node.action.add_node": "Add node",
"workflow_node.action.delete_node": "Delete node",
"workflow_node.action.add_branch": "Add branch",
"workflow_node.action.delete_branch": "Delete branch",
"workflow_node.start.label": "Start", "workflow_node.start.label": "Start",
"workflow_node.start.form.trigger.label": "Trigger", "workflow_node.start.form.trigger.label": "Trigger",
"workflow_node.start.form.trigger.placeholder": "Please select trigger", "workflow_node.start.form.trigger.placeholder": "Please select trigger",
@ -41,6 +47,7 @@
"workflow_node.apply.form.disable_follow_cname.tooltip": "It determines whether to disable CNAME following during ACME DNS-01 authentication. If you don't understand this option, just keep it by default.<br><a href=\"https://letsencrypt.org/2019/10/09/onboarding-your-customers-with-lets-encrypt-and-acme/#the-advantages-of-a-cname\" target=\"_blank\">Learn more</a>.", "workflow_node.apply.form.disable_follow_cname.tooltip": "It determines whether to disable CNAME following during ACME DNS-01 authentication. If you don't understand this option, just keep it by default.<br><a href=\"https://letsencrypt.org/2019/10/09/onboarding-your-customers-with-lets-encrypt-and-acme/#the-advantages-of-a-cname\" target=\"_blank\">Learn more</a>.",
"workflow_node.deploy.label": "Deployment", "workflow_node.deploy.label": "Deployment",
"workflow_node.deploy.search.provider_type.placeholder": "Search deploy target ...",
"workflow_node.deploy.form.provider_type.label": "Deploy target", "workflow_node.deploy.form.provider_type.label": "Deploy target",
"workflow_node.deploy.form.provider_type.placeholder": "Please select deploy target", "workflow_node.deploy.form.provider_type.placeholder": "Please select deploy target",
"workflow_node.deploy.form.provider_access.label": "Host provider authorization", "workflow_node.deploy.form.provider_access.label": "Host provider authorization",

9
ui/src/i18n/locales/zh/nls.workflow.json
View File

@ -41,13 +41,8 @@
"workflow.detail.orchestration.action.discard.confirm": "确定要撤销更改并回退到最近一次发布的版本吗？", "workflow.detail.orchestration.action.discard.confirm": "确定要撤销更改并回退到最近一次发布的版本吗？",
"workflow.detail.orchestration.action.release": "发布更改", "workflow.detail.orchestration.action.release": "发布更改",
"workflow.detail.orchestration.action.release.confirm": "确定要发布更改吗？", "workflow.detail.orchestration.action.release.confirm": "确定要发布更改吗？",
"workflow.detail.orchestration.action.release.failed.uncompleted": "流程编排未完成，请检查是否有节点未设置", "workflow.detail.orchestration.action.release.failed.uncompleted": "流程编排未完成，请检查是否有节点未配置",
"workflow.detail.orchestration.action.run": "执行", "workflow.detail.orchestration.action.run": "执行",
"workflow.detail.orchestration.action.run.confirm": "此工作流存在未发布的更改，将以最近一次发布的版本为准，确定要继续执行吗？", "workflow.detail.orchestration.action.run.confirm": "此工作流存在未发布的更改，将以最近一次发布的版本为准，确定要继续执行吗？",
"workflow.detail.runs.tab": "执行历史", "workflow.detail.runs.tab": "执行历史"
"workflow.common.certificate.label": "证书",
"workflow.node.setting.label": "设置节点",
"workflow.node.delete.label": "删除节点",
"workflow.node.addBranch.label": "添加分支"
} }

7
ui/src/i18n/locales/zh/nls.workflow.nodes.json
View File

@ -1,4 +1,10 @@
{ {
"workflow_node.action.configure_node": "配置节点",
"workflow_node.branch.add_node": "添加节点",
"workflow_node.action.delete_node": "删除节点",
"workflow_node.action.add_branch": "添加分支",
"workflow_node.action.delete_branch": "删除分支",
"workflow_node.start.label": "开始", "workflow_node.start.label": "开始",
"workflow_node.start.form.trigger.label": "触发方式", "workflow_node.start.form.trigger.label": "触发方式",
"workflow_node.start.form.trigger.placeholder": "请选择触发方式", "workflow_node.start.form.trigger.placeholder": "请选择触发方式",
@ -41,6 +47,7 @@
"workflow_node.apply.form.disable_follow_cname.tooltip": "在 ACME DNS-01 认证时是否禁止 CNAME 跟随。如果你不了解该选项的用途，保持默认即可。<br><a href=\"https://letsencrypt.org/2019/10/09/onboarding-your-customers-with-lets-encrypt-and-acme/#the-advantages-of-a-cname\" target=\"_blank\">点此了解更多</a>。", "workflow_node.apply.form.disable_follow_cname.tooltip": "在 ACME DNS-01 认证时是否禁止 CNAME 跟随。如果你不了解该选项的用途，保持默认即可。<br><a href=\"https://letsencrypt.org/2019/10/09/onboarding-your-customers-with-lets-encrypt-and-acme/#the-advantages-of-a-cname\" target=\"_blank\">点此了解更多</a>。",
"workflow_node.deploy.label": "部署", "workflow_node.deploy.label": "部署",
"workflow_node.deploy.search.provider_type.placeholder": "搜索部署目标……",
"workflow_node.deploy.form.provider_type.label": "部署目标", "workflow_node.deploy.form.provider_type.label": "部署目标",
"workflow_node.deploy.form.provider_type.placeholder": "请选择部署目标", "workflow_node.deploy.form.provider_type.placeholder": "请选择部署目标",
"workflow_node.deploy.form.provider_access.label": "主机提供商授权", "workflow_node.deploy.form.provider_access.label": "主机提供商授权",

2
ui/src/pages/AuthLayout.tsx
View File

@ -1,6 +1,6 @@
import { Navigate, Outlet } from "react-router-dom"; import { Navigate, Outlet } from "react-router-dom";
import Version from "@/components/core/Version"; import Version from "@/components/Version";
import { getPocketBase } from "@/repository/pocketbase"; import { getPocketBase } from "@/repository/pocketbase";
const AuthLayout = () => { const AuthLayout = () => {

4
ui/src/pages/ConsoleLayout.tsx
View File

@ -15,7 +15,7 @@ import {
} from "@ant-design/icons"; } from "@ant-design/icons";
import { Button, type ButtonProps, Drawer, Dropdown, Layout, Menu, type MenuProps, Tooltip, theme } from "antd"; import { Button, type ButtonProps, Drawer, Dropdown, Layout, Menu, type MenuProps, Tooltip, theme } from "antd";
import Version from "@/components/core/Version"; import Version from "@/components/Version";
import { useBrowserTheme } from "@/hooks"; import { useBrowserTheme } from "@/hooks";
import { getPocketBase } from "@/repository/pocketbase"; import { getPocketBase } from "@/repository/pocketbase";
@ -66,7 +66,7 @@ const ConsoleLayout = () => {
<Layout className="pl-[256px] max-md:pl-0"> <Layout className="pl-[256px] max-md:pl-0">
<Layout.Header className="sticky top-0 left-0 right-0 p-0 z-[19] shadow-sm" style={{ background: themeToken.colorBgContainer }}> <Layout.Header className="sticky top-0 left-0 right-0 p-0 z-[19] shadow-sm" style={{ background: themeToken.colorBgContainer }}>
<div className="flex items-center justify-between size-full px-4 overflow-hidden"> <div className="flex items-center justify-between size-full px-4 overflow-hidden">
<div className="flex items-center gap-4 size-full"> <div className="flex items-center gap-4">
<Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" onClick={handleSiderOpen} /> <Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" onClick={handleSiderOpen} />
<Drawer <Drawer
closable={false} closable={false}

119
ui/src/pages/workflows/WorkflowDetail.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { import {
@ -19,13 +19,11 @@ import { isEqual } from "radash";
import { z } from "zod"; import { z } from "zod";
import { run as runWorkflow } from "@/api/workflow"; import { run as runWorkflow } from "@/api/workflow";
import ModalForm from "@/components/ModalForm";
import Show from "@/components/Show"; import Show from "@/components/Show";
import ModalForm from "@/components/core/ModalForm"; import WorkflowElements from "@/components/workflow/WorkflowElements";
import End from "@/components/workflow/End"; import WorkflowRuns from "@/components/workflow/WorkflowRuns";
import NodeRender from "@/components/workflow/NodeRender"; import { type WorkflowModel, isAllNodesValidated } from "@/domain/workflow";
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
import WorkflowRuns from "@/components/workflow/run/WorkflowRuns";
import { type WorkflowModel, type WorkflowNode, isAllNodesValidated } from "@/domain/workflow";
import { useAntdForm, useZustandShallowSelector } from "@/hooks"; import { useAntdForm, useZustandShallowSelector } from "@/hooks";
import { remove as removeWorkflow } from "@/repository/workflow"; import { remove as removeWorkflow } from "@/repository/workflow";
import { useWorkflowStore } from "@/stores/workflow"; import { useWorkflowStore } from "@/stores/workflow";
@ -41,33 +39,21 @@ const WorkflowDetail = () => {
const [notificationApi, NotificationContextHolder] = notification.useNotification(); const [notificationApi, NotificationContextHolder] = notification.useNotification();
const { id: workflowId } = useParams(); const { id: workflowId } = useParams();
const { workflow, init, save, setBaseInfo, switchEnable } = useWorkflowStore( const { workflow, initialized, init, save, destroy, setBaseInfo, switchEnable } = useWorkflowStore(
useZustandShallowSelector(["workflow", "init", "save", "setBaseInfo", "switchEnable"]) useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "save", "setBaseInfo", "switchEnable"])
); );
useEffect(() => { useEffect(() => {
// TODO: loading // TODO: loading
init(workflowId!); init(workflowId!);
return () => {
destroy();
};
}, [workflowId]); }, [workflowId]);
const [tabValue, setTabValue] = useState<"orchestration" | "runs">("orchestration"); const [tabValue, setTabValue] = useState<"orchestration" | "runs">("orchestration");
const workflowNodes = useMemo(() => { const [isRunning, setIsRunning] = useState(false);
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 [workflowRunning, setWorkflowRunning] = useState(false);
const [allowDiscard, setAllowDiscard] = useState(false); const [allowDiscard, setAllowDiscard] = useState(false);
const [allowRelease, setAllowRelease] = useState(false); const [allowRelease, setAllowRelease] = useState(false);
@ -75,10 +61,10 @@ const WorkflowDetail = () => {
useDeepCompareEffect(() => { useDeepCompareEffect(() => {
const hasReleased = !!workflow.content; const hasReleased = !!workflow.content;
const hasChanges = workflow.hasDraft! || !isEqual(workflow.draft, workflow.content); const hasChanges = workflow.hasDraft! || !isEqual(workflow.draft, workflow.content);
setAllowDiscard(!workflowRunning && hasReleased && hasChanges); setAllowDiscard(!isRunning && hasReleased && hasChanges);
setAllowRelease(!workflowRunning && hasChanges); setAllowRelease(!isRunning && hasChanges);
setAllowRun(hasReleased); setAllowRun(hasReleased);
}, [workflow, workflowRunning]); }, [workflow, isRunning]);
const handleBaseInfoFormFinish = async (values: Pick<WorkflowModel, "name" | "description">) => { const handleBaseInfoFormFinish = async (values: Pick<WorkflowModel, "name" | "description">) => {
try { try {
@ -174,7 +160,7 @@ const WorkflowDetail = () => {
// TODO: 异步执行 // TODO: 异步执行
promise.then(async () => { promise.then(async () => {
setWorkflowRunning(true); setIsRunning(true);
try { try {
await runWorkflow(workflowId!); await runWorkflow(workflowId!);
@ -188,7 +174,7 @@ const WorkflowDetail = () => {
console.error(err); console.error(err);
messageApi.warning(t("common.text.operation_failed")); messageApi.warning(t("common.text.operation_failed"));
} finally { } finally {
setWorkflowRunning(false); setIsRunning(false);
} }
}); });
}; };
@ -203,35 +189,44 @@ const WorkflowDetail = () => {
<PageHeader <PageHeader
style={{ paddingBottom: 0 }} style={{ paddingBottom: 0 }}
title={workflow.name} title={workflow.name}
extra={[ extra={
<WorkflowBaseInfoModalForm key="edit" data={workflow} trigger={<Button>{t("common.button.edit")}</Button>} onFinish={handleBaseInfoFormFinish} />, initialized
? [
<WorkflowBaseInfoModalForm
key="edit"
data={workflow}
trigger={<Button>{t("common.button.edit")}</Button>}
onFinish={handleBaseInfoFormFinish}
/>,
<Button key="enable" onClick={handleEnableChange}> <Button key="enable" onClick={handleEnableChange}>
{workflow.enabled ? t("workflow.action.disable") : t("workflow.action.enable")} {workflow.enabled ? t("workflow.action.disable") : t("workflow.action.enable")}
</Button>, </Button>,
<Dropdown <Dropdown
key="more" key="more"
menu={{ menu={{
items: [ items: [
{ {
key: "delete", key: "delete",
label: t("workflow.action.delete"), label: t("workflow.action.delete"),
danger: true, danger: true,
icon: <DeleteOutlinedIcon />, icon: <DeleteOutlinedIcon />,
onClick: () => { onClick: () => {
handleDeleteClick(); handleDeleteClick();
}, },
}, },
], ],
}} }}
trigger={["click"]} trigger={["click"]}
> >
<Button icon={<DownOutlinedIcon />} iconPosition="end"> <Button icon={<DownOutlinedIcon />} iconPosition="end">
{t("common.button.more")} {t("common.button.more")}
</Button> </Button>
</Dropdown>, </Dropdown>,
]} ]
: []
}
> >
<Typography.Paragraph type="secondary">{workflow.description}</Typography.Paragraph> <Typography.Paragraph type="secondary">{workflow.description}</Typography.Paragraph>
<Tabs <Tabs
@ -249,15 +244,15 @@ const WorkflowDetail = () => {
</Card> </Card>
<div className="p-4"> <div className="p-4">
<Card> <Card loading={!initialized}>
<Show when={tabValue === "orchestration"}> <Show when={tabValue === "orchestration"}>
<div className="relative"> <div className="relative">
<div className="flex flex-col items-center py-12 pr-48"> <div className="py-12 lg:pr-36 xl:pr-48">
<WorkflowProvider>{workflowNodes}</WorkflowProvider> <WorkflowElements />
</div> </div>
<div className="absolute top-0 right-0 z-[1]"> <div className="absolute top-0 right-0 z-[1]">
<Space> <Space>
<Button disabled={!allowRun} icon={<CaretRightOutlinedIcon />} loading={workflowRunning} type="primary" onClick={handleRunClick}> <Button disabled={!allowRun} icon={<CaretRightOutlinedIcon />} loading={isRunning} type="primary" onClick={handleRunClick}>
{t("workflow.detail.orchestration.action.run")} {t("workflow.detail.orchestration.action.run")}
</Button> </Button>

10
ui/src/stores/workflow/index.ts
View File

@ -25,8 +25,9 @@ export type WorkflowState = {
getWorkflowOuptutBeforeId: (id: string, type: string) => WorkflowNode[]; getWorkflowOuptutBeforeId: (id: string, type: string) => WorkflowNode[];
switchEnable(): void; switchEnable(): void;
save(): void; save(): void;
init(id: string): void;
setBaseInfo: (name: string, description: string) => void; setBaseInfo: (name: string, description: string) => void;
init(id: string): void;
destroy(): void;
}; };
export const useWorkflowStore = create<WorkflowState>((set, get) => ({ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
@ -214,4 +215,11 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
getWorkflowOuptutBeforeId: (id: string, type: string) => { getWorkflowOuptutBeforeId: (id: string, type: string) => {
return getWorkflowOutputBeforeId(get().workflow.draft as WorkflowNode, id, type); return getWorkflowOutputBeforeId(get().workflow.draft as WorkflowNode, id, type);
}, },
destroy: () => {
set({
workflow: {} as WorkflowModel,
initialized: false,
});
},
})); }));

24
ui/tailwind.config.js
View File

@ -14,34 +14,10 @@ module.exports = {
}, },
extend: { extend: {
colors: { colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))", background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))", foreground: "hsl(var(--foreground))",
primary: { primary: {
DEFAULT: "hsl(var(--primary))", DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
}, },
}, },
}, },