mirror of
https://github.com/woodchen-ink/certimate.git
synced 2025-07-18 17:31:55 +08:00
refactor(ui): clean code
This commit is contained in:
parent
85faf8d517
commit
5ea5473bdd
@ -1,5 +1,6 @@
|
|||||||
import { useCallback, useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useRequest } from "ahooks";
|
||||||
import { Avatar, Button, Empty, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
|
import { Avatar, Button, Empty, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
|
||||||
import { PageHeader } from "@ant-design/pro-components";
|
import { PageHeader } from "@ant-design/pro-components";
|
||||||
import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
|
import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
|
||||||
@ -19,8 +20,6 @@ const AccessList = () => {
|
|||||||
|
|
||||||
const { accesses, fetchAccesses, deleteAccess } = useAccessStore();
|
const { accesses, fetchAccesses, deleteAccess } = useAccessStore();
|
||||||
|
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const tableColumns: TableProps<AccessModel>["columns"] = [
|
const tableColumns: TableProps<AccessModel>["columns"] = [
|
||||||
{
|
{
|
||||||
key: "$index",
|
key: "$index",
|
||||||
@ -124,32 +123,24 @@ const AccessList = () => {
|
|||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const fetchTableData = useCallback(async () => {
|
const { loading } = useRequest(
|
||||||
if (loading) return;
|
() => {
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const startIndex = (page - 1) * pageSize;
|
const startIndex = (page - 1) * pageSize;
|
||||||
const endIndex = startIndex + pageSize;
|
const endIndex = startIndex + pageSize;
|
||||||
const items = accesses.slice(startIndex, endIndex);
|
const items = accesses.slice(startIndex, endIndex);
|
||||||
|
return Promise.resolve({
|
||||||
setTableData(items);
|
items,
|
||||||
setTableTotal(accesses.length);
|
totalItems: accesses.length,
|
||||||
} catch (err) {
|
});
|
||||||
if (err instanceof ClientResponseError && err.isAbort) {
|
},
|
||||||
return;
|
{
|
||||||
}
|
refreshDeps: [accesses, page, pageSize],
|
||||||
|
onSuccess: (data) => {
|
||||||
console.error(err);
|
setTableData(data.items);
|
||||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
|
setTableTotal(data.totalItems);
|
||||||
} finally {
|
},
|
||||||
setLoading(false);
|
|
||||||
}
|
}
|
||||||
}, [page, pageSize, accesses]);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchTableData();
|
|
||||||
}, [fetchTableData]);
|
|
||||||
|
|
||||||
const handleDeleteClick = async (data: AccessModel) => {
|
const handleDeleteClick = async (data: AccessModel) => {
|
||||||
modalApi.confirm({
|
modalApi.confirm({
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { useCallback, useEffect, useState } from "react";
|
import { useState } from "react";
|
||||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useRequest } from "ahooks";
|
||||||
import { Button, Divider, Empty, Menu, notification, Radio, Space, Table, theme, Tooltip, Typography, type MenuProps, type TableProps } from "antd";
|
import { Button, Divider, Empty, Menu, notification, Radio, Space, Table, theme, Tooltip, Typography, type MenuProps, type TableProps } from "antd";
|
||||||
import { PageHeader } from "@ant-design/pro-components";
|
import { PageHeader } from "@ant-design/pro-components";
|
||||||
import { Eye as EyeIcon, Filter as FilterIcon } from "lucide-react";
|
import { Eye as EyeIcon, Filter as FilterIcon } from "lucide-react";
|
||||||
@ -22,8 +23,6 @@ const CertificateList = () => {
|
|||||||
|
|
||||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||||
|
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const tableColumns: TableProps<CertificateModel>["columns"] = [
|
const tableColumns: TableProps<CertificateModel>["columns"] = [
|
||||||
{
|
{
|
||||||
key: "$index",
|
key: "$index",
|
||||||
@ -177,34 +176,30 @@ const CertificateList = () => {
|
|||||||
const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
|
const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
|
||||||
const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10);
|
const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10);
|
||||||
|
|
||||||
const fetchTableData = useCallback(async () => {
|
const { loading } = useRequest(
|
||||||
if (loading) return;
|
() => {
|
||||||
setLoading(true);
|
return listCertificate({
|
||||||
|
|
||||||
try {
|
|
||||||
const resp = await listCertificate({
|
|
||||||
page: page,
|
page: page,
|
||||||
perPage: pageSize,
|
perPage: pageSize,
|
||||||
state: filters["state"] as CertificateListReq["state"],
|
state: filters["state"] as CertificateListReq["state"],
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
refreshDeps: [filters, page, pageSize],
|
||||||
|
onSuccess: (data) => {
|
||||||
|
setTableData(data.items);
|
||||||
|
setTableTotal(data.totalItems);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
if (err instanceof ClientResponseError && err.isAbort) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
setTableData(resp.items);
|
console.error(err);
|
||||||
setTableTotal(resp.totalItems);
|
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
|
||||||
} catch (err) {
|
},
|
||||||
if (err instanceof ClientResponseError && err.isAbort) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.error(err);
|
|
||||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
}
|
||||||
}, [filters, page, pageSize]);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchTableData();
|
|
||||||
}, [fetchTableData]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import React, { useCallback, useEffect, useState } from "react";
|
import { useState } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useRequest } from "ahooks";
|
||||||
import { Card, Col, Divider, notification, Row, Space, Statistic, theme, Typography } from "antd";
|
import { Card, Col, Divider, notification, Row, Space, Statistic, theme, Typography } from "antd";
|
||||||
import { PageHeader } from "@ant-design/pro-components";
|
import { PageHeader } from "@ant-design/pro-components";
|
||||||
import {
|
import {
|
||||||
@ -25,8 +26,6 @@ const Dashboard = () => {
|
|||||||
|
|
||||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||||
|
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const statisticsGridSpans = {
|
const statisticsGridSpans = {
|
||||||
xs: { flex: "50%" },
|
xs: { flex: "50%" },
|
||||||
md: { flex: "50%" },
|
md: { flex: "50%" },
|
||||||
@ -34,31 +33,26 @@ const Dashboard = () => {
|
|||||||
xl: { flex: "33.3333%" },
|
xl: { flex: "33.3333%" },
|
||||||
xxl: { flex: "20%" },
|
xxl: { flex: "20%" },
|
||||||
};
|
};
|
||||||
|
|
||||||
const [statistics, setStatistics] = useState<Statistics>();
|
const [statistics, setStatistics] = useState<Statistics>();
|
||||||
|
|
||||||
const fetchStatistics = useCallback(async () => {
|
const { loading } = useRequest(
|
||||||
if (loading) return;
|
() => {
|
||||||
setLoading(true);
|
return getStatistics();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onSuccess: (data) => {
|
||||||
|
setStatistics(data);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
if (err instanceof ClientResponseError && err.isAbort) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
console.error(err);
|
||||||
const data = await getStatistics();
|
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
|
||||||
setStatistics(data);
|
},
|
||||||
} catch (err) {
|
|
||||||
if (err instanceof ClientResponseError && err.isAbort) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.error(err);
|
|
||||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
}
|
||||||
}, []);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchStatistics();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -71,6 +65,7 @@ const Dashboard = () => {
|
|||||||
<StatisticCard
|
<StatisticCard
|
||||||
icon={<SquareSigmaIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
|
icon={<SquareSigmaIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
|
||||||
label={t("dashboard.statistics.all_certificates")}
|
label={t("dashboard.statistics.all_certificates")}
|
||||||
|
loading={loading}
|
||||||
value={statistics?.certificateTotal ?? "-"}
|
value={statistics?.certificateTotal ?? "-"}
|
||||||
suffix={t("dashboard.statistics.unit")}
|
suffix={t("dashboard.statistics.unit")}
|
||||||
onClick={() => navigate("/certificates")}
|
onClick={() => navigate("/certificates")}
|
||||||
@ -80,6 +75,7 @@ const Dashboard = () => {
|
|||||||
<StatisticCard
|
<StatisticCard
|
||||||
icon={<CalendarClockIcon size={48} strokeWidth={1} color={themeToken.colorWarning} />}
|
icon={<CalendarClockIcon size={48} strokeWidth={1} color={themeToken.colorWarning} />}
|
||||||
label={t("dashboard.statistics.expire_soon_certificates")}
|
label={t("dashboard.statistics.expire_soon_certificates")}
|
||||||
|
loading={loading}
|
||||||
value={statistics?.certificateExpireSoon ?? "-"}
|
value={statistics?.certificateExpireSoon ?? "-"}
|
||||||
suffix={t("dashboard.statistics.unit")}
|
suffix={t("dashboard.statistics.unit")}
|
||||||
onClick={() => navigate("/certificates?state=expireSoon")}
|
onClick={() => navigate("/certificates?state=expireSoon")}
|
||||||
@ -89,6 +85,7 @@ const Dashboard = () => {
|
|||||||
<StatisticCard
|
<StatisticCard
|
||||||
icon={<CalendarX2Icon size={48} strokeWidth={1} color={themeToken.colorError} />}
|
icon={<CalendarX2Icon size={48} strokeWidth={1} color={themeToken.colorError} />}
|
||||||
label={t("dashboard.statistics.expired_certificates")}
|
label={t("dashboard.statistics.expired_certificates")}
|
||||||
|
loading={loading}
|
||||||
value={statistics?.certificateExpired ?? "-"}
|
value={statistics?.certificateExpired ?? "-"}
|
||||||
suffix={t("dashboard.statistics.unit")}
|
suffix={t("dashboard.statistics.unit")}
|
||||||
onClick={() => navigate("/certificates?state=expired")}
|
onClick={() => navigate("/certificates?state=expired")}
|
||||||
@ -98,6 +95,7 @@ const Dashboard = () => {
|
|||||||
<StatisticCard
|
<StatisticCard
|
||||||
icon={<WorkflowIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
|
icon={<WorkflowIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
|
||||||
label={t("dashboard.statistics.all_workflows")}
|
label={t("dashboard.statistics.all_workflows")}
|
||||||
|
loading={loading}
|
||||||
value={statistics?.workflowTotal ?? "-"}
|
value={statistics?.workflowTotal ?? "-"}
|
||||||
suffix={t("dashboard.statistics.unit")}
|
suffix={t("dashboard.statistics.unit")}
|
||||||
onClick={() => navigate("/workflows")}
|
onClick={() => navigate("/workflows")}
|
||||||
@ -107,6 +105,7 @@ const Dashboard = () => {
|
|||||||
<StatisticCard
|
<StatisticCard
|
||||||
icon={<FolderCheckIcon size={48} strokeWidth={1} color={themeToken.colorSuccess} />}
|
icon={<FolderCheckIcon size={48} strokeWidth={1} color={themeToken.colorSuccess} />}
|
||||||
label={t("dashboard.statistics.enabled_workflows")}
|
label={t("dashboard.statistics.enabled_workflows")}
|
||||||
|
loading={loading}
|
||||||
value={statistics?.workflowEnabled ?? "-"}
|
value={statistics?.workflowEnabled ?? "-"}
|
||||||
suffix={t("dashboard.statistics.unit")}
|
suffix={t("dashboard.statistics.unit")}
|
||||||
onClick={() => navigate("/workflows?state=enabled")}
|
onClick={() => navigate("/workflows?state=enabled")}
|
||||||
@ -123,19 +122,21 @@ const Dashboard = () => {
|
|||||||
|
|
||||||
const StatisticCard = ({
|
const StatisticCard = ({
|
||||||
label,
|
label,
|
||||||
|
loading,
|
||||||
icon,
|
icon,
|
||||||
value,
|
value,
|
||||||
suffix,
|
suffix,
|
||||||
onClick,
|
onClick,
|
||||||
}: {
|
}: {
|
||||||
label: React.ReactNode;
|
label: React.ReactNode;
|
||||||
|
loading?: boolean;
|
||||||
icon: React.ReactNode;
|
icon: React.ReactNode;
|
||||||
value?: string | number | React.ReactNode;
|
value?: string | number | React.ReactNode;
|
||||||
suffix?: React.ReactNode;
|
suffix?: React.ReactNode;
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<Card className="size-full overflow-hidden" bordered={false} hoverable onClick={onClick}>
|
<Card className="size-full overflow-hidden" bordered={false} hoverable loading={loading} onClick={onClick}>
|
||||||
<Space size="middle">
|
<Space size="middle">
|
||||||
{icon}
|
{icon}
|
||||||
<Statistic
|
<Statistic
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { useCallback, useEffect, useState } from "react";
|
import { useState } from "react";
|
||||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { useRequest } from "ahooks";
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Divider,
|
Divider,
|
||||||
@ -38,8 +39,6 @@ const WorkflowList = () => {
|
|||||||
const [modalApi, ModelContextHolder] = Modal.useModal();
|
const [modalApi, ModelContextHolder] = Modal.useModal();
|
||||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||||
|
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const tableColumns: TableProps<WorkflowModel>["columns"] = [
|
const tableColumns: TableProps<WorkflowModel>["columns"] = [
|
||||||
{
|
{
|
||||||
key: "$index",
|
key: "$index",
|
||||||
@ -209,34 +208,30 @@ const WorkflowList = () => {
|
|||||||
const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
|
const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
|
||||||
const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10);
|
const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10);
|
||||||
|
|
||||||
const fetchTableData = useCallback(async () => {
|
const { loading } = useRequest(
|
||||||
if (loading) return;
|
() => {
|
||||||
setLoading(true);
|
return listWorkflow({
|
||||||
|
|
||||||
try {
|
|
||||||
const resp = await listWorkflow({
|
|
||||||
page: page,
|
page: page,
|
||||||
perPage: pageSize,
|
perPage: pageSize,
|
||||||
enabled: (filters["state"] as string) === "enabled" ? true : (filters["state"] as string) === "disabled" ? false : undefined,
|
enabled: (filters["state"] as string) === "enabled" ? true : (filters["state"] as string) === "disabled" ? false : undefined,
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
refreshDeps: [filters, page, pageSize],
|
||||||
|
onSuccess: (data) => {
|
||||||
|
setTableData(data.items);
|
||||||
|
setTableTotal(data.totalItems);
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
if (err instanceof ClientResponseError && err.isAbort) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
setTableData(resp.items);
|
console.error(err);
|
||||||
setTableTotal(resp.totalItems);
|
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
|
||||||
} catch (err) {
|
},
|
||||||
if (err instanceof ClientResponseError && err.isAbort) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.error(err);
|
|
||||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{getErrMsg(err)}</> });
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
}
|
||||||
}, [filters, page, pageSize]);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchTableData();
|
|
||||||
}, [fetchTableData]);
|
|
||||||
|
|
||||||
const handleEnabledChange = async (workflow: WorkflowModel) => {
|
const handleEnabledChange = async (workflow: WorkflowModel) => {
|
||||||
try {
|
try {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user