refactor: 优化 ListTable 组件滚动逻辑和样式

- 在 `ListTable` 组件中合并默认滚动配置
- 更新 `TenantMeetingPointsSettings`、`MeetingPointsManagement` 和 `logs/index` 页面的滚动设置
- 优化 `ListTable` 和相关页面的 CSS 样式
- 更新 `fetchLogs` 请求参数处理逻辑
dev_na
chenhao 2026-06-22 17:45:24 +08:00
parent 4499e6265b
commit 33caa1201f
6 changed files with 36 additions and 15 deletions

View File

@ -69,6 +69,10 @@
min-height: auto;
}
.list-table-container .list-table-table--y-scroll.ant-table-wrapper .ant-table-header {
flex-shrink: 0;
}
.list-table-container .list-table-table--y-scroll.ant-table-wrapper .ant-table-body {
flex: 1 1 auto;
min-height: 0;

View File

@ -45,7 +45,14 @@ function ListTable<T extends Record<string, any>>({
className = "",
onChange,
}: ListTableProps<T>) {
const hasVerticalScroll = scroll?.y !== undefined;
const mergedScroll = React.useMemo(() => {
return {
x: 1200,
...scroll,
};
}, [scroll]);
const hasVerticalScroll = mergedScroll.y !== undefined;
const rowSelection: TableProps<T>["rowSelection"] = onSelectionChange
? {
selectedRowKeys,
@ -104,7 +111,7 @@ function ListTable<T extends Record<string, any>>({
const wrapperStyle = hasVerticalScroll
? ({
["--list-table-scroll-y" as string]: typeof scroll.y === "number" ? `${scroll.y}px` : scroll.y,
["--list-table-scroll-y" as string]: typeof mergedScroll.y === "number" ? `${mergedScroll.y}px` : mergedScroll.y,
} as React.CSSProperties)
: undefined;
@ -118,7 +125,7 @@ function ListTable<T extends Record<string, any>>({
dataSource={dataSource}
rowKey={rowKey}
pagination={mergedPagination}
scroll={scroll}
scroll={mergedScroll}
loading={loading}
onChange={onChange}
onRow={(record) => ({

View File

@ -857,6 +857,10 @@ body::after {
min-height: 0;
}
.ant-table-wrapper .ant-table-header {
flex-shrink: 0;
}
.ant-table-wrapper .ant-table-body {
overflow-y: auto !important;
max-height: none !important;

View File

@ -388,14 +388,14 @@ export default function MeetingPointsManagement() {
const ledgerTableContent = (
<div style={{ display: "flex", flexDirection: "column", height: "400px" }}>
<div className="app-page__table-wrap" style={{ overflow: "auto", padding: "0 24px" }}>
<div className="app-page__table-wrap" style={{overflow: "hidden", padding: "0 24px"}}>
<ListTable<MeetingPointsLedgerListItemVO>
rowKey="id"
columns={ledgerColumns}
dataSource={records}
loading={loading}
totalCount={total}
scroll={{ x: 1100, y: 400 }}
scroll={{x: 1100, y: 280}}
pagination={false}
/>
</div>
@ -416,13 +416,13 @@ export default function MeetingPointsManagement() {
const personalAccountTableContent = (
<div style={{ display: "flex", flexDirection: "column", height: "400px" }}>
<div className="app-page__table-wrap" style={{ overflow: "auto", padding: "0 24px" }}>
<div className="app-page__table-wrap" style={{overflow: "hidden", padding: "0 24px"}}>
<ListTable<MeetingPointsPersonalAccountVO>
rowKey="userId"
columns={personalAccountColumns}
dataSource={pagedPersonalAccounts}
totalCount={personalAccountRows.length}
scroll={{ x: 900, y: 400 }}
scroll={{x: 900, y: 280}}
pagination={false}
/>
</div>

View File

@ -325,14 +325,14 @@ export default function TenantMeetingPointsSettings() {
<Text type="secondary"></Text>
</div>
</div>
<div className="app-page__table-wrap" style={{ overflow: "auto", padding: "0 24px" }}>
<div className="app-page__table-wrap" style={{overflow: "hidden", padding: "0 24px"}}>
<ListTable<TenantMeetingPointsSettingVO>
rowKey="tenantId"
columns={columns}
dataSource={records}
loading={loading}
totalCount={total}
scroll={{ x: 1200, y: 500 }}
scroll={{x: 1200, y: "calc(100vh - 380px)"}}
pagination={false}
/>
</div>

View File

@ -64,7 +64,11 @@ export default function Logs() {
const loadData = async (currentParams = params) => {
setLoading(true);
try {
const result = await fetchLogs({ ...currentParams, logType: activeTab });
const apiParams = {
...currentParams,
sortOrder: currentParams.sortOrder === "ascend" ? "asc" : currentParams.sortOrder === "descend" ? "desc" : undefined
};
const result = await fetchLogs({...apiParams, logType: activeTab});
setData(result.records || []);
setTotal(result.total || 0);
} finally {
@ -95,12 +99,14 @@ export default function Logs() {
}, [activeTab, isPlatformAdmin, params.tenantId]);
const handleTableChange = (pagination: any, _filters: any, sorter: any) => {
const sField = sorter?.field || "createdAt";
const sOrder = sorter?.order || undefined;
setParams({
...params,
current: pagination.current,
size: pagination.pageSize,
sortField: sorter.field || "createdAt",
sortOrder: sorter.order || "descend"
current: pagination?.current || params.current,
size: pagination?.pageSize || params.size,
sortField: sField,
sortOrder: sOrder
});
};
@ -345,7 +351,7 @@ export default function Logs() {
: <><Tabs.TabPane tab={<span><InfoCircleOutlined aria-hidden="true" />{t("logs.opLog")}</span>} key="OPERATION" /><Tabs.TabPane tab={<span><UserOutlined aria-hidden="true" />{t("logs.loginLog")}</span>} key="LOGIN" /></>}
</Tabs>
<div className="app-page__table-wrap" style={{ flex: 1, minHeight: 0, overflow: "auto", padding: "0 24px" }}>
<div className="app-page__table-wrap" style={{flex: 1, minHeight: 0, overflow: "hidden", padding: "0 24px"}}>
<ListTable
rowKey="id"
columns={columns}