服务端接口优化

todo：待添加影评海报，书评书摘的接口与标签接口

lib/pages/book/book_detail_page.dart

@@ -1,6 +1,7 @@
 import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import '../../widgets/fade_in_local_image.dart';
 import 'package:share_plus/share_plus.dart';
 import 'package:cross_file/cross_file.dart';
 import '../../providers/app_provider.dart';
@@ -188,10 +189,9 @@ class _BookDetailPageState extends State<BookDetailPage> {
   Widget _buildCoverSection(Book book) {
     return SizedBox.expand(
       child: book.coverPath != null && book.coverPath!.isNotEmpty
-          ? Image.file(
-              File(book.coverPath!),
+          ? FadeInLocalImage(
+              path: book.coverPath,
               fit: BoxFit.cover,
-              errorBuilder: (_, __, ___) => _buildCoverPlaceholder(),
             )
           : _buildCoverPlaceholder(),
     );

lib/pages/book/book_form_page.dart

@@ -6,6 +6,7 @@ import 'package:path/path.dart' as p;
 import 'package:provider/provider.dart';
 import 'package:http/http.dart' as http;
 import '../../providers/app_provider.dart';
+import '../../widgets/fade_in_local_image.dart';
 import '../../models/data_models.dart';
 import '../../utils/toast_util.dart';
 import '../../utils/image_path_helper.dart';
@@ -921,10 +922,9 @@ class _BookFormPageState extends State<BookFormPage> {
             ),
             clipBehavior: Clip.antiAlias,
             child: hasCover
-                ? Image.file(
-                    File(_coverPath!),
+                ? FadeInLocalImage(
+                    path: _coverPath,
                     fit: BoxFit.cover,
-                    errorBuilder: (_, __, ___) => _buildCoverPlaceholder(),
                   )
                 : _buildCoverPlaceholder(),
           ),

lib/pages/book/book_share_page.dart

@@ -6,6 +6,7 @@ import 'package:path_provider/path_provider.dart';
 import 'package:share_plus/share_plus.dart';
 import '../../models/data_models.dart';
 import '../../utils/toast_util.dart';
+import '../../widgets/fade_in_local_image.dart';
 
 /// 书籍分享海报页面
 class BookSharePage extends StatefulWidget {
@@ -102,8 +103,8 @@ class _BookSharePageState extends State<BookSharePage> {
           if (hasCover)
             ClipRRect(
               borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
-              child: Image.file(
-                File(book.coverPath!),
+              child: FadeInLocalImage(
+                path: book.coverPath,
                 width: 320,
                 height: 200,
                 fit: BoxFit.cover,

lib/pages/book/book_tab_page.dart

@@ -1,14 +1,15 @@
-import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import '../../models/data_models.dart';
 import '../../providers/app_provider.dart';
 import '../../utils/user_prefs.dart';
 import '../../widgets/book_status_bar.dart';
 import '../../widgets/book_list_item.dart';
 import '../../widgets/animated_star_rating.dart';
 import '../../widgets/shimmer_skeleton.dart';
+import '../../widgets/fade_in_local_image.dart';
 
-/// 阅读标签页
+/// 阅读标签页（分页 + 触底加载）
 class BookTabPage extends StatefulWidget {
   const BookTabPage({super.key});
 
@@ -18,217 +19,215 @@ class BookTabPage extends StatefulWidget {
 
 class _BookTabPageState extends State<BookTabPage> {
   int _layoutStyle = 0;
-  bool _firstLoad = true;
+  final List<Book> _items = [];
+  bool _hasMore = true;
+  bool _isLoading = false;
+  int _offset = 0;
+  int _lastStatusIndex = -1;
+  bool _initialized = false;
+  int _lastDataCount = -1;
+  DateTime? _lastUpdatedAt;
+  late ScrollController _scrollController;
+
+  static const _statusMap = {0: 'read', 1: 'reading', 2: 'want_to_read'};
 
   @override
   void initState() {
     super.initState();
     _layoutStyle = UserPrefs().bookLayoutStyle;
+    _scrollController = ScrollController()..addListener(_onScroll);
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (mounted) setState(() => _firstLoad = false);
+      final provider = context.read<AppProvider>();
+      provider.addListener(_onDataChanged);
+      _lastDataCount = provider.books.length;
+      if (provider.books.isNotEmpty) _lastUpdatedAt = provider.books.first.updatedAt;
+      _loadFirst();
     });
   }
 
   @override
-  Widget build(BuildContext context) {
-    return Column(
-      children: [
-        const BookStatusBar(),
-        Expanded(
-          child: _buildBookList(context),
-        ),
-      ],
-    );
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
   }
 
-  Widget _buildBookList(BuildContext context) {
+  void _onDataChanged() {
+    if (!_initialized || !mounted) return;
+    final provider = context.read<AppProvider>();
+    final count = provider.books.length;
+    final latest = provider.books.isNotEmpty ? provider.books.first.updatedAt : null;
+    if (count != _lastDataCount || latest != _lastUpdatedAt) {
+      _lastDataCount = count;
+      _lastUpdatedAt = latest;
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted) _loadFirst();
+      });
+    }
+  }
+
+  void _onScroll() {
+    if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent - 200) {
+      _loadMore();
+    }
+  }
+
+  Future<void> _loadFirst() async {
+    final provider = context.read<AppProvider>();
+    final statusIdx = provider.bookStatusIndex;
+    _lastStatusIndex = statusIdx;
+    _initialized = true;
+    final status = _statusMap[statusIdx] ?? 'read';
+    setState(() { _isLoading = true; _items.clear(); _offset = 0; _hasMore = true; });
+    final list = await provider.loadBooksPaged(status: status, offset: 0);
+    if (!mounted) return;
+    setState(() { _items.addAll(list); _offset = list.length; _hasMore = list.length >= 20; _isLoading = false; });
+  }
+
+  Future<void> _loadMore() async {
+    if (_isLoading || !_hasMore) return;
+    setState(() => _isLoading = true);
+    final provider = context.read<AppProvider>();
+    final status = _statusMap[provider.bookStatusIndex] ?? 'read';
+    final list = await provider.loadBooksPaged(status: status, offset: _offset);
+    if (!mounted) return;
+    setState(() { _items.addAll(list); _offset += list.length; _hasMore = list.length >= 20; _isLoading = false; });
+  }
+
+  Future<void> _refresh() async {
+    await context.read<AppProvider>().loadBooks();
+    await _loadFirst();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(children: [
+      const BookStatusBar(),
+      Expanded(child: _buildBody(context)),
+    ]);
+  }
+
+  Widget _buildBody(BuildContext context) {
     final colors = Theme.of(context).colorScheme;
-    return Consumer<AppProvider>(
-      builder: (context, provider, child) {
-        final statusMap = {0: 'read', 1: 'reading', 2: 'want_to_read'};
-        final currentStatus = statusMap[provider.bookStatusIndex]!;
-        final books = provider.getBooksByStatus(currentStatus);
+    return Consumer<AppProvider>(builder: (context, provider, _) {
+      if (_initialized && provider.bookStatusIndex != _lastStatusIndex) {
+        _lastStatusIndex = provider.bookStatusIndex;
+        WidgetsBinding.instance.addPostFrameCallback((_) => _loadFirst());
+      }
+      if (_items.isEmpty && _isLoading) return _buildSkeleton();
+      if (_items.isEmpty) {
+        return RefreshIndicator(onRefresh: _refresh, color: colors.primary, backgroundColor: colors.surface,
+            child: ListView(physics: const AlwaysScrollableScrollPhysics(), children: [_buildEmptyState(context, provider.bookStatusIndex)]));
+      }
+      return RefreshIndicator(onRefresh: _refresh, color: colors.primary, backgroundColor: colors.surface,
+          child: _layoutStyle == 1 ? _buildListView() : _buildGridView());
+    });
+  }
 
-        if (_firstLoad) {
-          return _buildSkeleton();
-        }
-
-        if (books.isEmpty) {
-          return RefreshIndicator(
-            onRefresh: () async => await provider.loadBooks(),
-            color: colors.primary,
-            backgroundColor: colors.surface,
-            child: ListView(
-              physics: const AlwaysScrollableScrollPhysics(),
-              children: [_buildEmptyState(context, provider.bookStatusIndex)],
-            ),
-          );
-        }
-
-        if (_layoutStyle == 1) {
-          return _buildListView(books, provider);
-        }
-        return _buildGridView(books, provider);
+  Widget _buildGridView() {
+    return GridView.builder(controller: _scrollController,
+      padding: const EdgeInsets.fromLTRB(16, 16, 16, 100),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 0.55, crossAxisSpacing: 12, mainAxisSpacing: 16),
+      itemCount: _items.length + (_hasMore ? 1 : 0),
+      itemBuilder: (context, index) {
+        if (index >= _items.length) return _buildLoadMore();
+        return BookListItem(book: _items[index]);
       },
     );
   }
 
-  Widget _buildGridView(List books, AppProvider provider) {
-    final colors = Theme.of(context).colorScheme;
-    return RefreshIndicator(
-      onRefresh: () async => await provider.loadBooks(),
-      color: colors.primary,
-      backgroundColor: colors.surface,
-      child: GridView.builder(
-        padding: const EdgeInsets.fromLTRB(16, 16, 16, 100),
-        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: 3,
-          childAspectRatio: 0.55,
-          crossAxisSpacing: 12,
-          mainAxisSpacing: 16,
-        ),
-        itemCount: books.length,
-        itemBuilder: (context, index) => BookListItem(book: books[index]),
-      ),
+  Widget _buildListView() {
+    return ListView.builder(controller: _scrollController,
+      padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
+      itemCount: _items.length + (_hasMore ? 1 : 0),
+      itemBuilder: (context, index) {
+        if (index >= _items.length) return _buildLoadMore();
+        return _buildListCard(_items[index]);
+      },
     );
   }
 
-  Widget _buildListView(List books, AppProvider provider) {
-    final colors = Theme.of(context).colorScheme;
-    return RefreshIndicator(
-      onRefresh: () async => await provider.loadBooks(),
-      color: colors.primary,
-      backgroundColor: colors.surface,
-      child: ListView.builder(
-        padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
-        itemCount: books.length,
-        itemBuilder: (context, index) => _buildListCard(books[index]),
-      ),
+  Widget _buildLoadMore() {
+    return Padding(padding: const EdgeInsets.symmetric(vertical: 20),
+      child: Center(child: _isLoading
+          ? SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2, color: Theme.of(context).colorScheme.primary))
+          : Text('没有更多了', style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.3)))),
     );
   }
 
-  Widget _buildListCard(book) {
+  Widget _buildListCard(Book book) {
     final colors = Theme.of(context).colorScheme;
     return GestureDetector(
       onTap: () => Navigator.pushNamed(context, '/book-detail', arguments: book),
       onLongPress: () => _showDeleteDialog(context, book),
-      child: Container(
-        margin: const EdgeInsets.only(bottom: 8),
-        padding: const EdgeInsets.all(12),
-        decoration: BoxDecoration(
-          color: colors.surfaceContainerHigh,
-          borderRadius: BorderRadius.circular(12),
-        ),
-        child: Row(
-          children: [
-            Container(
-              width: 48, height: 64,
-              decoration: BoxDecoration(
-                color: colors.outlineVariant,
-                borderRadius: BorderRadius.circular(6),
-              ),
-              clipBehavior: Clip.antiAlias,
-              child: book.coverPath != null && book.coverPath!.isNotEmpty
-                  ? Image.file(File(book.coverPath!), fit: BoxFit.cover,
-                      errorBuilder: (_, __, ___) => Icon(Icons.menu_book_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)))
-                  : Icon(Icons.menu_book_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)),
-            ),
-            const SizedBox(width: 12),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(book.title, maxLines: 1, overflow: TextOverflow.ellipsis,
-                      style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface)),
-                  if (book.authors.isNotEmpty) ...[
-                    const SizedBox(height: 3),
-                    Text(book.authors.take(2).join('、'), maxLines: 1, overflow: TextOverflow.ellipsis,
-                        style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.35))),
-                  ],
-                  const SizedBox(height: 6),
-                  if (book.rating != null)
-                    AnimatedStarRating(rating: book.rating!, starSize: 12, showNumber: true)
-                  else
-                    const SizedBox(height: 14),
-                ],
-              ),
-            ),
-            const SizedBox(width: 8),
-            Icon(Icons.chevron_right, color: colors.onSurface.withValues(alpha: 0.2), size: 20),
-          ],
-        ),
+      child: Container(margin: const EdgeInsets.only(bottom: 8), padding: const EdgeInsets.all(12),
+        decoration: BoxDecoration(color: colors.surfaceContainerHigh, borderRadius: BorderRadius.circular(12)),
+        child: Row(children: [
+          Container(width: 48, height: 64,
+            decoration: BoxDecoration(color: colors.outlineVariant, borderRadius: BorderRadius.circular(6)),
+            clipBehavior: Clip.antiAlias,
+            child: book.coverPath != null && book.coverPath!.isNotEmpty
+                ? FadeInLocalImage(path: book.coverPath, fit: BoxFit.cover,
+                    errorWidget: Icon(Icons.menu_book_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)))
+                : Icon(Icons.menu_book_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)),
+          ),
+          const SizedBox(width: 12),
+          Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+            Text(book.title, maxLines: 1, overflow: TextOverflow.ellipsis,
+                style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface)),
+            if (book.authors.isNotEmpty) ...[const SizedBox(height: 3),
+              Text(book.authors.take(2).join('、'), maxLines: 1, overflow: TextOverflow.ellipsis,
+                  style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.35))),
+            ],
+            const SizedBox(height: 6),
+            if (book.rating != null) AnimatedStarRating(rating: book.rating!, starSize: 12, showNumber: true)
+            else const SizedBox(height: 14),
+          ])),
+          const SizedBox(width: 8),
+          Icon(Icons.chevron_right, color: colors.onSurface.withValues(alpha: 0.2), size: 20),
+        ]),
       ),
     );
   }
 
