447 lines
13 KiB
Dart
447 lines
13 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:provider/provider.dart';
|
||
import 'package:sales_chat/pages/chat_page.dart';
|
||
import 'package:sales_chat/pages/invite_page.dart';
|
||
import 'package:sales_chat/pages/dashboard_page.dart';
|
||
import 'package:sales_chat/pages/admin_page.dart';
|
||
import 'package:sales_chat/providers/auth_provider.dart';
|
||
import 'package:sales_chat/providers/chat_provider.dart';
|
||
import 'package:sales_chat/widgets/user_avatar.dart';
|
||
import 'package:sales_chat/theme/app_theme.dart';
|
||
|
||
/// 首页 —— 底部导航容器 + 销售工作台（Twitter 风格）
|
||
class HomePage extends StatefulWidget {
|
||
const HomePage({super.key});
|
||
|
||
@override
|
||
State<HomePage> createState() => _HomePageState();
|
||
}
|
||
|
||
class _HomePageState extends State<HomePage> {
|
||
int _currentIndex = 0;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
WidgetsBinding.instance.addPostFrameCallback((_) => _loadData());
|
||
}
|
||
|
||
Future<void> _loadData() async {
|
||
final chatProvider = context.read<ChatProvider>();
|
||
await chatProvider.loadGroups();
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final authProvider = context.watch<AuthProvider>();
|
||
final user = authProvider.user;
|
||
|
||
final pages = [
|
||
_buildWorkbenchPage(),
|
||
const ChatPage(),
|
||
const InvitePage(),
|
||
const DashboardPage(),
|
||
if (user?.isAdmin == true) const AdminPage(),
|
||
];
|
||
|
||
return Scaffold(
|
||
body: pages[_currentIndex],
|
||
bottomNavigationBar: BottomNavigationBar(
|
||
currentIndex: _currentIndex,
|
||
onTap: (index) {
|
||
setState(() {
|
||
_currentIndex = index;
|
||
});
|
||
},
|
||
items: [
|
||
const BottomNavigationBarItem(
|
||
icon: Icon(Icons.home_outlined),
|
||
activeIcon: Icon(Icons.home),
|
||
label: '工作台',
|
||
),
|
||
const BottomNavigationBarItem(
|
||
icon: Icon(Icons.chat_outlined),
|
||
activeIcon: Icon(Icons.chat),
|
||
label: '群聊',
|
||
),
|
||
const BottomNavigationBarItem(
|
||
icon: Icon(Icons.card_giftcard_outlined),
|
||
activeIcon: Icon(Icons.card_giftcard),
|
||
label: '邀请',
|
||
),
|
||
const BottomNavigationBarItem(
|
||
icon: Icon(Icons.bar_chart_outlined),
|
||
activeIcon: Icon(Icons.bar_chart),
|
||
label: '看板',
|
||
),
|
||
if (user?.isAdmin == true)
|
||
const BottomNavigationBarItem(
|
||
icon: Icon(Icons.admin_panel_settings_outlined),
|
||
activeIcon: Icon(Icons.admin_panel_settings),
|
||
label: '管理',
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 构建工作台页面 —— Twitter 风格
|
||
Widget _buildWorkbenchPage() {
|
||
return Scaffold(
|
||
appBar: AppBar(
|
||
title: const Text('销售工作台'),
|
||
actions: [
|
||
IconButton(
|
||
icon: const Icon(Icons.notifications_outlined),
|
||
onPressed: () {
|
||
// TODO: 消息通知
|
||
},
|
||
),
|
||
PopupMenuButton<String>(
|
||
icon: const Icon(Icons.account_circle),
|
||
onSelected: (value) {
|
||
if (value == 'logout') {
|
||
_handleLogout();
|
||
}
|
||
},
|
||
itemBuilder: (context) => [
|
||
const PopupMenuItem(
|
||
value: 'profile',
|
||
child: ListTile(
|
||
leading: Icon(Icons.person_outline),
|
||
title: Text('个人信息'),
|
||
),
|
||
),
|
||
const PopupMenuItem(
|
||
value: 'logout',
|
||
child: ListTile(
|
||
leading: Icon(Icons.logout),
|
||
title: Text('退出登录'),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
body: RefreshIndicator(
|
||
onRefresh: _loadData,
|
||
child: SingleChildScrollView(
|
||
physics: const AlwaysScrollableScrollPhysics(),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// 欢迎区域 —— 卡片容器
|
||
_buildWelcomeSection(),
|
||
const SizedBox(height: 8),
|
||
|
||
// 快捷操作 —— 圆形图标按钮
|
||
_buildQuickActionsSection(),
|
||
const SizedBox(height: 8),
|
||
|
||
// 最近群聊 —— 卡片区块列表
|
||
_buildRecentGroupsSection(),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 欢迎区域 —— 简洁卡片，头像 + 问候语
|
||
Widget _buildWelcomeSection() {
|
||
return Consumer<AuthProvider>(
|
||
builder: (context, auth, _) {
|
||
return Container(
|
||
width: double.infinity,
|
||
color: AppTheme.cardBackground,
|
||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
|
||
child: Row(
|
||
children: [
|
||
UserAvatar(
|
||
displayName: auth.user?.displayName ?? 'U',
|
||
radius: 24,
|
||
),
|
||
const SizedBox(width: 14),
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
'你好，${auth.user?.displayName ?? '用户'}',
|
||
style: const TextStyle(
|
||
fontSize: 17,
|
||
fontWeight: FontWeight.w600,
|
||
color: AppTheme.textPrimary,
|
||
),
|
||
),
|
||
const SizedBox(height: 4),
|
||
const Text(
|
||
'今天也要加油哦！',
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: AppTheme.textSecondary,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
},
|
||
);
|
||
}
|
||
|
||
/// 快捷操作 —— 3个圆形图标按钮横排
|
||
Widget _buildQuickActionsSection() {
|
||
return Container(
|
||
width: double.infinity,
|
||
color: AppTheme.cardBackground,
|
||
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||
children: [
|
||
_QuickActionButton(
|
||
icon: Icons.add_circle_outline,
|
||
label: '创建邀请',
|
||
color: AppTheme.primaryColor,
|
||
onTap: () {
|
||
setState(() {
|
||
_currentIndex = 2;
|
||
});
|
||
},
|
||
),
|
||
_QuickActionButton(
|
||
icon: Icons.chat_outlined,
|
||
label: '进入群聊',
|
||
color: AppTheme.infoColor,
|
||
onTap: () {
|
||
setState(() {
|
||
_currentIndex = 1;
|
||
});
|
||
},
|
||
),
|
||
_QuickActionButton(
|
||
icon: Icons.bar_chart_outlined,
|
||
label: '查看报表',
|
||
color: AppTheme.warningColor,
|
||
onTap: () {
|
||
setState(() {
|
||
_currentIndex = 3;
|
||
});
|
||
},
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 最近群聊 —— 卡片区块，扁平列表项
|
||
Widget _buildRecentGroupsSection() {
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// 区块标题
|
||
Container(
|
||
width: double.infinity,
|
||
color: AppTheme.cardBackground,
|
||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
|
||
child: const Text(
|
||
'最近群聊',
|
||
style: TextStyle(
|
||
fontSize: 15,
|
||
fontWeight: FontWeight.w600,
|
||
color: AppTheme.textPrimary,
|
||
),
|
||
),
|
||
),
|
||
// 群聊列表
|
||
Consumer<ChatProvider>(
|
||
builder: (context, chat, _) {
|
||
if (chat.isLoading) {
|
||
return Container(
|
||
color: AppTheme.cardBackground,
|
||
padding: const EdgeInsets.all(24),
|
||
child: const Center(
|
||
child: CircularProgressIndicator(),
|
||
),
|
||
);
|
||
}
|
||
|
||
if (chat.groups.isEmpty) {
|
||
return Container(
|
||
color: AppTheme.cardBackground,
|
||
padding: const EdgeInsets.all(24),
|
||
child: Center(
|
||
child: Text(
|
||
'暂无群聊',
|
||
style: TextStyle(color: AppTheme.textSecondary, fontSize: 14),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
final groups = chat.groups.take(5).toList();
|
||
return Container(
|
||
color: AppTheme.cardBackground,
|
||
child: Column(
|
||
children: [
|
||
for (int i = 0; i < groups.length; i++) ...[
|
||
_GroupListTile(
|
||
group: groups[i],
|
||
onTap: () {
|
||
chat.selectGroup(groups[i]);
|
||
setState(() {
|
||
_currentIndex = 1;
|
||
});
|
||
},
|
||
),
|
||
if (i < groups.length - 1)
|
||
const Padding(
|
||
padding: EdgeInsets.only(left: 62),
|
||
child: Divider(height: 0.5, thickness: 0.5),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
);
|
||
},
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
/// 退出登录确认
|
||
Future<void> _handleLogout() async {
|
||
final confirmed = await showDialog<bool>(
|
||
context: context,
|
||
builder: (context) => AlertDialog(
|
||
title: const Text('退出登录'),
|
||
content: const Text('确定要退出登录吗？'),
|
||
actions: [
|
||
TextButton(
|
||
onPressed: () => Navigator.pop(context, false),
|
||
child: const Text('取消'),
|
||
),
|
||
TextButton(
|
||
onPressed: () => Navigator.pop(context, true),
|
||
child: Text('退出', style: TextStyle(color: AppTheme.errorColor)),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
|
||
if (confirmed == true && mounted) {
|
||
final authProvider = context.read<AuthProvider>();
|
||
await authProvider.logout();
|
||
if (mounted) {
|
||
Navigator.of(context).pushReplacementNamed('/login');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 快捷操作按钮 —— 圆形图标 + 文字标签（卡片背景色）
|
||
class _QuickActionButton extends StatelessWidget {
|
||
final IconData icon;
|
||
final String label;
|
||
final Color color;
|
||
final VoidCallback onTap;
|
||
|
||
const _QuickActionButton({
|
||
required this.icon,
|
||
required this.label,
|
||
required this.color,
|
||
required this.onTap,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return GestureDetector(
|
||
onTap: onTap,
|
||
behavior: HitTestBehavior.opaque,
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Container(
|
||
width: 50,
|
||
height: 50,
|
||
decoration: BoxDecoration(
|
||
color: color.withValues(alpha: 0.1),
|
||
shape: BoxShape.circle,
|
||
),
|
||
child: Icon(icon, color: color, size: 26),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
label,
|
||
style: const TextStyle(
|
||
fontSize: 12,
|
||
color: AppTheme.textSecondary,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// 群聊列表项 —— 卡片背景行，头像 + 群名 + 成员数 + 箭头
|
||
class _GroupListTile extends StatelessWidget {
|
||
final dynamic group;
|
||
final VoidCallback onTap;
|
||
|
||
const _GroupListTile({
|
||
required this.group,
|
||
required this.onTap,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return InkWell(
|
||
onTap: onTap,
|
||
child: Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||
child: Row(
|
||
children: [
|
||
GroupAvatar(
|
||
groupName: group.name,
|
||
radius: 22,
|
||
),
|
||
const SizedBox(width: 14),
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
group.name,
|
||
style: const TextStyle(
|
||
fontSize: 16,
|
||
color: AppTheme.textPrimary,
|
||
),
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
const SizedBox(height: 3),
|
||
Text(
|
||
'${group.memberCount} 成员',
|
||
style: const TextStyle(
|
||
fontSize: 13,
|
||
color: AppTheme.textHint,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const Icon(
|
||
Icons.chevron_right,
|
||
color: AppTheme.textHint,
|
||
size: 20,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|