微信小程序页面迁移校验之前 P5任务处理之前

apps/miniprogram - 副本/doc/shared-component-specs.md

@@ -0,0 +1,114 @@
+# 共享组件样式规范（已验证）
+
+> 来源：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个月(不含本月，不支持客源储值最高)