# 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 名、事件名与源码保持一致。