app_scaffold.dart 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  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/expense-apply')) return l10n.get('expenseApplyReport');
  72. if (path.startsWith('/report/expense')) return l10n.get('expenseReport');
  73. if (path.startsWith('/report/overtime')) return l10n.get('overtimeReport');
  74. if (path.startsWith('/report/vehicle')) return l10n.get('vehicleReport');
  75. if (path.startsWith('/report/outing-log')) return l10n.get('outingLogReport');
  76. // ── 管理 ──
  77. if (path.startsWith('/admin/permissions')) return l10n.get('permissionManagement');
  78. return null; // 未知路由 → 回退到 provider
  79. }
  80. NavBarConfig _rootConfig(String location, AppLocalizations l10n) {
  81. if (location.startsWith('/messages')) {
  82. return NavBarConfig(
  83. title: l10n.get('tabMessages'),
  84. showBack: true,
  85. leadingIcon: Icons.close,
  86. );
  87. }
  88. if (location == '/') {
  89. return NavBarConfig(
  90. title: l10n.get('appName'),
  91. showBack: true,
  92. leadingIcon: Icons.close,
  93. );
  94. }
  95. if (location.startsWith('/profile')) {
  96. return NavBarConfig(
  97. title: l10n.get('tabProfile'),
  98. showBack: true,
  99. leadingIcon: Icons.close,
  100. );
  101. }
  102. return NavBarConfig.home;
  103. }
  104. @override
  105. Widget build(BuildContext context, WidgetRef ref) {
  106. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  107. final l10n = AppLocalizations.of(context);
  108. final location = GoRouterState.of(context).uri.toString();
  109. final config = _isRootTab(location)
  110. ? _rootConfig(location, l10n)
  111. : _pageConfig(location, l10n, ref);
  112. return Scaffold(
  113. resizeToAvoidBottomInset: resizeToAvoidBottomInset,
  114. backgroundColor: colors.bgPage,
  115. body: Column(
  116. crossAxisAlignment: CrossAxisAlignment.stretch,
  117. children: [
  118. _NavBarView(
  119. config: config,
  120. location: location,
  121. onBack: () {
  122. if (_isRootTab(location)) {
  123. SystemNavigator.pop();
  124. } else {
  125. GoRouter.of(context).pop();
  126. }
  127. },
  128. ),
  129. Expanded(child: body),
  130. if (showTabBar)
  131. Container(
  132. color: colors.bgCard,
  133. child: _AppTabBar(location: location),
  134. ),
  135. ],
  136. ),
  137. );
  138. }
  139. }
  140. class _NavBarView extends StatelessWidget {
  141. final NavBarConfig config;
  142. final String location;
  143. final VoidCallback onBack;
  144. const _NavBarView({
  145. required this.config,
  146. required this.location,
  147. required this.onBack,
  148. });
  149. @override
  150. Widget build(BuildContext context) {
  151. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  152. List<TDNavBarItem>? leftItems;
  153. if (config.showBack) {
  154. final icon = config.leadingIcon ?? TDIcons.chevron_left;
  155. leftItems = [
  156. TDNavBarItem(
  157. icon: icon,
  158. iconSize: 22,
  159. iconColor: colors.textPrimary,
  160. action: config.onBack ?? onBack,
  161. ),
  162. ];
  163. }
  164. List<TDNavBarItem>? rightItems;
  165. if (config.showRight && config.rightWidget != null) {
  166. rightItems = [TDNavBarItem(iconWidget: config.rightWidget, iconSize: 22)];
  167. }
  168. return TDNavBar(
  169. title: config.title,
  170. titleColor: colors.textPrimary,
  171. titleFontWeight: FontWeight.w600,
  172. titleFont: Font(size: AppFontSizes.title.toInt(), lineHeight: 26),
  173. backgroundColor: colors.bgCard,
  174. height: 56,
  175. centerTitle: true,
  176. useDefaultBack: false,
  177. screenAdaptation: true,
  178. leftBarItems: leftItems,
  179. rightBarItems: rightItems,
  180. );
  181. }
  182. }
  183. class _AppTabBar extends StatelessWidget {
  184. final String location;
  185. const _AppTabBar({required this.location});
  186. static int tabIndex(String location) {
  187. if (location.startsWith('/messages')) return 0;
  188. if (location == '/' ||
  189. (!location.startsWith('/messages') &&
  190. !location.startsWith('/profile'))) {
  191. return 1;
  192. }
  193. return 2;
  194. }
  195. @override
  196. Widget build(BuildContext context) {
  197. final colors = Theme.of(context).extension<AppColorsExtension>()!;
  198. final l10n = AppLocalizations.of(context);
  199. return LayoutBuilder(
  200. builder: (ctx, constraints) {
  201. if (constraints.maxWidth <= 0) return const SizedBox.shrink();
  202. final bottomPadding = MediaQuery.of(ctx).padding.bottom;
  203. return Padding(
  204. padding: EdgeInsets.only(top: 0, bottom: 8 + bottomPadding),
  205. child: TDBottomTabBar(
  206. TDBottomTabBarBasicType.iconText,
  207. useSafeArea: false,
  208. componentType: TDBottomTabBarComponentType.label,
  209. outlineType: TDBottomTabBarOutlineType.filled,
  210. backgroundColor: colors.bgCard,
  211. dividerColor: Colors.transparent,
  212. selectedBgColor: colors.primaryLight,
  213. unselectedBgColor: Colors.transparent,
  214. currentIndex: tabIndex(location),
  215. navigationTabs: [
  216. TDBottomTabBarTabConfig(
  217. tabText: l10n.get('tabMessages'),
  218. selectedIcon: Icon(
  219. Icons.notifications,
  220. size: 22,
  221. color: colors.primary,
  222. ),
  223. unselectedIcon: Icon(
  224. Icons.notifications_outlined,
  225. size: 22,
  226. color: colors.textSecondary,
  227. ),
  228. selectTabTextStyle: TextStyle(
  229. fontSize: 10,
  230. fontWeight: FontWeight.w600,
  231. color: colors.primary,
  232. ),
  233. unselectTabTextStyle: TextStyle(
  234. fontSize: 10,
  235. color: colors.textSecondary,
  236. ),
  237. onTap: () => context.go('/messages'),
  238. ),
  239. TDBottomTabBarTabConfig(
  240. tabText: l10n.get('tabWorkbench'),
  241. selectedIcon: Icon(
  242. Icons.dashboard,
  243. size: 22,
  244. color: colors.primary,
  245. ),
  246. unselectedIcon: Icon(
  247. Icons.dashboard_outlined,
  248. size: 22,
  249. color: colors.textSecondary,
  250. ),
  251. selectTabTextStyle: TextStyle(
  252. fontSize: 10,
  253. fontWeight: FontWeight.w600,
  254. color: colors.primary,
  255. ),
  256. unselectTabTextStyle: TextStyle(
  257. fontSize: 10,
  258. color: colors.textSecondary,
  259. ),
  260. onTap: () => context.go('/'),
  261. ),
  262. TDBottomTabBarTabConfig(
  263. tabText: l10n.get('tabProfile'),
  264. selectedIcon: Icon(
  265. Icons.person,
  266. size: 22,
  267. color: colors.primary,
  268. ),
  269. unselectedIcon: Icon(
  270. Icons.person_outline,
  271. size: 22,
  272. color: colors.textSecondary,
  273. ),
  274. selectTabTextStyle: TextStyle(
  275. fontSize: 10,
  276. fontWeight: FontWeight.w600,
  277. color: colors.primary,
  278. ),
  279. unselectTabTextStyle: TextStyle(
  280. fontSize: 10,
  281. color: colors.textSecondary,
  282. ),
  283. onTap: () => context.go('/profile'),
  284. ),
  285. ],
  286. ),
  287. );
  288. },
  289. );
  290. }
  291. }