mirror of
https://github.com/woodchen-ink/certimate.git
synced 2025-07-18 17:31:55 +08:00
feat(ui): new CertificateDetail UI using antd
This commit is contained in:
Fu Diwei
parent
d6ddf8e9f4
commit
4e0134b70a
23
ui/package-lock.json
generated
23
ui/package-lock.json
generated
@ -45,6 +45,7 @@
|
||||
"nanoid": "^5.0.7",
|
||||
"pocketbase": "^0.21.4",
|
||||
"react": "^18.3.1",
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.52.1",
|
||||
"react-i18next": "^15.0.2",
|
||||
@ -59,6 +60,7 @@
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
"@types/node": "^22.0.0",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-copy-to-clipboard": "^5.0.7",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.15.0",
|
||||
"@typescript-eslint/parser": "^7.15.0",
|
||||
@ -3459,6 +3461,15 @@
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-copy-to-clipboard": {
|
||||
"version": "5.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz",
|
||||
"integrity": "sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "18.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.3.0.tgz",
|
||||
@ -6931,6 +6942,18 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-copy-to-clipboard": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
|
||||
"integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
|
||||
"dependencies": {
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || 16 || 17 || 18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-18.3.1.tgz",
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
"nanoid": "^5.0.7",
|
||||
"pocketbase": "^0.21.4",
|
||||
"react": "^18.3.1",
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.52.1",
|
||||
"react-i18next": "^15.0.2",
|
||||
@ -61,6 +62,7 @@
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
"@types/node": "^22.0.0",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-copy-to-clipboard": "^5.0.7",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.15.0",
|
||||
"@typescript-eslint/parser": "^7.15.0",
|
||||
|
||||
@ -1,46 +1,66 @@
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet";
|
||||
|
||||
import { Certificate } from "@/domain/certificate";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
import { Button } from "../ui/button";
|
||||
import { Label } from "../ui/label";
|
||||
import { CustomFile, saveFiles2ZIP } from "@/lib/file";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Form, Input, Tooltip } from "antd";
|
||||
import { CopyToClipboard } from "react-copy-to-clipboard";
|
||||
import { Clipboard as ClipboardIcon } from "lucide-react";
|
||||
|
||||
type WorkflowLogDetailProps = {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
certificate?: Certificate;
|
||||
import { type Certificate } from "@/domain/certificate";
|
||||
import { saveFiles2Zip } from "@/lib/file";
|
||||
|
||||
type CertificateDetailProps = {
|
||||
data: Certificate;
|
||||
};
|
||||
const CertificateDetail = ({ open, onOpenChange, certificate }: WorkflowLogDetailProps) => {
|
||||
|
||||
const CertificateDetail = ({ data }: CertificateDetailProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleDownloadClick = async () => {
|
||||
const zipName = `${certificate?.id}-${certificate?.san}.zip`;
|
||||
const files: CustomFile[] = [
|
||||
// TODO: 支持下载多种格式
|
||||
const zipName = `${data.id}-${data.san}.zip`;
|
||||
const files = [
|
||||
{
|
||||
name: `${certificate?.san}.pem`,
|
||||
content: certificate?.certificate ? certificate?.certificate : "",
|
||||
name: `${data.san}.pem`,
|
||||
content: data.certificate ?? "",
|
||||
},
|
||||
{
|
||||
name: `${certificate?.san}.key`,
|
||||
content: certificate?.privateKey ? certificate?.privateKey : "",
|
||||
name: `${data.san}.key`,
|
||||
content: data.privateKey ?? "",
|
||||
},
|
||||
];
|
||||
|
||||
await saveFiles2ZIP(zipName, files);
|
||||
await saveFiles2Zip(zipName, files);
|
||||
};
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="sm:max-w-2xl dark:text-stone-200">
|
||||
<SheetHeader>
|
||||
<SheetTitle></SheetTitle>
|
||||
</SheetHeader>
|
||||
<div>
|
||||
<Form layout="vertical">
|
||||
<Form.Item>
|
||||
<div className="flex items-center justify-between w-full mb-2">
|
||||
<label className="font-medium">{t("certificate.props.certificate_chain")}</label>
|
||||
<Tooltip title={t("common.copy")}>
|
||||
<CopyToClipboard text={data.certificate}>
|
||||
<Button type="text" icon={<ClipboardIcon size={14} />}></Button>
|
||||
</CopyToClipboard>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Input.TextArea value={data.certificate} rows={10} autoSize={{ maxRows: 10 }} readOnly />
|
||||
</Form.Item>
|
||||
|
||||
<div className="flex flex-col space-y-5 mt-9">
|
||||
<div className="flex justify-end">
|
||||
<Form.Item>
|
||||
<div className="flex items-center justify-between w-full mb-2">
|
||||
<label className="font-medium">{t("certificate.props.private_key")}</label>
|
||||
<Tooltip title={t("common.copy")}>
|
||||
<CopyToClipboard text={data.privateKey}>
|
||||
<Button type="text" icon={<ClipboardIcon size={14} />}></Button>
|
||||
</CopyToClipboard>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Input.TextArea value={data.privateKey} rows={10} autoSize={{ maxRows: 10 }} readOnly />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div className="flex items-center justify-end">
|
||||
<Button
|
||||
size={"sm"}
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
handleDownloadClick();
|
||||
}}
|
||||
@ -48,17 +68,7 @@ const CertificateDetail = ({ open, onOpenChange, certificate }: WorkflowLogDetai
|
||||
{t("certificate.action.download")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col space-y-3">
|
||||
<Label>{t("certificate.props.certificate")}</Label>
|
||||
<Textarea value={certificate?.certificate} rows={10} readOnly={true} />
|
||||
</div>
|
||||
<div className="flex flex-col space-y-3">
|
||||
<Label>{t("certificate.props.private_key")}</Label>
|
||||
<Textarea value={certificate?.privateKey} rows={10} readOnly={true} />
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
26
ui/src/components/certificate/CertificateDetailDrawer.tsx
Normal file
26
ui/src/components/certificate/CertificateDetailDrawer.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Drawer } from "antd";
|
||||
|
||||
import { type Certificate } from "@/domain/certificate";
|
||||
import CertificateDetail from "./CertificateDetail";
|
||||
|
||||
type CertificateDetailDrawerProps = {
|
||||
data?: Certificate;
|
||||
open?: boolean;
|
||||
onClose?: () => void;
|
||||
};
|
||||
|
||||
const CertificateDetailDrawer = ({ data, open, onClose }: CertificateDetailDrawerProps) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
setLoading(data == null);
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<Drawer closable destroyOnClose open={open} loading={loading} placement="right" width={480} onClose={onClose}>
|
||||
{data ? <CertificateDetail data={data} /> : <></>}
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
export default CertificateDetailDrawer;
|
||||
@ -1,4 +1,4 @@
|
||||
import CertificateDetail from "@/components/certificate/CertificateDetail";
|
||||
import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DataTable } from "@/components/workflow/DataTable";
|
||||
import { Certificate as CertificateType } from "@/domain/certificate";
|
||||
@ -163,7 +163,7 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
|
||||
}
|
||||
/>
|
||||
|
||||
<CertificateDetail open={open} onOpenChange={setOpen} certificate={selectedCertificate} />
|
||||
<CertificateDetailDrawer data={selectedCertificate} open={open} onClose={() => setOpen(false)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -13,6 +13,6 @@
|
||||
"certificate.props.expiry.text.expire": "Expire",
|
||||
"certificate.props.workflow": "Workflow",
|
||||
"certificate.props.source": "Source",
|
||||
"certificate.props.certificate": "Certificate",
|
||||
"certificate.props.certificate_chain": "Certificate Chain",
|
||||
"certificate.props.private_key": "Private Key"
|
||||
}
|
||||
|
||||
@ -13,6 +13,6 @@
|
||||
"certificate.props.expiry.text.expire": "到期",
|
||||
"certificate.props.workflow": "所属工作流",
|
||||
"certificate.props.source": "来源",
|
||||
"certificate.props.certificate": "证书内容",
|
||||
"certificate.props.certificate_chain": "证书内容",
|
||||
"certificate.props.private_key": "私钥内容"
|
||||
}
|
||||
|
||||
@ -18,12 +18,7 @@ export function readFileContent(file: File): Promise<string> {
|
||||
});
|
||||
}
|
||||
|
||||
export type CustomFile = {
|
||||
name: string;
|
||||
content: string;
|
||||
};
|
||||
|
||||
export const saveFiles2ZIP = async (zipName: string, files: CustomFile[]) => {
|
||||
export const saveFiles2Zip = async (zipName: string, files: { name: string; content: string }[]) => {
|
||||
const zip = new JSZip();
|
||||
|
||||
files.forEach((file) => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useEffect, useState } 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";
|
||||
@ -54,7 +54,7 @@ const ConsoleLayout = () => {
|
||||
onClick: () => navigate("/accesses"),
|
||||
},
|
||||
];
|
||||
const [menuSelectedKey, setMenuSelectedKey] = useState<string | null>(null);
|
||||
const [menuSelectedKey, setMenuSelectedKey] = useState<string>();
|
||||
|
||||
useEffect(() => {
|
||||
const item =
|
||||
@ -64,7 +64,7 @@ const ConsoleLayout = () => {
|
||||
if (item) {
|
||||
setMenuSelectedKey(item.key as string);
|
||||
} else {
|
||||
setMenuSelectedKey(null);
|
||||
setMenuSelectedKey(undefined);
|
||||
}
|
||||
}, [location.pathname]);
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ import { PageHeader } from "@ant-design/pro-components";
|
||||
import { Eye as EyeIcon } from "lucide-react";
|
||||
import moment from "moment";
|
||||
|
||||
import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
|
||||
import { Certificate as CertificateType } from "@/domain/certificate";
|
||||
import { list as listCertificate, type CertificateListReq } from "@/repository/certificate";
|
||||
import { diffDays, getLeftDays } from "@/lib/time";
|
||||
@ -73,7 +74,7 @@ const CertificateList = () => {
|
||||
</Typography.Link>
|
||||
</Space>
|
||||
) : (
|
||||
<>TODO: 手动上传</>
|
||||
<>TODO: 支持手动上传</>
|
||||
);
|
||||
},
|
||||
},
|
||||
@ -105,8 +106,7 @@ const CertificateList = () => {
|
||||
type="link"
|
||||
icon={<EyeIcon size={16} />}
|
||||
onClick={() => {
|
||||
// TODO: 查看证书详情
|
||||
alert("TODO");
|
||||
handleViewClick(record);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
@ -146,6 +146,14 @@ const CertificateList = () => {
|
||||
fetchTableData();
|
||||
}, [page, pageSize]);
|
||||
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [currentRecord, setCurrentRecord] = useState<CertificateType>();
|
||||
|
||||
const handleViewClick = (certificate: CertificateType) => {
|
||||
setDrawerOpen(true);
|
||||
setCurrentRecord(certificate);
|
||||
};
|
||||
|
||||
// TODO: Empty 样式
|
||||
// TODO: 响应式表格
|
||||
|
||||
@ -172,6 +180,15 @@ const CertificateList = () => {
|
||||
}}
|
||||
rowKey={(record) => record.id}
|
||||
/>
|
||||
|
||||
<CertificateDetailDrawer
|
||||
data={currentRecord}
|
||||
open={drawerOpen}
|
||||
onClose={() => {
|
||||
setDrawerOpen(false);
|
||||
setCurrentRecord(undefined);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user