feat: 预览播放器手机风格视觉改造 — 9:16竖屏外框+毛玻璃控制条 #1494

Merged

auto-approve-bot merged 1 commits from feat/phone-style-preview into develop 2026-08-25 13:01:31 +08:00

Conversation 5 Commits 1 Files Changed 2

+119 -60

xiaoxia commented 2026-08-25 12:51:04 +08:00

Owner

Copy Link

Copy Source

改动

generate.css

• 右侧栏 320px → 400px
• .xx-generate-right-col 改为 align-items: center 水平居中手机框，去掉之前的 height/min-height

FrontendPreviewPlayer.tsx

• 容器改为 aspectRatio: 9/16 + maxWidth: 360px，锁定竖屏比例
• borderRadius: 28 + boxShadow 营造手机外框质感
• 中央播放按钮 72px 圆形毛玻璃（backdropFilter blur），hover 缩放
• 控制条毛玻璃效果，白色进度条，圆形小播放按钮
• 片段指示器移至右上角，胶囊形状
• 空状态/错误/加载状态也在 9:16 手机框内居中显示
• 视频 objectFit: contain 保持不变

## 改动 ### generate.css - 右侧栏 320px → 400px - `.xx-generate-right-col` 改为 `align-items: center` 水平居中手机框，去掉之前的 height/min-height ### FrontendPreviewPlayer.tsx - 容器改为 `aspectRatio: 9/16` + `maxWidth: 360px`，锁定竖屏比例 - `borderRadius: 28` + `boxShadow` 营造手机外框质感 - 中央播放按钮 72px 圆形毛玻璃（backdropFilter blur），hover 缩放 - 控制条毛玻璃效果，白色进度条，圆形小播放按钮 - 片段指示器移至右上角，胶囊形状 - 空状态/错误/加载状态也在 9:16 手机框内居中显示 - 视频 objectFit: contain 保持不变

xiaoxia added 1 commit 2026-08-25 12:51:04 +08:00

feat: 预览播放器手机风格视觉改造 — 9:16竖屏外框+毛玻璃控制条+精致播放按钮 ... e3b18eba39

- generate.css: 右侧栏 320px→400px，改为 align-items:center 水平居中手机框
- FrontendPreviewPlayer: 容器改为 aspectRatio 9/16 + maxWidth 360px
  - borderRadius 28px + boxShadow 营造手机外框质感
  - 中央播放按钮 72px 圆形毛玻璃，hover 缩放效果
  - 控制条毛玻璃效果(backdropFilter blur)，白色进度条
  - 片段指示器移至右上角胶囊形状
  - 空状态/错误状态也在 9:16 手机框内居中显示
- 视频保持 objectFit:contain，竖屏填满横屏居中黑边

auto-approve-bot commented 2026-08-25 12:52:29 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1494

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

1. FrontendPreviewPlayer.tsx 第491-505, 595-605行：React 状态与 DOM 直接操作冲突导致 Hover 交互失效。
   • 原因：代码中使用 onMouseEnter 和 onMouseLeave 直接修改 e.currentTarget.style。由于这是一个视频播放器组件，会随着播放进度（currentTime 等）频繁触发重渲染。React 在重渲染时会重新应用 JSX 中定义的静态 style 属性，这会直接覆盖通过事件监听器手动设置的 DOM 样式。

• 后果：用户鼠标悬停时，按钮可能会出现闪烁（瞬间放大后立即恢复原状）或者 Hover 效果完全不可见，严重影响交互体验。
• 建议：删除 onMouseEnter/Leave 中的样式修改逻辑，改用 CSS :hover 伪类（推荐），或者使用 React useState 来控制 hover 状态。

💡 建议（1个可选）

1. FrontendPreviewPlayer.tsx：建议将内联样式还原为 CSS 类或使用 CSS-in-JS 方案。
   • 说明：本次修改将大量样式从 CSS 类迁移到了 JSX 的内联 style 对象中。这导致组件代码变得非常冗长，降低了可读性，且不利于样式的复用和统一维护（如主题切换）。建议将样式逻辑保留在 .css 文件中，仅对动态变化的样式属性使用内联写法。

---

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能无明显问题

---

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

## 代码审查结果 - PR #1494 ### ⚚️ 问题（1个需要修改） 1. **FrontendPreviewPlayer.tsx 第491-505, 595-605行**：React 状态与 DOM 直接操作冲突导致 Hover 交互失效。 - **原因**：代码中使用 `onMouseEnter` 和 `onMouseLeave` 直接修改 `e.currentTarget.style`。由于这是一个视频播放器组件，会随着播放进度（`currentTime` 等）频繁触发重渲染。React 在重渲染时会重新应用 JSX 中定义的静态 `style` 属性，这会直接覆盖通过事件监听器手动设置的 DOM 样式。 - **后果**：用户鼠标悬停时，按钮可能会出现闪烁（瞬间放大后立即恢复原状）或者 Hover 效果完全不可见，严重影响交互体验。 - **建议**：删除 `onMouseEnter/Leave` 中的样式修改逻辑，改用 CSS `:hover` 伪类（推荐），或者使用 React `useState` 来控制 hover 状态。 ### 💡 建议（1个可选） 1. **FrontendPreviewPlayer.tsx**：建议将内联样式还原为 CSS 类或使用 CSS-in-JS 方案。 - **说明**：本次修改将大量样式从 CSS 类迁移到了 JSX 的内联 `style` 对象中。这导致组件代码变得非常冗长，降低了可读性，且不利于样式的复用和统一维护（如主题切换）。建议将样式逻辑保留在 `.css` 文件中，仅对动态变化的样式属性使用内联写法。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能无明显问题 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 04:52:29 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

gitea-actions bot commented 2026-08-25 12:53:19 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-08-25 12:53:57 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-25 12:53:58 +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 12:58:42 +08:00

feat: 预览播放器手机风格视觉改造 — 9:16竖屏外框+毛玻璃控制条+精致播放按钮 (#1494)

auto-approve-bot merged commit d79cf3726b into develop 2026-08-25 13:01:31 +08:00

auto-approve-bot deleted branch feat/phone-style-preview 2026-08-25 13:01:31 +08:00

gitea-actions bot commented 2026-08-25 13:02:34 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1494 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#1494