happy-life-star/docs/superpowers/specs/2026-06-23-script-view-result-ui-adjustment-design.md

author, created_at, purpose

author	created_at	purpose
Peanut	2026-06-23	固定 ScriptView.vue 结果页顶部按钮，调整底部输入框边距，语音按钮改为麦克风图标

ScriptView 对话结果页 UI 调整

背景

在 ScriptView.vue（剧本生成/对话结果页）中，结果页顶部左侧的「历史」按钮和右上角的「×」关闭按钮会随着页面内容滚动而移动，影响操作。底部输入框区域左右贴近屏幕边缘，视觉拥挤；语音按钮使用「语音」文字，不够简洁。

目标

1. 结果页顶部的历史按钮和关闭按钮在页面滚动时保持固定，不随内容滚动。
2. 底部输入框区域左右增加 24rpx 边距，输入框宽度适当压缩。
3. 语音按钮文字改为麦克风图标，颜色与当前主题一致。
4. 发送按钮保持当前大小和样式。

改动点

1. 顶部按钮固定

文件：mini-program/src/pages/main/ScriptView.vue

将结果页顶部包裹层改为固定定位，并为下方内容增加顶部 padding 避免遮挡。

结构示例：

<view class="result-header">
  <view class="history-button" @click="openScriptLibrary">...</view>
  <button class="page-close-btn" @click="closeResult">×</button>
</view>

样式示例：

.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 增加左右内边距：

.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

修改前：

<view class="chat-voice-btn" ...>
  <text>语音</text>
</view>

修改后：

<view class="chat-voice-btn" ...>
  <text class="voice-icon">🎤</text>
</view>

样式：

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