refactor(ui): clean code

ui/src/components/CodeTextInput.tsx

@@ -14,13 +14,15 @@ import DisabledContext from "antd/es/config-provider/DisabledContext";
 import { useBrowserTheme } from "@/hooks";
 import { mergeCls } from "@/utils/css";
 
-export interface CodeInputProps extends Omit<ReactCodeMirrorProps, "extensions" | "lang" | "theme"> {
+export interface CodeTextInputProps extends Omit<ReactCodeMirrorProps, "extensions" | "lang" | "theme"> {
   disabled?: boolean;
   language?: string | string[];
+  lineNumbers?: boolean;
+  lineWrapping?: boolean;
   readOnly?: boolean;
 }
 
-const CodeInput = ({ className, style, disabled, language, readOnly, ...props }: CodeInputProps) => {
+const CodeTextInput = ({ className, style, disabled, language, lineNumbers = true, lineWrapping = true, readOnly, ...props }: CodeTextInputProps) => {
   const { token: themeToken } = theme.useToken();
 
   const { theme: browserTheme } = useBrowserTheme();
@@ -47,9 +49,12 @@ const CodeInput = ({ className, style, disabled, language, readOnly, ...props }:
         allowMultipleSelections: false,
         indentOnInput: false,
       }),
-      EditorView.lineWrapping,
     ];
 
+    if (lineWrapping) {
+      temp.push(EditorView.lineWrapping);
+    }
+
     const langs = Array.isArray(language) ? language : [language];
     langs.forEach((lang) => {
       switch (lang) {
@@ -69,7 +74,7 @@ const CodeInput = ({ className, style, disabled, language, readOnly, ...props }:
     });
 
     return temp;
-  }, [language]);
+  }, [language, lineWrapping]);
 
   return (
     <div
@@ -106,9 +111,10 @@ const CodeInput = ({ className, style, disabled, language, readOnly, ...props }:
         style={{ height: "100%" }}
         {...props}
         basicSetup={{
-          foldGutter: false,
-          dropCursor: false,
           allowMultipleSelections: false,
+          dropCursor: false,
+          foldGutter: false,
+          lineNumbers: lineNumbers,
           indentOnInput: false,
         }}
         extensions={cmExtensions}
@@ -119,4 +125,4 @@ const CodeInput = ({ className, style, disabled, language, readOnly, ...props }:
   );
 };
 
-export default CodeInput;
+export default CodeTextInput;

ui/src/components/FileTextInput.tsx

@@ -7,14 +7,14 @@ import { type TextAreaProps } from "antd/es/input/TextArea";
 
 import { readFileAsText } from "@/utils/file";
 
-export interface TextFileInputProps extends Omit<TextAreaProps, "onChange"> {
+export interface FileTextInputProps extends Omit<TextAreaProps, "onChange"> {
   accept?: string;
   uploadButtonProps?: Omit<ButtonProps, "disabled" | "onClick">;
   uploadText?: string;
   onChange?: (value: string) => void;
 }
 
-const TextFileInput = ({ className, style, accept, disabled, readOnly, uploadText, uploadButtonProps, onChange, ...props }: TextFileInputProps) => {
+const FileTextInput = ({ className, style, accept, disabled, readOnly, uploadText, uploadButtonProps, onChange, ...props }: FileTextInputProps) => {
   const { t } = useTranslation();
 
   const injectedDisabled = useContext(DisabledContext);
@@ -53,4 +53,4 @@ const TextFileInput = ({ className, style, accept, disabled, readOnly, uploadTex
   );
 };
 
-export default TextFileInput;
+export default FileTextInput;

ui/src/components/access/forms/AccessConfigFieldsProviderACMEDNS.tsx

@@ -3,7 +3,7 @@ import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod/v4";
 
-import TextFileInput from "@/components/TextFileInput";
+import FileTextInput from "@/components/FileTextInput";
 
 import { useFormNestedFieldsContext } from "./_context";
 
@@ -35,7 +35,7 @@ const AccessConfigFieldsProviderACMEDNS = () => {
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.acmedns_credentials.tooltip") }}></span>}
       >
-        <TextFileInput autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("access.form.acmedns_credentials.placeholder")} />
+        <FileTextInput autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("access.form.acmedns_credentials.placeholder")} />
       </Form.Item>
     </>
   );

ui/src/components/access/forms/AccessConfigFieldsProviderKubernetes.tsx

@@ -3,7 +3,7 @@ import { Form } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import TextFileInput from "@/components/TextFileInput";
+import FileTextInput from "@/components/FileTextInput";
 
 import { useFormNestedFieldsContext } from "./_context";
 
@@ -27,7 +27,7 @@ const AccessConfigFormFieldsProviderKubernetes = () => {
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.k8s_kubeconfig.tooltip") }}></span>}
       >
-        <TextFileInput allowClear autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("access.form.k8s_kubeconfig.placeholder")} />
+        <FileTextInput allowClear autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("access.form.k8s_kubeconfig.placeholder")} />
       </Form.Item>
     </>
   );

