jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): optimize table UI

Browse Source
This commit is contained in:
Fu Diwei
2024-12-08 11:55:30 +08:00
parent 4e0134b70a
commit 5c6be439e8
14 changed files with 84 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/pages/ConsoleLayout.tsx
View File

@@ -60,7 +60,6 @@ const ConsoleLayout = () => {
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 {

24
ui/src/pages/accesses/AccessList.tsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Button, 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 { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
import moment from "moment";
@@ -13,6 +13,9 @@ import { useConfigContext } from "@/providers/config";
const AccessList = () => {
const { t } = useTranslation();
// a flag to fix the twice-rendering issue in strict mode
const mountRef = useRef(true);
const [modalApi, ModelContextHolder] = Modal.useModal();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
@@ -111,7 +114,7 @@ const AccessList = () => {
const configContext = useConfigContext();
const fetchTableData = async () => {
const fetchTableData = useCallback(async () => {
if (loading) return;
setLoading(true);
@@ -124,14 +127,20 @@ const AccessList = () => {
setTableTotal(configContext.config.accesses.length);
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
} finally {
setLoading(false);
}
};
}, [page, pageSize, configContext.config.accesses]);
useEffect(() => {
if (mountRef.current) {
mountRef.current = false;
return;
}
fetchTableData();
}, [page, pageSize, configContext.config.accesses]);
}, [fetchTableData]);
const handleDeleteClick = async (data: AccessType) => {
modalApi.confirm({
@@ -143,13 +152,13 @@ const AccessList = () => {
const res = await removeAccess(data);
configContext.deleteAccess(res.id);
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
}
},
});
};
// TODO: Empty 样式
// TODO: 响应式表格
return (
@@ -176,6 +185,9 @@ const AccessList = () => {
columns={tableColumns}
dataSource={tableData}
loading={loading}
locale={{
emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("access.nodata")} />,
}}
pagination={{
current: page,
pageSize: pageSize,

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

@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { useCallback, useEffect, useRef, 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 { Button, Empty, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
import { PageHeader } from "@ant-design/pro-components";
import { Eye as EyeIcon } from "lucide-react";
import moment from "moment";
@@ -17,6 +17,11 @@ const CertificateList = () => {
const { t } = useTranslation();
// a flag to fix the twice-rendering issue in strict mode
const mountRef = useRef(true);
const [notificationApi, NotificationContextHolder] = notification.useNotification();
const [loading, setLoading] = useState<boolean>(false);
const tableColumns: TableProps<CertificateType>["columns"] = [
@@ -120,7 +125,7 @@ const CertificateList = () => {
const [page, setPage] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(10);
const fetchTableData = async () => {
const fetchTableData = useCallback(async () => {
if (loading) return;
setLoading(true);
@@ -137,14 +142,20 @@ const CertificateList = () => {
setTableTotal(resp.totalItems);
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
} finally {
setLoading(false);
}
};
}, [page, pageSize]);
useEffect(() => {
if (mountRef.current) {
mountRef.current = false;
return;
}
fetchTableData();
}, [page, pageSize]);
}, [fetchTableData]);
const [drawerOpen, setDrawerOpen] = useState(false);
const [currentRecord, setCurrentRecord] = useState<CertificateType>();
@@ -154,17 +165,21 @@ const CertificateList = () => {
setCurrentRecord(certificate);
};
// TODO: Empty 样式
// TODO: 响应式表格
return (
<>
{NotificationContextHolder}
<PageHeader title={t("certificate.page.title")} />
<Table<CertificateType>
columns={tableColumns}
dataSource={tableData}
loading={loading}
locale={{
emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("certificate.nodata")} />,
}}
pagination={{
current: page,
pageSize: pageSize,

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

@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Button, Modal, notification, Space, Switch, Table, Tooltip, Typography, type TableProps } from "antd";
import { Button, Empty, Modal, notification, Space, Switch, Table, Tooltip, Typography, type TableProps } from "antd";
import { PageHeader } from "@ant-design/pro-components";
import { Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
import moment from "moment";
@@ -15,6 +15,9 @@ const WorkflowList = () => {
const { t } = useTranslation();
// a flag to fix the twice-rendering issue in strict mode
const mountRef = useRef(true);
const [modalApi, ModelContextHolder] = Modal.useModal();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
@@ -137,7 +140,7 @@ const WorkflowList = () => {
const [pageSize, setPageSize] = useState<number>(10);
// TODO: 表头筛选
const fetchTableData = async () => {
const fetchTableData = useCallback(async () => {
if (loading) return;
setLoading(true);
@@ -154,14 +157,20 @@ const WorkflowList = () => {
setTableTotal(resp.totalItems);
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
} finally {
setLoading(false);
}
};
}, [searchParams, page, pageSize]);
useEffect(() => {
if (mountRef.current) {
mountRef.current = false;
return;
}
fetchTableData();
}, [page, pageSize]);
}, [fetchTableData]);
const handleEnabledChange = async (workflow: WorkflowType) => {
try {
@@ -180,6 +189,7 @@ const WorkflowList = () => {
});
}
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
}
};
@@ -195,6 +205,7 @@ const WorkflowList = () => {
setTableData((prev) => prev.filter((item) => item.id !== workflow.id));
}
} catch (err) {
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
}
},
@@ -205,7 +216,6 @@ const WorkflowList = () => {
navigate("/workflows/detail");
};
// TODO: Empty 样式
// TODO: 响应式表格
return (
@@ -233,6 +243,9 @@ const WorkflowList = () => {
columns={tableColumns}
dataSource={tableData}
loading={loading}
locale={{
emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("workflow.nodata")} />,
}}
pagination={{
current: page,
pageSize: pageSize,