feat(mine): 重排我的页并新增迷你播放器

lib/pages/mine/widgets/mine_menu.dart

@@ -7,180 +7,13 @@ import '../../../core/theme/app_dimens.dart';
 import '../../../l10n/app_localizations.dart';
 import '../mine_types.dart';
 
-/// 我的页三宫格快捷入口。
-class MineShortcutGrid extends StatelessWidget {
-  const MineShortcutGrid({super.key, required this.onOpen});
+const double _vipRadius = 12;
+const double _vipBadgeSize = 36;
+const double _vipButtonHeight = 34;
 
-  final ValueChanged<MineDestination> onOpen;
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    return Row(
-      children: [
-        Expanded(
-          child: _ShortcutTile(
-            key: const Key('mine-watchlist'),
-            icon: Icons.bookmark_border_rounded,
-            label: l10n.watchlist,
-            onTap: () => onOpen(MineDestination.watchlist),
-          ),
-        ),
-        const SizedBox(width: AppDimens.homeGridGap),
-        Expanded(
-          child: _ShortcutTile(
-            key: const Key('mine-history'),
-            icon: Icons.history_rounded,
-            label: l10n.watchHistory,
-            onTap: () => onOpen(MineDestination.history),
-          ),
-        ),
-        const SizedBox(width: AppDimens.homeGridGap),
-        Expanded(
-          child: _ShortcutTile(
-            key: const Key('mine-downloads'),
-            icon: Icons.download_outlined,
-            label: l10n.downloads,
-            onTap: () => onOpen(MineDestination.downloads),
-          ),
-        ),
-      ],
-    );
-  }
-}
-
-class _ShortcutTile extends StatelessWidget {
-  const _ShortcutTile({
-    super.key,
-    required this.icon,
-    required this.label,
-    required this.onTap,
-  });
-
-  final IconData icon;
-  final String label;
-  final VoidCallback onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      decoration: BoxDecoration(
-        color: AppColors.contentCard,
-        borderRadius: BorderRadius.circular(AppDimens.mineCardRadius),
-        border: Border.all(color: AppColors.contentBorder),
-      ),
-      child: Material(
-        color: AppColors.transparent,
-        borderRadius: BorderRadius.circular(AppDimens.mineCardRadius),
-        clipBehavior: Clip.antiAlias,
-        child: InkWell(
-          onTap: onTap,
-          child: SizedBox(
-            height: 88,
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Icon(icon, color: AppColors.textPrimary, size: 24),
-                const SizedBox(height: AppDimens.spaceSm),
-                Text(
-                  label,
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  style: const TextStyle(
-                    color: AppColors.textPrimary,
-                    fontSize: AppDimens.caption,
-                    fontWeight: FontWeight.w500,
-                  ),
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-/// 金币余额卡。
-class MineWalletCard extends StatelessWidget {
-  const MineWalletCard({
-    super.key,
-    required this.balance,
-    required this.onOpen,
-    required this.onRecharge,
-  });
-
-  final String balance;
-  final VoidCallback onOpen;
-  final VoidCallback onRecharge;
-
-  @override
-  Widget build(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
-    return Container(
-      key: const Key('mine-wallet'),
-      padding: const EdgeInsets.all(AppDimens.cardPadding),
-      decoration: BoxDecoration(
-        color: AppColors.contentCard,
-        borderRadius: BorderRadius.circular(AppDimens.mineCardRadius),
-        border: Border.all(color: AppColors.contentBorder),
-      ),
-      child: Row(
-        children: [
-          const Icon(
-            Icons.toll_outlined,
-            color: AppColors.textSecondary,
-            size: 28,
-          ),
-          const SizedBox(width: AppDimens.spaceMd),
-          Expanded(
-            child: InkWell(
-              onTap: onOpen,
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(
-                    l10n.coinBalance,
-                    style: const TextStyle(
-                      color: AppColors.textSecondary,
-                      fontSize: AppDimens.caption,
-                    ),
-                  ),
-                  const SizedBox(height: 3),
-                  Text(
-                    balance,
-                    style: const TextStyle(
-                      color: AppColors.textPrimary,
-                      fontSize: AppDimens.pageTitle,
-                      fontWeight: FontWeight.w700,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-          TextButton(
-            key: const Key('mine-wallet-recharge'),
-            onPressed: onRecharge,
-            style: TextButton.styleFrom(
-              backgroundColor: AppColors.blue,
-              foregroundColor: AppColors.onPrimary,
-              minimumSize: const Size(64, AppDimens.buttonCompact),
-              shape: RoundedRectangleBorder(
-                borderRadius: BorderRadius.circular(AppDimens.buttonRadius),
-              ),
-            ),
-            child: Text(l10n.topUpWallet),
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-/// 会员权益卡。
-class MineVipCard extends StatelessWidget {
-  const MineVipCard({super.key, required this.onOpen});
+/// 金色会员横幅。
+class MineVipBanner extends StatelessWidget {
+  const MineVipBanner({super.key, required this.onOpen});
 
   final VoidCallback onOpen;
 
@@ -190,30 +23,34 @@ class MineVipCard extends StatelessWidget {
     return Container(
       key: const Key('mine-vip'),
       decoration: BoxDecoration(
-        color: AppColors.contentCard,
-        borderRadius: BorderRadius.circular(AppDimens.mineCardRadius),
-        border: Border.all(color: AppColors.contentBorder),
+        gradient: const LinearGradient(
+          colors: [AppColors.vipGoldStart, AppColors.vipGoldEnd],
+        ),
+        borderRadius: BorderRadius.circular(_vipRadius),
       ),
       child: Material(
         color: AppColors.transparent,
-        borderRadius: BorderRadius.circular(AppDimens.mineCardRadius),
+        borderRadius: BorderRadius.circular(_vipRadius),
         clipBehavior: Clip.antiAlias,
         child: InkWell(
           onTap: onOpen,
           child: Padding(
-            padding: const EdgeInsets.all(AppDimens.cardPadding),
+            padding: const EdgeInsets.symmetric(
+              horizontal: AppDimens.cardPadding,
+              vertical: AppDimens.spaceMd,
+            ),
             child: Row(
               children: [
                 Container(
-                  width: AppDimens.buttonLarge,
-                  height: AppDimens.buttonLarge,
+                  width: _vipBadgeSize,
+                  height: _vipBadgeSize,
                   decoration: const BoxDecoration(
-                    color: AppColors.contentSurface,
+                    color: AppColors.vipBadgeSurface,
                     shape: BoxShape.circle,
                   ),
                   child: const Icon(
                     Icons.workspace_premium_rounded,
-                    color: AppColors.textPrimary,
+                    color: AppColors.onGold,
                     size: 22,
                   ),
                 ),
@@ -223,33 +60,44 @@ class MineVipCard extends StatelessWidget {
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Text(
-                        l10n.vipMembership,
-                        style: const TextStyle(
-                          color: AppColors.textPrimary,
-                          fontSize: AppDimens.mineSectionTitle,
-                          fontWeight: FontWeight.w600,
-                        ),
-                      ),
-                      const SizedBox(height: 3),
-                      Text(
-                        l10n.vipUnlockMessage,
+                        l10n.vipBrandName,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                         style: const TextStyle(
-                          color: AppColors.textSecondary,
+                          color: AppColors.onGold,
+                          fontSize: AppDimens.sectionTitle,
+                          fontWeight: FontWeight.w700,
+                        ),
+                      ),
+                      const SizedBox(height: 2),
+                      Text(
+                        l10n.mineVipSubtitle,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: const TextStyle(
+                          color: AppColors.onGold,
                           fontSize: AppDimens.caption,
                         ),
                       ),
                     ],
                   ),
                 ),
-                Text(
-                  l10n.joinVip,
-                  style: const TextStyle(
-                    color: AppColors.blue,
-                    fontSize: AppDimens.body,
-                    fontWeight: FontWeight.w700,
+                const SizedBox(width: AppDimens.spaceSm),
+                TextButton(
+                  key: const Key('mine-vip-open'),
+                  onPressed: onOpen,
+                  style: TextButton.styleFrom(
+                    minimumSize: const Size(0, _vipButtonHeight),
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: AppDimens.spaceMd,
+                    ),
+                    backgroundColor: AppColors.onGold,
+                    foregroundColor: AppColors.textPrimary,
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(_vipButtonHeight),
+                    ),
                   ),
+                  child: Text(l10n.joinVip),
                 ),
               ],
             ),
@@ -260,7 +108,7 @@ class MineVipCard extends StatelessWidget {
   }
 }
 
-/// 我的页功能菜单。
+/// 「我的」页单列功能菜单。
 class MineMenuList extends StatelessWidget {
   const MineMenuList({
     super.key,
@@ -279,7 +127,7 @@ class MineMenuList extends StatelessWidget {
     return Container(
       key: const Key('mine-menu'),
       decoration: BoxDecoration(
-        color: AppColors.contentCard,
+        color: AppColors.mineCard,
         borderRadius: BorderRadius.circular(AppDimens.mineCardRadius),
         border: Border.all(color: AppColors.contentBorder),
       ),
@@ -290,57 +138,63 @@ class MineMenuList extends StatelessWidget {
         child: Column(
           children: [
             _row(
-              key: const Key('mine-works'),
-              icon: Icons.video_collection_outlined,
-              title: l10n.myWorks,
-              destination: MineDestination.works,
+              key: const Key('mine-wallet'),
+              icon: Icons.account_balance_wallet_outlined,
+              title: l10n.wallet,
+              destination: MineDestination.wallet,
             ),
             _divider(),
             _row(
-              key: const Key('mine-creator-center'),
-              icon: Icons.auto_awesome_rounded,
-              title: l10n.creatorCenter,
-              destination: MineDestination.creatorCenter,
+              key: const Key('mine-downloads'),
+              icon: Icons.download_outlined,
+              title: l10n.offlineDownloads,
+              destination: MineDestination.downloads,
             ),
             _divider(),
             _row(
-              key: const Key('mine-notices'),
-              icon: Icons.notifications_none_rounded,
-              title: l10n.notices,
-              destination: MineDestination.notices,
+              key: const Key('mine-history'),
+              icon: Icons.history_rounded,
+              title: l10n.watchHistory,
+              destination: MineDestination.history,
             ),
             _divider(),
+            _row(
+              key: const Key('mine-watch-preferences'),
+              icon: Icons.tune_rounded,
+              title: l10n.watchPreferences,
+              destination: MineDestination.preferences,
+            ),
+            _divider(),
+            _row(
+              key: const Key('mine-help'),
+              icon: Icons.support_agent_rounded,
+              title: l10n.contactSupport,
+              destination: MineDestination.help,
+            ),
+            _divider(),
+            _languageRow(l10n),
+            _divider(),
             _row(
               key: const Key('mine-settings'),
               icon: Icons.settings_outlined,
               title: l10n.settings,
               destination: MineDestination.settings,
             ),
-            _divider(),
-            _languageRow(context),
-            _divider(),
-            _row(
-              key: const Key('mine-help'),
-              icon: Icons.help_outline_rounded,
-              title: l10n.helpFeedback,
-              destination: MineDestination.help,
-            ),
           ],
         ),
       ),
     );
   }
 
-  Widget _languageRow(BuildContext context) {
-    final l10n = AppLocalizations.of(context)!;
+  Widget _languageRow(AppLocalizations l10n) {
     return ListTile(
       key: const Key('mine-language'),
       minTileHeight: AppDimens.mineRowHeight,
-      contentPadding: const EdgeInsets.symmetric(horizontal: 14),
+      contentPadding: const EdgeInsets.symmetric(horizontal: AppDimens.spaceLg),
       leading: const Icon(
         Icons.language_rounded,
-        color: AppColors.textSecondary,
-        size: 20,
+        color: AppColors.textPrimary,
+        size: AppDimens.mineMenuIcon,
       ),
       title: Text(
         l10n.language,
@@ -360,7 +214,7 @@ class MineMenuList extends StatelessWidget {
               fontSize: AppDimens.caption,
             ),
           ),
-          const SizedBox(width: 4),
+          const SizedBox(width: AppDimens.spaceXs),
           const Icon(
             Icons.chevron_right_rounded,
             color: AppColors.textSecondary,
@@ -381,8 +235,12 @@ class MineMenuList extends StatelessWidget {
     return ListTile(
       key: key,
       minTileHeight: AppDimens.mineRowHeight,
-      contentPadding: const EdgeInsets.symmetric(horizontal: 14),
-      leading: Icon(icon, color: AppColors.textSecondary, size: 20),
+      contentPadding: const EdgeInsets.symmetric(horizontal: AppDimens.spaceLg),
+      leading: Icon(
+        icon,
+        color: AppColors.textPrimary,
+        size: AppDimens.mineMenuIcon,
+      ),
       title: Text(
         title,
         style: const TextStyle(
@@ -403,8 +261,8 @@ class MineMenuList extends StatelessWidget {
   Widget _divider() {
     return const Divider(
       height: 1,
-      indent: 14,
-      endIndent: 14,
+      indent: AppDimens.spaceLg,
+      endIndent: AppDimens.spaceLg,
       color: AppColors.contentSurface,
     );
   }