message_list_page.dart 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. import 'package:easy_refresh/easy_refresh.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter_riverpod/flutter_riverpod.dart';
  4. import 'package:go_router/go_router.dart';
  5. import 'package:tdesign_flutter/tdesign_flutter.dart';
  6. import '../../shared/widgets/empty_state.dart';
  7. import '../../shared/widgets/nav_bar_config.dart';
  8. import '../../core/i18n/app_localizations.dart';
  9. import '../../shared/widgets/message_item.dart';
  10. import '../../shared/widgets/skeleton_list_card.dart';
  11. import 'message_list_controller.dart';
  12. import 'message_model.dart';
  13. import '../../core/theme/app_colors.dart';
  14. import '../../core/theme/app_colors_extension.dart';
  15. /// 消息通知聚合页
  16. ///
  17. /// 展示 5 种消息类型:
  18. /// - 审批待办(📋)→ 详情页 + 审批操作栏
  19. /// - 审批结果(✅/❌)→ 详情查看结果
  20. /// - 撤回通知(↩)→ 消息列表
  21. /// - 系统公告(📢)→ 公告详情
  22. /// - 过期提醒(⏰)→ 对应详情页
  23. ///
  24. /// 左滑操作:标记已读(蓝)+ 删除(红)。已读消息不可左滑。
  25. class MessageListPage extends ConsumerWidget {
  26. const MessageListPage({super.key});
  27. @override
  28. Widget build(BuildContext context, WidgetRef ref) {
  29. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  30. final messagesAsync = ref.watch(messageListProvider);
  31. final unreadCount = ref.watch(unreadCountProvider);
  32. final location = GoRouterState.of(context).uri.toString();
  33. final l10n = AppLocalizations.of(context);
  34. if (location.startsWith('/messages')) {
  35. setNavBarTitle(context, ref, NavBarConfig(
  36. title: l10n.get('messageNotifications'),
  37. showBack: true,
  38. leadingIcon: Icons.close,
  39. // 仅在有未读时显示"全部已读"按钮
  40. showRight: unreadCount > 0,
  41. rightWidget: unreadCount > 0
  42. ? GestureDetector(
  43. onTap: () {
  44. TDMessage.showMessage(
  45. context: context,
  46. content: l10n.get('markAllRead'),
  47. theme: MessageTheme.success,
  48. icon: true,
  49. duration: 2000,
  50. );
  51. },
  52. child: Padding(
  53. padding: const EdgeInsets.symmetric(
  54. horizontal: 12,
  55. vertical: 8,
  56. ),
  57. child: Text(
  58. l10n.get('markAllRead'),
  59. style: TextStyle(
  60. fontSize: AppFontSizes.body,
  61. color: colors.primary,
  62. ),
  63. ),
  64. ),
  65. )
  66. : null,
  67. ));
  68. }
  69. // 首次加载:展示骨架屏,不包裹 EasyRefresh
  70. if (messagesAsync.isLoading && !messagesAsync.hasValue) {
  71. return SkeletonLoadingList(
  72. cardBuilder: () => const SkeletonMessageCard(),
  73. );
  74. }
  75. return EasyRefresh(
  76. header: TDRefreshHeader(),
  77. onRefresh: () async {
  78. ref.invalidate(messageListProvider);
  79. await ref.read(messageListProvider.future);
  80. },
  81. child: _buildContent(context, ref, messagesAsync, l10n),
  82. );
  83. }
  84. /// 根据加载状态构建列表内容
  85. ///
  86. /// - [AsyncValue.isReloading]:下拉刷新中,展示旧数据 + header loading
  87. /// - [AsyncValue.hasError]:错误状态
  88. /// - 空数据:空状态
  89. /// - 正常数据:消息列表
  90. Widget _buildContent(
  91. BuildContext context,
  92. WidgetRef ref,
  93. AsyncValue<List<MessageModel>> messagesAsync,
  94. AppLocalizations l10n,
  95. ) {
  96. // 下拉刷新中:保留旧数据 + EasyRefresh header loading
  97. if (messagesAsync.isReloading) {
  98. final oldItems = messagesAsync.valueOrNull ?? [];
  99. if (oldItems.isEmpty) {
  100. return SingleChildScrollView(
  101. physics: const AlwaysScrollableScrollPhysics(),
  102. child: EmptyState(message: l10n.get('noMessages')),
  103. );
  104. }
  105. return ListView.separated(
  106. padding: const EdgeInsets.fromLTRB(
  107. AppSpacing.md,
  108. AppSpacing.md,
  109. AppSpacing.md,
  110. AppSpacing.lg,
  111. ),
  112. itemCount: oldItems.length,
  113. separatorBuilder: (_, _) => const SizedBox(height: 12),
  114. itemBuilder: (_, i) => _buildItem(context, ref, oldItems[i], l10n),
  115. );
  116. }
  117. // 错误
  118. if (messagesAsync.hasError) {
  119. return SingleChildScrollView(
  120. physics: const AlwaysScrollableScrollPhysics(),
  121. child: EmptyState(message: l10n.get('loadFailed')),
  122. );
  123. }
  124. // 空数据
  125. final messages = messagesAsync.requireValue;
  126. if (messages.isEmpty) {
  127. return SingleChildScrollView(
  128. physics: const AlwaysScrollableScrollPhysics(),
  129. child: EmptyState(message: l10n.get('noMessages')),
  130. );
  131. }
  132. // 正常列表
  133. return ListView.separated(
  134. padding: const EdgeInsets.fromLTRB(
  135. AppSpacing.md,
  136. AppSpacing.md,
  137. AppSpacing.md,
  138. AppSpacing.lg,
  139. ),
  140. itemCount: messages.length,
  141. separatorBuilder: (_, _) => const SizedBox(height: 12),
  142. itemBuilder: (_, i) => _buildItem(context, ref, messages[i], l10n),
  143. );
  144. }
  145. Widget _buildItem(
  146. BuildContext context,
  147. WidgetRef ref,
  148. MessageModel msg,
  149. AppLocalizations l10n,
  150. ) {
  151. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  152. final (icon, iconColor, iconBg) = _messageIconProps(msg.msgType, colors);
  153. return MessageItem(
  154. icon: icon,
  155. iconColor: iconColor,
  156. iconBackground: iconBg,
  157. title: msg.title,
  158. time: _formatTime(msg.createTime),
  159. sender: _messageSender(msg.msgType, l10n),
  160. summary: msg.content,
  161. unread: !msg.isRead,
  162. onTap: () => _navigateToBiz(context, msg),
  163. // 仅未读消息展示左滑操作
  164. onToggleRead: msg.isRead
  165. ? null
  166. : () {
  167. TDMessage.showMessage(
  168. context: context,
  169. content: '${l10n.get("markRead")}:${msg.title}',
  170. theme: MessageTheme.success,
  171. icon: true,
  172. duration: 2000,
  173. );
  174. },
  175. onDelete: () {
  176. showDialog(
  177. context: context,
  178. builder: (ctx) => TDAlertDialog(
  179. title: l10n.get('confirm'),
  180. content: l10n.getString(
  181. 'confirmAction',
  182. args: {'action': l10n.get('delete')},
  183. ),
  184. leftBtn: TDDialogButtonOptions(
  185. title: l10n.get('cancel'),
  186. action: () => Navigator.of(ctx).pop(),
  187. ),
  188. rightBtn: TDDialogButtonOptions(
  189. title: l10n.get('confirm'),
  190. action: () {
  191. Navigator.of(ctx).pop();
  192. TDMessage.showMessage(
  193. context: context,
  194. content: '${l10n.get("deletedToast")}${msg.title}',
  195. theme: MessageTheme.warning,
  196. icon: true,
  197. duration: 2000,
  198. );
  199. },
  200. ),
  201. ),
  202. );
  203. },
  204. );
  205. }
  206. /// 按消息类型返回(图标, 图标色, 图标背景色)
  207. (IconData, Color, Color) _messageIconProps(
  208. String msgType,
  209. AppColorsExtension colors,
  210. ) {
  211. switch (msgType) {
  212. case 'announcement':
  213. return (Icons.campaign_outlined, colors.warning, colors.warningBg);
  214. case 'approval_result':
  215. return (Icons.check_circle_outlined, colors.success, colors.successBg);
  216. case 'withdraw_notice':
  217. return (Icons.undo_outlined, colors.statusGray, colors.swipeDeleteBg);
  218. case 'expiry_reminder':
  219. return (Icons.timer_off_outlined, colors.danger, colors.dangerBg);
  220. case 'approval_notice':
  221. default:
  222. return (Icons.assignment_outlined, colors.primary, colors.primaryLight);
  223. }
  224. }
  225. /// 按消息类型返回发送者标签
  226. String _messageSender(String msgType, AppLocalizations l10n) {
  227. switch (msgType) {
  228. case 'announcement':
  229. return l10n.get('systemNotice');
  230. case 'approval_notice':
  231. return l10n.get('approvalNotice');
  232. case 'approval_result':
  233. return l10n.get('systemMessage');
  234. case 'withdraw_notice':
  235. return l10n.get('systemMessage');
  236. case 'expiry_reminder':
  237. return l10n.get('systemMessage');
  238. default:
  239. return l10n.get('systemMessage');
  240. }
  241. }
  242. /// 格式化时间为 MM-DD HH:mm
  243. String _formatTime(DateTime time) {
  244. final month = time.month.toString().padLeft(2, '0');
  245. final day = time.day.toString().padLeft(2, '0');
  246. final hour = time.hour.toString().padLeft(2, '0');
  247. final minute = time.minute.toString().padLeft(2, '0');
  248. return '$month-$day $hour:$minute';
  249. }
  250. /// 按 BizType 路由跳转
  251. void _navigateToBiz(BuildContext context, MessageModel msg) {
  252. if (msg.bizType == null || msg.bizId == null) return;
  253. switch (msg.bizType) {
  254. case 'expense':
  255. context.push('/expense/detail/${msg.bizId}');
  256. break;
  257. case 'overtime':
  258. context.push('/overtime/detail/${msg.bizId}');
  259. break;
  260. case 'vehicle':
  261. context.push('/vehicle/detail/${msg.bizId}');
  262. break;
  263. case 'announcement':
  264. context.push('/announcement/detail/${msg.bizId}');
  265. break;
  266. case 'expense_apply':
  267. context.push('/expense-apply/detail/${msg.bizId}');
  268. break;
  269. }
  270. }
  271. }