feat: music page mood cards UI redesign + mystery shimmer + lyrics readability

Co-authored-by: Cursor <cursoragent@cursor.com>

airhub_app/lib/pages/music_creation_page.dart

@@ -65,6 +65,7 @@ class _MusicCreationPageState extends State<MusicCreationPage>
   late AnimationController _flipController;
   late Animation<double> _flipAnimation;
   late AnimationController _genRingController;
+  late AnimationController _mysteryShimmerController;
 
   // ── Playlist Data (matching HTML) ──
   final List<_Track> _playlist = [
@@ -108,7 +109,7 @@ class _MusicCreationPageState extends State<MusicCreationPage>
     {'icon': Icons.directions_run, 'color': 0xFFF5C6A5, 'title': 'Happy Funk', 'desc': '活力 · 奔跑 · 阳光'},
     {'icon': Icons.nights_stay_outlined, 'color': 0xFFCBB8E0, 'title': 'Deep Sleep', 'desc': '白噪音 · 助眠 · 梦境'},
     {'icon': Icons.psychology_outlined, 'color': 0xFFA8D8C8, 'title': 'Focus Flow', 'desc': '心流 · 专注 · 效率'},
-    {'icon': Icons.redeem_outlined, 'color': 0xFFF5B0B0, 'title': '盲盒惊喜', 'desc': 'AI 随机生成神曲'},
+    {'icon': Icons.redeem_outlined, 'color': 0xFFD4A0E8, 'title': '盲盒惊喜', 'desc': 'AI 随机生成神曲'},
     {'icon': Icons.auto_awesome, 'color': 0xFFECCFA8, 'title': '自由创作', 'desc': '输入灵感 · 生成音乐'},
   ];
 
@@ -153,6 +154,12 @@ class _MusicCreationPageState extends State<MusicCreationPage>
       vsync: this,
     );
 
+    // Mystery box diagonal shimmer — 3s loop
+    _mysteryShimmerController = AnimationController(
+      duration: const Duration(milliseconds: 3000),
+      vsync: this,
+    )..repeat();
+
     // ── Audio Player Setup ──
     _audioPlayer = AudioPlayer();
 
@@ -222,6 +229,7 @@ class _MusicCreationPageState extends State<MusicCreationPage>
     _tonearmController.dispose();
     _flipController.dispose();
     _genRingController.dispose();
+    _mysteryShimmerController.dispose();
     super.dispose();
   }
 
@@ -336,6 +344,7 @@ class _MusicCreationPageState extends State<MusicCreationPage>
 
     setState(() {
       _isGenerating = false;
+      _selectedMoodIndex = null; // 生成完成，取消选中态
     });
 
     // If already playing, show confirm dialog; otherwise auto-play
