配置页面的优化
kangwenjing
parent
b1230f2891
commit
cd8feef377
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>UnisBase - 智能会议系统</title>
|
||||
<script type="module" crossorigin src="/assets/index-Bk1lir76.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index-BzRsHhy3.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CaWPk49l.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -38,17 +38,33 @@
|
|||
}
|
||||
|
||||
.user-data-scope-table-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.ant-card-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user-data-scope-table {
|
||||
height: 100%;
|
||||
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ant-spin-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
|
|
@ -56,6 +72,12 @@
|
|||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody::after {
|
||||
content: "";
|
||||
display: table-row;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.ant-table-pagination {
|
||||
background: #fff;
|
||||
margin: 12px 16px !important;
|
||||
|
|
|
|||
|
|
@ -205,30 +205,6 @@ export default function UserDataScopePage() {
|
|||
loadPageData();
|
||||
}, [loadPageData]);
|
||||
|
||||
useEffect(() => {
|
||||
const updateTableScrollY = () => {
|
||||
const tableCard = tableCardRef.current;
|
||||
if (!tableCard) {
|
||||
return;
|
||||
}
|
||||
const rect = tableCard.getBoundingClientRect();
|
||||
const footerReserve = 112;
|
||||
const nextScrollY = Math.max(260, Math.floor(window.innerHeight - rect.top - footerReserve));
|
||||
setTableScrollY(nextScrollY);
|
||||
};
|
||||
|
||||
updateTableScrollY();
|
||||
window.addEventListener("resize", updateTableScrollY);
|
||||
const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updateTableScrollY);
|
||||
if (observer && tableCardRef.current) {
|
||||
observer.observe(tableCardRef.current);
|
||||
}
|
||||
return () => {
|
||||
window.removeEventListener("resize", updateTableScrollY);
|
||||
observer?.disconnect();
|
||||
};
|
||||
}, [filteredGrantGroups.length, query.pageSize]);
|
||||
|
||||
const userOptions = useMemo(() => users.map((user) => ({
|
||||
label: (
|
||||
<Space direction="vertical" size={0}>
|
||||
|
|
@ -265,16 +241,57 @@ export default function UserDataScopePage() {
|
|||
});
|
||||
}, [grantGroups, query.keyword, query.resourceType, query.viewerUserId]);
|
||||
|
||||
const pagedGrantGroups = useMemo(() => {
|
||||
const start = (query.current - 1) * query.pageSize;
|
||||
return filteredGrantGroups.slice(start, start + query.pageSize);
|
||||
}, [filteredGrantGroups, query.current, query.pageSize]);
|
||||
|
||||
const activeGrantCount = useMemo(
|
||||
() => grantGroups.filter((group) => group.enabled && !isGroupExpired(group)).length,
|
||||
[grantGroups]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const maxPage = Math.max(1, Math.ceil(filteredGrantGroups.length / query.pageSize));
|
||||
if (query.current > maxPage) {
|
||||
setQuery((prev) => ({ ...prev, current: maxPage }));
|
||||
}
|
||||
}, [filteredGrantGroups.length, query.current, query.pageSize]);
|
||||
|
||||
useEffect(() => {
|
||||
const updateTableScrollY = () => {
|
||||
const tableCard = tableCardRef.current;
|
||||
if (!tableCard) {
|
||||
return;
|
||||
}
|
||||
const rect = tableCard.getBoundingClientRect();
|
||||
const tableBody = tableCard.querySelector<HTMLElement>(".ant-table-body");
|
||||
const pagination = tableCard.querySelector<HTMLElement>(".ant-table-pagination");
|
||||
const bodyTop = tableBody?.getBoundingClientRect().top ?? rect.top + 56;
|
||||
const paginationStyle = pagination ? window.getComputedStyle(pagination) : null;
|
||||
const paginationReserve = pagination
|
||||
? pagination.getBoundingClientRect().height
|
||||
+ Number.parseFloat(paginationStyle?.marginTop || "0")
|
||||
+ Number.parseFloat(paginationStyle?.marginBottom || "0")
|
||||
: 56;
|
||||
const nextScrollY = Math.max(180, Math.floor(rect.bottom - bodyTop - paginationReserve - 12));
|
||||
setTableScrollY(nextScrollY);
|
||||
};
|
||||
|
||||
let frameId = 0;
|
||||
const scheduleUpdate = () => {
|
||||
cancelAnimationFrame(frameId);
|
||||
frameId = requestAnimationFrame(updateTableScrollY);
|
||||
};
|
||||
|
||||
scheduleUpdate();
|
||||
window.addEventListener("resize", scheduleUpdate);
|
||||
const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(scheduleUpdate);
|
||||
if (observer && tableCardRef.current) {
|
||||
observer.observe(tableCardRef.current);
|
||||
}
|
||||
return () => {
|
||||
cancelAnimationFrame(frameId);
|
||||
window.removeEventListener("resize", scheduleUpdate);
|
||||
observer?.disconnect();
|
||||
};
|
||||
}, [filteredGrantGroups.length, query.current, query.pageSize]);
|
||||
|
||||
const selectedDrawerViewerId = Form.useWatch("viewerUserId", form);
|
||||
const ownerOptions = useMemo(
|
||||
() => userOptions.filter((option) => option.value !== selectedDrawerViewerId),
|
||||
|
|
@ -548,7 +565,7 @@ export default function UserDataScopePage() {
|
|||
rowKey="id"
|
||||
loading={loading}
|
||||
columns={columns}
|
||||
dataSource={pagedGrantGroups}
|
||||
dataSource={filteredGrantGroups}
|
||||
size="middle"
|
||||
scroll={{ y: tableScrollY, x: 980 }}
|
||||
pagination={getStandardPagination(
|
||||
|
|
|
|||
Loading…
Reference in New Issue