seaislee1209 aa1a70121a
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 4m47s
feat(notification): 公告颜色自适应 — 算法 strip 暗色/浅色专用灰度色,彩色保留
用户反馈:公告里手写的 <div style="color:#e0e0e0"> 在浅色背景下糊;
工具栏只改了"红字""蓝字"按钮(自动适配),自由手写硬编码颜色还是会踩坑。

方案:写 adaptAnnouncementColors helper,sanitize 前预处理 HTML,用算法识别
"灰度系 + 极端亮度(>200 或 <80)"的颜色 → strip 整条声明,让继承主题色;
彩色(三通道差 ≥ 30)一律保留,因为它们通常双主题都可读。

判断细节:
- 用 canvas.fillStyle 解析任意 CSS 颜色值(支持 hex/rgb/rgba/hsl/命名色)
- 灰度判断:max(r,g,b) - min(r,g,b) < 30(允许微偏色)
- 亮度判断:(r+g+b)/3 > 200(浅) 或 < 80(深) 双向 strip
- CSS var / currentColor / inherit / transparent 一律保留(用户已经主题适配过)
- 不止 color,background-color / border-* / outline-color 都覆盖

实际验证(用户给的 HTML 例子):
- div color: #e0e0e0 (224,224,224)  → 灰度+亮 → strip ✓
- h2 color: #a78bfa (167,139,250)   → 紫色 → 保留 ✓
- span color: #34d399 (52,211,153)  → 绿色 → 保留 ✓
- hr border #374151 (55,65,81)      → 灰度+暗 → strip ✓

实现:
- 新建 web/src/lib/adaptAnnouncementColors.ts(~110 行,纯 DOMParser+canvas,无依赖)
- AnnouncementModal:sanitize 前调用 adaptAnnouncementColors
- NotificationsPage 展开公告:同上
- SSR 安全:document 不存在时原样返回

smoke 验证:
- 测试公告同时含 #e0e0e0/#374151(灰度,应 strip)+ #a78bfa/#34d399(彩,应留)
- 展开后 page.evaluate 扫 inline style 验证 4 项颜色去留 — 4/4 全过
- announcement-integration-smoke 17/17 (从 13 加 4 项颜色检查)
- v0.20.1-smoke 11/11 + modal-interaction 8/8 + v2-smoke 25/25 + vitest 71/162

UX 影响:
- 超管手写 HTML 用 #e0e0e0 类暗色专用默认色 → 自动 strip,浅深都清晰
- 超管手写 #ff5e5e/#34d399 类彩色 → 保留,两个主题都看得见
- "我自定义了颜色就保留,没自定义按系统主题"语义达成

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-15 16:48:46 +08:00
..
2026-04-04 19:38:36 +08:00
2026-03-13 15:38:08 +08:00