94 lines
4.2 KiB
Markdown
94 lines
4.2 KiB
Markdown
---
|
||
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 布局不受影响 |