ui/src/components/access/forms/AccessConfigFieldsProviderSSH.tsx

@@ -5,7 +5,7 @@ import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
 import Show from "@/components/Show";
-import TextFileInput from "@/components/TextFileInput";
+import FileTextInput from "@/components/FileTextInput";
 import { mergeCls } from "@/utils/css";
 import { validDomainName, validIPv4Address, validIPv6Address, validPortNumber } from "@/utils/validators";
 
@@ -70,7 +70,7 @@ const AccessConfigFormFieldsProviderSSH = ({ disabled }: { disabled?: boolean })
 
       <Show when={fieldAuthMethod === AUTH_METHOD_KEY}>
         <Form.Item name={[parentNamePath, "key"]} initialValue={initialValues.key} label={t("access.form.ssh_key.label")} rules={[formRule]}>
-          <TextFileInput autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("access.form.ssh_key.placeholder")} />
+          <FileTextInput autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("access.form.ssh_key.placeholder")} />
         </Form.Item>
 
         <Form.Item
@@ -184,7 +184,7 @@ const AccessConfigFormFieldsProviderSSH = ({ disabled }: { disabled?: boolean })
 
                         <Show when={subfieldAuthMethod === AUTH_METHOD_KEY}>
                           <Form.Item name={[index, "key"]} label={t("access.form.ssh_key.label")} shouldUpdate rules={[formRule]}>
-                            <TextFileInput allowClear autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("access.form.ssh_key.placeholder")} />
+                            <FileTextInput allowClear autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("access.form.ssh_key.placeholder")} />
                           </Form.Item>
 
                           <Form.Item name={[index, "keyPassphrase"]} label={t("access.form.ssh_key_passphrase.label")} shouldUpdate rules={[formRule]}>

ui/src/components/access/forms/AccessConfigFieldsProviderWebhook.tsx

