React + MUI 移动端聊天页面完整布局方案 — 解决消息列表滚动裁切、输入框键盘适配、底部导航栏联动隐藏等核心问题。基于 flex 布局 + custom event 架构，兼容 Capacitor WebView。
Mobile Chat Layout — 移动端聊天页面完整布局方案
功能概述
Mobile Chat Layout — 移动端聊天页面完整布局方案是一项面向实际任务的技能，主要用于在 React + MUI 移动端（Capacitor WebView）中构建聊天页面时，会遇到一系列经典问题：；消息列表滚动时顶部/底部被裁切；
核心要点
- 输入框用 position: fixed 导致 flex 布局无法正确计算高度；
- 键盘弹起时底部导航栏未隐藏，输入框离键盘太远；
- flex 容器内 overflow: auto。
使用与执行
它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。
结果检查与注意事项
执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。
Mobile Chat Layout — 移动端聊天页面完整布局方案
概述
在 React + MUI 移动端（Capacitor WebView）中构建聊天页面时，会遇到一系列经典问题：
- 消息列表滚动时顶部/底部被裁切
- 输入框用
position: fixed导致 flex 布局无法正确计算高度 - 键盘弹起时底部导航栏未隐藏，输入框离键盘太远
- flex 容器内
overflow: auto吃 padding - 底部灰色间隙
- Capacitor WebView 中光标无法在文字中间插入（受控组件每次 setState 光标跳末尾）
- 导航栏隐藏后不恢复（DOM classList 读取 vs React 重渲染竞态）
本技能提供一套经过魅族 21 真机验证的完整解决方案。
核心架构
1. 整体布局：flex + normal flow（非 fixed）
错误做法：输入框用 position: fixed; bottom: 76px，消息列表用 flex: 1 估算高度。
正确做法：全部放入 normal flow flex 列：
{/* 消息列表 */} {messages.map(...)} {/* 输入框 */}
关键点：
minHeight: 0— 必须设置，否则 flex 子元素不会收缩，消息列表会撑破父容器overflow: 'hidden'在外层，保证内容不溢出- 输入框
flexShrink: 0防止被挤压
2. 消息列表顶部间距（避坑）
坑：在 overflow: auto 容器中使用 display: flex + gap 时，padding-top 可能被浏览器裁切。
解法：用普通 block 布局 + CSS 选择器控制间距：
*:first-of-type': { mt: 7 }, // 第一条消息顶部 56px '& > * + *': { mt: 2 }, // 消息间 16px }} >
3. 输入框底部间距（闲置 vs 键盘）
输入框底部需要动态间距：
- 闲置时：留出导航栏高度（~56px）
- 键盘弹起时：仅留 8px 贴边
const [focused, setFocused] = useState(false);