73 lines
2.6 KiB
Markdown
73 lines
2.6 KiB
Markdown
---
|
||
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）
|