@@ -4,7 +4,7 @@ import { Button, Dropdown, Form, Input, Select, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import CodeInput from "@/components/CodeInput";
+import CodeTextInput from "@/components/CodeTextInput";
 import Show from "@/components/Show";
 import Tips from "@/components/Tips";
 
@@ -214,7 +214,8 @@ const AccessConfigFormFieldsProviderWebhook = ({ usage = "none" }: AccessConfigF
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.webhook_headers.tooltip") }}></span>}
       >
-        <CodeInput
+        <CodeTextInput
+          lineWrapping={false}
           height="auto"
           minHeight="64px"
           maxHeight="256px"
@@ -245,7 +246,8 @@ const AccessConfigFormFieldsProviderWebhook = ({ usage = "none" }: AccessConfigF
             </Dropdown>
           </div>
           <Form.Item name={[parentNamePath, "data"]} initialValue={initialValues.data} noStyle rules={[formRule]}>
-            <CodeInput
+            <CodeTextInput
+              lineWrapping={false}
               height="auto"
               minHeight="64px"
               maxHeight="256px"
@@ -281,7 +283,8 @@ const AccessConfigFormFieldsProviderWebhook = ({ usage = "none" }: AccessConfigF
             </Dropdown>
           </div>
           <Form.Item name={[parentNamePath, "data"]} initialValue={initialValues.data} noStyle rules={[formRule]}>
-            <CodeInput
+            <CodeTextInput
+              lineWrapping={false}
               height="auto"
               minHeight="64px"
               maxHeight="256px"

ui/src/components/workflow/WorkflowGraphExportBox.tsx

@@ -6,7 +6,7 @@ import { IconClipboard } from "@tabler/icons-react";
 import { App, Button, Form, Radio, Tooltip } from "antd";
 import { stringify as stringifyYaml } from "yaml";
 
-import CodeInput from "@/components/CodeInput";
+import CodeTextInput from "@/components/CodeTextInput";
 import { type WorkflowGraph, type WorkflowNode } from "@/domain/workflow";
 
 import { getAllNodeRegistries } from "./designer/nodes";
@@ -130,7 +130,7 @@ const WorkflowGraphExportBox = ({ className, style, data }: WorkflowGraphExportB
             </CopyToClipboard>
           </Tooltip>
         </div>
-        <CodeInput height="calc(min(60vh, 512px))" language={format} value={content} readOnly />
+        <CodeTextInput height="calc(min(60vh, 512px))" language={format} lineWrapping={false} value={content} readOnly />
       </Form.Item>
     </Form>
   );

ui/src/components/workflow/WorkflowGraphImportInputBox.tsx

@@ -5,7 +5,7 @@ import { createSchemaFieldRule } from "antd-zod";
 import { parse as parseYaml } from "yaml";
 import { z } from "zod";
 
-import CodeInput from "@/components/CodeInput";
+import CodeTextInput from "@/components/CodeTextInput";
 import { WORKFLOW_NODE_TYPES, type WorkflowGraph, type WorkflowNode, type WorkflowNodeType } from "@/domain/workflow";
 import { useAntdForm } from "@/hooks";
 
@@ -236,7 +236,7 @@ const WorkflowGraphImportInputBox = forwardRef<WorkflowGraphImportInputBoxInstan
       </Form.Item>
 
       <Form.Item name="content" label={t("workflow.detail.design.action.import.form.content.label")} rules={[formRule]}>
-        <CodeInput height="calc(min(60vh, 512px))" language={fieldFormat} value={fieldContent} />
+        <CodeTextInput height="calc(min(60vh, 512px))" language={fieldFormat} lineWrapping={false} value={fieldContent} />
       </Form.Item>
     </Form>
   );

ui/src/components/workflow/designer/forms/BizApplyNodeConfigForm.tsx

@@ -16,7 +16,7 @@ import ACMEDns01ProviderSelect from "@/components/provider/ACMEDns01ProviderSele
 import ACMEHttp01ProviderSelect from "@/components/provider/ACMEHttp01ProviderSelect";
 import CAProviderSelect from "@/components/provider/CAProviderSelect";
 import Show from "@/components/Show";
-import TextFileInput from "@/components/TextFileInput";
+import FileTextInput from "@/components/FileTextInput";
 import { type AccessModel } from "@/domain/access";
 import { acmeDns01ProvidersMap, acmeHttp01ProvidersMap, caProvidersMap } from "@/domain/provider";
 import { type WorkflowNodeConfigForBizApply, defaultNodeConfigForBizApply } from "@/domain/workflow";
@@ -432,7 +432,7 @@ const BizApplyNodeConfigForm = ({ node, ...props }: BizApplyNodeConfigFormProps)
 
           <Show when={fieldKeySource === KEY_SOURCE_CUSTOM}>
             <Form.Item name="keyContent" label={t("workflow_node.apply.form.key_content.label")} rules={[formRule]}>
-              <TextFileInput
+              <FileTextInput
                 autoSize={{ minRows: 3, maxRows: 10 }}
                 placeholder={t("workflow_node.apply.form.key_content.placeholder")}
                 onChange={handleKeyContentChange}

ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderKubernetesSecret.tsx

@@ -3,7 +3,7 @@ import { Form, Input } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import CodeInput from "@/components/CodeInput";
+import CodeTextInput from "@/components/CodeTextInput";
 
 import { useFormNestedFieldsContext } from "./_context";
 
@@ -92,7 +92,8 @@ const BizDeployNodeConfigFieldsProviderKubernetesSecret = () => {
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.k8s_secret_annotations.tooltip") }}></span>}
       >
-        <CodeInput
+        <CodeTextInput
+          lineWrapping={false}
           height="auto"
           minHeight="64px"
           maxHeight="256px"
@@ -109,7 +110,8 @@ const BizDeployNodeConfigFieldsProviderKubernetesSecret = () => {
         rules={[formRule]}
         tooltip={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.deploy.form.k8s_secret_labels.tooltip") }}></span>}
       >
-        <CodeInput
+        <CodeTextInput
+          lineWrapping={false}
           height="auto"
           minHeight="64px"
           maxHeight="256px"

ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderLocal.tsx

@@ -4,7 +4,7 @@ import { Button, Divider, Form, Input, Popover, Select, Space } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import CodeInput from "@/components/CodeInput";
+import CodeTextInput from "@/components/CodeTextInput";
 import PresetScriptTemplatesPopselect from "@/components/preset/PresetScriptTemplatesPopselect";
 import Show from "@/components/Show";
 import Tips from "@/components/Tips";
@@ -76,7 +76,7 @@ Import-Module WebAdministration
 # 检查是否已存在 HTTPS 绑定
 $existingBinding = Get-WebBinding -Name "$siteName" -Protocol "https" -Port $port -HostHeader "$domain" -ErrorAction SilentlyContinue
 if (!$existingBinding) {
-    # 添加新的 HTTPS 绑定
+  # 添加新的 HTTPS 绑定
   New-WebBinding -Name "$siteName" -Protocol "https" -Port $port -IPAddress "$ipaddr" -HostHeader "$domain"
 }
 # 获取绑定对象
@@ -361,7 +361,7 @@ const BizDeployNodeConfigFieldsProviderLocal = () => {
           </PresetScriptTemplatesPopselect>
         </div>
         <Form.Item name={[parentNamePath, "preCommand"]} initialValue={initialValues.preCommand} noStyle rules={[formRule]}>
-          <CodeInput
+          <CodeTextInput
             height="auto"
             minHeight="64px"
             maxHeight="256px"
@@ -402,7 +402,7 @@ const BizDeployNodeConfigFieldsProviderLocal = () => {
           </Space>
         </div>
         <Form.Item name={[parentNamePath, "postCommand"]} initialValue={initialValues.postCommand} noStyle rules={[formRule]}>
-          <CodeInput
+          <CodeTextInput
             height="auto"
             minHeight="64px"
             maxHeight="256px"

ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderSSH.tsx

@@ -4,7 +4,7 @@ import { Button, Divider, Form, Input, Popover, Select, Space, Switch } from "an
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import CodeInput from "@/components/CodeInput";
+import CodeTextInput from "@/components/CodeTextInput";
 import PresetScriptTemplatesPopselect from "@/components/preset/PresetScriptTemplatesPopselect";
 import Show from "@/components/Show";
 import { CERTIFICATE_FORMATS } from "@/domain/certificate";
@@ -396,7 +396,7 @@ const BizDeployNodeConfigFieldsProviderSSH = () => {
           </PresetScriptTemplatesPopselect>
         </div>
         <Form.Item name={[parentNamePath, "preCommand"]} initialValue={initialValues.preCommand} noStyle rules={[formRule]}>
-          <CodeInput
+          <CodeTextInput
             height="auto"
             minHeight="64px"
             maxHeight="256px"
@@ -444,7 +444,7 @@ const BizDeployNodeConfigFieldsProviderSSH = () => {
           </Space>
         </div>
         <Form.Item name={[parentNamePath, "postCommand"]} initialValue={initialValues.postCommand} noStyle rules={[formRule]}>
-          <CodeInput
+          <CodeTextInput
             height="auto"
             minHeight="64px"
             maxHeight="256px"

ui/src/components/workflow/designer/forms/BizDeployNodeConfigFieldsProviderWebhook.tsx

@@ -4,7 +4,7 @@ import { Button, Form, Input, Popover } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import CodeInput from "@/components/CodeInput";
+import CodeTextInput from "@/components/CodeTextInput";
 
 import { useFormNestedFieldsContext } from "./_context";
 
@@ -40,7 +40,8 @@ const BizDeployNodeConfigFieldsProviderWebhook = () => {
           </Popover>
         </div>
         <Form.Item name={[parentNamePath, "webhookData"]} initialValue={initialValues.webhookData} noStyle rules={[formRule]}>
-          <CodeInput
+          <CodeTextInput
+            lineWrapping={false}
             height="auto"
             minHeight="64px"
             maxHeight="256px"

ui/src/components/workflow/designer/forms/BizNotifyNodeConfigFieldsProviderWebhook.tsx

@@ -4,7 +4,7 @@ import { Button, Form, Input, Popover } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
-import CodeInput from "@/components/CodeInput";
+import CodeTextInput from "@/components/CodeTextInput";
 
 import { useFormNestedFieldsContext } from "./_context";
 
@@ -40,7 +40,8 @@ const BizNotifyNodeConfigFieldsProviderWebhook = () => {
           </Popover>
         </div>
         <Form.Item name={[parentNamePath, "webhookData"]} initialValue={initialValues.webhookData} noStyle rules={[formRule]}>
-          <CodeInput
+          <CodeTextInput
+            lineWrapping={false}
             height="auto"
             minHeight="64px"
             maxHeight="256px"

ui/src/components/workflow/designer/forms/BizUploadNodeConfigForm.tsx

@@ -7,7 +7,7 @@ import { z } from "zod";
 
 import { validateCertificate, validatePrivateKey } from "@/api/certificates";
 import Show from "@/components/Show";
-import TextFileInput from "@/components/TextFileInput";
+import FileTextInput from "@/components/FileTextInput";
 import Tips from "@/components/Tips";
 import { type WorkflowNodeConfigForBizUpload, defaultNodeConfigForBizUpload } from "@/domain/workflow";
 import { useAntdForm } from "@/hooks";
@@ -124,7 +124,7 @@ const BizUploadNodeConfigForm = ({ node, ...props }: BizUploadNodeConfigFormProp
             </Form.Item>
 
             <Form.Item name="certificate" label={t("workflow_node.upload.form.certificate_pem.label")} rules={[formRule]}>
-              <TextFileInput
+              <FileTextInput
                 autoSize={{ minRows: 3, maxRows: 10 }}
                 placeholder={t("workflow_node.upload.form.certificate_pem.placeholder")}
                 onChange={handleCertificatePEMChange}
@@ -132,7 +132,7 @@ const BizUploadNodeConfigForm = ({ node, ...props }: BizUploadNodeConfigFormProp
             </Form.Item>
 
             <Form.Item name="privateKey" label={t("workflow_node.upload.form.private_key_pem.label")} rules={[formRule]}>
-              <TextFileInput
+              <FileTextInput
                 autoSize={{ minRows: 3, maxRows: 10 }}
                 placeholder={t("workflow_node.upload.form.private_key_pem.placeholder")}
                 onChange={handlePrivateKeyPEMChange}

ui/src/pages/presets/PresetListScriptTemplates.tsx

@@ -8,7 +8,7 @@ import { nanoid } from "nanoid/non-secure";
 import { ClientResponseError } from "pocketbase";
 import { z } from "zod";
 
-import CodeInput from "@/components/CodeInput";
+import CodeTextInput from "@/components/CodeTextInput";
 import DrawerForm from "@/components/DrawerForm";
 import Tips from "@/components/Tips";
 import { useAntdForm, useZustandShallowSelector } from "@/hooks";
@@ -324,7 +324,7 @@ const InternalEditDrawer = ({
       </Form.Item>
 
       <Form.Item name="command" label={t("preset.form.script_command.label")} rules={[formRule]}>
-        <CodeInput height="auto" minHeight="256px" language={["shell", "powershell"]} placeholder={t("preset.form.script_command.placeholder")} />
+        <CodeTextInput height="auto" minHeight="256px" language={["shell", "powershell"]} placeholder={t("preset.form.script_command.placeholder")} />
       </Form.Item>
     </DrawerForm>
   );