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

feat(client): 初版 Flutter UI 框架，仿照参考截图实现

Browse Source 
- 蓝色顶栏（#1565C0）+ 深蓝侧边栏（#0D47A1），含折叠/展开
- 底部状态栏：门店编号、登录用户、登录时间、实时时钟、版本号
- 登录页：居中卡片，支持密码显示/隐藏
- 入库单列表：筛选/搜索/日期选择/分页，三个 Tab（入库单/查询/审核）
- 新建入库单：基本信息 + 商品明细动态增删，实时计算合计金额
- 出库单列表：同入库单风格
- 库存查询：4 张统计卡片 + 颜色高亮缺货/预警行，库存预警 Tab
- 往来单位、财务、商品、系统设置（用户/仓库/编号规则/系统参数）
- 使用 Riverpod 状态管理 + go_router 路由 + Dio HTTP

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-04-04 12:51:41 +08:00
parent d6397083c0
commit 76ab19ea47
22 changed files with 6386 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/lib/screens/shell/app_shell.dart
+345
View File
@@ -0,0 +1,345 @@
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;
late Timer _timer;
late String _currentTime;
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
void initState() {
super.initState();
_currentTime = DateFormat('HH:mm:ss').format(DateTime.now());
_timer = Timer.periodic(const Duration(seconds: 1), (_) {
if (mounted) {
setState(() =>
_currentTime = DateFormat('HH:mm:ss').format(DateTime.now()));
}
});
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
@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.hotelName,
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(),
],
_StatusItem(
icon: Icons.access_time,
text: '当前时间：$_currentTime'),
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 StatefulWidget {
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
State<_SidebarItem> createState() => _SidebarItemState();
}
class _SidebarItemState extends State<_SidebarItem> {
bool _hovered = false;
@override
Widget build(BuildContext context) {
final isActive = widget.isActive;
final expanded = widget.expanded;
return MouseRegion(
onEnter: (_) => setState(() => _hovered = true),
onExit: (_) => setState(() => _hovered = false),
child: GestureDetector(
onTap: widget.onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
height: 48,
color: isActive
? AppTheme.primary.withOpacity(0.3)
: _hovered
? Colors.white.withOpacity(0.05)
: Colors.transparent,
padding: EdgeInsets.symmetric(horizontal: expanded ? 0 : 0),
child: Row(
children: [
// Active indicator
AnimatedContainer(
duration: const Duration(milliseconds: 150),
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(
widget.item.icon,
color: isActive ? Colors.white : Colors.white60,
size: 20,
),
if (expanded) ...[
const SizedBox(width: 12),
Flexible(
child: Text(
widget.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),
);
}
}