feat(records): 训练勋章 UI 改造

- 勋章图标从 emoji 改为矢量 SVG 线性图标（utils/icons.js 新增 bolt/moon/diamond 路径及 white 变体） - 命名改为累计语义（一周累计/半月累计/月度累计/双月累计/百日累计），并标注"非连续打卡" - 进度条改回等距节点，解锁时填充正好抵达节点、满级满格 - 新增单枚解锁庆祝：持久化已见解锁集合，进入页面弹 toast + 节点 pop 动画 - 已解锁节点常驻显示勋章名 + 右上角 ✓ 角标，直观体现"已拥有" - utils/storage.js 新增 totalDays（累计去重训练日），为勋章统计提供数据源
2026-07-28 16:25:55 +08:00
parent 75bad477b1
commit c5ae332cbe
6 changed files with 316 additions and 5 deletions
@@ -33,6 +33,169 @@
  text-align: center;
 }

+/* ---- badges ---- */
+.badge-section {
+  padding: 0;
+}
+
+.badge-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.badge-header .section-title {
+  margin-bottom: 0;
+}
+
+.badge-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.badge-title-icon {
+  width: 36rpx;
+  height: 36rpx;
+  align-self: center;
+  margin-top: -2rpx;
+}
+
+.badge-status {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10rpx;
+  margin: 12rpx 0 44rpx;
+  text-align: center;
+}
+
+.badge-status-days {
+  font-size: 24rpx;
+  color: var(--text-secondary);
+}
+
+.badge-status-dot {
+  font-size: 24rpx;
+  color: var(--text-secondary);
+  opacity: 0.5;
+}
+
+.badge-status-next {
+  font-size: 24rpx;
+  color: var(--text-secondary);
+}
+
+.badge-days-num {
+  font-size: 44rpx;
+  font-weight: 800;
+  color: var(--primary);
+}
+
+.badge-track {
+  position: relative;
+  height: 4rpx;
+  margin: 48rpx 0 20rpx;
+  background: rgba(var(--primary-rgb), 0.12);
+  border-radius: 2rpx;
+}
+
+.badge-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: var(--primary);
+  border-radius: 2rpx;
+  transition: width 0.6s ease;
+}
+
+.badge-node {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  background: var(--card-bg, #fff);
+  border: 2rpx solid rgba(var(--primary-rgb), 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
+}
+
+.badge-node.unlocked {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.badge-node.celebrate {
+  animation: badgePop 0.6s ease;
+  box-shadow: 0 0 0 8rpx rgba(var(--primary-rgb), 0.22);
+}
+
+@keyframes badgePop {
+  0%   { transform: translate(-50%, -50%) scale(1); }
+  35%  { transform: translate(-50%, -50%) scale(1.35); }
+  65%  { transform: translate(-50%, -50%) scale(0.9); }
+  100% { transform: translate(-50%, -50%) scale(1); }
+}
+
+.badge-node-icon {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+/* 已解锁节点的 ✓ 角标:纯 CSS 画勾(图标 SVG 颜色烤死,无法用变量改色) */
+.badge-check {
+  position: absolute;
+  right: -3rpx;
+  bottom: -3rpx;
+  width: 24rpx;
+  height: 24rpx;
+  border-radius: 50%;
+  background: var(--primary);
+  border: 2rpx solid var(--card-bg, #fff);
+  box-sizing: border-box;
+}
+
+.badge-check::after {
+  content: '';
+  position: absolute;
+  left: 7rpx;
+  top: 3rpx;
+  width: 6rpx;
+  height: 11rpx;
+  border: solid var(--card-bg, #fff);
+  border-width: 0 3rpx 3rpx 0;
+  transform: rotate(45deg);
+}
+
+.badge-labels {
+  position: relative;
+  height: 30rpx;
+  margin-top: 32rpx;
+}
+
+.badge-label {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  font-size: 20rpx;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  opacity: 0.8;
+}
+
+.badge-label.unlocked {
+  color: var(--primary);
+  font-size: 22rpx;
+  font-weight: 700;
+  opacity: 1;
+}
+
 /* ---- calendar ---- */
 .calendar-section {
  padding: 0;