# Brainstorm Summary

- Change: weapp-capsule-safearea
- Date: 2026-06-24

## 确认的技术方案

采用「统一移入 TopBar + 自动包裹 right slot」的方案：

1. 新增 `CapsuleSafeArea.vue` 组件，基于 `uni.getMenuButtonBoundingClientRect()` 计算胶囊安全宽度，以 wrapper 形式给 slot 内容加 `margin-left`。
2. `TopBar.vue` 内部自动用 `CapsuleSafeArea` 包裹 right slot，页面无需感知安全区。
3. 三个首页组件和 `TaskListView` 从自定义 header 重构为使用 `TopBar`；`ScheduleView` 的「今天」「新增排班」均移入 `TopBar` right slot。

## 关键取舍与风险

- **取舍**：选择 TopBar 自动包裹而非 spacer/composable，是因为最符合「统一移入 TopBar」的目标，页面改造成本最低。
- **风险**：`uni.getMenuButtonBoundingClientRect()` 可能获取失败，使用基于屏幕宽度的估算值兜底。
- **风险**：横屏/旋转时胶囊尺寸变化，当前不做实时监听，后续如需可单独提 change。

## 测试策略

- `npm run type-check`
- `npm run build:mp-weixin`
- 微信开发者工具真机检查
- H5 构建确认布局无回归

## Spec Patch

将回写 `openspec/changes/weapp-capsule-safearea/specs/weapp-capsule-safearea/spec.md`：

- 明确首页、任务列表需要从「自定义 header」重构为使用 `TopBar`。
- 明确 `ScheduleView` 中「今天」和「新增排班」均移入 `TopBar` right slot。
- 明确 `CapsuleSafeArea` 采用 wrapper 形式给 slot 内容加 `margin-left`。
- 补充 API 失败时的回退行为验收场景。