peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6bc00863faab339e7771745f159fb6585d052b9d
happy-life-star/docs/superpowers/plans/2026-06-23-script-view-result-ui-adjustment-plan.md
T

6.9 KiB
Raw Blame History

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 结构（关键部分）：

<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 之前：

<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 即可：

.result-scroll-content {
  min-height: 100%;
  box-sizing: border-box;
  padding: 0 0 220rpx;
}
  • Step 4: 提交
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: 查看当前样式

.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：

.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: 提交
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: 修改语音按钮内容

将：

<view
  class="chat-voice-btn"
  :class="{ pressing: voiceState === 'pressing', recognizing: voiceState === 'recognizing' }"
  @touchstart.prevent="startVoicePress"
  @touchend.prevent="endVoicePress"
  @touchcancel.prevent="cancelVoicePress"
>
  <text>语音</text>
</view>

改为：

<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 样式后增加：

.voice-icon {
  font-size: 32rpx;
  line-height: 1;
}

并修改按下状态的颜色继承：

.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: 提交
git add mini-program/src/pages/main/ScriptView.vue
git commit -m "fix：ScriptView 语音按钮改为麦克风图标"

Task 4: 编译与 H5 验证

Files:

  • 无新增/修改文件

  • Step 1: 运行 H5 生产构建

cd mini-program
npm run build:h5

期望输出包含 DONE Build complete.，无编译错误。

  • Step 2: 启动 H5 开发服务器

确保端口未被占用，然后：

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 名、事件名与源码保持一致。

Reference in New Issue View Git Blame Copy Permalink