xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

fix(ui): 模板选择预览条缩短+素材列表改为竖屏9:16卡片网格 #1521

Closed
xiaoxia wants to merge 1 commits from fix/ui-template-thumb-and-material-grid into develop
pull from: fix/ui-template-thumb-and-material-grid
merge into: xiaoxia:develop
Conversation 3 Commits 1 Files Changed 2
+165 -114
xiaoxia commented 2026-08-27 14:55:22 +08:00
Owner
Copy Link
Copy Source

任务G: 模板选择预览条缩短

  • xx-choice-thumb 高度从 60px → 36px
  • emoji 字号从 24px → 16px
  • 卡片 padding 从 14px → 10px
  • thumb margin-bottom 从 10px → 6px

任务H: 素材列表改为竖屏视频预览样式

  • 从纵向列表改为 CSS Grid 自适应多列
  • 每个卡片 9:16 竖屏比例
  • 视频封面/缩略图作为背景
  • 中央播放按钮（蓝色圆形）
  • 右下角时长 badge（mm:ss）
  • 左下角文件名（带截断省略）
  • 左上角选中勾选标记
  • hover 视频自动播放功能保持不变
## 任务G: 模板选择预览条缩短 - `xx-choice-thumb` 高度从 60px → 36px - emoji 字号从 24px → 16px - 卡片 padding 从 14px → 10px - thumb margin-bottom 从 10px → 6px ## 任务H: 素材列表改为竖屏视频预览样式 - 从纵向列表改为 CSS Grid 自适应多列 - 每个卡片 9:16 竖屏比例 - 视频封面/缩略图作为背景 - 中央播放按钮（蓝色圆形） - 右下角时长 badge（mm:ss） - 左下角文件名（带截断省略） - 左上角选中勾选标记 - hover 视频自动播放功能保持不变
xiaoxia added 1 commit 2026-08-27 14:55:22 +08:00
fix(ui): 模板选择预览条缩短+素材列表改为竖屏9:16卡片网格
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 29s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m12s
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m10s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
AI Code Review / AI Code Review (pull_request) Successful in 2m14s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m54s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m32s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m13s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m28s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m33s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m14s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 9m6s
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 3m14s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 4m19s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 3m5s
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
a315be58f6 
任务G: 模板选择预览条从 60px 缩短到 36px，卡片间距收紧
任务H: 素材列表从横向列表改为竖屏 9:16 卡片网格
  - 视频封面/缩略图作为背景
  - 中央播放按钮
  - 右下角时长 badge
  - 左下角文件名
  - 左上角选中勾选标记
  - hover 播放功能保持不变
auto-approve-bot commented 2026-08-27 15:01:25 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

  • 是否存在阻塞级问题：否
  • 阻塞级问题数量：0 个

📊 审查概览

  • 整体评价：有建议
  • 建议级问题数量：3 个

🔴 阻塞级问题（必须修复）

无

💡 改进建议（不阻塞合并）

  1. [可访问性] 移除原生 <input> 导致键盘交互失效

    • 具体内容：代码将 <label> 包裹的 <input type="checkbox"> 替换为 <div> 并通过 onClick 处理选中。这会导致组件失去键盘焦点支持（Tab 键无法选中，Space/Enter 无法切换），违反了基本的 Web 可访问性标准。
    • 修改建议：建议保留 <input type="checkbox" style={{ display: 'none' }} /> 或者在 div 上添加 role="checkbox"、tabIndex={0} 以及 onKeyDown 事件处理，确保键盘用户可以正常操作。

  2. [ManualMaterialList.tsx: 107] 图片加载失败处理逻辑缺失

    • 具体内容：在 img 标签的 onError 事件中，仅执行了 target.style.display = "none"。由于回退图标（{!thumbSrc ? ...}）是基于条件渲染的，当 thumbSrc 存在但加载失败（404）时，回退图标不会出现在 DOM 中，导致卡片内容完全空白，用户体验较差。
    • 修改建议：建议引入一个状态（如 imgError）来控制显示回退图标，或者在 onError 中动态插入/显示回退元素，确保缩略图加载失败时用户仍能看到占位符。

  3. [ManualMaterialList.tsx: 70] 视频播放 Promise 未处理

    • 具体内容：video.play() 是一个异步操作，返回 Promise。在某些浏览器策略下（如未与文档交互），播放可能会被拒绝并抛出异常，目前代码未对该 Promise 进行处理，可能导致控制台报错。
    • 修改建议：建议添加 .catch() 处理播放失败的情况，例如：video.play().catch(err => console.warn('Autoplay prevented', err))。

