fix: 处理样式冗余问题

src/assets/styles/pageLayout.module.less

@@ -88,3 +88,40 @@
     }
   }
 }
+
+// ===== 二次确认弹窗 =====
+
+.confirmContent {
+  padding: 4px 0;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+
+  strong {
+    margin: 0 4px;
+    font-weight: 600;
+  }
+}
+
+.confirmTip {
+  margin-top: 8px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 1.5;
+}
+
+.tabularLink {
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+:global(.toggleConfirmModal) {
+  .ant-modal-confirm-body {
+    padding: 24px !important;
+  }
+}
+
+:global(.deleteConfirmModal) {
+  .ant-modal-confirm-body {
+    padding: 24px !important;
+  }
+}

src/pages/events/banner/components/BannerFormModal.module.less

@@ -38,7 +38,7 @@
   }
 
   .uploadIcon {
-    font-size: 32px;
+    font-size: 24px;
     color: #999;
     font-weight: 300;
     line-height: 1;

src/pages/events/banner/components/BannerFormModal.tsx

@@ -13,6 +13,7 @@ import {
 } from 'ant-design-vue';
 import { JUMP_TYPE_OPTIONS, EVENT_OPTIONS, REGION_OPTIONS } from '../model/useBannerModel';
 import { ImageCropper } from '@yp-component/root';
+import { FileImageOutlined } from '@ant-design/icons-vue';
 import { uploadFile, OssUploadType } from '@/utils/oss';
 import dayjs from 'dayjs';
 import styles from './BannerFormModal.module.less';
@@ -317,7 +318,9 @@ export default defineComponent({
                     }`}
                     onClick={triggerFilePicker}
                   >
-                    <span class={styles.uploadIcon}>+</span>
+                    <span class={styles.uploadIcon}>
+                      <FileImageOutlined />
+                    </span>
                     <span class={styles.uploadHint}>点击上传</span>
                     <span class={styles.uploadTip}>
                       建议尺寸 1053*351 像素

src/pages/events/banner/index.module.less

@@ -1,21 +0,0 @@
-.eventBannerMain {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-
-  .tableBody {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-
-    :global {
-      .ant-spin-nested-loading,
-      .ant-spin-container,
-      .ant-table,
-      .ant-table-container {
-        height: 100%;
-      }
-    }
-  }
-}

src/pages/events/banner/index.tsx

@@ -14,7 +14,6 @@ import {
 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 '@/assets/styles/pageLayout.module.less';
 
 /**
@@ -231,8 +230,7 @@ export default defineComponent({
 
         {/* ===== 表格区 ===== */}
         <div class={pageStyles.table}>
-          <div class={styles.eventBannerMain}>
+          <div ref={containerRef} class={pageStyles.tableBody}>
-            <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
               dataSource={dataSource.value}
@@ -267,7 +265,6 @@ export default defineComponent({
             />
           </div>
         </div>
-        </div>
 
         {/* ===== 新增/编辑弹窗 ===== */}
         {modalVisible.value && (

src/pages/events/list/index.module.less

@@ -1,21 +0,0 @@
-.eventListMain {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-
-  .tableBody {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-
-    :global {
-      .ant-spin-nested-loading,
-      .ant-spin-container,
-      .ant-table,
-      .ant-table-container {
-        height: 100%;
-      }
-    }
-  }
-}

src/pages/events/list/index.tsx

@@ -25,7 +25,6 @@ import { useContainerSize, useState } from '@/hooks';
 import EventRegulationModal from './components/EventRegulationModal';
 import EventDetailModal from './components/EventDetailModal';
 import EventAuditModal from './components/EventAuditModal';
-import styles from './index.module.less';
 import pageStyles from '@/assets/styles/pageLayout.module.less';
 
 const { RangePicker } = DatePicker;
@@ -245,7 +244,7 @@ export default defineComponent({
               <Select
                 value={filterForm.status}
                 options={EVENT_STATUS_OPTIONS as any}
-                style={{ width: '110px' }}
+                style={{ width: '150px' }}
                 allowClear
                 onUpdate:value={(val: any) => (filterForm.status = val || '')}
               />
@@ -301,8 +300,7 @@ export default defineComponent({
 
         {/* ===== 表格区 ===== */}
         <div class={pageStyles.table}>
-          <div class={styles.eventListMain}>
+          <div ref={containerRef} class={pageStyles.tableBody}>
-            <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
               dataSource={dataSource.value}
@@ -335,7 +333,6 @@ export default defineComponent({
             />
           </div>
         </div>
-        </div>
 
         {/* ===== 弹窗区 ===== */}
         {regulationModalVisible.value && (

src/pages/events/orders/index.module.less

@@ -1,40 +0,0 @@
-.eventOrdersMain {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-
-  .summaryBar {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    padding: 12px 16px;
-    font-size: 14px;
-    color: #1a1a1a;
-
-    .summaryItem {
-      font-weight: 500;
-
-      .summaryLabel {
-        color: #666;
-        font-weight: 400;
-      }
-    }
-  }
-
-  .tableBody {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-
-    :global {
-      .ant-spin-nested-loading,
-      .ant-spin-container,
-      .ant-table,
-      .ant-table-container {
-        height: 100%;
-      }
-    }
-  }
-}

src/pages/events/orders/index.tsx

@@ -14,7 +14,6 @@ import {
 import { useOrderModel, ORDER_STATUS_OPTIONS, REFUND_STATUS_OPTIONS } from './model/useOrderModel';
 import { useContainerSize, useState } from '@/hooks';
 import OrderDetailModal from './components/OrderDetailModal';
-import styles from './index.module.less';
 import pageStyles from '@/assets/styles/pageLayout.module.less';
 
 const { RangePicker } = DatePicker;
@@ -176,7 +175,7 @@ export default defineComponent({
               <Select
                 value={filterForm.orderStatus}
                 options={ORDER_STATUS_OPTIONS as any}
-                style={{ width: '120px' }}
+                style={{ width: '140px' }}
                 allowClear
                 onUpdate:value={(val: any) => (filterForm.orderStatus = val || '')}
               />
@@ -185,7 +184,7 @@ export default defineComponent({
               <Select
                 value={filterForm.refundStatus}
                 options={REFUND_STATUS_OPTIONS as any}
-                style={{ width: '120px' }}
+                style={{ width: '140px' }}
                 allowClear
                 onUpdate:value={(val: any) => (filterForm.refundStatus = val || '')}
               />
@@ -203,24 +202,29 @@ export default defineComponent({
 
         {/* ===== 表格区 ===== */}
         <div class={pageStyles.table}>
-          <div class={styles.eventOrdersMain}>
           {/* 金额汇总 */}
-            <div class={styles.summaryBar}>
+          <div class={pageStyles.summary}>
-              <span class={styles.summaryItem}>
+            <span class={pageStyles.summaryItem}>
-                <span class={styles.summaryLabel}>总订单金额（已支付）：</span>
+              <span class={pageStyles.summaryLabel}>总订单金额（已支付）：</span>
+              <span class={pageStyles.summaryValue}>
                 {summary.value.totalOrderAmount.toFixed(2)}元
               </span>
-              <span class={styles.summaryItem}>
+            </span>
-                <span class={styles.summaryLabel}>总实付金额：</span>
+            <span class={pageStyles.summaryItem}>
+              <span class={pageStyles.summaryLabel}>总实付金额：</span>
+              <span class={pageStyles.summaryValue}>
                 {summary.value.totalPaidAmount.toFixed(2)}元
               </span>
-              <span class={styles.summaryItem}>
+            </span>
-                <span class={styles.summaryLabel}>总退款金额：</span>
+            <span class={pageStyles.summaryItem}>
+              <span class={pageStyles.summaryLabel}>总退款金额：</span>
+              <span class={pageStyles.summaryValue}>
                 {summary.value.totalRefundAmount.toFixed(2)}元
               </span>
+            </span>
           </div>
 
-            <div ref={containerRef} class={styles.tableBody}>
+          <div ref={containerRef} class={pageStyles.tableBody}>
             <Table
               columns={tableColumns}
               dataSource={dataSource.value}
@@ -252,7 +256,6 @@ export default defineComponent({
             />
           </div>
         </div>
-        </div>
 
         {/* ===== 详情弹窗 ===== */}
         {detailVisible.value && (

src/pages/events/users/index.module.less

@@ -1,21 +0,0 @@
-.eventUsersMain {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-
-  .tableBody {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-
-    :global {
-      .ant-spin-nested-loading,
-      .ant-spin-container,
-      .ant-table,
-      .ant-table-container {
-        height: 100%;
-      }
-    }
-  }
-}

src/pages/events/users/index.tsx

@@ -12,7 +12,6 @@ import {
 } from 'ant-design-vue';
 import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
 import { useContainerSize } from '@/hooks';
-import styles from './index.module.less';
 import pageStyles from '@/assets/styles/pageLayout.module.less';
 
 /**
@@ -145,8 +144,7 @@ export default defineComponent({
 
         {/* ===== 表格区 ===== */}
         <div class={pageStyles.table}>
-          <div class={styles.eventUsersMain}>
+          <div ref={containerRef} class={pageStyles.tableBody}>
-            <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
               dataSource={dataSource.value}
@@ -178,7 +176,6 @@ export default defineComponent({
           </div>
         </div>
       </div>
-      </div>
     );
   },
 });

src/pages/system/roles/index.module.less

@@ -1,49 +0,0 @@
-.systemRolesMain {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-
-  .tableBody {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-
-    :global {
-      .ant-spin-nested-loading,
-      .ant-spin-container,
-      .ant-table,
-      .ant-table-container {
-        height: 100%;
-      }
-    }
-  }
-
-  .userCountLink {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .confirmContent {
-    padding: 4px 24px;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.85);
-
-    strong {
-      margin: 0 4px;
-      font-weight: 600;
-    }
-  }
-
-  .confirmTip {
-    margin-top: 8px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.45);
-    line-height: 1.5;
-  }
-}
-
-:global(.deleteConfirmModal) {
-  .ant-modal-confirm-body {
-    padding: 24px !important;
-  }
-}

src/pages/system/roles/index.tsx

@@ -5,7 +5,6 @@ import { useRoleModel } from './model/useRoleModel';
 import { useContainerSize } from '@/hooks';
 import RoleFormModal from './components/RoleFormModal';
 import UserListModal from './components/UserListModal';
-import styles from './index.module.less';
 import pageStyles from '@/assets/styles/pageLayout.module.less';
 
 /**
@@ -27,7 +26,7 @@ function renderBodyCell({
 }) {
   if (column.dataIndex === 'userCount') {
     return (
-      <a class={styles.userCountLink} onClick={() => onViewUsers(record)}>
+      <a class={pageStyles.tabularLink} onClick={() => onViewUsers(record)}>
         {record.userCount}人
       </a>
     );
@@ -55,18 +54,16 @@ function confirmDelete({ record, onOk }: { record: any; onOk: (record: any) => v
   Modal.confirm({
     title: '确认删除',
     icon: null,
-    class: styles.deleteConfirmModal,
+    class: 'deleteConfirmModal',
     content: (
-      <div class={styles.systemRolesMain}>
+      <>
-        <div class={styles.confirmContent}>
+        <div class={pageStyles.confirmContent}>
-          <div>
           <span>确定要删除角色</span>
           <strong>{record.roleName}</strong>
           <span>吗？</span>
         </div>
-          <div class={styles.confirmTip}>删除后该角色下的用户将失去对应的权限，请谨慎操作。</div>
+        <div class={pageStyles.confirmTip}>删除后该角色下的用户将失去对应的权限，请谨慎操作。</div>
-        </div>
+      </>
-      </div>
     ),
     okText: '确认',
     cancelText: '取消',
@@ -150,8 +147,7 @@ export default defineComponent({
 
         {/* ===== 表格区 ===== */}
         <div class={pageStyles.table}>
-          <div class={styles.systemRolesMain}>
+          <div ref={containerRef} class={pageStyles.tableBody}>
-            <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
               dataSource={dataSource.value}
@@ -184,7 +180,6 @@ export default defineComponent({
             />
           </div>
         </div>
-        </div>
 
         {/* ===== 角色表单弹窗 ===== */}
         {formVisible.value && (

src/pages/system/users/index.module.less

@@ -1,41 +0,0 @@
-.systemUsersMain {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-
-  .tableBody {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-
-    :global {
-      .ant-spin-nested-loading,
-      .ant-spin-container,
-      .ant-table,
-      .ant-table-container {
-        height: 100%;
-      }
-    }
-  }
-
-  .confirmContent {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 4px 0;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.85);
-
-    strong {
-      margin: 0 4px;
-      font-weight: 600;
-    }
-  }
-}
-
-:global(.toggleConfirmModal) {
-  .ant-modal-confirm-body {
-    padding: 24px !important;
-  }
-}

src/pages/system/users/index.tsx

@@ -3,7 +3,6 @@ import { Button, Input, Table, Form, Space, Select, Modal, Pagination } from 'an
 import { useUserModel, USER_ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/useUserModel';
 import { useContainerSize } from '@/hooks';
 import UserFormModal from './components/UserFormModal';
-import styles from './index.module.less';
 import pageStyles from '@/assets/styles/pageLayout.module.less';
 
 /**
@@ -52,15 +51,13 @@ function confirmToggleStatus({ record, onOk }: { record: any; onOk: (record: any
   const actionText = isActive ? '禁用' : '启用';
   Modal.confirm({
     title: `确认${actionText}`,
-    class: styles.toggleConfirmModal,
+    class: 'toggleConfirmModal',
     content: (
-      <div class={styles.systemUsersMain}>
+      <div class={pageStyles.confirmContent}>
-        <div class={styles.confirmContent}>
         <span>确定要{actionText}用户</span>
         <strong>{record.realName}</strong>
         <span>吗？</span>
       </div>
-      </div>
     ),
     okText: '确认',
     cancelText: '取消',
@@ -136,7 +133,7 @@ export default defineComponent({
               <Select
                 value={filterForm.role}
                 options={USER_ROLE_OPTIONS as any}
-                style={{ width: '120px' }}
+                style={{ width: '140px' }}
                 allowClear
                 onUpdate:value={(val: any) => (filterForm.role = val || '')}
               />
@@ -145,7 +142,7 @@ export default defineComponent({
               <Select
                 value={filterForm.status}
                 options={USER_STATUS_OPTIONS as any}
-                style={{ width: '120px' }}
+                style={{ width: '140px' }}
                 allowClear
                 onUpdate:value={(val: any) => (filterForm.status = val || '')}
               />
@@ -166,8 +163,7 @@ export default defineComponent({
 
         {/* ===== 表格区 ===== */}
         <div class={pageStyles.table}>
-          <div class={styles.systemUsersMain}>
+          <div ref={containerRef} class={pageStyles.tableBody}>
-            <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
               dataSource={dataSource.value}
@@ -199,7 +195,6 @@ export default defineComponent({
             />
           </div>
         </div>
-        </div>
 
         {/* ===== 新增/编辑弹窗 ===== */}
         {modalVisible.value && (