-  void _showDeleteDialog(BuildContext context, book) {
+  void _showDeleteDialog(BuildContext context, Book book) {
     final colors = Theme.of(context).colorScheme;
-    showDialog(
-      context: context,
-      builder: (ctx) => AlertDialog(
-        backgroundColor: colors.surface,
-        elevation: 0,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
-        title: Text('确认删除', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: colors.onSurface)),
-        content: Text('确定要删除《${book.title}》吗？删除后可在回收站恢复。',
-            style: TextStyle(fontSize: 14, color: colors.onSurface.withValues(alpha: 0.6), height: 1.5)),
-        actions: [
-          TextButton(
-            onPressed: () => Navigator.pop(ctx),
-            child: Text('取消', style: TextStyle(color: colors.onSurface.withValues(alpha: 0.6))),
-          ),
-          ElevatedButton(
-            onPressed: () async {
-              await context.read<AppProvider>().removeBook(book.id);
-              Navigator.pop(ctx);
-            },
-            style: ElevatedButton.styleFrom(
-              backgroundColor: colors.error, foregroundColor: colors.onError, elevation: 0,
-              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
-              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-            ),
-            child: const Text('删除'),
-          ),
-        ],
-        actionsPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-      ),
-    );
+    showDialog(context: context, builder: (ctx) => AlertDialog(
+      backgroundColor: colors.surface, elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      title: Text('确认删除', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: colors.onSurface)),
+      content: Text('确定要删除《${book.title}》吗？删除后可在回收站恢复。',
+          style: TextStyle(fontSize: 14, color: colors.onSurface.withValues(alpha: 0.6), height: 1.5)),
+      actions: [
+        TextButton(onPressed: () => Navigator.pop(ctx), child: Text('取消', style: TextStyle(color: colors.onSurface.withValues(alpha: 0.6)))),
+        ElevatedButton(onPressed: () async { await context.read<AppProvider>().removeBook(book.id); Navigator.pop(ctx); _loadFirst(); },
+          style: ElevatedButton.styleFrom(backgroundColor: colors.error, foregroundColor: colors.onError, elevation: 0,
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8)),
+          child: const Text('删除'),
+        ),
+      ],
+      actionsPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+    ));
   }
 
-  Widget _buildSkeleton() {
-    return _layoutStyle == 1
-        ? MovieSkeletonGrid()
-        : const BookSkeletonGrid();
-  }
+  Widget _buildSkeleton() => _layoutStyle == 1 ? const MovieSkeletonGrid() : const BookSkeletonGrid();
 
   Widget _buildEmptyState(BuildContext context, int statusIndex) {
     final colors = Theme.of(context).colorScheme;
     final statusText = ['已读', '在读', '想读'][statusIndex];
-    return Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Container(
-            width: 80, height: 80,
-            decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(20)),
-            child: Icon(Icons.menu_book_outlined, size: 40, color: colors.onSurface.withValues(alpha: 0.25)),
-          ),
-          const SizedBox(height: 20),
-          Text('暂无$statusText的书籍', style: TextStyle(fontSize: 16, color: colors.onSurface.withValues(alpha: 0.4))),
-          const SizedBox(height: 24),
-          InkWell(
-            onTap: () {
-              final statusMap = {0: 'read', 1: 'reading', 2: 'want_to_read'};
-              Navigator.pushNamed(context, '/book-form', arguments: {'initialStatus': statusMap[statusIndex]!});
-            },
-            child: Container(
-              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
-              decoration: BoxDecoration(color: colors.primary, borderRadius: BorderRadius.circular(8)),
-              child: Text('添加记录', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onPrimary)),
-            ),
-          ),
-        ],
+    return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
+      Container(width: 80, height: 80,
+          decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(20)),
+          child: Icon(Icons.menu_book_outlined, size: 40, color: colors.onSurface.withValues(alpha: 0.25))),
+      const SizedBox(height: 20),
+      Text('暂无$statusText的书籍', style: TextStyle(fontSize: 16, color: colors.onSurface.withValues(alpha: 0.4))),
+      const SizedBox(height: 24),
+      InkWell(onTap: () {
+        final statusMap = {0: 'read', 1: 'reading', 2: 'want_to_read'};
+        Navigator.pushNamed(context, '/book-form', arguments: {'initialStatus': statusMap[statusIndex]!});
+      },
+        child: Container(padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+            decoration: BoxDecoration(color: colors.primary, borderRadius: BorderRadius.circular(8)),
+            child: Text('添加记录', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onPrimary))),
       ),
-    );
+    ]));
   }
 }

lib/pages/movies/movie_detail_page.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:path/path.dart' as path;
+import '../../widgets/fade_in_local_image.dart';
 import 'package:share_plus/share_plus.dart';
 import 'package:cross_file/cross_file.dart';
 import 'package:permission_handler/permission_handler.dart';
