wangjia
37112d6599
- 替换 flutter_secure_storage 为 shared_preferences，解决 macOS Keychain 签名报错 - 登录页门店编号/用户名支持历史下拉（最多5条，LRU 淘汰），使用 Overlay + CompositedTransformFollower 实现浮层 - logout 仅删除 auth token，保留登录历史 - AppShell 时钟抽为独立 _ClockWidget，避免每秒 setState 导致 TabBarView 叠影 - ShellRoute 子路由改用 NoTransitionPage，消除切换页面时的过渡动画叠影 - 新增 auth_state_test、auth_repository_test、login_screen_test 共 14 个单元/Widget 测试 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
337 lines
11 KiB
Dart
337 lines
11 KiB
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 'dart:async';
|
|
import '../../core/auth/auth_state.dart';
|
|
import '../../core/theme/app_theme.dart';
|
|
|
|
class AppShell extends ConsumerStatefulWidget {
|
|
final Widget child;
|
|
const AppShell({super.key, required this.child});
|
|
|
|
@override
|
|
ConsumerState<AppShell> createState() => _AppShellState();
|
|
}
|
|
|
|
class _AppShellState extends ConsumerState<AppShell> {
|
|
bool _sidebarExpanded = true;
|
|
final String _loginTime =
|
|
DateFormat('HH:mm:ss').format(DateTime.now());
|
|
|
|
final List<_NavItem> _navItems = const [
|
|
_NavItem(icon: Icons.input, label: '入库管理', path: '/stock-in'),
|
|
_NavItem(icon: Icons.output, label: '出库管理', path: '/stock-out'),
|
|
_NavItem(icon: Icons.inventory_2, label: '库存管理', path: '/inventory'),
|
|
_NavItem(
|
|
icon: Icons.account_balance_wallet,
|
|
label: '财务管理',
|
|
path: '/finance'),
|
|
_NavItem(icon: Icons.people, label: '往来单位', path: '/partners'),
|
|
_NavItem(icon: Icons.category, label: '基础数据', path: '/products'),
|
|
_NavItem(icon: Icons.settings, label: '系统设置', path: '/settings'),
|
|
];
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final user = ref.watch(authStateProvider).user;
|
|
final location = GoRouterState.of(context).matchedLocation;
|
|
final sidebarWidth = _sidebarExpanded ? 200.0 : 56.0;
|
|
|
|
return Scaffold(
|
|
body: Column(
|
|
children: [
|
|
// Top Bar
|
|
Container(
|
|
height: 56,
|
|
color: AppTheme.primary,
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Row(
|
|
children: [
|
|
IconButton(
|
|
icon: Icon(
|
|
_sidebarExpanded ? Icons.menu_open : Icons.menu,
|
|
color: Colors.white),
|
|
onPressed: () =>
|
|
setState(() => _sidebarExpanded = !_sidebarExpanded),
|
|
tooltip: _sidebarExpanded ? '收起侧边栏' : '展开侧边栏',
|
|
),
|
|
const SizedBox(width: 4),
|
|
const Icon(Icons.wine_bar, color: Colors.white, size: 22),
|
|
const SizedBox(width: 8),
|
|
const Text(
|
|
'酒库管理系统',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
letterSpacing: 0.5),
|
|
),
|
|
const Spacer(),
|
|
if (user != null) ...[
|
|
const Icon(Icons.business,
|
|
color: Colors.white70, size: 14),
|
|
const SizedBox(width: 4),
|
|
Text(user.hotelNo,
|
|
style: const TextStyle(
|
|
color: Colors.white70, fontSize: 13)),
|
|
const SizedBox(width: 20),
|
|
const Icon(Icons.person_outline,
|
|
color: Colors.white70, size: 14),
|
|
const SizedBox(width: 4),
|
|
Text(user.username,
|
|
style: const TextStyle(
|
|
color: Colors.white70, fontSize: 13)),
|
|
const SizedBox(width: 8),
|
|
PopupMenuButton<String>(
|
|
icon: const Icon(Icons.keyboard_arrow_down,
|
|
color: Colors.white70),
|
|
onSelected: (v) {
|
|
if (v == 'logout') {
|
|
ref.read(authStateProvider.notifier).logout();
|
|
context.go('/login');
|
|
}
|
|
},
|
|
itemBuilder: (context) => [
|
|
const PopupMenuItem(
|
|
value: 'profile',
|
|
child: ListTile(
|
|
leading: Icon(Icons.manage_accounts, size: 18),
|
|
title: Text('个人设置'),
|
|
dense: true,
|
|
)),
|
|
const PopupMenuDivider(),
|
|
const PopupMenuItem(
|
|
value: 'logout',
|
|
child: ListTile(
|
|
leading: Icon(Icons.logout, size: 18),
|
|
title: Text('退出登录'),
|
|
dense: true,
|
|
)),
|
|
],
|
|
),
|
|
const SizedBox(width: 8),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
// Main area
|
|
Expanded(
|
|
child: Row(
|
|
children: [
|
|
// Sidebar
|
|
AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeInOut,
|
|
width: sidebarWidth,
|
|
color: AppTheme.primaryDark,
|
|
child: Column(
|
|
children: [
|
|
Expanded(
|
|
child: ListView(
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
children: _navItems.map((item) {
|
|
final isActive =
|
|
location.startsWith(item.path);
|
|
return _SidebarItem(
|
|
item: item,
|
|
isActive: isActive,
|
|
expanded: _sidebarExpanded,
|
|
onTap: () => context.go(item.path),
|
|
);
|
|
}).toList(),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// Content area
|
|
Expanded(
|
|
child: Column(
|
|
children: [
|
|
Expanded(child: widget.child),
|
|
// Status bar
|
|
Container(
|
|
height: 28,
|
|
color: const Color(0xFF37474F),
|
|
padding:
|
|
const EdgeInsets.symmetric(horizontal: 12),
|
|
child: Row(
|
|
children: [
|
|
if (user != null) ...[
|
|
_StatusItem(
|
|
icon: Icons.store,
|
|
text: '门店编号：${user.hotelNo}'),
|
|
const _StatusDivider(),
|
|
_StatusItem(
|
|
icon: Icons.person,
|
|
text: '登录用户：${user.username}'),
|
|
const _StatusDivider(),
|
|
_StatusItem(
|
|
icon: Icons.login,
|
|
text: '登录时间：$_loginTime'),
|
|
const _StatusDivider(),
|
|
],
|
|
const _ClockWidget(),
|
|
const Spacer(),
|
|
const _StatusItem(
|
|
icon: Icons.info_outline,
|
|
text: 'v1.0.0'),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _NavItem {
|
|
final IconData icon;
|
|
final String label;
|
|
final String path;
|
|
const _NavItem(
|
|
{required this.icon, required this.label, required this.path});
|
|
}
|
|
|
|
class _SidebarItem extends StatelessWidget {
|
|
final _NavItem item;
|
|
final bool isActive;
|
|
final bool expanded;
|
|
final VoidCallback onTap;
|
|
|
|
const _SidebarItem({
|
|
required this.item,
|
|
required this.isActive,
|
|
required this.expanded,
|
|
required this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox(
|
|
height: 48,
|
|
child: Material(
|
|
color: isActive ? AppTheme.primary.withAlpha(76) : Colors.transparent,
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
hoverColor: Colors.white.withAlpha(13),
|
|
splashColor: Colors.white.withAlpha(26),
|
|
highlightColor: Colors.white.withAlpha(13),
|
|
child: Row(
|
|
children: [
|
|
// Active indicator bar
|
|
Container(
|
|
width: 3,
|
|
height: isActive ? 28 : 0,
|
|
color: Colors.white,
|
|
margin: EdgeInsets.only(right: expanded ? 13 : 0),
|
|
),
|
|
if (!isActive) SizedBox(width: expanded ? 16 : 3),
|
|
Expanded(
|
|
child: Row(
|
|
mainAxisAlignment: expanded
|
|
? MainAxisAlignment.start
|
|
: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
item.icon,
|
|
color: isActive ? Colors.white : Colors.white60,
|
|
size: 20,
|
|
),
|
|
if (expanded) ...[
|
|
const SizedBox(width: 12),
|
|
Flexible(
|
|
child: Text(
|
|
item.label,
|
|
style: TextStyle(
|
|
color: isActive ? Colors.white : Colors.white70,
|
|
fontSize: 14,
|
|
fontWeight: isActive
|
|
? FontWeight.w500
|
|
: FontWeight.normal,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _StatusItem extends StatelessWidget {
|
|
final IconData icon;
|
|
final String text;
|
|
const _StatusItem({required this.icon, required this.text});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(icon, size: 11, color: Colors.white54),
|
|
const SizedBox(width: 4),
|
|
Text(text,
|
|
style: const TextStyle(color: Colors.white54, fontSize: 11)),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _StatusDivider extends StatelessWidget {
|
|
const _StatusDivider();
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
width: 1,
|
|
height: 12,
|
|
color: Colors.white24,
|
|
margin: const EdgeInsets.symmetric(horizontal: 10),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _ClockWidget extends StatefulWidget {
|
|
const _ClockWidget();
|
|
@override
|
|
State<_ClockWidget> createState() => _ClockWidgetState();
|
|
}
|
|
|
|
class _ClockWidgetState extends State<_ClockWidget> {
|
|
late Timer _timer;
|
|
late String _time;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_time = DateFormat('HH:mm:ss').format(DateTime.now());
|
|
_timer = Timer.periodic(const Duration(seconds: 1), (_) {
|
|
if (mounted) setState(() => _time = DateFormat('HH:mm:ss').format(DateTime.now()));
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_timer.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return _StatusItem(icon: Icons.access_time, text: '当前时间：$_time');
|
|
}
|
|
}
|