优化调整“我的”界面

2026-08-09 22:42:55 +08:00
parent 9cc492782e
commit 65231e204f
13 changed files with 682 additions and 292 deletions
--- a/lib/pages/book/book_tab_page.dart
+++ b/lib/pages/book/book_tab_page.dart
@@ -8,6 +8,7 @@ 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/top_fade_scrim.dart';
 import '../../widgets/fade_in_local_image.dart';
 import '../../widgets/master_detail_scaffold.dart';
 import '../../widgets/detail_placeholder.dart';
@@ -155,7 +156,14 @@ class _BookTabPageState extends State<BookTabPage> {
    final isWallMode = provider.bookshelfMode;
    final masterContent = Column(children: [
      if (!isWallMode) const BookStatusBar(),
-      Expanded(child: _buildBody(context)),
+      Expanded(
+        child: Stack(
+          children: [
+            _buildBody(context),
+            if (!isWallMode) const TopFadeScrim(),
+          ],
+        ),
+      ),
    ]);

    if (!isWideContent) return masterContent;
--- a/lib/pages/game/game_tab_page.dart
+++ b/lib/pages/game/game_tab_page.dart
@@ -7,6 +7,7 @@ import '../../widgets/game_status_bar.dart';
 import '../../widgets/game_list_item.dart';
 import '../../widgets/animated_star_rating.dart';
 import '../../widgets/shimmer_skeleton.dart';
+import '../../widgets/top_fade_scrim.dart';
 import '../../widgets/fade_in_local_image.dart';
 import '../../utils/responsive.dart';
 import '../../widgets/master_detail_scaffold.dart';
@@ -176,7 +177,14 @@ class _GameTabPageState extends State<GameTabPage> {
    final masterContent = Column(
      children: [
        if (!isWallMode) const GameStatusBar(),
-        Expanded(child: _buildBody(context)),
+        Expanded(
+          child: Stack(
+            children: [
+              _buildBody(context),
+              if (!isWallMode) const TopFadeScrim(),
+            ],
+          ),
+        ),
      ],
    );

--- a/lib/pages/movies/movie_tab_page.dart
+++ b/lib/pages/movies/movie_tab_page.dart
@@ -8,6 +8,7 @@ import '../../widgets/movie_category_bar.dart';
 import '../../widgets/movie_list_item.dart';
 import '../../widgets/animated_star_rating.dart';
 import '../../widgets/shimmer_skeleton.dart';
+import '../../widgets/top_fade_scrim.dart';
 import '../../widgets/fade_in_local_image.dart';
 import '../../utils/responsive.dart';
 import '../../widgets/master_detail_scaffold.dart';
@@ -207,7 +208,14 @@ class _MovieTabPageState extends State<MovieTabPage> {
          provider.movieDisplayMode == 1
              ? const MovieCategoryBar()
              : const MovieStatusBar(),
-        Expanded(child: _buildBody(context)),
+        Expanded(
+          child: Stack(
+            children: [
+              _buildBody(context),
+              if (!isWallMode) const TopFadeScrim(),
+            ],
+          ),
+        ),
      ],
    );

--- a/lib/pages/profile/layout_settings_page.dart
+++ b/lib/pages/profile/layout_settings_page.dart
@@ -19,8 +19,11 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
  int _gameLayout = 0;
  bool _movieWallMode = false;
  int _movieDisplayMode = 0;
+  int _movieStatusBarStyle = 0;
  bool _bookshelfMode = false;
+  int _bookStatusBarStyle = 0;
  bool _gameWallMode = false;
+  int _gameStatusBarStyle = 0;
  int _movieSortMode = 0;
  int _bookSortMode = 0;
  int _noteSortMode = 0;
@@ -36,8 +39,11 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
    _gameLayout = _userPrefs.gameLayoutStyle;
    _movieWallMode = _userPrefs.movieWallMode;
    _movieDisplayMode = _userPrefs.movieDisplayMode;
+    _movieStatusBarStyle = _userPrefs.movieStatusBarStyle;
    _bookshelfMode = _userPrefs.bookshelfMode;
+    _bookStatusBarStyle = _userPrefs.bookStatusBarStyle;
    _gameWallMode = _userPrefs.gameWallMode;
+    _gameStatusBarStyle = _userPrefs.gameStatusBarStyle;
    _movieSortMode = _userPrefs.movieSortMode;
    _bookSortMode = _userPrefs.bookSortMode;
    _noteSortMode = _userPrefs.noteSortMode;
@@ -103,6 +109,9 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
      parts.add('影视墙');
    } else {
      parts.add(_movieDisplayMode == 1 ? '分类状态' : '观看状态');
+      if (_movieDisplayMode == 0) {
+        parts.add(['胶囊', '下划线', '芯片', '下拉'][_movieStatusBarStyle]);
+      }
    }
    parts.add(['海报网格', '列表', '大图卡片'][_movieLayout]);
    parts.add(['更新时间', '创建时间', '评分', '观看日期', '上映时间'][_movieSortMode]);