@@ -193,10 +194,9 @@ class _MovieDetailPageState extends State<MovieDetailPage> {
   Widget _buildPosterSection(Movie movie) {
     return SizedBox.expand(
       child: movie.posterPath != null && movie.posterPath!.isNotEmpty
-          ? Image.file(
-              File(movie.posterPath!),
+          ? FadeInLocalImage(
+              path: movie.posterPath,
               fit: BoxFit.cover,
-              errorBuilder: (_, __, ___) => _buildPosterPlaceholder(),
             )
           : _buildPosterPlaceholder(),
     );

lib/pages/movies/movie_form_page.dart

@@ -6,6 +6,7 @@ import 'package:path/path.dart' as p;
 import 'package:provider/provider.dart';
 import 'package:http/http.dart' as http;
 import '../../providers/app_provider.dart';
+import '../../widgets/fade_in_local_image.dart';
 import '../../models/data_models.dart';
 import '../../utils/toast_util.dart';
 import '../../utils/image_path_helper.dart';
@@ -1381,10 +1382,9 @@ class _MovieFormPageState extends State<MovieFormPage> {
             ),
             clipBehavior: Clip.antiAlias,
             child: hasPoster
-                ? Image.file(
-                    File(_posterPath!),
+                ? FadeInLocalImage(
+                    path: _posterPath,
                     fit: BoxFit.cover,
-                    errorBuilder: (_, __, ___) => _buildCoverPlaceholder(),
                   )
                 : _buildCoverPlaceholder(),
           ),

lib/pages/movies/movie_posters_page.dart

@@ -8,6 +8,7 @@ import 'package:provider/provider.dart';
 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
 import 'package:http/http.dart' as http;
 import '../../providers/app_provider.dart';
+import '../../widgets/fade_in_local_image.dart';
 import '../../models/data_models.dart';
 import '../../utils/toast_util.dart';
 import '../../utils/image_path_helper.dart';
@@ -158,15 +159,9 @@ class _MoviePostersPageState extends State<MoviePostersPage> {
             fit: StackFit.expand,
             children: [
               // 海报图片
-              Image.file(
-                File(poster.posterPath),
+              FadeInLocalImage(
+                path: poster.posterPath,
                 fit: BoxFit.cover,
-                errorBuilder: (_, __, ___) => Center(
-                  child: Icon(
-                    Icons.broken_image,
-                    color: colors.onSurface.withValues(alpha: 0.25),
-                  ),
-                ),
               ),
               // 渐变遮罩（底部）
               Positioned(

lib/pages/movies/movie_review_detail_page.dart

@@ -4,6 +4,7 @@ import 'package:provider/provider.dart';
 import '../../models/data_models.dart';
 import '../../providers/app_provider.dart';
 import '../../utils/toast_util.dart';
+import '../../widgets/fade_in_local_image.dart';
 import 'movie_review_form_page.dart';
 
 /// 影评详情页
@@ -121,7 +122,8 @@ class _MovieReviewDetailPageState extends State<MovieReviewDetailPage> {
         decoration: BoxDecoration(borderRadius: BorderRadius.circular(6), color: colors.surfaceContainerHighest),
         clipBehavior: Clip.antiAlias,
         child: movie.posterPath != null
-            ? Image.file(File(movie.posterPath!), fit: BoxFit.cover, errorBuilder: (_, __, ___) => Icon(Icons.movie_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)))
+            ? FadeInLocalImage(path: movie.posterPath, fit: BoxFit.cover,
+                errorWidget: Icon(Icons.movie_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)))
             : Icon(Icons.movie_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)),
       ),
       const SizedBox(width: 12),

lib/pages/movies/movie_review_form_page.dart

@@ -2,6 +2,7 @@ import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import '../../providers/app_provider.dart';
+import '../../widgets/fade_in_local_image.dart';
 import '../../models/data_models.dart';
 import '../../utils/toast_util.dart';
 
@@ -155,8 +156,8 @@ class _MovieReviewFormPageState extends State<MovieReviewFormPage> {
             ),
             clipBehavior: Clip.antiAlias,
             child: movie.posterPath != null
-                ? Image.file(File(movie.posterPath!), fit: BoxFit.cover,
-                    errorBuilder: (_, __, ___) => Icon(Icons.movie_outlined, size: 24, color: colors.onSurface.withValues(alpha: 0.25)))
+                ? FadeInLocalImage(path: movie.posterPath, fit: BoxFit.cover,
+                    errorWidget: Icon(Icons.movie_outlined, size: 24, color: colors.onSurface.withValues(alpha: 0.25)))
                 : Icon(Icons.movie_outlined, size: 24, color: colors.onSurface.withValues(alpha: 0.25)),
           ),
           const SizedBox(width: 14),

lib/pages/movies/movie_share_page.dart

@@ -7,6 +7,7 @@ import 'package:path_provider/path_provider.dart';
 import 'package:share_plus/share_plus.dart';
 import '../../models/data_models.dart';
 import '../../utils/toast_util.dart';
+import '../../widgets/fade_in_local_image.dart';
 
 /// 影视分享海报页面
 class MovieSharePage extends StatefulWidget {
@@ -103,8 +104,8 @@ class _MovieSharePageState extends State<MovieSharePage> {
           if (hasPoster)
             ClipRRect(
               borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
-              child: Image.file(
-                File(movie.posterPath!),
+              child: FadeInLocalImage(
+                path: movie.posterPath,
                 width: 320,
                 height: 200,
                 fit: BoxFit.cover,

lib/pages/movies/movie_tab_page.dart

@@ -1,14 +1,15 @@
-import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import '../../models/data_models.dart';
 import '../../providers/app_provider.dart';
 import '../../utils/user_prefs.dart';
 import '../../widgets/movie_status_bar.dart';
 import '../../widgets/movie_list_item.dart';
 import '../../widgets/animated_star_rating.dart';
 import '../../widgets/shimmer_skeleton.dart';
+import '../../widgets/fade_in_local_image.dart';
 
-/// 观影标签页
+/// 观影标签页（分页 + 触底加载）
 class MovieTabPage extends StatefulWidget {
   const MovieTabPage({super.key});
 
@@ -18,17 +19,98 @@ class MovieTabPage extends StatefulWidget {
 
 class _MovieTabPageState extends State<MovieTabPage> {
   int _layoutStyle = 0;
-  bool _firstLoad = true;
+  final List<Movie> _items = [];
+  bool _hasMore = true;
+  bool _isLoading = false;
+  int _offset = 0;
+  int _lastStatusIndex = -1;
+  bool _initialized = false;
+  int _lastDataCount = -1;
+  DateTime? _lastUpdatedAt;
+  late ScrollController _scrollController;
+
+  static const _statusMap = {0: 'watched', 1: 'watching', 2: 'want_to_watch'};
 
   @override
   void initState() {
     super.initState();
     _layoutStyle = UserPrefs().movieLayoutStyle;
+    _scrollController = ScrollController()..addListener(_onScroll);
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (mounted) setState(() => _firstLoad = false);
+      final provider = context.read<AppProvider>();
+      provider.addListener(_onDataChanged);
+      _lastDataCount = provider.movies.length;
+      if (provider.movies.isNotEmpty) _lastUpdatedAt = provider.movies.first.updatedAt;
+      _loadFirst();
     });
   }
 
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  void _onDataChanged() {
+    if (!_initialized || !mounted) return;
+    final provider = context.read<AppProvider>();
+    final count = provider.movies.length;
+    final latest = provider.movies.isNotEmpty ? provider.movies.first.updatedAt : null;
+    if (count != _lastDataCount || latest != _lastUpdatedAt) {
+      _lastDataCount = count;
+      _lastUpdatedAt = latest;
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted) _loadFirst();
+      });
+    }
+  }
+
+  void _onScroll() {
+    if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent - 200) {
+      _loadMore();
+    }
+  }
+
+  String get _currentStatus => _statusMap[context.read<AppProvider>().movieStatusIndex] ?? 'watched';
+
+  Future<void> _loadFirst() async {
+    final provider = context.read<AppProvider>();
+    final statusIdx = provider.movieStatusIndex;
+    _lastStatusIndex = statusIdx;
+    _initialized = true;
+    final status = _statusMap[statusIdx] ?? 'watched';
+    setState(() { _isLoading = true; _items.clear(); _offset = 0; _hasMore = true; });
+    final list = await provider.loadMoviesPaged(status: status, offset: 0);
+    if (!mounted) return;
+    setState(() {
+      _items.addAll(list);
+      _offset = list.length;
+      _hasMore = list.length >= 20;
+      _isLoading = false;
+    });
+  }
+
+  Future<void> _loadMore() async {
+    if (_isLoading || !_hasMore) return;
+    setState(() => _isLoading = true);
+    final provider = context.read<AppProvider>();
+    final status = _statusMap[provider.movieStatusIndex] ?? 'watched';
+    final list = await provider.loadMoviesPaged(status: status, offset: _offset);
+    if (!mounted) return;
+    setState(() {
+      _items.addAll(list);
+      _offset += list.length;
+      _hasMore = list.length >= 20;
+      _isLoading = false;
+    });
+  }
+
+  Future<void> _refresh() async {
+    final provider = context.read<AppProvider>();
+    await provider.loadMovies();
+    await _loadFirst();
+  }
+
   @override
   Widget build(BuildContext context) {
     final colors = Theme.of(context).colorScheme;
@@ -36,30 +118,26 @@ class _MovieTabPageState extends State<MovieTabPage> {
       children: [
         const MovieStatusBar(),
         Divider(height: 0.5, thickness: 0.5, color: colors.outline),
-        Expanded(
-          child: _buildMovieList(context),
-        ),
+        Expanded(child: _buildBody(context)),
       ],
     );
   }
 
-  Widget _buildMovieList(BuildContext context) {
+  Widget _buildBody(BuildContext context) {
     final colors = Theme.of(context).colorScheme;
     return Consumer<AppProvider>(
-      builder: (context, provider, child) {
-        final statusMap = {0: 'watched', 1: 'watching', 2: 'want_to_watch'};
-        final currentStatus = statusMap[provider.movieStatusIndex]!;
-        final allMovies = provider.movies.where((m) => !m.isDeleted).toList();
-        if (_firstLoad && allMovies.isEmpty) {
-          return _buildSkeleton();
+      builder: (context, provider, _) {
+        // 状态切换时重新加载（跳过首次未初始化的情况）
+        if (_initialized && provider.movieStatusIndex != _lastStatusIndex) {
+          _lastStatusIndex = provider.movieStatusIndex;
+          WidgetsBinding.instance.addPostFrameCallback((_) => _loadFirst());
         }
-        _firstLoad = false;
 
-        final movies = provider.getMoviesByStatus(currentStatus);
+        if (_items.isEmpty && _isLoading) return _buildSkeleton();
 
-        if (movies.isEmpty) {
+        if (_items.isEmpty) {
           return RefreshIndicator(
-            onRefresh: () async => await provider.loadMovies(),
+            onRefresh: _refresh,
             color: colors.primary,
             backgroundColor: colors.surface,
             child: ListView(
@@ -69,49 +147,55 @@ class _MovieTabPageState extends State<MovieTabPage> {
           );
         }
 
-        if (_layoutStyle == 1) {
-          return _buildListView(movies, provider);
-        }
-        return _buildGridView(movies, provider);
+        return RefreshIndicator(
+          onRefresh: _refresh,
+          color: colors.primary,
+          backgroundColor: colors.surface,
+          child: _layoutStyle == 1 ? _buildListView() : _buildGridView(),
+        );
       },
     );
   }
 
-  Widget _buildGridView(List movies, AppProvider provider) {
-    final colors = Theme.of(context).colorScheme;
-    return RefreshIndicator(
-      onRefresh: () async => await provider.loadMovies(),
-      color: colors.primary,
-      backgroundColor: colors.surface,
-      child: GridView.builder(
-        padding: const EdgeInsets.fromLTRB(16, 16, 16, 100),
-        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: 3,
-          childAspectRatio: 0.55,
-          crossAxisSpacing: 12,
-          mainAxisSpacing: 16,
-        ),
-        itemCount: movies.length,
-        itemBuilder: (context, index) => MovieListItem(movie: movies[index]),
+  Widget _buildGridView() {
+    return GridView.builder(
+      controller: _scrollController,
+      padding: const EdgeInsets.fromLTRB(16, 16, 16, 100),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3, childAspectRatio: 0.55, crossAxisSpacing: 12, mainAxisSpacing: 16,
+      ),
+      itemCount: _items.length + (_hasMore ? 1 : 0),
+      itemBuilder: (context, index) {
+        if (index >= _items.length) return _buildLoadMoreIndicator();
+        return MovieListItem(movie: _items[index]);
+      },
+    );
+  }
+
+  Widget _buildListView() {
+    return ListView.builder(
+      controller: _scrollController,
+      padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
+      itemCount: _items.length + (_hasMore ? 1 : 0),
+      itemBuilder: (context, index) {
+        if (index >= _items.length) return _buildLoadMoreIndicator();
+        return _buildListCard(_items[index]);
+      },
+    );
+  }
+
+  Widget _buildLoadMoreIndicator() {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 20),
+      child: Center(
+        child: _isLoading
+            ? SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2, color: Theme.of(context).colorScheme.primary))
+            : Text('没有更多了', style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.3))),
       ),
     );
   }
 
-  Widget _buildListView(List movies, AppProvider provider) {
-    final colors = Theme.of(context).colorScheme;
-    return RefreshIndicator(
-      onRefresh: () async => await provider.loadMovies(),
-      color: colors.primary,
-      backgroundColor: colors.surface,
-      child: ListView.builder(
-        padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
-        itemCount: movies.length,
-        itemBuilder: (context, index) => _buildListCard(movies[index]),
-      ),
-    );
-  }
-
-  Widget _buildListCard(movie) {
+  Widget _buildListCard(Movie movie) {
     final colors = Theme.of(context).colorScheme;
     return GestureDetector(
       onTap: () => Navigator.pushNamed(context, '/movie-detail', arguments: movie),
@@ -119,78 +203,59 @@ class _MovieTabPageState extends State<MovieTabPage> {
       child: Container(
         margin: const EdgeInsets.only(bottom: 8),
         padding: const EdgeInsets.all(12),
-        decoration: BoxDecoration(
-          color: colors.surfaceContainerHigh,
-          borderRadius: BorderRadius.circular(12),
-        ),
-        child: Row(
-          children: [
-            Container(
-              width: 48, height: 64,
-              decoration: BoxDecoration(
-                color: colors.outlineVariant,
-                borderRadius: BorderRadius.circular(6),
-              ),
-              clipBehavior: Clip.antiAlias,
-              child: movie.posterPath != null && movie.posterPath!.isNotEmpty
-                  ? Image.file(File(movie.posterPath!), fit: BoxFit.cover,
-                      errorBuilder: (_, __, ___) => Icon(Icons.movie_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)))
-                  : Icon(Icons.movie_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)),
-            ),
-            const SizedBox(width: 12),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(movie.title, maxLines: 1, overflow: TextOverflow.ellipsis,
-                      style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface)),
-                  if (movie.alternateTitles.isNotEmpty) ...[
-                    const SizedBox(height: 3),
-                    Text(movie.alternateTitles.take(2).join('、'), maxLines: 1, overflow: TextOverflow.ellipsis,
-                        style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.35))),
-                  ],
-                  const SizedBox(height: 6),
-                  if (movie.rating != null)
-                    AnimatedStarRating(rating: movie.rating!, starSize: 12, showNumber: true)
-                  else
-                    const SizedBox(height: 14),
-                ],
-              ),
-            ),
-            const SizedBox(width: 8),
-            Icon(Icons.chevron_right, color: colors.onSurface.withValues(alpha: 0.2), size: 20),
-          ],
-        ),
+        decoration: BoxDecoration(color: colors.surfaceContainerHigh, borderRadius: BorderRadius.circular(12)),
+        child: Row(children: [
+          Container(
+            width: 48, height: 64,
+            decoration: BoxDecoration(color: colors.outlineVariant, borderRadius: BorderRadius.circular(6)),
+            clipBehavior: Clip.antiAlias,
+            child: movie.posterPath != null && movie.posterPath!.isNotEmpty
+                ? FadeInLocalImage(path: movie.posterPath, fit: BoxFit.cover,
+                    errorWidget: Icon(Icons.movie_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)))
+                : Icon(Icons.movie_outlined, size: 22, color: colors.onSurface.withValues(alpha: 0.25)),
+          ),
+          const SizedBox(width: 12),
+          Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+            Text(movie.title, maxLines: 1, overflow: TextOverflow.ellipsis,
+                style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface)),
+            if (movie.alternateTitles.isNotEmpty) ...[
+              const SizedBox(height: 3),
+              Text(movie.alternateTitles.take(2).join('、'), maxLines: 1, overflow: TextOverflow.ellipsis,
+                  style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.35))),
+            ],
+            const SizedBox(height: 6),
+            if (movie.rating != null) AnimatedStarRating(rating: movie.rating!, starSize: 12, showNumber: true)
+            else const SizedBox(height: 14),
+          ])),
+          const SizedBox(width: 8),
+          Icon(Icons.chevron_right, color: colors.onSurface.withValues(alpha: 0.2), size: 20),
+        ]),
       ),
     );
   }
 
