fix: less模块化调用

This commit is contained in:
ZhuRui
2026-07-27 16:40:29 +08:00
parent fc621118e2
commit da1c365957
13 changed files with 94 additions and 107 deletions
+5 -4
View File
@@ -15,6 +15,7 @@ import { useBannerModel, BANNER_STATUS_OPTIONS } from './model/useBannerModel';
import { useContainerSize } from '@/hooks';
import BannerFormModal from './components/BannerFormModal';
import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
/**
* bodyCell 渲染函数
@@ -193,9 +194,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.container}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="标题" name="searchTitle">
<Input
@@ -229,7 +230,7 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div class={pageStyles.table}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
@@ -253,7 +254,7 @@ export default defineComponent({
</div>
{/* 独立分页,右下方 */}
<div class="page-pagination">
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
+5 -4
View File
@@ -24,6 +24,7 @@ import { useContainerSize, useState } from '@/hooks';
import EventRegulationModal from './components/EventRegulationModal';
import EventDetailModal from './components/EventDetailModal';
import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
const { RangePicker } = DatePicker;
@@ -154,9 +155,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.container}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="创建时间" name="createTimeRange">
<RangePicker
@@ -249,7 +250,7 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div class={pageStyles.table}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
@@ -271,7 +272,7 @@ export default defineComponent({
</div>
{/* 独立分页,右下方 */}
<div class="page-pagination">
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
+5 -4
View File
@@ -15,6 +15,7 @@ import { useOrderModel, ORDER_STATUS_OPTIONS, REFUND_STATUS_OPTIONS } from './mo
import { useContainerSize, useState } from '@/hooks';
import OrderDetailModal from './components/OrderDetailModal';
import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
const { RangePicker } = DatePicker;
@@ -135,9 +136,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.container}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="订单时间" name="orderTimeRange">
<RangePicker
@@ -201,7 +202,7 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div class={pageStyles.table}>
{/* 金额汇总 */}
<div class={styles.summaryBar}>
<span class={styles.summaryItem}>
@@ -238,7 +239,7 @@ export default defineComponent({
</div>
{/* 独立分页,右下方 */}
<div class="page-pagination">
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
+5 -4
View File
@@ -13,6 +13,7 @@ import {
import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
import { useContainerSize } from '@/hooks';
import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
/**
* bodyCell 渲染函数
@@ -102,9 +103,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.container}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="用户昵称" name="searchUserName">
<Input
@@ -143,7 +144,7 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div class={pageStyles.table}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
@@ -163,7 +164,7 @@ export default defineComponent({
</div>
{/* 独立分页,右下方 */}
<div class="page-pagination">
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
+5 -4
View File
@@ -3,6 +3,7 @@ import { Button, Input, Table, Form, Space, Pagination, Select, DatePicker } fro
import { usePaymentsModel } from './model/usePaymentsModel';
import { useContainerSize } from '@/hooks';
import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
const { RangePicker } = DatePicker;
@@ -28,9 +29,9 @@ export default defineComponent({
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
return () => (
<div class="page-container">
<div class={pageStyles.container}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="时间" name="timeRange">
<RangePicker
@@ -77,7 +78,7 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div class={pageStyles.table}>
{/* ===== 汇总区(按图片样式:左对齐的两段加粗数字) ===== */}
<div class={styles.summary}>
<span class={styles.summaryItem}>
@@ -101,7 +102,7 @@ export default defineComponent({
</div>
{/* 独立分页,右下方 */}
<div class="page-pagination">
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
+2 -1
View File
@@ -3,6 +3,7 @@ import { Select, Table } from 'ant-design-vue';
import * as echarts from 'echarts';
import { useReportsModel } from './model/useReportsModel';
import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
/**
* 账务报表
@@ -157,7 +158,7 @@ export default defineComponent({
];
return (
<div class={['page-container', styles.pageWrap]}>
<div class={[pageStyles.container, styles.pageWrap]}>
{/* ===== 顶部标题 + 时间范围 ===== */}
<div class={styles.reportHeader}>
<div class={styles.headerLeft}>
@@ -86,22 +86,3 @@
overflow: hidden;
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;
}
}
+5 -4
View File
@@ -5,6 +5,7 @@ import { useWalletModel } from './model/useWalletModel';
import { useContainerSize } from '@/hooks';
import WalletDetailModal from './components/WalletDetailModal';
import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
interface StatCardItem {
key: string;
@@ -105,7 +106,7 @@ export default defineComponent({
];
return (
<div class="page-container">
<div class={pageStyles.container}>
{/* ===== 顶部统计卡 ===== */}
<div class={styles.statCards}>
{statCards.map((item) => (
@@ -133,7 +134,7 @@ export default defineComponent({
</div>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="用户昵称" name="searchUserName">
<Input
@@ -196,7 +197,7 @@ export default defineComponent({
{/* ===== 下方区域:筛选 + 表格(独立白卡片) ===== */}
{/* ===== 表格区 ===== */}
<div class="page-table">
<div class={pageStyles.table}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
@@ -216,7 +217,7 @@ export default defineComponent({
</div>
{/* 独立分页,右下方 */}
<div class="page-pagination">
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
+5 -4
View File
@@ -4,6 +4,7 @@ import { useWithdrawModel } from './model/useWithdrawModel';
import { useContainerSize } from '@/hooks';
import WithdrawAuditModal from './components/WithdrawAuditModal';
import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
/**
* bodyCell 渲染函数(操作列:根据审核状态切换"审核 / 查看"按钮)
@@ -78,9 +79,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.container}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="申请人昵称" name="searchUserName">
<Input
@@ -136,7 +137,7 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div class={pageStyles.table}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
@@ -157,7 +158,7 @@ export default defineComponent({
</div>
{/* 独立分页,右下方 */}
<div class="page-pagination">
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
+5 -4
View File
@@ -6,6 +6,7 @@ import { useContainerSize } from '@/hooks';
import RoleFormModal from './components/RoleFormModal';
import UserListModal from './components/UserListModal';
import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
/**
* bodyCell 渲染
@@ -119,9 +120,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.container}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="角色" name="searchKeyword">
<Input
@@ -146,7 +147,7 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div class={pageStyles.table}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
@@ -168,7 +169,7 @@ export default defineComponent({
</div>
{/* 分页 */}
<div class="page-pagination">
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
+5 -4
View File
@@ -4,6 +4,7 @@ import { useUserModel, USER_ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/us
import { useContainerSize } from '@/hooks';
import UserFormModal from './components/UserFormModal';
import styles from './index.module.less';
import pageStyles from '@/components/page/pageLayout.module.less';
/**
* bodyCell 渲染函数
@@ -117,9 +118,9 @@ export default defineComponent({
];
return () => (
<div class="page-container">
<div class={pageStyles.container}>
{/* ===== 筛选区 ===== */}
<div class="page-filter">
<div class={pageStyles.filter}>
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
<Form.Item label="用户" name="searchKeyword">
<Input
@@ -162,7 +163,7 @@ export default defineComponent({
</div>
{/* ===== 表格区 ===== */}
<div class="page-table">
<div class={pageStyles.table}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
@@ -183,7 +184,7 @@ export default defineComponent({
</div>
{/* 独立分页 */}
<div class="page-pagination">
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}