1.3.21.3.2

lib/presentation/pages/shell/app_shell.dart

@@ -1,21 +1,44 @@
-import 'package:animations/animations.dart';
 import 'package:cloudreve4_flutter/presentation/providers/auth_provider.dart';
 import 'package:cloudreve4_flutter/presentation/providers/download_manager_provider.dart';
 import 'package:cloudreve4_flutter/presentation/providers/file_manager_provider.dart';
 import 'package:cloudreve4_flutter/presentation/providers/navigation_provider.dart';
+import 'package:cloudreve4_flutter/presentation/providers/sync_provider.dart';
 import 'package:cloudreve4_flutter/presentation/providers/upload_manager_provider.dart';
 import 'package:cloudreve4_flutter/presentation/widgets/gesture_handler_mixin.dart';
 import 'package:cloudreve4_flutter/presentation/widgets/glassmorphism_container.dart';
 import 'package:cloudreve4_flutter/presentation/widgets/user_avatar.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:lucide_icons/lucide_icons.dart';
 import 'package:provider/provider.dart';
 import '../../../router/app_router.dart';
 import '../files/files_page.dart';
 import '../overview/overview_page.dart';
+import '../sync/sync_page.dart';
 import '../tasks/tasks_page.dart';
 import '../profile/profile_page.dart';
 
