标签页优化

lib/pages/settings/tag_management_page.dart

@@ -25,6 +25,7 @@ class _TagManagementPageState extends State<TagManagementPage> {
   String _searchQuery = '';
   final _searchController = TextEditingController();
   bool _showTypePicker = false;
+  int _selectedGroup = 0; // 0=已使用, 1=未使用, 2=隐藏
 
   @override
   void initState() {
@@ -108,7 +109,7 @@ class _TagManagementPageState extends State<TagManagementPage> {
 
     return Scaffold(
       backgroundColor: colors.surfaceContainerHigh,
-      appBar: AppBar(title: const Text('标签管理'), actions: [
+      appBar: AppBar(title: const Text('标签'), actions: [
         _isSyncing
             ? Padding(padding: const EdgeInsets.all(16),
                 child: SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2, color: colors.primary)))
@@ -195,25 +196,6 @@ class _TagManagementPageState extends State<TagManagementPage> {
     );
   }
 
-  Widget _buildStatChip(IconData icon, String label, int count, ColorScheme colors) {
-    return Expanded(
-      child: Container(
-        padding: const EdgeInsets.symmetric(vertical: 8),
-        decoration: BoxDecoration(color: colors.surface, borderRadius: BorderRadius.circular(8)),
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(icon, size: 14, color: colors.onSurface.withValues(alpha: 0.5)),
-            const SizedBox(width: 4),
-            Text('$count', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: colors.onSurface)),
-            const SizedBox(width: 2),
-            Text(label, style: TextStyle(fontSize: 10, color: colors.onSurface.withValues(alpha: 0.4))),
-          ],
-        ),
-      ),
-    );
-  }
-
   // ─── 标签列表 ──────────────────────────────────────────────────────────
 
   Widget _buildTagList(String type) {
@@ -265,6 +247,10 @@ class _TagManagementPageState extends State<TagManagementPage> {
     }
     used.sort((a, b) => (_usageCounts[b['name']] ?? 0).compareTo(_usageCounts[a['name']] ?? 0));
 
+    final groups = [used, unused, hidden];
+    final groupLabels = ['已使用', '未使用', '隐藏'];
+    final currentGroup = groups[_selectedGroup];
+
     return SingleChildScrollView(
       key: ValueKey(type),
       padding: const EdgeInsets.fromLTRB(20, 4, 20, 80),
@@ -272,36 +258,65 @@ class _TagManagementPageState extends State<TagManagementPage> {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           _buildSearchBar(colors),
-          // 统计栏
+          // 分组切换Tab
           Padding(
-            padding: const EdgeInsets.only(top: 8, bottom: 8),
+            padding: const EdgeInsets.only(top: 12, bottom: 12),
-            child: Row(children: [
+            child: Row(
-              _buildStatChip(Icons.check_circle_outline, '已使用', used.length, colors),
+              children: [
+                _buildGroupTab(Icons.check_circle_outline, '已使用', used.length, 0, colors),
                 const SizedBox(width: 8),
-              _buildStatChip(Icons.radio_button_unchecked, '未使用', unused.length, colors),
+                _buildGroupTab(Icons.radio_button_unchecked, '未使用', unused.length, 1, colors),
                 const SizedBox(width: 8),
-              _buildStatChip(Icons.visibility_off_outlined, '隐藏', hidden.length, colors),
+                _buildGroupTab(Icons.visibility_off_outlined, '隐藏', hidden.length, 2, colors),
-            ]),
-          ),
-          _buildGroupHeader('已使用', used.length, colors),
-          const SizedBox(height: 6),
-          used.isNotEmpty
-              ? Wrap(spacing: 8, runSpacing: 6, children: used.map(_buildTagChip).toList())
-              : _buildEmptyGroup('暂无已使用标签', colors),
-          const SizedBox(height: 16),
-          _buildGroupHeader('未使用', unused.length, colors),
-          const SizedBox(height: 6),
-          unused.isNotEmpty
-              ? Wrap(spacing: 8, runSpacing: 6, children: unused.map(_buildTagChip).toList())
-              : _buildEmptyGroup('暂无未使用标签', colors),
-          const SizedBox(height: 16),
-          _buildGroupHeader('隐藏', hidden.length, colors),
-          const SizedBox(height: 6),
-          hidden.isNotEmpty
-              ? Wrap(spacing: 8, runSpacing: 6, children: hidden.map(_buildTagChip).toList())
-              : _buildEmptyGroup('暂无隐藏标签', colors),
               ],
             ),
+          ),
+          if (currentGroup.isEmpty)
+            _buildEmptyGroup('暂无${groupLabels[_selectedGroup]}标签', colors)
+          else
+            Wrap(spacing: 8, runSpacing: 6, children: currentGroup.map(_buildTagChip).toList()),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildGroupTab(IconData icon, String label, int count, int index, ColorScheme colors) {
+    final selected = _selectedGroup == index;
+    return Expanded(
+      child: GestureDetector(
+        onTap: () => setState(() => _selectedGroup = index),
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 150),
+          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 7),
+          decoration: BoxDecoration(
+            color: selected ? colors.primary : colors.surface,
+            borderRadius: BorderRadius.circular(8),
+            border: Border.all(
+              color: selected ? colors.primary : colors.outlineVariant,
+              width: selected ? 1 : 0.5,
+            ),
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(icon, size: 14, color: selected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.5)),
+              const SizedBox(width: 4),
+              Text(label, style: TextStyle(
+                fontSize: 12,
+                fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
+                color: selected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6),
+              )),
+              const SizedBox(width: 4),
+              Text('$count', style: TextStyle(
+                fontSize: 12,
+                fontWeight: FontWeight.w600,
+                color: selected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.35),
+              )),
+            ],
+          ),
+        ),
+      ),
     );
   }
 
