From cb965fadff5d438711da9297950d61fb05fbc27a Mon Sep 17 00:00:00 2001
From: Peanut <peanut_hzm@163.com>
Date: Sun, 19 Jul 2026 20:46:10 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20Chat=20=E8=A7=86=E5=9B=BE=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E9=81=AE=E6=8C=A1=E6=9E=B6=E6=9E=84=E5=B1=82=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=AE=9E=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-architecture-fix.md  | 225 ++++++++++++++++++
 1 file changed, 225 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-07-19-chat-view-architecture-fix.md

diff --git a/docs/superpowers/plans/2026-07-19-chat-view-architecture-fix.md b/docs/superpowers/plans/2026-07-19-chat-view-architecture-fix.md
new file mode 100644
index 0000000..a91d962
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-19-chat-view-architecture-fix.md
@@ -0,0 +1,225 @@
+# 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 视图 outline 输入框 placeholder 和修改/确认大纲按钮被主页 bottom-nav 遮挡的问题。`.chat-page` 从 `height: 100vh` 改为 `height: 100%`，让父级 `.content`（`padding-bottom: 132rpx`）自然生效；同时把 `.chat-scroll-content` 的 `padding-bottom` 从 120rpx 改回 40rpx，避免双重 padding。
+
+**Architecture:** 架构层修正而非 CSS 遮罩。让 chat-page 正确填充父级已预留 bottom-nav 空间的内容区，chat 滚动区底部自然避开 bottom-nav。iPhone 安全区用 `env(safe-area-inset-bottom)` 处理。
+
+**Tech Stack:** UniApp Vue 3 `<script setup>` + mp-weixin 编译 + rpx 单位 + `env(safe-area-inset-bottom)` 安全区适配
+
+---
+
+### Task 1: 修改 .chat-page 从 height: 100vh 改为 height: 100%
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue:3589-3598`
+
+- [ ] **Step 1: 修改 .chat-page 样式**
+
+打开 `mini-program/src/pages/main/ScriptView.vue`，定位到第 3589-3598 行的 `.chat-page` 样式块：
+
+```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);
+}
+```
+
+改为（`height: 100vh` → `height: 100%`，删除旧版 iOS 兼容的 `constant()`）：
+
+```css
+.chat-page {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: #13091f;
+  box-sizing: border-box;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+```
+
+- [ ] **Step 2: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "refactor: .chat-page 改为 height: 100% 让父级 padding 生效"
+```
+
+---
+
+### Task 2: 修改 .chat-scroll-content 改回 padding-bottom: 40rpx
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue:3617-3619`
+
+- [ ] **Step 1: 修改 .chat-scroll-content 样式**
+
+打开 `mini-program/src/pages/main/ScriptView.vue`，定位到第 3617-3619 行的 `.chat-scroll-content` 样式块：
+
+```css
+.chat-scroll-content {
+  padding: 0 24rpx 120rpx;
+}
+```
+
+改为（`padding-bottom` 从 120rpx 改回 40rpx，避免与父级 `.content` 的 `padding-bottom: 132rpx` 双重叠加）：
+
+```css
+.chat-scroll-content {
+  padding: 0 24rpx 40rpx;
+}
+```
+
+- [ ] **Step 2: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "fix: .chat-scroll-content padding-bottom 改回 40rpx 避免与父级 padding 叠加"
+```
+
+---
+
+### 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. 点击任意一条灵感推荐填充输入框，点击「发送」
+
+- [ ] **Step 3: 检查 .chat-page 计算样式**
+
+在浏览器 DevTools Console 中执行：
+
+```javascript
+() => {
+  const el = document.querySelector('.chat-page');
+  if (!el) return 'chat-page not found';
+  const styles = window.getComputedStyle(el);
+  const parent = el.parentElement;
+  const parentStyles = parent ? window.getComputedStyle(parent) : null;
+  return {
+    chatPage: {
+      height: styles.height,
+      paddingBottom: styles.paddingBottom
+    },
+    parent: parent ? {
+      tag: parent.tagName,
+      className: parent.className,
+      paddingBottom: parentStyles.paddingBottom
+    } : null
+  };
+}
+```
+
+Expected: `chatPage.height` 应小于视口高度（不再 100vh），`parent.paddingBottom` 应为 `66px` (= 132rpx @ 750rpx 设计稿/2 = 实际 132rpx / 2 = 66px in 375px viewport)。
+
+- [ ] **Step 4: 等待 SSE 返回澄清卡片或 outline**
+
+在 chat 视图等待 10-15 秒：
+- 若出现澄清卡片（ClarificationCard）：向下滚动，确认「提交」按钮在 bottom-nav 上方完整可见
+- 若出现 outline（带 beats 列表）：向下滚动，确认 placeholder "如需修改请输入意见" 完整可见、「修改大纲」「确认大纲」按钮在 bottom-nav 上方完整可点击
+
+- [ ] **Step 5: 验证 chat-scroll-content 实际高度**
+
+在 Console 中执行：
+
+```javascript
+() => {
+  const scrollContent = document.querySelector('.chat-scroll-content');
+  const scroll = document.querySelector('.chat-scroll');
+  if (!scrollContent || !scroll) return 'not found';
+  return {
+    scrollContentPaddingBottom: window.getComputedStyle(scrollContent).paddingBottom,
+    scrollHeight: scroll.offsetHeight,
+    scrollClientHeight: scroll.clientHeight,
+    scrollScrollHeight: scroll.scrollHeight
+  };
+}
+```
+
+Expected: `scrollContentPaddingBottom` = `20px` (= 40rpx / 2 in 375px viewport)，`scrollScrollHeight > scrollClientHeight` 表示有内容可滚动。
+
+- [ ] **Step 6: 验证 home 视图不受影响**
+
+点击 chat 视图右上角「×」关闭按钮返回 home 视图，确认：
+- ✅ 首页正常渲染
+- ✅ 灵感推荐、输入框、语音球布局完整
+- ✅ bottom-nav 与 home 内容无重叠
+
+---
+
+### Task 4: mp-weixin 编译验证
+
+**Files:**
+- Build: `mini-program/unpackage/dist/build/mp-weixin/`
+
+- [ ] **Step 1: 执行 mp-weixin 编译**
+
+```bash
+cd mini-program
+npm run build:mp-weixin
+```
+Expected: 编译成功，无 error 输出。编译产物在 `unpackage/dist/build/mp-weixin/`。
+
+- [ ] **Step 2: 验证编译产物样式已更新**
+
+```bash
+grep -o '.chat-page[^}]*}' mini-program/unpackage/dist/build/mp-weixin/pages/main/ScriptView.wxss
+grep -o '.chat-scroll-content[^}]*}' mini-program/unpackage/dist/build/mp-weixin/pages/main/ScriptView.wxss
+```
+
+Expected:
+- `.chat-page` 包含 `height:100%` 和 `padding-bottom:env(safe-area-inset-bottom)`
+- `.chat-page` 不再包含 `height:100vh` 或 `constant(safe-area-inset-bottom)`
+- `.chat-scroll-content` 的 padding 为 `0 24rpx 40rpx`（不再是 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 编译产物已更新（`mini-program/unpackage/dist/build/mp-weixin/`）。请在**微信开发者工具**中：
+> 1. 打开 `unpackage/dist/build/mp-weixin` 目录
+> 2. 点击「编译」按钮重新编译
+> 3. 进入心愿实现页面，触发对话流直至出现 outline 消息（带 beats 列表）
+> 4. 向下滚动，确认：
+>    - outline 输入框的 placeholder "如需修改请输入意见" 完整可见（不被截断）
+>    - 「修改大纲」「确认大纲」按钮在底部导航栏上方完整可见可点击
+> 5. 在 iPhone 真机/模拟器上验证底部 home indicator 区域不遮挡内容
+>
+> 如有问题，截图反馈。
\ No newline at end of file