Files

T

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

2026-07-19 19:57:57 +08:00

2.6 KiB

Raw Blame History

author, created_at, purpose

author	created_at	purpose
AI Assistant	2026-07-19	修复 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 安全区内边距

.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` 增加底部内边距

.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）

2.6 KiB Raw Blame History Unescape Escape