diff --git a/src/pages/websites/cert/apply.tsx b/src/pages/websites/cert/apply.tsx
index 5a271d5..b38d80a 100644
--- a/src/pages/websites/cert/apply.tsx
+++ b/src/pages/websites/cert/apply.tsx
@@ -7,8 +7,8 @@ import {
dnsVerifyOKAtom,
saveOrUpdateCertAtom,
} from "@/store/websites/cert.ts";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button, Flex, Form, Input, Progress, Select, Space, Table, Tooltip } from "antd";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {Button, Flex, Form, Input, message, Progress, Radio, Select, Space, Steps, Table, Tooltip} from "antd";
import google from "@/pages/websites/cert/assets/google.png";
import zerossl from "@/pages/websites/cert/assets/zerossl.png";
import lets_encrypt from "@/pages/websites/cert/assets/lets_encrypt.png";
@@ -17,7 +17,7 @@ import ListPageLayout from "@/layout/ListPageLayout.tsx";
import { ColumnsType } from "antd/es/table";
import { atomWithStorage } from "jotai/utils";
import Copy from "@/components/copy";
-import { InfoCircleOutlined, LoadingOutlined } from "@ant-design/icons";
+import { CopyOutlined, InfoCircleOutlined, LoadingOutlined } from "@ant-design/icons";
const i18nPrefix = "cert.apply";
@@ -34,45 +34,45 @@ const BrandSelect = (props: any) => {
}, []);
return (
- <>
-
- onChange("Google")}
- className={cx("band-normal", {
- "band-active": value === "Google",
- })}
- >
-
- Google Trust Services
-
- onChange("ZeroSSL")}
- className={cx("band-normal", {
- "band-active": value === "ZeroSSL",
- })}
- >
-
- ZeroSSL
-
- onChange("Let's Encrypt")}
- className={cx("band-normal", {
- "band-active": value === "Let's Encrypt",
- })}
- >
-
- Let's Encrypt
-
-
- >
+ <>
+
+ onChange("Google")}
+ className={cx("band-normal", {
+ "band-active": value === "Google" || !props.value,
+ })}
+ >
+
+ Google Trust Services
+
+ onChange("ZeroSSL")}
+ className={cx("band-normal", {
+ "band-active": value === "ZeroSSL",
+ })}
+ >
+
+ ZeroSSL
+
+ onChange("Let's Encrypt")}
+ className={cx("band-normal", {
+ "band-active": value === "Let's Encrypt",
+ })}
+ >
+
+ Let's Encrypt
+
+
+ >
);
};
const StatusTable = (props: { value: string }) => {
- const [data, setData] = useState(null); // 临时状态来存储模拟数据
+ const [data, setData] = useState(null); // 临时状态来存储模拟数据
const { isFetching } = useAtomValue(useMemo(() => dnsConfigAtom(props.value), [props.value]));
const {
@@ -85,16 +85,24 @@ const StatusTable = (props: { value: string }) => {
const timerRef = useRef();
+ const handleCopy = (str:string) => {
+ navigator.clipboard.writeText(str).then(() => {
+ message.info('复制成功!');
+ }).catch(err => {
+ message.info(err);
+ });
+ };
+
const columns = useMemo(() => {
return [
{
title: (
- <>
- {t(`${i18nPrefix}.status.columns.status`, "状态")}
-
-
- {" "}
- >
+ <>
+ {t(`${i18nPrefix}.status.columns.status`, "状态")}
+
+
+ {" "}
+ >
),
dataIndex: "status",
width: 100,
@@ -106,9 +114,9 @@ const StatusTable = (props: { value: string }) => {
if (isVerifyFetching) {
//0,等待 1,域名OK,2,域名分析错误,3:检测中 4:检测成功,匹配失败 5:检测失败,9:检测成功
return (
-
+
- {t(`${i18nPrefix}.actions.dnsVerifyStatus.3`, "检测中")}
+ {t(`${i18nPrefix}.actions.dnsVerifyStatus.3`, "检测中")}
);
}
@@ -127,9 +135,9 @@ const StatusTable = (props: { value: string }) => {
width: 150,
render(text) {
if (text) {
- return {text};
+ return {text};
}
- return 未知;
+ return 未知;
},
},
{
@@ -137,6 +145,13 @@ const StatusTable = (props: { value: string }) => {
title: t(`${i18nPrefix}.status.columns.domain`, "域名"),
dataIndex: "dns_name",
width: 200,
+ render(text) {
+ return (
+ } iconPosition={"end"} onClick={() => handleCopy(text)}>
+ {text}
+
+ );
+ },
},
{
//主机记录
@@ -162,7 +177,11 @@ const StatusTable = (props: { value: string }) => {
dataIndex: "record_value",
width: 200,
render: (text) => {
- return ;
+ return (
+ } iconPosition={"end"} onClick={() => handleCopy(text)}>
+ {t(`actions.clickCopy`)}
+
+ );
},
},
] as ColumnsType;
@@ -178,7 +197,7 @@ const StatusTable = (props: { value: string }) => {
dns_name: "example.com",
host: "example",
type: "A",
- record_value: "192.168.1.1"
+ record_value: "192.168.1.1",
},
{
status: 3,
@@ -186,9 +205,9 @@ const StatusTable = (props: { value: string }) => {
dns_name: "another.com",
host: "another",
type: "CNAME",
- record_value: "cname.another.com"
- }
- ]
+ record_value: "cname.another.com",
+ },
+ ],
};
setData(mockData);
@@ -217,24 +236,62 @@ const StatusTable = (props: { value: string }) => {
}, [dnsVerifyStatus, isVerifyFetching]);
return (
- <>
-
-
- 请您添加以下DNS解析记录
-
-
-
1. 只需要添加一次即可,添加后请勿删除记录。
-
2. 耐心等待1~2分钟。
-
-
- >
+ <>
+
+
+ 请您添加以下DNS解析记录
+
+
+
1. 只需要添加一次即可,添加后请勿删除记录。
+
2. 耐心等待1~2分钟。
+
+
+ >
+ );
+};
+
+const DomainsInput = (props: { setDomains; currentDomainMod; setCurrentDomainMod; currentStep }) => {
+ return (
+
+ props.setCurrentDomainMod(e.target.value)}
+ >
+
+ 单证书申请
+
+
+ 多证书申请
+
+
+ {props.currentDomainMod === "single" && (
+
+ )}
+ {props.currentDomainMod === "multiple" && (
+ {
+ props.setDomains(e.target.value);
+ }}
+ />
+ )}
+
);
};
@@ -245,6 +302,8 @@ const Apply = () => {
const [form] = Form.useForm();
const { mutate: saveOrUpdate, isPending: isSubmitting } = useAtomValue(saveOrUpdateCertAtom);
const [domains, setDomains] = useAtom(domainsAtom);
+ const [currentStep, setCurrentStep] = useState(0);
+ const [currentDomainMod, setCurrentDomainMod] = useState<"single" | "multiple">("single");
const dnsVerifyOK = useAtomValue(dnsVerifyOKAtom);
useEffect(() => {
@@ -256,103 +315,132 @@ const Apply = () => {
}, [domains]);
return (
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ )}
+
+
+ {currentStep !== 0 && (
+
+ )}
+
+ {currentStep === 0 && (
+
+ )}
+
+ {currentStep !== 0 && (
+
+ )}
+
+
+
+
);
};
-export default Apply;
\ No newline at end of file
+export default Apply;