feat(ui): copied to clipboard message

ui/src/components/certificate/CertificateDetail.tsx

@@ -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>

ui/src/hooks/index.ts

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

ui/src/hooks/use-theme.ts

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

ui/src/hooks/useTheme.ts

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

ui/src/i18n/locales/en/nls.common.json

@@ -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",

ui/src/i18n/locales/zh/nls.common.json

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