app_scaffold.dart 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter/services.dart';
  3. import 'package:flutter_riverpod/flutter_riverpod.dart';
  4. import '../../core/theme/app_colors.dart';
  5. import 'package:go_router/go_router.dart';
  6. import 'package:tdesign_flutter/tdesign_flutter.dart';
  7. import '../../core/i18n/app_localizations.dart';
  8. import '../../core/theme/app_colors_extension.dart';
  9. import 'nav_bar_config.dart';
  10. /// 应用级 Scaffold:NavBar + body + 可选 BottomTabBar
  11. ///
  12. /// 替代原来的 AppShell。每个页面自行包裹,无需 ShellRoute。
  13. class AppScaffold extends ConsumerWidget {
  14. final Widget body;
  15. final bool showTabBar;
  16. final bool resizeToAvoidBottomInset;
  17. const AppScaffold({
  18. super.key,
  19. required this.body,
  20. this.showTabBar = false,
  21. this.resizeToAvoidBottomInset = true,
  22. });
  23. bool _isRootTab(String location) {
  24. return location == '/' || location == '/messages' || location == '/profile';
  25. }
  26. NavBarConfig _pageConfig(String location, AppLocalizations l10n, WidgetRef ref) {
  27. // 从 provider 读取页面自定义属性(rightWidget 等),标题由路由决定
  28. final custom = ref.watch(navBarConfigProvider);
  29. final title = _titleForRoute(location, l10n);
  30. if (title == null) return custom;
  31. return NavBarConfig(
  32. title: title,
  33. showBack: custom.showBack,
  34. showRight: custom.showRight,
  35. rightWidget: custom.rightWidget,
  36. leadingIcon: custom.leadingIcon,
  37. onBack: custom.onBack,
  38. );
  39. }
  40. /// 路由 → 标题映射,新增路由只需在此添加一行
  41. String? _titleForRoute(String location, AppLocalizations l10n) {
  42. final path = location.split('?').first;
  43. if (path == '/') return l10n.get('appName');
  44. if (path == '/messages') return l10n.get('tabMessages');
  45. if (path == '/profile') return l10n.get('tabProfile');
  46. // ── 费用 ──
  47. if (path.startsWith('/expense/list')) return l10n.get('expenseList');
  48. if (path.startsWith('/expense/detail')) return l10n.get('expenseDetail');
  49. if (path.startsWith('/expense/create') || path.startsWith('/expense/edit')) return l10n.get('expenseApply');
  50. // ── 费用申请 ──
  51. if (path.startsWith('/expense-apply/list')) return l10n.get('expenseApplyList');
  52. if (path.startsWith('/expense-apply/detail')) return l10n.get('expenseApplyDetail');
  53. if (path.startsWith('/expense-apply/create')) return l10n.get('expenseApplyRequest');
  54. // ── 加班 ──
  55. if (path.startsWith('/overtime/list')) return l10n.get('overtimeList');
  56. if (path.startsWith('/overtime/detail')) return l10n.get('overtimeDetail');
  57. if (path.startsWith('/overtime/create')) return l10n.get('overtimeRequest');
  58. // ── 用车 ──
  59. if (path.startsWith('/vehicle/list')) return l10n.get('vehicleList');
  60. if (path.startsWith('/vehicle/detail')) return l10n.get('vehicleDetail');
  61. if (path.startsWith('/vehicle/create')) return l10n.get('vehicleRequest');
  62. // ── 外勤日志 ──
  63. if (path.startsWith('/outing-log/list')) return l10n.get('outingLogList');
  64. if (path.startsWith('/outing-log/detail')) return l10n.get('outingLogDetail');
  65. if (path.startsWith('/outing-log/create')) return l10n.get('outingLogCreate');
  66. // ── 公告 ──
  67. if (path.startsWith('/announcement/list')) return l10n.get('announcementList');
  68. if (path.startsWith('/announcement/detail')) return l10n.get('announcementDetail');
  69. if (path.startsWith('/announcement/create')) return l10n.get('announcementCreate');
  70. // ── 报表 ──(标题由页面自行设置)
  71. if (path.startsWith('/report/overtime')) return l10n.get('overtimeReport');
  72. if (path.startsWith('/report/vehicle')) return l10n.get('vehicleReport');
  73. if (path.startsWith('/report/outing-log')) return l10n.get('outingLogReport');
  74. // ── 管理 ──
  75. if (path.startsWith('/admin/permissions')) return l10n.get('permissionManagement');
  76. return null; // 未知路由 → 回退到 provider
  77. }
  78. NavBarConfig _rootConfig(String location, AppLocalizations l10n) {
  79. if (location.startsWith('/messages')) {
  80. return NavBarConfig(
  81. title: l10n.get('tabMessages'),
  82. showBack: true,
  83. leadingIcon: Icons.close,
  84. );
  85. }
  86. if (location == '/') {
  87. return NavBarConfig(
  88. title: l10n.get('appName'),
  89. showBack: true,
  90. leadingIcon: Icons.close,
  91. );
  92. }
  93. if (location.startsWith('/profile')) {
  94. return NavBarConfig(
  95. title: l10n.get('tabProfile'),
  96. showBack: true,
  97. leadingIcon: Icons.close,
  98. );
  99. }
  100. return NavBarConfig.home;
  101. }
  102. @override
  103. Widget build(BuildContext context, WidgetRef ref) {
  104. SystemChrome.setSystemUIOverlayStyle(
  105. const SystemUiOverlayStyle(
  106. statusBarColor: Colors.transparent,
  107. statusBarIconBrightness: Brightness.dark,
  108. ),
  109. );
  110. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  111. final l10n = AppLocalizations.of(context);
  112. final location = GoRouterState.of(context).uri.toString();
  113. final config = _isRootTab(location)
  114. ? _rootConfig(location, l10n)
  115. : _pageConfig(location, l10n, ref);
  116. return Scaffold(
  117. resizeToAvoidBottomInset: resizeToAvoidBottomInset,
  118. backgroundColor: colors.bgPage,
  119. body: Column(
  120. crossAxisAlignment: CrossAxisAlignment.stretch,
  121. children: [
  122. _NavBarView(
  123. config: config,
  124. location: location,
  125. onBack: () {
  126. if (_isRootTab(location)) {
  127. SystemNavigator.pop();
  128. } else {
  129. GoRouter.of(context).pop();
  130. }
  131. },
  132. ),
  133. Expanded(child: body),
  134. if (showTabBar)
  135. Container(
  136. color: colors.bgCard,
  137. child: _AppTabBar(location: location),
  138. ),
  139. ],
  140. ),
  141. );
  142. }
  143. }
  144. class _NavBarView extends StatelessWidget {
  145. final NavBarConfig config;
  146. final String location;
  147. final VoidCallback onBack;
  148. const _NavBarView({
  149. required this.config,
  150. required this.location,
  151. required this.onBack,
  152. });
  153. @override
  154. Widget build(BuildContext context) {
  155. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  156. List<TDNavBarItem>? leftItems;
  157. if (config.showBack) {
  158. final icon = config.leadingIcon ?? TDIcons.chevron_left;
  159. leftItems = [
  160. TDNavBarItem(
  161. icon: icon,
  162. iconSize: 22,
  163. iconColor: colors.textPrimary,
  164. action: config.onBack ?? onBack,
  165. ),
  166. ];
  167. }
  168. List<TDNavBarItem>? rightItems;
  169. if (config.showRight && config.rightWidget != null) {
  170. rightItems = [TDNavBarItem(iconWidget: config.rightWidget, iconSize: 22)];
  171. }
  172. return TDNavBar(
  173. title: config.title,
  174. titleColor: colors.textPrimary,
  175. titleFontWeight: FontWeight.w600,
  176. titleFont: Font(size: AppFontSizes.title.toInt(), lineHeight: 26),
  177. backgroundColor: colors.bgCard,
  178. height: 56,
  179. centerTitle: true,
  180. useDefaultBack: false,
  181. screenAdaptation: true,
  182. leftBarItems: leftItems,
  183. rightBarItems: rightItems,
  184. );
  185. }
  186. }
  187. class _AppTabBar extends StatelessWidget {
  188. final String location;
  189. const _AppTabBar({required this.location});
  190. static int tabIndex(String location) {
  191. if (location.startsWith('/messages')) return 0;
  192. if (location == '/' ||
  193. (!location.startsWith('/messages') &&
  194. !location.startsWith('/profile'))) {
  195. return 1;
  196. }
  197. return 2;
  198. }
  199. @override
  200. Widget build(BuildContext context) {
  201. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  202. final l10n = AppLocalizations.of(context);
  203. return LayoutBuilder(
  204. builder: (ctx, constraints) {
  205. if (constraints.maxWidth <= 0) return const SizedBox.shrink();
  206. final bottomPadding = MediaQuery.of(ctx).padding.bottom;
  207. return Padding(
  208. padding: EdgeInsets.only(top: 0, bottom: 8 + bottomPadding),
  209. child: TDBottomTabBar(
  210. TDBottomTabBarBasicType.iconText,
  211. useSafeArea: false,
  212. componentType: TDBottomTabBarComponentType.label,
  213. outlineType: TDBottomTabBarOutlineType.filled,
  214. backgroundColor: colors.bgCard,
  215. dividerColor: Colors.transparent,
  216. selectedBgColor: colors.primaryLight,
  217. unselectedBgColor: Colors.transparent,
  218. currentIndex: tabIndex(location),
  219. navigationTabs: [
  220. TDBottomTabBarTabConfig(
  221. tabText: l10n.get('tabMessages'),
  222. selectedIcon: Icon(
  223. Icons.notifications,
  224. size: 22,
  225. color: colors.primary,
  226. ),
  227. unselectedIcon: Icon(
  228. Icons.notifications_outlined,
  229. size: 22,
  230. color: colors.textSecondary,
  231. ),
  232. selectTabTextStyle: TextStyle(
  233. fontSize: 10,
  234. fontWeight: FontWeight.w600,
  235. color: colors.primary,
  236. ),
  237. unselectTabTextStyle: TextStyle(
  238. fontSize: 10,
  239. color: colors.textSecondary,
  240. ),
  241. onTap: () => context.go('/messages'),
  242. ),
  243. TDBottomTabBarTabConfig(
  244. tabText: l10n.get('tabWorkbench'),
  245. selectedIcon: Icon(
  246. Icons.dashboard,
  247. size: 22,
  248. color: colors.primary,
  249. ),
  250. unselectedIcon: Icon(
  251. Icons.dashboard_outlined,
  252. size: 22,
  253. color: colors.textSecondary,
  254. ),
  255. selectTabTextStyle: TextStyle(
  256. fontSize: 10,
  257. fontWeight: FontWeight.w600,
  258. color: colors.primary,
  259. ),
  260. unselectTabTextStyle: TextStyle(
  261. fontSize: 10,
  262. color: colors.textSecondary,
  263. ),
  264. onTap: () => context.go('/'),
  265. ),
  266. TDBottomTabBarTabConfig(
  267. tabText: l10n.get('tabProfile'),
  268. selectedIcon: Icon(
  269. Icons.person,
  270. size: 22,
  271. color: colors.primary,
  272. ),
  273. unselectedIcon: Icon(
  274. Icons.person_outline,
  275. size: 22,
  276. color: colors.textSecondary,
  277. ),
  278. selectTabTextStyle: TextStyle(
  279. fontSize: 10,
  280. fontWeight: FontWeight.w600,
  281. color: colors.primary,
  282. ),
  283. unselectTabTextStyle: TextStyle(
  284. fontSize: 10,
  285. color: colors.textSecondary,
  286. ),
  287. onTap: () => context.go('/profile'),
  288. ),
  289. ],
  290. ),
  291. );
  292. },
  293. );
  294. }
  295. }