feat(ui): copied to clipboard message

This commit is contained in:
Fu Diwei 2024-12-09 17:38:34 +08:00
parent 789c120fc9
commit 588e89e8fe
6 changed files with 26 additions and 11 deletions

View File

@ -1,5 +1,5 @@
import { useTranslation } from "react-i18next";
import { Button, Form, Input, Tooltip } from "antd";
import { Button, Form, Input, message, Tooltip } from "antd";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { Clipboard as ClipboardIcon } from "lucide-react";
@ -13,6 +13,8 @@ type CertificateDetailProps = {
const CertificateDetail = ({ data }: CertificateDetailProps) => {
const { t } = useTranslation();
const [messageApi, MessageContextHolder] = message.useMessage();
const handleDownloadClick = async () => {
// TODO: 支持下载多种格式
const zipName = `${data.id}-${data.san}.zip`;
@ -32,12 +34,19 @@ const CertificateDetail = ({ data }: CertificateDetailProps) => {
return (
<div>
{MessageContextHolder}
<Form layout="vertical">
<Form.Item>
<div className="flex items-center justify-between w-full mb-2">
<label className="font-medium">{t("certificate.props.certificate_chain")}</label>
<Tooltip title={t("common.copy")}>
<CopyToClipboard text={data.certificate}>
<CopyToClipboard
text={data.certificate}
onCopy={() => {
messageApi.success(t("common.copy.done"));
}}
>
<Button type="text" icon={<ClipboardIcon size={14} />}></Button>
</CopyToClipboard>
</Tooltip>
@ -49,7 +58,12 @@ const CertificateDetail = ({ data }: CertificateDetailProps) => {
<div className="flex items-center justify-between w-full mb-2">
<label className="font-medium">{t("certificate.props.private_key")}</label>
<Tooltip title={t("common.copy")}>
<CopyToClipboard text={data.privateKey}>
<CopyToClipboard
text={data.privateKey}
onCopy={() => {
messageApi.success(t("common.copy.done"));
}}
>
<Button type="text" icon={<ClipboardIcon size={14} />}></Button>
</CopyToClipboard>
</Tooltip>

View File

@ -1,3 +1,3 @@
import useTheme from "./use-theme";
import useTheme from "./useTheme";
export { useTheme };
export { useResponsive, useTheme };

View File

@ -1,6 +0,0 @@
import { useTheme } from "ahooks";
export default function () {
const { theme, themeMode, setThemeMode } = useTheme({ localStorageKey: "certimate-ui-theme" });
return { theme, themeMode, setThemeMode };
}

5
ui/src/hooks/useTheme.ts Normal file
View File

@ -0,0 +1,5 @@
import { useTheme } from "ahooks";
export default () => {
return useTheme({ localStorageKey: "certimate-ui-theme" });
};

View File

@ -6,6 +6,7 @@
"common.view": "View",
"common.edit": "Edit",
"common.copy": "Copy",
"common.copy.done": "Copied",
"common.download": "Download",
"common.delete": "Delete",
"common.delete.succeeded.message": "Delete Successful",

View File

@ -6,6 +6,7 @@
"common.view": "查看",
"common.edit": "编辑",
"common.copy": "复制",
"common.copy.done": "已复制",
"common.download": "下载",
"common.delete": "刪除",
"common.delete.succeeded.message": "删除成功",