docs：ScriptView 对话结果页 UI 调整设计文档

2026-06-23 22:49:15 +08:00
parent ae1463e400
commit 6b6af757d0
1 changed files with 133 additions and 0 deletions
@@ -0,0 +1,133 @@
+---
+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` 编译通过。