docs: Chat 视图底部遮挡架构层修复设计文档

2026-07-19 20:45:09 +08:00
parent 283914690a
commit cafa8717ab
1 changed files with 94 additions and 0 deletions
@@ -0,0 +1,94 @@
+---
+author: AI Assistant
+created_at: 2026-07-19
+purpose: 修复 ScriptView chat 视图底部 outline 输入框和按钮被主页 bottom-nav 遮挡的问题（架构层修正）
+---
+
+# Chat 视图底部遮挡架构层修复设计
+
+## 概述
+
+前一轮 CSS 修复（`padding-bottom: 120rpx`）未能彻底解决 bottom-nav 遮挡问题：`.outline-feedback` 输入框的 placeholder "如需修改请输入意见" 被截断，"修改大纲" 和 "确认大纲" 按钮也无法完整可见。根因是 `.chat-page` 使用 `height: 100vh`，完全无视父级 `.content` 已有的 `padding-bottom: 132rpx`（已经为 bottom-nav 预留了空间）。
+
+## 问题根因
+
+主页面 `pages/main/index.vue` 结构：
+
+```css
+.app-shell { height: 100vh; display: flex; flex-direction: column; }
+.content { flex: 1; height: 0; padding: 0 28rpx 132rpx; }  /* 父级已经预留 132rpx */
+.bottom-nav { position: absolute; bottom: 0; height: 104rpx; z-index: 20; }
+```
+
+ScriptView 组件被渲染在 `.content` 内。父级 `.content` 已经预留了 132rpx 底部空间给 bottom-nav，但 `.chat-page` 设置了 `height: 100vh`，这让它撑满整个视口高度，**无视了父级的 padding-bottom**，导致 chat 滚动区底部仍然被 bottom-nav 覆盖约 104-134rpx。
+
+## 修复方案
+
+让 `.chat-page` 填充父级内容区（不设固定视口高度），让父级已有的 132rpx padding-bottom 自然生效。
+
+### 改动文件
+
+- `mini-program/src/pages/main/ScriptView.vue`（样式部分）
+
+### 改动 1：`.chat-page` 从 `height: 100vh` 改为 `height: 100%`
+
+```css
+.chat-page {
+  /* height: 100vh → height: 100% */
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: #13091f;
+  box-sizing: border-box;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+```
+
+**关键变化**：
+- `height: 100%`：填充父级 `.content` 的可用高度，父级的 132rpx padding-bottom 自然生效
+- 保留 `min-height: 0`：让 flex 子项可以正确收缩
+- 保留 `padding-bottom: env(safe-area-inset-bottom)`：适配 iPhone home indicator
+- 删除 `constant(safe-area-inset-bottom)`：iOS 11.0-11.2 已极少，无需兼容
+
+### 改动 2：`.chat-scroll-content` 改回 `padding: 0 24rpx 40rpx`
+
+```css
+.chat-scroll-content {
+  padding: 0 24rpx 40rpx;
+}
+```
+
+**为什么改回 40rpx**：
+- 父级 `.content` 已经预留 132rpx 给 bottom-nav
+- chat-page 用 `height: 100%` 后，滚动区底部已经被父级 padding 隔开
+- 不再需要额外的 120rpx padding（否则会双重叠加变成 252rpx 空白）
+
+## 为什么这样能解决问题
+
+1. 父级 `.content` 的 132rpx padding-bottom 创建了一个 "安全区"
+2. chat-page 用 `height: 100%` 填充父级内容可用高度（不含 132rpx 安全区）
+3. chat-scroll（flex: 1 + height: 100%）继承这个受限高度
+4. chat-scroll-content 在受限区域内滚动，底部自动避开 bottom-nav
+5. outline 输入框和按钮都在 chat-scroll-content 内，自然在安全区内
+6. placeholder "如需修改请输入意见" 完整显示，按钮可点击
+
+## 不影响范围
+
+- home 视图（`.wish-home`）：独立样式，不受影响
+- generation 视图（`.generation-view`）：独立样式，不受影响
+- 其他 message 类型（user bubble、novel、text、card-answered）：样式不变
+- chat-input-bar：条件渲染在 scroll-view 外，不受影响
+- mp-weixin 滚动：`.chat-scroll` 仍保持 `flex: 1; height: 100%; min-height: 0`，原生 scroll-view 仍能正确计算可滚动区域
+
+## 验收标准
+
+- [ ] H5（http://localhost:5180）心愿实现 chat 视图：outline 输入框的 placeholder "如需修改请输入意见" 完整可见（不被截断）
+- [ ] "修改大纲" 和 "确认大纲" 按钮在 bottom-nav 上方完整可见可点击
+- [ ] 向上滚动时大刚内容（标题、beats、结局）正常显示
+- [ ] iPhone 真机（带 home indicator）底部也能完整看到所有内容
+- [ ] Console 无报错
+- [ ] mp-weixin 编译通过（`npm run build:mp-weixin` 无错误）
+- [ ] 编译产物中 `.chat-page` 的 `height` 为 `100%`，`padding-bottom` 含 `env(safe-area-inset-bottom)`
+- [ ] 编译产物中 `.chat-scroll-content` 的 `padding` 为 `0 24rpx 40rpx`
+- [ ] home 视图、generation 视图、chat-input-bar 布局不受影响