GuanM/certimate
1
0
Fork 0
mirror of https://github.com/usual2970/certimate.git synced 2025-06-09 14:09:52 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(ui): new Layout UI using antd

Browse Source
This commit is contained in:
Fu Diwei 2024-12-07 13:47:02 +08:00
parent 2facb160aa
commit d6ddf8e9f4
18 changed files with 229 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/certificate/CertificateList.tsx
View File

@ -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")}

2
ui/src/domain/version.ts
View File

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

2
ui/src/i18n/locales/en/nls.access.json
View File

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

2
ui/src/i18n/locales/en/nls.common.json
View File

@ -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",

2
ui/src/i18n/locales/zh/nls.common.json
View File

@ -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": "文档",

4
ui/src/pages/LoginLayout.tsx → ui/src/pages/AuthLayout.tsx
View File

@ -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;

181
ui/src/pages/ConsoleLayout.tsx Normal file
View File

@ -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;

161
ui/src/pages/DashboardLayout.tsx
View File

@ -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>
</>
);
}

17
ui/src/pages/SettingLayout.tsx → ui/src/pages/SettingsLayout.tsx
View File

@ -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;

2
ui/src/pages/certificates/CertificateList.tsx
View File

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

10
ui/src/pages/login/Login.tsx
View File

@ -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>

0
ui/src/pages/setting/Account.tsx → ui/src/pages/settings/Account.tsx
View File

0
ui/src/pages/setting/Notify.tsx → ui/src/pages/settings/Notify.tsx
View File

0
ui/src/pages/setting/Password.tsx → ui/src/pages/settings/Password.tsx
View File

0
ui/src/pages/setting/SSLProvider.tsx → ui/src/pages/settings/SSLProvider.tsx
View File

4
ui/src/pages/workflows/WorkflowDetail.tsx
View File

@ -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}`);
}
};

4
ui/src/pages/workflows/WorkflowList.tsx
View File

@ -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 样式

38
ui/src/router.tsx
View File

@ -1,13 +1,13 @@
import { createHashRouter } from "react-router-dom";
import LoginLayout from "./pages/LoginLayout";
import DashboardLayout from "./pages/DashboardLayout";
import SettingLayout from "./pages/SettingLayout";
import AuthLayout from "./pages/AuthLayout";
import ConsoleLayout from "./pages/ConsoleLayout";
import SettingsLayout from "./pages/SettingsLayout";
import Login from "./pages/login/Login";
import Account from "./pages/setting/Account";
import Password from "./pages/setting/Password";
import Notify from "./pages/setting/Notify";
import SSLProvider from "./pages/setting/SSLProvider";
import Account from "./pages/settings/Account";
import Password from "./pages/settings/Password";
import Notify from "./pages/settings/Notify";
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",
element: <SettingLayout />,
path: "/workflows/detail",
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 />,
},
]);