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

fix: AI配音标识被overflow:hidden裁剪不显示 #1672

Merged
xiaoxia merged 1 commits from fix/ai-badge-overflow into develop 2026-09-03 22:40:11 +08:00
Conversation 5 Commits 1 Files Changed 1
+4 -2
xiaoxia commented 2026-09-03 22:33:25 +08:00
Owner
Copy Link
Copy Source

问题

AI配音标识（badge）在配音素材卡片中不显示。

根因

.xx-voice-name CSS 有 overflow: hidden + text-overflow: ellipsis，AI badge 作为其子元素渲染。当标题文字较长时，文字溢出被截断为省略号，badge 也被父容器的 overflow 裁剪掉了——代码确实渲染了 badge，但被 CSS 隐藏。

修复

将 AI badge 从 .xx-voice-name 内部移到外层的 .xx-voice-name-row flex 容器中（该 CSS 类已在 voices.css 中定义：display: flex; align-items: center; gap: 4px）。name 单独包裹在 .xx-voice-name 内做文字截断，badge 在其外部不受 overflow 影响。

改动

  • apps/web/src/pages/voices/components/MaterialVoiceTab.tsx: badge 渲染位置调整
## 问题 AI配音标识（badge）在配音素材卡片中不显示。 ## 根因 `.xx-voice-name` CSS 有 `overflow: hidden` + `text-overflow: ellipsis`，AI badge 作为其子元素渲染。当标题文字较长时，文字溢出被截断为省略号，badge 也被父容器的 overflow 裁剪掉了——代码确实渲染了 badge，但被 CSS 隐藏。 ## 修复 将 AI badge 从 `.xx-voice-name` 内部移到外层的 `.xx-voice-name-row` flex 容器中（该 CSS 类已在 voices.css 中定义：`display: flex; align-items: center; gap: 4px`）。name 单独包裹在 `.xx-voice-name` 内做文字截断，badge 在其外部不受 overflow 影响。 ## 改动 - `apps/web/src/pages/voices/components/MaterialVoiceTab.tsx`: badge 渲染位置调整
xiaoxia added 1 commit 2026-09-03 22:33:25 +08:00
fix: 修复AI配音标识被overflow:hidden裁剪不显示
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 1s
Details
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
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 / Frontend Unit Tests (pull_request) Successful in 1m30s
Details
AI Code Review / AI Code Review (pull_request) Successful in 1m44s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 2m2s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m2s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m15s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 2m26s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 3m34s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 5m8s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 4m27s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 9s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m59s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 32m24s
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 / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 1s
Details
78229fbb3a 
- .xx-voice-name 有 overflow:hidden + text-overflow:ellipsis
- AI badge 作为其子元素，在长标题时被父容器裁掉
- 将 badge 移到 .xx-voice-name-row flex 容器内（已有CSS定义）
- name 单独包裹在 .xx-voice-name 内，badge 在其外部不受 overflow 影响
auto-approve-bot commented 2026-09-03 22:35:10 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

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

📊 审查概览

  • 整体评价：通过
  • 建议级问题数量：0 个

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

无

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

无

✅ 良好实践

  • 代码结构清晰，通过增加父容器 xx-voice-name-row 实现了文本与徽章的横向布局，符合常规 UI 开发模式。
  • 保留了原有的 title 属性，确保了鼠标悬停提示功能不受影响。

🤖 由 AI 代码审查机器人自动生成 | 2026-09-03 14:35:10 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：0 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 无 ### ✅ 良好实践 - 代码结构清晰，通过增加父容器 `xx-voice-name-row` 实现了文本与徽章的横向布局，符合常规 UI 开发模式。 - 保留了原有的 `title` 属性，确保了鼠标悬停提示功能不受影响。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-09-03 14:35:10 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
auto-approve-bot approved these changes 2026-09-03 22:35:43 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-09-03 22:35:43 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-09-03 22:37:01 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1672 | | 预览链接 | [https://pr-1672.preview.xiaoxiajianji.com](https://pr-1672.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
xiaoxia merged commit 109d7afbc7 into develop 2026-09-03 22:40:11 +08:00
gitea-actions bot commented 2026-09-03 22:42:07 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1672
Delete Branch "fix/ai-badge-overflow"

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?