pangolin/client/lib/widgets/period_card.dart

// period_card.dart — 周期统计卡(本月/本周/今日):左侧周期名 + 横排 3 指标。
// 沿用 MetricCard 的 surface+border+shadow 与 mono 数值观感,3 张竖排成统计页主体。
import 'package:flutter/material.dart';

import '../pangolin_theme.dart';

/// 一个指标:数值 + 单位 + 标签(下行/上行/使用时长)。
class StatMetric {
  const StatMetric(this.value, this.unit, this.label);
  final String value, unit, label;
}

class PeriodCard extends StatelessWidget {
  const PeriodCard({super.key, required this.period, required this.metrics});

  /// 周期名(本月/本周/今日)。
  final String period;
  final List<StatMetric> metrics;

  @override
  Widget build(BuildContext context) {
    final c = context.pangolin;
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
      decoration: BoxDecoration(
        color: c.surface,
        borderRadius: BorderRadius.circular(PangolinRadius.lg),
        border: Border.all(color: c.border),
        boxShadow: PangolinShadow.sm,
      ),
      child: Row(children: [
        SizedBox(
          width: 52,
          child: Text(period,
              style: PangolinText.sm.copyWith(color: c.fg1, fontWeight: FontWeight.w600, fontSize: 14)),
        ),
        for (var i = 0; i < metrics.length; i++)
          Expanded(
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 4),
              decoration: i == 0
                  ? null
                  : BoxDecoration(border: Border(left: BorderSide(color: c.border))),
              child: Column(children: [
                Text.rich(
                  TextSpan(
                    text: metrics[i].value,
                    style: PangolinText.mono.copyWith(fontSize: 19, color: c.fg1, fontWeight: FontWeight.w500),
                    children: [
                      TextSpan(
                        text: ' ${metrics[i].unit}',
                        style: PangolinText.caption.copyWith(color: c.fg3, fontSize: 11),
                      ),
                    ],
                  ),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 4),
                Text(metrics[i].label,
                    textAlign: TextAlign.center,
                    style: PangolinText.caption.copyWith(color: c.fg2, fontSize: 11)),
              ]),
            ),
          ),
      ]),
    );
  }
}