@@ -111,7 +120,11 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {

  String get _bookSubtitle {
    final parts = <String>[];
-    if (_bookshelfMode) parts.add('书架模式');
+    if (_bookshelfMode) {
+      parts.add('书架模式');
+    } else {
+      parts.add(['胶囊', '下划线', '芯片', '下拉'][_bookStatusBarStyle]);
+    }
    parts.add(['海报网格', '列表'][_bookLayout]);
    parts.add(['更新时间', '创建时间', '评分', '开始阅读', '出版时间'][_bookSortMode]);
    return parts.join(' · ');
@@ -126,7 +139,11 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {

  String get _gameSubtitle {
    final parts = <String>[];
-    if (_gameWallMode) parts.add('游戏墙');
+    if (_gameWallMode) {
+      parts.add('游戏墙');
+    } else {
+      parts.add(['胶囊', '下划线', '芯片', '下拉'][_gameStatusBarStyle]);
+    }
    parts.add(['海报网格', '列表', '大图卡片'][_gameLayout]);
    parts.add(['更新时间', '创建时间', '评分', '发售时间'][_gameSortMode]);
    return parts.join(' · ');
@@ -384,6 +401,19 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
                options: const [(0, Icons.check_circle_outline, '观看状态'), (1, Icons.category_outlined, '分类状态')],
                onChanged: (v) { _setDisplayMode('movie', v); setSheetState(() {}); }, colors: colors,
              ),
+              if (_movieDisplayMode == 0) ...[
+                _sheetDivider(colors),
+                _sheetOptionRow(
+                  label: '状态栏样式', selected: _movieStatusBarStyle,
+                  options: const [
+                    (0, Icons.circle, '胶囊'),
+                    (1, Icons.format_underlined, '下划线'),
+                    (2, Icons.square_outlined, '芯片'),
+                    (3, Icons.arrow_drop_down_circle_outlined, '下拉'),
+                  ],
+                  onChanged: (v) { _setStatusBarStyle('movie', v); setSheetState(() {}); }, colors: colors,
+                ),
+              ],
            ],
            _sheetDivider(colors),
            _sheetOptionRow(
@@ -429,6 +459,19 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
              title: '书架模式', subtitle: '显示全部书籍，不区分状态',
              value: _bookshelfMode, onChanged: (v) { _setWallMode('book', v); setSheetState(() {}); }, colors: colors,
            ),
+            if (!_bookshelfMode) ...[
+              _sheetDivider(colors),
+              _sheetOptionRow(
+                label: '状态栏样式', selected: _bookStatusBarStyle,
+                options: const [
+                  (0, Icons.circle, '胶囊'),
+                  (1, Icons.format_underlined, '下划线'),
+                  (2, Icons.square_outlined, '芯片'),
+                  (3, Icons.arrow_drop_down_circle_outlined, '下拉'),
+                ],
+                onChanged: (v) { _setStatusBarStyle('book', v); setSheetState(() {}); }, colors: colors,
+              ),
+            ],
            _sheetDivider(colors),
            _sheetOptionRow(
              label: '布局样式', selected: _bookLayout,
@@ -509,6 +552,19 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
              title: '游戏墙模式', subtitle: '显示全部游戏，不区分状态',
              value: _gameWallMode, onChanged: (v) { _setWallMode('game', v); setSheetState(() {}); }, colors: colors,
            ),
+            if (!_gameWallMode) ...[
+              _sheetDivider(colors),
+              _sheetOptionRow(
+                label: '状态栏样式', selected: _gameStatusBarStyle,
+                options: const [
+                  (0, Icons.circle, '胶囊'),
+                  (1, Icons.format_underlined, '下划线'),
+                  (2, Icons.square_outlined, '芯片'),
+                  (3, Icons.arrow_drop_down_circle_outlined, '下拉'),
+                ],
+                onChanged: (v) { _setStatusBarStyle('game', v); setSheetState(() {}); }, colors: colors,
+              ),
+            ],
            _sheetDivider(colors),
            _sheetOptionRow(
              label: '布局样式', selected: _gameLayout,
@@ -577,6 +633,23 @@ class _LayoutSettingsPageState extends State<LayoutSettingsPage> {
    }
  }

+  void _setStatusBarStyle(String type, int value) async {
+    switch (type) {
+      case 'movie':
+        await _userPrefs.setMovieStatusBarStyle(value);
+        setState(() => _movieStatusBarStyle = value);
+        if (mounted) context.read<AppProvider>().setMovieStatusBarStyle(value);
+      case 'book':
+        await _userPrefs.setBookStatusBarStyle(value);
+        setState(() => _bookStatusBarStyle = value);
+        if (mounted) context.read<AppProvider>().setBookStatusBarStyle(value);
+      case 'game':
+        await _userPrefs.setGameStatusBarStyle(value);
+        setState(() => _gameStatusBarStyle = value);
+        if (mounted) context.read<AppProvider>().setGameStatusBarStyle(value);
+    }
+  }
+
  void _setLayout(String type, int value) async {
    switch (type) {
      case 'note':
--- a/lib/pages/profile/profile_page.dart
+++ b/lib/pages/profile/profile_page.dart
@@ -36,6 +36,9 @@ class _ProfilePageState extends State<ProfilePage> with RouteAware {
  String _motto = '好运不会眷顾一无所有之人。';
  String? _avatarPath;

+  // 我的模块切换索引 (0=影视, 1=阅读, 2=笔记, 3=游戏)
+  int _myModuleIndex = 0;
+
  @override
  void initState() {
    super.initState();
@@ -102,21 +105,8 @@ class _ProfilePageState extends State<ProfilePage> with RouteAware {
                  children: [
                    _buildHero(movies, books, notes, games),
                    const SizedBox(height: 20),
-                    if (_userPrefs.showMovieTab) ...[
-                      _buildModuleHeader('影视'),
-                      _buildMovieModule(movies),
-                      const SizedBox(height: 20),
-                    ],
-                    if (_userPrefs.showBookTab) ...[
-                      _buildModuleHeader('阅读'),
-                      _buildBookModule(books),
-                      const SizedBox(height: 20),
-                    ],
-                    if (_userPrefs.showNoteTab) ...[
-                      _buildModuleHeader('笔记'),
-                      _buildNoteModule(notes),
-                      const SizedBox(height: 20),
-                    ],
+                    _buildMyModule(movies, books, notes, games),
+                    const SizedBox(height: 20),
                    _buildTagsSection(movies, books, notes),
                    const SizedBox(height: 20),
                    _buildToolsGrid(context),
@@ -300,17 +290,136 @@ class _ProfilePageState extends State<ProfilePage> with RouteAware {
    );
  }

-  // ─── 模块标题 ──────────────────────────────────────────────────────
+  // 我的模块数据
+  static const _moduleDefs = <(String, IconData)>[
+    ('影视', Icons.movie_outlined),
+    ('阅读', Icons.menu_book_outlined),
+    ('笔记', Icons.sticky_note_2_outlined),
+    ('游戏', Icons.sports_esports_outlined),
+  ];
+
+  List<(String, IconData)> get _visibleModules {
+    final result = <(String, IconData)>[];
+    if (_userPrefs.showMovieTab) result.add(_moduleDefs[0]);
+    if (_userPrefs.showBookTab) result.add(_moduleDefs[1]);
+    if (_userPrefs.showNoteTab) result.add(_moduleDefs[2]);
+    if (_userPrefs.showGameTab) result.add(_moduleDefs[3]);
+    return result;
+  }
+
+  // 我的模块分发
+  Widget _buildMyModule(List<Movie> movies, List<Book> books, List<Note> notes, List<Game> games) {
+    final modules = _visibleModules;
+    if (modules.isEmpty) return const SizedBox.shrink();
+    final index = _myModuleIndex.clamp(0, modules.length - 1);
+    final (title, _) = modules[index];
+
+    Widget content;
+    switch (title) {
+      case '阅读':
+        content = _buildBookModule(books);
+        break;
+      case '笔记':
+        content = _buildNoteModule(notes);
+        break;
+      case '游戏':
+        content = _buildGameModule(games);
+        break;
+      default:
+        content = _buildMovieModule(movies);
+    }

-  Widget _buildModuleHeader(String title) {
    final colors = Theme.of(context).colorScheme;
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 20),
-      child: Text(title,
-          style: TextStyle(
-              fontSize: 16,
-              fontWeight: FontWeight.w600,
-              color: colors.onSurface)),
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 20),
+          child: Row(
+            children: [
+              Text(title,
+                  style: TextStyle(
+                      fontSize: 16,
+                      fontWeight: FontWeight.w600,
+                      color: colors.onSurface)),
+              const Spacer(),
+              // 图标切换器
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  for (int i = 0; i < modules.length; i++) ...[
+                    if (i != 0) const SizedBox(width: 6),
+                    GestureDetector(
+                      onTap: () => setState(() => _myModuleIndex = i),
+                      child: AnimatedContainer(
+                        duration: const Duration(milliseconds: 150),
+                        padding: const EdgeInsets.all(6),
+                        decoration: BoxDecoration(
+                          color: i == index ? colors.primary : Colors.transparent,
+                          borderRadius: BorderRadius.circular(8),
+                        ),
+                        child: Icon(modules[i].$2,
+                            size: 16,
+                            color: i == index
+                                ? colors.onPrimary
+                                : colors.onSurface.withValues(alpha: 0.4)),
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: 8),
+        content,
+      ],
+    );
+  }
+
+  // ─── 游戏模块 ──────────────────────────────────────────────────────
+
+  Widget _buildGameModule(List<Game> games) {
+    final colors = Theme.of(context).colorScheme;
+    final completed = games.where((g) => g.status == 'completed').length;
+    final playing = games.where((g) => g.status == 'playing').length;
+    final wantTo = games.where((g) => g.status == 'want_to_play').length;
+    final recent = games.toList()
+      ..sort((a, b) => b.createdAt.compareTo(a.createdAt));
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 20),
+          child: Row(children: [
+            _buildStatusTag('已通关', completed, true, colors),
+            const SizedBox(width: 10),
+            _buildStatusTag('在玩', playing, false, colors),
+            const SizedBox(width: 10),
+            _buildStatusTag('想玩', wantTo, false, colors),
+          ]),
+        ),
+        const SizedBox(height: 10),
+        if (recent.isNotEmpty)
+          SizedBox(
+            height: 120,
+            child: ListView.separated(
+              scrollDirection: Axis.horizontal,
+              padding: const EdgeInsets.symmetric(horizontal: 20),
+              itemCount: recent.take(15).length,
+              separatorBuilder: (_, __) => const SizedBox(width: 8),
+              itemBuilder: (_, i) => _buildCoverCard(
+                title: recent[i].title,
+                imagePath: recent[i].coverPath,
+                onTap: () => Navigator.pushNamed(context, '/game-detail',
+                    arguments: recent[i]),
+              ),
+            ),
+          )
+        else
+          _buildEmptyHint('暂无游戏记录'),
+      ],
    );
  }