fix(title): 预设T字双图层渲染+间距1.5px+深色改浅色 #1612

Merged

xiaoxia merged 1 commits from fix/title-preset-t-render into develop 2026-09-01 18:04:34 +08:00

Conversation 5 Commits 1 Files Changed 3

+102 -26

xiaoxia commented 2026-09-01 17:57:22 +08:00

Owner

Copy Link

Copy Source

5项修复

① 间距调整

• .xx-title-presets-grid gap: 6px → 1.5px

② T字渲染改为双图层方案

• TitlePresetsGrid.tsx: 两个重叠span
  • 底层：描边色 + 12方向text-shadow模拟粗描边
  • 上层：填充色（color）+ 可选textShadow
• 解决 -webkit-text-stroke 在Chromium中吞掉填充色的bug（variety_show粉色T变白色的根因）

③ constants.ts previewStyle 全面更新

• 每个preset新增 _strokeColor + _strokeWidth（给双图层底层用）
• fresh_minimal: color #333→#e8e8e8（深色背景上不可见→浅色可见）
• business: color #1a1a1a→#e0e0e0
• handwriting: color #333→#e0e0e0
• variety_show: 保持 #ff4081 粉色填充 + 白色描边

④ 删除所有 WebkitTextStroke

• 双图层方案完全取代，避免Chromium渲染bug

⑤ CSS移除全局font-weight

• .xx-title-preset-preview-text 不再设死 font-weight:700
• fontWeight由每个preset的previewStyle单独控制

不改的： 点击选中逻辑、预设内容（style字段）、hover/active边框色、拖拽功能

## 5项修复 ### ① 间距调整 - `.xx-title-presets-grid` gap: 6px → 1.5px ### ② T字渲染改为双图层方案 - `TitlePresetsGrid.tsx`: 两个重叠span - 底层：描边色 + 12方向text-shadow模拟粗描边 - 上层：填充色（color）+ 可选textShadow - 解决 `-webkit-text-stroke` 在Chromium中吞掉填充色的bug（variety_show粉色T变白色的根因） ### ③ constants.ts previewStyle 全面更新 - 每个preset新增 `_strokeColor` + `_strokeWidth`（给双图层底层用） - **fresh_minimal**: color #333→#e8e8e8（深色背景上不可见→浅色可见） - **business**: color #1a1a1a→#e0e0e0 - **handwriting**: color #333→#e0e0e0 - variety_show: 保持 #ff4081 粉色填充 + 白色描边 ### ④ 删除所有 WebkitTextStroke - 双图层方案完全取代，避免Chromium渲染bug ### ⑤ CSS移除全局font-weight - `.xx-title-preset-preview-text` 不再设死 font-weight:700 - fontWeight由每个preset的previewStyle单独控制 **不改的：** 点击选中逻辑、预设内容（style字段）、hover/active边框色、拖拽功能

xiaoxia added 1 commit 2026-09-01 17:57:23 +08:00

fix(title): 预设T字双图层渲染+间距1.5px+深色改浅色 ... d0c0649af2

- TitlePresetsGrid.tsx: 双层span叠加(底层text-shadow描边+上层填充色)
  解决-webkit-text-stroke在Chromium中吞掉填充色的bug
- generate.css: gap 6px→1.5px; 移除CSS全局font-weight:700
- constants.ts: 8个preset全部加_strokeColor/_strokeWidth
  fresh_minimal/business/handwriting深色(#333/#1a1a1a)改浅色(#e8e8e8/#e0e0e0)
  删除所有WebkitTextStroke属性
  variety_show保持粉色#ff4081+白色描边

gitea-actions bot commented 2026-09-01 18:01:55 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot commented 2026-09-01 18:02:27 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

1. [apps/web/src/pages/generate/constants.ts: 103, 128, 166] 预设颜色配置错误导致低对比度
   • 问题类型：逻辑bug / 数据损坏风险
   • 问题描述：
     在 TITLE_PRESETS 数组中，"清新简约"、"商务极简" 和 "手写字" 这三个预设的 color 属性从原本的深色（如 #333333）被修改为极浅的灰色（如 #e8e8e8）。
     考虑到其他预设（如"经典白字"）是白色字体配黑色描边，且通常网格背景为白色或浅色，这些浅灰色文字在白色背景下将几乎不可见，导致严重的用户体验问题（UI显示异常）。
   • 修改建议：
     请核实这些预设的背景色。如果背景确认为白色，请将 color 恢复为深色系（如原来的 #333333），或者确认背景是否已改为深色模式。目前的修改极大概率是误操作。

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

1. [apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx: 25] 性能优化：避免重复计算
   • 具体内容：
     buildStrokeShadow 函数目前在组件渲染的 map 循环中被调用。这意味着每次组件重新渲染时，都会重新计算这些固定的阴影字符串。
     由于 TITLE_PRESETS 是常量，建议在 constants.ts 定义数据时就预先计算好 textShadow 字符串并存储，或者使用 useMemo 缓存计算结果，以减少运行时的计算开销。

✅ 良好实践

• 使用 text-shadow 模拟描边来解决 Chromium 中 -webkit-text-stroke 吞噬填充色的 Bug，这是一个非常专业且有效的兼容性修复方案。
• 在装饰性的描边层（底层 span）正确使用了 aria-hidden 属性，避免了屏幕阅读器重复朗读内容，体现了良好的无障碍意识。
• 通过 TypeScript 接口扩展（& { _strokeColor?: string ... }）清晰地定义了自定义属性，保持了类型安全。

---

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

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：1 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/pages/generate/constants.ts: 103, 128, 166] 预设颜色配置错误导致低对比度** - 问题类型：逻辑bug / 数据损坏风险 - 问题描述： 在 `TITLE_PRESETS` 数组中，"清新简约"、"商务极简" 和 "手写字" 这三个预设的 `color` 属性从原本的深色（如 `#333333`）被修改为极浅的灰色（如 `#e8e8e8`）。 考虑到其他预设（如"经典白字"）是白色字体配黑色描边，且通常网格背景为白色或浅色，这些浅灰色文字在白色背景下将几乎不可见，导致严重的用户体验问题（UI显示异常）。 - 修改建议： 请核实这些预设的背景色。如果背景确认为白色，请将 `color` 恢复为深色系（如原来的 `#333333`），或者确认背景是否已改为深色模式。目前的修改极大概率是误操作。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx: 25] 性能优化：避免重复计算** - 具体内容： `buildStrokeShadow` 函数目前在组件渲染的 `map` 循环中被调用。这意味着每次组件重新渲染时，都会重新计算这些固定的阴影字符串。 由于 `TITLE_PRESETS` 是常量，建议在 `constants.ts` 定义数据时就预先计算好 `textShadow` 字符串并存储，或者使用 `useMemo` 缓存计算结果，以减少运行时的计算开销。 ### ✅ 良好实践 - 使用 `text-shadow` 模拟描边来解决 Chromium 中 `-webkit-text-stroke` 吞噬填充色的 Bug，这是一个非常专业且有效的兼容性修复方案。 - 在装饰性的描边层（底层 `span`）正确使用了 `aria-hidden` 属性，避免了屏幕阅读器重复朗读内容，体现了良好的无障碍意识。 - 通过 TypeScript 接口扩展（`& { _strokeColor?: string ... }`）清晰地定义了自定义属性，保持了类型安全。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-09-01 10:02:27 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot approved these changes 2026-09-01 18:03:03 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-01 18:03:03 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia merged commit 0a5bd4f7e6 into develop 2026-09-01 18:04:34 +08:00

gitea-actions bot commented 2026-09-01 18:08:09 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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