app_scaffold.dart 11 KB

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