---
author: AI Assistant
created_at: 2026-07-19
purpose: 修复 ScriptView chat 视图 ClarificationCard 提交按钮被主页 bottom-nav 遮挡的问题
---

# Chat 视图底部内边距修复设计

## 概述

小程序心愿实现页面（ScriptView）chat 视图的 ClarificationCard 提交按钮无法滚动到可见区域，根因是主页面 `pages/main/index.vue` 的 `.bottom-nav`（`position: absolute; bottom: 0; z-index: 20; height: 104rpx`）叠在 script-view 组件底部，遮挡了 chat 滚动内容的最后一段。

## 问题

用户在 chat 视图选择澄清卡片的选项后，需要点击卡片最下方的「提交」按钮继续流程，但：
- 滚动内容被 bottom-nav 遮住约 104rpx
- iPhone 真机底部 home indicator 进一步压缩可见区域
- 用户能看到卡片上半部分（问题描述、选项、自定义输入框）但看不到「提交」按钮
- 无法继续后续流程

## 修复方案

调整 chat 视图容器的底部内边距，让滚动内容可以滚到「提交」按钮完全可见在 bottom-nav 上方。

### 改动文件

- `mini-program/src/pages/main/ScriptView.vue`（样式部分）

### 改动 1：`.chat-page` 增加 iPhone 安全区内边距

```css
.chat-page {
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #13091f;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
}
```

作用：让 chat 容器适配 iPhone 底部 home indicator 区域，避免聊天内容被 home indicator 遮挡。

### 改动 2：`.chat-scroll-content` 增加底部内边距

```css
.chat-scroll-content {
  padding: 0 24rpx 120rpx;
}
```

作用：在 chat 滚动区底部留出 120rpx 空间：
- 104rpx = bottom-nav 高度
- 16rpx = 呼吸间距，避免按钮贴边

保证 ClarificationCard 的「提交」按钮可滚动到 bottom-nav 上方完整可见。

## 不影响范围

- home 视图：使用独立的样式（`.wish-home`），不受影响
- chat-input-bar：条件渲染且在 scroll-view 外部，不受影响
- 其他 message 类型（user bubble、outline、novel、error）：样式结构不变

## 验收标准

- [ ] 在 H5（http://localhost:5180）心愿实现 chat 视图，澄清卡片可滚动到「提交」按钮完全可见
- [ ] 「提交」按钮在主页 bottom-nav 导航栏上方，无遮挡
- [ ] iPhone 真机（带 home indicator）底部也能完整看到「提交」按钮
- [ ] Console 无报错
- [ ] mp-weixin 编译通过（`npm run build:mp-weixin` 无错误）
- [ ] 点击「提交」后流程正常继续（追加 user 消息 + 调 followupStream）