Files

T

peanut cafa8717ab docs: Chat 视图底部遮挡架构层修复设计文档

2026-07-19 20:45:09 +08:00

4.2 KiB

Raw Blame History

author, created_at, purpose

author	created_at	purpose
AI Assistant	2026-07-19	修复 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 结构：

.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%`

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

.chat-scroll-content {
  padding: 0 24rpx 40rpx;
}

为什么改回 40rpx：

父级 .content 已经预留 132rpx 给 bottom-nav
chat-page 用 height: 100% 后，滚动区底部已经被父级 padding 隔开
不再需要额外的 120rpx padding（否则会双重叠加变成 252rpx 空白）

为什么这样能解决问题

父级 .content 的 132rpx padding-bottom 创建了一个 "安全区"
chat-page 用 height: 100% 填充父级内容可用高度（不含 132rpx 安全区）
chat-scroll（flex: 1 + height: 100%）继承这个受限高度
chat-scroll-content 在受限区域内滚动，底部自动避开 bottom-nav
outline 输入框和按钮都在 chat-scroll-content 内，自然在安全区内
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 布局不受影响

4.2 KiB Raw Blame History Unescape Escape