✅ 良好实践

  • 使用 grid 布局配合 minmax 实现了响应式的卡片网格，适配性良好。
  • 视频标签添加了 preload="none"，有效避免了页面加载时对带宽的过度占用。
  • fmtDuration 工具函数逻辑严谨，正确处理了 0、null 和 undefined 等边界情况。
  • 使用 activeVideoRef 确保同一时间只有一个视频播放，避免了多个视频同时播放造成的性能和体验问题。

🤖 由 AI 代码审查机器人自动生成 | 2026-08-27 07:01:25 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：有建议 - 建议级问题数量：3 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[可访问性] 移除原生 `<input>` 导致键盘交互失效** - 具体内容：代码将 `<label>` 包裹的 `<input type="checkbox">` 替换为 `<div>` 并通过 `onClick` 处理选中。这会导致组件失去键盘焦点支持（Tab 键无法选中，Space/Enter 无法切换），违反了基本的 Web 可访问性标准。 - 修改建议：建议保留 `<input type="checkbox" style={{ display: 'none' }} />` 或者在 `div` 上添加 `role="checkbox"`、`tabIndex={0}` 以及 `onKeyDown` 事件处理，确保键盘用户可以正常操作。 2. **[ManualMaterialList.tsx: 107] 图片加载失败处理逻辑缺失** - 具体内容：在 `img` 标签的 `onError` 事件中，仅执行了 `target.style.display = "none"`。由于回退图标（`{!thumbSrc ? ...}`）是基于条件渲染的，当 `thumbSrc` 存在但加载失败（404）时，回退图标不会出现在 DOM 中，导致卡片内容完全空白，用户体验较差。 - 修改建议：建议引入一个状态（如 `imgError`）来控制显示回退图标，或者在 `onError` 中动态插入/显示回退元素，确保缩略图加载失败时用户仍能看到占位符。 3. **[ManualMaterialList.tsx: 70] 视频播放 Promise 未处理** - 具体内容：`video.play()` 是一个异步操作，返回 Promise。在某些浏览器策略下（如未与文档交互），播放可能会被拒绝并抛出异常，目前代码未对该 Promise 进行处理，可能导致控制台报错。 - 修改建议：建议添加 `.catch()` 处理播放失败的情况，例如：`video.play().catch(err => console.warn('Autoplay prevented', err))`。 ### ✅ 良好实践 - 使用 `grid` 布局配合 `minmax` 实现了响应式的卡片网格，适配性良好。 - 视频标签添加了 `preload="none"`，有效避免了页面加载时对带宽的过度占用。 - `fmtDuration` 工具函数逻辑严谨，正确处理了 `0`、`null` 和 `undefined` 等边界情况。 - 使用 `activeVideoRef` 确保同一时间只有一个视频播放，避免了多个视频同时播放造成的性能和体验问题。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-27 07:01:25 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
gitea-actions bot commented 2026-08-27 15:02:40 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1521 | | 预览链接 | [https://pr-1521.preview.xiaoxiajianji.com](https://pr-1521.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
xiaoxia closed this pull request 2026-08-27 15:06:13 +08:00
gitea-actions bot commented 2026-08-27 15:16:15 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1521 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 29s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m12s
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m10s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
AI Code Review / AI Code Review (pull_request) Successful in 2m14s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m54s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m32s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m13s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m28s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m33s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m14s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 9m6s
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 3m14s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 4m19s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 3m5s
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No Reviewers
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
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1521
Delete Branch "fix/ui-template-thumb-and-material-grid"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?