GuanM/certimate
1
0
Fork 0
mirror of https://github.com/usual2970/certimate.git synced 2025-06-22 12:20:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: clean code

Browse Source
This commit is contained in:
Fu Diwei 2025-01-05 17:19:57 +08:00
parent dfc192cb68
commit e4c51aece4
18 changed files with 169 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/App.tsx
View File

@ -30,7 +30,13 @@ const RootApp = () => {
dayjs.locale(i18n.language);
};
i18n.on("languageChanged", handleLanguageChanged);
useLayoutEffect(handleLanguageChanged, [antdLocalesMap, i18n]);
useLayoutEffect(() => {
handleLanguageChanged();
return () => {
i18n.off("languageChanged", handleLanguageChanged);
};
}, [antdLocalesMap, i18n]);
const antdThemesMap: Record<string, ThemeConfig> = useMemo(
() => ({

15
ui/src/components/DrawerForm.tsx
View File

@ -46,7 +46,7 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
trigger: "onOpenChange",
});
const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
const {
form: formInst,
@ -66,7 +66,7 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
},
});
const mergedFormProps = {
preserve: drawerProps?.destroyOnClose ? false : undefined,
clearOnDestroy: drawerProps?.destroyOnClose ? true : undefined,
...formProps,
...props,
};
@ -86,11 +86,18 @@ const DrawerForm = <T extends NonNullable<unknown> = any>({
return (
<>
{triggerDom}
{triggerEl}
<Drawer
afterOpenChange={(open) => {
if (!open && !mergedFormProps.preserve) {
formInst.resetFields();
}
drawerProps?.afterOpenChange?.(open);
}}
footer={
<Space>
<Space className="w-full justify-end">
<Button {...cancelButtonProps} onClick={handleCancelClick}>
{cancelText || t("common.button.cancel")}
</Button>

13
ui/src/components/ModalForm.tsx
View File

@ -57,7 +57,7 @@ const ModalForm = <T extends NonNullable<unknown> = any>({
trigger: "onOpenChange",
});
const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
const {
form: formInst,
@ -77,7 +77,7 @@ const ModalForm = <T extends NonNullable<unknown> = any>({
},
});
const mergedFormProps = {
preserve: modalProps?.destroyOnClose ? false : undefined,
clearOnDestroy: modalProps?.destroyOnClose ? true : undefined,
...formProps,
...props,
};
@ -97,9 +97,16 @@ const ModalForm = <T extends NonNullable<unknown> = any>({
return (
<>
{triggerDom}
{triggerEl}
<Modal
afterClose={() => {
if (!mergedFormProps.preserve) {
formInst.resetFields();
}
modalProps?.afterClose?.();
}}
cancelButtonProps={cancelButtonProps}
cancelText={cancelText}
confirmLoading={formPending}

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

@ -1,4 +1,4 @@
import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { forwardRef, useImperativeHandle, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Form, type FormInstance, Input } from "antd";
import { createSchemaFieldRule } from "antd-zod";
@ -64,11 +64,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
initialValues: initialValues,
});
const [fieldProvider, setFieldProvider] = useState(initialValues?.provider);
useEffect(() => {
setFieldProvider(initialValues?.provider);
}, [initialValues?.provider]);
const configProvider = Form.useWatch("provider", formInst);
const [configFormInst] = Form.useForm();
const configFormName = useAntdFormName({ form: configFormInst, name: "accessEditConfigForm" });
const configFormComponent = useMemo(() => {
@ -77,7 +73,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
NOTICE: If you add new child component, please keep ASCII order.
*/
const configFormProps = { form: configFormInst, formName: configFormName, disabled: disabled, initialValues: initialValues?.config };
switch (fieldProvider) {
switch (configProvider) {
case ACCESS_PROVIDERS.ACMEHTTPREQ:
return <AccessEditFormACMEHttpReqConfig {...configFormProps} />;
case ACCESS_PROVIDERS.ALIYUN:
@ -117,7 +113,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
case ACCESS_PROVIDERS.WEBHOOK:
return <AccessEditFormWebhookConfig {...configFormProps} />;
}
}, [disabled, initialValues, fieldProvider, configFormInst, configFormName]);
}, [disabled, initialValues, configProvider, configFormInst, configFormName]);
const handleFormProviderChange = (name: string) => {
if (name === configFormName) {
@ -127,8 +123,8 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
};
const handleFormChange = (_: unknown, values: AccessEditFormFieldValues) => {
if (values.provider !== fieldProvider) {
setFieldProvider(values.provider);
if (values.provider !== configProvider) {
formInst.setFieldValue("provider", values.provider);
}
onValuesChange?.(values);
@ -153,7 +149,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
return (
<Form.Provider onFormChange={handleFormProviderChange}>
<div className={className} style={style}>
<Form {...formProps} disabled={disabled} layout="vertical" onValuesChange={handleFormChange}>
<Form {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
<Form.Item name="name" label={t("access.form.name.label")} rules={[formRule]}>
<Input placeholder={t("access.form.name.placeholder")} />
</Form.Item>

3
ui/src/components/access/AccessEditFormKubernetesConfig.tsx
View File

@ -1,5 +1,4 @@
import { useState } from "react";
import { flushSync } from "react-dom";
import { useTranslation } from "react-i18next";
import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons";
import { useDeepCompareEffect } from "ahooks";
@ -55,7 +54,7 @@ const AccessEditFormKubernetesConfig = ({ form, formName, disabled, initialValue
setFieldKubeFileList([]);
}
flushSync(() => onValuesChange?.(form.getFieldsValue(true)));
onValuesChange?.(form.getFieldsValue(true));
};
return (

13
ui/src/components/access/AccessEditFormSSHConfig.tsx
View File

@ -1,5 +1,4 @@
import { useState } from "react";
import { flushSync } from "react-dom";
import { useTranslation } from "react-i18next";
import { UploadOutlined as UploadOutlinedIcon } from "@ant-design/icons";
import { useDeepCompareEffect } from "ahooks";
@ -33,8 +32,14 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
const { t } = useTranslation();
const formSchema = z.object({
host: z.string().refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
port: z.number().int().gte(1, t("common.errmsg.port_invalid")).lte(65535, t("common.errmsg.port_invalid")),
host: z
.string({ message: t("access.form.ssh_host.placeholder") })
.refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
port: z
.number({ message: t("access.form.ssh_port.placeholder") })
.int()
.gte(1, t("common.errmsg.port_invalid"))
.lte(65535, t("common.errmsg.port_invalid")),
username: z
.string()
.min(1, "access.form.ssh_username.placeholder")
@ -74,7 +79,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, initialValues, onVa
setFieldKeyFileList([]);
}
flushSync(() => onValuesChange?.(form.getFieldsValue(true)));
onValuesChange?.(form.getFieldsValue(true));
};
return (

4
ui/src/components/access/AccessEditModal.tsx
View File

@ -34,7 +34,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
trigger: "onOpenChange",
});
const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
const formRef = useRef<AccessEditFormInstance>(null);
const [formPending, setFormPending] = useState(false);
@ -86,7 +86,7 @@ const AccessEditModal = ({ data, loading, trigger, preset, onSubmit, ...props }:
<>
{NotificationContextHolder}
{triggerDom}
{triggerEl}
<Modal
afterClose={() => setOpen(false)}

6
ui/src/components/certificate/CertificateDetailDrawer.tsx
View File

@ -21,11 +21,11 @@ const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: Certifica
trigger: "onOpenChange",
});
const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
return (
<>
{triggerDom}
{triggerEl}
<Drawer
afterOpenChange={setOpen}
@ -34,7 +34,7 @@ const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: Certifica
open={open}
loading={loading}
placement="right"
title={`certimate-${data?.id}`}
title={`Certificate #${data?.id}`}
width={640}
onClose={() => setOpen(false)}
>

11
ui/src/components/notification/NotifyChannelEditForm.tsx
View File

@ -80,7 +80,16 @@ const NotifyChannelEditForm = forwardRef<NotifyChannelEditFormInstance, NotifyCh
});
return (
<Form {...formProps} className={className} style={style} form={formInst} disabled={disabled} layout="vertical" onValuesChange={handleFormChange}>
<Form
{...formProps}
className={className}
style={style}
form={formInst}
disabled={disabled}
layout="vertical"
scrollToFirstError
onValuesChange={handleFormChange}
>
{formFieldsComponent}
</Form>
);

33
ui/src/components/provider/DeployProviderPicker.tsx
View File

@ -1,6 +1,5 @@
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";
@ -15,25 +14,17 @@ export type DeployProviderPickerProps = {
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 providers = Array.from(deployProvidersMap.values());
const filteredProviders = providers.filter((provider) => {
if (keyword) {
const value = keyword.toLowerCase();
return provider.type.toLowerCase().includes(value) || provider.name.toLowerCase().includes(value);
}
return true;
});
const handleProviderTypeSelect = (value: string) => {
onSelect?.(value);
@ -44,9 +35,9 @@ const DeployProviderPicker = ({ className, style, onSelect }: DeployProviderPick
<Input.Search placeholder={t("workflow_node.deploy.search.provider.placeholder")} onChange={(e) => setKeyword(e.target.value.trim())} />
<div className="mt-4">
<Show when={providers.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
<Show when={filteredProviders.length > 0} fallback={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}>
<Row gutter={[16, 16]}>
{providers.map((provider, index) => {
{filteredProviders.map((provider, index) => {
return (
<Col key={index} span={12}>
<Card

6
ui/src/components/workflow/WorkflowRunDetailDrawer.tsx
View File

@ -24,13 +24,13 @@ const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowR
trigger: "onOpenChange",
});
const triggerDom = useTriggerElement(trigger, { onClick: () => setOpen(true) });
const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
return (
<>
{triggerDom}
{triggerEl}
<Drawer 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={`WorkflowRun #${data?.id}`} width={640} onClose={() => setOpen(false)}>
<Show when={!!data}>
<Show when={data!.status === WORKFLOW_RUN_STATUSES.SUCCEEDED}>
<Alert showIcon type="success" message={<Typography.Text type="success">{t("workflow_run.props.status.succeeded")}</Typography.Text>} />

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

@ -152,14 +152,14 @@ export const initWorkflow = (options: InitWorkflowOptions = {}): WorkflowModel =
root.config = { trigger: WORKFLOW_TRIGGERS.MANUAL };
if (options.template === "standard") {
let temp = root;
temp.next = newNode(WorkflowNodeType.Apply, {});
let current = root;
current.next = newNode(WorkflowNodeType.Apply, {});
temp = temp.next;
temp.next = newNode(WorkflowNodeType.Deploy, {});
current = current.next;
current.next = newNode(WorkflowNodeType.Deploy, {});
temp = temp.next;
temp.next = newNode(WorkflowNodeType.Notify, {});
current = current.next;
current.next = newNode(WorkflowNodeType.Notify, {});
}
return {

7
ui/src/hooks/useAntdForm.ts
View File

@ -19,7 +19,8 @@ export interface UseAntdFormReturns<T extends NonNullable<unknown> = any> {
}
/**
*
* 生成并获取一个 antd 表单的实例、属性等。
* 通常为配合 Form 组件使用，以减少样板代码。
* @param {UseAntdFormOptions} options
* @returns {UseAntdFormReturns}
*/
@ -74,9 +75,9 @@ const useAntdForm = <T extends NonNullable<unknown> = any>({ form, initialValues
.then(() => {
resolve(
Promise.resolve(onSubmit?.(values))
.then((data) => {
.then((ret) => {
setFormPending(false);
return data;
return ret;
})
.catch((err) => {
setFormPending(false);

6
ui/src/hooks/useAntdFormName.ts
View File

@ -6,6 +6,12 @@ export interface UseAntdFormNameOptions<T extends NonNullable<unknown> = any> {
name?: string;
}
/**
* 生成并获取一个 antd 表单的唯一名称。
* 通常为配合 Form 组件使用，避免页面上同时存在多个表单时若有同名的 FormItem 会产生冲突。
* @param {UseAntdFormNameOptions} options
* @returns {string}
*/
const useAntdFormName = <T extends NonNullable<unknown> = any>(options: UseAntdFormNameOptions<T>) => {
const formName = useCreation(() => `${options.name}_${Math.random().toString(36).substring(2, 10)}${new Date().getTime()}`, [options.name, options.form]);
return formName;

3
ui/src/hooks/useTriggerElement.ts
View File

@ -5,7 +5,8 @@ export type UseTriggerElementOptions = {
};
/**
* 获取一个触发器元素。通常为配合 Drawer、Modal 等组件使用。
* 获取一个触发器元素。
* 通常为配合 Drawer、Modal 等组件使用。
* @param {React.ReactNode} trigger
* @param {UseTriggerElementOptions} [options]
* @returns {React.ReactElement}

7
ui/src/main.tsx
View File

@ -1,8 +1,7 @@
import React from "react";
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import dayjs from "dayjs";
import dayjsUtc from "dayjs/plugin/utc";
import "dayjs/locale/zh-cn";
import App from "./App";
import "./i18n";
@ -11,7 +10,7 @@ import "./global.css";
dayjs.extend(dayjsUtc);
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<StrictMode>
<App />
</React.StrictMode>
</StrictMode>
);

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

@ -1,6 +1,6 @@
import { memo, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
import {
CloudServerOutlined as CloudServerOutlinedIcon,
GlobalOutlined as GlobalOutlinedIcon,
@ -16,7 +16,7 @@ import {
import { Button, type ButtonProps, Drawer, Dropdown, Layout, Menu, type MenuProps, Tooltip, theme } from "antd";
import Version from "@/components/Version";
import { useBrowserTheme } from "@/hooks";
import { useBrowserTheme, useTriggerElement } from "@/hooks";
import { getPocketBase } from "@/repository/pocketbase";
const ConsoleLayout = () => {
@ -26,16 +26,6 @@ const ConsoleLayout = () => {
const { token: themeToken } = theme.useToken();
const [siderOpen, setSiderOpen] = useState(false);
const handleSiderOpen = () => {
setSiderOpen(true);
};
const handleSiderClose = () => {
setSiderOpen(false);
};
const handleLogoutClick = () => {
auth.clear();
navigate("/login");
@ -67,20 +57,7 @@ const ConsoleLayout = () => {
<Layout.Header className="sticky inset-x-0 top-0 z-[19] p-0 shadow-sm" style={{ background: themeToken.colorBgContainer }}>
<div className="flex size-full items-center justify-between overflow-hidden px-4">
<div className="flex items-center gap-4">
<Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" onClick={handleSiderOpen} />
<Drawer
closable={false}
destroyOnClose
open={siderOpen}
placement="left"
styles={{
content: { paddingTop: themeToken.paddingSM, paddingBottom: themeToken.paddingSM },
body: { padding: 0 },
}}
onClose={handleSiderClose}
>
<SiderMenu onSelect={() => handleSiderClose()} />
</Drawer>
<SiderMenuDrawer trigger={<Button className="md:hidden" icon={<MenuOutlinedIcon />} size="large" />} />
</div>
<div className="flex size-full grow items-center justify-end gap-4 overflow-hidden">
<Tooltip title={t("common.menu.theme")} mouseEnterDelay={2}>
@ -159,10 +136,10 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
return (
<>
<Link to="/" className="flex w-full items-center gap-2 overflow-hidden px-4 font-semibold">
<div className="flex w-full items-center gap-2 overflow-hidden px-4 font-semibold">
<img src="/logo.svg" className="size-[36px]" />
<span className="h-[64px] w-[74px] truncate leading-[64px] dark:text-white">Certimate</span>
</Link>
</div>
<div className="w-full grow overflow-y-auto overflow-x-hidden">
<Menu
items={menuItems}
@ -177,6 +154,34 @@ const SiderMenu = memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
);
});
const SiderMenuDrawer = memo(({ trigger }: { trigger: React.ReactNode }) => {
const { token: themeToken } = theme.useToken();
const [siderOpen, setSiderOpen] = useState(false);
const triggerEl = useTriggerElement(trigger, { onClick: () => setSiderOpen(true) });
return (
<>
{triggerEl}
<Drawer
closable={false}
destroyOnClose
open={siderOpen}
placement="left"
styles={{
content: { paddingTop: themeToken.paddingSM, paddingBottom: themeToken.paddingSM },
body: { padding: 0 },
}}
onClose={() => setSiderOpen(false)}
>
<SiderMenu onSelect={() => setSiderOpen(false)} />
</Drawer>
</>
);
});
const ThemeToggleButton = memo(({ size }: { size?: ButtonProps["size"] }) => {
const { t } = useTranslation();

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

@ -23,7 +23,7 @@ import ModalForm from "@/components/ModalForm";
import Show from "@/components/Show";
import WorkflowElements from "@/components/workflow/WorkflowElements";
import WorkflowRuns from "@/components/workflow/WorkflowRuns";
import { type WorkflowModel, isAllNodesValidated } from "@/domain/workflow";
import { isAllNodesValidated } from "@/domain/workflow";
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
import { remove as removeWorkflow } from "@/repository/workflow";
import { useWorkflowStore } from "@/stores/workflow";
@ -40,7 +40,7 @@ const WorkflowDetail = () => {
const { id: workflowId } = useParams();
const { workflow, initialized, ...workflowState } = useWorkflowStore(
useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "setBaseInfo", "setEnabled", "release", "discard"])
useZustandShallowSelector(["workflow", "initialized", "init", "destroy", "setEnabled", "release", "discard"])
);
useEffect(() => {
// TODO: loading & error
@ -66,16 +66,6 @@ const WorkflowDetail = () => {
setAllowRun(hasReleased);
}, [workflow.content, workflow.draft, workflow.hasDraft, isRunning]);
const handleBaseInfoFormFinish = async (values: Pick<WorkflowModel, "name" | "description">) => {
try {
await workflowState.setBaseInfo(values.name!, values.description!);
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
return false;
}
};
const handleEnableChange = async () => {
if (!workflow.enabled && (!workflow.content || !isAllNodesValidated(workflow.content))) {
messageApi.warning(t("workflow.action.enable.failed.uncompleted"));
@ -194,12 +184,7 @@ const WorkflowDetail = () => {
extra={
initialized
? [
<WorkflowBaseInfoModalForm
key="edit"
data={workflow}
trigger={<Button>{t("common.button.edit")}</Button>}
onFinish={handleBaseInfoFormFinish}
/>,
<WorkflowBaseInfoModal key="edit" trigger={<Button>{t("common.button.edit")}</Button>} />,
<Button key="enable" onClick={handleEnableChange}>
{workflow.enabled ? t("workflow.action.disable") : t("workflow.action.enable")}
@ -301,17 +286,13 @@ const WorkflowDetail = () => {
);
};
const WorkflowBaseInfoModalForm = ({
data,
trigger,
onFinish,
}: {
data: Pick<WorkflowModel, "name" | "description">;
trigger?: React.ReactNode;
onFinish?: (values: Pick<WorkflowModel, "name" | "description">) => Promise<void | boolean>;
}) => {
const WorkflowBaseInfoModal = ({ trigger }: { trigger?: React.ReactNode }) => {
const { t } = useTranslation();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
const { workflow, ...workflowState } = useWorkflowStore(useZustandShallowSelector(["workflow", "setBaseInfo"]));
const formSchema = z.object({
name: z
.string({ message: t("workflow.detail.baseinfo.form.name.placeholder") })
@ -331,11 +312,15 @@ const WorkflowBaseInfoModalForm = ({
formProps,
...formApi
} = useAntdForm<z.infer<typeof formSchema>>({
initialValues: data,
onSubmit: async () => {
const ret = await onFinish?.(formInst.getFieldsValue(true));
if (ret != null && !ret) return false;
return true;
initialValues: { name: workflow.name, description: workflow.description },
onSubmit: async (values) => {
try {
await workflowState.setBaseInfo(values.name!, values.description!);
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
return false;
}
},
});
@ -344,26 +329,30 @@ const WorkflowBaseInfoModalForm = ({
};
return (
<ModalForm
disabled={formPending}
layout="vertical"
form={formInst}
modalProps={{ destroyOnClose: true }}
okText={t("common.button.save")}
title={t(`workflow.detail.baseinfo.modal.title`)}
trigger={trigger}
width={480}
{...formProps}
onFinish={handleFormFinish}
>
<Form.Item name="name" label={t("workflow.detail.baseinfo.form.name.label")} rules={[formRule]}>
<Input placeholder={t("workflow.detail.baseinfo.form.name.placeholder")} />
</Form.Item>
<>
{NotificationContextHolder}
<Form.Item name="description" label={t("workflow.detail.baseinfo.form.description.label")} rules={[formRule]}>
<Input placeholder={t("workflow.detail.baseinfo.form.description.placeholder")} />
</Form.Item>
</ModalForm>
<ModalForm
disabled={formPending}
layout="vertical"
form={formInst}
modalProps={{ destroyOnClose: true }}
okText={t("common.button.save")}
title={t(`workflow.detail.baseinfo.modal.title`)}
trigger={trigger}
width={480}
{...formProps}
onFinish={handleFormFinish}
>
<Form.Item name="name" label={t("workflow.detail.baseinfo.form.name.label")} rules={[formRule]}>
<Input placeholder={t("workflow.detail.baseinfo.form.name.placeholder")} />
</Form.Item>
<Form.Item name="description" label={t("workflow.detail.baseinfo.form.description.label")} rules={[formRule]}>
<Input placeholder={t("workflow.detail.baseinfo.form.description.placeholder")} />
</Form.Item>
</ModalForm>
</>
);
};