feat(app): 剧场页九宫格与极简我的页

lib/pages/discover/widgets/drama_grid.dart

@@ -0,0 +1,187 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../../../core/config/app_config.dart';
+import '../../../core/data/models/drama.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../l10n/app_localizations.dart';
+
+const int _columns = 2;
+const double _columnGap = 10;
+const double _cardGap = 10;
+
+/// 剧场/分类页共用的双列剧目网格。
+class DramaGrid extends StatelessWidget {
+  const DramaGrid({
+    super.key,
+    required this.l10n,
+    required this.dramas,
+    required this.onOpen,
+  });
+
+  final AppLocalizations l10n;
+  final List<Drama> dramas;
+  final ValueChanged<Drama> onOpen;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      key: const Key('home-all-dramas-section'),
+      padding: const EdgeInsets.symmetric(horizontal: 14),
+      child: Row(
+        key: const Key('home-all-dramas-grid'),
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(child: _column(0)),
+          const SizedBox(width: _columnGap),
+          Expanded(child: _column(1)),
+        ],
+      ),
+    );
+  }
+
+  Widget _column(int start) {
+    final children = <Widget>[];
+    for (var index = start; index < dramas.length; index += _columns) {
+      final drama = dramas[index];
+      children.add(
+        DramaGridCard(l10n: l10n, drama: drama, onTap: () => onOpen(drama)),
+      );
+      if (index + _columns < dramas.length) {
+        children.add(const SizedBox(height: _cardGap));
+      }
+    }
+    return Column(children: children);
+  }
+}
+
+/// 双列网格中的剧目卡片。
+class DramaGridCard extends StatelessWidget {
+  const DramaGridCard({
+    super.key,
+    required this.l10n,
+    required this.drama,
+    required this.onTap,
+  });
+
+  final AppLocalizations l10n;
+  final Drama drama;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      key: Key('home-drama-card-${drama.id}'),
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(10),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          _cover(),
+          const SizedBox(height: 5),
+          _title(),
+          const SizedBox(height: 2),
+          _genre(),
+        ],
+      ),
+    );
+  }
+
+  Widget _cover() {
+    final free =
+        drama.freeEpisodes > 0 ||
+        drama.episodes.any((episode) => episode.isFree);
+    return ClipRRect(
+      key: Key('home-drama-cover-${drama.id}'),
+      borderRadius: BorderRadius.circular(10),
+      child: Stack(
+        children: [
+          _DiscoverCoverImage(path: drama.posterUrl),
+          if (free) Positioned(top: 6, left: 6, child: _freeBadge()),
+        ],
+      ),
+    );
+  }
+
+  Widget _freeBadge() {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+      decoration: BoxDecoration(
+        color: AppColors.blue,
+        borderRadius: BorderRadius.circular(6),
+      ),
+      child: Text(
+        l10n.free,
+        style: const TextStyle(
+          color: AppColors.onPrimary,
+          fontSize: 8,
+          fontWeight: FontWeight.w800,
+        ),
+      ),
+    );
+  }
+
+  Widget _title() {
+    return Text(
+      drama.title,
+      key: Key('home-drama-title-${drama.id}'),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      style: const TextStyle(
+        color: AppColors.onSurface,
+        fontSize: 11,
+        fontWeight: FontWeight.w800,
+      ),
+    );
+  }
+
+  Widget _genre() {
+    final genre = drama.genre.isEmpty ? drama.category : drama.genre;
+    return Text(
+      genre.isEmpty ? l10n.videoPending : genre,
+      key: Key('home-drama-genre-${drama.id}'),
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      style: const TextStyle(color: Color(0xFFBBBBBB), fontSize: 9),
+    );
+  }
+}
+
+class _DiscoverCoverImage extends StatelessWidget {
+  const _DiscoverCoverImage({required this.path});
+
+  final String path;
+
+  @override
+  Widget build(BuildContext context) {
+    final url = AppConfig.mediaUrl(path);
+    if (url.isEmpty) return _placeholder();
+    return Image.network(
+      url,
+      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,
+          ),
+        ),
+      ),
+    );
+  }
+}