From 4cb6d6de9b7980b7223aa34d4a8e6d391a3805b8 Mon Sep 17 00:00:00 2001
From: Peanut <peanut_hzm@163.com>
Date: Tue, 23 Jun 2026 22:51:55 +0800
Subject: [PATCH] =?UTF-8?q?docs=EF=BC=9AScriptView=20=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E9=A1=B5=20UI=20=E8=B0=83=E6=95=B4=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E8=AE=A1=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...3-script-view-result-ui-adjustment-plan.md | 285 ++++++++++++++++++
 1 file changed, 285 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-06-23-script-view-result-ui-adjustment-plan.md

diff --git a/docs/superpowers/plans/2026-06-23-script-view-result-ui-adjustment-plan.md b/docs/superpowers/plans/2026-06-23-script-view-result-ui-adjustment-plan.md
new file mode 100644
index 0000000..b6fdefd
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-23-script-view-result-ui-adjustment-plan.md
@@ -0,0 +1,285 @@
+# ScriptView 对话结果页 UI 调整实现计划
+
+> **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.vue 结果页顶部的历史按钮和关闭按钮不随内容滚动，底部输入框增加左右边距，语音按钮改为麦克风图标。
+
+**Architecture:** 将 `result-top-actions` 从 `scroll-view` 内部移到外部作为独立层，利用 flex 布局使其固定；调整 `.result-chat-bar` 内边距和语音按钮内容。
+
+**Tech Stack:** Vue 3 + UniApp + CSS (rpx)
+
+---
+
+## 文件结构
+
+| 文件 | 职责 | 变更类型 |
+|---|---|---|
+| `mini-program/src/pages/main/ScriptView.vue` | 剧本生成/对话结果页 | 修改 |
+
+---
+
+### Task 1: 将顶部操作栏移出滚动区域
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue:135-158`
+
+- [ ] **Step 1: 查看当前结构**
+
+当前 `result-page` 结构（关键部分）：
+
+```vue
+<view v-else class="result-page">
+  <scroll-view
+    class="result-view"
+    scroll-y
+    ...
+  >
+    <view class="result-scroll-content">
+      <view id="result-scroll-top" class="result-scroll-top"></view>
+      <view class="result-top-actions">
+        <view class="history-button" @click="openScriptLibrary">
+          ...
+          <text>历史</text>
+        </view>
+        <button class="page-close-btn" @click="closeResult">×</button>
+      </view>
+      ...
+    </view>
+  </scroll-view>
+  ...
+</view>
+```
+
+- [ ] **Step 2: 移动 result-top-actions 到 scroll-view 外部**
+
+将 `result-top-actions` 块从 `result-scroll-content` 中移出，放到 `scroll-view` 之前：
+
+```vue
+<view v-else class="result-page">
+  <view class="result-top-actions">
+    <view class="history-button" @click="openScriptLibrary">
+      <view class="history-lines">
+        <view></view>
+        <view></view>
+        <view></view>
+      </view>
+      <text>历史</text>
+    </view>
+    <button class="page-close-btn" @click="closeResult">×</button>
+  </view>
+
+  <scroll-view
+    class="result-view"
+    scroll-y
+    :scroll-top="resultCommandScrollTop"
+    :scroll-into-view="resultScrollTarget"
+    :scroll-with-animation="true"
+    :enhanced="true"
+    :show-scrollbar="false"
+    @scroll="handleResultScroll"
+  >
+    <view class="result-scroll-content">
+      <view id="result-scroll-top" class="result-scroll-top"></view>
+      ...
+    </view>
+  </scroll-view>
+  ...
+</view>
+```
+
+- [ ] **Step 3: 调整 result-scroll-content 的 padding**
+
+原 `.result-scroll-content` 有 `padding: 0 0 220rpx;`。由于顶部栏已移出，内容顶部不再需要额外留白，保持 `padding-bottom: 220rpx` 即可：
+
+```css
+.result-scroll-content {
+  min-height: 100%;
+  box-sizing: border-box;
+  padding: 0 0 220rpx;
+}
+```
+
+- [ ] **Step 4: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "fix：ScriptView 结果页顶部操作栏固定不随滚动"
+```
+
+---
+
+### Task 2: 底部输入框增加左右边距
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue:3021-3034`
+
+- [ ] **Step 1: 查看当前样式**
+
+```css
+.result-chat-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 12;
+  min-height: 104rpx;
+  display: flex;
+  align-items: flex-end;
+  gap: 12rpx;
+  padding: 14rpx 0 22rpx;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, rgba(5, 2, 13, 0), rgba(5, 2, 13, 0.9) 30%, rgba(5, 2, 13, 0.96));
+}
+```
+
+- [ ] **Step 2: 修改 padding 增加左右边距**
+
+将 `padding: 14rpx 0 22rpx` 改为 `padding: 14rpx 24rpx 22rpx`：
+
+```css
+.result-chat-bar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 12;
+  min-height: 104rpx;
+  display: flex;
+  align-items: flex-end;
+  gap: 12rpx;
+  padding: 14rpx 24rpx 22rpx;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, rgba(5, 2, 13, 0), rgba(5, 2, 13, 0.9) 30%, rgba(5, 2, 13, 0.96));
+}
+```
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "fix：ScriptView 底部输入框区域增加左右边距"
+```
+
+---
+
+### Task 3: 语音按钮改为麦克风图标
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue:266-275`
+- Modify: `mini-program/src/pages/main/ScriptView.vue:3036-3056`
+
+- [ ] **Step 1: 修改语音按钮内容**
+
+将：
+
+```vue
+<view
+  class="chat-voice-btn"
+  :class="{ pressing: voiceState === 'pressing', recognizing: voiceState === 'recognizing' }"
+  @touchstart.prevent="startVoicePress"
+  @touchend.prevent="endVoicePress"
+  @touchcancel.prevent="cancelVoicePress"
+>
+  <text>语音</text>
+</view>
+```
+
+改为：
+
+```vue
+<view
+  class="chat-voice-btn"
+  :class="{ pressing: voiceState === 'pressing', recognizing: voiceState === 'recognizing' }"
+  @touchstart.prevent="startVoicePress"
+  @touchend.prevent="endVoicePress"
+  @touchcancel.prevent="cancelVoicePress"
+>
+  <text class="voice-icon">🎤</text>
+</view>
+```
+
+- [ ] **Step 2: 增加语音图标样式**
+
+在 `.chat-voice-btn` 样式后增加：
+
+```css
+.voice-icon {
+  font-size: 32rpx;
+  line-height: 1;
+}
+```
+
+并修改按下状态的颜色继承：
+
+```css
+.chat-voice-btn.pressing,
+.chat-voice-btn.recognizing {
+  color: #fff;
+  background: linear-gradient(145deg, #934dff, #4d1ccb);
+  box-shadow: 0 0 30rpx rgba(168, 85, 247, 0.38);
+}
+```
+
+`.chat-voice-btn` 本身已有 `color: #e8ccff;`，图标会继承该颜色；按下时父元素颜色变为 `#fff`，图标也会变白。
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "fix：ScriptView 语音按钮改为麦克风图标"
+```
+
+---
+
+### Task 4: 编译与 H5 验证
+
+**Files:**
+- 无新增/修改文件
+
+- [ ] **Step 1: 运行 H5 生产构建**
+
+```bash
+cd mini-program
+npm run build:h5
+```
+
+期望输出包含 `DONE  Build complete.`，无编译错误。
+
+- [ ] **Step 2: 启动 H5 开发服务器**
+
+确保端口未被占用，然后：
+
+```bash
+cd mini-program
+npm run dev:h5
+```
+
+- [ ] **Step 3: 验证顶部按钮固定**
+
+1. 登录后进入爽文生成页。
+2. 从历史列表点击一个已有剧本，进入对话结果页。
+3. 上下滚动剧本内容，确认左上角「历史」按钮和右上角「×」按钮始终保持在原位，不随内容滚动。
+
+- [ ] **Step 4: 验证底部输入框样式**
+
+1. 确认底部输入框区域左右与屏幕边缘有 24rpx 边距。
+2. 确认语音按钮显示为麦克风图标，默认颜色 `#e8ccff`，按下时变为白色。
+3. 确认发送按钮大小不变，可正常点击发送消息。
+
+- [ ] **Step 5: 检查浏览器 Console**
+
+确认没有新增的 JavaScript 错误。
+
+---
+
+## Self-Review
+
+1. **Spec coverage:**
+   - 顶部按钮固定 → Task 1
+   - 底部边距 → Task 2
+   - 麦克风图标 → Task 3
+   - 编译与验证 → Task 4
+
+2. **Placeholder scan:** 无 TBD、TODO、"implement later" 或模糊描述。
+
+3. **Type consistency:** 所有 class 名、事件名与源码保持一致。