refactor: ♻️ 暗黑模式适配调整和代码优化
This commit is contained in:
ray
250
.cursor/rules/css-style-guide.mdc
Normal file
250
.cursor/rules/css-style-guide.mdc
Normal file
@@ -0,0 +1,250 @@
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# CSS样式与UnoCSS使用规范
|
||||
|
||||
## 样式选择原则
|
||||
|
||||
### UnoCSS原子类使用规则
|
||||
|
||||
- **≤5个原子类**: 直接使用UnoCSS原子类
|
||||
- **>5个原子类**: 必须提取为语义化CSS类，避免模板膨胀
|
||||
|
||||
```vue
|
||||
<!-- ✅ 好的做法：5个以内原子类 -->
|
||||
<view class="flex items-center p-20rpx text-center bg-white"></view>
|
||||
```
|
||||
|
||||
### 优先使用UnoCSS预设shortcuts
|
||||
|
||||
参考 [unocss.config.ts](mdc:unocss.config.ts) 中定义的shortcuts：
|
||||
|
||||
```typescript
|
||||
// 已定义的shortcuts，优先使用
|
||||
"flex-center": "flex justify-center items-center"
|
||||
"flex-start": "flex justify-start items-center"
|
||||
"flex-between": "flex justify-between items-center"
|
||||
"flex-col-center": "flex flex-col items-center"
|
||||
```
|
||||
|
||||
## CSS类命名规范
|
||||
|
||||
### BEM命名规范
|
||||
|
||||
严格遵循BEM (Block\_\_Element--Modifier) 命名规范：
|
||||
|
||||
```scss
|
||||
// Block: 独立的功能组件
|
||||
.user-profile {
|
||||
}
|
||||
|
||||
// Element: Block的子元素
|
||||
.user-profile__avatar {
|
||||
}
|
||||
.user-profile__action {
|
||||
}
|
||||
.user-profile__badge {
|
||||
}
|
||||
|
||||
// Modifier: Block或Element的状态/变体
|
||||
.user-profile--dark {
|
||||
}
|
||||
.user-profile__action--active {
|
||||
}
|
||||
```
|
||||
|
||||
### 命名要求
|
||||
|
||||
1. **使用简短、易理解的英文单词**
|
||||
2. **符合业务场景语义**
|
||||
3. **避免缩写，除非是通用缩写**
|
||||
|
||||
```scss
|
||||
// ✅ 好的命名
|
||||
.user-profile__action
|
||||
.stats-card
|
||||
.service-icon
|
||||
.tool-item
|
||||
|
||||
// ❌ 坏的命名
|
||||
.up-act
|
||||
.sc
|
||||
.si
|
||||
.ti
|
||||
```
|
||||
|
||||
## 样式组织原则
|
||||
|
||||
### 1. 复用性判断
|
||||
|
||||
- 同一组合在项目中出现 >3次 → 提取为语义化类
|
||||
- 具备明确语义的区域 → 提取为语义化类
|
||||
- 需要主题适配的样式 → 提取为语义化类
|
||||
|
||||
### 2. 常用组合添加到shortcuts
|
||||
|
||||
当发现重复的原子类组合时，添加到 [unocss.config.ts](mdc:unocss.config.ts)：
|
||||
|
||||
```typescript
|
||||
shortcuts: [
|
||||
{
|
||||
// 现有shortcuts...
|
||||
|
||||
// 新增常用组合
|
||||
"card-container": "mx-30rpx my-20rpx bg-white rounded-16rpx shadow-sm",
|
||||
"action-button": "flex-center w-70rpx h-70rpx bg-white bg-opacity-90 rounded-full",
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
### 3. 主题适配
|
||||
|
||||
使用wot-design-uni的CSS变量或自定义变量：
|
||||
|
||||
```scss
|
||||
// ✅ 使用主题变量
|
||||
.service-icon {
|
||||
background-color: var(--wot-color-bg-light, #f3f4f6);
|
||||
}
|
||||
|
||||
// ✅ 响应式主题色
|
||||
:color="themeStore.isDark ? '#fff' : '#333'";
|
||||
```
|
||||
|
||||
### 4. 暗黑模式适配规则
|
||||
|
||||
#### 优先级顺序
|
||||
|
||||
1. **优先使用wot-design-uni内置变量** - 自动适配暗黑模式
|
||||
2. **使用项目 [theme.scss](mdc:src/styles/theme.scss) 定义的变量** - 统一管理主题色
|
||||
3. **最后考虑组件内部定义** - 仅用于特殊场景
|
||||
|
||||
#### 自定义主题变量定义
|
||||
|
||||
当需要自定义颜色时，必须在 [theme.scss](mdc:src/styles/theme.scss) 中定义：
|
||||
|
||||
```scss
|
||||
/* 在 theme.scss 中添加自定义变量 */
|
||||
:root,
|
||||
page {
|
||||
--custom-text-color: #333333;
|
||||
--custom-bg-color: #ffffff;
|
||||
--custom-border-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.wot-theme-dark {
|
||||
--custom-text-color: #ffffff;
|
||||
--custom-bg-color: #1a1a1a;
|
||||
--custom-border-color: #374151;
|
||||
}
|
||||
```
|
||||
|
||||
#### 组件中使用主题变量
|
||||
|
||||
```scss
|
||||
// ✅ 推荐：使用wot内置变量
|
||||
.my-component {
|
||||
background-color: var(--wot-card-bg);
|
||||
color: var(--wot-color-text);
|
||||
}
|
||||
|
||||
// ✅ 推荐：使用theme.scss定义的变量
|
||||
.my-component {
|
||||
background-color: var(--custom-bg-color);
|
||||
border-color: var(--custom-border-color);
|
||||
}
|
||||
|
||||
// ❌ 避免：组件内部硬编码暗黑模式
|
||||
.my-component {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.wot-theme-dark .my-component {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
```
|
||||
|
||||
#### 图标和文字颜色适配
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<!-- ✅ 推荐：使用计算属性适配 -->
|
||||
<wd-icon :color="iconColor" />
|
||||
|
||||
<!-- ✅ 推荐：使用CSS变量 -->
|
||||
<text style="color: var(--wot-color-text)">文本</text>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 图标颜色适配
|
||||
const iconColor = computed(() => (themeStore.isDark ? "#ffffff" : "#333333"));
|
||||
</script>
|
||||
```
|
||||
|
||||
## 实践示例
|
||||
|
||||
### 数据统计卡片
|
||||
|
||||
```vue
|
||||
<!-- 使用wot组件 + 少量原子类 -->
|
||||
<wd-card custom-class="mx-30rpx my-20rpx">
|
||||
<wd-grid :column="3" border>
|
||||
<wd-grid-item class="flex-col-center py-20rpx">
|
||||
<view class="text-36rpx font-600">0.00</view>
|
||||
<view class="text-26rpx text-gray-500">我的余额</view>
|
||||
</wd-grid-item>
|
||||
</wd-grid>
|
||||
</wd-card>
|
||||
```
|
||||
|
||||
### 用户操作按钮
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="user-profile__action" @click="handleClick">
|
||||
<wd-icon name="setting1" :color="iconColor" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.user-profile__action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 禁止项
|
||||
|
||||
❌ **不要在SCSS中重复定义UnoCSS已提供的工具类**
|
||||
❌ **不要使用 `@apply` 指令**
|
||||
❌ **不要把一次性样式放到全局**
|
||||
❌ **不要使用非语义化的类名**
|
||||
❌ **不要在模板中堆叠超过5个原子类**
|
||||
|
||||
## 组件库样式覆盖
|
||||
|
||||
使用wot-design-uni组件时：
|
||||
|
||||
- 使用 `custom-class` 传入类名
|
||||
- 使用 `:deep()` 进行样式穿透
|
||||
- 添加 `!important` 提升优先级
|
||||
|
||||
```vue
|
||||
<wd-button custom-class="logout-button" @click="logout">
|
||||
退出登录
|
||||
</wd-button>
|
||||
|
||||
<style scoped>
|
||||
:deep(.logout-button) {
|
||||
width: 100% !important;
|
||||
height: 80rpx !important;
|
||||
border-radius: 40rpx !important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
Reference in New Issue
Block a user