@@ -353,19 +368,6 @@ class _TagManagementPageState extends State<TagManagementPage> {
     );
   }
 
-  Widget _buildGroupHeader(String label, int count, ColorScheme colors) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 2),
-      child: Row(
-        children: [
-          Text(label, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: colors.onSurface.withValues(alpha: 0.5))),
-          const SizedBox(width: 6),
-          Text('$count', style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.3))),
-        ],
-      ),
-    );
-  }
-
   Widget _buildEmptyGroup(String text, ColorScheme colors) {
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 8),

lib/widgets/custom_drawer.dart

@@ -333,7 +333,7 @@ class _CustomDrawerState extends State<CustomDrawer> {
     final toolItems = <(Widget, String, Widget)>[];
     if (userPrefs.showSidebarPerson) toolItems.add((SvgPicture.string('<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M819.2 819.2h204.8v-102.4h-204.8zM716.8 307.2v102.4h307.2V307.2z m51.2 307.2h256v-102.4h-256z m-244.224-61.952a256 256 0 1 0-330.752 0A358.4 358.4 0 0 0 0 870.4a339.456 339.456 0 0 0 4.096 51.2h102.4A280.064 280.064 0 0 1 102.4 870.4a256 256 0 0 1 512 0 280.064 280.064 0 0 1-5.12 51.2h102.4a339.456 339.456 0 0 0 5.12-51.2 358.4 358.4 0 0 0-193.024-317.952zM358.4 512a153.6 153.6 0 1 1 153.6-153.6 153.6 153.6 0 0 1-153.6 153.6z" fill="currentColor"/></svg>', color: colors.onSurface), '人物', const PersonListPage()));
     if (userPrefs.showSidebarGallery) toolItems.add((SvgPicture.string('<svg viewBox="0 0 1064 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M71.68 348.16A296.96 296.96 0 0 1 368.64 51.2h327.68a296.96 296.96 0 0 1 296.96 296.96v327.68A296.96 296.96 0 0 1 696.32 972.8H368.64a296.96 296.96 0 0 1-296.96-296.96v-327.68zM368.64 153.6A194.56 194.56 0 0 0 174.08 348.16v327.68A194.56 194.56 0 0 0 368.64 870.4h327.68a194.56 194.56 0 0 0 194.56-194.56v-327.68A194.56 194.56 0 0 0 696.32 153.6H368.64z" fill="currentColor"/><path d="M947.69152 606.08512a317.80864 317.80864 0 0 0-264.02816 209.7152l-96.54272-34.16064a420.20864 420.20864 0 0 1 349.34784-277.2992l11.22304 101.74464z" fill="currentColor"/><path d="M798.72 327.68a81.92 81.92 0 1 1-163.84 0 81.92 81.92 0 0 1 163.84 0z" fill="currentColor"/><path d="M163.84 542.72c-12.4928 0-24.86272 0.49152-37.0688 1.39264l-7.7824-102.11328c14.82752-1.10592 29.77792-1.67936 44.8512-1.67936 284.01664 0 520.6016 202.79296 572.90752 471.49056l-100.51584 19.57888C593.1008 709.87776 397.9264 542.72 163.84 542.72z" fill="currentColor"/></svg>', color: colors.onSurface), '图库', const GalleryPage()));
-    if (userPrefs.showSidebarTags) toolItems.add((SvgPicture.string('<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M687.012733 1024c-29.085211 0-55.161606-10.029383-74.217434-30.088149L104.305583 487.428012c-21.061704-21.061704-33.096964-50.146915-32.094026-79.232126l7.020568-242.711067a96.282076 96.282076 0 0 1 97.285015-94.2762h233.684623c28.082272 0 55.161606 12.03526 76.22331 32.094025l508.489716 508.489716c22.064643 22.064643 33.096964 54.158668 29.085211 87.255632s-18.052889 61.179236-42.123408 84.246817L784.297747 981.876592c-23.067581 23.067581-53.15573 38.111655-84.246817 42.123408zM176.51714 150.440744c-10.029383 0-17.049951 7.020568-17.049951 17.049951l-7.020568 242.711068c0 7.020568 3.008815 15.044074 9.026445 20.058766l507.486777 507.486778c11.032321 11.032321 37.108717 8.023506 58.170421-13.038198l197.578845-197.578845c21.061704-21.061704 23.067581-48.141038 13.038198-58.170421L429.257591 160.470127c-5.014691-5.014691-13.038198-9.026445-19.055828-9.026444H176.51714z m-57.167483 16.047013z" fill="currentColor"/><path d="M316.928501 442.295788a130.381978 130.381978 0 1 1 130.381979-130.381978 130.381978 130.381978 0 0 1-130.381979 130.381978z m0-180.528893a50.146915 50.146915 0 1 0 50.146915 50.146915 50.146915 50.146915 0 0 0-50.146915-50.146915z" fill="currentColor"/><path d="M258.75808 362.060725c-15.044074 0-32.094025-3.008815-49.143976-8.023507-42.123408-13.038198-86.252693-40.117532-124.364349-78.229187S21.061704 194.570029 8.023506 152.446621c-7.020568-23.067581-9.026445-44.129285-7.020568-64.188051s12.03526-44.129285 27.079334-59.173359S71.208619 1.002938 100.29383 1.002938a40.120541 40.120541 0 1 1 1.002938 80.235064c-5.014691 0-13.038198 1.002938-17.049951 5.014691s-7.020568 23.067581-1.002938 43.126347 30.088149 62.182174 58.170421 90.264447 61.179236 49.143976 90.264446 58.170421 37.108717 6.01763 43.126347-1.002938a40.423428 40.423428 0 0 1 57.167483 57.167482c-15.044074 15.044074-36.105779 25.073457-59.17336 28.082273z" fill="currentColor"/></svg>', color: colors.onSurface), '标签管理', const TagManagementPage()));
+    if (userPrefs.showSidebarTags) toolItems.add((SvgPicture.string('<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M687.012733 1024c-29.085211 0-55.161606-10.029383-74.217434-30.088149L104.305583 487.428012c-21.061704-21.061704-33.096964-50.146915-32.094026-79.232126l7.020568-242.711067a96.282076 96.282076 0 0 1 97.285015-94.2762h233.684623c28.082272 0 55.161606 12.03526 76.22331 32.094025l508.489716 508.489716c22.064643 22.064643 33.096964 54.158668 29.085211 87.255632s-18.052889 61.179236-42.123408 84.246817L784.297747 981.876592c-23.067581 23.067581-53.15573 38.111655-84.246817 42.123408zM176.51714 150.440744c-10.029383 0-17.049951 7.020568-17.049951 17.049951l-7.020568 242.711068c0 7.020568 3.008815 15.044074 9.026445 20.058766l507.486777 507.486778c11.032321 11.032321 37.108717 8.023506 58.170421-13.038198l197.578845-197.578845c21.061704-21.061704 23.067581-48.141038 13.038198-58.170421L429.257591 160.470127c-5.014691-5.014691-13.038198-9.026445-19.055828-9.026444H176.51714z m-57.167483 16.047013z" fill="currentColor"/><path d="M316.928501 442.295788a130.381978 130.381978 0 1 1 130.381979-130.381978 130.381978 130.381978 0 0 1-130.381979 130.381978z m0-180.528893a50.146915 50.146915 0 1 0 50.146915 50.146915 50.146915 50.146915 0 0 0-50.146915-50.146915z" fill="currentColor"/><path d="M258.75808 362.060725c-15.044074 0-32.094025-3.008815-49.143976-8.023507-42.123408-13.038198-86.252693-40.117532-124.364349-78.229187S21.061704 194.570029 8.023506 152.446621c-7.020568-23.067581-9.026445-44.129285-7.020568-64.188051s12.03526-44.129285 27.079334-59.173359S71.208619 1.002938 100.29383 1.002938a40.120541 40.120541 0 1 1 1.002938 80.235064c-5.014691 0-13.038198 1.002938-17.049951 5.014691s-7.020568 23.067581-1.002938 43.126347 30.088149 62.182174 58.170421 90.264447 61.179236 49.143976 90.264446 58.170421 37.108717 6.01763 43.126347-1.002938a40.423428 40.423428 0 0 1 57.167483 57.167482c-15.044074 15.044074-36.105779 25.073457-59.17336 28.082273z" fill="currentColor"/></svg>', color: colors.onSurface), '标签', const TagManagementPage()));
     if (userPrefs.showSidebarMdReader) toolItems.add((Icon(Icons.description_outlined, size: 20, color: colors.onSurface), 'MD阅读', const MdReaderTabPage()));
     if (userPrefs.showSidebarEpub) toolItems.add((SvgPicture.string('<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M900.829867 143.581867a34.133333 34.133333 0 0 1 43.690666 52.394666l-4.437333 3.6864a173.960533 173.960533 0 0 0-24.951467 27.6992C897.706667 251.460267 887.466667 278.254933 887.466667 307.2c0 28.945067 10.24 55.739733 27.648 79.854933 6.263467 8.635733 12.970667 16.247467 19.626666 22.715734l2.9696 2.833066c1.792 1.655467 3.191467 2.8672 4.096 3.584l0.5632 0.4608a34.133333 34.133333 0 0 1-41.540266 54.1696c-10.973867-8.3968-26.0608-23.074133-41.028267-43.776C834.56 392.123733 819.2 351.914667 819.2 307.2c0-44.714667 15.36-84.923733 40.618667-119.842133 14.9504-20.6848 30.037333-35.362133 41.0112-43.776zM75.3152 559.5136a34.133333 34.133333 0 0 1 47.854933-6.331733c10.9568 8.413867 26.0608 23.0912 41.028267 43.776C189.44 631.876267 204.8 672.085333 204.8 716.8c0 44.714667-15.36 84.923733-40.618667 119.842133-14.9504 20.701867-30.037333 35.3792-41.0112 43.776a34.133333 34.133333 0 0 1-43.690666-52.3776l4.437333-3.703466c1.365333-1.194667 3.191467-2.850133 5.358933-4.949334 6.656-6.485333 13.346133-14.097067 19.592534-22.7328C126.293333 772.539733 136.533333 745.745067 136.533333 716.8c0-28.945067-10.24-55.739733-27.648-79.837867a173.960533 173.960533 0 0 0-19.626666-22.715733l-4.232534-3.9936a77.858133 77.858133 0 0 0-2.816-2.440533l-0.580266-0.443734a34.133333 34.133333 0 0 1-6.314667-47.854933z" fill="currentColor"/><path d="M921.6 136.533333a34.133333 34.133333 0 0 1 2.56 68.181334L921.6 204.8H238.933333a102.4 102.4 0 0 0-3.84 204.731733L238.933333 409.6h682.666667a34.133333 34.133333 0 0 1 2.56 68.181333L921.6 477.866667H238.933333C144.674133 477.866667 68.266667 401.4592 68.266667 307.2c0-92.672 73.847467-168.072533 165.888-170.5984L238.933333 136.533333h682.666667zM785.066667 546.133333c94.2592 0 170.666667 76.407467 170.666666 170.666667 0 92.672-73.847467 168.072533-165.888 170.5984L785.066667 887.466667H102.4a34.133333 34.133333 0 0 1-2.56-68.164267L102.4 819.2h682.666667a102.4 102.4 0 0 0 3.84-204.731733L785.066667 614.4H102.4a34.133333 34.133333 0 0 1-2.56-68.164267L102.4 546.133333h682.666667z" fill="currentColor"/><path d="M375.466667 256v221.866667a34.133333 34.133333 0 1 1-68.266667 0V256h68.266667z" fill="#00B386"/></svg>', color: colors.onSurface), 'EPUB阅读', const EpubLibraryPage()));