-  void _showDeleteDialog(BuildContext context, movie) {
+  void _showDeleteDialog(BuildContext context, Movie movie) {
     final colors = Theme.of(context).colorScheme;
     showDialog(
       context: context,
       builder: (ctx) => AlertDialog(
-        backgroundColor: colors.surface,
-        elevation: 0,
+        backgroundColor: colors.surface, elevation: 0,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
         title: Text('确认删除', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: colors.onSurface)),
         content: Text('确定要删除《${movie.title}》吗？删除后可在回收站恢复。',
             style: TextStyle(fontSize: 14, color: colors.onSurface.withValues(alpha: 0.6), height: 1.5)),
         actions: [
-          TextButton(
-            onPressed: () => Navigator.pop(ctx),
-            child: Text('取消', style: TextStyle(color: colors.onSurface.withValues(alpha: 0.6))),
-          ),
+          TextButton(onPressed: () => Navigator.pop(ctx),
+              child: Text('取消', style: TextStyle(color: colors.onSurface.withValues(alpha: 0.6)))),
           ElevatedButton(
             onPressed: () async {
               await context.read<AppProvider>().removeMovie(movie.id);
               Navigator.pop(ctx);
+              _loadFirst();
             },
-            style: ElevatedButton.styleFrom(
-              backgroundColor: colors.error, foregroundColor: colors.onError, elevation: 0,
-              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
-              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-            ),
+            style: ElevatedButton.styleFrom(backgroundColor: colors.error, foregroundColor: colors.onError, elevation: 0,
+                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8)),
             child: const Text('删除'),
           ),
         ],
@@ -199,42 +264,24 @@ class _MovieTabPageState extends State<MovieTabPage> {
     );
   }
 
-  Widget _buildSkeleton() {
-    return _layoutStyle == 1 ? _buildListSkeleton() : const MovieSkeletonGrid();
-  }
+  Widget _buildSkeleton() => _layoutStyle == 1 ? _buildListSkeleton() : const MovieSkeletonGrid();
 
   Widget _buildListSkeleton() {
     final colors = Theme.of(context).colorScheme;
     return ListView.builder(
-      padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
-      itemCount: 6,
+      padding: const EdgeInsets.fromLTRB(12, 8, 12, 100), itemCount: 6,
       itemBuilder: (_, __) => Container(
-        margin: const EdgeInsets.only(bottom: 8),
-        padding: const EdgeInsets.all(12),
-        decoration: BoxDecoration(
-          color: colors.surfaceContainerHigh,
-          borderRadius: BorderRadius.circular(12),
-        ),
-        child: const Row(
-          children: [
-            ShimmerSkeleton(width: 48, height: 64, borderRadius: 6),
-            SizedBox(width: 12),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  ShimmerSkeleton(width: 160, height: 16),
-                  SizedBox(height: 6),
-                  ShimmerSkeleton(width: 100, height: 12),
-                  SizedBox(height: 6),
-                  ShimmerSkeleton(width: 70, height: 12),
-                ],
-              ),
-            ),
-            SizedBox(width: 8),
-            ShimmerSkeleton(width: 20, height: 20, borderRadius: 10),
-          ],
-        ),
+        margin: const EdgeInsets.only(bottom: 8), padding: const EdgeInsets.all(12),
+        decoration: BoxDecoration(color: colors.surfaceContainerHigh, borderRadius: BorderRadius.circular(12)),
+        child: const Row(children: [
+          ShimmerSkeleton(width: 48, height: 64, borderRadius: 6), SizedBox(width: 12),
+          Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+            ShimmerSkeleton(width: 160, height: 16), SizedBox(height: 6),
+            ShimmerSkeleton(width: 100, height: 12), SizedBox(height: 6),
+            ShimmerSkeleton(width: 70, height: 12),
+          ])),
+          SizedBox(width: 8), ShimmerSkeleton(width: 20, height: 20, borderRadius: 10),
+        ]),
       ),
     );
   }
@@ -242,31 +289,24 @@ class _MovieTabPageState extends State<MovieTabPage> {
   Widget _buildEmptyState(BuildContext context, int statusIndex) {
     final colors = Theme.of(context).colorScheme;
     final statusText = ['已看', '在看', '想看'][statusIndex];
-    return Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Container(
-            width: 80, height: 80,
-            decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(20)),
-            child: Icon(Icons.movie_outlined, size: 40, color: colors.onSurface.withValues(alpha: 0.25)),
-          ),
-          const SizedBox(height: 20),
-          Text('暂无$statusText的影片', style: TextStyle(fontSize: 16, color: colors.onSurface.withValues(alpha: 0.4))),
-          const SizedBox(height: 24),
-          InkWell(
-            onTap: () {
-              final statusMap = {0: 'watched', 1: 'watching', 2: 'want_to_watch'};
-              Navigator.pushNamed(context, '/movie-form', arguments: {'initialStatus': statusMap[statusIndex]!});
-            },
-            child: Container(
-              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
-              decoration: BoxDecoration(color: colors.primary, borderRadius: BorderRadius.circular(8)),
-              child: Text('添加记录', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onPrimary)),
-            ),
-          ),
-        ],
+    return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
+      Container(width: 80, height: 80,
+          decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(20)),
+          child: Icon(Icons.movie_outlined, size: 40, color: colors.onSurface.withValues(alpha: 0.25))),
+      const SizedBox(height: 20),
+      Text('暂无$statusText的影片', style: TextStyle(fontSize: 16, color: colors.onSurface.withValues(alpha: 0.4))),
+      const SizedBox(height: 24),
+      InkWell(
+        onTap: () {
+          final statusMap = {0: 'watched', 1: 'watching', 2: 'want_to_watch'};
+          Navigator.pushNamed(context, '/movie-form', arguments: {'initialStatus': statusMap[statusIndex]!});
+        },
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+          decoration: BoxDecoration(color: colors.primary, borderRadius: BorderRadius.circular(8)),
+          child: Text('添加记录', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onPrimary)),
+        ),
       ),
