优化图库界面

lib/pages/explore/gallery_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
 import '../../data/gallery/gallery_dao.dart';
 import '../../models/data_models.dart';
 import '../../widgets/fade_in_local_image.dart';
@@ -119,58 +120,49 @@ class _GalleryPageState extends State<GalleryPage> {
                         ],
                       ),
                     )
-                  : Column(
+                  : CustomScrollView(
-                      children: [
+                      slivers: [
                         // 类别筛选条
                         if (_availableCategories.length > 1)
-                          SizedBox(
+                          SliverToBoxAdapter(
-                            height: 44,
+                            child: SizedBox(
-                            child: ListView(
+                              height: 44,
-                              scrollDirection: Axis.horizontal,
+                              child: ListView(
-                              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+                                scrollDirection: Axis.horizontal,
-                              children: [
+                                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-                                _buildChip(null, '全部', colors),
+                                children: [
-                                ..._availableCategories.map((c) => _buildChip(c, _categoryLabels[c] ?? c, colors)),
+                                  _buildChip(null, '全部', colors),
-                              ],
+                                  ..._availableCategories.map((c) => _buildChip(c, _categoryLabels[c] ?? c, colors)),
+                                ],
+                              ),
                             ),
                           ),
-                        // 网格
+                        // 瀑布流网格
-                        Expanded(
+                        SliverPadding(
-                          child: GridView.builder(
+                          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
-                            padding: const EdgeInsets.all(4),
+                          sliver: SliverMasonryGrid.count(
-                            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                            crossAxisCount: 2,
-                              crossAxisCount: 3,
+                            mainAxisSpacing: 12,
-                              crossAxisSpacing: 4,
+                            crossAxisSpacing: 12,
-                              mainAxisSpacing: 4,
+                            childCount: _filteredItems.length,
-                            ),
-                            itemCount: _filteredItems.length,
                             itemBuilder: (context, index) {
                               final item = _filteredItems[index];
-                              return GestureDetector(
+                              return _buildCard(item, index, colors);
-                                onTap: () => _openPreview(index),
-                                child: ClipRRect(
-                                  borderRadius: BorderRadius.circular(8),
-                                  child: FadeInLocalImage(
-                                    path: item.path,
-                                    fit: BoxFit.cover,
-                                    errorWidget: Container(
-                                      color: colors.surfaceContainerHighest,
-                                      child: Icon(Icons.broken_image_outlined, color: colors.onSurface.withValues(alpha: 0.3)),
-                                    ),
-                                  ),
-                                ),
-                              );
                             },
                           ),
                         ),
                         // 底部计数
-                        SafeArea(
+                        SliverToBoxAdapter(
-                          top: false,
+                          child: SafeArea(
-                          child: Padding(
+                            top: false,
-                            padding: const EdgeInsets.symmetric(vertical: 8),
+                            child: Padding(
-                            child: Text(
+                              padding: const EdgeInsets.symmetric(vertical: 16),
-                              '共 ${_filteredItems.length} 张图片',
+                              child: Center(
-                              style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.5)),
+                                child: Text(
+                                  '共 ${_filteredItems.length} 张图片',
+                                  style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.5)),
+                                ),
+                              ),
                             ),
                           ),
                         ),
@@ -179,6 +171,86 @@ class _GalleryPageState extends State<GalleryPage> {
     );
   }
 
+  Widget _buildCard(GalleryItem item, int index, ColorScheme colors) {
+    final categoryLabel = _categoryLabels[item.category] ?? item.category;
+    final title = item.entityTitle.isNotEmpty ? item.entityTitle : '未命名';
+
+    return GestureDetector(
+      onTap: () => _openPreview(index),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // 图片
+          AspectRatio(
+            aspectRatio: _aspectRatioFor(item.category),
+            child: FadeInLocalImage(
+              path: item.path,
+              fit: BoxFit.cover,
+              errorWidget: Container(
+                color: colors.surfaceContainerHighest,
+                child: Icon(Icons.broken_image_outlined, color: colors.onSurface.withValues(alpha: 0.3)),
+              ),
+            ),
+          ),
+          const SizedBox(height: 8),
+          // 类别标签
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+            decoration: BoxDecoration(
+              color: colors.surfaceContainerHighest,
+              borderRadius: BorderRadius.circular(2),
+            ),
+            child: Text(
+              categoryLabel,
+              style: TextStyle(fontSize: 10, fontWeight: FontWeight.w500, color: colors.onSurface.withValues(alpha: 0.6)),
+            ),
+          ),
+          const SizedBox(height: 4),
+          // 标题
+          Text(
+            title,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: colors.onSurface),
+          ),
+          // 角色图片显示父作品
+          if (item.parentTitle != null && item.parentTitle!.isNotEmpty) ...[
+            const SizedBox(height: 2),
+            Text(
+              item.parentTitle!,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: TextStyle(fontSize: 11, color: colors.onSurface.withValues(alpha: 0.45)),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+
+  /// 不同类别用不同宽高比，让瀑布流有错落感
+  double _aspectRatioFor(String category) {
+    switch (category) {
+      case 'movie_poster':
+      case 'book_cover':
+      case 'game_cover':
+        return 2 / 3; // 竖版海报/封面
+      case 'movie_posters':
+        return 2 / 3;
+      case 'person_photo':
+      case 'movie_character':
+      case 'book_character':
+      case 'game_character':
+        return 3 / 4; // 人物照
+      case 'game_screenshot':
+        return 16 / 9; // 横版截图
+      case 'note_image':
+        return 1 / 1; // 笔记图片方形
+      default:
+        return 3 / 4;
+    }
+  }
+
   Widget _buildChip(String? category, String label, ColorScheme colors) {
     final selected = _selectedCategory == category;
     return Padding(

lib/pages/profile/profile_page.dart

@@ -41,6 +41,9 @@ class _ProfilePageState extends State<ProfilePage> with RouteAware {
   // 我的模块切换索引 (0=影视, 1=阅读, 2=游戏, 3=笔记)
   int _myModuleIndex = 0;
 
+  // Hero 背景封面路径缓存，避免每次 build 都 shuffle 换图
+  List<String> _heroCoverPaths = const [];
+
   @override
   void initState() {
     super.initState();
@@ -61,8 +64,13 @@ class _ProfilePageState extends State<ProfilePage> with RouteAware {
 
   @override
   void didPopNext() {
-    // 从其他页面返回时刷新用户数据（头像、昵称等）
+    // 从其他页面返回时刷新用户数据（头像、昵称等）+ 换一次背景图
     _loadUserData();
+    _invalidateHeroCache();
+  }
+
+  void _invalidateHeroCache() {
+    setState(() => _heroCoverPaths = const []);
   }
 
   Future<void> _loadUserData() async {
@@ -129,14 +137,18 @@ class _ProfilePageState extends State<ProfilePage> with RouteAware {
 
   Widget _buildHero(List<Movie> movies, List<Book> books, List<Note> notes, List<Game> games) {
     final colors = Theme.of(context).colorScheme;
-    final coverPaths = [
+    // 仅在缓存为空时重新生成（进入页面 / 从其他页面返回），避免每次 build 都 shuffle 换图
-      ...movies
+    if (_heroCoverPaths.isEmpty) {
-          .where((m) => m.posterPath != null && m.posterPath!.isNotEmpty)
+      _heroCoverPaths = [
-          .map((m) => m.posterPath!),
+        ...movies
-      ...books
+            .where((m) => m.posterPath != null && m.posterPath!.isNotEmpty)
-          .where((b) => b.coverPath != null && b.coverPath!.isNotEmpty)
+            .map((m) => m.posterPath!),
-          .map((b) => b.coverPath!),
+        ...books
-    ]..shuffle();
+            .where((b) => b.coverPath != null && b.coverPath!.isNotEmpty)
+            .map((b) => b.coverPath!),
+      ]..shuffle();
+    }
+    final coverPaths = _heroCoverPaths;
 
     final hasData = coverPaths.length >= 4;
 

lib/pages/profile/watchlist_page.dart

@@ -218,25 +218,18 @@ class _WatchlistPageState extends State<WatchlistPage> {
         padding: const EdgeInsets.all(10),
         decoration: BoxDecoration(
           color: colors.surfaceContainerHigh,
-          borderRadius: BorderRadius.circular(12),
+          borderRadius: BorderRadius.circular(6),
         ),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             // 封面
             Container(
-              width: 52,
+              width: 56,
-              height: 74,
+              height: 80,
               decoration: BoxDecoration(
                 color: colors.surfaceContainerHighest,
-                borderRadius: BorderRadius.circular(6),
+                borderRadius: BorderRadius.circular(4),
-                boxShadow: [
-                  BoxShadow(
-                    color: Colors.black.withValues(alpha: 0.08),
-                    blurRadius: 4,
-                    offset: const Offset(0, 2),
-                  ),
-                ],
               ),
               clipBehavior: Clip.antiAlias,
               child: item.imagePath != null && item.imagePath!.isNotEmpty
@@ -248,23 +241,12 @@ class _WatchlistPageState extends State<WatchlistPage> {
                   : Icon(Icons.image_outlined,
                       size: 18, color: colors.onSurface.withValues(alpha: 0.2)),
             ),
-            const SizedBox(width: 10),
+            const SizedBox(width: 12),
-            // 左侧竖色条
+            // 标题 + 底部信息
-            Container(
-              width: 3,
-              height: 50,
-              decoration: BoxDecoration(
-                color: _typeColor[item.type]!.withValues(alpha: 0.6),
-                borderRadius: BorderRadius.circular(2),
-              ),
-            ),
-            const SizedBox(width: 10),
-            // 标题 + 类型
             Expanded(
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  const SizedBox(height: 2),
                   Text(item.title,
                       maxLines: 2,
                       overflow: TextOverflow.ellipsis,
@@ -273,7 +255,7 @@ class _WatchlistPageState extends State<WatchlistPage> {
                           fontWeight: FontWeight.w500,
                           color: colors.onSurface,
                           height: 1.3)),
-                  const SizedBox(height: 6),
+                  const SizedBox(height: 8),
                   Row(
                     children: [
                       Icon(_typeIcon[item.type],
@@ -284,21 +266,16 @@ class _WatchlistPageState extends State<WatchlistPage> {
                               fontSize: 11,
                               fontWeight: FontWeight.w500,
                               color: _typeColor[item.type])),
+                      const Spacer(),
+                      Text(_formatRelative(item.createdAt),
+                          style: TextStyle(
+                              fontSize: 11,
+                              color: colors.onSurface.withValues(alpha: 0.4))),
                     ],
                   ),
                 ],
               ),
             ),
-            // 右侧加入时间
-            Column(
-              crossAxisAlignment: CrossAxisAlignment.end,
-              children: [
-                Text(_formatRelative(item.createdAt),
-                    style: TextStyle(
-                        fontSize: 11,
-                        color: colors.onSurface.withValues(alpha: 0.4))),
-              ],
-            ),
           ],
         ),
       ),

lib/utils/theme/app_theme.dart

@@ -75,6 +75,8 @@ class AppTheme {
         backgroundColor: scheme.surface,
         foregroundColor: scheme.onSurface,
         elevation: 0,
+        scrolledUnderElevation: 0,
+        surfaceTintColor: Colors.transparent,
         centerTitle: false,
         titleSpacing: 24,
         titleTextStyle: TextStyle(
@@ -207,6 +209,8 @@ class AppTheme {
         backgroundColor: _white,
         foregroundColor: _black,
         elevation: 0,
+        scrolledUnderElevation: 0,
+        surfaceTintColor: Colors.transparent,
         centerTitle: false,
         titleSpacing: 24,
         titleTextStyle: TextStyle(
@@ -431,6 +435,8 @@ class AppTheme {
         backgroundColor: _black,
         foregroundColor: _white,
         elevation: 0,
+        scrolledUnderElevation: 0,
+        surfaceTintColor: Colors.transparent,
         centerTitle: false,
         titleSpacing: 24,
         titleTextStyle: TextStyle(