ui/src/components/certificate/CertificateDetail.tsx

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

ui/src/pages/ConsoleLayout.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, Drawer, Dropdown, Layout, Menu, Tooltip, theme, type ButtonProps, type MenuProps } from "antd";
+import { Button, Dropdown, Layout, Menu, Tooltip, theme, type ButtonProps, type MenuProps } from "antd";
 import {
   Languages as LanguagesIcon,
   LogOut as LogOutIcon,
@@ -21,21 +21,65 @@ import { getPocketBase } from "@/repository/pocketbase";
 import { ConfigProvider } from "@/providers/config";
 
 const ConsoleLayout = () => {
+  const location = useLocation();
   const navigate = useNavigate();
 
   const { t } = useTranslation();
 
   const { token: themeToken } = theme.useToken();
+  const { theme: browserTheme } = useTheme();
 
-  const [siderOpen, setSiderOpen] = useState(false);
+  const menuItems: Required<MenuProps>["items"] = [
+    {
+      key: "/",
+      icon: <HomeIcon size={16} />,
+      label: t("dashboard.page.title"),
+      onClick: () => navigate("/"),
+    },
+    {
+      key: "/workflows",
+      icon: <WorkflowIcon size={16} />,
+      label: t("workflow.page.title"),
+      onClick: () => navigate("/workflows"),
+    },
+    {
+      key: "/certificates",
+      icon: <ShieldCheckIcon size={16} />,
+      label: t("certificate.page.title"),
+      onClick: () => navigate("/certificates"),
+    },
+    {
+      key: "/accesses",
+      icon: <ServerIcon size={16} />,
+      label: t("access.page.title"),
+      onClick: () => navigate("/accesses"),
+    },
+  ];
+  const [menuSelectedKey, setMenuSelectedKey] = useState<string>();
 
-  const handleSiderOpen = () => {
+  const getActiveMenuItem = () => {
-    setSiderOpen(true);
+    const item =
+      menuItems.find((item) => item!.key === location.pathname) ??
+      menuItems.find((item) => item!.key !== "/" && location.pathname.startsWith(item!.key as string));
+    return item;
   };
 
-  const handleSiderClose = () => {
+  useEffect(() => {
-    setSiderOpen(false);
+    const item = getActiveMenuItem();
-  };
+    if (item) {
+      setMenuSelectedKey(item.key as string);
+    } else {
+      setMenuSelectedKey(undefined);
+    }
+  }, [location.pathname]);
+
+  useEffect(() => {
+    if (menuSelectedKey && menuSelectedKey !== getActiveMenuItem()?.key) {
+      navigate(menuSelectedKey);
+    }
+  }, [menuSelectedKey]);
+
+  // TODO: 响应式侧边栏菜单
 
   const handleLogoutClick = () => {
     auth.clear();
@@ -55,10 +99,22 @@ const ConsoleLayout = () => {
     <>
       <ConfigProvider>
         <Layout className="w-full min-h-screen">
-          <Layout.Sider className="max-md:hidden" theme="light" width={256}>
+          <Layout.Sider theme={browserTheme} width={256}>
             <div className="flex flex-col items-center justify-between w-full h-full overflow-hidden">
-              <div className="w-full">
+              <Link to="/" className="flex items-center gap-2 w-full px-4 font-semibold overflow-hidden">
-                <SiderMenu />
+                <img src="/logo.svg" className="w-[36px] h-[36px]" />
+                <span className="w-[64px] h-[64px] leading-[64px] dark:text-white truncate">Certimate</span>
+              </Link>
+              <div className="flex-grow w-full overflow-x-hidden overflow-y-auto">
+                <Menu
+                  items={menuItems}
+                  mode="vertical"
+                  selectedKeys={menuSelectedKey ? [menuSelectedKey] : []}
+                  theme={browserTheme}
+                  onSelect={({ key }) => {
+                    setMenuSelectedKey(key);
+                  }}
+                />
               </div>
               <div className="w-full py-2 text-center">
                 <Version />
@@ -69,22 +125,7 @@ const ConsoleLayout = () => {
           <Layout>
             <Layout.Header style={{ padding: 0, background: themeToken.colorBgContainer }}>
               <div className="flex items-center justify-between size-full px-4 overflow-hidden">
-                <div className="flex items-center gap-4 size-full">
+                <div className="flex items-center gap-4 size-full">{/* <Button icon={<MenuIcon />} size="large" /> */}</div>
-                  <Button className="md:hidden" icon={<MenuIcon />} size="large" onClick={handleSiderOpen} />
-                  <Drawer
-                    closable={false}
-                    destroyOnClose
-                    open={siderOpen}
-                    placement="left"
-                    styles={{
-                      content: { paddingTop: themeToken.paddingSM, paddingBottom: themeToken.paddingSM },
-                      body: { padding: 0 },
-                    }}
-                    onClose={handleSiderClose}
-                  >
-                    <SiderMenu onSelect={() => handleSiderClose()} />
-                  </Drawer>
-                </div>
                 <div className="flex-grow flex items-center justify-end gap-4 size-full overflow-hidden">
                   <Tooltip title={t("common.menu.theme")} mouseEnterDelay={2}>
                     <ThemeToggleButton size="large" />
@@ -114,99 +155,7 @@ const ConsoleLayout = () => {
   );
 };
 
-const SiderMenu = React.memo(({ onSelect }: { onSelect?: (key: string) => void }) => {
+const ThemeToggleButton = ({ size }: { size?: ButtonProps["size"] }) => {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const { t } = useTranslation();
-
-  const MENU_KEY_HOME = "/";
-  const MENU_KEY_WORKFLOWS = "/workflows";
-  const MENU_KEY_CERTIFICATES = "/certificates";
-  const MENU_KEY_ACCESSES = "/accesses";
-  const menuItems: Required<MenuProps>["items"] = [
-    {
-      key: MENU_KEY_HOME,
-      icon: <HomeIcon size={16} />,
-      label: t("dashboard.page.title"),
-      onClick: () => {
-        navigate(MENU_KEY_HOME);
-        onSelect?.(MENU_KEY_HOME);
-      },
-    },
-    {
-      key: MENU_KEY_WORKFLOWS,
-      icon: <WorkflowIcon size={16} />,
-      label: t("workflow.page.title"),
-      onClick: () => {
-        navigate(MENU_KEY_WORKFLOWS);
-        onSelect?.(MENU_KEY_WORKFLOWS);
-      },
-    },
-    {
-      key: MENU_KEY_CERTIFICATES,
-      icon: <ShieldCheckIcon size={16} />,
-      label: t("certificate.page.title"),
-      onClick: () => {
-        navigate(MENU_KEY_CERTIFICATES);
-        onSelect?.(MENU_KEY_CERTIFICATES);
-      },
-    },
-    {
-      key: MENU_KEY_ACCESSES,
-      icon: <ServerIcon size={16} />,
-      label: t("access.page.title"),
-      onClick: () => {
-        navigate(MENU_KEY_ACCESSES);
-        onSelect?.(MENU_KEY_ACCESSES);
-      },
-    },
-  ];
-  const [menuSelectedKey, setMenuSelectedKey] = useState<string>();
-
-  const getActiveMenuItem = () => {
-    const item =
-      menuItems.find((item) => item!.key === location.pathname) ??
-      menuItems.find((item) => item!.key !== MENU_KEY_HOME && location.pathname.startsWith(item!.key as string));
-    return item;
-  };
-
-  useEffect(() => {
-    const item = getActiveMenuItem();
-    if (item) {
-      setMenuSelectedKey(item.key as string);
-    } else {
-      setMenuSelectedKey(undefined);
-    }
-  }, [location.pathname]);
-
-  useEffect(() => {
-    if (menuSelectedKey && menuSelectedKey !== getActiveMenuItem()?.key) {
-      navigate(menuSelectedKey);
-    }
-  }, [menuSelectedKey]);
-
-  return (
-    <>
-      <Link to="/" className="flex items-center gap-2 w-full px-4 font-semibold overflow-hidden">
-        <img src="/logo.svg" className="w-[36px] h-[36px]" />
-        <span className="w-[64px] h-[64px] leading-[64px] dark:text-white truncate">Certimate</span>
-      </Link>
-      <div className="flex-grow w-full overflow-x-hidden overflow-y-auto">
-        <Menu
-          items={menuItems}
-          mode="vertical"
-          selectedKeys={menuSelectedKey ? [menuSelectedKey] : []}
-          onSelect={({ key }) => {
-            setMenuSelectedKey(key);
-          }}
-        />
-      </div>
-    </>
-  );
-});
-
-const ThemeToggleButton = React.memo(({ size }: { size?: ButtonProps["size"] }) => {
   const { t } = useTranslation();
 
   const { theme, setThemeMode } = useTheme();
@@ -234,9 +183,9 @@ const ThemeToggleButton = React.memo(({ size }: { size?: ButtonProps["size"] })
       <Button icon={theme === "dark" ? <MoonIcon size={18} /> : <SunIcon size={18} />} size={size} />
     </Dropdown>
   );
-});
+};
 
-const LocaleToggleButton = React.memo(({ size }: { size?: ButtonProps["size"] }) => {
+const LocaleToggleButton = ({ size }: { size?: ButtonProps["size"] }) => {
   const { i18n } = useTranslation();
 
   const items: Required<MenuProps>["items"] = Object.keys(i18n.store.data).map((key) => {
@@ -252,6 +201,6 @@ const LocaleToggleButton = React.memo(({ size }: { size?: ButtonProps["size"] })
       <Button icon={<LanguagesIcon size={18} />} size={size} />
     </Dropdown>
   );
-});
+};
 
 export default ConsoleLayout;

ui/src/pages/accesses/AccessList.tsx

@@ -23,7 +23,7 @@ const AccessList = () => {
     {
       key: "$index",
       align: "center",
-      fixed: "left",
+      title: "",
       width: 50,
       render: (_, __, index) => (page - 1) * pageSize + index + 1,
     },
@@ -36,12 +36,11 @@ const AccessList = () => {
     {
       key: "provider",
       title: t("common.text.provider"),
-      ellipsis: true,
       render: (_, record) => {
         return (
-          <Space className="max-w-full truncate" size={4}>
+          <Space className="max-w-full" size={4}>
             <Avatar src={accessProvidersMap.get(record.configType)?.icon} size="small" />
-            <Typography.Text ellipsis>{t(accessProvidersMap.get(record.configType)?.name ?? "")}</Typography.Text>
+            <Typography.Text>{t(accessProvidersMap.get(record.configType)?.name ?? "")}</Typography.Text>
           </Space>
         );
       },
@@ -157,6 +156,8 @@ const AccessList = () => {
     });
   };
 
+  // TODO: 响应式表格
+
   return (
     <>
       {ModelContextHolder}
@@ -198,7 +199,6 @@ const AccessList = () => {
           },
         }}
         rowKey={(record) => record.id}
-        scroll={{ x: "max(100%, 960px)" }}
       />
     </>
   );

ui/src/pages/certificates/CertificateList.tsx

@@ -27,7 +27,7 @@ const CertificateList = () => {
     {
       key: "$index",
       align: "center",
-      fixed: "left",
+      title: "",
       width: 50,
       render: (_, __, index) => (page - 1) * pageSize + index + 1,
     },
@@ -39,7 +39,6 @@ const CertificateList = () => {
     {
       key: "expiry",
       title: t("certificate.props.expiry"),
-      ellipsis: true,
       defaultFilteredValue: searchParams.has("state") ? [searchParams.get("state") as string] : undefined,
       filterDropdown: ({ setSelectedKeys, confirm, clearFilters }) => {
         const items: Required<MenuProps>["items"] = [
@@ -108,7 +107,6 @@ const CertificateList = () => {
     {
       key: "source",
       title: t("certificate.props.source"),
-      ellipsis: true,
       render: (_, record) => {
         const workflowId = record.workflow;
         return workflowId ? (
@@ -215,6 +213,8 @@ const CertificateList = () => {
     setCurrentRecord(certificate);
   };
 
+  // TODO: 响应式表格
+
   return (
     <>
       {NotificationContextHolder}
@@ -242,7 +242,6 @@ const CertificateList = () => {
           },
         }}
         rowKey={(record) => record.id}
-        scroll={{ x: "max(100%, 960px)" }}
       />
 
       <CertificateDetailDrawer

ui/src/pages/dashboard/Dashboard.tsx

@@ -65,7 +65,7 @@ const Dashboard = () => {
 
       <PageHeader title={t("dashboard.page.title")} />
 
-      <Row className="justify-stretch" gutter={[16, 16]}>
+      <Row 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="size-full overflow-hidden" bordered={false} hoverable onClick={onClick}>
+    <Card className="overflow-hidden" bordered={false} hoverable onClick={onClick}>
       <Space size="middle">
         {icon}
         <Statistic

ui/src/pages/workflows/WorkflowList.tsx

@@ -43,14 +43,13 @@ const WorkflowList = () => {
     {
       key: "$index",
       align: "center",
-      fixed: "left",
+      title: "",
       width: 50,
       render: (_, __, index) => (page - 1) * pageSize + index + 1,
     },
     {
       key: "name",
       title: t("common.text.name"),
-      ellipsis: true,
       render: (_, record) => (
         <Space className="max-w-full" direction="vertical" size={4}>
           <Typography.Text ellipsis>{record.name}</Typography.Text>
@@ -63,7 +62,6 @@ const WorkflowList = () => {
     {
       key: "type",
       title: t("workflow.props.executionMethod"),
-      ellipsis: true,
       render: (_, record) => {
         const method = record.type;
         if (!method) {
@@ -281,6 +279,8 @@ const WorkflowList = () => {
     navigate("/workflows/detail");
   };
 
+  // TODO: 响应式表格
+
   return (
     <>
       {ModelContextHolder}
@@ -323,7 +323,6 @@ const WorkflowList = () => {
           },
         }}
         rowKey={(record) => record.id}
-        scroll={{ x: "max(100%, 960px)" }}
       />
     </>
   );