style(title): 标题预设卡片改为深色背景大T字紧凑布局 #1606

Merged

xiaoxia merged 2 commits from fix/title-preset-card-style into develop 2026-09-01 14:58:56 +08:00

Conversation 3 Commits 2 Files Changed 2

+19 -19

xiaoxia commented 2026-09-01 14:41:56 +08:00

Owner

Copy Link

Copy Source

目标

标题预设样式面板的T图标卡片改为深色背景、大T字、紧凑布局。

改动

generate.css

• .xx-title-preset-card: 52x52固定尺寸，#3a3a3a深色背景，8px圆角，去掉aspect-ratio和flex-direction:column
• hover: #4a4a4a背景 + #666边框
• active: #409eff边框 + #4a4a4a背景
• .xx-title-preset-preview-text: font-size 32px + font-weight 700

constants.ts

• TITLE_PRESETS 所有 8 个 preset 的 previewStyle.fontSize 统一改为 "32px"

不改

网格列数、间距、点击选中逻辑、预设内容、hover/active边框颜色逻辑全部不变。

## 目标 标题预设样式面板的T图标卡片改为深色背景、大T字、紧凑布局。 ## 改动 ### generate.css - `.xx-title-preset-card`: 52x52固定尺寸，#3a3a3a深色背景，8px圆角，去掉aspect-ratio和flex-direction:column - hover: #4a4a4a背景 + #666边框 - active: #409eff边框 + #4a4a4a背景 - `.xx-title-preset-preview-text`: font-size 32px + font-weight 700 ### constants.ts - TITLE_PRESETS 所有 8 个 preset 的 previewStyle.fontSize 统一改为 "32px" ## 不改 网格列数、间距、点击选中逻辑、预设内容、hover/active边框颜色逻辑全部不变。

xiaoxia added 1 commit 2026-09-01 14:41:56 +08:00

style(title): 标题预设卡片改为深色背景大T字紧凑布局 ... 0bf1cfa7f4

- .xx-title-preset-card: 52x52固定尺寸，#3a3a3a深色背景，8px圆角
- hover: #4a4a4a + #666边框; active: #409eff边框
- .xx-title-preset-preview-text: font-size 32px + font-weight 700
- TITLE_PRESETS 所有 preset 的 previewStyle.fontSize 统一为 32px
- 不改网格列数/间距/点击逻辑/预设内容

gitea-actions bot commented 2026-09-01 14:49:29 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-09-01 14:51:07 +08:00

ci: re-trigger build 3c8b794efb

auto-approve-bot commented 2026-09-01 14:56:28 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

• 整体评价：需修改
• 建议级问题数量：1 个

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

1. [apps/web/src/pages/generate/generate.css] 容器尺寸与字体大小严重不匹配导致文本溢出
   • 问题类型：逻辑bug
   • 问题描述：CSS 中将 .xx-title-preset-card 的宽高固定为 52px，同时将内部文本 .xx-title-preset-preview-text 的字体大小设为 32px 且字重为 700（粗体）。结合 constants.ts 中的预设标签（如 "电影海报"、"综艺秀" 等多字符文本），当前 52px 的容器宽度远不足以容纳 32px 的粗体文本，必然导致文字溢出卡片边界，造成 UI 显示错乱。
   • 修改建议：建议增大 .xx-title-preset-card 的容器尺寸（例如宽高改为 80px 或 auto），或者适当减小预览字体大小，确保文本能完整显示在容器内。

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

1. [apps/web/src/pages/generate/generate.css] 硬编码颜色值破坏主题一致性
   • 具体内容：代码中将背景色、边框色和激活状态颜色从 CSS 变量（如 var(--bg-secondary), var(--primary-color)）修改为硬编码的十六进制颜色（如 #3a3a3a, #409eff）。如果应用支持明暗主题切换，此修改将导致卡片颜色无法随主题变化，建议恢复使用 CSS 变量以保持主题一致性。

✅ 良好实践

• 在 constants.ts 中统一了所有预设的 fontSize 为 32px，保证了不同风格预览在视觉上的一致性。

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-09-01 06:56:28 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：1 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/pages/generate/generate.css] 容器尺寸与字体大小严重不匹配导致文本溢出** - 问题类型：逻辑bug - 问题描述：CSS 中将 `.xx-title-preset-card` 的宽高固定为 `52px`，同时将内部文本 `.xx-title-preset-preview-text` 的字体大小设为 `32px` 且字重为 `700`（粗体）。结合 `constants.ts` 中的预设标签（如 "电影海报"、"综艺秀" 等多字符文本），当前 52px 的容器宽度远不足以容纳 32px 的粗体文本，必然导致文字溢出卡片边界，造成 UI 显示错乱。 - 修改建议：建议增大 `.xx-title-preset-card` 的容器尺寸（例如宽高改为 `80px` 或 `auto`），或者适当减小预览字体大小，确保文本能完整显示在容器内。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/generate.css] 硬编码颜色值破坏主题一致性** - 具体内容：代码中将背景色、边框色和激活状态颜色从 CSS 变量（如 `var(--bg-secondary)`, `var(--primary-color)`）修改为硬编码的十六进制颜色（如 `#3a3a3a`, `#409eff`）。如果应用支持明暗主题切换，此修改将导致卡片颜色无法随主题变化，建议恢复使用 CSS 变量以保持主题一致性。 ### ✅ 良好实践 - 在 `constants.ts` 中统一了所有预设的 `fontSize` 为 `32px`，保证了不同风格预览在视觉上的一致性。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-09-01 06:56:28 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia merged commit 262b730aca into develop 2026-09-01 14:58:56 +08:00

xiaoxia deleted branch fix/title-preset-card-style 2026-09-01 14:58:56 +08:00

gitea-actions bot commented 2026-09-01 15:02:14 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1606