896 lines
28 KiB
Dart
896 lines
28 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter/services.dart';
|
||
import 'package:provider/provider.dart';
|
||
import 'package:sales_chat/providers/chat_provider.dart';
|
||
import 'package:sales_chat/providers/auth_provider.dart';
|
||
import 'package:sales_chat/models/group.dart';
|
||
import 'package:sales_chat/models/message.dart';
|
||
import 'package:sales_chat/widgets/user_avatar.dart' as custom;
|
||
import 'package:sales_chat/theme/app_theme.dart';
|
||
|
||
/// 聊天页面 —— 微信风格
|
||
class ChatPage extends StatefulWidget {
|
||
const ChatPage({super.key});
|
||
|
||
@override
|
||
State<ChatPage> createState() => _ChatPageState();
|
||
}
|
||
|
||
class _ChatPageState extends State<ChatPage> {
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Column(
|
||
children: [
|
||
AppBar(
|
||
title: const Text('聊天'),
|
||
),
|
||
Expanded(
|
||
child: Consumer<ChatProvider>(
|
||
builder: (context, chatProvider, _) {
|
||
if (chatProvider.isLoading && chatProvider.groups.isEmpty) {
|
||
return const Center(child: CircularProgressIndicator());
|
||
}
|
||
|
||
if (chatProvider.groups.isEmpty) {
|
||
return _buildEmptyState();
|
||
}
|
||
|
||
if (chatProvider.currentGroup != null) {
|
||
return _buildChatView(chatProvider);
|
||
}
|
||
|
||
return _buildGroupList(chatProvider);
|
||
},
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
/// 空状态占位
|
||
Widget _buildEmptyState() {
|
||
return Center(
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Icon(
|
||
Icons.chat_bubble_outline,
|
||
size: 64,
|
||
color: AppTheme.textHint,
|
||
),
|
||
const SizedBox(height: 16),
|
||
Text(
|
||
'暂无群聊',
|
||
style: TextStyle(
|
||
fontSize: 16,
|
||
color: AppTheme.textSecondary,
|
||
),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
'请联系管理员将您加入群聊',
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: AppTheme.textHint,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 群组列表 —— 微信会话列表风格
|
||
/// 白底行 + 细分割线，无卡片阴影
|
||
Widget _buildGroupList(ChatProvider chatProvider) {
|
||
return Container(
|
||
color: AppTheme.cardBackground,
|
||
child: ListView.separated(
|
||
// 去掉顶部和底部多余间距
|
||
padding: EdgeInsets.zero,
|
||
itemCount: chatProvider.groups.length,
|
||
// 每行之间用细分割线
|
||
separatorBuilder: (_, __) => const Divider(
|
||
height: 0.5,
|
||
thickness: 0.5,
|
||
indent: 76, // 头像右侧开始
|
||
color: AppTheme.dividerColor,
|
||
),
|
||
itemBuilder: (context, index) {
|
||
final group = chatProvider.groups[index];
|
||
return _WeChatGroupRow(
|
||
group: group,
|
||
onTap: () => chatProvider.selectGroup(group),
|
||
);
|
||
},
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 聊天视图 —— 聊天界面
|
||
Widget _buildChatView(ChatProvider chatProvider) {
|
||
final group = chatProvider.currentGroup!;
|
||
final authProvider = context.read<AuthProvider>();
|
||
|
||
return Column(
|
||
children: [
|
||
// 聊天顶栏
|
||
Container(
|
||
color: AppTheme.cardBackground,
|
||
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
|
||
child: Row(
|
||
children: [
|
||
IconButton(
|
||
icon: const Icon(Icons.arrow_back_ios, size: 20),
|
||
onPressed: () => chatProvider.deselectGroup(),
|
||
),
|
||
Expanded(
|
||
child: GestureDetector(
|
||
onTap: () => _showGroupInfo(context, group),
|
||
child: Column(
|
||
children: [
|
||
Text(
|
||
group.name,
|
||
style: const TextStyle(
|
||
fontSize: 17,
|
||
fontWeight: FontWeight.w600,
|
||
color: AppTheme.textPrimary,
|
||
),
|
||
),
|
||
Text(
|
||
'${group.memberCount}位成员',
|
||
style: const TextStyle(
|
||
fontSize: 11,
|
||
color: AppTheme.textHint,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
IconButton(
|
||
icon: const Icon(Icons.more_horiz, size: 22),
|
||
onPressed: () => _showGroupInfo(context, group),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const Divider(height: 0.5, thickness: 0.5),
|
||
Expanded(
|
||
child: _ChatMessagesList(
|
||
messages: chatProvider.currentMessages,
|
||
currentUserId: authProvider.user?.id ?? '',
|
||
onLoadMore: () {
|
||
// 加载更多历史消息
|
||
},
|
||
),
|
||
),
|
||
_ChatInput(
|
||
onSend: (text) {
|
||
chatProvider.sendMessage(text);
|
||
},
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
/// 显示群信息底部弹窗
|
||
void _showGroupInfo(BuildContext context, Group group) {
|
||
showModalBottomSheet(
|
||
context: context,
|
||
backgroundColor: AppTheme.cardBackground,
|
||
shape: const RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
|
||
),
|
||
builder: (context) => _GroupInfoSheet(group: group),
|
||
);
|
||
}
|
||
}
|
||
|
||
// ================================================================
|
||
// 群组列表行 —— 微信会话列表风格
|
||
// ================================================================
|
||
class _WeChatGroupRow extends StatelessWidget {
|
||
final Group group;
|
||
final VoidCallback onTap;
|
||
|
||
const _WeChatGroupRow({
|
||
required this.group,
|
||
required this.onTap,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return InkWell(
|
||
onTap: onTap,
|
||
// 点击水波纹颜色
|
||
splashColor: AppTheme.dividerColor,
|
||
highlightColor: AppTheme.timestampBg,
|
||
child: Container(
|
||
color: AppTheme.cardBackground,
|
||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||
child: Row(
|
||
children: [
|
||
// 左侧群头像
|
||
custom.GroupAvatar(
|
||
groupName: group.name,
|
||
radius: 24,
|
||
),
|
||
const SizedBox(width: 12),
|
||
// 右侧群名 + 成员数
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
group.name,
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: const TextStyle(
|
||
fontSize: 16,
|
||
fontWeight: FontWeight.w500,
|
||
color: AppTheme.textPrimary,
|
||
),
|
||
),
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
'${group.memberCount}位成员',
|
||
style: const TextStyle(
|
||
fontSize: 13,
|
||
color: AppTheme.textHint,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
// 右侧箭头图标
|
||
Icon(
|
||
Icons.chevron_right,
|
||
color: AppTheme.textHint,
|
||
size: 20,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
// ================================================================
|
||
// 消息列表
|
||
// ================================================================
|
||
class _ChatMessagesList extends StatelessWidget {
|
||
final List<Message> messages;
|
||
final String currentUserId;
|
||
final VoidCallback? onLoadMore;
|
||
|
||
const _ChatMessagesList({
|
||
required this.messages,
|
||
required this.currentUserId,
|
||
this.onLoadMore,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
if (messages.isEmpty) {
|
||
return Center(
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Icon(
|
||
Icons.chat_bubble_outline,
|
||
size: 48,
|
||
color: AppTheme.textHint,
|
||
),
|
||
const SizedBox(height: 12),
|
||
Text(
|
||
'暂无消息',
|
||
style: TextStyle(color: AppTheme.textSecondary),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
'发送第一条消息开始聊天吧',
|
||
style: TextStyle(color: AppTheme.textHint, fontSize: 12),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
return Container(
|
||
color: AppTheme.scaffoldBackground,
|
||
child: ListView.builder(
|
||
reverse: true,
|
||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||
itemCount: messages.length,
|
||
itemBuilder: (context, index) {
|
||
final message = messages[index];
|
||
final isMe = message.senderId == currentUserId;
|
||
|
||
// 滚动到顶部时加载更多
|
||
if (index == messages.length - 1 && onLoadMore != null) {
|
||
onLoadMore!();
|
||
}
|
||
|
||
// 判断是否需要显示时间戳（与下一条消息间隔超过5分钟）
|
||
final bool showTimestamp;
|
||
if (index == messages.length - 1) {
|
||
// 最旧的消息，始终显示时间
|
||
showTimestamp = true;
|
||
} else {
|
||
final nextMessage = messages[index + 1];
|
||
if (message.createdAt != null && nextMessage.createdAt != null) {
|
||
final diff = message.createdAt!
|
||
.difference(nextMessage.createdAt!)
|
||
.inMinutes;
|
||
showTimestamp = diff.abs() >= 5;
|
||
} else {
|
||
showTimestamp = false;
|
||
}
|
||
}
|
||
|
||
return _MessageBubble(
|
||
message: message,
|
||
isMe: isMe,
|
||
showTimestamp: showTimestamp,
|
||
);
|
||
},
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
// ================================================================
|
||
// 消息气泡 —— 微信风格
|
||
// ================================================================
|
||
class _MessageBubble extends StatelessWidget {
|
||
final Message message;
|
||
final bool isMe;
|
||
final bool showTimestamp;
|
||
|
||
const _MessageBubble({
|
||
required this.message,
|
||
required this.isMe,
|
||
this.showTimestamp = false,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
// 撤回消息：居中灰色斜体
|
||
if (message.hasRecall) {
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||
child: Column(
|
||
children: [
|
||
if (showTimestamp && message.createdAt != null)
|
||
_buildTimestamp(),
|
||
const SizedBox(height: 4),
|
||
Center(
|
||
child: Text(
|
||
'消息已撤回',
|
||
style: TextStyle(
|
||
color: AppTheme.textHint,
|
||
fontSize: 12,
|
||
fontStyle: FontStyle.italic,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
return Padding(
|
||
padding: const EdgeInsets.only(bottom: 10),
|
||
child: Column(
|
||
children: [
|
||
// 时间戳居中显示在消息上方
|
||
if (showTimestamp && message.createdAt != null)
|
||
_buildTimestamp(),
|
||
const SizedBox(height: 4),
|
||
// 消息行
|
||
GestureDetector(
|
||
onLongPress: () => _showMessageOptions(context),
|
||
child: Row(
|
||
mainAxisAlignment:
|
||
isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// 对方消息：左侧头像
|
||
if (!isMe) ...[
|
||
custom.UserAvatar(
|
||
displayName:
|
||
message.senderName.isNotEmpty ? message.senderName : 'U',
|
||
radius: 16,
|
||
),
|
||
const SizedBox(width: 8),
|
||
],
|
||
// 气泡内容
|
||
Flexible(
|
||
child: Column(
|
||
crossAxisAlignment:
|
||
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
|
||
children: [
|
||
// 对方消息：发送者名称（群聊显示）
|
||
if (!isMe && message.senderName.isNotEmpty)
|
||
Padding(
|
||
padding: const EdgeInsets.only(bottom: 2, left: 2),
|
||
child: Text(
|
||
message.senderName,
|
||
style: const TextStyle(
|
||
fontSize: 11,
|
||
color: AppTheme.textHint,
|
||
fontWeight: FontWeight.w400,
|
||
),
|
||
),
|
||
),
|
||
// 气泡
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 12, vertical: 9),
|
||
decoration: BoxDecoration(
|
||
// 自己：微信绿气泡；对方：白色气泡
|
||
color: isMe
|
||
? AppTheme.bubbleSelf
|
||
: AppTheme.bubbleOther,
|
||
borderRadius: BorderRadius.only(
|
||
topLeft: const Radius.circular(12),
|
||
topRight: const Radius.circular(12),
|
||
// 微信风格：外角小圆角，内角大圆角
|
||
bottomLeft:
|
||
Radius.circular(isMe ? 12 : 4),
|
||
bottomRight:
|
||
Radius.circular(isMe ? 4 : 12),
|
||
),
|
||
// 无阴影，干净清爽
|
||
),
|
||
child: Text(
|
||
message.content,
|
||
style: TextStyle(
|
||
// 己方蓝色气泡用白字，对方灰色气泡用深色字
|
||
color: isMe ? Colors.white : AppTheme.textPrimary,
|
||
fontSize: 15,
|
||
height: 1.4,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
// 自己消息：右侧留出间距（对称对方头像）
|
||
if (isMe) const SizedBox(width: 8),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 居中时间戳
|
||
Widget _buildTimestamp() {
|
||
return Padding(
|
||
padding: const EdgeInsets.only(top: 4, bottom: 2),
|
||
child: Center(
|
||
child: Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
||
decoration: BoxDecoration(
|
||
color: AppTheme.timestampBg,
|
||
borderRadius: BorderRadius.circular(4),
|
||
),
|
||
child: Text(
|
||
_formatTime(message.createdAt!),
|
||
style: const TextStyle(
|
||
fontSize: 11,
|
||
color: AppTheme.timestampText,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 长按消息菜单
|
||
void _showMessageOptions(BuildContext context) {
|
||
final authProvider = context.read<AuthProvider>();
|
||
final chatProvider = context.read<ChatProvider>();
|
||
final isAdmin = authProvider.user?.isAdmin ?? false;
|
||
final canRecall = isMe && _isRecallable(message.createdAt);
|
||
|
||
showModalBottomSheet(
|
||
context: context,
|
||
backgroundColor: AppTheme.cardBackground,
|
||
shape: const RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
|
||
),
|
||
builder: (context) => SafeArea(
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
// 顶部拖拽指示条
|
||
Container(
|
||
margin: const EdgeInsets.only(top: 8, bottom: 4),
|
||
width: 36,
|
||
height: 4,
|
||
decoration: BoxDecoration(
|
||
color: AppTheme.dragHandleColor,
|
||
borderRadius: BorderRadius.circular(2),
|
||
),
|
||
),
|
||
if (canRecall)
|
||
ListTile(
|
||
leading: Icon(Icons.undo, color: AppTheme.primaryColor),
|
||
title: const Text('撤回消息'),
|
||
subtitle: const Text('其他人将不再看到此消息'),
|
||
onTap: () {
|
||
Navigator.pop(context);
|
||
_handleRecall(context, chatProvider);
|
||
},
|
||
),
|
||
if (isAdmin && !canRecall)
|
||
ListTile(
|
||
leading: const Icon(Icons.delete, color: Colors.red),
|
||
title:
|
||
const Text('删除消息', style: TextStyle(color: Colors.red)),
|
||
subtitle: const Text('管理员删除消息'),
|
||
onTap: () {
|
||
Navigator.pop(context);
|
||
_handleDelete(context, chatProvider);
|
||
},
|
||
),
|
||
ListTile(
|
||
leading: Icon(Icons.copy, color: AppTheme.textSecondary),
|
||
title: const Text('复制'),
|
||
onTap: () {
|
||
Clipboard.setData(ClipboardData(text: message.content));
|
||
Navigator.pop(context);
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(content: Text('已复制到剪贴板')),
|
||
);
|
||
},
|
||
),
|
||
ListTile(
|
||
leading:
|
||
Icon(Icons.cancel_outlined, color: AppTheme.textHint),
|
||
title: const Text('取消'),
|
||
onTap: () => Navigator.pop(context),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 判断消息是否可撤回（2分钟内）
|
||
bool _isRecallable(DateTime? createdAt) {
|
||
if (createdAt == null) return false;
|
||
final now = DateTime.now();
|
||
final diff = now.difference(createdAt);
|
||
return diff.inMinutes < 2;
|
||
}
|
||
|
||
/// 撤回消息
|
||
Future<void> _handleRecall(
|
||
BuildContext context, ChatProvider chatProvider) 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: const Text('撤回'),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
|
||
if (confirmed == true) {
|
||
final success = await chatProvider.recallMessage(message.id);
|
||
if (context.mounted) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(
|
||
content: Text(success ? '消息已撤回' : (chatProvider.error ?? '撤回失败')),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 删除消息（管理员）
|
||
Future<void> _handleDelete(
|
||
BuildContext context, ChatProvider chatProvider) 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),
|
||
style: TextButton.styleFrom(foregroundColor: Colors.red),
|
||
child: const Text('删除'),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
|
||
if (confirmed == true) {
|
||
final success = await chatProvider.deleteMessage(message.id);
|
||
if (context.mounted) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(
|
||
content: Text(success ? '消息已删除' : (chatProvider.error ?? '删除失败')),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 格式化时间
|
||
String _formatTime(DateTime time) {
|
||
final now = DateTime.now();
|
||
final today = DateTime(now.year, now.month, now.day);
|
||
final yesterday = today.subtract(const Duration(days: 1));
|
||
final messageDate = DateTime(time.year, time.month, time.day);
|
||
|
||
final hour = time.hour.toString().padLeft(2, '0');
|
||
final minute = time.minute.toString().padLeft(2, '0');
|
||
|
||
if (messageDate == today) {
|
||
return '$hour:$minute';
|
||
} else if (messageDate == yesterday) {
|
||
return '昨天 $hour:$minute';
|
||
} else if (now.year == time.year) {
|
||
return '${time.month}月${time.day}日 $hour:$minute';
|
||
} else {
|
||
return '${time.year}年${time.month}月${time.day}日 $hour:$minute';
|
||
}
|
||
}
|
||
}
|
||
|
||
// ================================================================
|
||
// 聊天输入栏 —— 微信风格
|
||
// ================================================================
|
||
class _ChatInput extends StatefulWidget {
|
||
final Function(String) onSend;
|
||
|
||
const _ChatInput({required this.onSend});
|
||
|
||
@override
|
||
State<_ChatInput> createState() => _ChatInputState();
|
||
}
|
||
|
||
class _ChatInputState extends State<_ChatInput> {
|
||
final _controller = TextEditingController();
|
||
|
||
@override
|
||
void dispose() {
|
||
_controller.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
void _handleSend() {
|
||
final text = _controller.text.trim();
|
||
if (text.isNotEmpty) {
|
||
widget.onSend(text);
|
||
_controller.clear();
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Container(
|
||
decoration: const BoxDecoration(
|
||
color: AppTheme.chatInputBg,
|
||
border: Border(
|
||
top: BorderSide(
|
||
color: AppTheme.dividerColor,
|
||
width: 0.5,
|
||
),
|
||
),
|
||
),
|
||
padding: EdgeInsets.only(
|
||
left: 12,
|
||
right: 12,
|
||
top: 8,
|
||
bottom: MediaQuery.of(context).padding.bottom + 8,
|
||
),
|
||
child: Row(
|
||
crossAxisAlignment: CrossAxisAlignment.end,
|
||
children: [
|
||
// 输入框
|
||
Expanded(
|
||
child: Container(
|
||
constraints: const BoxConstraints(
|
||
minHeight: 36,
|
||
maxHeight: 120,
|
||
),
|
||
child: TextField(
|
||
controller: _controller,
|
||
maxLines: null,
|
||
style: const TextStyle(
|
||
fontSize: 15,
|
||
color: AppTheme.textPrimary,
|
||
),
|
||
decoration: InputDecoration(
|
||
hintText: '输入消息...',
|
||
hintStyle: const TextStyle(
|
||
color: AppTheme.textHint,
|
||
fontSize: 15,
|
||
),
|
||
filled: true,
|
||
fillColor: AppTheme.cardBackground,
|
||
border: OutlineInputBorder(
|
||
borderRadius: BorderRadius.circular(6),
|
||
borderSide: BorderSide.none,
|
||
),
|
||
contentPadding: const EdgeInsets.symmetric(
|
||
horizontal: 12,
|
||
vertical: 8,
|
||
),
|
||
isDense: true,
|
||
),
|
||
onSubmitted: (_) => _handleSend(),
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 8),
|
||
// 发送按钮：微信绿圆形
|
||
GestureDetector(
|
||
onTap: _handleSend,
|
||
child: Container(
|
||
width: 36,
|
||
height: 36,
|
||
decoration: const BoxDecoration(
|
||
color: AppTheme.primaryColor,
|
||
shape: BoxShape.circle,
|
||
),
|
||
child: const Icon(
|
||
Icons.send_rounded,
|
||
color: Colors.white,
|
||
size: 18,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
// ================================================================
|
||
// 群信息底部弹窗 —— 微信风格，干净白底
|
||
// ================================================================
|
||
class _GroupInfoSheet extends StatelessWidget {
|
||
final Group group;
|
||
|
||
const _GroupInfoSheet({required this.group});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
|
||
decoration: const BoxDecoration(
|
||
color: AppTheme.cardBackground,
|
||
borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
|
||
),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
// 顶部拖拽指示条
|
||
Container(
|
||
width: 36,
|
||
height: 4,
|
||
margin: const EdgeInsets.only(bottom: 20),
|
||
decoration: BoxDecoration(
|
||
color: AppTheme.dragHandleColor,
|
||
borderRadius: BorderRadius.circular(2),
|
||
),
|
||
),
|
||
// 群头像
|
||
custom.GroupAvatar(
|
||
groupName: group.name,
|
||
radius: 40,
|
||
),
|
||
const SizedBox(height: 12),
|
||
// 群名称
|
||
Text(
|
||
group.name,
|
||
style: const TextStyle(
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.w600,
|
||
color: AppTheme.textPrimary,
|
||
),
|
||
),
|
||
const SizedBox(height: 4),
|
||
// 成员数
|
||
Text(
|
||
'${group.memberCount}位成员',
|
||
style: const TextStyle(
|
||
fontSize: 14,
|
||
color: AppTheme.textHint,
|
||
),
|
||
),
|
||
// 群描述
|
||
if (group.description != null &&
|
||
group.description!.isNotEmpty) ...[
|
||
const SizedBox(height: 12),
|
||
Container(
|
||
width: double.infinity,
|
||
padding: const EdgeInsets.all(12),
|
||
decoration: BoxDecoration(
|
||
color: AppTheme.chatInputBg,
|
||
borderRadius: BorderRadius.circular(8),
|
||
),
|
||
child: Text(
|
||
group.description!,
|
||
textAlign: TextAlign.center,
|
||
style: const TextStyle(
|
||
fontSize: 14,
|
||
color: AppTheme.textSecondary,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
// 频道列表
|
||
if (group.panels.isNotEmpty) ...[
|
||
const SizedBox(height: 16),
|
||
const Align(
|
||
alignment: Alignment.centerLeft,
|
||
child: Text(
|
||
'频道',
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w600,
|
||
color: AppTheme.textPrimary,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Wrap(
|
||
spacing: 8,
|
||
runSpacing: 8,
|
||
children: group.panels
|
||
.where((p) => p.type == 0)
|
||
.map((p) => Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 12, vertical: 6),
|
||
decoration: BoxDecoration(
|
||
color: AppTheme.chatInputBg,
|
||
borderRadius: BorderRadius.circular(6),
|
||
),
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Icon(Icons.tag,
|
||
size: 14, color: AppTheme.textHint),
|
||
const SizedBox(width: 4),
|
||
Text(
|
||
p.name,
|
||
style: const TextStyle(
|
||
fontSize: 13,
|
||
color: AppTheme.textPrimary,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
))
|
||
.toList(),
|
||
),
|
||
],
|
||
const SizedBox(height: 24),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|