style(ui): 统一页面字号间距与状态样式

lib/pages/mine/mine_view.dart

@@ -14,8 +14,10 @@ import '../../core/data/services/interaction_controller.dart';
 import '../../core/data/services/favorite_controller.dart';
 import '../../core/formatting/error_text.dart';
 import '../../core/widgets/empty_state.dart';
+import '../../core/widgets/app_bottom_nav.dart';
 import '../../core/widgets/remote_image.dart';
 import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_dimens.dart';
 import '../../core/theme/app_theme.dart';
 import '../../l10n/app_localizations.dart';
 import 'mine_binding.dart';
@@ -139,9 +141,9 @@ class _MyPageState extends State<MyPage> {
                     Center(
                       child: Text(
                         l10n.brandMark,
-                        style: TextStyle(
-                          color: Color(0xFFD2CDD0),
-                          fontSize: 10,
+                        style: const TextStyle(
+                          color: AppColors.muted,
+                          fontSize: AppDimens.caption,
                           letterSpacing: 1.3,
                         ),
                       ),
@@ -173,7 +175,10 @@ class _MyPageState extends State<MyPage> {
           const SizedBox(width: 7),
           Text(
             l10n.myListTab,
-            style: const TextStyle(fontSize: 22, fontWeight: FontWeight.w800),
+            style: const TextStyle(
+              fontSize: AppDimens.pageTitle,
+              fontWeight: FontWeight.w800,
+            ),
           ),
           const Spacer(),
           IconButton(
@@ -212,7 +217,7 @@ class _MyPageState extends State<MyPage> {
       l10n.preferencesHeading,
       style: const TextStyle(
         color: AppColors.muted,
-        fontSize: 12,
+        fontSize: AppDimens.caption,
         fontWeight: FontWeight.w800,
         letterSpacing: 1.1,
       ),
@@ -316,10 +321,10 @@ class _MyPageState extends State<MyPage> {
 
   Widget _wallet(AppLocalizations l10n) {
     return Container(
-      padding: const EdgeInsets.all(14),
+      padding: const EdgeInsets.all(AppDimens.cardPadding),
       decoration: BoxDecoration(
         color: AppColors.card,
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -374,7 +379,7 @@ class _MyPageState extends State<MyPage> {
       padding: const EdgeInsets.all(12),
       decoration: BoxDecoration(
         color: AppColors.ink,
-        borderRadius: BorderRadius.circular(14),
+        borderRadius: BorderRadius.circular(AppDimens.cardRadius),
         border: Border.all(color: color.withValues(alpha: 0.45)),
       ),
       child: Column(
@@ -396,7 +401,6 @@ class _MyPageState extends State<MyPage> {
                 foregroundColor: color == AppColors.blue
                     ? Colors.white
                     : AppColors.onGold,
-                visualDensity: VisualDensity.compact,
                 shape: const StadiumBorder(),
               ),
               child: Text(action, maxLines: 1, overflow: TextOverflow.ellipsis),
@@ -417,6 +421,7 @@ class _MyPageState extends State<MyPage> {
           ListTile(
             dense: true,
             visualDensity: VisualDensity.compact,
+            minTileHeight: AppDimens.tapTarget,
             leading: const Icon(
               Icons.card_giftcard_rounded,
               color: AppColors.blueSoft,
@@ -432,6 +437,7 @@ class _MyPageState extends State<MyPage> {
           ListTile(
             dense: true,
             visualDensity: VisualDensity.compact,
+            minTileHeight: AppDimens.tapTarget,
             key: const Key('mine-notices'),
             leading: const Icon(
               Icons.notifications_none_rounded,
@@ -447,6 +453,7 @@ class _MyPageState extends State<MyPage> {
           ListTile(
             dense: true,
             visualDensity: VisualDensity.compact,
+            minTileHeight: AppDimens.tapTarget,
             leading: const Icon(
               Icons.history_rounded,
               color: AppColors.blueSoft,
@@ -461,6 +468,7 @@ class _MyPageState extends State<MyPage> {
           ListTile(
             dense: true,
             visualDensity: VisualDensity.compact,
+            minTileHeight: AppDimens.tapTarget,
             leading: const Icon(
               Icons.favorite_outline_rounded,
               color: AppColors.blueSoft,
@@ -475,6 +483,7 @@ class _MyPageState extends State<MyPage> {
           ListTile(
             dense: true,
             visualDensity: VisualDensity.compact,
+            minTileHeight: AppDimens.tapTarget,
             leading: const Icon(
               Icons.download_outlined,
               color: AppColors.blueSoft,
@@ -489,6 +498,7 @@ class _MyPageState extends State<MyPage> {
           ListTile(
             dense: true,
             visualDensity: VisualDensity.compact,
+            minTileHeight: AppDimens.tapTarget,
             leading: const Icon(
               Icons.settings_rounded,
               color: AppColors.blueSoft,
@@ -534,30 +544,36 @@ class _MyPageState extends State<MyPage> {
           child: Row(
             children: [
               for (var index = 0; index < tabs.length; index++) ...[
-                InkWell(
-                  onTap: () {
-                    logic.selectSection(index);
-                    // 打开收藏页签时以服务端为准刷新一次（多设备/多入口都能对齐）
-                    if (index == 1) unawaited(favorites.load());
-                  },
-                  borderRadius: BorderRadius.circular(20),
-                  child: Container(
-                    padding: const EdgeInsets.symmetric(
-                      horizontal: 14,
-                      vertical: 8,
-                    ),
-                    decoration: BoxDecoration(
-                      color: logic.section == index
-                          ? AppColors.blue
-                          : AppColors.raised,
-                      borderRadius: BorderRadius.circular(20),
-                    ),
-                    child: Text(
-                      tabs[index],
-                      style: const TextStyle(
-                        color: Colors.white,
-                        fontSize: 14,
-                        fontWeight: FontWeight.w700,
+                Semantics(
+                  selected: logic.section == index,
+                  button: true,
+                  child: InkWell(
+                    onTap: () {
+                      logic.selectSection(index);
+                      // 打开收藏页签时以服务端为准刷新一次（多设备/多入口都能对齐）
+                      if (index == 1) unawaited(favorites.load());
+                    },
+                    borderRadius: BorderRadius.circular(AppDimens.pillRadius),
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 14,
+                        vertical: 8,
+                      ),
+                      decoration: BoxDecoration(
+                        color: logic.section == index
+                            ? AppColors.blue
+                            : AppColors.raised,
+                        borderRadius: BorderRadius.circular(
+                          AppDimens.pillRadius,
+                        ),
+                      ),
+                      child: Text(
+                        tabs[index],
+                        style: const TextStyle(
+                          color: Colors.white,
+                          fontSize: AppDimens.body,
+                          fontWeight: FontWeight.w700,
+                        ),
                       ),
                     ),
                   ),
@@ -581,14 +597,14 @@ class _MyPageState extends State<MyPage> {
                       selected: logic.filter == index,
                       onSelected: (_) => logic.selectFilter(index),
                       showCheckmark: false,
-                      visualDensity: VisualDensity.compact,
+                      materialTapTargetSize: MaterialTapTargetSize.padded,
                       backgroundColor: AppColors.raised,
                       selectedColor: AppColors.blue,
                       labelStyle: TextStyle(
                         color: logic.filter == index
                             ? Colors.white
-                            : const Color(0xFFD5CED0),
-                        fontSize: 11,
+                            : AppColors.muted,
+                        fontSize: AppDimens.caption,
                         fontWeight: FontWeight.w700,
                       ),
                       side: BorderSide.none,
@@ -606,12 +622,12 @@ class _MyPageState extends State<MyPage> {
               embedded: widget.embedded,
               onAction: widget.onAction,
             ),
-            borderRadius: BorderRadius.circular(12),
+            borderRadius: BorderRadius.circular(AppDimens.innerRadius),
             child: Container(
-              padding: const EdgeInsets.all(9),
+              padding: const EdgeInsets.all(AppDimens.innerPadding),
               decoration: BoxDecoration(
                 color: AppColors.card,
-                borderRadius: BorderRadius.circular(12),
+                borderRadius: BorderRadius.circular(AppDimens.innerRadius),
               ),
               child: Row(
                 children: [
@@ -626,7 +642,7 @@ class _MyPageState extends State<MyPage> {
                           maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                           style: const TextStyle(
-                            fontSize: 15,
+                            fontSize: AppDimens.listTitle,
                             fontWeight: FontWeight.w700,
                           ),
                         ),
@@ -634,8 +650,8 @@ class _MyPageState extends State<MyPage> {
                         Text(
                           l10n.dramaTag,
                           style: const TextStyle(
-                            color: Color(0xFFE6E1E3),
-                            fontSize: 12,
+                            color: AppColors.cream,
+                            fontSize: AppDimens.caption,
                           ),
                         ),
                         const SizedBox(height: 32),
@@ -645,7 +661,7 @@ class _MyPageState extends State<MyPage> {
                           overflow: TextOverflow.ellipsis,
                           style: const TextStyle(
                             color: AppColors.blueSoft,
-                            fontSize: 10,
+                            fontSize: AppDimens.caption,
                           ),
                         ),
                       ],
@@ -703,7 +719,7 @@ class _MyPageState extends State<MyPage> {
             l10n.history,
             style: const TextStyle(
               color: Colors.white,
-              fontSize: 14,
+              fontSize: AppDimens.body,
               fontWeight: FontWeight.w700,
             ),
           ),
@@ -714,7 +730,7 @@ class _MyPageState extends State<MyPage> {
                 Expanded(
                   child: Text(
                     l10n.progressError,
-                    style: const TextStyle(color: Color(0xFFE6E1E3)),
+                    style: const TextStyle(color: AppColors.cream),
                   ),
                 ),
                 TextButton(
@@ -740,7 +756,7 @@ class _MyPageState extends State<MyPage> {
                 Expanded(
                   child: Text(
                     errorText(l10n, logic.recentError, l10n.progressError),
-                    style: const TextStyle(color: Color(0xFFE6E1E3)),
+                    style: const TextStyle(color: AppColors.cream),
                   ),
                 ),
                 TextButton(
@@ -794,17 +810,17 @@ class _MyPageState extends State<MyPage> {
         );
       }
     },
-    borderRadius: BorderRadius.circular(12),
+    borderRadius: BorderRadius.circular(AppDimens.innerRadius),
     child: Container(
-      padding: const EdgeInsets.all(9),
+      padding: const EdgeInsets.all(AppDimens.innerPadding),
       decoration: BoxDecoration(
         color: AppColors.card,
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(AppDimens.innerRadius),
       ),
       child: Row(
         children: [
           ClipRRect(
-            borderRadius: BorderRadius.circular(8),
+            borderRadius: BorderRadius.circular(AppDimens.innerRadius),
             child: RemoteImage(drama.posterUrl, width: 74, height: 103),
           ),
           const SizedBox(width: 11),
@@ -817,7 +833,7 @@ class _MyPageState extends State<MyPage> {
                   maxLines: 2,
                   overflow: TextOverflow.ellipsis,
                   style: const TextStyle(
-                    fontSize: 15,
+                    fontSize: AppDimens.listTitle,
                     fontWeight: FontWeight.w700,
                   ),
                 ),
@@ -825,56 +841,54 @@ class _MyPageState extends State<MyPage> {
                 Text(
                   l10n.episodeCount(drama.episodeCount),
                   style: const TextStyle(
-                    color: Color(0xFFE6E1E3),
-                    fontSize: 12,
+                    color: AppColors.cream,
+                    fontSize: AppDimens.caption,
                   ),
                 ),
               ],
             ),
           ),
-          const Icon(Icons.chevron_right_rounded, color: Color(0xFFF2EEEF)),
+          const Icon(Icons.chevron_right_rounded, color: AppColors.cream),
         ],
       ),
     ),
   );
 
-  Widget _bottomNav(AppLocalizations l10n) => Container(
-    height: 63,
-    decoration: const BoxDecoration(
-      color: AppColors.bar,
-      border: Border(top: BorderSide(color: AppColors.outlineVariantDark)),
-    ),
-    child: Row(
-      mainAxisAlignment: MainAxisAlignment.spaceAround,
-      children: [
-        _NavItem(
-          icon: Icons.play_circle_outline_rounded,
-          label: l10n.homeTab,
-          onTap: () => logic.act(
-            context,
-            MyPageAction.home,
-            embedded: widget.embedded,
-            onAction: widget.onAction,
-          ),
+  Widget _bottomNav(AppLocalizations l10n) => AppBottomNav(
+    items: [
+      AppBottomNavItem(
+        tabKey: const Key('mine-nav-home'),
+        icon: Icons.play_circle_outline_rounded,
+        selectedIcon: Icons.play_circle_fill_rounded,
+        label: l10n.homeTab,
+        onTap: () => logic.act(
+          context,
+          MyPageAction.home,
+          embedded: widget.embedded,
+          onAction: widget.onAction,
         ),
-        _NavItem(
-          icon: Icons.explore_outlined,
-          label: l10n.discoverTab,
-          onTap: () => logic.act(
-            context,
-            MyPageAction.discover,
-            embedded: widget.embedded,
-            onAction: widget.onAction,
-          ),
+      ),
+      AppBottomNavItem(
+        tabKey: const Key('mine-nav-discover'),
+        icon: Icons.explore_outlined,
+        selectedIcon: Icons.explore_rounded,
+        label: l10n.discoverTab,
+        onTap: () => logic.act(
+          context,
+          MyPageAction.discover,
+          embedded: widget.embedded,
+          onAction: widget.onAction,
         ),
-        _NavItem(
-          icon: Icons.video_library_outlined,
-          label: l10n.myTab,
-          selected: true,
-          onTap: () {},
-        ),
-      ],
-    ),
+      ),
+      AppBottomNavItem(
+        tabKey: const Key('mine-nav-current'),
+        icon: Icons.video_library_outlined,
+        selectedIcon: Icons.video_library_rounded,
+        label: l10n.myTab,
+        selected: true,
+        onTap: () {},
+      ),
+    ],
   );
 
   Widget _poster({required double width, required double height}) => ClipRRect(
@@ -883,42 +897,6 @@ class _MyPageState extends State<MyPage> {
   );
 }
 
-class _NavItem extends StatelessWidget {
-  const _NavItem({
-    required this.icon,
-    required this.label,
-    required this.onTap,
-    this.selected = false,
-  });
-
-  final IconData icon;
-  final String label;
-  final VoidCallback onTap;
-  final bool selected;
-
-  @override
-  Widget build(BuildContext context) => InkWell(
-    onTap: onTap,
-    child: SizedBox(
-      width: 72,
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Icon(icon, size: 21, color: selected ? _accent : AppColors.muted),
-          Text(
-            label,
-            style: TextStyle(
-              color: selected ? _accent : AppColors.muted,
-              fontSize: 10,
-              fontWeight: FontWeight.w700,
-            ),
-          ),
-        ],
-      ),
-    ),
-  );
-}
-
 String _clock(Duration duration) {
   final seconds = duration.inSeconds;
   return '${(seconds ~/ 60).toString().padLeft(2, '0')}:${(seconds % 60).toString().padLeft(2, '0')}';