feat(client/stats): 统计页重设计 — 月/周/日周期卡 + 设备下拉 + 两周折线 + 修刷新

布局重做(对照确认稿): - 3 张周期卡(本月/本周/今日),每张 = ↓下行 · ↑上行 · 使用时长(PeriodCard) - 右上设备下拉(_DeviceDropdown,先只挂「全部」;每设备归因打通后填设备名,见 TODO #9/#10) - 柱状图 → 折线图:最近两周(14 天)按天流量(UsageLineChart,CustomPainter 零依赖) 数据源统一 + 修刷新(根治「本月流量冻住」): - 月/周/日 + 折线全从单一源 usageProvider(30) 聚合(取最后 N 天点求和,末点即今日, 避开 UTC/本地日期坑);不再 me.weekly + usage 两条管线 - usageProvider/deviceUsageProvider 改 autoDispose(进页重取)+ 下拉刷新(invalidate) + 刷新连带 meProvider.refresh。后端每 60s 更新,无需更勤 UI 全走 PangolinColors/Text/Spacing token 单源、零硬编码;中英 l10n key 补齐。 widget 数值断言测试(刀1)按新结构重写并通过;统计/连接页 golden 重生成 (非 CI 闸;components/auth 基线未动)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-28 17:43:14 +08:00
parent 47147a1041
commit 01ebafc05e
12 changed files with 351 additions and 135 deletions
@@ -0,0 +1,81 @@
+// usage_line_chart.dart — 最近两周(14 天)按天流量折线图。
+// CustomPainter 手绘:渐变面积 + accent 折线 + 末点强调,无第三方图表依赖。
+import 'package:flutter/material.dart';
+
+/// values: 每日流量(GB,旧→新)。accent/grid 由调用方传 token 色(零硬编码)。
+class UsageLineChart extends StatelessWidget {
+  const UsageLineChart({super.key, required this.values, required this.accent, required this.grid});
+  final List<double> values;
+  final Color accent, grid;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 116,
+      child: CustomPaint(painter: _LinePainter(values, accent, grid), size: Size.infinite),
+    );
+  }
+}
+
+class _LinePainter extends CustomPainter {
+  _LinePainter(this.values, this.accent, this.grid);
+  final List<double> values;
+  final Color accent, grid;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final gp = Paint()
+      ..color = grid
+      ..strokeWidth = 1;
+    for (var i = 1; i <= 3; i++) {
+      final y = size.height * i / 4;
+      canvas.drawLine(Offset(0, y), Offset(size.width, y), gp);
+    }
+    if (values.isEmpty) return;
+
+    final maxV = values.reduce((a, b) => a > b ? a : b);
+    final denom = maxV <= 0 ? 1.0 : maxV;
+    final n = values.length;
+    final dx = n > 1 ? size.width / (n - 1) : 0.0;
+    const topPad = 10.0, botPad = 6.0;
+    final h = size.height - topPad - botPad;
+    Offset pt(int i) => Offset(i * dx, topPad + h * (1 - values[i] / denom));
+
+    final area = Path()..moveTo(0, size.height);
+    for (var i = 0; i < n; i++) {
+      area.lineTo(pt(i).dx, pt(i).dy);
+    }
+    area
+      ..lineTo(size.width, size.height)
+      ..close();
+    canvas.drawPath(
+      area,
+      Paint()
+        ..shader = LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [accent.withOpacity(0.26), accent.withOpacity(0)],
+        ).createShader(Rect.fromLTWH(0, 0, size.width, size.height)),
+    );
+
+    final line = Path()..moveTo(pt(0).dx, pt(0).dy);
+    for (var i = 1; i < n; i++) {
+      line.lineTo(pt(i).dx, pt(i).dy);
+    }
+    canvas.drawPath(
+      line,
+      Paint()
+        ..color = accent
+        ..style = PaintingStyle.stroke
+        ..strokeWidth = 2
+        ..strokeJoin = StrokeJoin.round
+        ..strokeCap = StrokeCap.round,
+    );
+
+    canvas.drawCircle(pt(n - 1), 3.2, Paint()..color = accent);
+  }
+
+  @override
+  bool shouldRepaint(covariant _LinePainter old) =>
+      old.values != values || old.accent != accent || old.grid != grid;
+}