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>
This commit is contained in:
wangjia
2026-07-04 11:56:04 +08:00
parent b683adece9
commit be9afcf68d
34 changed files with 1851 additions and 390 deletions
+11 -5
View File
@@ -92,10 +92,13 @@ class DsButton extends StatelessWidget {
enum DsBadgeTone { ok, danger, warn, info, accent, muted }
/// 原型 .badgeh22 / pad 0 9 / r-pill / fs-sm fw600 + 前导圆点(6px, currentColor)。
/// [icon] 非空 → 图标徽章变体(原型 .badge.bi12px 图标替圆点,icons.js BADGE_ICON
/// 拍板「圆点→代表图标」);默认 null 保持圆点形态(桌面存量 golden 零漂移)。
class DsBadge extends StatelessWidget {
final String label;
final DsBadgeTone tone;
const DsBadge(this.label, {super.key, this.tone = DsBadgeTone.ok});
final IconData? icon;
const DsBadge(this.label, {super.key, this.tone = DsBadgeTone.ok, this.icon});
@override
Widget build(BuildContext context) {
@@ -116,10 +119,13 @@ class DsBadge extends StatelessWidget {
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 6,
height: 6,
decoration: BoxDecoration(color: fg, shape: BoxShape.circle)),
if (icon != null)
Icon(icon, size: 12, color: fg)
else
Container(
width: 6,
height: 6,
decoration: BoxDecoration(color: fg, shape: BoxShape.circle)),
const SizedBox(width: 5),
Text(label,
style: TextStyle(
+103
View File
@@ -0,0 +1,103 @@
// widgets/ds/m_hub.dart — 移动 hub 入口组(镜像原型 mobile-atoms .m-hub / .m-section)。
// 组 = 可选分组标题(.m-section) + 圆角组卡;行 = 34×34 圆角图标底(.hic brand50/primary)
// + 文案(fs-body) + 右侧 (.hchev faint);行间 border-subtle 分隔。
import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../core/theme/app_dims.g.dart';
import '../../core/theme/context_tokens.dart';
class MHubItem {
final IconData icon;
final String label;
final VoidCallback? onTap;
/// 自定义尾部(如角标 / 当前值文案);null → 默认 › 箭头。
final Widget? trailing;
const MHubItem({
required this.icon,
required this.label,
this.onTap,
this.trailing,
});
}
class MHubGroup extends StatelessWidget {
/// 分组标题(.m-section);null 不渲染。
final String? label;
final List<MHubItem> items;
const MHubGroup({super.key, this.label, required this.items});
@override
Widget build(BuildContext context) {
final t = context.tokens;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (label != null)
Padding(
padding: const EdgeInsets.fromLTRB(2, 16, 2, 8),
child: Text(label!,
style: TextStyle(
fontSize: AppDims.fsSm,
fontWeight: FontWeight.w700,
letterSpacing: .4,
color: t.muted)),
),
// Material 自带(InkWell 水波 + golden 直挂无 Scaffold 场景)
Material(
color: t.surface,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
side: BorderSide(color: t.border),
borderRadius: BorderRadius.circular(AppDims.rLg),
),
child: Column(children: [
for (var i = 0; i < items.length; i++)
_MHubRow(item: items[i], last: i == items.length - 1),
]),
),
],
);
}
}
class _MHubRow extends StatelessWidget {
final MHubItem item;
final bool last;
const _MHubRow({required this.item, required this.last});
@override
Widget build(BuildContext context) {
final t = context.tokens;
return InkWell(
onTap: item.onTap,
child: Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
border: last
? null
: Border(bottom: BorderSide(color: t.borderSubtle)),
),
child: Row(children: [
Container(
width: 34,
height: 34,
decoration: BoxDecoration(
color: t.brand50,
borderRadius: BorderRadius.circular(AppDims.rMd),
),
child: Icon(item.icon, size: 18, color: t.primary),
),
const SizedBox(width: 12),
Expanded(
child: Text(item.label,
style: TextStyle(fontSize: AppDims.fsBody, color: t.text)),
),
item.trailing ??
Icon(LucideIcons.chevronRight, size: 18, color: t.faint),
]),
),
);
}
}
+131
View File
@@ -0,0 +1,131 @@
// widgets/ds/m_kpi_grid.dart — 移动 2×2 KPI 网格(镜像原型 mobile-atoms .m-kpi)。
// 卡:surface / 1px border / r-lg / pad 12·14kl=fs-xs muted(可带 13px brand400 图标);
// kv=fs-h2 w800 headingkd=fs-xsup/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,
),
);
}
}
+151
View File
@@ -0,0 +1,151 @@
// widgets/ds/m_search_row.dart — 移动搜索行(镜像原型 m-stock-*-list 搜索区终态):
// 搜索框(.m-search 42h, flex) + 纯文字状态钮(选中转 primary)+ 图标详细搜索钮(激活转 primary)。
// 状态/详搜钮为可选;不传对应回调即不渲染(如库存屏只有搜索框)。
import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../core/theme/app_dims.g.dart';
import '../../core/theme/context_tokens.dart';
class MSearchRow extends StatelessWidget {
final TextEditingController? controller;
final String hint;
final ValueChanged<String>? onChanged;
final ValueChanged<String>? onSubmitted;
/// 状态筛选钮当前文案(如「全部」「待审核」);null 不渲染该钮。
final String? statusLabel;
/// 状态钮是否处于筛选中(非「全部」)→ primary 高亮。
final bool statusActive;
final VoidCallback? onStatusTap;
/// 详细搜索钮是否有生效条件 → primary 高亮;[onFilterTap] null 不渲染该钮。
final bool filterActive;
final VoidCallback? onFilterTap;
const MSearchRow({
super.key,
this.controller,
this.hint = '',
this.onChanged,
this.onSubmitted,
this.statusLabel,
this.statusActive = false,
this.onStatusTap,
this.filterActive = false,
this.onFilterTap,
});
@override
Widget build(BuildContext context) {
final t = context.tokens;
return Row(children: [
// .m-search42h / surface / border / r-md / 放大镜 17
// Material 自带(TextField 需 Material 祖先 + golden 直挂无 Scaffold 场景)
Expanded(
child: Material(
color: t.surface,
shape: RoundedRectangleBorder(
side: BorderSide(color: t.border),
borderRadius: BorderRadius.circular(AppDims.rMd),
),
child: Container(
height: 42,
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Row(children: [
Icon(LucideIcons.search, size: 17, color: t.muted),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: controller,
onChanged: onChanged,
onSubmitted: onSubmitted,
style: TextStyle(fontSize: AppDims.fsBody, color: t.text),
decoration: InputDecoration(
isCollapsed: true,
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
filled: false,
hintText: hint,
hintStyle:
TextStyle(fontSize: AppDims.fsBody, color: t.faint),
),
),
),
if (controller != null)
ValueListenableBuilder<TextEditingValue>(
valueListenable: controller!,
builder: (context, value, _) {
if (value.text.isEmpty) return const SizedBox.shrink();
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
controller!.clear();
onChanged?.call('');
onSubmitted?.call('');
},
child: Padding(
padding: const EdgeInsets.only(left: 6),
child: Icon(LucideIcons.x, size: 15, color: t.muted),
),
);
},
),
]),
),
),
),
// 状态筛选钮(纯文字,无箭头;筛选中转 primary)
if (statusLabel != null) ...[
const SizedBox(width: 8),
_pillBtn(
t,
active: statusActive,
onTap: onStatusTap,
child: Text(statusLabel!,
style: TextStyle(
fontSize: AppDims.fsBody,
fontWeight: statusActive ? FontWeight.w600 : FontWeight.w500,
color: statusActive ? t.primary : t.text)),
),
],
// 详细搜索钮(图标;有生效条件转 primary)
if (onFilterTap != null) ...[
const SizedBox(width: 8),
_pillBtn(
t,
active: filterActive,
onTap: onFilterTap,
child: Icon(LucideIcons.listFilter,
size: 18, color: filterActive ? t.primary : t.text),
),
],
]);
}
Widget _pillBtn(dynamic t,
{required bool active, VoidCallback? onTap, required Widget child}) {
// Material 自带(InkWell 水波 + golden 直挂无 Scaffold 场景)
return Material(
color: active ? t.brand50 : t.surface,
borderRadius: BorderRadius.circular(AppDims.rMd),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(AppDims.rMd),
child: Container(
height: 42,
padding: const EdgeInsets.symmetric(horizontal: 13),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: active ? t.primary : t.border),
borderRadius: BorderRadius.circular(AppDims.rMd),
),
child: child,
),
),
);
}
}
+180
View File
@@ -0,0 +1,180 @@
// widgets/ds/m_sheet.dart — 统一移动底部 sheet(镜像原型 mobile-atoms .m-sheet)。
// 结构:grip(36×4) + 标题行(m-sheet-h:标题 + X) + 滚动体(m-sheet-b) + 可选底部操作条。
// max 高 86vh、顶部 r-xl 圆角、SelectionArea 可选中复制;键盘弹出自动避让。
import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../core/responsive/responsive.dart';
import '../../core/theme/app_chrome.g.dart';
import '../../core/theme/app_dims.g.dart';
import '../../core/theme/context_tokens.dart';
import '../../core/utils/dialog_util.dart';
/// 打开移动底部 sheet(对齐原型 mobile-shell openSheet)。
/// - [title] 为 null 时只渲染 grip,内容自带头部(详情抽屉复用场景)。
/// - [scrollable] true:内容包 SingleChildScrollViewfalse:内容自管布局
/// (需自带定界高度,如 SizedBox(height:…),供 Column/Expanded 正常工作)。
/// - [actions] 底部固定操作条(原型 .m-actionbar 形态:横排等分按钮)。
Future<T?> showMSheet<T>(
BuildContext context, {
String? title,
required WidgetBuilder builder,
bool scrollable = true,
double maxHeightFactor = 0.86,
List<Widget>? actions,
}) {
return showModalBottomSheet<T>(
context: context,
isScrollControlled: true,
useSafeArea: true,
backgroundColor: Colors.transparent,
barrierColor: AppChrome.scrim, // .m-sheet-mask --scrim
builder: (ctx) {
final t = ctx.tokens;
final maxH = MediaQuery.of(ctx).size.height * maxHeightFactor;
final viewInsets = MediaQuery.of(ctx).viewInsets.bottom;
return Padding(
// 键盘弹出时整体上移(sheet 内含输入框场景)
padding: EdgeInsets.only(bottom: viewInsets),
child: Container(
clipBehavior: Clip.antiAlias,
constraints: BoxConstraints(maxHeight: maxH),
decoration: BoxDecoration(
color: t.surface,
borderRadius:
const BorderRadius.vertical(top: Radius.circular(AppDims.rXl)),
),
// sheet 是独立 overlay(在 app_shell 的 SelectionArea 之外)→ 自带一层
child: SelectionArea(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// .grip
Center(
child: Container(
width: 36,
height: 4,
margin: const EdgeInsets.only(top: 8, bottom: 2),
decoration: BoxDecoration(
color: t.border,
borderRadius: BorderRadius.circular(AppDims.rPill),
),
),
),
if (title != null)
Container(
padding: const EdgeInsets.fromLTRB(16, 10, 16, 12),
decoration: BoxDecoration(
border:
Border(bottom: BorderSide(color: t.borderSubtle)),
),
child: Row(children: [
Expanded(
child: Text(title,
style: TextStyle(
fontSize: AppDims.fsTitle,
fontWeight: FontWeight.w700,
color: t.heading)),
),
InkWell(
onTap: () => Navigator.of(ctx).pop(),
child: Icon(LucideIcons.x, size: 20, color: t.muted),
),
]),
),
Flexible(
child: scrollable
? SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
child: Builder(builder: builder),
)
: Builder(builder: builder),
),
if (actions != null)
Container(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
decoration: BoxDecoration(
border: Border(top: BorderSide(color: t.borderSubtle)),
),
child: Row(children: [
for (var i = 0; i < actions.length; i++) ...[
if (i > 0) const SizedBox(width: 10),
Expanded(child: actions[i]),
],
]),
),
],
),
),
),
);
},
);
}
/// 自适应弹层:窄屏走底部 sheet,宽屏走既有 showAppDialogDialog 卡)。
/// 供各屏的筛选 / 轻表单 / 选项选择统一调用,减少 isMobile 样板分支。
Future<T?> showAdaptiveSheet<T>(
BuildContext context, {
required String title,
required WidgetBuilder builder,
List<Widget>? actions,
double desktopWidth = 480,
}) {
if (context.isMobile) {
return showMSheet<T>(context,
title: title, builder: builder, actions: actions);
}
return showAppDialog<T>(
context: context,
builder: (ctx) {
final t = ctx.tokens;
return Dialog(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(AppDims.rLg)),
child: SizedBox(
width: ctx.dialogWidth(desktopWidth),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 18, 20, 0),
child: Row(children: [
Expanded(
child: Text(title,
style: TextStyle(
fontSize: AppDims.fsTitle,
fontWeight: FontWeight.w700,
color: t.heading)),
),
InkWell(
onTap: () => Navigator.of(ctx).pop(),
child: Icon(LucideIcons.x, size: 18, color: t.muted),
),
]),
),
Flexible(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(20, 14, 20, 18),
child: Builder(builder: builder),
),
),
if (actions != null)
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 18),
child: Row(children: [
for (var i = 0; i < actions.length; i++) ...[
if (i > 0) const SizedBox(width: 10),
Expanded(child: actions[i]),
],
]),
),
],
),
),
);
},
);
}
+65
View File
@@ -0,0 +1,65 @@
// widgets/ds/m_tab_bar.dart — 移动底部 tab 栏(镜像原型 mobile-atoms .m-tabbar / .m-tab)。
// min-height 56 / surface 底 / border-top / SafeArea bottom
// 项 = 22px 图标 + fs-xs 文案,激活 primary,未激活 muted。
import 'package:flutter/material.dart';
import '../../core/theme/app_dims.g.dart';
import '../../core/theme/context_tokens.dart';
class MTabItem {
final IconData icon;
final String label;
const MTabItem(this.icon, this.label);
}
class MTabBar extends StatelessWidget {
final List<MTabItem> items;
final int currentIndex;
final ValueChanged<int> onTap;
const MTabBar({
super.key,
required this.items,
required this.currentIndex,
required this.onTap,
});
@override
Widget build(BuildContext context) {
final t = context.tokens;
// Material 自带(InkWell 水波 + golden 直挂无 Scaffold 场景)
return Material(
color: t.surface,
shape: Border(top: BorderSide(color: t.border)),
child: SafeArea(
top: false,
child: SizedBox(
height: 56,
child: Row(children: [
for (var i = 0; i < items.length; i++)
Expanded(
child: InkWell(
onTap: () => onTap(i),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(items[i].icon,
size: 22,
color: i == currentIndex ? t.primary : t.muted),
const SizedBox(height: 3),
Text(items[i].label,
style: TextStyle(
fontSize: AppDims.fsXs,
fontWeight: i == currentIndex
? FontWeight.w600
: FontWeight.w400,
color: i == currentIndex ? t.primary : t.muted)),
],
),
),
),
]),
),
),
);
}
}
@@ -0,0 +1,50 @@
// widgets/ds/status_icon_map.dart — 状态词 → 徽章图标映射。
// 单一真相源镜像:原型 icons.js 的 BADGE_ICON2026-07-04 拍板:全系统圆点→代表图标),
// 逐词转录为 LucideIcons。新增状态先在原型 icons.js 登记,再同步到此表。
import 'package:flutter/widgets.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
const Map<String, IconData> kStatusIcons = {
// 库存状态
'在售': LucideIcons.shoppingCart, // i-cart
'预警': LucideIcons.triangleAlert, // i-alert
'缺货': LucideIcons.x, // i-close
// 单据状态
'草稿': LucideIcons.fileText, // i-ic06
'待审核': LucideIcons.clock, // i-ic04
'已审核': LucideIcons.check, // i-check
'已拒绝': LucideIcons.x, // i-close
'已通过': LucideIcons.check, // i-check
'已驳回': LucideIcons.x, // i-close
'部分退单': LucideIcons.undo2, // i-undo
'已退单': LucideIcons.undo2, // i-undo
'待定价': LucideIcons.japaneseYen, // i-yen
// 通用启停 / 往来类型
'启用': LucideIcons.check, // i-check
'停用': LucideIcons.x, // i-close
'供应商': LucideIcons.box, // i-box
'客户': LucideIcons.user, // i-ic37
'两者': LucideIcons.refreshCw, // i-refresh
// 角色
'管理员': LucideIcons.shield, // i-shield-2
'普通': LucideIcons.user, // i-ic37
'只读': LucideIcons.eye, // i-eye
// 设备 / 会话
'在线': LucideIcons.wifi, // i-wifi
'离线': LucideIcons.wifiOff, // i-wifi-off
// 盘点
'进行中': LucideIcons.clock, // i-ic04
'已完成': LucideIcons.check, // i-check
// 兑换券
'未使用': LucideIcons.tag, // i-tag
'已兑换': LucideIcons.check, // i-check
'作废': LucideIcons.x, // i-close
// 财务
'未结清': LucideIcons.clock, // i-ic04
'已结清': LucideIcons.check, // i-check
'收款': LucideIcons.download, // i-download
'付款': LucideIcons.upload, // i-upload
};
/// 查状态词对应图标;未登记返回 null(调用方回退圆点形态)。
IconData? statusIcon(String label) => kStatusIcons[label];