fix: 处理冲突

This commit is contained in:
ZhuRui
2026-07-27 17:02:25 +08:00
parent da1c365957
commit b6e91bfbac
6 changed files with 84 additions and 17 deletions
+52
View File
@@ -56,6 +56,58 @@ a {
background: transparent; background: transparent;
} }
// ===== 页面布局公共类 =====
// 页面容器:纵向 flex,占满高度;筛选区与表格区作为直接子元素
.page-container {
display: flex;
flex-direction: column;
height: 100%;
}
// 页面筛选区域:横向 flex,可换行
.page-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 16px;
row-gap: 12px;
flex-shrink: 0;
padding: 16px;
background-color: #fff;
border-radius: 10px;
}
// 筛选区域操作按钮组:横向 flex
.page-filter-actions {
display: flex;
align-items: center;
gap: 10px;
margin-left: 0;
}
// 表格显示区域:纵向 flex,占据剩余高度。
// overflow: hidden 防止子元素撑开容器,滚动由 Table 的 scroll.x/y 接管。
// 分页组件作为独立子元素置于 Table 下方,不占用 Table 的 scroll 空间。
.page-table {
display: flex;
flex-direction: column;
flex: 1;
background-color: #fff;
min-height: 0;
min-width: 0;
margin-top: 16px;
overflow: hidden;
border-radius: 10px;
}
.page-pagination {
flex-shrink: 0;
display: flex;
justify-content: flex-end;
padding: 14px;
}
// ===== antd 组件覆盖 ===== // ===== antd 组件覆盖 =====
// Tag 默认 margin-right: 8px,会挤开表格列或卡片内间距,统一去掉 // Tag 默认 margin-right: 8px,会挤开表格列或卡片内间距,统一去掉
+4 -5
View File
@@ -3,7 +3,6 @@ import { Button, Input, Table, Form, Space, Pagination, Select, DatePicker } fro
import { usePaymentsModel } from './model/usePaymentsModel'; import { usePaymentsModel } from './model/usePaymentsModel';
import { useContainerSize } from '@/hooks'; import { useContainerSize } from '@/hooks';
import styles from './index.module.less'; import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
@@ -29,9 +28,9 @@ export default defineComponent({
const { containerRef, height } = useContainerSize({ headerOffset: 55 }); const { containerRef, height } = useContainerSize({ headerOffset: 55 });
return () => ( return () => (
<div class={pageStyles.container}> <div class="page-container">
{/* ===== 筛选区 ===== */} {/* ===== 筛选区 ===== */}
<div class={pageStyles.filter}> <div class="page-filter">
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}> <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="时间" name="timeRange"> <Form.Item label="时间" name="timeRange">
<RangePicker <RangePicker
@@ -78,7 +77,7 @@ export default defineComponent({
</div> </div>
{/* ===== 表格区 ===== */} {/* ===== 表格区 ===== */}
<div class={pageStyles.table}> <div class="page-table">
{/* ===== 汇总区(按图片样式:左对齐的两段加粗数字) ===== */} {/* ===== 汇总区(按图片样式:左对齐的两段加粗数字) ===== */}
<div class={styles.summary}> <div class={styles.summary}>
<span class={styles.summaryItem}> <span class={styles.summaryItem}>
@@ -102,7 +101,7 @@ export default defineComponent({
</div> </div>
{/* 独立分页,右下方 */} {/* 独立分页,右下方 */}
<div class={pageStyles.pagination}> <div class="page-pagination">
<Pagination <Pagination
current={pagination.value.current} current={pagination.value.current}
pageSize={pagination.value.pageSize} pageSize={pagination.value.pageSize}
+1 -2
View File
@@ -3,7 +3,6 @@ import { Select, Table } from 'ant-design-vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { useReportsModel } from './model/useReportsModel'; import { useReportsModel } from './model/useReportsModel';
import styles from './index.module.less'; import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
/** /**
* 账务报表 * 账务报表
@@ -158,7 +157,7 @@ export default defineComponent({
]; ];
return ( return (
<div class={[pageStyles.container, styles.pageWrap]}> <div class={['page-container', styles.pageWrap]}>
{/* ===== 顶部标题 + 时间范围 ===== */} {/* ===== 顶部标题 + 时间范围 ===== */}
<div class={styles.reportHeader}> <div class={styles.reportHeader}>
<div class={styles.headerLeft}> <div class={styles.headerLeft}>
@@ -86,3 +86,22 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
// ===== 下方白卡片:包裹筛选区 + 表格区 =====
.tableSection {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 16px 20px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
overflow: hidden;
// 表格区紧贴筛选区下方,控制间距
:global(.page-table) {
margin-top: 16px;
}
}
+4 -5
View File
@@ -5,7 +5,6 @@ import { useWalletModel } from './model/useWalletModel';
import { useContainerSize } from '@/hooks'; import { useContainerSize } from '@/hooks';
import WalletDetailModal from './components/WalletDetailModal'; import WalletDetailModal from './components/WalletDetailModal';
import styles from './index.module.less'; import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
interface StatCardItem { interface StatCardItem {
key: string; key: string;
@@ -106,7 +105,7 @@ export default defineComponent({
]; ];
return ( return (
<div class={pageStyles.container}> <div class="page-container">
{/* ===== 顶部统计卡 ===== */} {/* ===== 顶部统计卡 ===== */}
<div class={styles.statCards}> <div class={styles.statCards}>
{statCards.map((item) => ( {statCards.map((item) => (
@@ -134,7 +133,7 @@ export default defineComponent({
</div> </div>
{/* ===== 筛选区 ===== */} {/* ===== 筛选区 ===== */}
<div class={pageStyles.filter}> <div class="page-filter">
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}> <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="用户昵称" name="searchUserName"> <Form.Item label="用户昵称" name="searchUserName">
<Input <Input
@@ -197,7 +196,7 @@ export default defineComponent({
{/* ===== 下方区域:筛选 + 表格(独立白卡片) ===== */} {/* ===== 下方区域:筛选 + 表格(独立白卡片) ===== */}
{/* ===== 表格区 ===== */} {/* ===== 表格区 ===== */}
<div class={pageStyles.table}> <div class="page-table">
<div ref={containerRef} class={styles.tableBody}> <div ref={containerRef} class={styles.tableBody}>
<Table <Table
columns={tableColumns} columns={tableColumns}
@@ -217,7 +216,7 @@ export default defineComponent({
</div> </div>
{/* 独立分页,右下方 */} {/* 独立分页,右下方 */}
<div class={pageStyles.pagination}> <div class="page-pagination">
<Pagination <Pagination
current={pagination.value.current} current={pagination.value.current}
pageSize={pagination.value.pageSize} pageSize={pagination.value.pageSize}
+4 -5
View File
@@ -4,7 +4,6 @@ import { useWithdrawModel } from './model/useWithdrawModel';
import { useContainerSize } from '@/hooks'; import { useContainerSize } from '@/hooks';
import WithdrawAuditModal from './components/WithdrawAuditModal'; import WithdrawAuditModal from './components/WithdrawAuditModal';
import styles from './index.module.less'; import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
/** /**
* bodyCell 渲染函数(操作列:根据审核状态切换"审核 / 查看"按钮) * bodyCell 渲染函数(操作列:根据审核状态切换"审核 / 查看"按钮)
@@ -79,9 +78,9 @@ export default defineComponent({
]; ];
return () => ( return () => (
<div class={pageStyles.container}> <div class="page-container">
{/* ===== 筛选区 ===== */} {/* ===== 筛选区 ===== */}
<div class={pageStyles.filter}> <div class="page-filter">
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}> <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="申请人昵称" name="searchUserName"> <Form.Item label="申请人昵称" name="searchUserName">
<Input <Input
@@ -137,7 +136,7 @@ export default defineComponent({
</div> </div>
{/* ===== 表格区 ===== */} {/* ===== 表格区 ===== */}
<div class={pageStyles.table}> <div class="page-table">
<div ref={containerRef} class={styles.tableBody}> <div ref={containerRef} class={styles.tableBody}>
<Table <Table
columns={tableColumns} columns={tableColumns}
@@ -158,7 +157,7 @@ export default defineComponent({
</div> </div>
{/* 独立分页,右下方 */} {/* 独立分页,右下方 */}
<div class={pageStyles.pagination}> <div class="page-pagination">
<Pagination <Pagination
current={pagination.value.current} current={pagination.value.current}
pageSize={pagination.value.pageSize} pageSize={pagination.value.pageSize}