技能介绍

要解决的问题

在 React + MUI 移动端聊天页里，常见的布局失败往往不是某个 API 用错，而是几类问题叠加：输入框用 position: fixed 后，flex 父容器无法计算真实高度，消息列表滚动时顶部或底部被裁切；键盘弹起时底部导航栏没有隐藏，输入框离键盘太远；overflow: auto 容器里用 display: flex 加 gap，padding-top 会被浏览器裁掉；输入框底部还会出现一条灰色缝隙。更隐蔽的是 Capacitor WebView 下 MUI TextField 的受控状态机干扰原生光标，导致只能在文字末尾插入；导航栏状态用 DOM classList 读取再 forceUpdate，又会与 React 重渲染产生竞态，导航栏时有时无。

技能如何工作

方案不依赖 fixed 弹层，而是把消息列表和输入框放进 normal flow 的 flex 列：外层 overflow: 'hidden'，消息列表必须设 minHeight: 0 才能收缩，输入框设 flexShrink: 0 防止被挤压。顶部间距不用 flex+gap，改用普通 block 布局加 CSS 选择器控制，避开 padding 裁切。输入框底部间距按键盘状态切换：闲置时保留约 56px 导航栏高度，键盘弹起时只留 8px 贴边；背景色放在外层 wrapper 上，让底色覆盖到导航栏上方，消除灰边。

导航栏显隐用 CustomEvent.detail 传明确 boolean，BottomNav 用 useState 接收，避免直接读 DOM；键盘开合只用 onFocus/onBlur 驱动，不采用 visualViewport.resize 或 window.resize。光标问题则彻底绕开 MUI：使用原生 <input>，不写 onChange，不传 value，发送时读 inputRef.current.value，清空时直接写 inputRef.current.value = ''。App.jsx 提供 AI 路由容器模板，AIAssistant.jsx 是聊天主页面，BottomNav.jsx 是底部导航栏。

适用边界与注意点

这套模板面向 React 18 + MUI v5 + Capacitor WebView 的移动端聊天场景，已在魅族 21（Flyme）和主流 Android 真机验证，也兼容 iOS Safari 与 Android Chrome WebView，并处理深浅色模式和 safe-area-inset 安全区域。使用时仍需按实际路由调整文件路径；不同 Android ROM 的键盘行为差异较大，是本方案重点规避的风险点，不建议再引入 visualViewport 检测。