-    );
+    ]));
   }
 }

lib/pages/movies/poster_gallery_page.dart

@@ -1,6 +1,7 @@
 import 'dart:io';
 import 'package:flutter/material.dart';
 import '../../models/data_models.dart';
+import '../../widgets/fade_in_local_image.dart';
 
 /// 海报画廊页面 - 支持左右滑动浏览
 class PosterGalleryPage extends StatefulWidget {
@@ -53,16 +54,9 @@ class _PosterGalleryPageState extends State<PosterGalleryPage> {
                 minScale: 0.5,
                 maxScale: 3.0,
                 child: Center(
-                  child: Image.file(
-                    File(poster.posterPath),
+                  child: FadeInLocalImage(
+                    path: poster.posterPath,
                     fit: BoxFit.contain,
-                    errorBuilder: (_, __, ___) => const Center(
-                      child: Icon(
-                        Icons.broken_image,
-                        color: Colors.white54,
-                        size: 64,
-                      ),
-                    ),
                   ),
                 ),
               );

lib/pages/note/note_detail_page.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
 import 'package:provider/provider.dart';
 import '../../providers/app_provider.dart';
+import '../../widgets/fade_in_local_image.dart';
 import '../../models/data_models.dart';
 import 'note_share_page.dart';
 import '../../widgets/fade_in_local_image.dart';
@@ -176,10 +177,10 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
                 border: Border.all(color: colors.outlineVariant, width: 0.5),
               ),
               clipBehavior: Clip.antiAlias,
-              child: Image.file(
-                File(images[index]),
+              child: FadeInLocalImage(
+                path: images[index],
                 fit: BoxFit.cover,
-                errorBuilder: (_, __, ___) => Container(
+                errorWidget: Container(
                   color: colors.surfaceContainerHighest,
                   child: Icon(Icons.broken_image_outlined, size: 20, color: colors.onSurface.withValues(alpha: 0.25)),
                 ),

lib/pages/note/note_form_page.dart

@@ -8,6 +8,7 @@ import '../../providers/app_provider.dart';
 import '../../models/data_models.dart';
 import '../../utils/toast_util.dart';
 import '../../utils/image_path_helper.dart';
+import '../../widgets/fade_in_local_image.dart';
 
 /// 添加/编辑笔记页面 - 极简书写界面
 class NoteFormPage extends StatefulWidget {
@@ -1037,8 +1038,8 @@ class _NoteFormPageState extends State<NoteFormPage> {
           border: Border.all(color: colors.outline, width: 0.5),
         ),
         clipBehavior: Clip.antiAlias,
-        child: Image.file(
-          File(_images[index]),
+        child: FadeInLocalImage(
+          path: _images[index],
           fit: BoxFit.cover,
         ),
       ),
@@ -1060,8 +1061,8 @@ class _NoteFormPageState extends State<NoteFormPage> {
               boundaryMargin: const EdgeInsets.all(20),
               minScale: 0.5,
               maxScale: 4,
-              child: Image.file(
-                File(_images[index]),
+              child: FadeInLocalImage(
+                path: _images[index],
                 fit: BoxFit.contain,
               ),
             ),

lib/pages/note/note_share_page.dart

@@ -7,6 +7,7 @@ import 'package:path_provider/path_provider.dart';
 import 'package:share_plus/share_plus.dart';
 import '../../models/data_models.dart';
 import '../../utils/toast_util.dart';
+import '../../widgets/fade_in_local_image.dart';
 
 /// 笔记分享海报页面
 class NoteSharePage extends StatefulWidget {
@@ -105,11 +106,11 @@ class _NoteSharePageState extends State<NoteSharePage> {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           // 首张图片
-          if (hasImages && File(note.images.first).existsSync())
+          if (hasImages)
             ClipRRect(
               borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
-              child: Image.file(
-                File(note.images.first),
+              child: FadeInLocalImage(
+                path: note.images.first,
                 width: 320,
                 height: 200,
                 fit: BoxFit.cover,

lib/pages/note/note_tab_page.dart

@@ -1,4 +1,3 @@
-import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import '../../providers/app_provider.dart';
@@ -8,7 +7,7 @@ import '../../widgets/note_list_item.dart';
 import '../../widgets/shimmer_skeleton.dart';
 import '../../widgets/fade_in_local_image.dart';
 
-/// 笔记标签页
+/// 笔记标签页（分页 + 触底加载）
 class NoteTabPage extends StatefulWidget {
   const NoteTabPage({super.key});
 
@@ -17,213 +16,127 @@ class NoteTabPage extends StatefulWidget {
 }
 
 class _NoteTabPageState extends State<NoteTabPage> {
-  static const int _pageSize = 50;
-  final List<Note> _displayedNotes = [];
-  bool _isLoading = false;
+  final List<Note> _items = [];
   bool _hasMore = true;
-  final ScrollController _scrollController = ScrollController();
-
+  bool _isLoading = false;
+  int _offset = 0;
+  late ScrollController _scrollController;
   int _layoutStyle = 0;
-  bool _firstLoad = true;
+  bool _initialized = false;
+  int _lastDataCount = -1;
+  DateTime? _lastUpdatedAt;
 
   @override
   void initState() {
     super.initState();
-    _scrollController.addListener(_onScroll);
     _layoutStyle = UserPrefs().noteLayoutStyle;
+    _scrollController = ScrollController()..addListener(_onScroll);
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      _loadMoreNotes();
-      if (mounted) setState(() => _firstLoad = false);
+      final provider = context.read<AppProvider>();
+      provider.addListener(_onDataChanged);
+      _lastDataCount = provider.notes.length;
+      if (provider.notes.isNotEmpty) _lastUpdatedAt = provider.notes.first.updatedAt;
+      _loadFirst();
     });
   }
 
-  int _lastNotesCount = 0;
-
-  @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
-    final provider = context.watch<AppProvider>();
-    final allNotes = provider.notes;
-
-    if (allNotes.length != _lastNotesCount && _displayedNotes.isNotEmpty) {
-      _lastNotesCount = allNotes.length;
-      setState(() {
-        _displayedNotes.clear();
-        _hasMore = true;
-      });
-      Future.microtask(() => _loadMoreNotes());
-    } else {
-      _lastNotesCount = allNotes.length;
-    }
-  }
-
   @override
   void dispose() {
     _scrollController.dispose();
     super.dispose();
   }
 
-  void _onScroll() {
-    if (_scrollController.position.pixels >=
-        _scrollController.position.maxScrollExtent - 200) {
-      _loadMoreNotes();
+  void _onDataChanged() {
+    if (!_initialized || !mounted) return;
+    final provider = context.read<AppProvider>();
+    final count = provider.notes.length;
+    final latest = provider.notes.isNotEmpty ? provider.notes.first.updatedAt : null;
+    if (count != _lastDataCount || latest != _lastUpdatedAt) {
+      _lastDataCount = count;
+      _lastUpdatedAt = latest;
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted) _loadFirst();
+      });
     }
   }
 
-  Future<void> _loadMoreNotes() async {
-    if (_isLoading || !_hasMore) return;
-
-    setState(() => _isLoading = true);
-
-    await Future.microtask(() {
-      final provider = context.read<AppProvider>();
-      final allNotes = provider.notes;
-
-      final startIndex = _displayedNotes.length;
-      final endIndex = (startIndex + _pageSize).clamp(0, allNotes.length);
-
-      if (startIndex >= allNotes.length) {
-        _hasMore = false;
-      } else {
-        final newNotes = allNotes.sublist(startIndex, endIndex);
-        _displayedNotes.addAll(newNotes);
-        _hasMore = endIndex < allNotes.length;
-      }
-    });
-
-    if (mounted) {
-      setState(() => _isLoading = false);
+  void _onScroll() {
+    if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent - 200) {
+      _loadMore();
     }
   }
 
+  Future<void> _loadFirst() async {
+    _initialized = true;
+    setState(() { _isLoading = true; _items.clear(); _offset = 0; _hasMore = true; });
+    final list = await context.read<AppProvider>().loadNotesPaged(offset: 0);
+    if (!mounted) return;
+    setState(() { _items.addAll(list); _offset = list.length; _hasMore = list.length >= 20; _isLoading = false; });
+  }
+
+  Future<void> _loadMore() async {
+    if (_isLoading || !_hasMore) return;
+    setState(() => _isLoading = true);
+    final list = await context.read<AppProvider>().loadNotesPaged(offset: _offset);
+    if (!mounted) return;
+    setState(() { _items.addAll(list); _offset += list.length; _hasMore = list.length >= 20; _isLoading = false; });
+  }
+
   Future<void> _refresh() async {
-    final provider = context.read<AppProvider>();
-    await provider.loadNotes();
-    setState(() {
-      _displayedNotes.clear();
-      _hasMore = true;
-    });
-    await _loadMoreNotes();
+    await context.read<AppProvider>().loadNotes();
+    await _loadFirst();
   }
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      children: [
-        Expanded(
-          child: Consumer<AppProvider>(
-            builder: (context, provider, child) {
-              final allNotes = provider.notes;
-              _syncDisplayedNotes(allNotes);
-
-              if (_firstLoad) {
-                return _buildSkeleton();
-              }
-
-              if (allNotes.isEmpty && _displayedNotes.isEmpty) {
-                final colors = Theme.of(context).colorScheme;
-                return RefreshIndicator(
-                  onRefresh: _refresh,
-                  color: colors.primary,
-                  backgroundColor: colors.surface,
-                  child: ListView(
-                    physics: const AlwaysScrollableScrollPhysics(),
-                    children: [_buildEmptyState(context)],
-                  ),
-                );
-              }
-
-              if (_layoutStyle == 1) {
-                return _buildWaterfallView();
-              }
-              if (_layoutStyle == 2) {
-                return _buildTimelineView();
-              }
-              return _buildListView();
-            },
-          ),
-        ),
-      ],
-    );
+    final colors = Theme.of(context).colorScheme;
+    return Consumer<AppProvider>(builder: (context, provider, _) {
+      if (_items.isEmpty && _isLoading) return _buildSkeleton();
+      if (_items.isEmpty) {
+        return RefreshIndicator(onRefresh: _refresh, color: colors.primary, backgroundColor: colors.surface,
+            child: ListView(physics: const AlwaysScrollableScrollPhysics(), children: [_buildEmptyState(context)]));
+      }
+      if (_layoutStyle == 1) return _buildWaterfallView();
+      if (_layoutStyle == 2) return _buildTimelineView();
+      return _buildListView();
+    });
   }
 
   Widget _buildSkeleton() {
     switch (_layoutStyle) {
-      case 1:
-        return _buildWaterfallSkeleton();
-      case 2:
-        return const NoteSkeletonList();
-      default:
-        return const NoteSkeletonList();
+      case 1: return _buildWaterfallSkeleton();
+      default: return const NoteSkeletonList();
     }
   }
 
   Widget _buildWaterfallSkeleton() {
     final colors = Theme.of(context).colorScheme;
-    return SingleChildScrollView(
-      padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: List.generate(2, (_) => Expanded(
-          child: Column(
-            children: List.generate(4, (_) => Container(
-              margin: const EdgeInsets.only(bottom: 8),
-              decoration: BoxDecoration(
-                color: colors.surface,
-                borderRadius: BorderRadius.circular(10),
-                boxShadow: [
-                  BoxShadow(color: Colors.black.withValues(alpha: 0.04), blurRadius: 6, offset: const Offset(0, 2)),
-                ],
-              ),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  const ShimmerSkeleton(width: double.infinity, height: 140, borderRadius: 10),
-                  Padding(
-                    padding: const EdgeInsets.all(10),
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        const ShimmerSkeleton(width: double.infinity, height: 14),
-                        const SizedBox(height: 6),
-                        const ShimmerSkeleton(width: double.infinity, height: 12),
-                        const SizedBox(height: 6),
-                        const ShimmerSkeleton(width: 60, height: 10),
-                      ],
-                    ),
-                  ),
-                ],
-              ),
-            )),
-          ),
-        )),
-      ),
+    return SingleChildScrollView(padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
+      child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: List.generate(2, (_) => Expanded(
+        child: Column(children: List.generate(4, (_) => Container(margin: const EdgeInsets.only(bottom: 8),
+          decoration: BoxDecoration(color: colors.surface, borderRadius: BorderRadius.circular(10),
+              boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.04), blurRadius: 6, offset: const Offset(0, 2))]),
+          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+            const ShimmerSkeleton(width: double.infinity, height: 140, borderRadius: 10),
+            Padding(padding: const EdgeInsets.all(10), child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+              const ShimmerSkeleton(width: double.infinity, height: 14), const SizedBox(height: 6),
+              const ShimmerSkeleton(width: double.infinity, height: 12), const SizedBox(height: 6),
+              const ShimmerSkeleton(width: 60, height: 10),
+            ])),
+          ]),
+        ))),
+      ))),
     );
   }
 
   Widget _buildListView() {
     final colors = Theme.of(context).colorScheme;
-    return RefreshIndicator(
-      onRefresh: _refresh,
-      color: colors.primary,
-      backgroundColor: colors.surface,
-      child: ListView.builder(
-        controller: _scrollController,
-        padding: const EdgeInsets.fromLTRB(12, 10, 12, 100),
-        itemCount: _displayedNotes.length + (_hasMore ? 1 : 0),
+    return RefreshIndicator(onRefresh: _refresh, color: colors.primary, backgroundColor: colors.surface,
+      child: ListView.builder(controller: _scrollController, padding: const EdgeInsets.fromLTRB(12, 10, 12, 100),
+        itemCount: _items.length + (_hasMore ? 1 : 0),
         itemBuilder: (context, index) {
-          if (index >= _displayedNotes.length) {
-            return Padding(
-              padding: const EdgeInsets.symmetric(vertical: 16),
-              child: Center(
-                child: SizedBox(
-                  width: 20, height: 20,
-                  child: CircularProgressIndicator(strokeWidth: 2, color: colors.primary),
-                ),
-              ),
-            );
-          }
-          return NoteListItem(note: _displayedNotes[index]);
+          if (index >= _items.length) return _buildLoadMore();
+          return NoteListItem(note: _items[index]);
         },
       ),
     );
@@ -231,25 +144,12 @@ class _NoteTabPageState extends State<NoteTabPage> {
 
   Widget _buildTimelineView() {
     final colors = Theme.of(context).colorScheme;
-    return RefreshIndicator(
-      onRefresh: _refresh,
-      color: colors.primary,
-      backgroundColor: colors.surface,
-      child: ListView.builder(
-        controller: _scrollController,
-        padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
-        itemCount: _displayedNotes.length + (_hasMore ? 1 : 0),
+    return RefreshIndicator(onRefresh: _refresh, color: colors.primary, backgroundColor: colors.surface,
+      child: ListView.builder(controller: _scrollController, padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
+        itemCount: _items.length + (_hasMore ? 1 : 0),
         itemBuilder: (context, index) {
-          if (index >= _displayedNotes.length) {
-            return Padding(
-              padding: const EdgeInsets.symmetric(vertical: 16),
-              child: Center(
-                child: SizedBox(width: 20, height: 20,
-                    child: CircularProgressIndicator(strokeWidth: 2, color: colors.primary)),
-              ),
-            );
-          }
-          return _buildTimelineItem(_displayedNotes[index]);
+          if (index >= _items.length) return _buildLoadMore();
+          return _buildTimelineItem(_items[index]);
         },
       ),
     );
@@ -258,127 +158,54 @@ class _NoteTabPageState extends State<NoteTabPage> {
   Widget _buildTimelineItem(Note note) {
     final colors = Theme.of(context).colorScheme;
     return GestureDetector(
-      onTap: () {
-        Navigator.pushNamed(context, '/note-detail', arguments: note).then((_) async {
-          await context.read<AppProvider>().loadNotes();
-        });
-      },
+      onTap: () => Navigator.pushNamed(context, '/note-detail', arguments: note).then((_) => _loadFirst()),
       onLongPress: () => _showDeleteDialog(context, note),
-      child: IntrinsicHeight(
-        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          children: [
-            SizedBox(
-              width: 40,
-              child: Column(
-                children: [
-                  Container(
-                    width: 10,
-                    height: 10,
-                    decoration: BoxDecoration(
-                      color: colors.primary,
-                      shape: BoxShape.circle,
-                      border: Border.all(color: colors.surface, width: 2),
-                    ),
-                  ),
-                  Expanded(
-                    child: Container(
-                      width: 1,
-                      color: colors.outline,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-            Expanded(
-              child: Container(
-                margin: const EdgeInsets.only(bottom: 16),
-                padding: const EdgeInsets.all(14),
-                decoration: BoxDecoration(
-                  color: colors.surfaceContainerHigh,
-                  borderRadius: BorderRadius.circular(12),
-                ),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Text(
-                      _formatFullDate(note.updatedAt),
-                      style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.4)),
-                    ),
-                    if (note.title.isNotEmpty) ...[
-                      const SizedBox(height: 6),
-                      Text(
-                        note.title,
-                        style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface),
-                        maxLines: 1,
-                        overflow: TextOverflow.ellipsis,
-                      ),
-                    ],
-                    const SizedBox(height: 6),
-                    Text(
-                      _getPreviewText(note),
-                      maxLines: 2,
-                      overflow: TextOverflow.ellipsis,
-                      style: TextStyle(fontSize: 13, color: colors.onSurface.withValues(alpha: 0.5), height: 1.5),
-                    ),
-                    if (note.tags.isNotEmpty) ...[
-                      const SizedBox(height: 8),
-                      Wrap(
-                        spacing: 6,
-                        runSpacing: 4,
-                        children: note.tags.map((tag) => Container(
-                          padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 2),
-                          decoration: BoxDecoration(
-                            color: colors.surface,
-                            borderRadius: BorderRadius.circular(4),
-                          ),
-                          child: Text(tag, style: TextStyle(fontSize: 10, color: colors.onSurface.withValues(alpha: 0.4))),
-                        )).toList(),
-                      ),
-                    ],
-                  ],
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
+      child: IntrinsicHeight(child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
+        SizedBox(width: 40, child: Column(children: [
+          Container(width: 10, height: 10,
+              decoration: BoxDecoration(color: colors.primary, shape: BoxShape.circle, border: Border.all(color: colors.surface, width: 2))),
+          Expanded(child: Container(width: 1, color: colors.outline)),
+        ])),
+        Expanded(child: Container(margin: const EdgeInsets.only(bottom: 16), padding: const EdgeInsets.all(14),
+          decoration: BoxDecoration(color: colors.surfaceContainerHigh, borderRadius: BorderRadius.circular(12)),
+          child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
+            Text(_formatFullDate(note.updatedAt), style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.4))),
+            if (note.title.isNotEmpty) ...[const SizedBox(height: 6),
+              Text(note.title, style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface), maxLines: 1, overflow: TextOverflow.ellipsis),
+            ],
+            const SizedBox(height: 6),
+            Text(_getPreviewText(note), maxLines: 2, overflow: TextOverflow.ellipsis,
+                style: TextStyle(fontSize: 13, color: colors.onSurface.withValues(alpha: 0.5), height: 1.5)),
+            if (note.tags.isNotEmpty) ...[const SizedBox(height: 8),
+              Wrap(spacing: 6, runSpacing: 4, children: note.tags.map((tag) => Container(
+                padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 2),
+                decoration: BoxDecoration(color: colors.surface, borderRadius: BorderRadius.circular(4)),
+                child: Text(tag, style: TextStyle(fontSize: 10, color: colors.onSurface.withValues(alpha: 0.4))),
+              )).toList()),
+            ],
+          ]),
+        )),
+      ])),
     );
   }
 
-  String _formatFullDate(DateTime date) {
-    return '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')} '
-        '${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
-  }
+  String _formatFullDate(DateTime date) =>
+      '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')} ${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
 
   Widget _buildWaterfallView() {
     final colors = Theme.of(context).colorScheme;
     final leftItems = <Note>[];
     final rightItems = <Note>[];
-    for (int i = 0; i < _displayedNotes.length; i++) {
-      if (i % 2 == 0) {
-        leftItems.add(_displayedNotes[i]);
-      } else {
-        rightItems.add(_displayedNotes[i]);
-      }
+    for (int i = 0; i < _items.length; i++) {
+      (i % 2 == 0 ? leftItems : rightItems).add(_items[i]);
     }
-
-    return RefreshIndicator(
-      onRefresh: _refresh,
-      color: colors.primary,
-      backgroundColor: colors.surface,
-      child: SingleChildScrollView(
-        controller: _scrollController,
-        padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
-        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Expanded(child: Column(children: leftItems.map((n) => _buildWaterfallCard(n)).toList())),
-            const SizedBox(width: 8),
-            Expanded(child: Column(children: rightItems.map((n) => _buildWaterfallCard(n)).toList())),
-          ],
-        ),
+    return RefreshIndicator(onRefresh: _refresh, color: colors.primary, backgroundColor: colors.surface,
+      child: SingleChildScrollView(controller: _scrollController, padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
+        child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
+          Expanded(child: Column(children: [...leftItems.map(_buildWaterfallCard), if (_hasMore) _buildLoadMore()])),
+          const SizedBox(width: 8),
+          Expanded(child: Column(children: rightItems.map(_buildWaterfallCard).toList())),
+        ]),
       ),
     );
   }
