docs: Chat 视图底部内边距修复设计文档

2026-07-19 19:57:57 +08:00
parent 118d20914d
commit 0a9ea60795
1 changed files with 72 additions and 0 deletions
@@ -0,0 +1,72 @@
+---
+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）