feat(ui): enhance certificate downloading

ui/src/components/certificate/CertificateDetail.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { Button, Form, Input, message, Tooltip } from "antd";
+import { Button, Dropdown, Form, Input, message, Space, Tooltip } from "antd";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Clipboard as ClipboardIcon } from "lucide-react";
+import { ChevronDown as ChevronDownIcon, Clipboard as ClipboardIcon, ThumbsUp as ThumbsUpIcon } from "lucide-react";
 
 import { type Certificate } from "@/domain/certificate";
 import { saveFiles2Zip } from "@/utils/file";
@@ -15,8 +15,7 @@ const CertificateDetail = ({ data }: CertificateDetailProps) => {
 
   const [messageApi, MessageContextHolder] = message.useMessage();
 
-  const handleDownloadClick = async () => {
+  const handleDownloadPEMClick = async () => {
-    // TODO: 支持下载多种格式
     const zipName = `${data.id}-${data.san}.zip`;
     const files = [
       {
@@ -73,14 +72,41 @@ const CertificateDetail = ({ data }: CertificateDetailProps) => {
       </Form>
 
       <div className="flex items-center justify-end">
-        <Button
+        <Dropdown
-          type="primary"
+          menu={{
-          onClick={() => {
+            items: [
-            handleDownloadClick();
+              {
+                key: "PEM",
+                label: "PEM",
+                extra: <ThumbsUpIcon size="14" />,
+                onClick: () => handleDownloadPEMClick(),
+              },
+              {
+                key: "PFX",
+                label: "PFX",
+                onClick: () => {
+                  // TODO: 下载 PFX 格式证书
+                  alert("TODO");
+                },
+              },
+              {
+                key: "JKS",
+                label: "JKS",
+                onClick: () => {
+                  // TODO: 下载 JKS 格式证书
+                  alert("TODO");
+                },
+              },
+            ],
           }}
         >
-          {t("certificate.action.download")}
+          <Button type="primary">
-        </Button>
+            <Space>
+              <span>{t("certificate.action.download")}</span>
+              <ChevronDownIcon size={14} />
+            </Space>
+          </Button>
+        </Dropdown>
       </div>
     </div>
   );

ui/src/pages/dashboard/Dashboard.tsx

@@ -65,7 +65,7 @@ const Dashboard = () => {
 
       <PageHeader title={t("dashboard.page.title")} />
 
-      <Row gutter={[16, 16]}>
+      <Row className="justify-stretch" gutter={[16, 16]}>
         <Col {...statisticGridSpans}>
           <StatisticCard
             icon={<SquareSigmaIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
@@ -134,7 +134,7 @@ const StatisticCard = ({
   onClick?: () => void;
 }) => {
   return (
-    <Card className="overflow-hidden" bordered={false} hoverable onClick={onClick}>
+    <Card className="size-full overflow-hidden" bordered={false} hoverable onClick={onClick}>
       <Space size="middle">
         {icon}
         <Statistic