tt/youlai-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 代码优化

Browse Source
This commit is contained in:
ray
2025-10-04 16:54:22 +08:00
parent 10c8b9fc75
commit dbb43bc57e
2 changed files with 94 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
.cursor/rules/css-style-guide.mdc
View File

@@ -225,7 +225,31 @@ const iconColor = computed(() => (themeStore.isDark ? "#ffffff" : "#333333"));
❌ **不要使用 `@apply` 指令**
❌ **不要把一次性样式放到全局**
❌ **不要使用非语义化的类名**
❌ **不要在模板中堆叠超过5个原子类**
❌ **不要在模板中堆叠超过5个原子类**
❌ **不要混用UnoCSS原子类和自定义CSS类** - 一个元素应该只使用原子类或只使用自定义类，避免样式管理混乱
### 混用问题示例
```vue
<!-- ❌ 错误：混用原子类和自定义类 -->
<view class="flex-col-center py-20rpx tool-item">内容</view>
<wd-card custom-class="mx-30rpx my-20rpx stats-card">内容</wd-card>
<!-- ✅ 正确：只使用原子类（≤5个） -->
<view class="flex-col-center py-20rpx">内容</view>
<!-- ✅ 正确：只使用自定义类 -->
<view class="tool-item">内容</view>
<wd-card custom-class="stats-card">内容</wd-card>
```
### 解决方案
当需要混用时，选择以下方案之一：
1. **原子类数量≤5个**：移除自定义类，只使用原子类
2. **原子类数量>5个**：将所有样式合并到自定义类中
3. **语义明确的区域**：优先使用自定义类，将原子类样式合并进去
## 组件库样式覆盖

91
src/pages/mine/index.vue
View File

@@ -47,22 +47,22 @@
</view>
<!-- 数据统计 -->
<wd-card custom-class="mx-30rpx my-20rpx">
<wd-card custom-class="stats-card">
<wd-grid :column="3" border>
<wd-grid-item @click="navigateToSection('wallet')">
<view class="flex-col-center py-20rpx">
<view class="stats-item">
<view class="mb-8rpx text-36rpx font-600">0.00</view>
<view class="text-26rpx text-gray-500">我的余额</view>
</view>
</wd-grid-item>
<wd-grid-item @click="navigateToSection('favorites')">
<view class="flex-col-center py-20rpx">
<view class="stats-item">
<view class="mb-8rpx text-36rpx font-600">0</view>
<view class="text-26rpx text-gray-500">我的收藏</view>
</view>
</wd-grid-item>
<wd-grid-item @click="navigateToSection('history')">
<view class="flex-col-center py-20rpx">
<view class="stats-item">
<view class="mb-8rpx text-36rpx font-600">0</view>
<view class="text-26rpx text-gray-500">浏览历史</view>
</view>
@@ -71,7 +71,7 @@
</wd-card>
<!-- 常用工具 -->
<wd-card>
<wd-card custom-class="tools-card">
<template #header>
<view class="flex-start">
<wd-icon name="tools" size="18" :color="currentThemeColor" />
@@ -90,7 +90,7 @@
</wd-grid-item>
<wd-grid-item @click="navigateToFAQ">
<view class="flex-col-center py-20rpx">
<view class="tool-icon mb-12rpx">
<view class="mb-12rpx">
<wd-icon name="help-circle" size="24" :color="currentThemeColor" />
</view>
<view class="text-24rpx">常见问题</view>
@@ -98,7 +98,7 @@
</wd-grid-item>
<wd-grid-item @click="handleQuestionFeedback">
<view class="flex-col-center py-20rpx">
<view class="tool-icon mb-12rpx">
<view class="mb-12rpx">
<wd-icon name="check-circle" size="24" :color="currentThemeColor" />
</view>
<view class="text-24rpx">问题反馈</view>
@@ -106,7 +106,7 @@
</wd-grid-item>
<wd-grid-item @click="navigateToAbout">
<view class="flex-col-center py-20rpx">
<view class="tool-icon mb-12rpx">
<view class="mb-12rpx">
<wd-icon name="info-circle" size="24" :color="currentThemeColor" />
</view>
<view class="text-24rpx">关于我们</view>
@@ -116,7 +116,7 @@
</wd-card>
<!-- 推荐服务 -->
<wd-card>
<wd-card custom-class="services-card">
<template #header>
<view class="flex-start">
<wd-icon name="star" size="18" :color="currentThemeColor" />
@@ -129,6 +129,7 @@
title="会员中心"
label="解锁更多特权"
is-link
custom-class="service-cell"
@click="navigateToSection('services', 'vip')"
>
<template #icon>
@@ -142,6 +143,7 @@
title="优惠券"
label="查看我的优惠券"
is-link
custom-class="service-cell"
@click="navigateToSection('services', 'coupon')"
>
<template #icon>
@@ -155,6 +157,7 @@
title="邀请有礼"
label="邀请好友得奖励"
is-link
custom-class="service-cell"
@click="navigateToSection('services', 'invite')"
>
<template #icon>
@@ -326,8 +329,14 @@ const navigateToSection = (section: string, subSection?: string) => {
width: 70rpx;
height: 70rpx;
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10rpx);
border-radius: 50%;
// 移除无效果的box-shadow
transition: all 0.3s ease;
&:active {
background-color: rgba(255, 255, 255, 0.7);
transform: scale(0.9);
}
}
// 通知徽章 - 超过5个原子类，使用CSS类
@@ -359,24 +368,56 @@ const navigateToSection = (section: string, subSection?: string) => {
height: 80rpx;
background-color: var(--wot-color-bg-light, #f3f4f6);
border-radius: 16rpx;
}
// 工具图标
.tool-icon {
display: flex;
align-items: center;
justify-content: center;
width: 90rpx;
height: 90rpx;
background-color: var(--wot-color-bg-light, #f3f4f6);
border-radius: 18rpx;
transition: transform 0.15s ease;
transition: all 0.3s ease;
&:active {
background-color: var(--wot-color-theme, #165dff);
transform: scale(0.95);
}
}
// 数据统计项
.stats-item {
cursor: pointer;
transition: all 0.3s ease;
&:active {
background-color: var(--wot-color-bg-light, #f8f9fa);
transform: scale(0.98);
}
}
// 卡片动画
:deep(.stats-card) {
margin: 20rpx 30rpx;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
transform: translateY(-2rpx);
}
}
:deep(.tools-card),
:deep(.services-card) {
transition: all 0.3s ease;
&:hover {
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
transform: translateY(-2rpx);
}
}
// 服务项动画
:deep(.service-cell) {
transition: all 0.2s ease;
&:active {
background-color: var(--wot-color-bg-light, #f8f9fa) !important;
transform: scale(0.98);
}
}
// 登录按钮样式
:deep(.btn-login) {
font-size: 24rpx !important;
@@ -390,5 +431,11 @@ const navigateToSection = (section: string, subSection?: string) => {
font-size: 32rpx !important;
font-weight: bold !important;
border-radius: 40rpx !important;
transition: all 0.3s ease !important;
&:active {
opacity: 0.8 !important;
transform: scale(0.98) !important;
}
}
</style>