feat(ui): new CertificateDetail UI using antd

ui/src/components/certificate/CertificateDetail.tsx

@@ -1,64 +1,74 @@
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet";
-
-import { Certificate } from "@/domain/certificate";
-import { Textarea } from "../ui/textarea";
-import { Button } from "../ui/button";
-import { Label } from "../ui/label";
-import { CustomFile, saveFiles2ZIP } from "@/lib/file";
 import { useTranslation } from "react-i18next";
+import { Button, Form, Input, Tooltip } from "antd";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { Clipboard as ClipboardIcon } from "lucide-react";
 
-type WorkflowLogDetailProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  certificate?: Certificate;
+import { type Certificate } from "@/domain/certificate";
+import { saveFiles2Zip } from "@/lib/file";
+
+type CertificateDetailProps = {
+  data: Certificate;
 };
-const CertificateDetail = ({ open, onOpenChange, certificate }: WorkflowLogDetailProps) => {
+
+const CertificateDetail = ({ data }: CertificateDetailProps) => {
   const { t } = useTranslation();
+
   const handleDownloadClick = async () => {
-    const zipName = `${certificate?.id}-${certificate?.san}.zip`;
-    const files: CustomFile[] = [
+    // TODO: 支持下载多种格式
+    const zipName = `${data.id}-${data.san}.zip`;
+    const files = [
       {
-        name: `${certificate?.san}.pem`,
-        content: certificate?.certificate ? certificate?.certificate : "",
+        name: `${data.san}.pem`,
+        content: data.certificate ?? "",
       },
       {
-        name: `${certificate?.san}.key`,
-        content: certificate?.privateKey ? certificate?.privateKey : "",
+        name: `${data.san}.key`,
+        content: data.privateKey ?? "",
       },
     ];
 
-    await saveFiles2ZIP(zipName, files);
+    await saveFiles2Zip(zipName, files);
   };
 
   return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="sm:max-w-2xl dark:text-stone-200">
-        <SheetHeader>
-          <SheetTitle></SheetTitle>
-        </SheetHeader>
+    <div>
+      <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}>
+                <Button type="text" icon={<ClipboardIcon size={14} />}></Button>
+              </CopyToClipboard>
+            </Tooltip>
+          </div>
+          <Input.TextArea value={data.certificate} rows={10} autoSize={{ maxRows: 10 }} readOnly />
+        </Form.Item>
 
-        <div className="flex flex-col space-y-5 mt-9">
-          <div className="flex justify-end">
-            <Button
-              size={"sm"}
-              onClick={() => {
-                handleDownloadClick();
-              }}
-            >
-              {t("certificate.action.download")}
-            </Button>
+        <Form.Item>
+          <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}>
+                <Button type="text" icon={<ClipboardIcon size={14} />}></Button>
+              </CopyToClipboard>
+            </Tooltip>
           </div>
-          <div className="flex flex-col space-y-3">
-            <Label>{t("certificate.props.certificate")}</Label>
-            <Textarea value={certificate?.certificate} rows={10} readOnly={true} />
-          </div>
-          <div className="flex flex-col space-y-3">
-            <Label>{t("certificate.props.private_key")}</Label>
-            <Textarea value={certificate?.privateKey} rows={10} readOnly={true} />
-          </div>
-        </div>
-      </SheetContent>
-    </Sheet>
+          <Input.TextArea value={data.privateKey} rows={10} autoSize={{ maxRows: 10 }} readOnly />
+        </Form.Item>
+      </Form>
+
+      <div className="flex items-center justify-end">
+        <Button
+          type="primary"
+          onClick={() => {
+            handleDownloadClick();
+          }}
+        >
+          {t("certificate.action.download")}
+        </Button>
+      </div>
+    </div>
   );
 };
 

ui/src/components/certificate/CertificateDetailDrawer.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+import { Drawer } from "antd";
+
+import { type Certificate } from "@/domain/certificate";
+import CertificateDetail from "./CertificateDetail";
+
+type CertificateDetailDrawerProps = {
+  data?: Certificate;
+  open?: boolean;
+  onClose?: () => void;
+};
+
+const CertificateDetailDrawer = ({ data, open, onClose }: CertificateDetailDrawerProps) => {
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setLoading(data == null);
+  }, [data]);
+
+  return (
+    <Drawer closable destroyOnClose open={open} loading={loading} placement="right" width={480} onClose={onClose}>
+      {data ? <CertificateDetail data={data} /> : <></>}
+    </Drawer>
+  );
+};
+
+export default CertificateDetailDrawer;

ui/src/components/certificate/CertificateList.tsx

@@ -1,4 +1,4 @@
-import CertificateDetail from "@/components/certificate/CertificateDetail";
+import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
 import { Button } from "@/components/ui/button";
 import { DataTable } from "@/components/workflow/DataTable";
 import { Certificate as CertificateType } from "@/domain/certificate";
@@ -163,7 +163,7 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
         }
       />
 
-      <CertificateDetail open={open} onOpenChange={setOpen} certificate={selectedCertificate} />
+      <CertificateDetailDrawer data={selectedCertificate} open={open} onClose={() => setOpen(false)} />
     </>
   );
 };