@@ -389,137 +216,56 @@ class _NoteTabPageState extends State<NoteTabPage> {
     final images = note.images;
     final hasImage = images.isNotEmpty;
     final extraCount = images.length - 1;
-
     return GestureDetector(
-      onTap: () {
-        Navigator.pushNamed(context, '/note-detail', arguments: note).then((_) async {
-          await context.read<AppProvider>().loadNotes();
-        });
-      },
+      onTap: () => Navigator.pushNamed(context, '/note-detail', arguments: note).then((_) => _loadFirst()),
       onLongPress: () => _showDeleteDialog(context, note),
-      child: Container(
-        margin: const EdgeInsets.only(bottom: 8),
-        decoration: BoxDecoration(
-          color: colors.surface,
-          borderRadius: BorderRadius.circular(10),
-          boxShadow: [
-            BoxShadow(
-              color: Colors.black.withValues(alpha: 0.04),
-              blurRadius: 6,
-              offset: const Offset(0, 2),
-            ),
-          ],
-        ),
+      child: Container(margin: const EdgeInsets.only(bottom: 8),
+        decoration: BoxDecoration(color: colors.surface, borderRadius: BorderRadius.circular(10),
+            boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.04), blurRadius: 6, offset: const Offset(0, 2))]),
         clipBehavior: Clip.antiAlias,
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            if (hasImage)
-              Stack(
-                children: [
-                  ClipRRect(
-                    borderRadius: const BorderRadius.vertical(top: Radius.circular(10)),
-                    child: FadeInLocalImage(
-                      path: images.first,
-                      fit: BoxFit.cover,
-                      errorWidget: const SizedBox.shrink(),
-                    ),
-                  ),
-                  if (extraCount > 0)
-                    Positioned(
-                      top: 6,
-                      right: 6,
-                      child: Container(
-                        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
-                        decoration: BoxDecoration(
-                          color: Colors.black.withValues(alpha: 0.45),
-                          borderRadius: BorderRadius.circular(10),
-                        ),
-                        child: Text(
-                          '+$extraCount',
-                          style: const TextStyle(fontSize: 11, color: Colors.white, fontWeight: FontWeight.w600),
-                        ),
-                      ),
-                    ),
-                ],
-              ),
-            Padding(
-              padding: const EdgeInsets.fromLTRB(10, 8, 10, 10),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  if (note.title.isNotEmpty)
-                    Text(
-                      note.title,
-                      maxLines: 2,
-                      overflow: TextOverflow.ellipsis,
-                      style: TextStyle(
-                        fontSize: 13,
-                        fontWeight: FontWeight.w600,
-                        color: colors.onSurface,
-                        height: 1.3,
-                      ),
-                    ),
-                  if (contentText.isNotEmpty && contentText != '(无内容)') ...[
-                    if (note.title.isNotEmpty) const SizedBox(height: 4),
-                    Text(
-                      contentText,
-                      maxLines: 2,
-                      overflow: TextOverflow.ellipsis,
-                      style: TextStyle(
-                        fontSize: 11,
-                        color: colors.onSurface.withValues(alpha: 0.4),
-                        height: 1.4,
-                      ),
-                    ),
-                  ],
-                  const SizedBox(height: 6),
-                  Row(
-                    children: [
-                      Expanded(
-                        child: Text(
-                          _formatTime(note.updatedAt),
-                          style: TextStyle(fontSize: 10, color: colors.onSurface.withValues(alpha: 0.25)),
-                        ),
-                      ),
-                      if (note.tags.isNotEmpty)
-                        Container(
-                          padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
-                          decoration: BoxDecoration(
-                            color: colors.surfaceContainerHighest,
-                            borderRadius: BorderRadius.circular(3),
-                          ),
-                          child: Text(
-                            note.tags.first,
-                            style: TextStyle(fontSize: 10, color: colors.onSurface.withValues(alpha: 0.4)),
-                          ),
-                        ),
-                    ],
-                  ),
-                ],
+        child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
+          if (hasImage) Stack(children: [
+            ClipRRect(borderRadius: const BorderRadius.vertical(top: Radius.circular(10)),
+                child: FadeInLocalImage(path: images.first, fit: BoxFit.cover, errorWidget: const SizedBox.shrink())),
+            if (extraCount > 0) Positioned(top: 6, right: 6,
+              child: Container(padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                decoration: BoxDecoration(color: Colors.black.withValues(alpha: 0.45), borderRadius: BorderRadius.circular(10)),
+                child: Text('+$extraCount', style: const TextStyle(fontSize: 11, color: Colors.white, fontWeight: FontWeight.w600)),
               ),
             ),
-          ],
-        ),
+          ]),
+          Padding(padding: const EdgeInsets.fromLTRB(10, 8, 10, 10),
+            child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
+              if (note.title.isNotEmpty) Text(note.title, maxLines: 2, overflow: TextOverflow.ellipsis,
+                  style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: colors.onSurface, height: 1.3)),
+              if (contentText.isNotEmpty && contentText != '(无内容)') ...[
+                if (note.title.isNotEmpty) const SizedBox(height: 4),
+                Text(contentText, maxLines: 2, overflow: TextOverflow.ellipsis,
+                    style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.4), height: 1.4)),
+              ],
+              const SizedBox(height: 6),
+              Row(children: [
+                Expanded(child: Text(_formatTime(note.updatedAt),
+                    style: TextStyle(fontSize: 10, color: colors.onSurface.withValues(alpha: 0.25)))),
+                if (note.tags.isNotEmpty) Container(padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
+                  decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(3)),
+                  child: Text(note.tags.first, style: TextStyle(fontSize: 10, color: colors.onSurface.withValues(alpha: 0.4))),
+                ),
+              ]),
+            ]),
+          ),
+        ]),
       ),
     );
   }
 
   String _getPreviewText(Note note) {
-    final text = note.content
-        .replaceAll(RegExp(r'#'), '')
-        .replaceAll(RegExp(r'\*'), '')
-        .replaceAll(RegExp(r'`'), '')
-        .replaceAll(RegExp(r'[\[\]\(\)]'), '')
-        .trim();
+    final text = note.content.replaceAll(RegExp(r'[#*\[\]\(\)]'), '').trim();
     return text.isEmpty ? '(无内容)' : text;
   }
 
   String _formatTime(DateTime date) {
-    final now = DateTime.now();
-    final diff = now.difference(date);
+    final diff = DateTime.now().difference(date);
     if (diff.inMinutes < 1) return '刚刚';
     if (diff.inHours < 1) return '${diff.inMinutes}分钟前';
     if (diff.inDays < 1) return '${diff.inHours}小时前';
@@ -527,102 +273,47 @@ class _NoteTabPageState extends State<NoteTabPage> {
     return '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}';
   }
 
-  void _showDeleteDialog(BuildContext context, Note note) {
-    final colors = Theme.of(context).colorScheme;
-    showDialog(
-      context: context,
-      builder: (context) => AlertDialog(
-        backgroundColor: colors.surface,
-        elevation: 0,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
-        title: Text('确认删除', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: colors.onSurface)),
-        content: Text('确定要删除这条笔记吗？删除后可在回收站恢复。',
-            style: TextStyle(fontSize: 14, color: colors.onSurface.withValues(alpha: 0.6), height: 1.5)),
-        actions: [
-          TextButton(
-            onPressed: () => Navigator.pop(context),
-            style: TextButton.styleFrom(
-              foregroundColor: colors.onSurface.withValues(alpha: 0.6),
-              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-            ),
-            child: const Text('取消'),
-          ),
-          ElevatedButton(
-            onPressed: () async {
-              await context.read<AppProvider>().removeNote(note.id);
-              Navigator.pop(context);
-            },
-            style: ElevatedButton.styleFrom(
-              backgroundColor: colors.error,
-              foregroundColor: colors.onError,
-              elevation: 0,
-              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
-              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-            ),
-            child: const Text('删除'),
-          ),
-        ],
-        actionsPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-      ),
+  Widget _buildLoadMore() {
+    return Padding(padding: const EdgeInsets.symmetric(vertical: 20),
+      child: Center(child: _isLoading
+          ? SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2, color: Theme.of(context).colorScheme.primary))
+          : Text('没有更多了', style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.3)))),
     );
   }
 
