# 共享组件样式规范（已验证）

> 来源：board-coach 页面迁移验收通过后提取
> 用途：board-customer、board-finance 等看板页面复用
> 更新日期：2026-03-07

## 1. AI 悬浮按钮（ai-float-button）

- 组件路径：`components/ai-float-button/`
- 机器人 SVG icon + 渐变流动动画背景
- 默认 bottom 220rpx（在自定义底部导航栏上方）

## 2. 自定义底部导航栏（board-tab-bar）

- 组件路径：`components/board-tab-bar/`
- 用于非 TabBar 的看板子页面（board-coach、board-customer）
- SVG icon 从 H5 原型提取，路径 `/assets/icons/tab-*-nav*.svg`

### 样式参数
| 属性 | 值 |
|------|-----|
| 高度 | 100rpx |
| 背景 | #ffffff |
| 边框 | 1rpx solid #eeeeee |
| icon 尺寸 | 44rpx × 44rpx |
| label 字号 | 20rpx |
| label 颜色 | #8b8b8b（默认）/ #0052d9（active） |
| active 字重 | 500 |
| gap（icon↔label） | 4rpx |
| safe-area | padding-bottom: env(safe-area-inset-bottom) |

## 3. 筛选下拉组件（filter-dropdown）

- 组件路径：`components/filter-dropdown/`
- 全屏宽度面板 + 半透明遮罩 + 动态 top 计算

### 触发按钮样式
| 属性 | 值 |
|------|-----|
| padding | 16rpx 20rpx |
| 背景 | #ffffff |
| 边框 | 2rpx solid var(--color-gray-1) |
| 圆角 | var(--radius-md) |
| 文字+箭头 | justify-content: center |
| label 字号 | 24rpx |
| label 字重 | 600 |
| active 边框色 | var(--color-primary) |
| active 背景 | var(--color-primary-light) |

### 下拉面板样式
| 属性 | 值 |
|------|-----|
| 定位 | fixed, left:0, right:0 |
| 最大高度 | 60vh |
| 圆角 | 0 0 28rpx 28rpx |
| 阴影 | 0 16rpx 48rpx rgba(0,0,0,0.15) |
| 选项 padding | 34rpx 32rpx |
| 选项字号 | 28rpx |
| 分隔线 | 1rpx solid rgba(0,0,0,0.03) |
| active 颜色 | var(--color-primary) |
| active 字重 | 500 |

### 遮罩层
| 属性 | 值 |
|------|-----|
| 背景 | rgba(0,0,0,0.5) |
| z-index | 999（遮罩）/ 1000（面板） |

## 4. 顶部看板 Tab 栏

- 直接写在页面 wxml 中（非独立组件）
- sticky top: 0, z-index: 20

### 样式参数
| 属性 | 值 |
|------|-----|
| 背景 | #ffffff |
| 边框 | 2rpx solid #eeeeee |
| tab padding | 24rpx 0 |
| tab 字号 | 26rpx |
| tab 字重 | 500（默认）/ 600（active） |
| tab 颜色 | #8b8b8b（默认）/ #0052d9（active） |
| 下划线宽 | 42rpx |
| 下划线高 | 5rpx |
| 下划线渐变 | linear-gradient(90deg, #0052d9, #5b9cf8) |

## 5. 筛选栏容器

- sticky top: 70rpx, z-index: 15
- 滚动隐藏/显示（220ms ease 过渡）

### 样式参数
| 属性 | 值 |
|------|-----|
| 背景 | #f3f3f3 |
| padding | 14rpx 28rpx |
| 内框背景 | #ffffff |
| 内框圆角 | 14rpx |
| 内框 padding | 10rpx |
| 内框 gap | 14rpx |
| 内框边框 | 2rpx solid #eeeeee |
| 第一个筛选项 | flex: 1.8 |
| 其他筛选项 | flex: 1 |

## 6. 筛选选项内容（board-coach 专用，供参考）

### 排序维度
- 定档业绩最高 / 定档业绩最低 / 工资最高 / 工资最低 / 客源储值最高 / 任务完成最多

### 技能筛选
- 不限 / 🎱 中式追分 / 斯诺克 / 🀄 麻将棋牌 / 🎤团建K歌

### 时间筛选
- 本月 / 本季度 / 上月 / 前3个月(不含本月) / 上季度 / 最近6个月(不含本月，不支持客源储值最高)