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
@@ -12,6 +12,7 @@ import '../../core/config/license_copy.dart';
|
||||
import '../../core/responsive/responsive.dart';
|
||||
import '../../core/theme/context_tokens.dart';
|
||||
import '../../core/theme/app_chrome.g.dart';
|
||||
import '../../core/theme/app_dims.g.dart';
|
||||
import '../../providers/connectivity_provider.dart';
|
||||
import '../../providers/session_heartbeat.dart';
|
||||
import '../../providers/shop_provider.dart';
|
||||
@@ -24,6 +25,8 @@ import '../../widgets/notification_bell.dart';
|
||||
import '../../widgets/app_status_bar.dart';
|
||||
import '../../widgets/ds/ds_atoms.dart';
|
||||
import '../../widgets/ds/ds_toast.dart';
|
||||
import '../../widgets/ds/m_tab_bar.dart';
|
||||
import '../../widgets/theme_sheet.dart';
|
||||
|
||||
/// 侧栏导航项（含其 StatefulShellRoute 分支序号 = router 中的 branch index）。
|
||||
class _NavItem {
|
||||
@@ -59,6 +62,47 @@ const _navGroups = <_NavGroup>[
|
||||
]),
|
||||
];
|
||||
|
||||
// ── 窄屏底部 tab（对齐原型 mobile-shell.js TABS：库存/入库/出库/财务/我的）──
|
||||
// (图标, 文案, branch index)；branch index 对应 router StatefulShellRoute 分支序号。
|
||||
const _mobileTabs = <(IconData, String, int)>[
|
||||
(LucideIcons.box, '库存', 2),
|
||||
(LucideIcons.download, '入库', 0),
|
||||
(LucideIcons.upload, '出库', 1),
|
||||
(LucideIcons.receiptText, '财务', 3),
|
||||
(LucideIcons.user, '我的', 9),
|
||||
];
|
||||
|
||||
/// 窄屏 tab 根路由白名单：命中显示底部 tabbar；未命中即二级屏（隐藏 tabbar + 返回箭头）。
|
||||
const _tabRoots = {'/inventory', '/stock-in', '/stock-out', '/finance', '/me'};
|
||||
|
||||
/// branch index → 底部 tab 高亮位；4-9（往来/基础数据/设备/设置/关于/我的）归「我的域」。
|
||||
int _tabForBranch(int branch) => switch (branch) {
|
||||
2 => 0,
|
||||
0 => 1,
|
||||
1 => 2,
|
||||
3 => 3,
|
||||
_ => 4,
|
||||
};
|
||||
|
||||
/// 窄屏顶栏标题（对齐原型 m-top data-title）。
|
||||
String _mobileTitle(String loc) {
|
||||
if (loc.startsWith('/stock-in')) return '入库管理';
|
||||
if (loc.startsWith('/stock-out')) return '出库管理';
|
||||
if (loc == '/inventory/check') return '库存盘点';
|
||||
if (loc.startsWith('/inventory')) return '库存管理';
|
||||
if (loc.startsWith('/finance')) return '财务管理';
|
||||
if (loc.startsWith('/partners')) return '往来单位';
|
||||
if (loc.startsWith('/products/')) return '商品详情';
|
||||
if (loc.startsWith('/products')) return '基础数据';
|
||||
if (loc.startsWith('/devices')) return '设备管理';
|
||||
if (loc == '/settings/users') return '用户管理';
|
||||
if (loc.startsWith('/settings')) return '系统设置';
|
||||
if (loc.startsWith('/about')) return '关于我们';
|
||||
if (loc == '/me/license') return '授权管理';
|
||||
if (loc.startsWith('/me')) return '我的';
|
||||
return '';
|
||||
}
|
||||
|
||||
String _roleLabel(String role) {
|
||||
switch (role) {
|
||||
case 'superadmin':
|
||||
@@ -76,7 +120,11 @@ class AppShell extends ConsumerStatefulWidget {
|
||||
/// StatefulShellRoute 注入的导航壳：各栏目分支 Navigator 的 IndexedStack，
|
||||
/// 跨栏目切换时各分支页面 State 常驻（保住半填表单 / 内部 tab / 滚动位置）。
|
||||
final StatefulNavigationShell navigationShell;
|
||||
const AppShell({super.key, required this.navigationShell});
|
||||
|
||||
/// 当前匹配路由（router 透传）：窄屏据此判定 tab 根 / 二级屏。
|
||||
final String location;
|
||||
const AppShell(
|
||||
{super.key, required this.navigationShell, required this.location});
|
||||
|
||||
@override
|
||||
ConsumerState<AppShell> createState() => _AppShellState();
|
||||
@@ -86,7 +134,6 @@ class _AppShellState extends ConsumerState<AppShell> {
|
||||
final String _loginTime = DateFormat('HH:mm:ss').format(AppStatusBar.clock());
|
||||
bool _forceDialogShown = false;
|
||||
bool _licenseDialogShown = false;
|
||||
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
|
||||
|
||||
/// 打开账号菜单（个人设置 / 退出登录）。[anchorContext] = 用户区组件的 context，
|
||||
/// 据其实测宽度让菜单等宽（不溢出内容区）、据其位置把菜单**完整弹到按钮正上方**
|
||||
@@ -137,6 +184,24 @@ class _AppShellState extends ConsumerState<AppShell> {
|
||||
context.go('/login');
|
||||
}
|
||||
|
||||
/// 窄屏二级屏返回：分支内有栈先 pop；分支根按来源兜底（商品详情→列表，其余→我的）。
|
||||
void _backFromSecondary() {
|
||||
if (context.canPop()) {
|
||||
context.pop();
|
||||
return;
|
||||
}
|
||||
final loc = widget.location;
|
||||
if (loc.startsWith('/products/')) {
|
||||
context.go('/products');
|
||||
} else if (loc.startsWith('/stock-in/')) {
|
||||
context.go('/stock-in');
|
||||
} else if (loc.startsWith('/stock-out/')) {
|
||||
context.go('/stock-out');
|
||||
} else {
|
||||
context.go('/me');
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final user = ref.watch(authStateProvider).user;
|
||||
@@ -155,14 +220,15 @@ class _AppShellState extends ConsumerState<AppShell> {
|
||||
final updateInfo = ref.watch(updateProvider).valueOrNull;
|
||||
final licenseInfo = ref.watch(licenseProvider).valueOrNull;
|
||||
|
||||
return SelectionArea(
|
||||
// 窄屏导航形态（对齐原型移动壳）：tab 根显示底部 tabbar，二级屏隐藏 tabbar
|
||||
// 并在顶栏出返回箭头（_buildTopBar 内）。
|
||||
final isTabRoot = _tabRoots.contains(widget.location);
|
||||
|
||||
final Widget shell = SelectionArea(
|
||||
child: Scaffold(
|
||||
key: _scaffoldKey,
|
||||
drawer: isMobile ? _buildDrawer(context, user) : null,
|
||||
drawerEnableOpenDragGesture: !kIsWeb && isMobile,
|
||||
body: Column(
|
||||
children: [
|
||||
_buildTopBar(context, user, isMobile, topInset),
|
||||
_buildTopBar(context, user, isMobile, isTabRoot, topInset),
|
||||
Expanded(
|
||||
child: Row(
|
||||
children: [
|
||||
@@ -182,46 +248,125 @@ class _AppShellState extends ConsumerState<AppShell> {
|
||||
),
|
||||
],
|
||||
),
|
||||
bottomNavigationBar: isMobile && isTabRoot
|
||||
? MTabBar(
|
||||
items: [for (final t in _mobileTabs) MTabItem(t.$1, t.$2)],
|
||||
currentIndex:
|
||||
_tabForBranch(widget.navigationShell.currentIndex),
|
||||
onTap: (i) => _goBranch(_mobileTabs[i].$3),
|
||||
)
|
||||
: null,
|
||||
),
|
||||
);
|
||||
|
||||
// 窄屏二级屏拦截系统返回键：分支根直接返回会退出 app，改走 _backFromSecondary
|
||||
// 回「我的」。Web 不拦截（浏览器历史由 go_router 管理）。
|
||||
if (!kIsWeb && isMobile && !isTabRoot) {
|
||||
return PopScope(
|
||||
canPop: false,
|
||||
onPopInvokedWithResult: (didPop, _) {
|
||||
if (!didPop) _backFromSecondary();
|
||||
},
|
||||
child: shell,
|
||||
);
|
||||
}
|
||||
return shell;
|
||||
}
|
||||
|
||||
// ── 顶栏（原型 .top, 56h）：左两级品牌；右 主题器 + 通知铃 ───────────────────
|
||||
Widget _buildTopBar(
|
||||
BuildContext context, AuthUser? user, bool isMobile, double topInset) {
|
||||
// ── 顶栏 ─────────────────────────────────────────────────────────────────
|
||||
// 桌面（原型 .top, 56h）：左两级品牌；右 主题器 + 通知铃。
|
||||
// 窄屏（原型 .m-top, 52h）：左 返回箭头(二级屏)/门店品牌(tab 根) + 屏标题；
|
||||
// 右 主题 + 通知铃 + 头像(→我的)。
|
||||
Widget _buildTopBar(BuildContext context, AuthUser? user, bool isMobile,
|
||||
bool isTabRoot, double topInset) {
|
||||
final t = context.tokens;
|
||||
if (isMobile) {
|
||||
return Container(
|
||||
height: 52 + topInset,
|
||||
decoration: BoxDecoration(
|
||||
color: t.topBg,
|
||||
border: Border(bottom: BorderSide(color: t.topBorder)),
|
||||
),
|
||||
padding: EdgeInsets.only(
|
||||
top: topInset, left: isTabRoot ? 14 : 6, right: 14),
|
||||
child: Row(
|
||||
children: [
|
||||
if (!isTabRoot)
|
||||
IconButton(
|
||||
icon: Icon(LucideIcons.arrowLeft, color: t.topFg, size: 22),
|
||||
tooltip: '返回',
|
||||
onPressed: _backFromSecondary,
|
||||
),
|
||||
Expanded(
|
||||
child: Row(children: [
|
||||
Flexible(
|
||||
child: Text(
|
||||
_mobileTitle(widget.location),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
color: t.topFg,
|
||||
fontSize: AppDims.fsTitle,
|
||||
fontWeight: FontWeight.w700),
|
||||
),
|
||||
),
|
||||
if (WriteGuard.isReadonly(ref)) ...[
|
||||
const SizedBox(width: 10),
|
||||
_readonlyBadge(t.topControl),
|
||||
],
|
||||
]),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
IconButton(
|
||||
icon: Icon(LucideIcons.shirt, color: t.topFg, size: 19),
|
||||
tooltip: '主题外观',
|
||||
onPressed: () => showThemeSheet(context),
|
||||
),
|
||||
const NotificationBell(),
|
||||
const SizedBox(width: 8),
|
||||
// 头像（.m-av 28px 圆）→ 我的
|
||||
InkWell(
|
||||
onTap: () => _goBranch(9),
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
child: Container(
|
||||
width: 28,
|
||||
height: 28,
|
||||
decoration:
|
||||
BoxDecoration(color: t.primary, shape: BoxShape.circle),
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
_avatarInitial(user),
|
||||
style: TextStyle(
|
||||
color: t.onPrimary,
|
||||
fontSize: AppDims.fsSm,
|
||||
fontWeight: FontWeight.w700),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
return Container(
|
||||
height: 56 + topInset,
|
||||
decoration: BoxDecoration(
|
||||
color: t.topBg,
|
||||
border: Border(bottom: BorderSide(color: t.topBorder)),
|
||||
),
|
||||
padding:
|
||||
EdgeInsets.only(top: topInset, left: isMobile ? 6 : 18, right: 14),
|
||||
padding: EdgeInsets.only(top: topInset, left: 18, right: 14),
|
||||
child: Row(
|
||||
children: [
|
||||
// 左组（占满剩余空间，靠左）：把右组（主题器+铃）挤到最右
|
||||
Expanded(
|
||||
child: Row(
|
||||
children: [
|
||||
if (isMobile) ...[
|
||||
IconButton(
|
||||
icon: Icon(LucideIcons.menu, color: t.topFg),
|
||||
tooltip: '菜单',
|
||||
onPressed: () => _scaffoldKey.currentState?.openDrawer(),
|
||||
),
|
||||
const SizedBox(width: 2),
|
||||
],
|
||||
// 软件品牌（岩美酒库）—— 桌面常显，窄屏让位给门店
|
||||
if (!isMobile) ...[
|
||||
const _SoftwareBrand(),
|
||||
Container(
|
||||
width: 1,
|
||||
height: 20,
|
||||
color: t.topBorder,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 8),
|
||||
),
|
||||
],
|
||||
// 软件品牌（岩美酒库）
|
||||
const _SoftwareBrand(),
|
||||
Container(
|
||||
width: 1,
|
||||
height: 20,
|
||||
color: t.topBorder,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 8),
|
||||
),
|
||||
// 门店品牌（御品轩名酒坊）——点开门店信息；过长省略
|
||||
Flexible(child: _ShopBrand(user: user)),
|
||||
if (WriteGuard.isReadonly(ref)) ...[
|
||||
@@ -241,6 +386,13 @@ class _AppShellState extends ConsumerState<AppShell> {
|
||||
);
|
||||
}
|
||||
|
||||
String _avatarInitial(AuthUser? user) {
|
||||
final name = user == null
|
||||
? ''
|
||||
: (user.realName.isNotEmpty ? user.realName : user.username);
|
||||
return name.isNotEmpty ? name.characters.first : '用';
|
||||
}
|
||||
|
||||
Widget _readonlyBadge(Color bg) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
||||
@@ -349,75 +501,6 @@ class _AppShellState extends ConsumerState<AppShell> {
|
||||
);
|
||||
}
|
||||
|
||||
/// 窄屏（手机）侧滑抽屉导航：与侧栏同分组结构。
|
||||
Widget _buildDrawer(BuildContext context, AuthUser? user) {
|
||||
final t = context.tokens;
|
||||
return Drawer(
|
||||
child: Container(
|
||||
color: t.sideBg,
|
||||
child: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
if (user != null)
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
|
||||
color: t.topBg,
|
||||
child: Row(
|
||||
children: [
|
||||
const _SoftwareBrandMark(size: 30),
|
||||
const SizedBox(width: 8),
|
||||
const Text('岩美酒库',
|
||||
style: TextStyle(
|
||||
color: AppChrome.onAccent,
|
||||
fontSize: 17,
|
||||
fontWeight: FontWeight.w700)),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: ListView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
children: [
|
||||
for (final g in _navGroups) ...[
|
||||
_navLabel(t, g.label),
|
||||
for (final item in g.items)
|
||||
_SidebarNav(
|
||||
item: item,
|
||||
active:
|
||||
widget.navigationShell.currentIndex == item.index,
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
_goBranch(item.index);
|
||||
},
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
if (user != null) ...[
|
||||
Container(
|
||||
height: 1,
|
||||
color: t.sideBorder,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16)),
|
||||
ListTile(
|
||||
leading: Icon(LucideIcons.logOut, color: t.sideFg),
|
||||
title: Text('退出登录',
|
||||
style: TextStyle(
|
||||
color: t.sideActiveFg, fontWeight: FontWeight.w500)),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
_logout();
|
||||
},
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ── 顶部横幅（更新 / 强制更新 / 授权 / 离线）：保持原有行为 ───────────────────
|
||||
List<Widget> _buildBanners(
|
||||
BuildContext context,
|
||||
@@ -553,7 +636,9 @@ class _AppShellState extends ConsumerState<AppShell> {
|
||||
overflow: TextOverflow.ellipsis),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => context.go('/settings?tab=license'),
|
||||
// 窄屏授权入口是独立屏（我的→授权管理），宽屏保持设置授权 tab
|
||||
onPressed: () => context.go(
|
||||
context.isMobile ? '/me/license' : '/settings?tab=license'),
|
||||
style:
|
||||
TextButton.styleFrom(foregroundColor: AppChrome.onAccentFaint),
|
||||
child: const Text('去激活'),
|
||||
@@ -584,7 +669,7 @@ class _AppShellState extends ConsumerState<AppShell> {
|
||||
? DsBtnVariant.primary
|
||||
: DsBtnVariant.danger, onPressed: () {
|
||||
Navigator.pop(_);
|
||||
ctx.go('/settings?tab=license');
|
||||
ctx.go(ctx.isMobile ? '/me/license' : '/settings?tab=license');
|
||||
}),
|
||||
],
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user