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/screens/me/license_screen.dart
+23
View File
@@ -0,0 +1,23 @@
// screens/me/license_screen.dart — 授权管理独立屏（镜像原型 m-license.html）。
// 移动端从「我的 → 系统 → 授权管理」进入（/me/license）；内容 = 公共 LicensePanel
// 四卡（授权信息 / 在线购买续费 / 兑换券 / 降级规则），与桌面设置授权 tab 同源。
import 'package:flutter/material.dart';
import '../../core/theme/context_tokens.dart';
import '../settings/license_panel.dart';
class LicenseScreen extends StatelessWidget {
const LicenseScreen({super.key});
@override
Widget build(BuildContext context) {
final t = context.tokens;
return Container(
color: t.bg,
child: const SingleChildScrollView(
padding: EdgeInsets.all(14),
child: LicensePanel(),
),
);
}
}
client/lib/screens/me/me_screen.dart
+208
View File
@@ -0,0 +1,208 @@
// screens/me/me_screen.dart — 「我的」hub（镜像原型 m-me.html，移动愿景导航中枢）。
// 结构：用户头卡（54 渐变圆头像 + 真名 + 店名·账号 + 角色徽章）
// + 经营管理组（往来单位/基础数据/库存盘点）
// + 系统组（用户管理/授权管理/设备管理/系统设置/主题外观/关于我们）
// + 退出登录（确认 sheet）。窄屏底部 tab「我的」入口；桌面侧栏不含此屏。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../core/auth/auth_state.dart';
import '../../core/theme/app_dims.g.dart';
import '../../core/theme/context_tokens.dart';
import '../../providers/shop_provider.dart';
import '../../widgets/ds/ds_atoms.dart';
import '../../widgets/ds/m_hub.dart';
import '../../widgets/ds/m_sheet.dart';
import '../../widgets/ds/status_icon_map.dart';
import '../../widgets/theme_sheet.dart';
String _roleLabel(String role) {
switch (role) {
case 'superadmin':
return '超级管理员';
case 'admin':
return '管理员';
case 'readonly':
return '只读';
default:
return '操作员';
}
}
class MeScreen extends ConsumerWidget {
const MeScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final t = context.tokens;
final user = ref.watch(authStateProvider).user;
final shopName =
ref.watch(shopInfoProvider).valueOrNull?.name ?? user?.shopNo ?? '';
return Container(
color: t.bg,
child: ListView(
padding: const EdgeInsets.all(14),
children: [
if (user != null) _header(t, user, shopName),
MHubGroup(label: '经营管理', items: [
MHubItem(
icon: LucideIcons.users,
label: '往来单位',
onTap: () => context.go('/partners')),
MHubItem(
icon: LucideIcons.layoutGrid,
label: '基础数据',
onTap: () => context.go('/products')),
MHubItem(
icon: LucideIcons.clipboardCheck,
label: '库存盘点',
onTap: () => context.go('/inventory/check')),
]),
MHubGroup(label: '系统', items: [
MHubItem(
icon: LucideIcons.userPlus,
label: '用户管理',
onTap: () => context.go('/settings/users')),
MHubItem(
icon: LucideIcons.trendingUp,
label: '授权管理',
onTap: () => context.go('/me/license')),
MHubItem(
icon: LucideIcons.monitorSmartphone,
label: '设备管理',
onTap: () => context.go('/devices')),
MHubItem(
icon: LucideIcons.settings,
label: '系统设置',
onTap: () => context.go('/settings')),
MHubItem(
icon: LucideIcons.shirt,
label: '主题外观',
onTap: () => showThemeSheet(context)),
MHubItem(
icon: LucideIcons.info,
label: '关于我们',
onTap: () => context.go('/about')),
]),
const SizedBox(height: 18),
_LogoutButton(onConfirm: () {
ref.read(authStateProvider.notifier).logout();
context.go('/login');
}),
],
),
);
}
/// 用户头卡（原型 .me-hd）：surface 卡 + 54 渐变圆头像 + 名/店·账号 + 角色徽章。
Widget _header(dynamic t, AuthUser user, String shopName) {
final name = user.realName.isNotEmpty ? user.realName : user.username;
final initial = name.isNotEmpty ? name.characters.first : '用';
final roleLabel = _roleLabel(user.role);
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: t.surface,
border: Border.all(color: t.border),
borderRadius: BorderRadius.circular(AppDims.rLg),
),
child: Row(children: [
Container(
width: 54,
height: 54,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [t.primary, t.primaryDark],
),
shape: BoxShape.circle,
),
alignment: Alignment.center,
child: Text(initial,
style: TextStyle(
color: t.onPrimary,
fontSize: 22,
fontWeight: FontWeight.w800)),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(name,
style: TextStyle(
fontSize: AppDims.fsH2,
fontWeight: FontWeight.w700,
color: t.heading)),
const SizedBox(height: 3),
Text('$shopName · ${user.username}',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
],
),
),
DsBadge(roleLabel,
tone: DsBadgeTone.info, icon: statusIcon(roleLabel)),
]),
);
}
}
class _LogoutButton extends StatelessWidget {
final VoidCallback onConfirm;
const _LogoutButton({required this.onConfirm});
@override
Widget build(BuildContext context) {
final t = context.tokens;
// Material 自带（InkWell 水波 + golden 直挂无 Scaffold 场景）
return Material(
color: t.surface,
borderRadius: BorderRadius.circular(AppDims.rMd),
child: InkWell(
onTap: () => _confirm(context),
borderRadius: BorderRadius.circular(AppDims.rMd),
child: Container(
height: 44,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: t.border),
borderRadius: BorderRadius.circular(AppDims.rMd),
),
child: Text('退出登录',
style: TextStyle(
fontSize: AppDims.fsBody,
fontWeight: FontWeight.w600,
color: t.danger)),
),
),
);
}
void _confirm(BuildContext context) {
showMSheet<void>(
context,
title: '退出登录',
builder: (ctx) => Text('确认退出当前账号？',
style: TextStyle(
fontSize: AppDims.fsBody, color: ctx.tokens.text)),
actions: [
Builder(
builder: (ctx) =>
DsButton('取消', onPressed: () => Navigator.of(ctx).pop())),
Builder(
builder: (ctx) => DsButton('退出登录',
variant: DsBtnVariant.danger, onPressed: () {
Navigator.of(ctx).pop();
onConfirm();
}),
),
],
);
}
}
client/lib/screens/settings/license_panel.dart
+214
View File
@@ -0,0 +1,214 @@
// screens/settings/license_panel.dart — 授权管理面板（自 settings_screen.dart 抽取为公共组件）。
// 四卡：授权信息 / 在线购买续费(PurchaseCard, admin only) / 兑换券 / 到期降级规则。
// 桌面：SettingsScreen 授权 tab 内嵌；移动：独立屏 LicenseScreen（/me/license）复用。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:intl/intl.dart';
import 'package:url_launcher/url_launcher.dart';
import '../../core/auth/auth_state.dart';
import '../../core/config/app_info.dart';
import '../../core/config/license_copy.dart';
import '../../core/responsive/responsive.dart';
import '../../core/theme/app_dims.g.dart';
import '../../core/theme/app_fonts.dart';
import '../../core/theme/context_tokens.dart';
import '../../core/utils/clock.dart';
import '../../providers/license_provider.dart';
import '../../widgets/ds/ds_atoms.dart';
import '../../widgets/ds/ds_toast.dart';
import '../../widgets/write_guard.dart';
import 'purchase_card.dart';
import 'settings_card.dart';
class LicensePanel extends ConsumerStatefulWidget {
const LicensePanel({super.key});
@override
ConsumerState<LicensePanel> createState() => _LicensePanelState();
}
class _LicensePanelState extends ConsumerState<LicensePanel> {
final _voucherCtrl = TextEditingController();
bool _redeeming = false;
@override
void dispose() {
_voucherCtrl.dispose();
super.dispose();
}
Future<void> _redeem() async {
final code = _voucherCtrl.text.trim();
if (code.isEmpty) {
showDsToast(context, '请输入兑换券短码');
return;
}
setState(() => _redeeming = true);
try {
await ref.read(licenseRepositoryProvider).activate(code);
ref.invalidate(licenseProvider);
_voucherCtrl.clear();
if (mounted) {
showDsToast(context, '兑换成功，已续期 ✓', bg: context.tokens.success);
}
} catch (e) {
if (mounted) {
showDsToast(context, '兑换失败：$e', bg: context.tokens.danger);
}
} finally {
if (mounted) setState(() => _redeeming = false);
}
}
@override
Widget build(BuildContext context) {
final t = context.tokens;
final lic = ref.watch(licenseProvider).valueOrNull;
final role = ref.watch(authStateProvider.select((s) => s.user?.role));
final isAdmin = role == 'admin' || role == 'superadmin';
final expires = lic?.expiresAt != null
? DateFormat('yyyy-MM-dd').format(lic!.expiresAt!)
: '—';
// 状态/剩余天数走可注入时钟（golden 确定化），不用 model 内的 DateTime.now()
final active = lic?.isActive == true &&
(lic?.expiresAt == null || lic!.expiresAt!.isAfter(appNow()));
final days = lic?.expiresAt != null
? lic!.expiresAt!.difference(appNow()).inDays.clamp(0, 99999)
: null;
final licCells = [
_licCell(t, '授权状态', active ? '已授权' : '未授权',
color: active ? t.success : t.warn),
_licCell(t, '到期日', expires),
_licCell(t, '剩余天数', days != null ? '$days 天' : '—'),
];
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// ── 卡1：授权信息（3 cell，自「关于我们」迁入）──
SettingsCard(
title: '授权信息',
desc: '当前门店的授权状态与有效期，续期时长在现有到期时间上叠加',
child: context.isMobile
? Column(children: [
for (final c in licCells)
Padding(
padding: const EdgeInsets.only(bottom: 10), child: c),
])
: Row(children: [
for (var i = 0; i < licCells.length; i++) ...[
if (i > 0) const SizedBox(width: 14),
Expanded(child: licCells[i]),
],
]),
),
const SizedBox(height: 16),
// ── 卡2：在线购买 / 续费（后端 purchase 接口 admin only，
// 非管理员引导看官网价格页）──
if (isAdmin)
const SettingsCard(
title: '在线购买 / 续费',
desc: '选择套餐支付宝支付，到账后授权自动续期',
child: PurchaseCard(),
)
else
SettingsCard(
title: '在线购买 / 续费',
desc: '在线购买仅门店管理员可操作',
child: Row(children: [
Text('在线购买请联系门店管理员 · ',
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
InkWell(
onTap: () =>
launchUrl(Uri.parse('${AppInfo.website}/#pricing')),
child: Text('查看套餐价格 →',
style: TextStyle(
fontSize: AppDims.fsSm,
fontWeight: FontWeight.w600,
color: t.primary)),
),
]),
),
const SizedBox(height: 16),
// ── 卡3：兑换券（原型 .redeem：input + 按钮，max 520）──
SettingsCard(
title: '兑换券',
desc: '输入兑换券短码续期',
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 520),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('兑换券短码',
style: TextStyle(
fontSize: AppDims.fsSm, color: t.muted)),
const SizedBox(height: 6),
DsInput(
controller: _voucherCtrl,
hintText: '输入兑换券短码',
),
],
),
),
const SizedBox(width: 10),
WriteGuard(
child: DsButton(_redeeming ? '兑换中…' : '兑换续期',
variant: DsBtnVariant.primary,
onPressed: _redeeming ? null : _redeem),
),
],
),
),
),
const SizedBox(height: 16),
// ── 卡4：到期后的降级规则（现有能力保留）──
SettingsCard(
title: '到期后的降级规则',
desc: '授权到期后系统各功能的可用性说明',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
for (final note in LicenseCopy.degradationNotes())
Padding(
padding: const EdgeInsets.only(top: 3),
child: Text('· $note',
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
),
],
),
),
],
);
}
/// 原型 .lic-cell（与「关于我们」同款）：lk 11 muted + lv 17/700/mono。
Widget _licCell(dynamic t, String label, String value, {Color? color}) =>
Container(
padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
decoration: BoxDecoration(
color: t.bg,
border: Border.all(color: t.borderSubtle),
borderRadius: BorderRadius.circular(AppDims.rMd),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label,
style: TextStyle(fontSize: AppDims.fsXs, color: t.muted)),
const SizedBox(height: 6),
Text(value,
style: TextStyle(
fontSize: AppDims.fsH2,
fontWeight: FontWeight.w700,
fontFamily: AppFonts.mono,
fontFamilyFallback: AppFonts.monoFallback,
color: color ?? t.heading)),
],
),
);
}
client/lib/screens/settings/settings_card.dart
+60
View File
@@ -0,0 +1,60 @@
// screens/settings/settings_card.dart — 设置面板卡（自 settings_screen.dart 抽取为公共组件，
// 供 SettingsScreen 各面板与独立授权屏 LicenseScreen 复用）。
// 原型右侧 .card：surface / 1px border / r-lg / padding 22 24 / mb18；
// h2 17 heading + desc 12 muted（可带右上角按钮）。
import 'package:flutter/material.dart';
import '../../core/theme/app_dims.g.dart';
import '../../core/theme/context_tokens.dart';
class SettingsCard extends StatelessWidget {
final String title;
final String desc;
final Widget child;
final Widget? trailing;
const SettingsCard(
{super.key,
required this.title,
required this.desc,
required this.child,
this.trailing});
@override
Widget build(BuildContext context) {
final t = context.tokens;
return Container(
margin: const EdgeInsets.only(bottom: 18),
padding: const EdgeInsets.fromLTRB(24, 22, 24, 22),
decoration: BoxDecoration(
color: t.surface,
border: Border.all(color: t.border),
borderRadius: BorderRadius.circular(AppDims.rLg),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,
style: TextStyle(
fontSize: AppDims.fsH2,
fontWeight: FontWeight.w700,
color: t.heading)),
const SizedBox(height: 3),
Text(desc,
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
],
),
),
if (trailing != null) trailing!,
]),
const SizedBox(height: 16),
child,
],
),
);
}
}
client/lib/screens/settings/settings_screen.dart
+7 -258
View File
@@ -7,23 +7,17 @@ import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:intl/intl.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import 'package:url_launcher/url_launcher.dart';
import '../../core/auth/auth_state.dart';
import '../../core/config/app_info.dart';
import '../../core/config/license_copy.dart';
import '../../core/responsive/responsive.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 '../../core/utils/clock.dart';
import '../../core/utils/dialog_util.dart';
import '../../models/number_rule.dart';
import '../../models/shop.dart';
import '../../providers/license_provider.dart';
import '../../providers/number_rule_provider.dart';
import '../../providers/shop_provider.dart';
import '../../providers/user_provider.dart';
@@ -32,7 +26,8 @@ import '../../widgets/ds/ds_atoms.dart';
import '../../widgets/ds/ds_menu.dart';
import '../../widgets/ds/ds_table.dart';
import '../../widgets/write_guard.dart';
import 'purchase_card.dart';
import 'license_panel.dart';
import 'settings_card.dart';
import 'users_screen.dart' show userRoleBadge, userStatusBadge;
import '../../core/theme/app_fonts.dart';
import '../../widgets/ds/ds_toast.dart';
@@ -175,7 +170,7 @@ class _SettingsScreenState extends ConsumerState<SettingsScreen> {
0 => const _StoreInfoPanel(),
1 => _usersPanel(),
2 => _numberPanel(),
3 => const _LicensePanel(),
3 => const LicensePanel(),
4 => const _PrefPanel(),
_ => const SizedBox(),
};
@@ -184,7 +179,7 @@ class _SettingsScreenState extends ConsumerState<SettingsScreen> {
Widget _usersPanel() {
final t = context.tokens;
final async = ref.watch(userListProvider);
return _SettingsCard(
return SettingsCard(
title: '用户管理',
desc: '管理门店成员与权限角色',
trailing: DsButton('管理全部用户',
@@ -250,7 +245,7 @@ class _SettingsScreenState extends ConsumerState<SettingsScreen> {
Widget _numberPanel() {
final t = context.tokens;
final async = ref.watch(numberRuleListProvider);
return _SettingsCard(
return SettingsCard(
title: '编号规则',
desc: '单据编号的前缀 / 日期格式 / 序号',
child: async.when(
@@ -364,59 +359,6 @@ class _SettingsScreenState extends ConsumerState<SettingsScreen> {
}
}
/// 原型右侧 .card：surface / 1px border / r-lg / padding 22 24 / mb18；
/// h2 17 heading + desc 12 muted（可带右上角按钮）。
class _SettingsCard extends StatelessWidget {
final String title;
final String desc;
final Widget child;
final Widget? trailing;
const _SettingsCard(
{required this.title,
required this.desc,
required this.child,
this.trailing});
@override
Widget build(BuildContext context) {
final t = context.tokens;
return Container(
margin: const EdgeInsets.only(bottom: 18),
padding: const EdgeInsets.fromLTRB(24, 22, 24, 22),
decoration: BoxDecoration(
color: t.surface,
border: Border.all(color: t.border),
borderRadius: BorderRadius.circular(AppDims.rLg),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,
style: TextStyle(
fontSize: AppDims.fsH2,
fontWeight: FontWeight.w700,
color: t.heading)),
const SizedBox(height: 3),
Text(desc,
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
],
),
),
if (trailing != null) trailing!,
]),
const SizedBox(height: 16),
child,
],
),
);
}
}
// ── 面板 1：门店信息（内联表单）──────────────────────────────
class _StoreInfoPanel extends ConsumerStatefulWidget {
const _StoreInfoPanel();
@@ -511,7 +453,7 @@ class _StoreInfoPanelState extends ConsumerState<_StoreInfoPanel> {
// 授权过期 >7 天同样禁编辑（后端 LicenseGuard 会 403，这里不误导）
!WriteGuard.licenseBlocked(ref);
return _SettingsCard(
return SettingsCard(
title: '门店信息',
desc: '用于单据抬头、对账与多端展示',
child: async.when(
@@ -641,199 +583,6 @@ class _StoreInfoPanelState extends ConsumerState<_StoreInfoPanel> {
}
}
// ── 面板 4：授权管理 ───────────────────────────────────────
class _LicensePanel extends ConsumerStatefulWidget {
const _LicensePanel();
@override
ConsumerState<_LicensePanel> createState() => _LicensePanelState();
}
class _LicensePanelState extends ConsumerState<_LicensePanel> {
final _voucherCtrl = TextEditingController();
bool _redeeming = false;
@override
void dispose() {
_voucherCtrl.dispose();
super.dispose();
}
Future<void> _redeem() async {
final code = _voucherCtrl.text.trim();
if (code.isEmpty) {
showDsToast(context, '请输入兑换券短码');
return;
}
setState(() => _redeeming = true);
try {
await ref.read(licenseRepositoryProvider).activate(code);
ref.invalidate(licenseProvider);
_voucherCtrl.clear();
if (mounted) {
showDsToast(context, '兑换成功，已续期 ✓', bg: context.tokens.success);
}
} catch (e) {
if (mounted) {
showDsToast(context, '兑换失败：$e', bg: context.tokens.danger);
}
} finally {
if (mounted) setState(() => _redeeming = false);
}
}
@override
Widget build(BuildContext context) {
final t = context.tokens;
final lic = ref.watch(licenseProvider).valueOrNull;
final role = ref.watch(authStateProvider.select((s) => s.user?.role));
final isAdmin = role == 'admin' || role == 'superadmin';
final expires = lic?.expiresAt != null
? DateFormat('yyyy-MM-dd').format(lic!.expiresAt!)
: '—';
// 状态/剩余天数走可注入时钟（golden 确定化），不用 model 内的 DateTime.now()
final active = lic?.isActive == true &&
(lic?.expiresAt == null || lic!.expiresAt!.isAfter(appNow()));
final days = lic?.expiresAt != null
? lic!.expiresAt!.difference(appNow()).inDays.clamp(0, 99999)
: null;
final licCells = [
_licCell(t, '授权状态', active ? '已授权' : '未授权',
color: active ? t.success : t.warn),
_licCell(t, '到期日', expires),
_licCell(t, '剩余天数', days != null ? '$days 天' : '—'),
];
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// ── 卡1：授权信息（3 cell，自「关于我们」迁入）──
_SettingsCard(
title: '授权信息',
desc: '当前门店的授权状态与有效期，续期时长在现有到期时间上叠加',
child: context.isMobile
? Column(children: [
for (final c in licCells)
Padding(
padding: const EdgeInsets.only(bottom: 10), child: c),
])
: Row(children: [
for (var i = 0; i < licCells.length; i++) ...[
if (i > 0) const SizedBox(width: 14),
Expanded(child: licCells[i]),
],
]),
),
const SizedBox(height: 16),
// ── 卡2：在线购买 / 续费（后端 purchase 接口 admin only，
// 非管理员引导看官网价格页）──
if (isAdmin)
const _SettingsCard(
title: '在线购买 / 续费',
desc: '选择套餐支付宝支付，到账后授权自动续期',
child: PurchaseCard(),
)
else
_SettingsCard(
title: '在线购买 / 续费',
desc: '在线购买仅门店管理员可操作',
child: Row(children: [
Text('在线购买请联系门店管理员 · ',
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
InkWell(
onTap: () =>
launchUrl(Uri.parse('${AppInfo.website}/#pricing')),
child: Text('查看套餐价格 →',
style: TextStyle(
fontSize: AppDims.fsSm,
fontWeight: FontWeight.w600,
color: t.primary)),
),
]),
),
const SizedBox(height: 16),
// ── 卡3：兑换券（原型 .redeem：input + 按钮，max 520）──
_SettingsCard(
title: '兑换券',
desc: '输入兑换券短码续期',
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 520),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('兑换券短码',
style: TextStyle(
fontSize: AppDims.fsSm, color: t.muted)),
const SizedBox(height: 6),
DsInput(
controller: _voucherCtrl,
hintText: '输入兑换券短码',
),
],
),
),
const SizedBox(width: 10),
WriteGuard(
child: DsButton(_redeeming ? '兑换中…' : '兑换续期',
variant: DsBtnVariant.primary,
onPressed: _redeeming ? null : _redeem),
),
],
),
),
),
const SizedBox(height: 16),
// ── 卡4：到期后的降级规则（现有能力保留）──
_SettingsCard(
title: '到期后的降级规则',
desc: '授权到期后系统各功能的可用性说明',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
for (final note in LicenseCopy.degradationNotes())
Padding(
padding: const EdgeInsets.only(top: 3),
child: Text('· $note',
style: TextStyle(fontSize: AppDims.fsSm, color: t.muted)),
),
],
),
),
],
);
}
/// 原型 .lic-cell（与「关于我们」同款）：lk 11 muted + lv 17/700/mono。
Widget _licCell(dynamic t, String label, String value, {Color? color}) =>
Container(
padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
decoration: BoxDecoration(
color: t.bg,
border: Border.all(color: t.borderSubtle),
borderRadius: BorderRadius.circular(AppDims.rMd),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label,
style: TextStyle(fontSize: AppDims.fsXs, color: t.muted)),
const SizedBox(height: 6),
Text(value,
style: TextStyle(
fontSize: AppDims.fsH2,
fontWeight: FontWeight.w700,
fontFamily: AppFonts.mono,
fontFamilyFallback: AppFonts.monoFallback,
color: color ?? t.heading)),
],
),
);
}
// ── 面板 5：偏好设置（主题三卡 + 默认仓库）───────────────────
class _PrefPanel extends ConsumerWidget {
const _PrefPanel();
@@ -852,7 +601,7 @@ class _PrefPanel extends ConsumerWidget {
final warehouses = ref.watch(warehouseListProvider).valueOrNull ?? const [];
final defaultWh = warehouses.where((w) => w.isDefault).firstOrNull;
return _SettingsCard(
return SettingsCard(
title: '偏好设置',
desc: '主题与默认值，仅影响当前账号在本端的体验',
child: Column(
client/lib/screens/shell/app_shell.dart
+186 -101
View File
@@ -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');
}),
],
),