message_list_page.dart 7.9 KB

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