fix: 预览面板缩小 + 配音缺失修复 #1495

Merged

auto-approve-bot merged 1 commits from fix/preview-size-voice into develop 2026-08-25 14:02:41 +08:00

Conversation 5 Commits 1 Files Changed 3

+53 -15

xiaoxia commented 2026-08-25 13:51:07 +08:00

Owner

Copy Link

Copy Source

改动

1. 手机框缩小

• generate.css: 右侧栏 400px → 320px
• FrontendPreviewPlayer: maxWidth 360→280, borderRadius 28→24
• 中央播放按钮 72→52, fontSize 36→26
• 片段指示器缩小

2. 配音缺失修复

• GeneratePage: 调用 previewTts({ text, voice_id }) 获取配音预览音频
• 将 audio_url 传给 FrontendPreviewPlayer 的 voiceAudioUrl prop
• 切换配音/标题时自动重新生成预览音频

## 改动 ### 1. 手机框缩小 - generate.css: 右侧栏 400px → 320px - FrontendPreviewPlayer: maxWidth 360→280, borderRadius 28→24 - 中央播放按钮 72→52, fontSize 36→26 - 片段指示器缩小 ### 2. 配音缺失修复 - GeneratePage: 调用 `previewTts({ text, voice_id })` 获取配音预览音频 - 将 audio_url 传给 FrontendPreviewPlayer 的 `voiceAudioUrl` prop - 切换配音/标题时自动重新生成预览音频

xiaoxia added 1 commit 2026-08-25 13:51:07 +08:00

fix: 预览面板缩小 + 配音缺失修复 ... a7deeaa54f

- generate.css: 右侧栏 400px→320px
- FrontendPreviewPlayer: 手机框 maxWidth 360→280, borderRadius 28→24
  - 中央播放按钮 72→52, fontSize 36→26
  - 片段指示器缩小（fontSize 12→10, padding 4px 12px→2px 8px）
- GeneratePage: 调用 previewTts 获取配音预览音频
  - 根据 selectedVoice/selectedClonedVoice + titleSettings.title 调用 TTS API
  - 将 audio_url 传给 FrontendPreviewPlayer 的 voiceAudioUrl prop
  - 切换配音或标题时自动重新生成预览音频

auto-approve-bot commented 2026-08-25 13:53:49 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1495

⚠️ 问题（1个需要修改）

1. apps/web/src/pages/generate/GeneratePage.tsx 第98行：AbortController 创建但未生效。
   • 问题描述：代码中创建了 AbortController 并在 cleanup 函数中调用了 abort()，但在调用 previewTts API 时未将 signal: controller.signal 传递给请求参数。这导致当组件卸载或依赖项变化时，网络请求实际上并未被取消，仅通过 cancelled 标志位阻止了状态更新。
   • 后果：用户快速切换选项时会产生大量冗余的网络请求，浪费服务器资源，且可能导致旧请求的响应晚于新请求到达（尽管有 cancelled 标志位保护，但请求本身仍消耗带宽和配额）。
   • 修改建议：将 signal 传递给 previewTts 函数，例如 previewTts({ ..., signal: controller.signal })。

💡 建议（1个可选）

1. apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx：样式魔法数字较多。
   • 具体内容：代码中多次出现 maxWidth: 280, borderRadius: 24, width: 52 等硬编码数值。建议将这些样式常量提取到组件顶部或 CSS 变量中，以便于统一维护和调整主题。

---

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 05:53:49 | 模型:}

## 代码审查结果 - PR #1495 ### ⚠️ 问题（1个需要修改） 1. **apps/web/src/pages/generate/GeneratePage.tsx 第98行**：`AbortController` 创建但未生效。 - **问题描述**：代码中创建了 `AbortController` 并在 cleanup 函数中调用了 `abort()`，但在调用 `previewTts` API 时未将 `signal: controller.signal` 传递给请求参数。这导致当组件卸载或依赖项变化时，网络请求实际上并未被取消，仅通过 `cancelled` 标志位阻止了状态更新。 - **后果**：用户快速切换选项时会产生大量冗余的网络请求，浪费服务器资源，且可能导致旧请求的响应晚于新请求到达（尽管有 `cancelled` 标志位保护，但请求本身仍消耗带宽和配额）。 - **修改建议**：将 `signal` 传递给 `previewTts` 函数，例如 `previewTts({ ..., signal: controller.signal })`。 ### 💡 建议（1个可选） 1. **apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx**：样式魔法数字较多。 - **具体内容**：代码中多次出现 `maxWidth: 280`, `borderRadius: 24`, `width: 52` 等硬编码数值。建议将这些样式常量提取到组件顶部或 CSS 变量中，以便于统一维护和调整主题。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 05:53:49 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

gitea-actions bot commented 2026-08-25 13:53:54 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#1495
预览链接	https://pr-1495.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1495 | | 预览链接 | [https://pr-1495.preview.xiaoxiajianji.com](https://pr-1495.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

auto-approve-bot approved these changes 2026-08-25 13:54:09 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-25 13:54:09 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia referenced this issue from a commit 2026-08-25 13:58:29 +08:00

fix: 预览面板缩小 + 配音缺失修复 (#1495)

auto-approve-bot merged commit b7d96f1b2e into develop 2026-08-25 14:02:41 +08:00

auto-approve-bot deleted branch fix/preview-size-voice 2026-08-25 14:02:41 +08:00

gitea-actions bot commented 2026-08-25 14:03:56 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #1495 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1495 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

Labels

Clear labels

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1495