front-end/.cursor/rules/style-compatibility.mdc

---
alwaysApply: true
---

### 样式兼容性规范 - gap 属性处理

#### 概述
`gap` 属性在 UNI-APP 的 APP 环境中兼容性差，本规范说明如何正确处理间距问题。

#### gap 属性的兼容性问题

**⚠️ 避免使用 gap 属性**
- `gap` 属性在 APP 环境中（特别是 nvue）可能不生效
- 微信小程序对 `gap` 的支持有限制
- 不同平台表现不一致，容易导致布局错乱

#### 推荐做法：使用 margin 代替 gap

**❌ 不推荐的写法**
```scss
.container {
  display: flex;
  gap: 20upx;  // APP 中可能不生效
}
```

**✅ 推荐的写法**
```scss
.container {
  display: flex;
  flex-direction: column;
}

.item {
  margin-top: 20upx;
  
  &:first-child {
    margin-top: 0;
  }
}
```

#### 动态间距类的正确写法

**以协议类组件为例**
```vue
<template>
  <view class="content-wrapper">
    <view 
      v-for="(item, index) in items" 
      :key="index"
      :class="{
        'content-item': true,
        'hasGap': item.gap === 2,
        'noGap': item.gap !== 2
      }"
    >
      {{ item.content }}
    </view>
  </view>
</template>

<style lang="scss" scoped>
.content-item {
  padding: 15upx 0;
}

.hasGap {
  margin-top: 40upx;
}

.noGap {
  margin-top: 0;
}
</style>
```

#### 条件编译处理 APP 差异

如果需要区分 APP 和小程序的间距值：

```scss
.hasGap {
  margin-top: 40upx;  // 小程序默认值
  
  /* #ifdef APP-PLUS */
  margin-top: 50upx;  // APP 可能需要更大间距
  /* #endif */
}
```

#### 检查清单

- [ ] 代码中是否使用了 `gap` 属性？→ 改用 `margin`
- [ ] 是否为 Flex 容器的第一个子元素设置了 `margin: 0`？
- [ ] 是否需要针对 APP 调整间距值？→ 使用条件编译