proposal.md 1.7 KB
Why
微信小程序右上角存在原生胶囊按钮（菜单/关闭），宽度在不同机型下约为 87px。当前项目所有页面均使用 navigationStyle: custom 自定义导航栏，并把部分操作按钮（通知、新增、今天等）放在右上角，导致部署到微信真机后胶囊遮挡功能按钮，影响使用。需要引入全局统一的胶囊安全区组件，让顶部栏右侧操作区自动避让胶囊。
What Changes
- 新增全局胶囊安全区组件
CapsuleSafeArea，基于uni.getMenuButtonBoundingClientRect()计算右侧安全宽度。 - 改造
TopBar组件，右侧插槽自动包裹在安全区内，保证操作按钮不会被胶囊遮挡。 - 调整三个已确认存在遮挡问题的页面顶部区域：
pages/home/home（各角色首页右上角通知铃铛）pages/schedule/schedule（排班页右上角「今天」「新增排班」）pages/task/task（任务页右上角「新增/发布」按钮）
- 胶囊安全区采用「右侧操作按钮整体左移」策略，改动最小且保持按钮可点。
- 非微信环境（H5/App）回退到默认右侧间距，避免异常。
Capabilities
New Capabilities
weapp-capsule-safearea: 微信小程序胶囊安全区适配，提供全局组件和 TopBar 集成。
Modified Capabilities
- 无
Impact
- 受影响的文件：
src/components/common/TopBar.vue、新增src/components/common/CapsuleSafeArea.vue、src/pages/home/home.vue、src/pages/schedule/schedule.vue、src/pages/task/task.vue。 - 依赖：仅使用 uni-app 内置 API
uni.getMenuButtonBoundingClientRect()与uni.getSystemInfoSync()。 - 不涉及后端接口、数据模型、API 变更。