refactor(ui): clean code

This commit is contained in:
Fu Diwei
2025-01-02 10:04:23 +08:00
parent b2417ad902
commit e256d36cd1
12 changed files with 238 additions and 238 deletions

View File

@@ -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} />
</>
);

View File

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

View File

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

View File

@@ -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>} />

View File

@@ -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",