fix(flutter): 重做评论面板视觉

lib/pages/player/widgets/comment_tile.dart

@@ -51,12 +51,12 @@ class CommentTile extends StatelessWidget {
         : comment.nickname;
     return Padding(
       key: Key('comment-item-${comment.id}'),
-      padding: const EdgeInsets.symmetric(vertical: 8),
+      padding: const EdgeInsets.symmetric(vertical: 12),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           _avatar(),
-          const SizedBox(width: 12),
+          const SizedBox(width: 10),
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -67,8 +67,9 @@ class CommentTile extends StatelessWidget {
                       child: Text(
                         name,
                         style: const TextStyle(
-                          color: AppColors.muted,
-                          fontSize: 12,
+                          color: AppColors.cream,
+                          fontSize: 13,
+                          fontWeight: FontWeight.w700,
                         ),
                       ),
                     ),
@@ -77,7 +78,7 @@ class CommentTile extends StatelessWidget {
                         formatLocalizedDateTime(context, comment.createdAt!),
                         style: const TextStyle(
                           color: AppColors.subtle,
-                          fontSize: 10,
+                          fontSize: 11,
                         ),
                       ),
                     const SizedBox(width: 4),
@@ -109,8 +110,8 @@ class CommentTile extends StatelessWidget {
                   comment.content,
                   style: const TextStyle(
                     color: AppColors.cream,
-                    fontSize: 13,
-                    height: 1.2,
+                    fontSize: 14,
+                    height: 1.4,
                   ),
                 ),
                 if (comment.isPending)
@@ -129,6 +130,12 @@ class CommentTile extends StatelessWidget {
                   children: [
                     TextButton.icon(
                       key: Key('comment-like-${comment.id}'),
+                      style: TextButton.styleFrom(
+                        foregroundColor: AppColors.muted,
+                        padding: const EdgeInsets.symmetric(horizontal: 4),
+                        minimumSize: const Size(0, 28),
+                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                      ),
                       onPressed: controller.likingComment(comment.id)
                           ? null
                           : () => handlers.onLike(comment),
@@ -138,11 +145,24 @@ class CommentTile extends StatelessWidget {
                             : Icons.favorite_border_rounded,
                         size: 16,
                       ),
-                      label: Text('${comment.likeCount}'),
+                      label: Text(
+                        '${comment.likeCount}',
+                        style: const TextStyle(fontSize: 11),
+                      ),
                     ),
                     if (!isReply)
                       TextButton(
                         key: Key('comment-reply-${comment.id}'),
+                        style: TextButton.styleFrom(
+                          foregroundColor: AppColors.blue,
+                          textStyle: const TextStyle(
+                            fontSize: 12,
+                            fontWeight: FontWeight.w600,
+                          ),
+                          padding: const EdgeInsets.symmetric(horizontal: 4),
+                          minimumSize: const Size(0, 28),
+                          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                        ),
                         onPressed: () => handlers.onReply(comment),
                         child: Text(l10n.reply),
                       ),
@@ -157,14 +177,14 @@ class CommentTile extends StatelessWidget {
   }
 
   Widget _avatar() {
-    final size = isReply ? 22.0 : 28.0;
+    final size = isReply ? 24.0 : 32.0;
     if (comment.avatarUrl.isEmpty) {
       return CircleAvatar(
         radius: size / 2,
         backgroundColor: AppColors.raised,
         child: Icon(
           Icons.person_rounded,
-          size: isReply ? 13 : 16,
+          size: isReply ? 14 : 18,
           color: AppColors.cream,
         ),
       );