## 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 变更。