feat(ui): 播放页改为大封面 + 左对齐信息 + 底部控制骨架

按设计稿重排（背景色保持 #0E1211 不变）：
- 接近全宽的圆角封面（1:1，24 圆角）
- 标题/艺术家左对齐，下面补专辑名与所在目录
- 进度条改为"时间 + 滑块 + 时间"同一行，滑块加可见圆点
- 控制行：上一首 / 播放(68 圆) / 下一首 / 收藏 / 播放队列
- 收藏按钮接 favorites 表，状态随当前歌刷新
- 更多菜单：切换播放模式、播放队列、清除缓存

lib/pages/player_page.dart

@@ -1,8 +1,10 @@
 // lib/pages/player_page.dart
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import '../services/audio_service.dart';
+
 import '../base/base_state.dart';
+import '../database/song_database.dart';
+import '../services/audio_service.dart';
 
 class PlayerPage extends StatefulWidget {
   final VoidCallback? onClose;
@@ -21,6 +23,11 @@ class PlayerPage extends StatefulWidget {
 class _PlayerPageState extends BaseState<PlayerPage> {
   double? _dragProgress;
 
+  bool _isFavorite = false;
+  String _album = '';
+  String _folder = '';
+  String? _metaSongId;
+
   String _formatDuration(Duration d) {
     if (d.inMilliseconds < 0) return '00:00';
     final minutes = d.inMinutes;
@@ -47,14 +54,12 @@ class _PlayerPageState extends BaseState<PlayerPage> {
   @override
   void initState() {
     super.initState();
-    // ⭐ 页面加载时主动拉取状态（多次重试）
     _syncStateWithRetry();
   }
 
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
-    // ⭐ 依赖变化时（如从后台返回）重新同步
     WidgetsBinding.instance.addPostFrameCallback((_) {
       if (mounted) {
         context.read<AudioService>().syncPlayerStateNow();
@@ -64,11 +69,8 @@ class _PlayerPageState extends BaseState<PlayerPage> {
 
   void _syncStateWithRetry() {
     final service = context.read<AudioService>();
-
-    // 立即同步
     service.syncPlayerStateNow();
 
-    // 延迟重试
     const delays = [200, 500, 800, 1200];
     for (final delay in delays) {
       Future.delayed(Duration(milliseconds: delay), () {
@@ -79,6 +81,57 @@ class _PlayerPageState extends BaseState<PlayerPage> {
     }
   }
 
+  /// 元数据（专辑、收藏状态）只在切歌时查一次
+  Future<void> _loadMeta(Song song) async {
+    if (_metaSongId == song.id) return;
+    _metaSongId = song.id;
+
+    final db = SongDatabase();
+    String album = '';
+    bool favorite = false;
+    try {
+      final row = await db.getSongByPath(song.id);
+      album = (row?['album'] as String?)?.trim() ?? '';
+      favorite = await db.isFavorite(song.id);
+    } catch (_) {
+      // 元数据只是装饰，失败忽略
+    }
+
+    // 上级目录名，作为没有专辑信息时的补充
+    String folder = '';
+    final segments =
+        song.id.split('/').where((s) => s.isNotEmpty).toList();
+    if (segments.length >= 2) {
+      try {
+        folder = Uri.decodeComponent(segments[segments.length - 2]);
+      } catch (_) {
+        folder = segments[segments.length - 2];
+      }
+    }
+
+    if (!mounted) return;
+    setState(() {
+      _album = album;
+      _folder = folder;
+      _isFavorite = favorite;
+    });
+  }
+
+  Future<void> _toggleFavorite(Song song) async {
+    try {
+      await SongDatabase().toggleFavorite(song.id);
+      final favorite = await SongDatabase().isFavorite(song.id);
+      if (!mounted) return;
+      setState(() => _isFavorite = favorite);
+    } catch (e) {
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(content: Text('收藏失败: $e')),
+        );
+      }
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final service = context.watch<AudioService>();
@@ -110,6 +163,7 @@ class _PlayerPageState extends BaseState<PlayerPage> {
       );
     }
 
+    _loadMeta(song);
     final isPlaying = service.isPlaying;
 
     return Scaffold(
@@ -118,25 +172,15 @@ class _PlayerPageState extends BaseState<PlayerPage> {
         backgroundColor: Colors.transparent,
         elevation: 0,
         leading: IconButton(
-          icon: const Icon(Icons.arrow_back_ios_new, color: Colors.white),
+          icon: const Icon(Icons.keyboard_arrow_down, color: Colors.white70),
           onPressed: _closePage,
         ),
-        title: const Text(
-          '正在播放',
-          style: TextStyle(
-            color: Colors.white,
-            fontSize: 16,
-            fontWeight: FontWeight.w400,
-          ),
-        ),
-        centerTitle: true,
         actions: [
           PopupMenuButton<String>(
             icon: const Icon(Icons.more_vert, color: Colors.white54),
             onSelected: (value) async {
               if (value == 'clear_cache') {
-                final service = context.read<AudioService>();
+                await context.read<AudioService>().clearCurrentSongCache();
-                await service.clearCurrentSongCache();
                 if (mounted) {
                   ScaffoldMessenger.of(context).showSnackBar(
                     const SnackBar(
@@ -145,9 +189,33 @@ class _PlayerPageState extends BaseState<PlayerPage> {
                     ),
                   );
                 }
+              } else if (value == 'mode') {
+                context.read<AudioService>().togglePlayMode();
+              } else if (value == 'playlist') {
+                _openPlaylist();
               }
             },
             itemBuilder: (context) => [
+              PopupMenuItem(
+                value: 'mode',
+                child: Row(
+                  children: [
+                    Icon(service.playModeIcon, color: const Color(0xFFB8D4D0)),
+                    const SizedBox(width: 12),
+                    const Text('切换播放模式'),
+                  ],
+                ),
+              ),
+              const PopupMenuItem(
+                value: 'playlist',
+                child: Row(
+                  children: [
+                    Icon(Icons.queue_music, color: Color(0xFFB8D4D0)),
+                    SizedBox(width: 12),
+                    Text('播放队列'),
+                  ],
+                ),
+              ),
               const PopupMenuItem(
                 value: 'clear_cache',
                 child: Row(
@@ -162,72 +230,95 @@ class _PlayerPageState extends BaseState<PlayerPage> {
           ),
         ],
       ),
-      body: Padding(
+      body: SafeArea(
+        child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 24),
           child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-            Container(
+              // ---- 封面 ----
-              width: 240,
+              AspectRatio(
-              height: 240,
+                aspectRatio: 1,
-              decoration: BoxDecoration(
+                child: ClipRRect(
-                shape: BoxShape.circle,
+                  borderRadius: BorderRadius.circular(24),
-                color: const Color(0xFF2A3332),
+                  child: song.artwork != null
-                boxShadow: [
+                      ? Image.memory(
-                  BoxShadow(
+                          song.artwork!,
-                    color: const Color(0xFF7C9A9E).withOpacity(0.15),
-                    blurRadius: 60,
-                    spreadRadius: 10,
-                  ),
-                ],
-                image: song.artwork != null
-                    ? DecorationImage(
-                        image: MemoryImage(song.artwork!),
                           fit: BoxFit.cover,
+                          gaplessPlayback: true,
                         )
-                    : null,
+                      : Container(
+                          color: const Color(0xFF2A3332),
+                          child: const Icon(
+                            Icons.music_note,
+                            size: 72,
+                            color: Colors.white24,
                           ),
-              child: song.artwork == null
-                  ? const Icon(Icons.music_note,
-                      size: 64, color: Colors.white24)
-                  : null,
                         ),
-            const SizedBox(height: 48),
+                ),
-            Column(
+              ),
-              crossAxisAlignment: CrossAxisAlignment.center,
+              const SizedBox(height: 28),
-              children: [
+
+              // ---- 标题 / 艺术家 ----
               Text(
                 song.title,
                 style: const TextStyle(
-                    fontSize: 20,
+                  fontSize: 24,
                   fontWeight: FontWeight.w600,
                   color: Colors.white,
+                  height: 1.25,
                 ),
-                  textAlign: TextAlign.center,
                 maxLines: 2,
                 overflow: TextOverflow.ellipsis,
               ),
-                const SizedBox(height: 8),
+              const SizedBox(height: 6),
               Text(
                 song.artist,
+                style: TextStyle(fontSize: 14, color: Colors.grey[400]),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+
+              // ---- 信息区（专辑 / 目录）----
+              if (_album.isNotEmpty || _folder.isNotEmpty) ...[
+                const SizedBox(height: 14),
+                if (_album.isNotEmpty)
+                  Text(
+                    _album,
                     style: TextStyle(
-                    fontSize: 15,
+                      fontSize: 12,
-                    color: Colors.grey[400],
+                      color: Colors.grey[500],
+                      height: 1.5,
+                    ),
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                if (_folder.isNotEmpty)
+                  Text(
+                    '($_folder)',
+                    style: TextStyle(
+                      fontSize: 12,
+                      color: Colors.grey[600],
+                      height: 1.5,
                     ),
-                  textAlign: TextAlign.center,
                     maxLines: 1,
                     overflow: TextOverflow.ellipsis,
                   ),
               ],
-            ),
+
-            const SizedBox(height: 40),
+              const Spacer(),
+
+              // ---- 进度 ----
               _buildProgressSection(service),
-            const SizedBox(height: 32),
+              const SizedBox(height: 18),
-            _buildControlButtons(service, isPlaying),
+
-            const SizedBox(height: 16),
+              // ---- 控制 ----
+              _buildControlButtons(service, song, isPlaying),
+              const SizedBox(height: 20),
             ],
           ),
         ),
+      ),
     );
   }
 
@@ -238,7 +329,6 @@ class _PlayerPageState extends BaseState<PlayerPage> {
         return ValueListenableBuilder(
           valueListenable: service.durationNotifier,
           builder: (context, duration, _) {
-            // ⭐ 如果 duration 为 0，显示加载指示器
             if (duration.inMilliseconds == 0) {
               return const Padding(
                 padding: EdgeInsets.symmetric(vertical: 8),
@@ -249,67 +339,76 @@ class _PlayerPageState extends BaseState<PlayerPage> {
               );
             }
 
-            final progress = duration.inMilliseconds > 0
+            final progress = position.inMilliseconds / duration.inMilliseconds;
-                ? position.inMilliseconds / duration.inMilliseconds
+            final bufferProgress = (service
-                : 0.0;
+                        .bufferedNotifier.value.inMilliseconds /
-
-            final bufferProgress = duration.inMilliseconds > 0
-                ? (service.bufferedNotifier.value.inMilliseconds /
                     duration.inMilliseconds)
-                    .clamp(0.0, 1.0)
+                .clamp(0.0, 1.0);
-                : 0.0;
-
             final displayProgress = _dragProgress ?? progress;
 
-            return Column(
+            return Row(
               children: [
-                SizedBox(
+                Text(
-                  height: 20,
+                  _formatDuration(
-                  child: LayoutBuilder(
+                    _dragProgress != null
-                    builder: (context, constraints) {
+                        ? Duration(
-                      final width = constraints.maxWidth;
+                            milliseconds:
-                      final bufferWidth =
+                                (_dragProgress! * duration.inMilliseconds)
-                          width * bufferProgress.clamp(0.0, 1.0);
+                                    .round(),
-                      final progressWidth =
+                          )
-                          width * displayProgress.clamp(0.0, 1.0);
+                        : position,
-
+                  ),
-                      return Stack(
+                  style: TextStyle(fontSize: 12, color: Colors.grey[500]),
+                ),
+                const SizedBox(width: 10),
+                Expanded(
+                  child: SizedBox(
+                    height: 24,
+                    child: Stack(
                       alignment: Alignment.centerLeft,
                       children: [
                         Container(
-                            width: width,
+                          height: 3,
-                            height: 4,
                           decoration: BoxDecoration(
                             color: Colors.grey[800],
                             borderRadius: BorderRadius.circular(2),
                           ),
                         ),
-                          Container(
+                        FractionallySizedBox(
-                            width: bufferWidth,
+                          alignment: Alignment.centerLeft,
-                            height: 4,
+                          widthFactor: bufferProgress.clamp(0.0, 1.0),
+                          child: Container(
+                            height: 3,
                             decoration: BoxDecoration(
                               color: const Color(0xFF4A7A7A),
                               borderRadius: BorderRadius.circular(2),
                             ),
                           ),
-                          Container(
+                        ),
-                            width: progressWidth,
+                        FractionallySizedBox(
-                            height: 4,
+                          alignment: Alignment.centerLeft,
+                          widthFactor: displayProgress.clamp(0.0, 1.0),
+                          child: Container(
+                            height: 3,
                             decoration: BoxDecoration(
                               color: const Color(0xFFB8D4D0),
                               borderRadius: BorderRadius.circular(2),
                             ),
                           ),
+                        ),
                         Positioned.fill(
                           child: SliderTheme(
                             data: SliderTheme.of(context).copyWith(
                               trackHeight: 0,
                               activeTrackColor: Colors.transparent,
                               inactiveTrackColor: Colors.transparent,
-                                thumbColor: Colors.transparent,
+                              thumbColor: const Color(0xFFB8D4D0),
-                                overlayColor: Colors.transparent,
+                              overlayColor: const Color(0x33B8D4D0),
                               thumbShape: const RoundSliderThumbShape(
-                                  enabledThumbRadius: 0,
+                                enabledThumbRadius: 6,
+                              ),
+                              overlayShape: const RoundSliderOverlayShape(
+                                overlayRadius: 14,
                               ),
                             ),
                             child: Slider(
@@ -317,9 +416,7 @@ class _PlayerPageState extends BaseState<PlayerPage> {
                               min: 0.0,
                               max: 1.0,
                               onChanged: (value) {
-                                  setState(() {
+                                setState(() => _dragProgress = value);
-                                    _dragProgress = value;
-                                  });
                               },
                               onChangeEnd: (value) {
                                 final newPosition = Duration(
@@ -328,36 +425,19 @@ class _PlayerPageState extends BaseState<PlayerPage> {
                                           .round(),
                                 );
                                 service.seekTo(newPosition);
-                                  setState(() {
+                                setState(() => _dragProgress = null);
-                                    _dragProgress = null;
-                                  });
                               },
                             ),
                           ),
                         ),
                       ],
-                      );
-                    },
                     ),
                   ),
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [
-                    Text(
-                      _formatDuration(position),
-                      style: TextStyle(
-                        fontSize: 12,
-                        color: Colors.grey[500],
-                      ),
                 ),
+                const SizedBox(width: 10),
                 Text(
                   _formatDuration(duration),
-                      style: TextStyle(
+                  style: TextStyle(fontSize: 12, color: Colors.grey[500]),
-                        fontSize: 12,
-                        color: Colors.grey[500],
-                      ),
-                    ),
-                  ],
                 ),
               ],
             );
@@ -367,61 +447,58 @@ class _PlayerPageState extends BaseState<PlayerPage> {
     );
   }
 
-  Widget _buildControlButtons(AudioService service, bool isPlaying) {
+  Widget _buildControlButtons(
+      AudioService service, Song song, bool isPlaying) {
     return Row(
-      mainAxisAlignment: MainAxisAlignment.center,
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
-        IconButton(
-          onPressed: service.togglePlayMode,
-          icon: Icon(
-            service.playModeIcon,
-            color: const Color(0xFFB8D4D0),
-            size: 22,
-          ),
-          padding: const EdgeInsets.all(12),
-        ),
-        const SizedBox(width: 4),
         IconButton(
           onPressed: service.hasQueue ? service.previous : null,
-          icon: const Icon(Icons.skip_previous, size: 28),
+          icon: const Icon(Icons.skip_previous_rounded, size: 34),
-          color: service.hasQueue ? Colors.white60 : Colors.grey[600],
+          color: service.hasQueue ? Colors.white70 : Colors.grey[700],
-          padding: const EdgeInsets.all(12),
         ),
-        const SizedBox(width: 20),
         Container(
-          width: 56,
+          width: 68,
-          height: 56,
+          height: 68,
-          decoration: BoxDecoration(
+          decoration: const BoxDecoration(
-            color: const Color(0xFFB8D4D0),
+            color: Color(0xFFB8D4D0),
             shape: BoxShape.circle,
           ),
           child: IconButton(
             icon: Icon(
-              isPlaying ? Icons.pause : Icons.play_arrow,
+              isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
               color: Colors.black87,
-              size: 28,
+              size: 36,
             ),
             padding: EdgeInsets.zero,
             onPressed: service.togglePlay,
           ),
         ),
-        const SizedBox(width: 20),
         IconButton(
           onPressed: service.hasQueue ? service.next : null,
-          icon: const Icon(Icons.skip_next, size: 28),
+          icon: const Icon(Icons.skip_next_rounded, size: 34),
-          color: service.hasQueue ? Colors.white60 : Colors.grey[600],
+          color: service.hasQueue ? Colors.white70 : Colors.grey[700],
-          padding: const EdgeInsets.all(12),
+        ),
+        IconButton(
+          onPressed: () => _toggleFavorite(song),
+          icon: Icon(
+            _isFavorite ? Icons.favorite : Icons.favorite_border,
+            color: _isFavorite
+                ? const Color(0xFFE05C5C)
+                : Colors.white54,
+            size: 26,
+          ),
+          tooltip: '收藏',
         ),
         IconButton(
           onPressed: _openPlaylist,
           icon: const Icon(
-            Icons.playlist_play_outlined,
+            Icons.queue_music_rounded,
             color: Color(0xFFB8D4D0),
             size: 26,
           ),
-          padding: const EdgeInsets.all(8),
+          tooltip: '播放队列',
         ),
-        const SizedBox(width: 4),
       ],
     );
   }