feat(client): 移动壳基建——底部 5 tab + 我的 hub + 统一底部 sheet + 移动组件四件套

对齐移动原型体系（m-*.html）的 Stage 0 共享基建，桌面形态零改动： - 导航：router 新增 branch 9（/me 我的 + /me/license 授权屏）；窄屏 tab 根（库存/入库/出库/财务/我的）出底部 MTabBar，二级屏隐藏 tabbar + 顶栏返回箭头（PopScope 拦系统返回键防退 app）；窄屏 Drawer/汉堡删除；窄屏顶栏对齐 m-top （标题 + 主题/通知铃/头像→我的） - sheet：showMSheet（grip/标题/86vh/键盘避让）+ showAdaptiveSheet；六个共享弹层呈现函数加窄屏 sheet 分支（订单/往来/财务往来/商品编辑抽屉 + 退单/登记收支 dialog 的 asSheet 形态） - 徽章：DsBadge/StatusPill/StatusBadge 加图标变体（默认圆点零漂移）+ status_icon_map 转录原型 BADGE_ICON 28 词 - 组件：MKpiGrid（2×2 可点 KPI）/ MSearchRow（搜索+状态钮+详搜钮）/ MHubGroup（hub 入口组）/ showThemeSheet（主题外观 sheet） - 授权：_LicensePanel/_SettingsCard 抽取为公共 LicensePanel/SettingsCard，窄屏授权跳转 /me/license - golden：app_shell_mobile + me 各三主题（390×844@2x）；全量 259 测试绿， check_ds_code / check-l1-sync 闸过 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-04 11:56:04 +08:00
parent b683adece9
commit be9afcf68d
34 changed files with 1851 additions and 390 deletions
@@ -0,0 +1,131 @@
+// 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,
+            ),
+    );
+  }
+}