chore(release): 发布 v1.0.1 客户端 UI 优化

lib/core/widgets/app_bottom_nav.dart

@@ -18,6 +18,7 @@ class AppBottomNavItem {
     this.selected = false,
     this.assetPath,
     this.selectedAssetPath,
+    this.customIcon,
   });
 
   final Key tabKey;
@@ -25,6 +26,7 @@ class AppBottomNavItem {
   final IconData selectedIcon;
   final String? assetPath;
   final String? selectedAssetPath;
+  final Widget? customIcon;
   final String label;
   final VoidCallback onTap;
   final bool selected;
@@ -93,26 +95,31 @@ class _NavDestination extends StatelessWidget {
                   duration: const Duration(milliseconds: 160),
                   curve: Curves.easeOut,
                   scale: item.selected ? 1 : 0.96,
-                  child: assetPath == null
-                      ? Icon(
-                          fallbackIcon,
-                          size: AppDimens.navIcon,
-                          color: color,
-                        )
-                      : ColorFiltered(
-                          colorFilter: ColorFilter.mode(color, BlendMode.srcIn),
-                          child: Image.asset(
-                            assetPath,
-                            width: AppDimens.navIcon,
-                            height: AppDimens.navIcon,
-                            fit: BoxFit.contain,
-                            errorBuilder: (_, _, _) => Icon(
+                  child:
+                      item.customIcon ??
+                      (assetPath == null
+                          ? Icon(
                               fallbackIcon,
                               size: AppDimens.navIcon,
                               color: color,
-                            ),
-                          ),
-                        ),
+                            )
+                          : ColorFiltered(
+                              colorFilter: ColorFilter.mode(
+                                color,
+                                BlendMode.srcIn,
+                              ),
+                              child: Image.asset(
+                                assetPath,
+                                width: AppDimens.navIcon,
+                                height: AppDimens.navIcon,
+                                fit: BoxFit.contain,
+                                errorBuilder: (_, _, _) => Icon(
+                                  fallbackIcon,
+                                  size: AppDimens.navIcon,
+                                  color: color,
+                                ),
+                              ),
+                            )),
                 ),
                 const SizedBox(height: AppDimens.navLabelGap),
                 Text(

lib/core/widgets/app_root_tab.dart

@@ -2,8 +2,10 @@
 
 import 'package:flutter/material.dart';
 
+import '../theme/app_dimens.dart';
 import '../../l10n/app_localizations.dart';
 import 'app_bottom_nav.dart';
+import 'root_nav_glyph.dart';
 
 /// 客户端根导航的固定顺序。
 enum AppRootTab {
@@ -16,6 +18,13 @@ enum AppRootTab {
 }
 
 extension AppRootTabUi on AppRootTab {
+  RootNavGlyphKind get glyphKind => switch (this) {
+    AppRootTab.home => RootNavGlyphKind.home,
+    AppRootTab.recommend => RootNavGlyphKind.recommend,
+    AppRootTab.following => RootNavGlyphKind.following,
+    AppRootTab.mine => RootNavGlyphKind.mine,
+  };
+
   Key get tabKey => switch (this) {
     AppRootTab.home => const Key('tab-home'),
     AppRootTab.recommend => const Key('tab-recommend'),
@@ -71,6 +80,11 @@ class AppRootBottomNav extends StatelessWidget {
             selectedIcon: tab.selectedIcon,
             label: tab.label(l10n),
             selected: tab == selected,
+            customIcon: RootNavGlyph(
+              kind: tab.glyphKind,
+              selected: tab == selected,
+              size: AppDimens.navIcon,
+            ),
             onTap: () => onSelected(tab),
           ),
       ],

lib/core/widgets/root_nav_glyph.dart

@@ -0,0 +1,180 @@
+// Author: fruit.com.cn
+// 职责：绘制根导航使用的饱满品牌插画图标。
+
+import 'package:flutter/material.dart';
+
+import '../theme/app_colors.dart';
+
+const double _designSize = 30;
+
+/// 根导航四个入口对应的图标种类。
+enum RootNavGlyphKind { home, recommend, following, mine }
+
+/// 根导航插画图标，根据选中态使用品牌红和中性灰白配色。
+class RootNavGlyph extends StatelessWidget {
+  const RootNavGlyph({
+    super.key,
+    required this.kind,
+    required this.selected,
+    required this.size,
+  });
+
+  final RootNavGlyphKind kind;
+  final bool selected;
+  final double size;
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size.square(size),
+      painter: _RootNavGlyphPainter(kind: kind, selected: selected),
+    );
+  }
+}
+
+class _RootNavGlyphPainter extends CustomPainter {
+  const _RootNavGlyphPainter({required this.kind, required this.selected});
+
+  final RootNavGlyphKind kind;
+  final bool selected;
+
+  Color get _main => selected ? AppColors.navSelected : const Color(0xFFD0D0D2);
+  Color get _light => selected ? AppColors.homeCrownGold : Colors.white;
+  Color get _shade =>
+      selected ? const Color(0xFF9F2935) : const Color(0xFF858589);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.scale(size.width / _designSize);
+    switch (kind) {
+      case RootNavGlyphKind.home:
+        _paintHome(canvas);
+      case RootNavGlyphKind.recommend:
+        _paintRecommend(canvas);
+      case RootNavGlyphKind.following:
+        _paintFollowing(canvas);
+      case RootNavGlyphKind.mine:
+        _paintMine(canvas);
+    }
+    canvas.restore();
+  }
+
+  void _paintHome(Canvas canvas) {
+    final roof = Path()
+      ..moveTo(3, 13)
+      ..lineTo(15, 3)
+      ..lineTo(27, 13)
+      ..lineTo(24, 16)
+      ..lineTo(15, 8.5)
+      ..lineTo(6, 16)
+      ..close();
+    canvas.drawShadow(roof, AppColors.shadow, 2, false);
+    canvas.drawPath(roof, _gradient(const Rect.fromLTWH(3, 3, 24, 13)));
+    final body = RRect.fromRectAndRadius(
+      const Rect.fromLTRB(6, 13, 24, 27),
+      const Radius.circular(3),
+    );
+    canvas.drawRRect(body, _gradient(const Rect.fromLTWH(6, 13, 18, 14)));
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        const Rect.fromLTRB(12, 18, 18, 27),
+        const Radius.circular(2),
+      ),
+      Paint()..color = _shade,
+    );
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        const Rect.fromLTRB(8, 16, 11, 19),
+        const Radius.circular(1),
+      ),
+      Paint()..color = _light,
+    );
+  }
+
+  void _paintRecommend(Canvas canvas) {
+    final body = RRect.fromRectAndRadius(
+      const Rect.fromLTRB(6, 4, 24, 27),
+      const Radius.circular(5),
+    );
+    canvas.drawShadow(Path()..addRRect(body), AppColors.shadow, 2, false);
+    canvas.drawRRect(body, _gradient(const Rect.fromLTWH(6, 4, 18, 23)));
+    for (var index = 0; index < 3; index++) {
+      final left = 9.0 + index * 5;
+      canvas.drawRRect(
+        RRect.fromRectAndRadius(
+          Rect.fromLTWH(left, 7, 3, 2.5),
+          const Radius.circular(1),
+        ),
+        Paint()..color = _light,
+      );
+    }
+    final play = Path()
+      ..moveTo(12, 13)
+      ..quadraticBezierTo(12, 11.5, 13.5, 12.3)
+      ..lineTo(19.5, 15.7)
+      ..quadraticBezierTo(21, 16.5, 19.5, 17.3)
+      ..lineTo(13.5, 20.7)
+      ..quadraticBezierTo(12, 21.5, 12, 20)
+      ..close();
+    canvas.drawPath(play, Paint()..color = _light);
+  }
+
+  void _paintFollowing(Canvas canvas) {
+    final page = RRect.fromRectAndRadius(
+      const Rect.fromLTRB(5, 4, 25, 27),
+      const Radius.circular(4),
+    );
+    canvas.drawShadow(Path()..addRRect(page), AppColors.shadow, 2, false);
+    canvas.drawRRect(page, _gradient(const Rect.fromLTWH(5, 4, 20, 23)));
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        const Rect.fromLTRB(8, 9, 17, 10.5),
+        const Radius.circular(0.7),
+      ),
+      Paint()..color = _light,
+    );
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        const Rect.fromLTRB(8, 13, 16, 14.5),
+        const Radius.circular(0.7),
+      ),
+      Paint()..color = _light,
+    );
+    final bookmark = Path()
+      ..moveTo(18, 7)
+      ..lineTo(22, 7)
+      ..lineTo(22, 20)
+      ..lineTo(20, 18)
+      ..lineTo(18, 20)
+      ..close();
+    canvas.drawPath(bookmark, Paint()..color = _light);
+  }
+
+  void _paintMine(Canvas canvas) {
+    final bounds = Rect.fromCircle(center: const Offset(15, 15), radius: 13);
+    canvas.drawShadow(Path()..addOval(bounds), AppColors.shadow, 2, false);
+    canvas.drawCircle(const Offset(15, 15), 13, _gradient(bounds));
+    canvas.drawCircle(const Offset(15, 11), 4, Paint()..color = _light);
+    final shoulders = Path()
+      ..moveTo(7, 24)
+      ..cubicTo(7.5, 19, 10.5, 17, 15, 17)
+      ..cubicTo(19.5, 17, 22.5, 19, 23, 24)
+      ..quadraticBezierTo(15, 29, 7, 24)
+      ..close();
+    canvas.drawPath(shoulders, Paint()..color = _light);
+    canvas.drawCircle(const Offset(13.5, 11), 0.55, Paint()..color = _shade);
+    canvas.drawCircle(const Offset(16.5, 11), 0.55, Paint()..color = _shade);
+  }
+
+  Paint _gradient(Rect bounds) => Paint()
+    ..shader = LinearGradient(
+      begin: Alignment.topLeft,
+      end: Alignment.bottomRight,
+      colors: [_light, _main, _shade],
+    ).createShader(bounds);
+
+  @override
+  bool shouldRepaint(covariant _RootNavGlyphPainter oldDelegate) =>
+      oldDelegate.kind != kind || oldDelegate.selected != selected;
+}