feat(ui): new CertificateDetail UI using antd

ui/src/pages/ConsoleLayout.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Button, Dropdown, Layout, Menu, Tooltip, theme, type ButtonProps, type MenuProps } from "antd";
@@ -54,7 +54,7 @@ const ConsoleLayout = () => {
       onClick: () => navigate("/accesses"),
     },
   ];
-  const [menuSelectedKey, setMenuSelectedKey] = useState<string | null>(null);
+  const [menuSelectedKey, setMenuSelectedKey] = useState<string>();
 
   useEffect(() => {
     const item =
@@ -64,7 +64,7 @@ const ConsoleLayout = () => {
     if (item) {
       setMenuSelectedKey(item.key as string);
     } else {
-      setMenuSelectedKey(null);
+      setMenuSelectedKey(undefined);
     }
   }, [location.pathname]);
 

ui/src/pages/certificates/CertificateList.tsx

@@ -6,6 +6,7 @@ import { PageHeader } from "@ant-design/pro-components";
 import { Eye as EyeIcon } from "lucide-react";
 import moment from "moment";
 
+import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
 import { Certificate as CertificateType } from "@/domain/certificate";
 import { list as listCertificate, type CertificateListReq } from "@/repository/certificate";
 import { diffDays, getLeftDays } from "@/lib/time";
@@ -73,7 +74,7 @@ const CertificateList = () => {
             </Typography.Link>
           </Space>
         ) : (
-          <>TODO: 手动上传</>
+          <>TODO: 支持手动上传</>
         );
       },
     },
@@ -105,8 +106,7 @@ const CertificateList = () => {
               type="link"
               icon={<EyeIcon size={16} />}
               onClick={() => {
-                // TODO: 查看证书详情
-                alert("TODO");
+                handleViewClick(record);
               }}
             />
           </Tooltip>
@@ -146,6 +146,14 @@ const CertificateList = () => {
     fetchTableData();
   }, [page, pageSize]);
 
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [currentRecord, setCurrentRecord] = useState<CertificateType>();
+
+  const handleViewClick = (certificate: CertificateType) => {
+    setDrawerOpen(true);
+    setCurrentRecord(certificate);
+  };
+
   // TODO: Empty 样式
   // TODO: 响应式表格
 
@@ -172,6 +180,15 @@ const CertificateList = () => {
         }}
         rowKey={(record) => record.id}
       />
+
+      <CertificateDetailDrawer
+        data={currentRecord}
+        open={drawerOpen}
+        onClose={() => {
+          setDrawerOpen(false);
+          setCurrentRecord(undefined);
+        }}
+      />
     </>
   );
 };