cpms_org/cpms_operation_platform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 处理样式冗余问题

Browse Source
This commit is contained in:
ZhuRui
2026-07-28 16:14:20 +08:00
parent 49dbde11e0
commit 28e339a048
15 changed files with 254 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/pageLayout.module.less
+37
View File
@@ -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
+1 -1
View File
@@ -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
+4 -1
View File
@@ -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
-21
View File
@@ -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
+32 -35
View File
@@ -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,41 +230,39 @@ export default defineComponent({
{/* ===== 表格区 ===== */}
<div class={pageStyles.table}>
<div class={styles.eventBannerMain}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
renderJumpType,
renderStatus,
onEdit: handleEdit,
onToggleStatus: confirmToggleStatus,
onDelete: confirmDelete,
}),
}}
</Table>
</div>
<div ref={containerRef} class={pageStyles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
renderJumpType,
renderStatus,
onEdit: handleEdit,
onToggleStatus: confirmToggleStatus,
onDelete: confirmDelete,
}),
}}
</Table>
</div>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/events/list/index.module.less
-21
View File
@@ -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
+31 -34
View File
@@ -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,39 +300,37 @@ export default defineComponent({
{/* ===== 表格区 ===== */}
<div class={pageStyles.table}>
<div class={styles.eventListMain}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onView: handleView,
onAudit: handleAudit,
onToggleShelf: handleToggleShelf,
}),
}}
</Table>
</div>
<div ref={containerRef} class={pageStyles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onView: handleView,
onAudit: handleAudit,
onToggleShelf: handleToggleShelf,
}),
}}
</Table>
</div>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/events/orders/index.module.less
-40
View File
@@ -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
+46 -43
View File
@@ -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,54 +202,58 @@ export default defineComponent({
{/* ===== 表格区 ===== */}
<div class={pageStyles.table}>
<div class={styles.eventOrdersMain}>
{/* 金额汇总 */}
<div class={styles.summaryBar}>
<span class={styles.summaryItem}>
<span class={styles.summaryLabel}>总订单金额（已支付）：</span>
{/* 金额汇总 */}
<div class={pageStyles.summary}>
<span class={pageStyles.summaryItem}>
<span class={pageStyles.summaryLabel}>总订单金额（已支付）：</span>
<span class={pageStyles.summaryValue}>
{summary.value.totalOrderAmount.toFixed(2)}元
</span>
<span class={styles.summaryItem}>
<span class={styles.summaryLabel}>总实付金额：</span>
</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 class={styles.summaryLabel}>总退款金额：</span>
</span>
<span class={pageStyles.summaryItem}>
<span class={pageStyles.summaryLabel}>总退款金额：</span>
<span class={pageStyles.summaryValue}>
{summary.value.totalRefundAmount.toFixed(2)}元
</span>
</div>
</span>
</div>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onView: handleView,
onReRefund: handleReRefund,
}),
}}
</Table>
</div>
<div ref={containerRef} class={pageStyles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onView: handleView,
onReRefund: handleReRefund,
}),
}}
</Table>
</div>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/events/users/index.module.less
-21
View File
@@ -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
+28 -31
View File
@@ -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,37 +144,35 @@ export default defineComponent({
{/* ===== 表格区 ===== */}
<div class={pageStyles.table}>
<div class={styles.eventUsersMain}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onToggleStatus: handleToggleStatus,
}),
}}
</Table>
</div>
<div ref={containerRef} class={pageStyles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onToggleStatus: handleToggleStatus,
}),
}}
</Table>
</div>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
{/* 独立分页，右下方 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
</div>
src/pages/system/roles/index.module.less
-49
View File
@@ -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
+39 -44
View File
@@ -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>
<span>确定要删除角色</span>
<strong>{record.roleName}</strong>
<span>吗？</span>
</div>
<div class={styles.confirmTip}>删除后该角色下的用户将失去对应的权限，请谨慎操作。</div>
<>
<div class={pageStyles.confirmContent}>
<span>确定要删除角色</span>
<strong>{record.roleName}</strong>
<span>吗？</span>
</div>
</div>
<div class={pageStyles.confirmTip}>删除后该角色下的用户将失去对应的权限，请谨慎操作。</div>
</>
),
okText: '确认',
cancelText: '取消',
@@ -150,39 +147,37 @@ export default defineComponent({
{/* ===== 表格区 ===== */}
<div class={pageStyles.table}>
<div class={styles.systemRolesMain}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onViewUsers: handleViewUsers,
onEdit: handleEdit,
onDelete: triggerDelete,
}),
}}
</Table>
</div>
<div ref={containerRef} class={pageStyles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onViewUsers: handleViewUsers,
onEdit: handleEdit,
onDelete: triggerDelete,
}),
}}
</Table>
</div>
{/* 分页 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
{/* 分页 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>
src/pages/system/users/index.module.less
-41
View File
@@ -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
+36 -41
View File
@@ -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,14 +51,12 @@ 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={styles.confirmContent}>
<span>确定要{actionText}用户</span>
<strong>{record.realName}</strong>
<span>吗？</span>
</div>
<div class={pageStyles.confirmContent}>
<span>确定要{actionText}用户</span>
<strong>{record.realName}</strong>
<span>吗？</span>
</div>
),
okText: '确认',
@@ -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,38 +163,36 @@ export default defineComponent({
{/* ===== 表格区 ===== */}
<div class={pageStyles.table}>
<div class={styles.systemUsersMain}>
<div ref={containerRef} class={styles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onEdit: triggerEdit,
onToggleStatus: triggerToggle,
}),
}}
</Table>
</div>
<div ref={containerRef} class={pageStyles.tableBody}>
<Table
columns={tableColumns}
dataSource={dataSource.value}
loading={loading.value}
scroll={{ x: 'max-content', y: height.value }}
pagination={false}
>
{{
bodyCell: (args: any) =>
renderBodyCell({
...args,
onEdit: triggerEdit,
onToggleStatus: triggerToggle,
}),
}}
</Table>
</div>
{/* 独立分页 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
{/* 独立分页 */}
<div class={pageStyles.pagination}>
<Pagination
current={pagination.value.current}
pageSize={pagination.value.pageSize}
total={pagination.value.total}
showSizeChanger
showTotal={(total: number) => `共 ${total} 条`}
onChange={handlePageChange}
onShowSizeChange={handlePageChange}
/>
</div>
</div>