feat(ui): new Layout UI using antd

ui/src/components/certificate/CertificateList.tsx

@@ -130,7 +130,7 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
   ];
 
   const handleWorkflowClick = (id: string) => {
-    navigate(`/workflow/detail?id=${id}`);
+    navigate(`/workflows/detail?id=${id}`);
   };
 
   const handleView = (id: string) => {
@@ -154,7 +154,7 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
               size={"sm"}
               className="w-[120px] mt-3"
               onClick={() => {
-                navigate("/workflow/detail");
+                navigate("/workflows/detail");
               }}
             >
               {t("workflow.action.create")}

ui/src/domain/version.ts

@@ -1 +1 @@
-export const version = "Certimate v0.3.0-alpha.3";
+export const version = "v0.3.0-alpha.3";

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

@@ -1,5 +1,5 @@
 {
-  "access.page.title": "Authorization Management",
+  "access.page.title": "Authorization",
 
   "access.nodata": "Please add authorization to start deploying certificate.",
 

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

@@ -34,6 +34,8 @@
   "common.text.nodata": "No data available",
   "common.text.request_error": "Request error",
 
+  "common.menu.theme": "Change Theme",
+  "common.menu.locale": "Change Language",
   "common.menu.settings": "Settings",
   "common.menu.logout": "Logout",
   "common.menu.document": "Document",

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

@@ -34,6 +34,8 @@
   "common.text.nodata": "暂无数据",
   "common.text.request_error": "请求错误",
 
+  "common.menu.theme": "切换主题",
+  "common.menu.locale": "切换语言",
   "common.menu.settings": "系统设置",
   "common.menu.logout": "退出登录",
   "common.menu.document": "文档",

ui/src/pages/AuthLayout.tsx

@@ -3,7 +3,7 @@ import { Navigate, Outlet } from "react-router-dom";
 import Version from "@/components/certimate/Version";
 import { getPocketBase } from "@/repository/pocketbase";
 
-const LoginLayout = () => {
+const AuthLayout = () => {
   const auth = getPocketBase().authStore;
   if (auth.isValid && auth.isAdmin) {
     return <Navigate to="/" />;
@@ -18,4 +18,4 @@ const LoginLayout = () => {
   );
 };
 
-export default LoginLayout;
+export default AuthLayout;

ui/src/pages/ConsoleLayout.tsx

@@ -0,0 +1,181 @@
+import { useState, useEffect } 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";
+import {
+  Languages as LanguagesIcon,
+  LogOut as LogOutIcon,
+  Home as HomeIcon,
+  Menu as MenuIcon,
+  Server as ServerIcon,
+  Settings as SettingsIcon,
+  ShieldCheck as ShieldCheckIcon,
+  Sun as SunIcon,
+  Workflow as WorkflowIcon,
+} from "lucide-react";
+
+import Version from "@/components/certimate/Version";
+import { getPocketBase } from "@/repository/pocketbase";
+import { ConfigProvider } from "@/providers/config";
+
+const ConsoleLayout = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const { t } = useTranslation();
+
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  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 | null>(null);
+
+  useEffect(() => {
+    const item =
+      menuItems.find((item) => item!.key === location.pathname) ??
+      menuItems.find((item) => item!.key !== "/" && location.pathname.startsWith(item!.key as string));
+    console.log(item);
+    if (item) {
+      setMenuSelectedKey(item.key as string);
+    } else {
+      setMenuSelectedKey(null);
+    }
+  }, [location.pathname]);
+
+  useEffect(() => {
+    if (menuSelectedKey) {
+      navigate(menuSelectedKey);
+    }
+  }, [menuSelectedKey]);
+
+  // TODO: 响应式侧边栏菜单
+
+  const handleLogoutClick = () => {
+    auth.clear();
+    navigate("/login");
+  };
+
+  const handleSettingsClick = () => {
+    navigate("/settings/account");
+  };
+
+  const auth = getPocketBase().authStore;
+  if (!auth.isValid || !auth.isAdmin) {
+    return <Navigate to="/login" />;
+  }
+
+  return (
+    <>
+      <ConfigProvider>
+        <Layout className="w-full min-h-screen">
+          <Layout.Sider theme="light" width={256}>
+            <div className="flex flex-col items-center justify-between w-full h-full overflow-hidden">
+              <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
+                  mode="vertical"
+                  items={menuItems}
+                  selectedKeys={menuSelectedKey ? [menuSelectedKey] : []}
+                  onSelect={({ key }) => {
+                    setMenuSelectedKey(key);
+                  }}
+                />
+              </div>
+              <div className="w-full py-2 text-center">
+                <Version />
+              </div>
+            </div>
+          </Layout.Sider>
+
+          <Layout>
+            <Layout.Header style={{ padding: 0, background: colorBgContainer }}>
+              <div className="flex items-center justify-between size-full px-4 overflow-hidden">
+                <div className="flex items-center gap-4 size-full">{/* <Button icon={<MenuIcon />} size="large" /> */}</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" />
+                  </Tooltip>
+                  <Tooltip title={t("common.menu.locale")} mouseEnterDelay={2}>
+                    <LocaleToggleButton size="large" />
+                  </Tooltip>
+                  <Tooltip title={t("common.menu.settings")} mouseEnterDelay={2}>
+                    <Button icon={<SettingsIcon size={18} />} size="large" onClick={handleSettingsClick} />
+                  </Tooltip>
+                  <Tooltip title={t("common.menu.logout")} mouseEnterDelay={2}>
+                    <Button danger icon={<LogOutIcon size={18} />} size="large" onClick={handleLogoutClick} />
+                  </Tooltip>
+                </div>
+              </div>
+            </Layout.Header>
+
+            <Layout.Content>
+              <div className="p-4">
+                <Outlet />
+              </div>
+            </Layout.Content>
+          </Layout>
+        </Layout>
+      </ConfigProvider>
+    </>
+  );
+};
+
+const ThemeToggleButton = ({ size }: { size?: ButtonProps["size"] }) => {
+  // TODO: 主题切换
+  const items: Required<MenuProps>["items"] = [];
+
+  return (
+    <Dropdown menu={{ items }} trigger={["click"]}>
+      <Button icon={<SunIcon size={18} />} size={size} onClick={() => alert("TODO")} />
+    </Dropdown>
+  );
+};
+
+const LocaleToggleButton = ({ size }: { size?: ButtonProps["size"] }) => {
+  const { i18n } = useTranslation();
+
+  const items: Required<MenuProps>["items"] = Object.keys(i18n.store.data).map((key) => {
+    return {
+      key: key,
+      label: <>{i18n.store.data[key].name as string}</>,
+      onClick: () => i18n.changeLanguage(key),
+    };
+  });
+
+  return (
+    <Dropdown menu={{ items }} trigger={["click"]}>
+      <Button icon={<LanguagesIcon size={18} />} size={size} />
+    </Dropdown>
+  );
+};
+
+export default ConsoleLayout;

ui/src/pages/DashboardLayout.tsx

@@ -1,161 +0,0 @@
-import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { CircleUser, Home, Menu, Server, ShieldCheck, Workflow } from "lucide-react";
-
-import LocaleToggle from "@/components/LocaleToggle";
-import { ThemeToggle } from "@/components/ThemeToggle";
-import { cn } from "@/components/ui/utils";
-import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { getPocketBase } from "@/repository/pocketbase";
-import { ConfigProvider } from "@/providers/config";
-
-import Version from "@/components/certimate/Version";
-
-export default function Dashboard() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { t } = useTranslation();
-
-  if (!getPocketBase().authStore.isValid || !getPocketBase().authStore.isAdmin) {
-    return <Navigate to="/login" />;
-  }
-
-  const currentPath = location.pathname;
-  const getClass = (path: string) => {
-    if (path == currentPath) {
-      return "bg-muted text-primary";
-    }
-    return "text-muted-foreground";
-  };
-
-  const handleLogoutClick = () => {
-    getPocketBase().authStore.clear();
-    navigate("/login");
-  };
-
-  const handleSettingClick = () => {
-    navigate("/setting/account");
-  };
-
-  return (
-    <>
-      <ConfigProvider>
-        <div className="grid min-h-screen w-full md:grid-cols-[180px_1fr] lg:grid-cols-[200px_1fr] 2xl:md:grid-cols-[280px_1fr] ">
-          <div className="hidden border-r dark:border-stone-500 bg-muted/40 md:block">
-            <div className="flex h-full max-h-screen flex-col gap-2">
-              <div className="flex h-14 items-center border-b dark:border-stone-500 px-4 lg:h-[60px] lg:px-6">
-                <Link to="/" className="flex items-center gap-2 font-semibold">
-                  <img src="/logo.svg" className="w-[36px] h-[36px]" />
-                  <span className="dark:text-white">Certimate</span>
-                </Link>
-              </div>
-              <div className="flex-1">
-                <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
-                  <Link to="/" className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/"))}>
-                    <Home className="h-4 w-4" />
-                    {t("dashboard.page.title")}
-                  </Link>
-                  <Link
-                    to="/workflows"
-                    className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/workflows"))}
-                  >
-                    <Workflow className="h-4 w-4" />
-                    {t("workflow.page.title")}
-                  </Link>
-
-                  <Link
-                    to="/certificates"
-                    className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/certificates"))}
-                  >
-                    <ShieldCheck className="h-4 w-4" />
-                    {t("certificate.page.title")}
-                  </Link>
-
-                  <Link to="/accesses" className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/accesses"))}>
-                    <Server className="h-4 w-4" />
-                    {t("access.page.title")}
-                  </Link>
-                </nav>
-              </div>
-
-              <div className="">
-                <Version className="justify-center" />
-              </div>
-            </div>
-          </div>
-          <div className="flex flex-col">
-            <header className="flex h-14 items-center gap-4 border-b dark:border-stone-500 bg-muted/40 px-4 lg:h-[60px] lg:px-6">
-              <Sheet>
-                <SheetTrigger asChild>
-                  <Button variant="outline" size="icon" className="shrink-0 md:hidden">
-                    <Menu className="h-5 w-5 dark:text-white" />
-                    <span className="sr-only">Toggle navigation menu</span>
-                  </Button>
-                </SheetTrigger>
-                <SheetContent side="left" className="flex flex-col">
-                  <nav className="grid gap-2 text-lg font-medium">
-                    <Link to="/" className="flex items-center gap-2 text-lg font-semibold">
-                      <img src="/logo.svg" className="w-[36px] h-[36px]" />
-                      <span className="dark:text-white">Certimate</span>
-                      <span className="sr-only">Certimate</span>
-                    </Link>
-                    <Link to="/" className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2  hover:text-foreground", getClass("/"))}>
-                      <Home className="h-5 w-5" />
-                      {t("dashboard.page.title")}
-                    </Link>
-                    <Link
-                      to="/workflows"
-                      className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2  hover:text-foreground", getClass("/workflows"))}
-                    >
-                      <Workflow className="h-5 w-5" />
-                      {t("workflow.page.title")}
-                    </Link>
-
-                    <Link
-                      to="/certificates"
-                      className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl  px-3 py-2  hover:text-foreground", getClass("/certificates"))}
-                    >
-                      <ShieldCheck className="h-5 w-5" />
-                      {t("certificate.page.title")}
-                    </Link>
-
-                    <Link
-                      to="/accesses"
-                      className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl  px-3 py-2  hover:text-foreground", getClass("/accesses"))}
-                    >
-                      <Server className="h-5 w-5" />
-                      {t("access.page.title")}
-                    </Link>
-                  </nav>
-                  <div className="">
-                    <Version className="justify-center" />
-                  </div>
-                </SheetContent>
-              </Sheet>
-              <div className="w-full flex-1"></div>
-              <ThemeToggle />
-              <LocaleToggle />
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="secondary" size="icon" className="rounded-full">
-                    <CircleUser className="h-5 w-5" />
-                    <span className="sr-only">Toggle user menu</span>
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem onClick={handleSettingClick}>{t("common.menu.settings")}</DropdownMenuItem>
-                  <DropdownMenuItem onClick={handleLogoutClick}>{t("common.menu.logout")}</DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </header>
-            <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6 relative">
-              <Outlet />
-            </main>
-          </div>
-        </div>
-      </ConfigProvider>
-    </>
-  );
-}

ui/src/pages/SettingsLayout.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { Card } from "antd";
 import { KeyRound, Megaphone, ShieldCheck, UserRound } from "lucide-react";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Toaster } from "@/components/ui/toaster";
 
-const SettingLayout = () => {
+const SettingsLayout = () => {
   const location = useLocation();
   const [tabValue, setTabValue] = useState("account");
   const navigate = useNavigate();
@@ -19,7 +20,7 @@ const SettingLayout = () => {
   }, [location]);
 
   return (
-    <div>
+    <Card>
       <Toaster />
       <div className="text-muted-foreground border-b dark:border-stone-500 py-5">{t("settings.page.title")}</div>
       <div className="w-full mt-5 p-0 md:p-3 flex justify-center">
@@ -28,7 +29,7 @@ const SettingLayout = () => {
             <TabsTrigger
               value="account"
               onClick={() => {
-                navigate("/setting/account");
+                navigate("/settings/account");
               }}
               className="px-5"
             >
@@ -39,7 +40,7 @@ const SettingLayout = () => {
             <TabsTrigger
               value="password"
               onClick={() => {
-                navigate("/setting/password");
+                navigate("/settings/password");
               }}
               className="px-5"
             >
@@ -50,7 +51,7 @@ const SettingLayout = () => {
             <TabsTrigger
               value="notify"
               onClick={() => {
-                navigate("/setting/notify");
+                navigate("/settings/notify");
               }}
               className="px-5"
             >
@@ -61,7 +62,7 @@ const SettingLayout = () => {
             <TabsTrigger
               value="ssl-provider"
               onClick={() => {
-                navigate("/setting/ssl-provider");
+                navigate("/settings/ssl-provider");
               }}
               className="px-5"
             >
@@ -76,8 +77,8 @@ const SettingLayout = () => {
           </TabsContent>
         </Tabs>
       </div>
-    </div>
+    </Card>
   );
 };
 
-export default SettingLayout;
+export default SettingsLayout;

ui/src/pages/certificates/CertificateList.tsx

@@ -66,7 +66,7 @@ const CertificateList = () => {
               type="secondary"
               ellipsis
               onClick={() => {
-                navigate(`/workflow/detail?id=${workflowId}`);
+                navigate(`/workflows/detail?id=${workflowId}`);
               }}
             >
               {record.expand?.workflow?.name ?? ""}

ui/src/pages/login/Login.tsx

@@ -21,10 +21,10 @@ const Login = () => {
   const formRule = createSchemaFieldRule(formSchema);
   const [form] = Form.useForm();
 
-  const [submitting, setSubmitting] = useState(false);
+  const [isPending, setIsPending] = useState(false);
 
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    setSubmitting(true);
+    setIsPending(true);
 
     try {
       await getPocketBase().admins.authWithPassword(values.username, values.password);
@@ -32,7 +32,7 @@ const Login = () => {
     } catch (err) {
       notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     } finally {
-      setSubmitting(false);
+      setIsPending(false);
     }
   };
 
@@ -45,7 +45,7 @@ const Login = () => {
           <img src="/logo.svg" className="w-16" />
         </div>
 
-        <Form form={form} disabled={submitting} layout="vertical" onFinish={onSubmit}>
+        <Form form={form} disabled={isPending} layout="vertical" onFinish={onSubmit}>
           <Form.Item name="username" label={t("login.username.label")} rules={[formRule]}>
             <Input placeholder={t("login.username.placeholder")} />
           </Form.Item>
@@ -55,7 +55,7 @@ const Login = () => {
           </Form.Item>
 
           <Form.Item>
-            <Button type="primary" htmlType="submit" block loading={submitting}>
+            <Button type="primary" htmlType="submit" block loading={isPending}>
               {t("login.submit")}
             </Button>
           </Form.Item>

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -87,7 +87,7 @@ const WorkflowDetail = () => {
     }
     switchEnable();
     if (!locId) {
-      navigate(`/workflow/detail?id=${workflow.id}`);
+      navigate(`/workflows/detail?id=${workflow.id}`);
     }
   };
 
@@ -102,7 +102,7 @@ const WorkflowDetail = () => {
     }
     save();
     if (!locId) {
-      navigate(`/workflow/detail?id=${workflow.id}`);
+      navigate(`/workflows/detail?id=${workflow.id}`);
     }
   };
 

ui/src/pages/workflows/WorkflowList.tsx

@@ -112,7 +112,7 @@ const WorkflowList = () => {
               type="link"
               icon={<PencilIcon size={16} />}
               onClick={() => {
-                navigate(`/workflow/detail?id=${record.id}`);
+                navigate(`/workflows/detail?id=${record.id}`);
               }}
             />
           </Tooltip>
@@ -202,7 +202,7 @@ const WorkflowList = () => {
   };
 
   const handleCreateClick = () => {
-    navigate("/workflow/detail");
+    navigate("/workflows/detail");
   };
 
   // TODO: Empty 样式

ui/src/router.tsx

@@ -1,13 +1,13 @@
 import { createHashRouter } from "react-router-dom";
 
-import LoginLayout from "./pages/LoginLayout";
+import AuthLayout from "./pages/AuthLayout";
-import DashboardLayout from "./pages/DashboardLayout";
+import ConsoleLayout from "./pages/ConsoleLayout";
-import SettingLayout from "./pages/SettingLayout";
+import SettingsLayout from "./pages/SettingsLayout";
 import Login from "./pages/login/Login";
-import Account from "./pages/setting/Account";
+import Account from "./pages/settings/Account";
-import Password from "./pages/setting/Password";
+import Password from "./pages/settings/Password";
-import Notify from "./pages/setting/Notify";
+import Notify from "./pages/settings/Notify";
-import SSLProvider from "./pages/setting/SSLProvider";
+import SSLProvider from "./pages/settings/SSLProvider";
 import Dashboard from "./pages/dashboard/Dashboard";
 import AccessList from "./pages/accesses/AccessList";
 import WorkflowList from "./pages/workflows/WorkflowList";
@@ -17,7 +17,7 @@ import CertificateList from "./pages/certificates/CertificateList";
 export const router = createHashRouter([
   {
     path: "/",
-    element: <DashboardLayout />,
+    element: <ConsoleLayout />,
     children: [
       {
         path: "/",
@@ -36,23 +36,27 @@ export const router = createHashRouter([
         element: <WorkflowList />,
       },
       {
-        path: "/setting",
+        path: "/workflows/detail",
-        element: <SettingLayout />,
+        element: <WorkflowDetail />,
+      },
+      {
+        path: "/settings",
+        element: <SettingsLayout />,
         children: [
           {
-            path: "/setting/password",
+            path: "/settings/password",
             element: <Password />,
           },
           {
-            path: "/setting/account",
+            path: "/settings/account",
             element: <Account />,
           },
           {
-            path: "/setting/notify",
+            path: "/settings/notify",
             element: <Notify />,
           },
           {
-            path: "/setting/ssl-provider",
+            path: "/settings/ssl-provider",
             element: <SSLProvider />,
           },
         ],
@@ -61,7 +65,7 @@ export const router = createHashRouter([
   },
   {
     path: "/login",
-    element: <LoginLayout />,
+    element: <AuthLayout />,
     children: [
       {
         path: "/login",
@@ -69,8 +73,4 @@ export const router = createHashRouter([
       },
     ],
   },
-  {
-    path: "/workflow/detail",
-    element: <WorkflowDetail />,
-  },
 ]);