134 lines
3.5 KiB
Markdown
134 lines
3.5 KiB
Markdown
---
|
||
author: Peanut
|
||
created_at: 2026-06-23
|
||
purpose: 固定 ScriptView.vue 结果页顶部按钮，调整底部输入框边距，语音按钮改为麦克风图标
|
||
---
|
||
|
||
# ScriptView 对话结果页 UI 调整
|
||
|
||
## 背景
|
||
|
||
在 `ScriptView.vue`（剧本生成/对话结果页）中，结果页顶部左侧的「历史」按钮和右上角的「×」关闭按钮会随着页面内容滚动而移动，影响操作。底部输入框区域左右贴近屏幕边缘，视觉拥挤；语音按钮使用「语音」文字，不够简洁。
|
||
|
||
## 目标
|
||
|
||
1. 结果页顶部的历史按钮和关闭按钮在页面滚动时保持固定，不随内容滚动。
|
||
2. 底部输入框区域左右增加 24rpx 边距，输入框宽度适当压缩。
|
||
3. 语音按钮文字改为麦克风图标，颜色与当前主题一致。
|
||
4. 发送按钮保持当前大小和样式。
|
||
|
||
## 改动点
|
||
|
||
### 1. 顶部按钮固定
|
||
|
||
**文件**：`mini-program/src/pages/main/ScriptView.vue`
|
||
|
||
将结果页顶部包裹层改为固定定位，并为下方内容增加顶部 padding 避免遮挡。
|
||
|
||
**结构示例**：
|
||
|
||
```vue
|
||
<view class="result-header">
|
||
<view class="history-button" @click="openScriptLibrary">...</view>
|
||
<button class="page-close-btn" @click="closeResult">×</button>
|
||
</view>
|
||
```
|
||
|
||
**样式示例**：
|
||
|
||
```css
|
||
.result-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
height: 100rpx;
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
background: rgba(15, 7, 26, 0.85);
|
||
backdrop-filter: blur(18rpx);
|
||
-webkit-backdrop-filter: blur(18rpx);
|
||
}
|
||
```
|
||
|
||
同时给结果页内容区域增加顶部 padding（如 `padding-top: 100rpx` 或更大，以避开固定顶部栏和安全区）。
|
||
|
||
### 2. 底部输入框边距与压缩
|
||
|
||
**文件**：`mini-program/src/pages/main/ScriptView.vue`
|
||
|
||
给 `.result-chat-bar` 增加左右内边距：
|
||
|
||
```css
|
||
.result-chat-bar {
|
||
/* 其他样式保持不变 */
|
||
padding: 0 24rpx;
|
||
}
|
||
```
|
||
|
||
输入框 `.result-input-shell` 保持 `flex: 1`，通过整体边距自然压缩可用宽度。如需进一步压缩，可增加左右 `margin: 0 10rpx`。
|
||
|
||
语音按钮（86rpx × 76rpx）和发送按钮（92rpx × 76rpx）保持当前尺寸不变。
|
||
|
||
### 3. 语音按钮改为麦克风图标
|
||
|
||
**文件**：`mini-program/src/pages/main/ScriptView.vue`
|
||
|
||
**修改前**：
|
||
|
||
```vue
|
||
<view class="chat-voice-btn" ...>
|
||
<text>语音</text>
|
||
</view>
|
||
```
|
||
|
||
**修改后**：
|
||
|
||
```vue
|
||
<view class="chat-voice-btn" ...>
|
||
<text class="voice-icon">🎤</text>
|
||
</view>
|
||
```
|
||
|
||
**样式**：
|
||
|
||
```css
|
||
.chat-voice-btn {
|
||
/* 保持原有尺寸、背景、边框 */
|
||
width: 86rpx;
|
||
height: 76rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 26rpx;
|
||
background: rgba(88, 28, 135, 0.32);
|
||
border: 1rpx solid rgba(192, 132, 252, 0.3);
|
||
}
|
||
|
||
.voice-icon {
|
||
color: #e8ccff;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.chat-voice-btn.pressing .voice-icon,
|
||
.chat-voice-btn.recognizing .voice-icon {
|
||
color: #fff;
|
||
}
|
||
```
|
||
|
||
如项目规范不允许使用 emoji，可改用 CSS 绘制的麦克风图标。
|
||
|
||
## 验证标准
|
||
|
||
1. 进入 ScriptView.vue 的剧本对话结果页，上下滚动内容，顶部历史按钮和关闭按钮始终保持在固定位置。
|
||
2. 底部输入框区域左右与屏幕边缘有 24rpx 边距。
|
||
3. 语音按钮显示为麦克风图标，默认颜色 `#e8ccff`，按下/识别时变为白色。
|
||
4. 发送按钮大小不变。
|
||
5. 输入框可以正常输入和发送消息。
|
||
6. 浏览器 Console 无新增报错。
|
||
7. 运行 `npm run build:h5` 编译通过。
|