-  void _syncDisplayedNotes(List<Note> allNotes) {
-    final validNoteIds = allNotes.map((n) => n.id).toSet();
-    final initialLength = _displayedNotes.length;
-    _displayedNotes.removeWhere((note) => !validNoteIds.contains(note.id));
-
-    final displayedIds = _displayedNotes.map((n) => n.id).toSet();
-    final hasNewNotes = allNotes.any((note) => !displayedIds.contains(note.id));
-
-    bool hasUpdates = false;
-    for (int i = 0; i < _displayedNotes.length; i++) {
-      final localNote = _displayedNotes[i];
-      final providerNote = allNotes.firstWhere((n) => n.id == localNote.id);
-      if (localNote.updatedAt != providerNote.updatedAt) {
-        hasUpdates = true;
-        break;
-      }
-    }
-
-    if (_displayedNotes.length < initialLength || hasNewNotes || hasUpdates) {
-      _displayedNotes.clear();
-      _displayedNotes.addAll(allNotes);
-      _hasMore = false;
-    }
+  void _showDeleteDialog(BuildContext context, Note note) {
+    final colors = Theme.of(context).colorScheme;
+    showDialog(context: context, builder: (ctx) => AlertDialog(
+      backgroundColor: colors.surface, elevation: 0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      title: Text('确认删除', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: colors.onSurface)),
+      content: Text('确定要删除这条笔记吗？删除后可在回收站恢复。',
+          style: TextStyle(fontSize: 14, color: colors.onSurface.withValues(alpha: 0.6), height: 1.5)),
+      actions: [
+        TextButton(onPressed: () => Navigator.pop(ctx), child: Text('取消', style: TextStyle(color: colors.onSurface.withValues(alpha: 0.6)))),
+        ElevatedButton(onPressed: () async { await context.read<AppProvider>().removeNote(note.id); Navigator.pop(ctx); _loadFirst(); },
+          style: ElevatedButton.styleFrom(backgroundColor: colors.error, foregroundColor: colors.onError, elevation: 0,
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8)),
+          child: const Text('删除'),
+        ),
+      ],
+      actionsPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+    ));
   }
 
   Widget _buildEmptyState(BuildContext context) {
     final colors = Theme.of(context).colorScheme;
-    return Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Container(
-            width: 80, height: 80,
-            decoration: BoxDecoration(
-              color: colors.surfaceContainerHighest,
-              borderRadius: BorderRadius.circular(20),
-            ),
-            child: Icon(Icons.note_outlined, size: 40, color: colors.onSurface.withValues(alpha: 0.25)),
-          ),
-          const SizedBox(height: 20),
-          Text('暂无笔记', style: TextStyle(fontSize: 16, color: colors.onSurface.withValues(alpha: 0.4))),
-          const SizedBox(height: 24),
-          InkWell(
-            onTap: () => Navigator.pushNamed(context, '/note-form'),
-            child: Container(
-              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
-              decoration: BoxDecoration(
-                color: colors.primary,
-                borderRadius: BorderRadius.circular(8),
-              ),
-              child: Text('添加记录',
-                  style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onPrimary)),
-            ),
-          ),
-        ],
+    return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
+      Container(width: 80, height: 80,
+          decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(20)),
+          child: Icon(Icons.note_outlined, size: 40, color: colors.onSurface.withValues(alpha: 0.25))),
+      const SizedBox(height: 20),
+      Text('暂无笔记', style: TextStyle(fontSize: 16, color: colors.onSurface.withValues(alpha: 0.4))),
+      const SizedBox(height: 24),
+      InkWell(onTap: () => Navigator.pushNamed(context, '/note-form'),
+        child: Container(padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+            decoration: BoxDecoration(color: colors.primary, borderRadius: BorderRadius.circular(8)),
+            child: Text('添加记录', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onPrimary))),
       ),