@@ -683,25 +692,27 @@ class _MusicCreationPageState extends State<MusicCreationPage>
       child: CustomPaint(
         painter: _VinylBackGroovesPainter(),
         child: Center(
-          // HTML: .lyrics-container { width: 150px; height: 150px; overflow-y: auto; }
+          child: Container(
-          child: SizedBox(
             width: 150,
             height: 150,
+            decoration: BoxDecoration(
+              // Dark overlay to cover groove lines behind text
+              color: const Color(0xFF18181B).withOpacity(0.75),
+              shape: BoxShape.circle,
+            ),
             child: SingleChildScrollView(
               child: Padding(
-                padding: const EdgeInsets.all(8),
+                padding: const EdgeInsets.all(10),
                 child: Text(
                   track.lyrics.isNotEmpty
                       ? track.lyrics
                       : '生成音乐后\n点我看歌词',
-                  // HTML: .lyrics-content { color: rgba(255,255,255,0.75);
-                  //   font-size: 11px; line-height: 1.5; text-align: center; }
                   style: GoogleFonts.dmSans(
-                    fontSize: 11,
+                    fontSize: 12,
-                    height: 1.5,
+                    height: 1.6,
                     color: track.lyrics.isNotEmpty
-                        ? Colors.white.withOpacity(0.75)
+                        ? Colors.white.withOpacity(0.92)
-                        : Colors.white.withOpacity(0.35),
+                        : Colors.white.withOpacity(0.4),
                     fontStyle: track.lyrics.isEmpty
                         ? FontStyle.italic
                         : FontStyle.normal,
@@ -917,85 +928,81 @@ class _MusicCreationPageState extends State<MusicCreationPage>
   Widget _buildMoodCard(int index) {
     final mood = _moods[index];
     final isActive = _selectedMoodIndex == index;
-    final isMystery = index == 4;
+    final themeColor = Color(mood['color'] as int);
-    final isCustom = index == 5;
+    final isMystery = index == 4;  // 盲盒惊喜
+    final isCustom = index == 5;   // 自由创作
 
-    return GestureDetector(
+    // ── Card background color logic ──
-      onTap: () => _selectMood(index),
+    Color cardColor;
-      child: AnimatedContainer(
+    if (isCustom) {
+      // 自由创作: white glass morphism
+      cardColor = isActive
+          ? Colors.white
+          : Colors.white.withOpacity(0.65);
+    } else if (isMystery) {
+      // 盲盒惊喜: richer purple tint, more eye-catching
+      cardColor = isActive
+          ? Color.lerp(Colors.white, themeColor, 0.40)!
+          : Color.lerp(Colors.white.withOpacity(0.50), themeColor, 0.30)!;
+    } else {
+      // Normal mood cards: themed tint
+      cardColor = isActive
+          ? Color.lerp(Colors.white, themeColor, 0.30)!
+          : Color.lerp(Colors.white.withOpacity(0.55), themeColor, 0.20)!;
+    }
+
+    // ── Border color logic ──
+    Color borderColor;
+    if (isCustom) {
+      borderColor = isActive
+          ? const Color(0xFFECCFA8)
+          : Colors.white.withOpacity(0.4);
+    } else {
+      borderColor = isActive
+          ? themeColor.withOpacity(0.55)
+          : themeColor.withOpacity(0.18);
+    }
+
+    final cardBody = AnimatedContainer(
       duration: const Duration(milliseconds: 300),
-        curve: const Cubic(0.25, 0.46, 0.45, 0.94), // HTML transition curve
+      curve: const Cubic(0.25, 0.46, 0.45, 0.94),
       padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
       decoration: BoxDecoration(
-          // HTML: .mood-card { background: var(--glass-bg); backdrop-filter: blur(16px);
+        color: cardColor,
-          //   border: 1px solid var(--glass-border); border-radius: 14px; }
-          color: isActive
-              ? Colors.white
-              : isMystery
-                  ? null
-                  : Colors.white.withOpacity(0.65),
-          // HTML: .mood-card.mystery { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(236,207,168,0.3)) }
-          gradient: isMystery && !isActive
-              ? LinearGradient(
-                  begin: Alignment.topLeft,
-                  end: Alignment.bottomRight,
-                  colors: [
-                    Colors.white.withOpacity(0.7),
-                    const Color(0xFFECCFA8).withOpacity(0.3),
-                  ],
-                )
-              : null,
         borderRadius: BorderRadius.circular(14),
         border: Border.all(
-            // HTML: .mood-card.active { border-color: #ECCFA8; }
+          color: borderColor,
-            // HTML: .mood-card.custom { border: 1px dashed var(--primary-color); }
+          width: isActive ? 1.5 : 1,
-            color: isActive
-                ? const Color(0xFFECCFA8)
-                : isCustom
-                    ? const Color(0xFFECCFA8).withOpacity(0.5)
-                    : Colors.white.withOpacity(0.4),
-            width: 1,
         ),
-          // HTML: .mood-card.active { box-shadow: 0 10px 25px -5px rgba(236,207,168,0.4); }
         boxShadow: isActive
             ? [
                 BoxShadow(
-                    color: const Color(0xFFECCFA8).withOpacity(0.4),
+                  color: (isCustom ? const Color(0xFFECCFA8) : themeColor)
-                    offset: const Offset(0, 10),
+                      .withOpacity(0.30),
-                    blurRadius: 25,
+                  offset: const Offset(0, 6),
-                    spreadRadius: -5,
+                  blurRadius: 18,
+                  spreadRadius: -4,
                 ),
               ]
             : [
-                  // HTML: .mood-card { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.01); }
                 BoxShadow(
-                    color: Colors.black.withOpacity(0.01),
+                  color: Colors.black.withOpacity(0.03),
-                    offset: const Offset(0, 4),
+                  offset: const Offset(0, 2),
-                    blurRadius: 6,
+                  blurRadius: 8,
                   spreadRadius: -1,
                 ),
               ],
       ),
-        child: Stack(
+      child: Row(
         children: [
-            Row(
+          Icon(
-              children: [
-                // Icon circle
-                Container(
-                  width: 40,
-                  height: 40,
-                  decoration: BoxDecoration(
-                    color: Color(mood['color'] as int).withOpacity(0.4),
-                    borderRadius: BorderRadius.circular(12),
-                  ),
-                  child: Icon(
             mood['icon'] as IconData,
-                    size: 20,
+            size: 24,
-                    color: Color(mood['color'] as int).withOpacity(1.0),
+            color: isActive
-                  ),
+                ? (isCustom ? const Color(0xFFECCFA8) : themeColor)
+                : themeColor,
           ),
           const SizedBox(width: 10),
-                // Title + Desc
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -1004,9 +1011,11 @@ class _MusicCreationPageState extends State<MusicCreationPage>
                 Text(
                   mood['title'] as String,
                   style: GoogleFonts.outfit(
-                          fontSize: 13,
+                    fontSize: 14,
-                          fontWeight: FontWeight.w600,
+                    fontWeight: isActive ? FontWeight.w700 : FontWeight.w600,
-                          color: const Color(0xFF374151),
+                    color: isActive
+                        ? const Color(0xFF1F2937)
+                        : const Color(0xFF374151),
                   ),
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
@@ -1015,9 +1024,11 @@ class _MusicCreationPageState extends State<MusicCreationPage>
                 Text(
                   mood['desc'] as String,
                   style: GoogleFonts.dmSans(
-                          fontSize: 10,
+                    fontSize: 11,
-                          color: const Color(0xFF9CA3AF),
+                    color: isActive
-                          height: 1.2,
+                        ? const Color(0xFF6B7280)
+                        : const Color(0xFF9CA3AF),
+                    height: 1.3,
                   ),
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
@@ -1027,23 +1038,66 @@ class _MusicCreationPageState extends State<MusicCreationPage>
           ),
         ],
       ),
-            // Active dot
+    );
+
+    return GestureDetector(
+      onTap: () => _selectMood(index),
+      child: Stack(
+        children: [
+          // Main card body
+          cardBody,
+          // ── Mystery box: soft diagonal gleam ──
+          if (isMystery)
+            Positioned.fill(
+              child: ClipRRect(
+                borderRadius: BorderRadius.circular(14),
+                child: IgnorePointer(
+                  child: AnimatedBuilder(
+                    animation: _mysteryShimmerController,
+                    builder: (context, _) {
+                      final t = _mysteryShimmerController.value;
+                      // Wide, soft sweep — barely visible glow
+                      final sweep = -2.0 + t * 5.0;
+                      return Opacity(
+                        opacity: 0.35,
+                        child: Container(
+                          decoration: BoxDecoration(
+                            gradient: LinearGradient(
+                              begin: Alignment(sweep - 1.2, sweep - 1.2),
+                              end: Alignment(sweep + 1.2, sweep + 1.2),
+                              colors: [
+                                Colors.white.withOpacity(0.0),
+                                Colors.white.withOpacity(0.08),
+                                Colors.white.withOpacity(0.18),
+                                Colors.white.withOpacity(0.08),
+                                Colors.white.withOpacity(0.0),
+                              ],
+                              stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
+                            ),
+                          ),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+              ),
+            ),
+          // Active indicator dot — top-right
           if (isActive)
             Positioned(
-                top: 0,
+              top: 8,
-                right: 0,
+              right: 8,
               child: Container(
                 width: 8,
                 height: 8,
-                  decoration: const BoxDecoration(
+                decoration: BoxDecoration(
-                    color: Color(0xFFC99672),
+                  color: isCustom ? const Color(0xFFECCFA8) : themeColor,
                   shape: BoxShape.circle,
                 ),
               ),
             ),
         ],
       ),
-      ),
     );
   }