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

7.4 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 视图 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 样式块：

.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()）：

.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: 提交
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 样式块：

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

改为（padding-bottom 从 120rpx 改回 40rpx，避免与父级 .content 的 padding-bottom: 132rpx 双重叠加）：

.chat-scroll-content {
  padding: 0 24rpx 40rpx;
}
  • Step 2: 提交
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 开发服务器运行中

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. 点击任意一条灵感推荐填充输入框，点击「发送」
  • Step 3: 检查 .chat-page 计算样式

在浏览器 DevTools Console 中执行：

() => {
  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 中执行：

() => {
  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 编译

cd mini-program
npm run build:mp-weixin

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

  • Step 2: 验证编译产物样式已更新
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: 提交（如有微调）

如有需要，执行：

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 区域不遮挡内容

如有问题，截图反馈。

Reference in New Issue View Git Blame Copy Permalink