fix(shop): 修正路由路径和修复弹窗关闭按钮错位
- 将所有 '/shopOrder' 路径修正为 '/shop/shopOrder' 以保持路由一致性 - 将优惠券使用路径从 '/shopGoodsCoupon' 改为 '/market/coupon' - 修改今日统计数据 salesAmount 类型从字符串改为数字 - 在用户状态管理中添加额外菜单项 '/shop/shopExpressTemplateDetail',仅注册路由不显示侧边栏 - 修复 ant-modal 关闭按钮内部 span 尺寸,解决图标偏移和缩小问题 - 在样式文件末尾添加 .ant-modal-close-x 的宽高和行高样式并加 !important 覆盖默认样式
This commit is contained in:
@@ -29,3 +29,28 @@
|
|||||||
- `RegionsSelect` 组件位于 `src/components/RegionsSelect/`,数据源为 `public/json/regions-data.json`
|
- `RegionsSelect` 组件位于 `src/components/RegionsSelect/`,数据源为 `public/json/regions-data.json`
|
||||||
- 级联选择器 value 是字符串数组(如 `["110000", "110100"]`),需与 model 的 number 类型互转
|
- 级联选择器 value 是字符串数组(如 `["110000", "110100"]`),需与 model 的 number 类型互转
|
||||||
- 路由路径 `/shop/shopExpressTemplateDetail` 依赖后端菜单配置,如不一致需调整
|
- 路由路径 `/shop/shopExpressTemplateDetail` 依赖后端菜单配置,如不一致需调整
|
||||||
|
|
||||||
|
## 修复 ant-modal 关闭按钮错位
|
||||||
|
|
||||||
|
### 问题
|
||||||
|
弹窗的 X 关闭按钮 X 图标位置偏移/缩小,看起来像悬空在弹窗头部外。
|
||||||
|
|
||||||
|
### 根因
|
||||||
|
- `src/styles/component.less` 之前覆盖了 `.ant-modal-close` 为 30x30px
|
||||||
|
- 但 `ele-admin-pro/es/style/common.less` 第 468 行设置内部 span `.ant-modal-close-x` 为 54x54px
|
||||||
|
- 按钮 30x30 装着 54x54 的内容 + 22px lineHeight,导致 X 图标向上溢出
|
||||||
|
|
||||||
|
### 修复
|
||||||
|
在 `src/styles/component.less` 末尾添加:
|
||||||
|
```less
|
||||||
|
.ant-modal-close-x {
|
||||||
|
width: 30px !important;
|
||||||
|
height: 30px !important;
|
||||||
|
line-height: 30px !important;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
让内部 span 尺寸与按钮一致,X 图标正常居中。
|
||||||
|
|
||||||
|
### 技术要点
|
||||||
|
- antd CSS-in-JS 用 `:where(...)` 包裹,特异性为 0/2/0,需用 `!important` 覆盖
|
||||||
|
- `.ant-modal-close-x` 内部包含 CloseOutlined icon,width/height 决定其容器大小
|
||||||
|
|||||||
@@ -12,7 +12,15 @@ import { clone } from '@/api/system/menu';
|
|||||||
import { message } from 'ant-design-vue/es';
|
import { message } from 'ant-design-vue/es';
|
||||||
import { logout } from '@/utils/page-tab-util';
|
import { logout } from '@/utils/page-tab-util';
|
||||||
// import { isExternalLink } from 'ele-admin-pro';
|
// import { isExternalLink } from 'ele-admin-pro';
|
||||||
const EXTRA_MENUS: any = [];
|
// 额外菜单:仅注册路由,不在侧边栏显示
|
||||||
|
const EXTRA_MENUS: any = [
|
||||||
|
{
|
||||||
|
path: '/shop/shopExpressTemplateDetail',
|
||||||
|
component: 'shop/shopExpressTemplateDetail',
|
||||||
|
title: '配送区域',
|
||||||
|
hide: 1
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
export interface UserState {
|
export interface UserState {
|
||||||
info: User | null;
|
info: User | null;
|
||||||
|
|||||||
@@ -118,3 +118,10 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 修复关闭按钮内部 span 尺寸与按钮不一致导致的图标错位 */
|
||||||
|
.ant-modal-close-x {
|
||||||
|
width: 30px !important;
|
||||||
|
height: 30px !important;
|
||||||
|
line-height: 30px !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -176,7 +176,7 @@
|
|||||||
<UngroupOutlined />
|
<UngroupOutlined />
|
||||||
参数配置
|
参数配置
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button block @click="navigateTo('/shopOrder')">
|
<a-button block @click="navigateTo('/shop/shopOrder')">
|
||||||
<CalendarOutlined />
|
<CalendarOutlined />
|
||||||
订单管理
|
订单管理
|
||||||
</a-button>
|
</a-button>
|
||||||
@@ -205,7 +205,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
|
import { reactive, computed, onMounted, onUnmounted } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import {
|
import {
|
||||||
ReloadOutlined,
|
ReloadOutlined,
|
||||||
@@ -253,21 +253,21 @@ const loading = computed(() => siteLoading.value || statisticsLoading.value);
|
|||||||
// 核心统计数据
|
// 核心统计数据
|
||||||
const coreStats = reactive([
|
const coreStats = reactive([
|
||||||
{ icon: '🏸', label: '用户总数', value: 0, desc: '注册用户', color: 'blue', to: '/system/user' },
|
{ icon: '🏸', label: '用户总数', value: 0, desc: '注册用户', color: 'blue', to: '/system/user' },
|
||||||
{ icon: '📦', label: '订单总数', value: 0, desc: '全部订单', color: 'orange', to: '/shopOrder' },
|
{ icon: '📦', label: '订单总数', value: 0, desc: '全部订单', color: 'orange', to: '/shop/shopOrder' },
|
||||||
{ icon: '💰', label: '总营业额', value: '0.00', desc: '元', color: 'purple', to: '/shopOrder' },
|
{ icon: '💰', label: '总营业额', value: '0.00', desc: '元', color: 'purple', to: '/shop/shopOrder' },
|
||||||
{ icon: '⏱️', label: '运行天数', value: 0, desc: '系统运行', color: 'green', to: '' },
|
{ icon: '⏱️', label: '运行天数', value: 0, desc: '系统运行', color: 'green', to: '' },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 待处理事项
|
// 待处理事项
|
||||||
const todoItems = reactive([
|
const todoItems = reactive([
|
||||||
{ label: '待发货订单', value: 0, to: '/shopOrder', tagColor: 'blue', dotColor: 'dot-blue', urgent: false },
|
{ label: '待发货订单', value: 0, to: '/shop/shopOrder', tagColor: 'blue', dotColor: 'dot-blue', urgent: false },
|
||||||
{ label: '退款申请', value: 0, to: '/shopOrder', tagColor: 'orange', dotColor: 'dot-orange', urgent: false },
|
{ label: '退款申请', value: 0, to: '/shop/shopOrder', tagColor: 'orange', dotColor: 'dot-orange', urgent: false },
|
||||||
{ label: '优惠券使用', value: 0, to: '/shopGoodsCoupon', tagColor: 'cyan', dotColor: 'dot-cyan', urgent: false },
|
{ label: '优惠券使用', value: 0, to: '/market/coupon', tagColor: 'cyan', dotColor: 'dot-cyan', urgent: false },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 今日统计
|
// 今日统计
|
||||||
const todayStats = reactive({
|
const todayStats = reactive({
|
||||||
salesAmount: '0.00',
|
salesAmount: 0.00,
|
||||||
orderCount: 0,
|
orderCount: 0,
|
||||||
newUsers: 0,
|
newUsers: 0,
|
||||||
couponUsed: 0,
|
couponUsed: 0,
|
||||||
@@ -276,7 +276,7 @@ const todayStats = reactive({
|
|||||||
// 快速入口
|
// 快速入口
|
||||||
const quickLinks = [
|
const quickLinks = [
|
||||||
{ to: '/website/field', icon: '⚙️', label: '参数配置', bg: '#eff6ff' },
|
{ to: '/website/field', icon: '⚙️', label: '参数配置', bg: '#eff6ff' },
|
||||||
{ to: '/shopOrder', icon: '📦', label: '订单管理', bg: '#f0fdf4' },
|
{ to: '/shop/shopOrder', icon: '📦', label: '订单管理', bg: '#f0fdf4' },
|
||||||
{ to: '/system/user', icon: '👥', label: '用户管理', bg: '#fff7ed' },
|
{ to: '/system/user', icon: '👥', label: '用户管理', bg: '#fff7ed' },
|
||||||
{ to: '/website/index', icon: '🏪', label: '站点管理', bg: '#faf5ff' },
|
{ to: '/website/index', icon: '🏪', label: '站点管理', bg: '#faf5ff' },
|
||||||
{ to: '/shopGoods', icon: '🏸', label: '商品管理', bg: '#ecfdf5' },
|
{ to: '/shopGoods', icon: '🏸', label: '商品管理', bg: '#ecfdf5' },
|
||||||
@@ -323,11 +323,11 @@ const loadData = async () => {
|
|||||||
// 更新核心统计数据
|
// 更新核心统计数据
|
||||||
coreStats[0].value = userCount.value || 0;
|
coreStats[0].value = userCount.value || 0;
|
||||||
coreStats[1].value = orderCount.value || 0;
|
coreStats[1].value = orderCount.value || 0;
|
||||||
coreStats[2].value = totalSales.value || '0.00';
|
coreStats[2].value = totalSales.value || 0;
|
||||||
coreStats[3].value = runDays.value || 0;
|
coreStats[3].value = runDays.value || 0;
|
||||||
|
|
||||||
// 模拟今日数据(实际应从后端统计接口获取)
|
// 模拟今日数据(实际应从后端统计接口获取)
|
||||||
todayStats.salesAmount = totalSales.value || '0.00';
|
todayStats.salesAmount = totalSales.value;
|
||||||
todayStats.orderCount = orderCount.value || 0;
|
todayStats.orderCount = orderCount.value || 0;
|
||||||
todayStats.newUsers = Math.floor((userCount.value || 0) * 0.1);
|
todayStats.newUsers = Math.floor((userCount.value || 0) * 0.1);
|
||||||
todayStats.couponUsed = 0;
|
todayStats.couponUsed = 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user