From 04ffa2dcebd977c2b56feafb8b3ed38f442c50c5 Mon Sep 17 00:00:00 2001
From: Peanut <peanut_hzm@163.com>
Date: Sun, 19 Jul 2026 20:17:26 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20Chat=20=E8=A7=86=E5=9B=BE=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E5=86=85=E8=BE=B9=E8=B7=9D=E4=BF=AE=E5=A4=8D=E5=AE=9E?=
 =?UTF-8?q?=E6=96=BD=E8=AE=A1=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...2026-07-19-chat-view-bottom-padding-fix.md | 188 ++++++++++++++++++
 1 file changed, 188 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-07-19-chat-view-bottom-padding-fix.md

diff --git a/docs/superpowers/plans/2026-07-19-chat-view-bottom-padding-fix.md b/docs/superpowers/plans/2026-07-19-chat-view-bottom-padding-fix.md
new file mode 100644
index 0000000..3e254d4
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-19-chat-view-bottom-padding-fix.md
@@ -0,0 +1,188 @@
+# 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` 样式块：
+
+```css
+.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+）：
+
+```css
+.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: 提交**
+
+```bash
+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` 样式块：
+
+```css
+.chat-scroll-content {
+  padding: 0 24rpx 40rpx;
+}
+```
+
+改为（`padding-bottom` 从 40rpx 增至 120rpx = bottom-nav 104rpx + 16rpx 呼吸间距）：
+
+```css
+.chat-scroll-content {
+  padding: 0 24rpx 120rpx;
+}
+```
+
+- [ ] **Step 2: 提交**
+
+```bash
+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 开发服务器运行中**
+
+```bash
+python dev-services.py status
+```
+Expected: `mini-program` 服务在端口 5180 上运行。如未运行，执行：
+```bash
+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 编译**
+
+```bash
+cd mini-program
+npm run build:mp-weixin
+```
+Expected: 编译成功，无 error 输出。编译产物在 `unpackage/dist/dev/mp-weixin/`。
+
+- [ ] **Step 2: 验证编译产物样式已更新**
+
+```bash
+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: 提交**
+
+```bash
+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 区域不遮挡内容
+>
+> 如有问题，截图反馈。