-    );
+    ]));
   }
 }

lib/pages/profile_page.dart

@@ -10,6 +10,7 @@ import '../utils/user_prefs.dart';
 import '../utils/toast_util.dart';
 import 'recycle_bin_page.dart';
 import 'sync/backup_page.dart';
+import '../widgets/fade_in_local_image.dart';
 import 'statistics_page.dart';
 import 'sync/cloud_sync_page.dart';
 import 'app_icon_picker_page.dart';
@@ -129,8 +130,8 @@ class _ProfilePageState extends State<ProfilePage> {
                       ),
                       clipBehavior: Clip.antiAlias,
                       child: _avatarPath != null && _avatarPath!.isNotEmpty
-                          ? Image.file(File(_avatarPath!), fit: BoxFit.cover,
-                              errorBuilder: (_, __, ___) => Icon(Icons.person_outline, size: 32, color: colors.onSurface.withValues(alpha: 0.25)))
+                          ? FadeInLocalImage(path: _avatarPath, fit: BoxFit.cover,
+                              errorWidget: Icon(Icons.person_outline, size: 32, color: colors.onSurface.withValues(alpha: 0.25)))
                           : Icon(Icons.person_outline, size: 32, color: colors.onSurface.withValues(alpha: 0.25)),
                     ),
                   ),

lib/pages/search_page.dart

@@ -7,6 +7,7 @@ import '../models/data_models.dart';
 import 'movies/movie_detail_page.dart';
 import 'book/book_detail_page.dart';
 import 'note/note_detail_page.dart';
+import '../widgets/fade_in_local_image.dart';
 
 /// 搜索页面
 class SearchPage extends StatefulWidget {
@@ -379,7 +380,8 @@ class _SearchPageState extends State<SearchPage> {
       decoration: BoxDecoration(color: colors.outlineVariant, borderRadius: BorderRadius.circular(6)),
       clipBehavior: Clip.antiAlias,
       child: path != null && path.isNotEmpty
-          ? Image.file(File(path), fit: BoxFit.cover, errorBuilder: (_, __, ___) => Icon(fallback, size: 20, color: colors.onSurface.withValues(alpha: 0.25)))
+          ? FadeInLocalImage(path: path, fit: BoxFit.cover,
+              errorWidget: Icon(fallback, size: 20, color: colors.onSurface.withValues(alpha: 0.25)))
           : Icon(fallback, size: 20, color: colors.onSurface.withValues(alpha: 0.25)),
     );
   }

lib/pages/stroll_page.dart

@@ -5,6 +5,7 @@ import 'package:provider/provider.dart';
 import '../providers/app_provider.dart';
 import '../models/data_models.dart';
 import '../widgets/animated_star_rating.dart';
+import '../widgets/fade_in_local_image.dart';
 
 /// 漫步页面 - 随机发现内容
 class StrollPage extends StatefulWidget {
@@ -190,7 +191,7 @@ class _StrollPageState extends State<StrollPage> with SingleTickerProviderStateM
                   style: TextStyle(fontSize: 15, color: colors.onSurface.withValues(alpha: 0.3), height: 1.6)))
           : Consumer<AppProvider>(builder: (context, provider, _) {
               final item = _currentItem!;
-              final hasImage = item.imagePath != null && item.imagePath!.isNotEmpty && File(item.imagePath!).existsSync();
+              final hasImage = item.imagePath != null && item.imagePath!.isNotEmpty;
 
               return FadeTransition(
                 opacity: _fadeAnim,
@@ -298,8 +299,7 @@ class _StrollPageState extends State<StrollPage> with SingleTickerProviderStateM
       ),
       clipBehavior: Clip.antiAlias,
       child: hasImage
-          ? Image.file(File(item.imagePath!), fit: BoxFit.cover,
-              errorBuilder: (_, __, ___) => _buildPlaceholder(item))
+          ? FadeInLocalImage(path: item.imagePath, fit: BoxFit.cover)
           : _buildPlaceholder(item),
     );
   }
@@ -321,8 +321,7 @@ class _StrollPageState extends State<StrollPage> with SingleTickerProviderStateM
         mainAxisSize: MainAxisSize.min,
         children: [
           if (hasImage)
-            Image.file(File(item.imagePath!), fit: BoxFit.cover, height: 200, width: double.infinity,
-                errorBuilder: (_, __, ___) => const SizedBox.shrink()),
+            FadeInLocalImage(path: item.imagePath, fit: BoxFit.cover, height: 200, width: double.infinity),
           Padding(
             padding: const EdgeInsets.all(20),
             child: Text(item.detail.isEmpty ? '(无内容)' : item.detail,

lib/pages/sync/cloud_sync_page.dart

@@ -31,7 +31,6 @@ class CloudSyncPage extends StatelessWidget {
             icon: Icons.sync_outlined,
             title: '服务端实时同步',
             subtitle: '自建服务端，多设备数据实时同步',
-            enabled: false,
             onTap: () =>
                 Navigator.push(context, MaterialPageRoute(builder: (_) => const ServerSyncPage())),
           ),

lib/pages/sync/server_sync_page.dart

@@ -117,7 +117,7 @@ class _ServerSyncPageState extends State<ServerSyncPage> {
       _startStatusPolling();
       await _prefs.setSyncEnabled(true);
       _syncEnabled = true;
-      await ServerSyncService.instance.uploadToServer();
+      await ServerSyncService.instance.syncWithServer();
       if (mounted) ToastUtil.show(context, '激活成功，实时同步已开启');
     } else {
       final error = result?['error'] ?? '激活失败';
@@ -126,31 +126,28 @@ class _ServerSyncPageState extends State<ServerSyncPage> {
   }
 
   Future<void> _toggleSync(bool value) async {
-    await _prefs.setSyncEnabled(value);
-    setState(() => _syncEnabled = value);
-
     if (value && _isActivated) {
-      await ServerSyncService.instance.uploadToServer();
+      // 开启同步：合并本地与服务端数据
+      await _prefs.setSyncEnabled(true);
+      setState(() => _syncEnabled = true);
+      if (mounted) ToastUtil.show(context, '正在同步数据...');
+      await ServerSyncService.instance.syncWithServer();
       final provider = context.read<AppProvider>();
       await provider.loadMovies();
       await provider.loadBooks();
       await provider.loadNotes();
-      if (mounted) ToastUtil.show(context, '已切换到服务端数据');
+      if (mounted) ToastUtil.show(context, '同步已开启，数据已合并');
     } else {
-      // 关闭同步：从服务端下载最新数据到本地
-      if (mounted) ToastUtil.show(context, '正在从服务端同步数据...');
-      final success = await ServerSyncService.instance.downloadToLocal();
-      if (mounted) {
-        if (success) {
-          final provider = context.read<AppProvider>();
-          await provider.loadMovies();
-          await provider.loadBooks();
-          await provider.loadNotes();
-          ToastUtil.show(context, '数据已下载到本地');
-        } else {
-          ToastUtil.show(context, '下载失败，使用本地数据');
-        }
-      }
+      // 关闭同步：先合并最新数据，再切换到本地
+      if (mounted) ToastUtil.show(context, '正在同步数据到本地...');
+      await ServerSyncService.instance.syncWithServer();
+      await _prefs.setSyncEnabled(false);
+      setState(() => _syncEnabled = false);
+      final provider = context.read<AppProvider>();
+      await provider.loadMovies();
+      await provider.loadBooks();
+      await provider.loadNotes();
+      if (mounted) ToastUtil.show(context, '同步已关闭，已切换到本地数据');
     }
   }