jiu/client/lib/widgets/ds/m_kpi_grid.dart

// widgets/ds/m_kpi_grid.dart — 移动 2×2 KPI 网格（镜像原型 mobile-atoms .m-kpi）。
// 卡：surface / 1px border / r-lg / pad 12·14；kl=fs-xs muted（可带 13px brand400 图标）；
// kv=fs-h2 w800 heading；kd=fs-xs（up/down/warn 三色）。
// KPI 即筛选：onTap 非空可点，selected 态描边 primary（对齐 m-stock-*-list 可点 KPI）。
import 'package:flutter/material.dart';

import '../../core/theme/app_dims.g.dart';
import '../../core/theme/context_tokens.dart';

enum MKpiDeltaTone { normal, up, down, warn }

class MKpiItem {
  final String label;
  final String value;
  final IconData? icon;
  final String? delta;
  final MKpiDeltaTone deltaTone;
  final VoidCallback? onTap;
  final bool selected;
  const MKpiItem({
    required this.label,
    required this.value,
    this.icon,
    this.delta,
    this.deltaTone = MKpiDeltaTone.normal,
    this.onTap,
    this.selected = false,
  });
}

class MKpiGrid extends StatelessWidget {
  final List<MKpiItem> items;
  const MKpiGrid({super.key, required this.items});

  @override
  Widget build(BuildContext context) {
    // 两列网格 gap10：按行切分，用 Row/Expanded 保证等宽等高。
    final rows = <List<MKpiItem>>[];
    for (var i = 0; i < items.length; i += 2) {
      rows.add(items.sublist(i, (i + 2).clamp(0, items.length)));
    }
    return Column(
      children: [
        for (var r = 0; r < rows.length; r++) ...[
          if (r > 0) const SizedBox(height: 10),
          IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                for (var c = 0; c < 2; c++) ...[
                  if (c > 0) const SizedBox(width: 10),
                  Expanded(
                    child: c < rows[r].length
                        ? _MKpiCard(item: rows[r][c])
                        : const SizedBox.shrink(),
                  ),
                ],
              ],
            ),
          ),
        ],
      ],
    );
  }
}

class _MKpiCard extends StatelessWidget {
  final MKpiItem item;
  const _MKpiCard({required this.item});

  @override
  Widget build(BuildContext context) {
    final t = context.tokens;
    final deltaColor = switch (item.deltaTone) {
      MKpiDeltaTone.up => t.success,
      MKpiDeltaTone.down => t.danger,
      MKpiDeltaTone.warn => t.warn,
      MKpiDeltaTone.normal => t.muted,
    };
    final card = Container(
      padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
      decoration: BoxDecoration(
        border: Border.all(color: item.selected ? t.primary : t.border),
        borderRadius: BorderRadius.circular(AppDims.rLg),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(children: [
            if (item.icon != null) ...[
              Icon(item.icon, size: 13, color: t.brand400),
              const SizedBox(width: 5),
            ],
            Expanded(
              child: Text(item.label,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: AppDims.fsXs, color: t.muted)),
            ),
          ]),
          const SizedBox(height: 5),
          Text(item.value,
              style: TextStyle(
                  fontSize: AppDims.fsH2,
                  fontWeight: FontWeight.w800,
                  letterSpacing: .2,
                  color: t.heading)),
          if (item.delta != null) ...[
            const SizedBox(height: 3),
            Text(item.delta!,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: AppDims.fsXs, color: deltaColor)),
          ],
        ],
      ),
    );
    // Material 自带（InkWell 水波 + golden 直挂无 Scaffold 场景）
    return Material(
      color: t.surface,
      borderRadius: BorderRadius.circular(AppDims.rLg),
      child: item.onTap == null
          ? card
          : InkWell(
              onTap: item.onTap,
              borderRadius: BorderRadius.circular(AppDims.rLg),
              child: card,
            ),
    );
  }
}