peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
04ffa2dcebd977c2b56feafb8b3ed38f442c50c5
happy-life-star/docs/superpowers/plans/2026-07-19-chat-view-bottom-padding-fix.md
T

6.3 KiB
Raw Blame History

Chat 视图底部内边距修复实施计划

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 修复 ScriptView chat 视图 ClarificationCard 提交按钮被主页 bottom-nav（104rpx）遮挡导致用户无法滚动到可见的问题。

Architecture: 在 ScriptView.vue 样式中，给 .chat-page 增加 env(safe-area-inset-bottom) 适配 iPhone 安全区，给 .chat-scroll-content 的 padding-bottom 从 40rpx 增至 120rpx，使滚动内容底部留出 bottom-nav 高度（104rpx）+ 16rpx 呼吸间距。

Tech Stack: UniApp Vue 3 <script setup> + mp-weixin 编译 + rpx 单位 + env(safe-area-inset-bottom) 安全区适配

Task 1: 修改 .chat-page 增加 iPhone 安全区内边距

Files:

  • Modify: mini-program/src/pages/main/ScriptView.vue:3589-3596

  • Step 1: 修改 .chat-page 样式

打开 mini-program/src/pages/main/ScriptView.vue，定位到第 3589-3596 行的 .chat-page 样式块：

.chat-page {
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #13091f;
  box-sizing: border-box;
}

改为（新增 padding-bottom 两行，与 App.vue 中 .safe-area-bottom 的写法保持一致，constant() 兼容 iOS 11.0-11.2，env() 覆盖 iOS 11.2+）：

.chat-page {
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #13091f;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
  • Step 2: 提交
git add mini-program/src/pages/main/ScriptView.vue
git commit -m "style: .chat-page 增加 safe-area-inset-bottom 适配 iPhone 底部"

Task 2: 修改 .chat-scroll-content 增加底部内边距

Files:

  • Modify: mini-program/src/pages/main/ScriptView.vue:3615-3617

  • Step 1: 修改 .chat-scroll-content 样式

打开 mini-program/src/pages/main/ScriptView.vue，定位到第 3615-3617 行的 .chat-scroll-content 样式块：

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

改为（padding-bottom 从 40rpx 增至 120rpx = bottom-nav 104rpx + 16rpx 呼吸间距）：

.chat-scroll-content {
  padding: 0 24rpx 120rpx;
}
  • Step 2: 提交
git add mini-program/src/pages/main/ScriptView.vue
git commit -m "fix: .chat-scroll-content padding-bottom 增至 120rpx 避开 bottom-nav 遮挡"

Task 3: H5 浏览器验证修复效果

Files:

  • Test: http://localhost:5180 (H5 开发服务器，端口 5180 由 dev-services.py 管理)

  • Step 1: 确认 H5 开发服务器运行中

python dev-services.py status

Expected: mini-program 服务在端口 5180 上运行。如未运行，执行：

python dev-services.py start mini-program

等待 VITE 编译完成，确认输出包含 Local: http://localhost:5180/。

  • Step 2: 浏览器打开页面并进入 chat 视图
  1. 用浏览器打开 http://localhost:5180
  2. 确认已登录（如未登录，使用手机号验证码 123456 登录）
  3. 点击底部导航「爽文生成」
  4. 点击任意一条灵感推荐（如「我想把最近一次低谷，改写成主角觉醒的开端。」）
  5. 点击「发送」按钮
  • Step 3: 验证澄清卡片提交按钮可见且可点击

进入 chat 视图后，等待 SSE 返回澄清卡片。在浏览器中验证：

  • ✅ 澄清卡片完整渲染（标题、描述、选项、自定义输入框）

  • ✅ 向下滚动时「提交」按钮在 bottom-nav（「人生轨迹/爽文生成/我的」）上方，不被遮挡

  • ✅ 选中一个选项后「提交」按钮变为可点击状态（不再灰色/禁用）

  • ✅ 点击「提交」后流程正常继续（追加一条 user 消息气泡）

  • Step 4: 检查浏览器 Console 无报错

打开浏览器 DevTools → Console 面板，确认：

  • ✅ 无新增红色 ERROR（uni.getRecorderManager not supported 是 H5 环境预期内的 warning，可忽略）

  • ✅ Network 面板中 /shortNovel/followup 请求返回正常响应

  • Step 5: 验证 home 视图不受影响

点击 chat 视图右上角「×」关闭按钮，确认：

  • ✅ 返回首页（wish-home）正常渲染

  • ✅ 灵感推荐、输入框、语音球布局未受 padding-bottom 影响

  • ✅ 主页 bottom-nav 正常显示，与 home 视图内容无重叠

  • Step 6: 验证 chat-input-bar 出现时布局正确

当 generationPhase === 'done' 时（即 novel_done 后或从历史记录打开已有剧本时）：

  • ✅ 底部输入栏（chat-input-bar）在 bottom-nav 上方显示，无重叠
  • ✅ 输入栏与滚动内容之间无多余空隙
  • ✅ 输入栏内的 textarea 和「发送」按钮均可正常交互

Task 4: mp-weixin 编译验证

Files:

  • Build: mini-program/unpackage/dist/dev/mp-weixin/

  • Step 1: 执行 mp-weixin 编译

cd mini-program
npm run build:mp-weixin

Expected: 编译成功，无 error 输出。编译产物在 unpackage/dist/dev/mp-weixin/。

  • Step 2: 验证编译产物样式已更新
grep "padding-bottom.*env" unpackage/dist/dev/mp-weixin/pages/main/ScriptView.wxss
grep "120rpx" unpackage/dist/dev/mp-weixin/pages/main/ScriptView.wxss

Expected:

  • padding-bottom: env(safe-area-inset-bottom); 出现在 ScriptView.wxss

  • .chat-scroll-content 的 padding-bottom 值为 120rpx

  • Step 3: 提交

git add mini-program/src/pages/main/ScriptView.vue
git commit -m "style: mp-weixin 编译产物验证通过"

Task 5: 通知用户在微信开发者工具中验证

  • Step 1: 提示用户操作

告知用户：

mp-weixin 编译产物已更新（unpackage/dist/dev/mp-weixin/）。请在微信开发者工具中：

  1. 打开 unpackage/dist/dev/mp-weixin 目录
  2. 点击「编译」按钮重新编译
  3. 进入心愿实现页面，选择灵感推荐 → 发送
  4. 等待澄清卡片出现后，向下滚动，确认「提交」按钮在底部导航栏上方完整可见
  5. 选中一个选项，点击「提交」，确认流程正常继续
  6. 在 iPhone 真机/模拟器上验证底部 home indicator 区域不遮挡内容

如有问题，截图反馈。

Reference in New Issue View Git Blame Copy Permalink