From 1372ec19b8806ba047af7dd6737880f6f7ba7fab Mon Sep 17 00:00:00 2001 From: cnliucheng Date: Wed, 29 Jul 2026 14:17:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8B=8B=E7=AB=A0=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E6=9B=BF=E6=8D=A2=E8=AE=BE=E8=AE=A1=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config.js | 4 +-- .../specs/2026-07-29-iconpark-badge-design.md | 30 +++++++++++++++++++ 2 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 docs/superpowers/specs/2026-07-29-iconpark-badge-design.md diff --git a/config.js b/config.js index 4f9b194..0750af3 100644 --- a/config.js +++ b/config.js @@ -56,8 +56,8 @@ module.exports = { /** * 累计训练天数里程碑勋章,按累计去重训练日(可中断,非连续打卡)解锁。 - * 记录页用里程碑进度条展示,节点按 sqrt 感知映射分布(早期里程碑更显眼), - * 填充与节点同映射,解锁时填充正好抵达该节点、满级时满格。增删改这里即可, + * 记录页用等距里程碑进度条展示,每个连接段按当前阶段进度填充为绿色。 + * 解锁下一枚勋章时,对应连接段恰好填满。增删改这里即可, * 口径=累计去重训练日(可中断);name 仅作趣味命名,不暗示连续打卡。 */ trainingDayBadges: [ diff --git a/docs/superpowers/specs/2026-07-29-iconpark-badge-design.md b/docs/superpowers/specs/2026-07-29-iconpark-badge-design.md new file mode 100644 index 0000000..cb50288 --- /dev/null +++ b/docs/superpowers/specs/2026-07-29-iconpark-badge-design.md @@ -0,0 +1,30 @@ +# IconPark 勋章视觉替换设计 + +## 目标 + +替换记录页训练勋章的现有通用图标,使其形成更清晰的成长叙事,同时保留主题换色、解锁状态、勋章点击说明和现有进度计算。 + +## 已确认的视觉方向 + +采用 IconPark 的彩色填充风格(预览方案 A)。图标序列为:火焰、闪电、徽章、奖杯、钻石、星耀、皇冠。 + +- 前三枚已解锁图标使用暖橙、金黄、主题绿的温和递进,强调早期坚持。 +- 第四至第七枚解锁图标使用当前主题色,保持换肤一致性。 +- 未解锁图标沿用浅灰描边圆形节点。 +- 图标在本地以 SVG path 形式嵌入既有 `utils/icons.js`,不添加 npm 包、远程请求或新的运行时模块。 + +## 数据和交互 + +`config.trainingDayBadges` 继续定义天数、名称和图标键;记录页进度、逐段填充、解锁庆祝和点击详情均不改变。 + +图标构建器新增每枚勋章的彩色/白色变体:节点解锁时使用彩色图标,主题节点上的图标保持白色以保证对比度;未解锁时使用灰色图标。 + +## 验证 + +- 为图标构建结果补充单元测试,验证七枚勋章的键均存在。 +- 运行完整 Node 测试与 JavaScript 语法检查。 +- 在微信开发者工具检查默认主题及蓝、绿主题下的记录页:节点、文字、进度段和点击说明均可见。 + +## 授权 + +图标来源为 ByteDance IconPark,Apache-2.0;项目保留来源和许可证说明。