feat(records): 训练趋势图表 + 列表时长改 MM:SS

- 新增 trend-chart 柱状图组件(CSS,近7天/近6月切换) - records 页加训练趋势卡片(统计卡片后) - 训练记录列表时长从秒数改为 MM:SS 显示 Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-28 11:19:07 +08:00
parent faa49cff1c
commit 75bad477b1
8 changed files with 233 additions and 3 deletions
@@ -0,0 +1,48 @@
+/**
+ * Trend bar chart - pure CSS (no canvas), matches the calendar-heatmap's
+ * rendering approach for consistency.
+ *
+ * chartData: [{ label, value, valueText, highlight }]
+ *   - label:      bottom caption (e.g. "一" / "7月")
+ *   - value:      numeric magnitude (seconds); drives bar height
+ *   - valueText:  formatted string shown above the bar (e.g. "1分30秒")
+ *   - highlight:  truthy -> theme glow + bold label (today / this month)
+ *
+ * Bar height is value/max*100%, with an 8% floor for any non-zero value so
+ * short sessions stay visible. Zero values render a faint stub.
+ */
+Component({
+  properties: {
+    chartData: { type: Array, value: [] }
+  },
+  data: {
+    bars: []
+  },
+  observers: {
+    'chartData'(chartData) {
+      this._compute(chartData)
+    }
+  },
+  lifetimes: {
+    ready() {
+      this._compute(this.properties.chartData)
+    }
+  },
+  methods: {
+    _compute(chartData) {
+      const arr = Array.isArray(chartData) ? chartData : []
+      const max = arr.reduce((m, d) => Math.max(m, Number(d && d.value) || 0), 0)
+      const bars = arr.map((d) => {
+        const v = Number(d && d.value) || 0
+        return {
+          label: (d && d.label) || '',
+          value: v,
+          valueText: (d && d.valueText) || '',
+          highlight: !!(d && d.highlight),
+          percent: max > 0 ? Math.max((v / max) * 100, v > 0 ? 8 : 0) : 0
+        }
+      })
+      this.setData({ bars })
+    }
+  }
+})