shiyue/cc-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
96bfcaaf9993ee4755a7c301b34b3d39dca68ae3
cc-web/.trellis/tasks/07-17-gilded-wasteland-theme/research/plan-progress-icon-audit.md
shiyue e5059e97c4 chore: rebuild release package
2026-07-20 16:58:47 +08:00

3.7 KiB
Raw Blame History

Plan List 进度图标主题兼容审计

审计时间：2026-07-20

范围

  • 扩展既有 wasteland（暗金荒野）主题，不新增或替换主题 ID。
  • 只修改 Plan List 标题中的 .plan-progress-dot 视觉层。
  • washi、coolvibe、editorial、sage、ink、dawn、carbon、nocturne、cinder、gilded 保持 14px 语义色圆点。
  • wasteland 使用独立的本地原色图标；不修改 Plan 数据、DOM 结构和其他工具块。

素材台账

角色 归档路径 尺寸/格式 SHA-256 Alpha 用途
图标板 references/source-assets/wasteland-icon-sheet.webp 1672×941 RGB WebP 482edda2dbc8932b3c209686fab89f50fa8600242b16379b39fa6657e722410e 无 仅作为可复现切片源

运行时不依赖会话附件或远程 URL，切片脚本只读取上述归档文件。

参考区域到实现映射

进度语义 图标板区域 目标资产 实际 DOM CSS 责任
已完成 R2C3 STATUS (ONLINE) 的 16px 规格 icons/plan-progress/complete.png .plan-progress-dot.is-complete 暗金主题显示绿色宝石原色图标
未完成 R2C4 LOADING 的 16px 规格 icons/plan-progress/remaining.png .plan-progress-dot.is-remaining 暗金主题显示暗金分段环原色图标

两枚图标输出到 20×20 透明画布，按 alpha 加权重心居中；桌面和窄屏均保持主体清晰，不再从 64px PNG 二次缩小。

验收清单

  • 两枚 PNG 来自归档图标板的 16px 原生规格，manifest 记录源 hash、卡片、检测框、画布与用途。
  • PNG 为 RGBA，透明背景无黑边、棋盘格或文字残留。
  • 主题专属选择器全部限定 html[data-theme='wasteland']。
  • 其他 10 个主题仍使用 14×14、左边距 8px 的圆点。
  • Wasteland 完成/未完成图标可区分，标题与长计划不溢出。
  • style.css / app.js 缓存版本同步推进，资产与静态资源 HTTP 200。
  • plan-list-progress、wasteland-theme、gilded-theme 和全量回归通过。
  • Firefox 检查 11 个主题及 1440×900、500×844、390×844 视口。

实际验收记录

验收日期：2026-07-20

  • Firefox 152 实际加载 style.css?v=20260720-plan-progress-icons。
  • washi、coolvibe、editorial、sage、ink、dawn、carbon、nocturne、cinder、gilded：完成/未完成均为 14×14，左边距 8px；未完成圆点命中 1px inset 描边与 plan-progress-breathe 1.8s，没有加载主题图片。
  • wasteland：桌面图标 20×20、移动端 16×16；完成与未完成分别加载 complete.png、remaining.png；box-shadow: none，没有方形描边。
  • 呼吸动画在 700ms 采样间隔内从 scale(0.944) / opacity 0.820 变化到 scale(0.984) / opacity 0.948。
  • Firefox ui.prefersReducedMotion=1 时：animation-name: none、opacity: 1、transform: none，图标仍正常显示且无描边。
  • 1672×941、1440×900、500×844、390×844 均检查短计划与 12 图标长计划；标题、长计划和页面横向溢出量均为 0。
  • 两枚 PNG、manifest、CSS、JS 均返回 HTTP 200；专项、暗金主题、旧 Warframe 主题与全量回归均通过。

最终完成态同步修复

  • 问题：展开列表使用最新 result，标题原先优先读取旧 meta.progress，会出现列表全部勾选但最后一个图标仍未点亮。
  • 修复：标题进度来源调整为 result → input → meta；无法解析最新结果时仍保留兼容回退。
  • Firefox 复现数据：meta/input=7/8、result=8/8；最终解析为 8/8，DOM 生成 8 个 .is-complete、0 个 .is-remaining，横向溢出为 0。