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; 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 { .list-table-container .list-table-table--y-scroll.ant-table-wrapper .ant-table-body {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;

View File

@ -45,7 +45,14 @@ function ListTable<T extends Record<string, any>>({
className = "", className = "",
onChange, onChange,
}: ListTableProps<T>) { }: 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 const rowSelection: TableProps<T>["rowSelection"] = onSelectionChange
? { ? {
selectedRowKeys, selectedRowKeys,
@ -104,7 +111,7 @@ function ListTable<T extends Record<string, any>>({
const wrapperStyle = hasVerticalScroll 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) } as React.CSSProperties)
: undefined; : undefined;
@ -118,7 +125,7 @@ function ListTable<T extends Record<string, any>>({
dataSource={dataSource} dataSource={dataSource}
rowKey={rowKey} rowKey={rowKey}
pagination={mergedPagination} pagination={mergedPagination}
scroll={scroll} scroll={mergedScroll}
loading={loading} loading={loading}
onChange={onChange} onChange={onChange}
onRow={(record) => ({ onRow={(record) => ({

View File

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

View File

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

View File

@ -325,14 +325,14 @@ export default function TenantMeetingPointsSettings() {
<Text type="secondary"></Text> <Text type="secondary"></Text>
</div> </div>
</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> <ListTable<TenantMeetingPointsSettingVO>
rowKey="tenantId" rowKey="tenantId"
columns={columns} columns={columns}
dataSource={records} dataSource={records}
loading={loading} loading={loading}
totalCount={total} totalCount={total}
scroll={{ x: 1200, y: 500 }} scroll={{x: 1200, y: "calc(100vh - 380px)"}}
pagination={false} pagination={false}
/> />
</div> </div>

View File

@ -64,7 +64,11 @@ export default function Logs() {
const loadData = async (currentParams = params) => { const loadData = async (currentParams = params) => {
setLoading(true); setLoading(true);
try { 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 || []); setData(result.records || []);
setTotal(result.total || 0); setTotal(result.total || 0);
} finally { } finally {
@ -95,12 +99,14 @@ export default function Logs() {
}, [activeTab, isPlatformAdmin, params.tenantId]); }, [activeTab, isPlatformAdmin, params.tenantId]);
const handleTableChange = (pagination: any, _filters: any, sorter: any) => { const handleTableChange = (pagination: any, _filters: any, sorter: any) => {
const sField = sorter?.field || "createdAt";
const sOrder = sorter?.order || undefined;
setParams({ setParams({
...params, ...params,
current: pagination.current, current: pagination?.current || params.current,
size: pagination.pageSize, size: pagination?.pageSize || params.size,
sortField: sorter.field || "createdAt", sortField: sField,
sortOrder: sorter.order || "descend" 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.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> </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 <ListTable
rowKey="id" rowKey="id"
columns={columns} columns={columns}