fix: tsc build error

2025-10-05 05:54:53 +00:00 · 2025-05-20 22:31:42 +08:00
parent d81a33f24a
commit 9d9ca88ebe
6 changed files with 111 additions and 92 deletions
--- a/ui/src/components/access/AccessFormSSHConfig.tsx
+++ b/ui/src/components/access/AccessFormSSHConfig.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import { ArrowDownOutlined, ArrowUpOutlined, CloseOutlined, PlusOutlined } from "@ant-design/icons";
 import { Button, Collapse, Form, type FormInstance, Input, InputNumber, Space } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
@@ -6,7 +7,6 @@ import { z } from "zod";
 import TextFileInput from "@/components/TextFileInput";
 import { type AccessConfigForSSH } from "@/domain/access";
 import { validDomainName, validIPv4Address, validIPv6Address, validPortNumber } from "@/utils/validators";
-import { ArrowDownOutlined, ArrowUpOutlined, CloseOutlined, PlusOutlined } from "@ant-design/icons";

 type AccessFormSSHConfigFieldValues = Nullish<AccessConfigForSSH>;

@@ -29,42 +29,6 @@ const initFormModel = (): AccessFormSSHConfigFieldValues => {
 const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues, onValuesChange }: AccessFormSSHConfigProps) => {
  const { t } = useTranslation();

-  const jumpServerConfigItemSchema = z
-    .object({
-      host: z.string().refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
-      port: z.preprocess(
-        (v) => Number(v),
-        z
-          .number()
-          .int(t("access.form.ssh_port.placeholder"))
-          .refine((v) => validPortNumber(v), t("common.errmsg.port_invalid"))
-      ),
-      username: z
-        .string()
-        .min(1, t("access.form.ssh_username.placeholder"))
-        .max(64, t("common.errmsg.string_max", { max: 64 })),
-      password: z
-        .string()
-        .max(64, t("common.errmsg.string_max", { max: 64 }))
-        .nullish(),
-      key: z
-        .string()
-        .max(20480, t("common.errmsg.string_max", { max: 20480 }))
-        .nullish(),
-      keyPassphrase: z
-        .string()
-        .max(20480, t("common.errmsg.string_max", { max: 20480 }))
-        .nullish(),
-    })
-    .superRefine((data, ctx) => {
-      if (data.keyPassphrase && !data.key) {
-        ctx.addIssue({
-          path: ["keyPassphrase"],
-          code: z.ZodIssueCode.custom,
-          message: t("access.form.ssh_key.placeholder"),
-        });
-      }
-    });
  const formSchema = z.object({
    host: z.string().refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
    port: z.preprocess(
@@ -91,7 +55,46 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
      .max(20480, t("common.errmsg.string_max", { max: 20480 }))
      .nullish()
      .refine((v) => !v || formInst.getFieldValue("key"), t("access.form.ssh_key.placeholder")),
-    jumpServerConfig: jumpServerConfigItemSchema.array().nullish(),
+    jumpServers: z
+      .array(
+        z
+          .object({
+            host: z.string().refine((v) => validDomainName(v) || validIPv4Address(v) || validIPv6Address(v), t("common.errmsg.host_invalid")),
+            port: z.preprocess(
+              (v) => Number(v),
+              z
+                .number()
+                .int(t("access.form.ssh_port.placeholder"))
+                .refine((v) => validPortNumber(v), t("common.errmsg.port_invalid"))
+            ),
+            username: z
+              .string()
+              .min(1, t("access.form.ssh_username.placeholder"))
+              .max(64, t("common.errmsg.string_max", { max: 64 })),
+            password: z
+              .string()
+              .max(64, t("common.errmsg.string_max", { max: 64 }))
+              .nullish(),
+            key: z
+              .string()
+              .max(20480, t("common.errmsg.string_max", { max: 20480 }))
+              .nullish(),
+            keyPassphrase: z
+              .string()
+              .max(20480, t("common.errmsg.string_max", { max: 20480 }))
+              .nullish(),
+          })
+          .superRefine((data, ctx) => {
+            if (data.keyPassphrase && !data.key) {
+              ctx.addIssue({
+                path: ["keyPassphrase"],
+                code: z.ZodIssueCode.custom,
+                message: t("access.form.ssh_key.placeholder"),
+              });
+            }
+          })
+      )
+      .nullish(),
  });
  const formRule = createSchemaFieldRule(formSchema);

@@ -153,49 +156,63 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
        <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.ssh_key_passphrase.placeholder")} />
      </Form.Item>

-      <Form.Item
-        label={t("access.form.ssh_jump_server_config.label")}
-        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ssh_jump_server_config.tooltip") }}></span>}
-      >
-        <Form.List name="jumpServerConfig">
+      <Form.Item name="jumpServers" label={t("access.form.ssh_jump_servers.label")} rules={[formRule]}>
+        <Form.List name="jumpServers">
          {(fields, { add, remove, move }) => (
            <Space className="w-full" direction="vertical" size="small">
              {fields?.length > 0 ? (
                <Collapse
                  items={fields.map((field, index) => {
                    const Label = () => {
-                      const itemHost = Form.useWatch(["jumpServerConfig", field.name, "host"], formInst);
+                      const host = Form.useWatch(["jumpServers", field.name, "host"], formInst);
+                      const port = Form.useWatch(["jumpServers", field.name, "port"], formInst);
+                      const addr = !!host && !!port ? `${host}:${port}` : host ? host : port ? `:${port}` : "unknown";
                      return (
-                        <span style={{ userSelect: "none" }}>
-                          [{t("access.form.ssh_jump_server_config.item.label")} {field.name + 1}] {itemHost ?? ""}
+                        <span className="select-none">
+                          [{t("access.form.ssh_jump_servers.item.label")} {field.name + 1}] {addr}
                        </span>
                      );
                    };

                    return {
                      key: field.key,
-                      label: <Label />, // 这里用组件渲染
+                      label: <Label />,
                      extra: (
-                        <Space>
-                          <ArrowUpOutlined
+                        <Space.Compact>
+                          <Button
+                            icon={<ArrowUpOutlined />}
+                            color="default"
+                            disabled={disabled || index === 0}
+                            size="small"
+                            type="text"
                            onClick={(e) => {
                              move(index, index - 1);
                              e.stopPropagation();
                            }}
                          />
-                          <ArrowDownOutlined
+                          <Button
+                            icon={<ArrowDownOutlined />}
+                            color="default"
+                            disabled={disabled || index === fields.length - 1}
+                            size="small"
+                            type="text"
                            onClick={(e) => {
                              move(index, index + 1);
                              e.stopPropagation();
                            }}
                          />
-                          <CloseOutlined
+                          <Button
+                            icon={<CloseOutlined />}
+                            color="default"
+                            disabled={disabled}
+                            size="small"
+                            type="text"
                            onClick={(e) => {
                              remove(field.name);
                              e.stopPropagation();
                            }}
                          />
-                        </Space>
+                        </Space.Compact>
                      ),
                      children: (
                        <>
@@ -211,9 +228,11 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
                              </Form.Item>
                            </div>
                          </div>
+
                          <Form.Item name={[field.name, "username"]} label={t("access.form.ssh_username.label")} rules={[formRule]}>
                            <Input autoComplete="new-password" placeholder={t("access.form.ssh_username.placeholder")} />
                          </Form.Item>
+
                          <Form.Item
                            name={[field.name, "password"]}
                            label={t("access.form.ssh_password.label")}
@@ -222,6 +241,7 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
                          >
                            <Input.Password allowClear autoComplete="new-password" placeholder={t("access.form.ssh_password.placeholder")} />
                          </Form.Item>
+
                          <Form.Item
                            name={[field.name, "key"]}
                            label={t("access.form.ssh_key.label")}
@@ -230,6 +250,7 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
                          >
                            <TextFileInput allowClear autoSize={{ minRows: 1, maxRows: 5 }} placeholder={t("access.form.ssh_key.placeholder")} />
                          </Form.Item>
+
                          <Form.Item
                            name={[field.name, "keyPassphrase"]}
                            label={t("access.form.ssh_key_passphrase.label")}
@@ -245,7 +266,7 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
                />
              ) : null}
              <Button type="dashed" className="w-full" icon={<PlusOutlined />} onClick={() => add()}>
-                {t("access.form.ssh_jump_server_config.add")}
+                {t("access.form.ssh_jump_servers.add")}
              </Button>
            </Space>
          )}
@@ -256,4 +277,3 @@ const AccessFormSSHConfig = ({ form: formInst, formName, disabled, initialValues
 };

 export default AccessFormSSHConfig;
-
--- a/ui/src/i18n/locales/en/nls.access.json
+++ b/ui/src/i18n/locales/en/nls.access.json
@@ -392,10 +392,9 @@
  "access.form.ssh_key_passphrase.label": "SSH key passphrase (Optional)",
  "access.form.ssh_key_passphrase.placeholder": "Please enter SSH key passphrase",
  "access.form.ssh_key_passphrase.tooltip": "Optional when using key to connect to SSH.",
-  "access.form.ssh_jump_server_config.label": "SSH jump server (Optional)",
-  "access.form.ssh_jump_server_config.tooltip": "Optional when using a jump server to connect to the server.",
-  "access.form.ssh_jump_server_config.item.label": "Jump Server",
-  "access.form.ssh_jump_server_config.add": "Add Jump Server",
+  "access.form.ssh_jump_servers.label": "SSH jump server (Optional)",
+  "access.form.ssh_jump_servers.item.label": "Jump server",
+  "access.form.ssh_jump_servers.add": "Add jump server",
  "access.form.sslcom_eab_kid.label": "ACME EAB KID",
  "access.form.sslcom_eab_kid.placeholder": "Please enter ACME EAB KID",
  "access.form.sslcom_eab_kid.tooltip": "For more information, see <a href=\"https://www.ssl.com/how-to/generate-acme-credentials-for-reseller-customers/#ftoc-heading-6\" target=\"_blank\">https://www.ssl.com/how-to/generate-acme-credentials-for-reseller-customers/</a>",
--- a/ui/src/i18n/locales/zh/nls.access.json
+++ b/ui/src/i18n/locales/zh/nls.access.json
@@ -386,10 +386,9 @@
  "access.form.ssh_key_passphrase.label": "SSH 密钥口令（可选）",
  "access.form.ssh_key_passphrase.placeholder": "请输入 SSH 密钥口令",
  "access.form.ssh_key_passphrase.tooltip": "使用 SSH 密钥连接到 SSH 时选填。",
-  "access.form.ssh_jump_server_config.label": "SSH 跳板机（可选）",
-  "access.form.ssh_jump_server_config.tooltip": "使用跳板机连接到服务器时选填。",
-  "access.form.ssh_jump_server_config.item.label": "跳板机",
-  "access.form.ssh_jump_server_config.add": "添加跳板机",
+  "access.form.ssh_jump_servers.label": "SSH 跳板机（可选）",
+  "access.form.ssh_jump_servers.item.label": "跳板机",
+  "access.form.ssh_jump_servers.add": "添加跳板机",
  "access.form.sslcom_eab_kid.label": "ACME EAB KID",
  "access.form.sslcom_eab_kid.placeholder": "请输入 ACME EAB KID",
  "access.form.sslcom_eab_kid.tooltip": "这是什么？请参阅 <a href=\"https://www.ssl.com/how-to/generate-acme-credentials-for-reseller-customers/#ftoc-heading-6\" target=\"_blank\">https://www.ssl.com/how-to/generate-acme-credentials-for-reseller-customers/</a>",