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:
@@ -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(
|
||||
|
||||
@@ -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),
|
||||
]),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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]),
|
||||
],
|
||||
]),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -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_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];
|
||||
Reference in New Issue
Block a user