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

feat(ui): new CertificateList UI using antd

Browse Source
This commit is contained in:
Fu Diwei 2024-12-05 21:52:27 +08:00
parent c522196029
commit 65d9c6fe2f
13 changed files with 216 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@
"certificate.props.expiry.expired": "Expired",
"certificate.props.expiry.text.expire": "Expire",
"certificate.props.workflow": "Workflow",
"certificate.props.source": "Source",
"certificate.props.created": "Created",
"certificate.props.certificate": "Certificate",
"certificate.props.private.key": "Private Key",
@ -16,4 +17,3 @@
"certificate.action.view": "View Certificate",
"certificate.action.download": "Download Certificate"
}

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

@ -1,8 +1,9 @@
{
"common.add": "Add",
"common.save": "Save",
"common.save.succeeded.message": "Save Successful",
"common.save.failed.message": "Save Failed",
"common.add": "Add",
"common.view": "View",
"common.edit": "Edit",
"common.copy": "Copy",
"common.download": "Download",
@ -24,8 +25,9 @@
"common.text.dns": "Domain Name Server",
"common.text.dns.empty": "No DNS",
"common.text.ca": "Certificate Authority",
"common.text.provider": "Provider",
"common.text.name": "Name",
"common.text.provider": "Provider",
"common.text.workflow": "Workflow",
"common.text.created_at": "Created At",
"common.text.updated_at": "Updated At",
"common.text.operations": "Operations",

4
ui/src/i18n/locales/zh/nls.certificate.json
View File

@ -1,5 +1,5 @@
{
"certificate.page.title": "证书",
"certificate.page.title": "证书管理",
"certificate.nodata": "暂无证书，添加工作流去生成证书吧😀",
@ -9,6 +9,7 @@
"certificate.props.expiry.expired": "已到期",
"certificate.props.expiry.text.expire": "到期",
"certificate.props.workflow": "所属工作流",
"certificate.props.source": "来源",
"certificate.props.created": "颁发时间",
"certificate.props.certificate": "证书",
"certificate.props.private.key": "私钥",
@ -16,4 +17,3 @@
"certificate.action.view": "查看证书",
"certificate.action.download": "下载证书"
}

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

@ -3,6 +3,7 @@
"common.save": "保存",
"common.save.succeeded.message": "保存成功",
"common.save.failed.message": "保存失败",
"common.view": "查看",
"common.edit": "编辑",
"common.copy": "复制",
"common.download": "下载",
@ -26,6 +27,7 @@
"common.text.ca": "CA（证书颁发机构）",
"common.text.name": "名称",
"common.text.provider": "服务商",
"common.text.workflow": "工作流",
"common.text.created_at": "创建时间",
"common.text.updated_at": "更新时间",
"common.text.operations": "操作",

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

@ -66,8 +66,8 @@ export default function Dashboard() {
</Link>
<Link
to="/certificate"
className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/certificate"))}
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")}
@ -114,8 +114,8 @@ export default function Dashboard() {
</Link>
<Link
to="/certificate"
className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground", getClass("/certificate"))}
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")}

15
ui/src/pages/certificate/index.tsx
View File

@ -1,15 +0,0 @@
import CertificateList from "@/components/certificate/CertificateList";
import { useTranslation } from "react-i18next";
const Certificate = () => {
const { t } = useTranslation();
return (
<div className="flex flex-col space-y-5">
<div className="text-muted-foreground">{t("certificate.page.title")}</div>
<CertificateList withPagination={true} />
</div>
);
};
export default Certificate;

176
ui/src/pages/certificates/CertificateList.tsx Normal file
View File

@ -0,0 +1,176 @@
import { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Button, Space, Table, Tooltip, Typography, type TableProps } from "antd";
import { PageHeader } from "@ant-design/pro-components";
import { Eye as EyeIcon } from "lucide-react";
import { Certificate as CertificateType } from "@/domain/certificate";
import { list as listCertificate, type CertificateListReq } from "@/repository/certificate";
import { diffDays, getLeftDays } from "@/lib/time";
const CertificateList = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [loading, setLoading] = useState<boolean>(false);
const tableColumns: TableProps<CertificateType>["columns"] = [
{
key: "$index",
align: "center",
title: "",
width: 50,
render: (_, __, index) => (page - 1) * pageSize + index + 1,
},
{
key: "name",
title: t("common.text.domain"),
render: (_, record) => <Typography.Text>{record.san}</Typography.Text>,
},
{
key: "expiry",
title: t("certificate.props.expiry"),
render: (_, record) => {
const leftDays = getLeftDays(record.expireAt);
const allDays = diffDays(record.expireAt, record.created);
return (
<Space className="max-w-full" direction="vertical" size={4}>
{leftDays > 0 ? (
<Typography.Text type="success">
{leftDays} / {allDays} {t("certificate.props.expiry.days")}
</Typography.Text>
) : (
<Typography.Text type="danger">{t("certificate.props.expiry.expired")}</Typography.Text>
)}
<Typography.Text type="secondary">
{new Date(record.expireAt).toLocaleString().split(" ")[0]} {t("certificate.props.expiry.text.expire")}
</Typography.Text>
</Space>
);
},
},
{
key: "source",
title: t("certificate.props.source"),
render: (_, record) => {
const workflowId = record.workflow;
return workflowId ? (
<Space className="max-w-full" direction="vertical" size={4}>
<Typography.Text>{t("common.text.workflow")}</Typography.Text>
<Typography.Link
type="secondary"
ellipsis
onClick={() => {
navigate(`/workflow/detail?id=${workflowId}`);
}}
>
{record.expand?.workflow?.name ?? ""}
</Typography.Link>
</Space>
) : (
<>TODO: 手动上传</>
);
},
},
{
key: "createdAt",
title: t("common.text.created_at"),
ellipsis: true,
render: (_, record) => {
return new Date(record.created!).toLocaleString();
},
},
{
key: "updatedAt",
title: t("common.text.updated_at"),
ellipsis: true,
render: (_, record) => {
return new Date(record.updated!).toLocaleString();
},
},
{
key: "$operations",
align: "end",
width: 100,
render: (_, record) => (
<Space>
<Tooltip title={t("common.view")}>
<Button
type="link"
icon={<EyeIcon size={16} />}
onClick={() => {
// TODO: 查看证书详情
alert("TODO");
}}
/>
</Tooltip>
</Space>
),
},
];
const [tableData, setTableData] = useState<CertificateType[]>([]);
const [tableTotal, setTableTotal] = useState<number>(0);
const [page, setPage] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(10);
const fetchTableData = async () => {
if (loading) return;
setLoading(true);
const state = searchParams.get("state");
const req: CertificateListReq = { page: page, perPage: pageSize };
if (state) {
req.state = state as CertificateListReq["state"];
}
try {
const resp = await listCertificate(req);
setTableData(resp.items);
setTableTotal(resp.totalItems);
} catch (err) {
console.error(err);
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchTableData();
}, [page, pageSize]);
// TODO: Empty 样式
return (
<>
<PageHeader title={t("certificate.page.title")} />
<Table<CertificateType>
columns={tableColumns}
dataSource={tableData}
rowKey={(record) => record.id}
loading={loading}
pagination={{
current: page,
pageSize: pageSize,
total: tableTotal,
onChange: (page, pageSize) => {
setPage(page);
setPageSize(pageSize);
},
onShowSizeChange: (page, pageSize) => {
setPage(page);
setPageSize(pageSize);
},
}}
/>
</>
);
};
export default CertificateList;

6
ui/src/pages/dashboard/Dashboard.tsx
View File

@ -38,7 +38,7 @@ const Dashboard = () => {
<div className="flex items-baseline">
<div className="text-3xl text-stone-700 dark:text-stone-200">
{statistic?.certificateTotal ? (
<Link to="/certificate" className="hover:underline">
<Link to="/certificates" className="hover:underline">
{statistic?.certificateTotal}
</Link>
) : (
@ -59,7 +59,7 @@ const Dashboard = () => {
<div className="flex items-baseline">
<div className="text-3xl text-stone-700 dark:text-stone-200">
{statistic?.certificateExpireSoon ? (
<Link to="/certificate?state=expireSoon" className="hover:underline">
<Link to="/certificates?state=expireSoon" className="hover:underline">
{statistic?.certificateExpireSoon}
</Link>
) : (
@ -80,7 +80,7 @@ const Dashboard = () => {
<div className="flex items-baseline">
<div className="text-3xl text-stone-700 dark:text-stone-200">
{statistic?.certificateExpired ? (
<Link to="/certificate?state=expired" className="hover:underline">
<Link to="/certificates?state=expired" className="hover:underline">
{statistic?.certificateExpired}
</Link>
) : (

0
ui/src/pages/workflow/WorkflowDetail.tsx → ui/src/pages/workflows/WorkflowDetail.tsx
View File

9
ui/src/pages/workflow/WorkflowList.tsx → ui/src/pages/workflows/WorkflowList.tsx
View File

@ -9,17 +9,16 @@ import { Workflow as WorkflowType } from "@/domain/workflow";
import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow, type WorkflowListReq } from "@/repository/workflow";
const WorkflowList = () => {
const navigate = useNavigate();
const { t } = useTranslation();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [modalApi, ModelContextHolder] = Modal.useModal();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
const [loading, setLoading] = useState<boolean>(false);
const [searchParams] = useSearchParams();
const tableColumns: TableProps<WorkflowType>["columns"] = [
{
key: "$index",
@ -201,6 +200,8 @@ const WorkflowList = () => {
navigate("/workflow/detail");
};
// TODO: Empty 样式
return (
<>
<PageHeader

28
ui/src/repository/certificate.ts
View File

@ -1,26 +1,20 @@
import { Certificate } from "@/domain/certificate";
import { getPocketBase } from "./pocketbase";
import { RecordListOptions } from "pocketbase";
import { getTimeAfter } from "@/lib/time";
import { type RecordListOptions } from "pocketbase";
type CertificateListReq = {
import { Certificate } from "@/domain/certificate";
import { getTimeAfter } from "@/lib/time";
import { getPocketBase } from "./pocketbase";
export type CertificateListReq = {
page?: number;
perPage?: number;
state?: string;
state?: "expireSoon" | "expired";
};
export const list = async (req: CertificateListReq) => {
const pb = getPocketBase();
let page = 1;
if (req.page) {
page = req.page;
}
let perPage = 2;
if (req.perPage) {
perPage = req.perPage;
}
const page = req.page || 1;
const perPage = req.perPage || 10;
const options: RecordListOptions = {
sort: "-created",
@ -37,7 +31,5 @@ export const list = async (req: CertificateListReq) => {
});
}
const response = pb.collection("certificate").getList<Certificate>(page, perPage, options);
return response;
return pb.collection("certificate").getList<Certificate>(page, perPage, options);
};

6
ui/src/repository/workflow.ts
View File

@ -10,15 +10,17 @@ export type WorkflowListReq = {
};
export const list = async (req: WorkflowListReq) => {
const pb = getPocketBase();
const page = req.page || 1;
const perPage = req.perPage || 10;
const options: RecordListOptions = { sort: "-created" };
if (req.enabled != null) {
options.filter = getPocketBase().filter("enabled={:enabled}", { enabled: req.enabled });
options.filter = pb.filter("enabled={:enabled}", { enabled: req.enabled });
}
return await getPocketBase().collection("workflow").getList<Workflow>(page, perPage, options);
return await pb.collection("workflow").getList<Workflow>(page, perPage, options);
};
export const get = async (id: string) => {

10
ui/src/router.tsx
View File

@ -10,9 +10,9 @@ import Dashboard from "./pages/dashboard/Dashboard";
import Account from "./pages/setting/Account";
import Notify from "./pages/setting/Notify";
import SSLProvider from "./pages/setting/SSLProvider";
import WorkflowList from "./pages/workflow/WorkflowList";
import WorkflowDetail from "./pages/workflow/WorkflowDetail";
import Certificate from "./pages/certificate";
import WorkflowList from "./pages/workflows/WorkflowList";
import WorkflowDetail from "./pages/workflows/WorkflowDetail";
import CertificateList from "./pages/certificates/CertificateList";
export const router = createHashRouter([
{
@ -32,8 +32,8 @@ export const router = createHashRouter([
element: <WorkflowList />,
},
{
path: "/certificate",
element: <Certificate />,
path: "/certificates",
element: <CertificateList />,
},
{
path: "/setting",