wangjia/jiu
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 130 Wiki Activity

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

Browse Source 
对齐移动原型体系（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
Download Patch File Download Diff File Expand all files Collapse all files
client/lib/widgets/ds/ds_atoms.dart
+11 -5
View File
@@ -92,10 +92,13 @@ class DsButton extends StatelessWidget {
enum DsBadgeTone { ok, danger, warn, info, accent, muted }
/// 原型 .badge：h22 / pad 0 9 / r-pill / fs-sm fw600 + 前导圆点(6px, currentColor)。
/// [icon] 非空 → 图标徽章变体（原型 .badge.bi：12px 图标替圆点，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(
client/lib/widgets/ds/m_hub.dart
+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),
]),
),
);
}
}
client/lib/widgets/ds/m_kpi_grid.dart
+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·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,
),
);
}
}
client/lib/widgets/ds/m_search_row.dart
+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-search：42h / 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,
),
),
);
}
}
client/lib/widgets/ds/m_sheet.dart
+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：内容包 SingleChildScrollView；false：内容自管布局
/// （需自带定界高度，如 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，宽屏走既有 showAppDialog（Dialog 卡）。
/// 供各屏的筛选 / 轻表单 / 选项选择统一调用，减少 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]),
],
]),
),
],
),
),
);
},
);
}
client/lib/widgets/ds/m_tab_bar.dart
+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)),
],
),
),
),
]),
),
),
);
}
}
client/lib/widgets/ds/status_icon_map.dart
+50
View File
@@ -0,0 +1,50 @@
// widgets/ds/status_icon_map.dart — 状态词 → 徽章图标映射。
// 单一真相源镜像：原型 icons.js 的 BADGE_ICON（2026-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];
client/lib/widgets/finance_entry_dialog.dart
+52 -11
View File
@@ -13,6 +13,7 @@ import '../providers/finance_provider.dart';
import '../providers/partner_provider.dart';
import 'date_picker_field.dart';
import 'ds/ds_atoms.dart';
import 'ds/m_sheet.dart';
import 'searchable_option_field.dart';
import 'ds/ds_toast.dart';
@@ -22,6 +23,15 @@ Future<void> showFinanceEntryDialog(
String type = 'receipt',
int? partnerId,
}) {
// 窄屏：底部 sheet 形态（对齐原型移动 sheet 交互范式）
if (context.isMobile) {
return showMSheet<void>(
context,
title: '登记收支',
builder: (_) =>
_FinanceEntryDialog(type: type, partnerId: partnerId, asSheet: true),
);
}
return showAppDialog(
context: context,
builder: (_) => _FinanceEntryDialog(type: type, partnerId: partnerId),
@@ -31,7 +41,11 @@ Future<void> showFinanceEntryDialog(
class _FinanceEntryDialog extends ConsumerStatefulWidget {
final String type;
final int? partnerId;
const _FinanceEntryDialog({required this.type, this.partnerId});
/// true → sheet 形态（外层 showMSheet 提供标题/滚动，按钮内联在表单尾部）。
final bool asSheet;
const _FinanceEntryDialog(
{required this.type, this.partnerId, this.asSheet = false});
@override
ConsumerState<_FinanceEntryDialog> createState() =>
@@ -85,12 +99,47 @@ class _FinanceEntryDialogState extends ConsumerState<_FinanceEntryDialog> {
@override
Widget build(BuildContext context) {
final partners = ref.watch(allPartnersProvider).valueOrNull?.data ?? [];
if (widget.asSheet) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
_form(),
const SizedBox(height: 18),
Row(children: [
Expanded(
child: DsButton('取消',
onPressed:
_saving ? null : () => Navigator.of(context).pop()),
),
const SizedBox(width: 10),
Expanded(
flex: 2,
child: DsButton(_saving ? '保存中…' : '保存',
variant: DsBtnVariant.primary,
onPressed: _saving ? null : _save),
),
]),
],
);
}
return AlertDialog(
title: const Text('登记收支'),
content: SizedBox(
width: context.dialogWidth(420),
child: Form(
child: _form(),
),
actions: [
DsButton('取消',
onPressed: _saving ? null : () => Navigator.of(context).pop()),
DsButton(_saving ? '保存中…' : '保存',
variant: DsBtnVariant.primary, onPressed: _saving ? null : _save),
],
);
}
Widget _form() {
final partners = ref.watch(allPartnersProvider).valueOrNull?.data ?? [];
return Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
@@ -151,14 +200,6 @@ class _FinanceEntryDialogState extends ConsumerState<_FinanceEntryDialog> {
)),
],
),
),
),
actions: [
DsButton('取消',
onPressed: _saving ? null : () => Navigator.of(context).pop()),
DsButton(_saving ? '保存中…' : '保存',
variant: DsBtnVariant.primary, onPressed: _saving ? null : _save),
],
);
}
}
client/lib/widgets/finance_partner_drawer.dart
+14
View File
@@ -7,12 +7,14 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:intl/intl.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 '../models/finance.dart';
import '../providers/finance_provider.dart';
import 'ds/ds_atoms.dart';
import 'ds/m_sheet.dart';
import 'finance_entry_dialog.dart';
import 'write_guard.dart';
import '../core/theme/app_fonts.dart';
@@ -50,6 +52,18 @@ Future<void> showFinancePartnerDrawer(
BuildContext context, {
required PartnerFinanceRow row,
}) {
// 窄屏：底部 sheet 形态（对齐原型移动 sheet 交互范式）
if (context.isMobile) {
return showMSheet<void>(
context,
title: null,
scrollable: false,
builder: (ctx) => SizedBox(
height: MediaQuery.of(ctx).size.height * 0.86,
child: _FinancePartnerDrawer(row: row),
),
);
}
return showGeneralDialog<void>(
context: context,
useRootNavigator: false,
client/lib/widgets/kpi_card.dart
+12 -6
View File
@@ -132,15 +132,18 @@ class KpiCard extends StatelessWidget {
/// 状态徽章（还原原型 `.badge`：圆点 + 文字同色 + 软底 pill）。
/// 用于库存「在售/预警/缺货」等派生状态；色与软底全走 token。
/// [icon] 非空 → 图标徽章变体（原型 .badge.bi），默认圆点（存量 golden 零漂移）。
class StatusPill extends StatelessWidget {
final String label;
final Color color;
final Color background;
final IconData? icon;
const StatusPill(
{super.key,
required this.label,
required this.color,
required this.background});
required this.background,
this.icon});
@override
Widget build(BuildContext context) {
@@ -154,11 +157,14 @@ class StatusPill extends StatelessWidget {
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 6,
height: 6,
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
),
if (icon != null)
Icon(icon, size: 12, color: color)
else
Container(
width: 6,
height: 6,
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
),
const SizedBox(width: 5),
Text(label,
style: TextStyle(
client/lib/widgets/order_detail_drawer.dart
+16
View File
@@ -3,9 +3,11 @@ import 'dart:math' as math;
import 'package:flutter/material.dart';
import '../core/responsive/responsive.dart';
import '../core/theme/context_tokens.dart';
import '../core/theme/app_dims.g.dart';
import '../core/theme/app_fonts.dart';
import 'ds/m_sheet.dart';
/// 右侧滑入抽屉呈现（对齐原型 .drawer / .drawer-mask）。
/// useRootNavigator:false → 只覆盖内容区（分支 Navigator），不盖侧栏/顶栏。
@@ -15,6 +17,20 @@ Future<T?> showOrderDetailDrawer<T>(
BuildContext context, {
required WidgetBuilder builder,
}) {
// 窄屏：底部 sheet 形态（原型 m-stock-*-list openOrder 详情 sheet）；
// OrderDetailDrawer 自带「单号 + X」头部，title:null 只出 grip；
// scrollable:false + 定界高 → 内部 Column/Expanded 布局照常工作。
if (context.isMobile) {
return showMSheet<T>(
context,
title: null,
scrollable: false,
builder: (ctx) => SizedBox(
height: MediaQuery.of(ctx).size.height * 0.86,
child: Builder(builder: builder),
),
);
}
return showGeneralDialog<T>(
context: context,
useRootNavigator: false,
client/lib/widgets/order_return_dialog.dart
+35 -2
View File
@@ -6,6 +6,7 @@ import '../core/theme/context_tokens.dart';
import '../core/utils/dialog_util.dart';
import 'ds/ds_atoms.dart';
import 'ds/ds_toast.dart';
import 'ds/m_sheet.dart';
/// 退单状态小徽章（none 返回 null 不显示）。partial=部分退单(amber)，full=已退单(红)。
Widget? returnStateBadge(BuildContext context, String state) {
@@ -66,6 +67,25 @@ Future<bool?> showOrderReturnDialog({
required List<ReturnLine> lines,
required Future<void> Function(List<int> itemIds) onSubmit,
}) {
// 窄屏：底部 sheet 形态（原型 m-stock-*-list openReturn 退单 sheet）
if (context.isMobile) {
return showMSheet<bool>(
context,
title: null,
scrollable: false,
builder: (ctx) => SizedBox(
height: MediaQuery.of(ctx).size.height * 0.86,
child: _OrderReturnDialog(
title: title,
meta: meta,
isOut: isOut,
lines: lines,
onSubmit: onSubmit,
asSheet: true,
),
),
);
}
return showAppDialog<bool>(
context: context,
builder: (_) => _OrderReturnDialog(
@@ -85,12 +105,16 @@ class _OrderReturnDialog extends StatefulWidget {
final List<ReturnLine> lines;
final Future<void> Function(List<int> itemIds) onSubmit;
/// true → sheet 形态（外层 showMSheet 提供 grip/圆角，本体不再包 Dialog）。
final bool asSheet;
const _OrderReturnDialog({
required this.title,
required this.meta,
required this.isOut,
required this.lines,
required this.onSubmit,
this.asSheet = false,
});
@override
@@ -200,12 +224,22 @@ class _OrderReturnDialogState extends State<_OrderReturnDialog> {
.where((l) => _staged.contains(l.itemId))
.fold<double>(0, (s, l) => s + l.quantity);
// sheet 形态：外层已定界高，本体直接铺 Column（头/明细/底结构同 Dialog）。
if (widget.asSheet) return _body(stagedQty);
return Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: SizedBox(
width: context.dialogWidth(820),
height: 560,
child: Column(
child: _body(stagedQty),
),
);
}
Widget _body(double stagedQty) {
return Builder(
builder: (context) => Column(
children: [
// 头部
Padding(
@@ -328,7 +362,6 @@ class _OrderReturnDialogState extends State<_OrderReturnDialog> {
),
),
],
),
),
);
}
client/lib/widgets/partner_detail_drawer.dart
+15
View File
@@ -8,6 +8,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:intl/intl.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';
@@ -15,6 +16,7 @@ import '../models/finance.dart';
import '../models/partner.dart';
import '../providers/partner_provider.dart';
import 'ds/ds_atoms.dart';
import 'ds/m_sheet.dart';
import 'write_guard.dart';
import '../core/theme/app_fonts.dart';
import 'ds/ds_toast.dart';
@@ -27,6 +29,19 @@ Future<void> showPartnerDetailDrawer(
({double recv, double pay})? balance,
VoidCallback? onEdit,
}) {
// 窄屏：底部 sheet 形态（原型 m-partners openP 详情 sheet）
if (context.isMobile) {
return showMSheet<void>(
context,
title: null,
scrollable: false,
builder: (ctx) => SizedBox(
height: MediaQuery.of(ctx).size.height * 0.86,
child: _PartnerDetailDrawer(
partner: partner, balance: balance, onEdit: onEdit),
),
);
}
return showGeneralDialog<void>(
context: context,
useRootNavigator: false,
client/lib/widgets/product_editor_drawer.dart
+19
View File
@@ -12,6 +12,7 @@ import 'package:image_picker/image_picker.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../core/config/app_config.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';
@@ -21,6 +22,7 @@ import '../providers/product_option_provider.dart';
import '../providers/product_provider.dart';
import 'ds/ds_atoms.dart';
import 'ds/grid_combo_cell.dart';
import 'ds/m_sheet.dart';
import 'searchable_option_field.dart';
import 'fullscreen_image_viewer.dart';
import 'write_guard.dart';
@@ -36,6 +38,23 @@ Future<void> showProductEditorDrawer(
double? cost,
String? status, // 在售 / 预警 / 缺货
}) {
// 窄屏：底部 sheet 形态（原型 m-inventory openItem 内嵌公开页编辑）
if (context.isMobile) {
return showMSheet<void>(
context,
title: null,
scrollable: false,
builder: (ctx) => SizedBox(
height: MediaQuery.of(ctx).size.height * 0.86,
child: _ProductEditorDrawer(
productId: productId,
qty: qty,
unit: unit,
cost: cost,
status: status),
),
);
}
return showGeneralDialog<void>(
context: context,
useRootNavigator: false,
client/lib/widgets/status_badge.dart
+11 -2
View File
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import '../core/theme/context_tokens.dart';
import 'ds/status_icon_map.dart';
import 'kpi_card.dart';
enum OrderStatus { draft, pending, approved, rejected }
@@ -21,7 +22,11 @@ extension OrderStatusLabel on OrderStatus {
class StatusBadge extends StatelessWidget {
final OrderStatus status;
const StatusBadge(this.status, {super.key});
/// true → 图标徽章变体（icons.js BADGE_ICON 映射，移动端调用点显式启用）；
/// 默认 false 保持圆点（桌面存量 golden 零漂移）。
final bool withIcon;
const StatusBadge(this.status, {super.key, this.withIcon = false});
@override
Widget build(BuildContext context) {
@@ -33,6 +38,10 @@ class StatusBadge extends StatelessWidget {
OrderStatus.approved => (t.success, t.successBg),
OrderStatus.rejected => (t.danger, t.dangerBg),
};
return StatusPill(label: status.label, color: fg, background: bg);
return StatusPill(
label: status.label,
color: fg,
background: bg,
icon: withIcon ? statusIcon(status.label) : null);
}
}
client/lib/widgets/theme_sheet.dart
+89
View File
@@ -0,0 +1,89 @@
// widgets/theme_sheet.dart — 主题外观选择 sheet（镜像原型 mobile-shell openThemeSheet）。
// m-opt 行式三主题（A 经典蓝 / B 琥珀 / C 酒窖）+ 四色 swatch 预览，选中出勾。
// 写入 themeControllerProvider（持久化），与桌面 ThemePickerPill 同源。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../core/theme/app_dims.g.dart';
import '../core/theme/app_tokens.g.dart';
import '../core/theme/context_tokens.dart';
import '../core/theme/theme_controller.dart';
import 'ds/m_sheet.dart';
// (key, 名称, 说明)——与桌面 _PrefPanel._themes / 原型 THEMES 同文案。
const _themes = [
('a', 'A · 经典蓝', '浅色 · 默认'),
('b', 'B · 琥珀', '深色'),
('c', 'C · 酒窖', '暖浅色'),
];
/// 打开主题外观选择 sheet。
Future<void> showThemeSheet(BuildContext context) {
return showMSheet<void>(
context,
title: '主题外观',
builder: (ctx) => Consumer(builder: (ctx, ref, _) {
final t = ctx.tokens;
final current = ref.watch(themeControllerProvider);
return Column(children: [
for (var i = 0; i < _themes.length; i++) ...[
Builder(builder: (_) {
final (key, name, desc) = _themes[i];
final sel = key == current;
final preview = appTokensOf(key);
return InkWell(
onTap: () {
ref.read(themeControllerProvider.notifier).set(key);
Navigator.of(ctx).pop();
},
child: Container(
padding: const EdgeInsets.symmetric(vertical: 13),
decoration: BoxDecoration(
border: i == _themes.length - 1
? null
: Border(bottom: BorderSide(color: t.borderSubtle)),
),
child: Row(children: [
// 四色 swatch（primary/primary-dark/page/accent，与桌面 tcard 同序）
ClipRRect(
borderRadius: BorderRadius.circular(AppDims.rSm),
child: SizedBox(
width: 56,
height: 24,
child: Row(children: [
Expanded(child: Container(color: preview.primary)),
Expanded(child: Container(color: preview.primaryDark)),
Expanded(child: Container(color: preview.page)),
Expanded(child: Container(color: preview.accent)),
]),
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(name,
style: TextStyle(
fontSize: AppDims.fsBody,
fontWeight:
sel ? FontWeight.w600 : FontWeight.w500,
color: sel ? t.primary : t.text)),
Text(desc,
style: TextStyle(
fontSize: AppDims.fsXs, color: t.muted)),
],
),
),
if (sel)
Icon(LucideIcons.check, size: 18, color: t.primary),
]),
),
);
}),
],
]);
}),
);
}