announcement_list_page.dart 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_riverpod/flutter_riverpod.dart';
  3. import 'package:go_router/go_router.dart';
  4. import 'package:tdesign_flutter/tdesign_flutter.dart';
  5. import 'package:easy_refresh/easy_refresh.dart';
  6. import '../../core/theme/app_colors_extension.dart';
  7. import '../../shared/widgets/nav_bar_config.dart';
  8. import '../../core/utils/date_utils.dart' as du;
  9. import '../../core/utils/responsive.dart';
  10. import '../../shared/widgets/empty_state.dart';
  11. import '../../shared/widgets/skeleton_list_card.dart';
  12. import '../../shared/widgets/list_footer.dart';
  13. import '../../core/i18n/app_localizations.dart';
  14. import '../../core/auth/role_provider.dart';
  15. import 'announcement_list_controller.dart';
  16. import 'announcement_model.dart';
  17. class AnnouncementListPage extends ConsumerStatefulWidget {
  18. const AnnouncementListPage({super.key});
  19. @override
  20. ConsumerState<AnnouncementListPage> createState() =>
  21. _AnnouncementListPageState();
  22. }
  23. class _AnnouncementListPageState extends ConsumerState<AnnouncementListPage>
  24. with TickerProviderStateMixin {
  25. late TabController _tabCtrl;
  26. static List<String> _getTabLabels(bool isAdmin, AppLocalizations l10n) =>
  27. isAdmin
  28. ? [
  29. l10n.get('all'),
  30. l10n.get('noticeAnnouncement'),
  31. l10n.get('hrPolicy'),
  32. l10n.get('holidayActivity'),
  33. l10n.get('draft'),
  34. ]
  35. : [
  36. l10n.get('all'),
  37. l10n.get('noticeAnnouncement'),
  38. l10n.get('hrPolicy'),
  39. l10n.get('holidayActivity'),
  40. ];
  41. @override
  42. void initState() {
  43. super.initState();
  44. final isAdmin = ref.read(isAdminProvider);
  45. _tabCtrl = TabController(length: isAdmin ? 5 : 4, vsync: this);
  46. _tabCtrl.addListener(_onTabChanged);
  47. }
  48. void _onTabChanged() {
  49. if (!_tabCtrl.indexIsChanging) {
  50. ref.read(announcementTabProvider.notifier).state = _tabCtrl.index;
  51. }
  52. }
  53. @override
  54. void dispose() {
  55. _tabCtrl.dispose();
  56. super.dispose();
  57. }
  58. @override
  59. Widget build(BuildContext context) {
  60. final isAdmin = ref.watch(isAdminProvider);
  61. final l10n = AppLocalizations.of(context);
  62. final tabs = _getTabLabels(isAdmin, l10n);
  63. final tabIndex = ref.watch(announcementTabProvider);
  64. final r = ResponsiveHelper.of(context);
  65. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  66. // Handle TabController recreation when tab count changes (isAdmin toggle)
  67. if (_tabCtrl.length != tabs.length) {
  68. WidgetsBinding.instance.addPostFrameCallback((_) {
  69. if (!mounted) return;
  70. final newIdx = tabIndex >= tabs.length ? 0 : tabIndex;
  71. _tabCtrl.dispose();
  72. _tabCtrl = TabController(
  73. length: tabs.length,
  74. vsync: this,
  75. initialIndex: newIdx,
  76. );
  77. _tabCtrl.addListener(_onTabChanged);
  78. setState(() {});
  79. });
  80. // Render a simplified view during this frame to avoid length mismatch
  81. return Center(
  82. child: ConstrainedBox(
  83. constraints: BoxConstraints(maxWidth: r.listMaxWidth),
  84. child: Column(
  85. children: [
  86. Container(
  87. color: colors.bgCard,
  88. padding: const EdgeInsets.symmetric(horizontal: 8),
  89. child: TDTabBar(
  90. tabs: tabs.map((l) => TDTab(text: l)).toList(),
  91. isScrollable: true,
  92. labelColor: colors.primary,
  93. unselectedLabelColor: colors.textSecondary,
  94. outlineType: TDTabBarOutlineType.filled,
  95. showIndicator: true,
  96. indicatorColor: colors.primary,
  97. indicatorHeight: 3,
  98. dividerHeight: 0,
  99. labelPadding: const EdgeInsets.symmetric(horizontal: 12),
  100. ),
  101. ),
  102. const Expanded(child: SizedBox.shrink()),
  103. ],
  104. ),
  105. ),
  106. );
  107. }
  108. // Sync TabController with external changes
  109. if (_tabCtrl.index != tabIndex && !_tabCtrl.indexIsChanging) {
  110. WidgetsBinding.instance.addPostFrameCallback((_) {
  111. if (mounted) _tabCtrl.animateTo(tabIndex);
  112. });
  113. }
  114. setNavBarTitle(context, ref, NavBarConfig(
  115. title: l10n.get('announcementList'),
  116. showBack: true,
  117. onBack: () => context.pop(),
  118. ));
  119. return Center(
  120. child: ConstrainedBox(
  121. constraints: BoxConstraints(maxWidth: r.listMaxWidth),
  122. child: Column(
  123. children: [
  124. Container(
  125. color: colors.bgCard,
  126. padding: EdgeInsets.zero,
  127. child: TDSearchBar(
  128. placeHolder: l10n.get('searchAnnouncement'),
  129. needCancel: true,
  130. style: TDSearchStyle.round,
  131. ),
  132. ),
  133. Container(
  134. color: colors.bgCard,
  135. padding: const EdgeInsets.symmetric(horizontal: 8),
  136. child: TDTabBar(
  137. tabs: tabs.map((l) => TDTab(text: l)).toList(),
  138. controller: _tabCtrl,
  139. isScrollable: true,
  140. labelColor: colors.primary,
  141. unselectedLabelColor: colors.textSecondary,
  142. outlineType: TDTabBarOutlineType.filled,
  143. showIndicator: true,
  144. indicatorColor: colors.primary,
  145. indicatorHeight: 3,
  146. dividerHeight: 0,
  147. labelPadding: const EdgeInsets.symmetric(horizontal: 12),
  148. onTap: (index) {
  149. ref.read(announcementTabProvider.notifier).state = index;
  150. },
  151. ),
  152. ),
  153. Expanded(
  154. child: Container(
  155. color: colors.bgPage,
  156. child: TabBarView(
  157. controller: _tabCtrl,
  158. children: List.generate(tabs.length, (tabIdx) {
  159. return _AnnouncementTabContent(tabIndex: tabIdx);
  160. }),
  161. ),
  162. ),
  163. ),
  164. ],
  165. ),
  166. ),
  167. );
  168. }
  169. }
  170. class _AnnouncementTabContent extends ConsumerWidget {
  171. final int tabIndex;
  172. const _AnnouncementTabContent({required this.tabIndex});
  173. @override
  174. Widget build(BuildContext context, WidgetRef ref) {
  175. final itemsAsync = ref.watch(filteredAnnouncementsProvider(tabIndex));
  176. if (itemsAsync.isLoading && !itemsAsync.hasValue) {
  177. return SkeletonLoadingList(
  178. cardBuilder: () => const SkeletonAnnouncementCard(),
  179. );
  180. }
  181. return EasyRefresh(
  182. header: TDRefreshHeader(),
  183. onRefresh: () async {
  184. ref.read(announcementRefreshProvider.notifier).state++;
  185. },
  186. child: _buildContent(itemsAsync, context, ref),
  187. );
  188. }
  189. Widget _buildContent(
  190. AsyncValue<List<AnnouncementModel>> itemsAsync,
  191. BuildContext context,
  192. WidgetRef ref,
  193. ) {
  194. final l10n = AppLocalizations.of(context);
  195. if (itemsAsync.isReloading) {
  196. final oldItems = itemsAsync.valueOrNull ?? [];
  197. if (oldItems.isEmpty) {
  198. return ListView(
  199. children: [
  200. const SizedBox(height: 120),
  201. EmptyState(message: l10n.get('noAnnouncements')),
  202. ],
  203. );
  204. }
  205. return ListView.builder(
  206. padding: const EdgeInsets.symmetric(vertical: 8),
  207. itemCount: oldItems.length,
  208. itemBuilder: (_, i) => _buildAnnouncementCard(context, oldItems[i]),
  209. );
  210. }
  211. if (itemsAsync.hasError) {
  212. return ListView(
  213. children: [
  214. const SizedBox(height: 120),
  215. EmptyState(message: l10n.get('loadFailed')),
  216. ],
  217. );
  218. }
  219. final items = itemsAsync.requireValue;
  220. if (items.isEmpty) {
  221. return ListView(
  222. children: [
  223. const SizedBox(height: 120),
  224. EmptyState(message: l10n.get('noAnnouncements')),
  225. ],
  226. );
  227. }
  228. return ListView.builder(
  229. padding: const EdgeInsets.symmetric(vertical: 8),
  230. itemCount: items.length + 1,
  231. itemBuilder: (_, i) {
  232. if (i == items.length) return ListFooter(itemCount: items.length);
  233. return _buildAnnouncementCard(context, items[i]);
  234. },
  235. );
  236. }
  237. Widget _buildAnnouncementCard(BuildContext context, AnnouncementModel item) {
  238. final l10n = AppLocalizations.of(context);
  239. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  240. final expired = item.isExpired;
  241. return Padding(
  242. padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
  243. child: GestureDetector(
  244. onTap: () => context.push('/announcement/detail/${item.id}'),
  245. child: AnimatedContainer(
  246. duration: const Duration(milliseconds: 200),
  247. padding: const EdgeInsets.all(12),
  248. decoration: BoxDecoration(
  249. borderRadius: BorderRadius.circular(8),
  250. color: expired ? colors.bgDisabled : colors.bgCard,
  251. ),
  252. child: Column(
  253. crossAxisAlignment: CrossAxisAlignment.start,
  254. children: [
  255. // 标题行
  256. Row(
  257. children: [
  258. // 置顶标记
  259. if (item.isTop)
  260. Container(
  261. margin: const EdgeInsets.only(right: 6),
  262. padding: const EdgeInsets.symmetric(
  263. horizontal: 4,
  264. vertical: 1,
  265. ),
  266. decoration: BoxDecoration(
  267. color: colors.danger,
  268. borderRadius: BorderRadius.circular(2),
  269. ),
  270. child: Text(
  271. l10n.get('pinTopTag'),
  272. style: const TextStyle(
  273. fontSize: 10,
  274. color: Colors.white,
  275. ),
  276. ),
  277. ),
  278. // 标题
  279. Expanded(
  280. child: Text(
  281. item.title,
  282. maxLines: 1,
  283. overflow: TextOverflow.ellipsis,
  284. style: TextStyle(
  285. fontSize: 15,
  286. fontWeight: FontWeight.w600,
  287. color: expired
  288. ? colors.textPlaceholder
  289. : colors.textPrimary,
  290. decoration: expired ? TextDecoration.lineThrough : null,
  291. ),
  292. ),
  293. ),
  294. // 已过期标记
  295. if (expired)
  296. Container(
  297. margin: const EdgeInsets.only(left: 6),
  298. padding: const EdgeInsets.symmetric(
  299. horizontal: 6,
  300. vertical: 2,
  301. ),
  302. decoration: BoxDecoration(
  303. color: colors.bgPage,
  304. borderRadius: BorderRadius.circular(3),
  305. ),
  306. child: Text(
  307. l10n.get('expired'),
  308. style: TextStyle(
  309. fontSize: 10,
  310. color: colors.textPlaceholder,
  311. ),
  312. ),
  313. ),
  314. // 未读红点
  315. if (!item.isRead && !expired)
  316. Container(
  317. margin: const EdgeInsets.only(left: 6),
  318. width: 8,
  319. height: 8,
  320. decoration: BoxDecoration(
  321. color: colors.danger,
  322. shape: BoxShape.circle,
  323. ),
  324. ),
  325. ],
  326. ),
  327. const SizedBox(height: 8),
  328. // 元信息行
  329. Row(
  330. mainAxisAlignment: MainAxisAlignment.spaceBetween,
  331. children: [
  332. Row(
  333. children: [
  334. _buildTypeTag(context, item.typeLabel, l10n),
  335. const SizedBox(width: 8),
  336. Text(
  337. item.publisherName,
  338. style: TextStyle(
  339. fontSize: 12,
  340. color: colors.textSecondary,
  341. ),
  342. ),
  343. ],
  344. ),
  345. Text(
  346. du.DateUtils.formatDateTime(item.publishTime),
  347. style: TextStyle(
  348. fontSize: 12,
  349. color: colors.textPlaceholder,
  350. ),
  351. ),
  352. ],
  353. ),
  354. ],
  355. ),
  356. ),
  357. ),
  358. );
  359. }
  360. Widget _buildTypeTag(
  361. BuildContext context,
  362. String type,
  363. AppLocalizations l10n,
  364. ) {
  365. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  366. Color bgColor;
  367. Color textColor;
  368. switch (type) {
  369. case '人事与制度':
  370. bgColor = colors.successBg;
  371. textColor = colors.success;
  372. break;
  373. case '放假与活动':
  374. bgColor = colors.warningBg;
  375. textColor = colors.warning;
  376. break;
  377. default: // 通知公告
  378. bgColor = colors.primaryLight;
  379. textColor = colors.primary;
  380. }
  381. final displayText = switch (type) {
  382. '人事与制度' => l10n.get('hrPolicy'),
  383. '放假与活动' => l10n.get('holidayActivity'),
  384. _ => l10n.get('noticeAnnouncement'),
  385. };
  386. return Container(
  387. padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
  388. decoration: BoxDecoration(
  389. color: bgColor,
  390. borderRadius: BorderRadius.circular(3),
  391. ),
  392. child: Text(
  393. displayText,
  394. style: TextStyle(fontSize: 11, color: textColor),
  395. ),
  396. );
  397. }
  398. }