---
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 布局不受影响