+class _ShellPageSlot extends StatefulWidget {
+  final Widget child;
+
+  const _ShellPageSlot({required this.child});
+
+  @override
+  State<_ShellPageSlot> createState() => _ShellPageSlotState();
+}
+
+class _ShellPageSlotState extends State<_ShellPageSlot>
+    with AutomaticKeepAliveClientMixin {
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    return widget.child;
+  }
+}
+
 class AppShell extends StatefulWidget {
   const AppShell({super.key});
 
@@ -23,7 +46,52 @@ class AppShell extends StatefulWidget {
   State<AppShell> createState() => _AppShellState();
 }
 
-class _AppShellState extends State<AppShell> with GestureHandlerMixin {
+class _AppShellState extends State<AppShell>
+    with GestureHandlerMixin, TickerProviderStateMixin {
+  final Set<int> _visitedPageIndexes = <int>{0};
+  late AnimationController _syncSpinController;
+
+  bool get _showSyncTab =>
+      defaultTargetPlatform != TargetPlatform.android &&
+      defaultTargetPlatform != TargetPlatform.iOS;
+
+  List<Widget> get _pages => _showSyncTab
+      ? [
+          const OverviewPage(),
+          const FilesPage(),
+          const TasksPage(),
+          const SyncPage(),
+          const ProfilePage(),
+        ]
+      : [
+          const OverviewPage(),
+          const FilesPage(),
+          const TasksPage(),
+          const ProfilePage(),
+        ];
+
+  int _clampedIndex(int index) {
+    final maxIndex = _pages.length - 1;
+    if (index < 0) return 0;
+    if (index > maxIndex) return maxIndex;
+    return index;
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _syncSpinController = AnimationController(
+      vsync: this,
+      duration: const Duration(seconds: 2),
+    );
+  }
+
+  @override
+  void dispose() {
+    _syncSpinController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final screenWidth = MediaQuery.of(context).size.width;
@@ -33,12 +101,19 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
       canPop: false,
       onPopInvokedWithResult: (didPop, result) async {
         if (!didPop) {
-          final navProvider = Provider.of<NavigationProvider>(context, listen: false);
-          final fileManager = Provider.of<FileManagerProvider>(context, listen: false);
+          final navProvider = Provider.of<NavigationProvider>(
+            context,
+            listen: false,
+          );
+          final fileManager = Provider.of<FileManagerProvider>(
+            context,
+            listen: false,
+          );
 
           if (navProvider.currentIndex == 1 && fileManager.currentPath != '/') {
             await fileManager.goBack();
-          } else if (navProvider.currentIndex != 0 && navProvider.currentIndex != 1) {
+          } else if (navProvider.currentIndex != 0 &&
+              navProvider.currentIndex != 1) {
             navProvider.setIndex(0);
           } else {
             await checkExitApp(context);
@@ -57,42 +132,74 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
   }
 
   Widget _buildPageContent(BuildContext context, int currentIndex) {
-    const pages = [
-      OverviewPage(),
-      FilesPage(),
-      TasksPage(),
-      ProfilePage(),
-    ];
+    final pages = _pages;
+    final visibleIndex = _clampedIndex(currentIndex);
+    _visitedPageIndexes.add(visibleIndex);
 
-    return PageTransitionSwitcher(
-      duration: const Duration(milliseconds: 300),
-      transitionBuilder: (child, animation, secondaryAnimation) {
-        return SharedAxisTransition(
-          animation: animation,
-          secondaryAnimation: secondaryAnimation,
-          transitionType: SharedAxisTransitionType.horizontal,
-          child: child,
-        );
-      },
-      child: KeyedSubtree(
-        key: ValueKey(currentIndex),
-        child: pages[currentIndex],
+    return RepaintBoundary(
+      child: IndexedStack(
+        index: visibleIndex,
+        children: List.generate(pages.length, (index) {
+          if (!_visitedPageIndexes.contains(index)) {
+            return const SizedBox.shrink();
+          }
+          return _ShellPageSlot(child: pages[index]);
+        }),
       ),
     );
   }
 
-  Widget _buildMobileLayout(BuildContext context, NavigationProvider navProvider) {
+  Widget _buildSyncIcon({required bool isSelected, required double size}) {
+    return Consumer<SyncProvider>(
+      builder: (context, sync, _) {
+        final hasWorkers = sync.activeWorkerCount > 0;
+
+        if (hasWorkers && !_syncSpinController.isAnimating) {
+          _syncSpinController.repeat();
+        } else if (!hasWorkers && _syncSpinController.isAnimating) {
+          _syncSpinController.stop();
+          _syncSpinController.value = 0;
+        }
+
+        final icon = Icon(
+          LucideIcons.refreshCw,
+          size: size,
+          weight: isSelected ? 700 : 400,
+        );
+
+        if (!hasWorkers) return icon;
+
+        return ListenableBuilder(
+          listenable: _syncSpinController,
+          builder: (context, child) {
+            return Transform.rotate(
+              angle: _syncSpinController.value * 2 * 3.14159265,
+              child: child,
+            );
+          },
+          child: icon,
+        );
+      },
+    );
+  }
+
+  Widget _buildMobileLayout(
+    BuildContext context,
+    NavigationProvider navProvider,
+  ) {
     return Scaffold(
       body: _buildPageContent(context, navProvider.currentIndex),
       bottomNavigationBar: GlassmorphismContainer(
         borderRadius: 0,
         child: Consumer2<UploadManagerProvider, DownloadManagerProvider>(
           builder: (context, uploadManager, downloadManager, _) {
-            final activeCount = uploadManager.activeTasks.length + downloadManager.downloadingCount;
+            final activeCount =
+                uploadManager.activeTasks.length +
+                downloadManager.downloadingCount;
 
             return NavigationBar(
               height: 64,
-              selectedIndex: navProvider.currentIndex,
+              selectedIndex: _clampedIndex(navProvider.currentIndex),
               onDestinationSelected: (i) => navProvider.setIndex(i),
               destinations: [
                 const NavigationDestination(
@@ -118,6 +225,30 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
                   ),
                   label: '任务',
                 ),
+                if (_showSyncTab)
+                  NavigationDestination(
+                    icon: Consumer<SyncProvider>(
+                      builder: (context, sync, _) {
+                        final count = sync.activeWorkerCount;
+                        return Badge(
+                          isLabelVisible: count > 0,
+                          label: Text('$count'),
+                          child: _buildSyncIcon(isSelected: false, size: 24),
+                        );
+                      },
+                    ),
+                    selectedIcon: Consumer<SyncProvider>(
+                      builder: (context, sync, _) {
+                        final count = sync.activeWorkerCount;
+                        return Badge(
+                          isLabelVisible: count > 0,
+                          label: Text('$count'),
+                          child: _buildSyncIcon(isSelected: true, size: 24),
+                        );
+                      },
+                    ),
+                    label: '同步',
+                  ),
                 const NavigationDestination(
                   icon: Icon(LucideIcons.user),
                   selectedIcon: Icon(LucideIcons.user, weight: 700),
@@ -131,7 +262,10 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
     );
   }
 
-  Widget _buildDesktopLayout(BuildContext context, NavigationProvider navProvider) {
+  Widget _buildDesktopLayout(
+    BuildContext context,
+    NavigationProvider navProvider,
+  ) {
     final theme = Theme.of(context);
     final authProvider = context.watch<AuthProvider>();
     final user = authProvider.user;
@@ -141,16 +275,16 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
       body: Row(
         children: [
           NavigationRail(
-            selectedIndex: navProvider.currentIndex,
+            selectedIndex: _clampedIndex(navProvider.currentIndex),
             onDestinationSelected: (i) => navProvider.setIndex(i),
             leading: Padding(
               padding: const EdgeInsets.symmetric(vertical: 16),
               child: GestureDetector(
-                onTap: () => navProvider.setIndex(3),
+                onTap: () => navProvider.setIndex(_pages.length - 1),
                 child: Container(
                   decoration: BoxDecoration(
                     shape: BoxShape.circle,
-                    border: navProvider.currentIndex == 3
+                    border: navProvider.currentIndex == _pages.length - 1
                         ? Border.all(
                             color: theme.colorScheme.primary,
                             width: 2.5,
@@ -180,7 +314,9 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
               NavigationRailDestination(
                 icon: Consumer2<UploadManagerProvider, DownloadManagerProvider>(
                   builder: (context, uploadManager, downloadManager, _) {
-                    final activeCount = uploadManager.activeTasks.length + downloadManager.downloadingCount;
+                    final activeCount =
+                        uploadManager.activeTasks.length +
+                        downloadManager.downloadingCount;
                     return Badge(
                       isLabelVisible: activeCount > 0,
                       label: Text('$activeCount'),
@@ -191,6 +327,30 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
                 selectedIcon: const Icon(LucideIcons.listChecks, weight: 700),
                 label: const Text('任务'),
               ),
+              if (_showSyncTab)
+                NavigationRailDestination(
+                  icon: Consumer<SyncProvider>(
+                    builder: (context, sync, _) {
+                      final count = sync.activeWorkerCount;
+                      return Badge(
+                        isLabelVisible: count > 0,
+                        label: Text('$count'),
+                        child: _buildSyncIcon(isSelected: false, size: 24),
+                      );
+                    },
+                  ),
+                  selectedIcon: Consumer<SyncProvider>(
+                    builder: (context, sync, _) {
+                      final count = sync.activeWorkerCount;
+                      return Badge(
+                        isLabelVisible: count > 0,
+                        label: Text('$count'),
+                        child: _buildSyncIcon(isSelected: true, size: 24),
+                      );
+                    },
+                  ),
+                  label: const Text('同步'),
+                ),
               const NavigationRailDestination(
                 icon: Icon(LucideIcons.user),
                 selectedIcon: Icon(LucideIcons.user, weight: 700),
@@ -206,32 +366,38 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
                     context,
                     icon: LucideIcons.share2,
                     label: '我的分享',
-                    onTap: () => Navigator.of(context).pushNamed(RouteNames.share),
+                    onTap: () =>
+                        Navigator.of(context).pushNamed(RouteNames.share),
                   ),
                   _buildSecondaryNavItem(
                     context,
                     icon: LucideIcons.cloud,
                     label: 'WebDAV',
-                    onTap: () => Navigator.of(context).pushNamed(RouteNames.webdav),
+                    onTap: () =>
+                        Navigator.of(context).pushNamed(RouteNames.webdav),
                   ),
                   _buildSecondaryNavItem(
                     context,
                     icon: LucideIcons.download,
                     label: '离线下载',
-                    onTap: () => Navigator.of(context).pushNamed(RouteNames.remoteDownload),
+                    onTap: () => Navigator.of(
+                      context,
+                    ).pushNamed(RouteNames.remoteDownload),
                   ),
                   _buildSecondaryNavItem(
                     context,
                     icon: LucideIcons.trash2,
                     label: '回收站',
-                    onTap: () => Navigator.of(context).pushNamed(RouteNames.recycleBin),
+                    onTap: () =>
+                        Navigator.of(context).pushNamed(RouteNames.recycleBin),
                   ),
                   const Divider(indent: 12, endIndent: 12),
                   _buildSecondaryNavItem(
                     context,
                     icon: LucideIcons.settings,
                     label: '设置',
-                    onTap: () => Navigator.of(context).pushNamed(RouteNames.settings),
+                    onTap: () =>
+                        Navigator.of(context).pushNamed(RouteNames.settings),
                   ),
                   _buildSecondaryNavItem(
                     context,
@@ -245,9 +411,7 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
             ),
           ),
           const VerticalDivider(thickness: 1, width: 1),
-          Expanded(
-            child: _buildPageContent(context, navProvider.currentIndex),
-          ),
+          Expanded(child: _buildPageContent(context, navProvider.currentIndex)),
         ],
       ),
     );
@@ -278,7 +442,10 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
 
   Future<void> _handleLogout(BuildContext context) async {
     final authProvider = Provider.of<AuthProvider>(context, listen: false);
-    final fileManager = Provider.of<FileManagerProvider>(context, listen: false);
+    final fileManager = Provider.of<FileManagerProvider>(
+      context,
+      listen: false,
+    );
 
     final confirmed = await showDialog<bool>(
       context: context,
@@ -302,7 +469,9 @@ class _AppShellState extends State<AppShell> with GestureHandlerMixin {
       await authProvider.logout();
       fileManager.clearFiles();
       if (context.mounted) {
-        Navigator.of(context).pushNamedAndRemoveUntil(RouteNames.login, (route) => false);
+        Navigator.of(
+          context,
+        ).pushNamedAndRemoveUntil(RouteNames.login, (route) => false);
       }
     }
   }