mirror of
https://github.com/usual2970/certimate.git
synced 2025-09-14 12:14:32 +00:00
refactor(ui): clean code
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DeleteOutlined as DeleteOutlinedIcon, EllipsisOutlined as EllipsisOutlinedIcon } from "@ant-design/icons";
|
||||
import { Dropdown } from "antd";
|
||||
import { Button, Dropdown } from "antd";
|
||||
import { produce } from "immer";
|
||||
|
||||
import Show from "@/components/Show";
|
||||
import { deployProvidersMap } from "@/domain/provider";
|
||||
@@ -20,14 +21,24 @@ type NodeProps = {
|
||||
const i18nPrefix = "workflow.node";
|
||||
|
||||
const Node = ({ data }: NodeProps) => {
|
||||
const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
|
||||
const handleNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
updateNode({ ...data, name: e.target.innerText });
|
||||
};
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { updateNode, removeNode } = useWorkflowStore(useZustandShallowSelector(["updateNode", "removeNode"]));
|
||||
const { showPanel } = usePanel();
|
||||
|
||||
const { t } = useTranslation();
|
||||
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 = e.target.innerText;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const handleNodeSettingClick = () => {
|
||||
showPanel({
|
||||
@@ -83,48 +94,48 @@ const Node = ({ data }: NodeProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="rounded-md shadow-md w-[260px] relative">
|
||||
{data.type != WorkflowNodeType.Start && (
|
||||
<>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "delete",
|
||||
label: t(`${i18nPrefix}.delete.label`),
|
||||
icon: <DeleteOutlinedIcon />,
|
||||
danger: true,
|
||||
onClick: () => {
|
||||
removeNode(data.id);
|
||||
},
|
||||
<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 cursor-pointer">
|
||||
<EllipsisOutlinedIcon className="text-white" size={17} />
|
||||
</div>
|
||||
</Dropdown>
|
||||
</>
|
||||
)}
|
||||
},
|
||||
],
|
||||
}}
|
||||
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-[260px] h-[60px] flex flex-col justify-center items-center bg-primary text-white rounded-t-md px-5">
|
||||
<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}
|
||||
className="w-full text-center outline-none focus:bg-white focus:text-stone-600 focus:rounded-sm"
|
||||
>
|
||||
{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} />
|
||||
</>
|
||||
);
|
||||
|
@@ -11,8 +11,7 @@ import AccessEditModal from "@/components/access/AccessEditModal";
|
||||
import AccessSelect from "@/components/access/AccessSelect";
|
||||
import ModalForm from "@/components/core/ModalForm";
|
||||
import MultipleInput from "@/components/core/MultipleInput";
|
||||
import { ACCESS_USAGES } from "@/domain/access";
|
||||
import { accessProvidersMap } from "@/domain/provider";
|
||||
import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
|
||||
import { type WorkflowNode, type WorkflowNodeConfig } from "@/domain/workflow";
|
||||
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
|
||||
import { useContactStore } from "@/stores/contact";
|
||||
|
@@ -8,8 +8,7 @@ import { z } from "zod";
|
||||
|
||||
import AccessEditModal from "@/components/access/AccessEditModal";
|
||||
import AccessSelect from "@/components/access/AccessSelect";
|
||||
import { ACCESS_USAGES } from "@/domain/access";
|
||||
import { accessProvidersMap, deployProvidersMap } from "@/domain/provider";
|
||||
import { ACCESS_USAGES, accessProvidersMap, DEPLOY_PROVIDERS, deployProvidersMap } from "@/domain/provider";
|
||||
import { type WorkflowNode, type WorkflowNodeConfig } from "@/domain/workflow";
|
||||
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
|
||||
import { useWorkflowStore } from "@/stores/workflow";
|
||||
@@ -96,51 +95,51 @@ const DeployNodeForm = ({ data, defaultProivderType }: DeployFormProps) => {
|
||||
NOTICE: If you add new child component, please keep ASCII order.
|
||||
*/
|
||||
switch (fieldProviderType) {
|
||||
case "aliyun-alb":
|
||||
case DEPLOY_PROVIDERS.ALIYUN_ALB:
|
||||
return <DeployNodeFormAliyunALBFields />;
|
||||
case "aliyun-clb":
|
||||
case DEPLOY_PROVIDERS.ALIYUN_CLB:
|
||||
return <DeployNodeFormAliyunCLBFields />;
|
||||
case "aliyun-cdn":
|
||||
case DEPLOY_PROVIDERS.ALIYUN_CDN:
|
||||
return <DeployNodeFormAliyunCDNFields />;
|
||||
case "aliyun-dcdn":
|
||||
case DEPLOY_PROVIDERS.ALIYUN_DCDN:
|
||||
return <DeployNodeFormAliyunDCDNFields />;
|
||||
case "aliyun-nlb":
|
||||
case DEPLOY_PROVIDERS.ALIYUN_NLB:
|
||||
return <DeployNodeFormAliyunNLBFields />;
|
||||
case "aliyun-oss":
|
||||
case DEPLOY_PROVIDERS.ALIYUN_OSS:
|
||||
return <DeployNodeFormAliyunOSSFields />;
|
||||
case "baiducloud-cdn":
|
||||
case DEPLOY_PROVIDERS.BAIDUCLOUD_CDN:
|
||||
return <DeployNodeFormBaiduCloudCDNFields />;
|
||||
case "byteplus-cdn":
|
||||
case DEPLOY_PROVIDERS.BYTEPLUS_CDN:
|
||||
return <DeployNodeFormBytePlusCDNFields />;
|
||||
case "dogecloud-cdn":
|
||||
case DEPLOY_PROVIDERS.DOGECLOUD_CDN:
|
||||
return <DeployNodeFormDogeCloudCDNFields />;
|
||||
case "huaweicloud-cdn":
|
||||
case DEPLOY_PROVIDERS.HUAWEICLOUD_CDN:
|
||||
return <DeployNodeFormHuaweiCloudCDNFields />;
|
||||
case "huaweicloud-elb":
|
||||
case DEPLOY_PROVIDERS.HUAWEICLOUD_ELB:
|
||||
return <DeployNodeFormHuaweiCloudELBFields />;
|
||||
case "k8s-secret":
|
||||
case DEPLOY_PROVIDERS.KUBERNETES_SECRET:
|
||||
return <DeployNodeFormKubernetesSecretFields />;
|
||||
case "local":
|
||||
case DEPLOY_PROVIDERS.LOCAL:
|
||||
return <DeployNodeFormLocalFields />;
|
||||
case "qiniu-cdn":
|
||||
case DEPLOY_PROVIDERS.QINIU_CDN:
|
||||
return <DeployNodeFormQiniuCDNFields />;
|
||||
case "ssh":
|
||||
case DEPLOY_PROVIDERS.SSH:
|
||||
return <DeployNodeFormSSHFields />;
|
||||
case "tencentcloud-cdn":
|
||||
case DEPLOY_PROVIDERS.TENCENTCLOUD_CDN:
|
||||
return <DeployNodeFormTencentCloudCDNFields />;
|
||||
case "tencentcloud-clb":
|
||||
case DEPLOY_PROVIDERS.TENCENTCLOUD_CLB:
|
||||
return <DeployNodeFormTencentCloudCLBFields />;
|
||||
case "tencentcloud-cos":
|
||||
case DEPLOY_PROVIDERS.TENCENTCLOUD_COS:
|
||||
return <DeployNodeFormTencentCloudCOSFields />;
|
||||
case "tencentcloud-ecdn":
|
||||
case DEPLOY_PROVIDERS.TENCENTCLOUD_ECDN:
|
||||
return <DeployNodeFormTencentCloudECDNFields />;
|
||||
case "tencentcloud-eo":
|
||||
case DEPLOY_PROVIDERS.TENCENTCLOUD_EO:
|
||||
return <DeployNodeFormTencentCloudEOFields />;
|
||||
case "volcengine-cdn":
|
||||
case DEPLOY_PROVIDERS.VOLCENGINE_CDN:
|
||||
return <DeployNodeFormVolcEngineCDNFields />;
|
||||
case "volcengine-live":
|
||||
case DEPLOY_PROVIDERS.VOLCENGINE_LIVE:
|
||||
return <DeployNodeFormVolcEngineLiveFields />;
|
||||
case "webhook":
|
||||
case DEPLOY_PROVIDERS.WEBHOOK:
|
||||
return <DeployNodeFormWebhookFields />;
|
||||
}
|
||||
}, [fieldProviderType]);
|
||||
|
@@ -30,7 +30,7 @@ const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowR
|
||||
<>
|
||||
{triggerDom}
|
||||
|
||||
<Drawer closable destroyOnClose open={open} loading={loading} placement="right" title={`runlog-${data?.id}`} width={640} onClose={() => setOpen(false)}>
|
||||
<Drawer destroyOnClose open={open} loading={loading} placement="right" title={`runlog-${data?.id}`} width={640} onClose={() => setOpen(false)}>
|
||||
<Show when={!!data}>
|
||||
<Show when={data!.succeed}>
|
||||
<Alert showIcon type="success" message={<Typography.Text type="success">{t("workflow_run.props.status.succeeded")}</Typography.Text>} />
|
||||
|
@@ -39,7 +39,7 @@ const WorkflowRuns = ({ className, style, workflowId }: WorkflowRunsProps) => {
|
||||
key: "id",
|
||||
title: t("workflow_run.props.id"),
|
||||
ellipsis: true,
|
||||
render: (_, record) => record.id,
|
||||
render: (_, record) => <span className="font-mono">{record.id}</span>,
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
|
Reference in New Issue
Block a user