---
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` 编译通过。