From 41a1f17d6a3341d56fa8a098be781295f8dd4465 Mon Sep 17 00:00:00 2001 From: lk Date: Wed, 4 Sep 2024 18:10:02 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=81=E4=B9=A6=E7=9B=B8=E5=85=B3UI=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/websites/cert/apply.tsx | 422 +++++++++++++++++++++++--------------- 1 file changed, 255 insertions(+), 167 deletions(-) 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 ( + + ); + }, }, { //主机记录 @@ -162,7 +177,11 @@ const StatusTable = (props: { value: string }) => { dataIndex: "record_value", width: 200, render: (text) => { - return ; + return ( + + ); }, }, ] 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 ( - -
{ - // console.log('onValuesChange', values) - if (values.domains) { - // setDomains(values.domains) - } - }} - onFinish={async (values) => { - if (dnsVerifyOK) { - saveOrUpdate(values); - } - }} + +
+ +
+ { + // console.log('onValuesChange', values) + if (values.domains) { + // setDomains(values.domains) + } + }} + onFinish={async (values) => { + if (dnsVerifyOK) { + saveOrUpdate(values); + } + }} + > + {/* */} + {/* */} + {/**/} + {/* {t(`${i18nPrefix}.apply.remaining`, "剩余5张")}*/} + {/* / {t(`${i18nPrefix}.apply.total`, "共5张")}*/} + {/**/} + {/* */} + {/* */} + {/* */} + + + + {currentStep !== 0 && ( + <> + - {/* */} - {/* */} - {/**/} - {/* {t(`${i18nPrefix}.apply.remaining`, "剩余5张")}*/} - {/* / {t(`${i18nPrefix}.apply.total`, "共5张")}*/} - {/**/} - {/* */} - {/* */} - {/* */} - - { - setDomains(e.target.value); - }} - /> - - - - - - - - - - - - - - - - - - + + + + + + + + + + + )} + + + {currentStep !== 0 && ( + + )} + + {currentStep === 0 && ( + + )} + + {currentStep !== 0 && ( + + )} + + + + ); }; -export default Apply; \ No newline at end of file +export default Apply;