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