feat(flutter): 重构四 Tab 与浏览页

lib/pages/discover/widgets/drama_grid.dart

@@ -2,9 +2,10 @@
 
 import 'package:flutter/material.dart';
 
-import '../../../core/config/app_config.dart';
 import '../../../core/data/models/drama.dart';
 import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/remote_image.dart';
 import '../../../l10n/app_localizations.dart';
 
 const int _columns = 2;
@@ -83,6 +84,8 @@ class DramaGridCard extends StatelessWidget {
           _title(),
           const SizedBox(height: 2),
           _genre(),
+          const SizedBox(height: AppDimens.spaceXs),
+          _metadata(),
         ],
       ),
     );
@@ -115,7 +118,7 @@ class DramaGridCard extends StatelessWidget {
         l10n.free,
         style: const TextStyle(
           color: AppColors.onPrimary,
-          fontSize: 8,
+          fontSize: AppDimens.cardMeta,
           fontWeight: FontWeight.w800,
         ),
       ),
@@ -130,7 +133,7 @@ class DramaGridCard extends StatelessWidget {
       overflow: TextOverflow.ellipsis,
       style: const TextStyle(
         color: AppColors.onSurface,
-        fontSize: 11,
+        fontSize: AppDimens.previewSectionTitle,
         fontWeight: FontWeight.w800,
       ),
     );
@@ -143,7 +146,39 @@ class DramaGridCard extends StatelessWidget {
       key: Key('home-drama-genre-${drama.id}'),
       maxLines: 1,
       overflow: TextOverflow.ellipsis,
-      style: const TextStyle(color: Color(0xFFBBBBBB), fontSize: 9),
+      style: const TextStyle(
+        color: AppColors.muted,
+        fontSize: AppDimens.cardMeta,
+      ),
+    );
+  }
+
+  Widget _metadata() {
+    return Wrap(
+      spacing: AppDimens.spaceSm,
+      runSpacing: AppDimens.spaceXs,
+      children: [
+        Text(
+          l10n.episodeCount(drama.episodeCount),
+          key: Key('home-drama-episode-count-${drama.id}'),
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: const TextStyle(
+            color: AppColors.subtle,
+            fontSize: AppDimens.cardViews,
+          ),
+        ),
+        Text(
+          l10n.viewCountLabel(drama.viewCount),
+          key: Key('home-drama-views-${drama.id}'),
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: const TextStyle(
+            color: AppColors.subtle,
+            fontSize: AppDimens.cardViews,
+          ),
+        ),
+      ],
     );
   }
 }
@@ -155,33 +190,12 @@ class _DiscoverCoverImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final url = AppConfig.mediaUrl(path);
-    if (url.isEmpty) return _placeholder();
-    return Image.network(
-      url,
+    return RemoteImage(
+      path,
       width: double.infinity,
       fit: BoxFit.fitWidth,
-      loadingBuilder: (context, child, progress) {
-        if (progress == null) return child;
-        return _placeholder();
-      },
-      errorBuilder: (_, _, _) => _placeholder(),
-    );
-  }
-
-  Widget _placeholder() {
-    return AspectRatio(
-      aspectRatio: 3 / 4,
-      child: ColoredBox(
-        color: AppColors.card,
-        child: const Center(
-          child: Icon(
-            Icons.image_not_supported_outlined,
-            color: AppColors.muted,
-            size: 32,
-          ),
-        ),
-      ),
+      showFallbackIcon: true,
+      fallbackAspectRatio: 3 / 4,
     );
   }
 }