fix: add scroll.x='max-content' to 15 tables, widen narrow columns to prevent header wrapping

This commit is contained in:
2026-07-06 16:10:33 +08:00
parent 4020f79896
commit f4eac7b804
16 changed files with 30 additions and 28 deletions

View File

@@ -691,7 +691,7 @@ const AttendancePage: React.FC = () => {
columns={columns} columns={columns}
dataSource={records} dataSource={records}
loading={loading} loading={loading}
scroll={{ x: 1100 }} scroll={{ x: 'max-content' }}
pagination={{ pagination={{
current: page, current: page,
pageSize, pageSize,

View File

@@ -392,7 +392,7 @@ const BillsPage: React.FC = () => {
</Space> </Space>
</div> </div>
<Table <Table
scroll={{ x: 1200 }} scroll={{ x: 'max-content' }}
columns={columns} columns={columns}
dataSource={filteredBills} dataSource={filteredBills}
rowKey="id" rowKey="id"

View File

@@ -169,7 +169,7 @@ const ClassesPage: React.FC = () => {
render: (_: unknown, r: ClassItem) => `${r.studentCount || 0}/${r.maxStudents || '-'}`, render: (_: unknown, r: ClassItem) => `${r.studentCount || 0}/${r.maxStudents || '-'}`,
}, },
{ {
title: '状态', dataIndex: 'status', width: 90, title: '状态', dataIndex: 'status', width: 100,
render: (v: string) => { render: (v: string) => {
const cfg = STATUS_MAP[v] || { color: 'default', text: v }; const cfg = STATUS_MAP[v] || { color: 'default', text: v };
return <Tag color={cfg.color}>{cfg.text}</Tag>; return <Tag color={cfg.color}>{cfg.text}</Tag>;
@@ -231,6 +231,7 @@ const ClassesPage: React.FC = () => {
rowKey="id" rowKey="id"
loading={loading} loading={loading}
pagination={{ pageSize: 20 }} pagination={{ pageSize: 20 }}
scroll={{ x: 'max-content' }}
/> />
<Modal <Modal

View File

@@ -319,7 +319,7 @@ const ClassroomRentalsPage: React.FC = () => {
rowKey="id" rowKey="id"
loading={loading} loading={loading}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }} pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
scroll={{ x: 1200 }} scroll={{ x: 'max-content' }}
/> />
<Modal <Modal

View File

@@ -277,7 +277,7 @@ const ClassroomsPage: React.FC = () => {
</Space> </Space>
</div> </div>
<Table <Table
scroll={{ x: 900 }} scroll={{ x: 'max-content' }}
columns={columns} columns={columns}
dataSource={filteredData} dataSource={filteredData}
rowKey="id" rowKey="id"

View File

@@ -345,6 +345,7 @@ const DepartmentsPage: React.FC = () => {
loading={membersLoading} loading={membersLoading}
pagination={false} pagination={false}
size="small" size="small"
scroll={{ x: 'max-content' }}
locale={{ emptyText: '暂无成员' }} locale={{ emptyText: '暂无成员' }}
/> />
</Card> </Card>

View File

@@ -414,7 +414,7 @@ const DepositsPage: React.FC = () => {
dataSource={filteredData} dataSource={filteredData}
rowKey="id" rowKey="id"
loading={loading} loading={loading}
scroll={{ x: 1300 }} scroll={{ x: 'max-content' }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }} pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
/> />
</> </>
@@ -429,7 +429,7 @@ const DepositsPage: React.FC = () => {
dataSource={pendingRefunds} dataSource={pendingRefunds}
rowKey="id" rowKey="id"
loading={pendingLoading} loading={pendingLoading}
scroll={{ x: 800 }} scroll={{ x: 'max-content' }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }} pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
/> />
), ),

View File

@@ -441,7 +441,7 @@ const ExpensesPage: React.FC = () => {
dataSource={filteredRoomExpenses} dataSource={filteredRoomExpenses}
rowKey="id" rowKey="id"
loading={loading} loading={loading}
scroll={{ x: 800 }} scroll={{ x: 'max-content' }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }} pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
rowSelection={{ rowSelection={{
selectedRowKeys: selectedRoomKeys, selectedRowKeys: selectedRoomKeys,
@@ -591,7 +591,7 @@ const ExpensesPage: React.FC = () => {
dataSource={filteredPersonalExpenses} dataSource={filteredPersonalExpenses}
rowKey="id" rowKey="id"
loading={loading} loading={loading}
scroll={{ x: 800 }} scroll={{ x: 'max-content' }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }} pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
rowSelection={{ rowSelection={{
selectedRowKeys: selectedPersonalKeys, selectedRowKeys: selectedPersonalKeys,

View File

@@ -187,7 +187,7 @@ const OccupanciesPage: React.FC = () => {
{ title: '退宿原因', dataIndex: 'checkOutReason', render: (v: any) => v || '-' }, { title: '退宿原因', dataIndex: 'checkOutReason', render: (v: any) => v || '-' },
{ {
title: '操作', title: '操作',
width: 200, width: 220,
render: (_: any, record: any) => render: (_: any, record: any) =>
!record.checkOutDate ? ( !record.checkOutDate ? (
<Space> <Space>
@@ -451,7 +451,7 @@ const OccupanciesPage: React.FC = () => {
dataSource={filteredData} dataSource={filteredData}
rowKey="id" rowKey="id"
loading={loading} loading={loading}
scroll={{ x: 900 }} scroll={{ x: 'max-content' }}
pagination={{ pageSize: 15, showTotal: (total) => `${total}` }} pagination={{ pageSize: 15, showTotal: (total) => `${total}` }}
rowSelection={rowSelection} rowSelection={rowSelection}
/> />

View File

@@ -61,14 +61,14 @@ const OperationLogsPage: React.FC = () => {
{ {
title: '模块', title: '模块',
dataIndex: 'module', dataIndex: 'module',
width: 80, width: 100,
render: (v: string) => <Tag color={moduleColorMap[v] || 'default'}>{v}</Tag>, render: (v: string) => <Tag color={moduleColorMap[v] || 'default'}>{v}</Tag>,
}, },
{ title: '操作', dataIndex: 'action', width: 150 }, { title: '操作', dataIndex: 'action', width: 150 },
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
width: 70, width: 80,
render: (v: string) => { render: (v: string) => {
const s = statusMap[v] || statusMap['success']; const s = statusMap[v] || statusMap['success'];
return <Tag color={s.color}>{s.text}</Tag>; return <Tag color={s.color}>{s.text}</Tag>;
@@ -91,7 +91,7 @@ const OperationLogsPage: React.FC = () => {
{ {
title: '终端', title: '终端',
dataIndex: 'userAgent', dataIndex: 'userAgent',
width: 100, width: 120,
ellipsis: true, ellipsis: true,
render: (v: string) => { render: (v: string) => {
if (!v) return '-'; if (!v) return '-';
@@ -153,7 +153,7 @@ const OperationLogsPage: React.FC = () => {
dataSource={data} dataSource={data}
rowKey="id" rowKey="id"
loading={loading} loading={loading}
scroll={{ x: 1000 }} scroll={{ x: 'max-content' }}
pagination={{ pagination={{
current: page, current: page,
total, total,

View File

@@ -225,7 +225,7 @@ const RolesPage: React.FC = () => {
dataSource={data} dataSource={data}
rowKey="id" rowKey="id"
loading={loading} loading={loading}
scroll={{ x: 800 }} scroll={{ x: 'max-content' }}
pagination={false} pagination={false}
/> />

View File

@@ -194,7 +194,7 @@ const RoomsPage: React.FC = () => {
{ {
title: '租赁类型', title: '租赁类型',
dataIndex: 'rentalCategory', dataIndex: 'rentalCategory',
width: 80, width: 100,
render: (v: string) => { render: (v: string) => {
if (v === 'long') return <Tag color="blue"></Tag>; if (v === 'long') return <Tag color="blue"></Tag>;
if (v === 'short') return <Tag color="green"></Tag>; if (v === 'short') return <Tag color="green"></Tag>;
@@ -204,7 +204,7 @@ const RoomsPage: React.FC = () => {
{ {
title: '月租金', title: '月租金',
dataIndex: 'monthlyRate', dataIndex: 'monthlyRate',
width: 80, width: 100,
render: (v: number) => (v ? `¥${v}` : '-'), render: (v: number) => (v ? `¥${v}` : '-'),
}, },
{ title: '额定人数', dataIndex: 'capacity' }, { title: '额定人数', dataIndex: 'capacity' },
@@ -225,7 +225,7 @@ const RoomsPage: React.FC = () => {
{ {
title: '性别', title: '性别',
dataIndex: 'gender', dataIndex: 'gender',
width: 60, width: 80,
render: (v: any) => (v ? <Tag color={v === '男' ? 'blue' : 'pink'}>{v}</Tag> : '-'), render: (v: any) => (v ? <Tag color={v === '男' ? 'blue' : 'pink'}>{v}</Tag> : '-'),
}, },
{ {
@@ -392,7 +392,7 @@ const RoomsPage: React.FC = () => {
columns={columns} columns={columns}
dataSource={filteredData} dataSource={filteredData}
rowKey="id" rowKey="id"
scroll={{ x: 900 }} scroll={{ x: 'max-content' }}
loading={loading} loading={loading}
pagination={{ pageSize: 20, showTotal: (total) => `${total}` }} pagination={{ pageSize: 20, showTotal: (total) => `${total}` }}
rowClassName={(record) => (record.status === 'archived' ? 'archived-row' : '')} rowClassName={(record) => (record.status === 'archived' ? 'archived-row' : '')}

View File

@@ -221,9 +221,9 @@ const StudentsPage: React.FC = () => {
}; };
const columns = [ const columns = [
{ title: 'ID', dataIndex: 'id', width: 60 }, { title: 'ID', dataIndex: 'id', width: 70 },
{ title: '姓名', dataIndex: 'name', ellipsis: true }, { title: '姓名', dataIndex: 'name', ellipsis: true },
{ title: '性别', dataIndex: 'gender', width: 60 }, { title: '性别', dataIndex: 'gender', width: 70 },
{ {
title: '电话', title: '电话',
dataIndex: 'phone', dataIndex: 'phone',
@@ -265,7 +265,7 @@ const StudentsPage: React.FC = () => {
); );
}, },
}, },
{ title: '民族', dataIndex: 'ethnicity', width: 80 }, { title: '民族', dataIndex: 'ethnicity', width: 90 },
{ title: '紧急联系人', dataIndex: 'emergencyContact', ellipsis: true }, { title: '紧急联系人', dataIndex: 'emergencyContact', ellipsis: true },
{ title: '紧急联系人电话', dataIndex: 'emergencyPhone', ellipsis: true }, { title: '紧急联系人电话', dataIndex: 'emergencyPhone', ellipsis: true },
{ {

View File

@@ -92,7 +92,7 @@ const TeachersPage: React.FC = () => {
}; };
const columns = [ const columns = [
{ title: '姓名', dataIndex: 'name', key: 'name', width: 100 }, { title: '姓名', dataIndex: 'name', key: 'name', width: 120 },
{ title: '用户名', dataIndex: 'username', key: 'username', width: 130 }, { title: '用户名', dataIndex: 'username', key: 'username', width: 130 },
{ {
title: '角色', title: '角色',
@@ -135,7 +135,7 @@ const TeachersPage: React.FC = () => {
title: '状态', title: '状态',
dataIndex: 'isActive', dataIndex: 'isActive',
key: 'status', key: 'status',
width: 80, width: 90,
render: (v: boolean) => <Tag color={v ? 'green' : 'red'}>{v ? '在职' : '停用'}</Tag>, render: (v: boolean) => <Tag color={v ? 'green' : 'red'}>{v ? '在职' : '停用'}</Tag>,
}, },
{ {
@@ -148,7 +148,7 @@ const TeachersPage: React.FC = () => {
{ {
title: '操作', title: '操作',
key: 'actions', key: 'actions',
width: 80, width: 100,
render: (_: unknown, r: TeacherRow) => ( render: (_: unknown, r: TeacherRow) => (
<Button <Button
size="small" size="small"

View File

@@ -186,7 +186,7 @@ const TenantsPage: React.FC = () => {
</PermissionButton> </PermissionButton>
</div> </div>
<Table <Table
scroll={{ x: 700 }} scroll={{ x: 'max-content' }}
columns={columns} columns={columns}
dataSource={filteredData} dataSource={filteredData}
rowKey="id" rowKey="id"

View File

@@ -248,7 +248,7 @@ const UsersPage: React.FC = () => {
dataSource={data} dataSource={data}
rowKey="id" rowKey="id"
loading={loading} loading={loading}
scroll={{ x: 1000 }} scroll={{ x: 'max-content' }}
pagination={false} pagination={false}
/> />