feat(ui): CodeInput

This commit is contained in:
Fu Diwei
2025-05-15 00:58:02 +08:00
parent 04abf9dd76
commit 9eaf9fd933
11 changed files with 451 additions and 31 deletions

View File

@@ -4,6 +4,7 @@ import { Alert, Button, Dropdown, Form, type FormInstance, Input, Select } from
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import CodeInput from "@/components/CodeInput";
import Show from "@/components/Show";
import { CERTIFICATE_FORMATS } from "@/domain/certificate";
@@ -407,7 +408,13 @@ const DeployNodeConfigFormLocalConfig = ({ form: formInst, formName, disabled, i
</div>
</label>
<Form.Item name="preCommand" rules={[formRule]}>
<Input.TextArea autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("workflow_node.deploy.form.local_pre_command.placeholder")} />
<CodeInput
height="auto"
minHeight="64px"
maxHeight="256px"
language={["shell", "powershell"]}
placeholder={t("workflow_node.deploy.form.local_pre_command.placeholder")}
/>
</Form.Item>
</Form.Item>
@@ -437,7 +444,13 @@ const DeployNodeConfigFormLocalConfig = ({ form: formInst, formName, disabled, i
</div>
</label>
<Form.Item name="postCommand" rules={[formRule]}>
<Input.TextArea autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("workflow_node.deploy.form.local_post_command.placeholder")} />
<CodeInput
height="auto"
minHeight="64px"
maxHeight="256px"
language={["shell", "powershell"]}
placeholder={t("workflow_node.deploy.form.local_post_command.placeholder")}
/>
</Form.Item>
</Form.Item>
</Form>

View File

@@ -4,6 +4,7 @@ import { Button, Dropdown, Form, type FormInstance, Input, Select, Switch } from
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import CodeInput from "@/components/CodeInput";
import Show from "@/components/Show";
import { CERTIFICATE_FORMATS } from "@/domain/certificate";
@@ -278,7 +279,13 @@ const DeployNodeConfigFormSSHConfig = ({ form: formInst, formName, disabled, ini
</div>
</label>
<Form.Item name="preCommand" rules={[formRule]}>
<Input.TextArea autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("workflow_node.deploy.form.ssh_pre_command.placeholder")} />
<CodeInput
height="auto"
minHeight="64px"
maxHeight="256px"
language={["shell", "powershell"]}
placeholder={t("workflow_node.deploy.form.ssh_pre_command.placeholder")}
/>
</Form.Item>
</Form.Item>
@@ -308,7 +315,13 @@ const DeployNodeConfigFormSSHConfig = ({ form: formInst, formName, disabled, ini
</div>
</label>
<Form.Item name="postCommand" rules={[formRule]}>
<Input.TextArea autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("workflow_node.deploy.form.ssh_post_command.placeholder")} />
<CodeInput
height="auto"
minHeight="64px"
maxHeight="256px"
language={["shell", "powershell"]}
placeholder={t("workflow_node.deploy.form.ssh_post_command.placeholder")}
/>
</Form.Item>
</Form.Item>

View File

@@ -1,8 +1,10 @@
import { useTranslation } from "react-i18next";
import { Alert, Form, type FormInstance, Input } from "antd";
import { Alert, Form, type FormInstance } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import CodeInput from "@/components/CodeInput";
type DeployNodeConfigFormWebhookConfigFieldValues = Nullish<{
webhookData: string;
}>;
@@ -39,8 +41,8 @@ const DeployNodeConfigFormWebhookConfig = ({ form: formInst, formName, disabled,
});
const formRule = createSchemaFieldRule(formSchema);
const handleWebhookDataBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
const handleWebhookDataBlur = () => {
const value = formInst.getFieldValue("webhookData");
try {
const json = JSON.stringify(JSON.parse(value), null, 2);
formInst.setFieldValue("webhookData", json);
@@ -68,9 +70,11 @@ const DeployNodeConfigFormWebhookConfig = ({ form: formInst, formName, disabled,
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.webhook_data.tooltip") }}></span>}
>
<Input.TextArea
allowClear
autoSize={{ minRows: 3, maxRows: 10 }}
<CodeInput
height="auto"
minHeight="64px"
maxHeight="256px"
language="json"
placeholder={t("workflow_node.deploy.form.webhook_data.placeholder")}
onBlur={handleWebhookDataBlur}
/>

View File

@@ -3,6 +3,8 @@ import { Alert, Form, type FormInstance, Input } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import CodeInput from "@/components/CodeInput";
type NotifyNodeConfigFormWebhookConfigFieldValues = Nullish<{
webhookData: string;
}>;
@@ -39,8 +41,8 @@ const NotifyNodeConfigFormWebhookConfig = ({ form: formInst, formName, disabled,
});
const formRule = createSchemaFieldRule(formSchema);
const handleWebhookDataBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
const handleWebhookDataBlur = () => {
const value = formInst.getFieldValue("webhookData");
try {
const json = JSON.stringify(JSON.parse(value), null, 2);
formInst.setFieldValue("webhookData", json);
@@ -68,9 +70,11 @@ const NotifyNodeConfigFormWebhookConfig = ({ form: formInst, formName, disabled,
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.notify.form.webhook_data.tooltip") }}></span>}
>
<Input.TextArea
allowClear
autoSize={{ minRows: 3, maxRows: 10 }}
<CodeInput
height="auto"
minHeight="64px"
maxHeight="256px"
language="json"
placeholder={t("workflow_node.notify.form.webhook_data.placeholder")}
onBlur={handleWebhookDataBlur}
/>