WebUI 1:1 移植工程文档

目标：把 WebUI/ 文件夹里的 React 原型完全复刻到 Android Kotlin Compose 原生实现，达到视觉 pixel-level 一致。
唯一"不完全复刻"的地方是：动态强调色（dynamic accent）会真实影响按钮、进度条、滑动条的颜色（WebUI 已这么做，原生要保留这个行为）。

0. 总览

0.1 WebUI 的视觉语言（要复刻的核心）

要素 WebUI 现状 当前原生实现
字体 DM Sans（全屏使用） 系统默认
Tab 结构 底部 2 个 tab（Library / Search），Library 页内部有 4 个 chip 子 tab（Albums / Artists / Songs / Playlists） 底部 4 个 Material NavigationBar（歌曲/专辑/艺术家/文件夹）
底栏外观 悬浮玻璃胶囊（pill），滚动时横向形变（200dp + MiniPlayer → 54dp + MiniPlayer 同行） Material3 NavigationBar，无悬浮、无形变
MiniPlayer 玻璃胶囊（border-radius 999），进度以 SVG 弧线贴着胶囊底边 Surface 圆角 16dp + LinearProgressIndicator
专辑封面 线性渐变 + 装饰 SVG 图案 + glow 阴影（无真实图时的 fallback），有真实图时真实图优先 MusicNote 占位图标
动态强调色 从当前歌曲所属专辑的 palette.accent 取色，染按钮、chip、进度条、曲名高亮等 固定 Material 配色
NowPlaying 背景 三种 visual style（noir/vivid/frosted），vivid 从封面梯度做大面积渐变背景 固定黑色
NowPlaying 布局 顶部 drag handle + context header + 278dp 封面（暂停 scale(0.86)）+ 标题/艺术家/心 + 自定义 scrubber + 3-按钮 transport（76dp 白色 FAB）+ 音量条 + 底部 4-图标工具行（Shuffle/Lyrics/Queue/Repeat） 简化版 Material 播放界面

0.2 移植策略

  1. 完全替换（不保留旧 UI）：LibraryScreen / 底栏 / MiniPlayer / NowPlayingScreen / AlbumDetailScreen
  2. 新建：SearchScreen / PlaylistsListTab / GenreGrid
  3. 保留后端：Room、ExoPlayer、Hilt、扫描器不改
  4. 仅改"视图 + 导航 + 主题"：逻辑层（ViewModel 数据流）保持不动，只把 UI 拆装成 WebUI 的样子

0.3 Tab 重构决策

结论：采用 WebUI 原结构（2 底部 tab + 4 chip 子 tab）。

  • 旧结构：底部 4 tab（歌曲/专辑/艺术家/文件夹）
  • 新结构：
    • 底部 2 tab：Library / Search
    • Library 内顶部 chip tab：Albums / Artists / Songs / Playlists
    • 文件夹浏览降级为 Library 页的次要入口（顶部小按钮或隐藏到设置）——WebUI 里没有文件夹概念，文件夹作为"不在 WebUI 中但工程需要保留"的特例

1. 设计 Token 体系

1.1 颜色

新建 ui/theme/WebUiPalette.kt：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
package io.kyonqi.musicplayer.ui.theme

import androidx.compose.ui.graphics.Color

/**
 * 对齐 WebUI player-data.jsx 的 palette 结构
 * grad: 专辑背景渐变两个点
 * accent: 动态强调色（按钮/进度条/高亮文字）
 * text: 深色文字 on 渐变
 * glow: 专辑封面阴影色
 */
data class AlbumPalette(
    val grad: Pair<Color, Color>,
    val accent: Color,
    val text: Color,
    val glow: Color,
) {
    companion object {
        // 无封面可提取时的兜底（偏紫色，与 WebUI 默认 accent 对齐）
        val Default = AlbumPalette(
            grad = Color(0xFF1A003A) to Color(0xFF6200B3),
            accent = Color(0xFFC84FFF),
            text = Color(0xFFF0D4FF),
            glow = Color(0x55C84FFF),
        )
    }
}

/** WebUI 全局颜色常量（两种主题下的玻璃层颜色） */
object WebUiColors {
    // 浅色 / 深色背景
    val AppBgLight = Color(0xFFF2F2F7)
    val AppBgDark  = Color(0xFF0D0D12)

    // 玻璃胶囊
    val GlassLight = Color(0xB8FAFAFF) // rgba(250,250,255,0.72)
    val GlassDark  = Color(0xB8161620) // rgba(22,22,28,0.72)
    val GlassBorderLight = Color(0x14000000)
    val GlassBorderDark  = Color(0x1FFFFFFF)

    // 文字
    val FgLight    = Color(0xFF111111)
    val FgDark     = Color(0xFFFFFFFF)
    val SubLight   = Color(0x73000000) // rgba(0,0,0,0.45)
    val SubDark    = Color(0x73FFFFFF)
    val MutedLight = Color(0x61000000)
    val MutedDark  = Color(0x61FFFFFF)

    // Divider
    val DividerLight = Color(0x0F000000)
    val DividerDark  = Color(0x0FFFFFFF)
}

1.2 动态强调色的 CompositionLocal

新建 ui/theme/LocalAccent.kt：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package io.kyonqi.musicplayer.ui.theme

import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.ReadOnlyComposable
import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color

/**
 * 当前播放曲目的强调色，整颗树都能读到。
 * 切换歌曲时更新这个 Local 来触发按钮/进度条重染。
 */
val LocalAccentColor = compositionLocalOf { AlbumPalette.Default.accent }

val LocalAlbumPalette = compositionLocalOf { AlbumPalette.Default }

val LocalIsDarkTheme = compositionLocalOf { true }

@Composable
fun ProvideAlbumPalette(
    palette: AlbumPalette,
    isDark: Boolean,
    content: @Composable () -> Unit,
) {
    CompositionLocalProvider(
        LocalAlbumPalette provides palette,
        LocalAccentColor provides palette.accent,
        LocalIsDarkTheme provides isDark,
        content = content,
    )
}

object WebUi {
    val accent: Color
        @Composable @ReadOnlyComposable get() = LocalAccentColor.current

    val palette: AlbumPalette
        @Composable @ReadOnlyComposable get() = LocalAlbumPalette.current

    val isDark: Boolean
        @Composable @ReadOnlyComposable get() = LocalIsDarkTheme.current

    val fg     @Composable @ReadOnlyComposable get() = if (isDark) WebUiColors.FgDark else WebUiColors.FgLight
    val sub    @Composable @ReadOnlyComposable get() = if (isDark) WebUiColors.SubDark else WebUiColors.SubLight
    val muted  @Composable @ReadOnlyComposable get() = if (isDark) WebUiColors.MutedDark else WebUiColors.MutedLight
    val glass  @Composable @ReadOnlyComposable get() = if (isDark) WebUiColors.GlassDark else WebUiColors.GlassLight
    val glassBorder @Composable @ReadOnlyComposable get() = if (isDark) WebUiColors.GlassBorderDark else WebUiColors.GlassBorderLight
    val divider @Composable @ReadOnlyComposable get() = if (isDark) WebUiColors.DividerDark else WebUiColors.DividerLight
}

1.3 DM Sans 字体

  1. 下载 DM Sans 字体文件（Regular 400, Medium 500, SemiBold 600, Bold 700）
  2. 放到 app/src/main/res/font/：
    • dm_sans_regular.ttf
    • dm_sans_medium.ttf
    • dm_sans_semibold.ttf
    • dm_sans_bold.ttf
  3. 改造 ui/theme/Type.kt：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package io.kyonqi.musicplayer.ui.theme

import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import io.kyonqi.musicplayer.R

val DmSans = FontFamily(
    Font(R.font.dm_sans_regular,  FontWeight.Normal),
    Font(R.font.dm_sans_medium,   FontWeight.Medium),
    Font(R.font.dm_sans_semibold, FontWeight.SemiBold),
    Font(R.font.dm_sans_bold,     FontWeight.Bold),
)

// 所有 variant 都用 DM Sans，字号对齐 WebUI
val Typography = Typography(
    // 屏幕大标题（Library / Search）: 28sp bold letterSpacing -0.5
    displaySmall = TextStyle(fontFamily = DmSans, fontWeight = FontWeight.Bold, fontSize = 28.sp, letterSpacing = (-0.5).sp),
    // 专辑详情标题: 22sp bold
    headlineSmall = TextStyle(fontFamily = DmSans, fontWeight = FontWeight.Bold, fontSize = 22.sp, letterSpacing = (-0.3).sp),
    // 列表项主文字: 15sp semibold
    titleMedium = TextStyle(fontFamily = DmSans, fontWeight = FontWeight.SemiBold, fontSize = 15.sp),
    // MiniPlayer 标题: 13.5sp semibold
    titleSmall = TextStyle(fontFamily = DmSans, fontWeight = FontWeight.SemiBold, fontSize = 13.5.sp),
    // 副文字: 11.5-12sp
    bodySmall = TextStyle(fontFamily = DmSans, fontWeight = FontWeight.Normal, fontSize = 12.sp),
    labelSmall = TextStyle(fontFamily = DmSans, fontWeight = FontWeight.Bold, fontSize = 10.sp, letterSpacing = 1.6.sp),
    labelMedium = TextStyle(fontFamily = DmSans, fontWeight = FontWeight.SemiBold, fontSize = 13.sp),
    bodyMedium = TextStyle(fontFamily = DmSans, fontWeight = FontWeight.Normal, fontSize = 14.sp),
)

1.4 主题入口

改造 ui/theme/Theme.kt（关键点：关闭 dynamicColor，使用黑底为主 + 动态 accent 覆盖）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Composable
fun MusicPlayerTheme(
    darkTheme: Boolean = true, // WebUI 默认 isDark=false，但实际看上去是深色优先；做成可切换
    content: @Composable () -> Unit,
) {
    val colors = if (darkTheme) {
        darkColorScheme(
            background = WebUiColors.AppBgDark,
            surface = WebUiColors.AppBgDark,
            onBackground = WebUiColors.FgDark,
            onSurface = WebUiColors.FgDark,
            primary = AlbumPalette.Default.accent,
        )
    } else {
        lightColorScheme(
            background = WebUiColors.AppBgLight,
            surface = WebUiColors.AppBgLight,
            onBackground = WebUiColors.FgLight,
            onSurface = WebUiColors.FgLight,
            primary = AlbumPalette.Default.accent,
        )
    }
    MaterialTheme(colorScheme = colors, typography = Typography, content = content)
}

2. 核心组件

2.1 AlbumArt（渐变 + 装饰图案 fallback）

完全重写 ui/component/AlbumArt.kt：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
package io.kyonqi.musicplayer.ui.component

import android.net.Uri
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.PathEffect
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import coil3.compose.SubcomposeAsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade
import io.kyonqi.musicplayer.ui.theme.AlbumPalette

/**
 * WebUI 风格封面：
 *  - 有 uri 时优先显示真实封面（SubcomposeAsyncImage）
 *  - 无 uri 或加载失败时，用 palette 渲染渐变 + 装饰 SVG 图案
 */
@Composable
fun AlbumArt(
    uri: Uri?,
    palette: AlbumPalette,
    modifier: Modifier = Modifier,
    size: Dp = 48.dp,
    cornerRadius: Dp = 10.dp,
    patternVariant: Int = 0, // 0..3 对应 WebUI 里 a1/a2/a3/a4 四种图案
) {
    val shape = RoundedCornerShape(cornerRadius)
    Box(
        modifier = modifier
            .size(size)
            .shadow(elevation = (size.value * 0.06f).dp, shape = shape, clip = false,
                ambientColor = palette.glow, spotColor = palette.glow)
            .clip(shape),
    ) {
        GradientArtwork(palette = palette, patternVariant = patternVariant)
        if (uri != null) {
            val context = LocalContext.current
            val model = ImageRequest.Builder(context).data(uri).crossfade(true).build()
            SubcomposeAsyncImage(
                model = model,
                contentDescription = "专辑封面",
                modifier = Modifier.fillMaxSize(),
                contentScale = ContentScale.Crop,
                error = { /* 渐变 fallback 已经画在底层 */ },
            )
        }
    }
}

@Composable
private fun GradientArtwork(palette: AlbumPalette, patternVariant: Int) {
    // 145deg 线性渐变（与 WebUI 一致）
    val brush = Brush.linearGradient(
        colors = listOf(palette.grad.first, palette.grad.second),
        start = Offset(0f, 0f),
        end = Offset.Infinite,
    )
    Box(Modifier.fillMaxSize().background(brush))
    // 装饰图案层
    Canvas(Modifier.fillMaxSize()) {
        val w = size.width
        val h = size.height
        val white = Color.White
        when (patternVariant % 4) {
            0 -> { // a1: 两个大圆 + 竖椭圆
                drawCircle(white.copy(alpha = 0.07f), radius = w * 0.55f, center = Offset(w * 0.75f, h * 0.35f))
                drawCircle(white.copy(alpha = 0.05f), radius = w * 0.4f, center = Offset(w * 0.25f, h * 0.75f))
                drawOval(
                    color = white.copy(alpha = 0.2f),
                    topLeft = Offset(w * 0.3f, h * 0.1f),
                    size = Size(w * 0.6f, h),
                    style = Stroke(width = 0.5f * (w / 100f)),
                )
            }
            1 -> { // a2: 正弦曲线 + 圆（省略精确曲线，用 path effect 近似）
                drawCircle(
                    color = white.copy(alpha = 0.15f),
                    radius = w * 0.35f, center = Offset(w / 2, h / 2),
                    style = Stroke(width = 0.4f * (w / 100f)),
                )
            }
            2 -> { // a3: 对角线交叉 + 方框
                val sw = 0.5f * (w / 100f)
                drawLine(white.copy(alpha = 0.2f), Offset.Zero, Offset(w, h), strokeWidth = sw)
                drawLine(white.copy(alpha = 0.2f), Offset(w, 0f), Offset(0f, h), strokeWidth = sw)
                drawRect(
                    color = white.copy(alpha = 0.15f),
                    topLeft = Offset(w * 0.25f, h * 0.25f),
                    size = Size(w * 0.5f, h * 0.5f),
                    style = Stroke(width = 0.4f * (w / 100f)),
                )
            }
            3 -> { // a4: 三个同心圆
                val cx = w / 2; val cy = h / 2
                val sw = 0.4f * (w / 100f)
                listOf(0.48f, 0.32f, 0.16f).forEach {
                    drawCircle(white.copy(alpha = 0.2f), radius = w * it, center = Offset(cx, cy), style = Stroke(sw))
                }
            }
        }
    }
    // Vinyl shimmer
    Box(Modifier.fillMaxSize().background(
        Brush.linearGradient(
            colors = listOf(Color.White.copy(alpha = 0.12f), Color.Transparent, Color.Black.copy(alpha = 0.2f)),
            start = Offset(0f, 0f), end = Offset.Infinite,
        )
    ))
}

图案 variant 选择策略：对 album.id % 4 取模即可得到四种 pattern 之一，让不同专辑看起来不同。

2.2 MiniPlayer（玻璃胶囊 + 进度弧）

完全重写 ui/component/MiniPlayer.kt：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
package io.kyonqi.musicplayer.ui.component

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Pause
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import io.kyonqi.musicplayer.ui.theme.WebUi

@Composable
fun MiniPlayer(
    onExpand: () -> Unit,
    modifier: Modifier = Modifier,
    viewModel: MiniPlayerViewModel = hiltViewModel(),
) {
    val state by viewModel.playbackState.collectAsStateWithLifecycle()
    val track = state.currentTrack ?: return

    val accent = WebUi.accent
    val palette = WebUi.palette
    val isDark = WebUi.isDark

    val pillShape = RoundedCornerShape(999.dp)
    val progress = if (state.durationMs > 0) state.positionMs.toFloat() / state.durationMs else 0f

    Box(
        modifier = modifier
            .height(54.dp)
            .fillMaxWidth()
            .shadow(12.dp, pillShape, ambientColor = Color.Black, spotColor = Color.Black)
            .clip(pillShape)
            .background(WebUi.glass)
            .border(1.dp, WebUi.glassBorder, pillShape)
            .clickable(onClick = onExpand),
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.fillMaxSize().padding(start = 5.dp, end = 6.dp),
        ) {
            AlbumArt(
                uri = track.uri,
                palette = palette,
                size = 44.dp,
                cornerRadius = 10.dp,
                patternVariant = track.id.toInt(),
            )
            Spacer(Modifier.width(10.dp))
            Column(Modifier.weight(1f)) {
                Text(
                    track.title,
                    color = WebUi.fg,
                    style = androidx.compose.material3.MaterialTheme.typography.titleSmall,
                    maxLines = 1, overflow = TextOverflow.Ellipsis,
                )
                Text(
                    track.artist,
                    color = WebUi.sub,
                    style = androidx.compose.material3.MaterialTheme.typography.bodySmall,
                    maxLines = 1, overflow = TextOverflow.Ellipsis,
                )
            }
            Spacer(Modifier.width(8.dp))
            Box(
                modifier = Modifier
                    .size(40.dp)
                    .clip(CircleShape)
                    .background(if (isDark) Color(0x14FFFFFF) else Color(0x0D000000))
                    .clickable { viewModel.togglePlayPause() },
                contentAlignment = Alignment.Center,
            ) {
                Icon(
                    if (state.isPlaying) Icons.Default.Pause else Icons.Default.PlayArrow,
                    contentDescription = null,
                    tint = WebUi.fg,
                    modifier = Modifier.size(18.dp),
                )
            }
        }
        // 进度弧：沿着胶囊底边画一条描边，clip 到当前进度
        androidx.compose.foundation.Canvas(Modifier.fillMaxSize()) {
            val r = size.height / 2
            val path = Path().apply {
                // 胶囊路径（外描边）
                addRoundRect(
                    androidx.compose.ui.geometry.RoundRect(
                        left = 1f, top = 1f,
                        right = size.width - 1f, bottom = size.height - 1f,
                        radiusX = r, radiusY = r,
                    )
                )
            }
            clipRect(right = size.width * progress) {
                drawPath(path, color = accent, alpha = 0.85f, style = Stroke(width = 1.5f.dp.toPx()))
            }
        }
    }
}

// drawPath 在 clipRect 作用域内可用；为了简洁直接扩展一下：
private inline fun androidx.compose.ui.graphics.drawscope.DrawScope.clipRect(
    left: Float = 0f, top: Float = 0f, right: Float, bottom: Float = size.height,
    block: androidx.compose.ui.graphics.drawscope.DrawScope.() -> Unit,
) {
    drawIntoCanvas { canvas ->
        canvas.save()
        canvas.clipRect(androidx.compose.ui.geometry.Rect(left, top, right, bottom))
        block()
        canvas.restore()
    }
}

注意：MiniPlayerViewModel 保留现在的，无需改（playbackState/togglePlayPause/next 已够用）。

2.3 浮动玻璃胶囊 BottomTabBar（2 tab）

新建 ui/component/FloatingTabBar.kt：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
package io.kyonqi.musicplayer.ui.component

import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.LibraryMusic
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp
import io.kyonqi.musicplayer.ui.theme.WebUi

data class FloatingTab(val id: String, val label: String, val icon: ImageVector)

val DefaultFloatingTabs = listOf(
    FloatingTab("library", "Library", Icons.Default.LibraryMusic),
    FloatingTab("search",  "Search",  Icons.Default.Search),
)

@Composable
fun FloatingTabBar(
    tabs: List<FloatingTab>,
    activeTab: String,
    collapsed: Boolean,
    onTabChange: (String) -> Unit,
    modifier: Modifier = Modifier,
) {
    val accent = WebUi.accent
    val activeIdx = tabs.indexOfFirst { it.id == activeTab }.coerceAtLeast(0)
    val inactive = if (WebUi.isDark) Color(0x7AFFFFFF) else Color(0x73000000)
    val shape = RoundedCornerShape(999.dp)

    val width by animateDpAsState(
        targetValue = if (collapsed) 54.dp else 200.dp,
        animationSpec = spring(Spring.DampingRatioNoBouncy, Spring.StiffnessMediumLow),
        label = "bar-width",
    )
    val padding by animateDpAsState(
        targetValue = if (collapsed) 0.dp else 4.dp,
        animationSpec = tween(450),
        label = "bar-pad",
    )
    val expandedAlpha by animateFloatAsState(if (collapsed) 0f else 1f, tween(220), label = "exp-alpha")
    val collapsedAlpha by animateFloatAsState(if (collapsed) 1f else 0f, tween(250), label = "col-alpha")
    val indicatorAlpha by animateFloatAsState(if (collapsed) 0f else 1f, tween(250), label = "ind-alpha")

    Box(
        modifier = modifier
            .width(width)
            .height(54.dp)
            .shadow(12.dp, shape)
            .clip(shape)
            .background(WebUi.glass)
            .border(1.dp, WebUi.glassBorder, shape),
    ) {
        // 活动胶囊指示器（展开时显示，sliding 到活动 tab 下）
        if (!collapsed || indicatorAlpha > 0f) {
            val halfW = (width - padding * 2) / 2
            Box(
                Modifier
                    .padding(padding)
                    .fillMaxHeight()
                    .width(halfW)
                    .offset(x = halfW * activeIdx)
                    .clip(shape)
                    .background(if (WebUi.isDark) Color(0x1AFFFFFF) else Color(0x0F000000))
                    .alpha(indicatorAlpha),
            )
        }

        // 展开态：两个 tab 并列
        if (expandedAlpha > 0f) {
            Row(
                modifier = Modifier.fillMaxSize().padding(padding).alpha(expandedAlpha),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                tabs.forEach { tab ->
                    val active = tab.id == activeTab
                    val color = if (active) accent else inactive
                    Row(
                        modifier = Modifier
                            .weight(1f).fillMaxHeight()
                            .clip(shape)
                            .clickable { onTabChange(tab.id) },
                        horizontalArrangement = Arrangement.Center,
                        verticalAlignment = Alignment.CenterVertically,
                    ) {
                        Icon(tab.icon, null, tint = color, modifier = Modifier.size(18.dp))
                        Spacer(Modifier.width(6.dp))
                        Text(
                            tab.label,
                            color = color,
                            style = androidx.compose.material3.MaterialTheme.typography.labelMedium,
                        )
                    }
                }
            }
        }

        // 收起态：单图标
        if (collapsedAlpha > 0f) {
            val activeIcon = tabs[activeIdx].icon
            Box(
                Modifier.fillMaxSize().alpha(collapsedAlpha).clickable { onTabChange(activeTab) },
                contentAlignment = Alignment.Center,
            ) { Icon(activeIcon, null, tint = accent, modifier = Modifier.size(22.dp)) }
        }
    }
}

2.4 Flex-morph 组合容器

新建 ui/component/FloatingBottomArea.kt：底部 flex-wrap 的等价：MiniPlayer + 底栏在一块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
package io.kyonqi.musicplayer.ui.component

import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

/**
 * WebUI 的 flex-wrap 在 Compose 里用 Column/Row 混合 + animateDpAsState 模拟：
 *  - 展开态：MiniPlayer 占一整行（上），底栏 200dp 独占一行（下，居中）
 *  - 收起态：单行，MiniPlayer 占 weight(1)，底栏 54dp 贴右
 */
@Composable
fun FloatingBottomArea(
    miniPlayerContent: (@Composable () -> Unit)?,
    tabBarContent: @Composable () -> Unit,
    collapsed: Boolean,
    modifier: Modifier = Modifier,
) {
    val miniVisible = miniPlayerContent != null
    val collapseReal = collapsed && miniVisible

    // 关键：展开态把 MiniPlayer 和 TabBar 叠两行；收起态把它们并到一行。
    Column(
        modifier = modifier.padding(horizontal = 12.dp).padding(bottom = 10.dp),
        horizontalAlignment = Alignment.End,
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        if (!collapseReal) {
            // 展开态：两行
            if (miniVisible) {
                Box(Modifier.fillMaxWidth()) { miniPlayerContent!!() }
            }
            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { tabBarContent() }
        } else {
            // 收起态：一行，MiniPlayer 左 weight(1)，TabBar 右 54dp
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Box(Modifier.weight(1f)) { miniPlayerContent!!() }
                tabBarContent()
            }
        }
    }
}

2.5 滚动 → 收缩的 NestedScrollConnection

复用现有 prototype/CollapsibleBottomBarState.kt 的思路，但简化成布尔：collapsed: State<Boolean>。

新建 ui/component/FloatingBarScroll.kt：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package io.kyonqi.musicplayer.ui.component

import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.runtime.*
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource

/**
 * 对齐 WebUI MikuPlayer.html 的 handleScroll：
 *  - y <= 8：展开
 *  - 向下滚（dy > 6）：收起
 *  - 向上滚（dy < -6）：展开
 */
@Composable
fun rememberFloatingBarCollapse(listState: LazyListState): State<Boolean> {
    val collapsed = remember { mutableStateOf(false) }
    LaunchedEffect(listState) {
        var lastIndex = 0; var lastOffset = 0
        snapshotFlow { listState.firstVisibleItemIndex to listState.firstVisibleItemScrollOffset }
            .collect { (idx, off) ->
                val y = idx * 1000 + off // 粗略累计
                val last = lastIndex * 1000 + lastOffset
                when {
                    idx == 0 && off <= 8 -> collapsed.value = false
                    y > last + 6 -> collapsed.value = true
                    y < last - 6 -> collapsed.value = false
                }
                lastIndex = idx; lastOffset = off
            }
    }
    return collapsed
}

3. 屏幕移植

3.1 LibraryScreen（4 chip 子 tab）

新建 ui/screen/LibraryScreen.kt：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
package io.kyonqi.musicplayer.ui.screen

import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import io.kyonqi.musicplayer.ui.component.*
import io.kyonqi.musicplayer.ui.theme.WebUi
import io.kyonqi.musicplayer.ui.theme.AlbumPalette

enum class LibraryTab(val label: String) { ALBUMS("Albums"), ARTISTS("Artists"), SONGS("Songs"), PLAYLISTS("Playlists") }

@Composable
fun LibraryScreen(
    onAlbumClick: (Long) -> Unit,
    onArtistClick: (Long) -> Unit,
    onListScrollCollapse: (Boolean) -> Unit,
) {
    var tab by remember { mutableStateOf(LibraryTab.ALBUMS) }
    val listState = rememberLazyListState()
    val gridState = androidx.compose.foundation.lazy.grid.rememberLazyGridState()
    val collapsed by rememberFloatingBarCollapse(listState)
    LaunchedEffect(collapsed) { onListScrollCollapse(collapsed) }

    Column(Modifier.fillMaxSize()) {
        // 大标题
        Box(Modifier.padding(start = 18.dp, top = 20.dp, end = 18.dp)) {
            Text("Library", color = WebUi.fg, style = MaterialTheme.typography.displaySmall)
        }
        // 4 chip tab
        Row(
            Modifier.horizontalScroll(rememberScrollState()).padding(start = 16.dp, top = 14.dp, end = 16.dp),
            horizontalArrangement = Arrangement.spacedBy(6.dp),
        ) {
            LibraryTab.values().forEach { t ->
                ChipTab(label = t.label, active = tab == t, onClick = { tab = t })
            }
        }
        Spacer(Modifier.height(12.dp))
        // 内容
        when (tab) {
            LibraryTab.ALBUMS   -> AlbumsGrid(gridState, onAlbumClick)
            LibraryTab.ARTISTS  -> ArtistsList(listState, onArtistClick)
            LibraryTab.SONGS    -> SongsList(listState)
            LibraryTab.PLAYLISTS-> PlaylistsList(listState)
        }
    }
}

@Composable
private fun ChipTab(label: String, active: Boolean, onClick: () -> Unit) {
    val accent = WebUi.accent
    val bg = when {
        active -> accent
        WebUi.isDark -> Color(0x17FFFFFF)
        else -> Color(0x12000000)
    }
    Box(
        Modifier.clip(RoundedCornerShape(100.dp)).background(bg).clickable(onClick = onClick)
            .padding(horizontal = 14.dp, vertical = 6.dp),
    ) {
        Text(
            label,
            color = if (active) Color.White else WebUi.sub,
            fontWeight = FontWeight.SemiBold,
            style = MaterialTheme.typography.labelMedium,
        )
    }
}

/* Albums 2 列 grid，item = AlbumArt(100%) + title + artist */
@Composable
private fun AlbumsGrid(state: androidx.compose.foundation.lazy.grid.LazyGridState, onClick: (Long) -> Unit) {
    // 使用 AlbumListViewModel (既存) 的 albums 流
    val vm: AlbumListViewModel = hiltViewModel()
    val albums by vm.albums.collectAsStateWithLifecycle()
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        state = state,
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 4.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        modifier = Modifier.fillMaxSize(),
    ) {
        items(albums, key = { it.albumId }) { album ->
            Column(Modifier.clickable { onClick(album.albumId) }) {
                AlbumArt(
                    uri = null, // TODO: 从 coverUri 取
                    palette = AlbumPalette.Default,
                    size = 160.dp, // adaptive: 用 BoxWithConstraints 算 max
                    cornerRadius = 12.dp,
                    patternVariant = album.albumId.toInt(),
                )
                Spacer(Modifier.height(8.dp))
                Text(album.name, color = WebUi.fg, maxLines = 1, style = MaterialTheme.typography.titleSmall)
                Text(album.artist, color = WebUi.sub, maxLines = 1, style = MaterialTheme.typography.bodySmall)
            }
        }
    }
}

/* Artists 列表：渐变圆头像（首字母）+ 名称 + genre */
@Composable
private fun ArtistsList(state: androidx.compose.foundation.lazy.LazyListState, onClick: (Long) -> Unit) {
    val vm: ArtistListViewModel = hiltViewModel()
    val artists by vm.artists.collectAsStateWithLifecycle()
    LazyColumn(state = state, modifier = Modifier.fillMaxSize()) {
        items(artists, key = { it.artistId }) { artist ->
            ArtistRow(
                name = artist.name,
                genre = "Artist",
                firstLetter = artist.name.firstOrNull()?.uppercaseChar()?.toString() ?: "?",
                palette = AlbumPalette.Default,
                onClick = { onClick(artist.artistId) },
            )
        }
    }
}

@Composable
private fun ArtistRow(name: String, genre: String, firstLetter: String, palette: AlbumPalette, onClick: () -> Unit) {
    Row(
        Modifier.fillMaxWidth().clickable(onClick = onClick).padding(horizontal = 16.dp, vertical = 12.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Box(
            Modifier.size(52.dp).clip(androidx.compose.foundation.shape.CircleShape)
                .background(androidx.compose.ui.graphics.Brush.linearGradient(listOf(palette.grad.first, palette.grad.second))),
            contentAlignment = Alignment.Center,
        ) {
            Text(firstLetter, color = Color.White, style = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.Bold)
        }
        Spacer(Modifier.width(14.dp))
        Column(Modifier.weight(1f)) {
            Text(name, color = WebUi.fg, style = MaterialTheme.typography.titleMedium)
            Text(genre, color = WebUi.sub, style = MaterialTheme.typography.bodySmall)
        }
        Text("›", color = WebUi.sub)
    }
}

/* Songs 全曲列表：showAlbumArt 风格 */
@Composable
private fun SongsList(state: androidx.compose.foundation.lazy.LazyListState) {
    val vm: SongListViewModel = hiltViewModel()
    // 用既有 tracks 流，渲染 SongRow
    // ...
}

@Composable
private fun PlaylistsList(state: androidx.compose.foundation.lazy.LazyListState) {
    // TODO Phase3 再做播放列表，先占位
}

3.2 SongRow（通用）

新建 ui/component/SongRow.kt：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@Composable
fun SongRow(
    title: String, artist: String, duration: String, trackNum: Int?,
    isActive: Boolean, onPlay: () -> Unit,
    albumUri: android.net.Uri?, palette: AlbumPalette, showAlbumArt: Boolean = false,
) {
    val accent = WebUi.accent
    val activeBg = if (WebUi.isDark) Color(0x0FFFFFFF) else Color(0x0A000000)
    Row(
        Modifier.fillMaxWidth()
            .background(if (isActive) activeBg else Color.Transparent)
            .clickable(onClick = onPlay)
            .padding(horizontal = 16.dp, vertical = 10.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        if (showAlbumArt) {
            AlbumArt(uri = albumUri, palette = palette, size = 44.dp, cornerRadius = 8.dp,
                patternVariant = (trackNum ?: 0))
        } else {
            Box(Modifier.width(28.dp), contentAlignment = Alignment.Center) {
                Text(
                    (trackNum ?: 0).toString(),
                    color = if (isActive) accent else WebUi.sub,
                    fontWeight = if (isActive) FontWeight.Bold else FontWeight.Normal,
                    style = MaterialTheme.typography.bodySmall,
                )
            }
        }
        Spacer(Modifier.width(12.dp))
        Column(Modifier.weight(1f)) {
            Text(title, color = if (isActive) accent else WebUi.fg,
                style = MaterialTheme.typography.titleMedium, maxLines = 1, overflow = TextOverflow.Ellipsis)
            if (showAlbumArt) {
                Text(artist, color = WebUi.sub, style = MaterialTheme.typography.bodySmall, maxLines = 1)
            }
        }
        Text(duration, color = WebUi.sub, style = MaterialTheme.typography.bodySmall)
    }
}

3.3 AlbumDetailScreen（重写）

关键点：顶部居中大封面 180dp + Back 按钮 + 标题 + artist(accent) + year/N songs + Play All 胶囊（accent 实色）+ 曲目列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
@Composable
fun AlbumDetailScreen(onBack: () -> Unit, vm: AlbumDetailViewModel = hiltViewModel()) {
    val album by vm.album.collectAsStateWithLifecycle()
    val tracks by vm.tracks.collectAsStateWithLifecycle()
    val accent = WebUi.accent
    val palette = WebUi.palette

    LazyColumn(
        Modifier.fillMaxSize(),
        contentPadding = PaddingValues(bottom = 90.dp),
    ) {
        item {
            Column(
                Modifier.fillMaxWidth().padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(16.dp),
            ) {
                Row(Modifier.fillMaxWidth()) {
                    Row(Modifier.clickable(onClick = onBack), verticalAlignment = Alignment.CenterVertically) {
                        Icon(Icons.Default.ArrowBackIosNew, null, tint = accent, modifier = Modifier.size(16.dp))
                        Spacer(Modifier.width(4.dp))
                        Text("Back", color = accent, style = MaterialTheme.typography.labelMedium)
                    }
                }
                AlbumArt(uri = null, palette = palette, size = 180.dp, cornerRadius = 18.dp,
                    patternVariant = (album?.albumId ?: 0).toInt())
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Text(album?.name.orEmpty(), color = WebUi.fg, style = MaterialTheme.typography.headlineSmall)
                    Text(album?.artist.orEmpty(), color = accent, style = MaterialTheme.typography.titleMedium)
                    Text("${album?.year ?: ""} · ${tracks.size} songs", color = WebUi.sub,
                        style = MaterialTheme.typography.bodySmall)
                }
                // Play All
                Row(
                    Modifier
                        .clip(RoundedCornerShape(100.dp))
                        .background(accent)
                        .clickable { vm.playAll() }
                        .padding(horizontal = 28.dp, vertical = 10.dp),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(8.dp),
                ) {
                    Icon(Icons.Default.PlayArrow, null, tint = Color.White, modifier = Modifier.size(16.dp))
                    Text("Play All", color = Color.White, fontWeight = FontWeight.Bold,
                        style = MaterialTheme.typography.labelMedium)
                }
            }
        }
        items(tracks) { t ->
            SongRow(
                title = t.title, artist = t.artist, duration = fmtDuration(t.durationMs),
                trackNum = t.trackNumber, isActive = false, onPlay = { vm.playAt(tracks.indexOf(t)) },
                albumUri = null, palette = palette, showAlbumArt = false,
            )
        }
    }
}

3.4 SearchScreen（全新）

新建 ui/screen/SearchScreen.kt：

  • 顶部 “Search” 28sp 标题
  • 搜索 input（玻璃底色 + 圆角 12dp + 左放大镜）
  • 未输入时：Browse Genres（2 列 grid，6 个渐变色块，每块 68dp 高，左下显示文字）
  • 输入时：SECTION “Results” 大写粗体 + SongRow showAlbumArt 列表

Genre 颜色映射：

1
2
3
4
5
6
7
8
val Genres = listOf(
    "Synthwave" to 0xFFC84FFF,
    "Ambient"   to 0xFF22C0FF,
    "EDM"       to 0xFFFF8822,
    "Indie"     to 0xFF00E87A,
    "Electronic"to 0xFFFF4466,
    "House"     to 0xFFFFCC00,
)

每个格子背景：linear-gradient(135deg, ${color}33, ${color}88)，边框 ${color}44。

3.5 NowPlayingScreen（完整重写）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
package io.kyonqi.musicplayer.ui.screen

import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.scale
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import io.kyonqi.musicplayer.ui.theme.WebUi

enum class VisualStyle { NOIR, VIVID, FROSTED }

@Composable
fun NowPlayingScreen(
    onBack: () -> Unit,
    visualStyle: VisualStyle = VisualStyle.VIVID,
    viewModel: NowPlayingViewModel = hiltViewModel(),
) {
    val state by viewModel.playbackState.collectAsStateWithLifecycle()
    val track = state.currentTrack ?: return

    val accent = WebUi.accent
    val palette = WebUi.palette
    val (g1, g2) = palette.grad
    val textPri = Color.White
    val textSec = Color(0x9DFFFFFF) // 0.62
    val textMut = Color(0x61FFFFFF) // 0.38

    // 背景 brush
    val bg: Brush = when (visualStyle) {
        VisualStyle.NOIR -> Brush.verticalGradient(listOf(Color(0xFF1A1A22), Color(0xFF0A0A10)))
        VisualStyle.FROSTED -> Brush.radialGradient(
            colors = listOf(g2.copy(alpha = 0.8f), g1.copy(alpha = 0.67f), Color(0xFF0A0A10)),
        )
        VisualStyle.VIVID -> Brush.verticalGradient(listOf(g2, g1, Color(0xFF0A0A12)))
    }

    var dragProgress by remember { mutableStateOf<Float?>(null) }
    val displayProgress = dragProgress ?: (if (state.durationMs > 0) state.positionMs.toFloat() / state.durationMs else 0f)

    Box(Modifier.fillMaxSize().background(bg)) {
        // Ambient tint
        Box(Modifier.fillMaxSize().background(
            Brush.radialGradient(
                colors = listOf(accent.copy(alpha = 0.13f), Color.Transparent),
                center = Offset(0.5f, 0.2f), radius = 1000f,
            )
        ))
        Column(Modifier.fillMaxSize()) {
            // Drag handle
            Box(
                Modifier.fillMaxWidth().padding(top = 8.dp),
                contentAlignment = Alignment.Center,
            ) {
                Box(
                    Modifier
                        .size(width = 36.dp, height = 5.dp)
                        .clip(RoundedCornerShape(3.dp))
                        .background(Color(0x40FFFFFF))
                        .clickable(onClick = onBack),
                )
            }
            // Context header
            Row(
                Modifier.fillMaxWidth().padding(horizontal = 22.dp).padding(top = 16.dp),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                Icon(Icons.Default.KeyboardArrowDown, null, tint = textSec,
                    modifier = Modifier.size(22.dp).clickable(onClick = onBack))
                Column(Modifier.weight(1f), horizontalAlignment = Alignment.CenterHorizontally) {
                    Text("PLAYING FROM ALBUM", color = textMut,
                        style = MaterialTheme.typography.labelSmall)
                    Spacer(Modifier.height(2.dp))
                    Text(track.album, color = textPri, fontWeight = FontWeight.SemiBold,
                        fontSize = 13.sp, maxLines = 1, overflow = TextOverflow.Ellipsis)
                }
                Icon(Icons.Default.MoreHoriz, null, tint = textSec, modifier = Modifier.size(20.dp))
            }
            // Album art with scale
            Box(
                Modifier.fillMaxWidth().padding(top = 28.dp, bottom = 26.dp),
                contentAlignment = Alignment.Center,
            ) {
                Box(Modifier.scale(if (state.isPlaying) 1f else 0.86f)) {
                    // TODO: 用 animateFloatAsState 做 scale 动画
                    io.kyonqi.musicplayer.ui.component.AlbumArt(
                        uri = track.uri, palette = palette, size = 278.dp, cornerRadius = 14.dp,
                        patternVariant = track.id.toInt(),
                    )
                }
            }
            // Control column
            Column(Modifier.fillMaxSize().padding(horizontal = 26.dp, vertical = 14.dp)) {
                // Title row
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Column(Modifier.weight(1f)) {
                        Text(track.title, color = textPri, fontSize = 22.sp,
                            fontWeight = FontWeight.Bold, maxLines = 1, overflow = TextOverflow.Ellipsis)
                        Text(track.artist, color = accent, fontSize = 15.sp,
                            fontWeight = FontWeight.Medium, maxLines = 1, overflow = TextOverflow.Ellipsis)
                    }
                    Icon(
                        if (viewModel.isLiked) Icons.Default.Favorite else Icons.Default.FavoriteBorder,
                        null, tint = if (viewModel.isLiked) accent else textSec,
                        modifier = Modifier.size(24.dp).clickable { viewModel.toggleLike() },
                    )
                }
                Spacer(Modifier.height(22.dp))
                // Scrubber
                Scrubber(
                    progress = displayProgress,
                    onDrag = { p -> dragProgress = p },
                    onDragEnd = {
                        dragProgress?.let { viewModel.seekTo((it * state.durationMs).toLong()) }
                        dragProgress = null
                    },
                    textMut = textMut,
                )
                Row(
                    Modifier.fillMaxWidth().padding(top = 4.dp),
                    horizontalArrangement = Arrangement.SpaceBetween,
                ) {
                    Text(fmtTime((displayProgress * state.durationMs / 1000).toLong()),
                        color = textMut, fontSize = 11.sp)
                    Text("-" + fmtTime(((1f - displayProgress) * state.durationMs / 1000).toLong()),
                        color = textMut, fontSize = 11.sp)
                }
                Spacer(Modifier.height(14.dp))
                // Transport
                Row(
                    Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.spacedBy(42.dp, Alignment.CenterHorizontally),
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Icon(Icons.Default.SkipPrevious, null, tint = textPri,
                        modifier = Modifier.size(38.dp).clickable { viewModel.prev() })
                    Box(
                        Modifier.size(76.dp).shadow(12.dp, CircleShape)
                            .clip(CircleShape).background(Color.White)
                            .clickable { viewModel.togglePlayPause() },
                        contentAlignment = Alignment.Center,
                    ) {
                        Icon(
                            if (state.isPlaying) Icons.Default.Pause else Icons.Default.PlayArrow,
                            null, tint = Color(0xFF111111), modifier = Modifier.size(32.dp),
                        )
                    }
                    Icon(Icons.Default.SkipNext, null, tint = textPri,
                        modifier = Modifier.size(38.dp).clickable { viewModel.next() })
                }
                Spacer(Modifier.height(20.dp))
                // Volume
                Row(verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.spacedBy(10.dp)) {
                    Icon(Icons.Default.VolumeDown, null, tint = textMut, modifier = Modifier.size(14.dp))
                    VolumeBar(volume = viewModel.volume, onChange = viewModel::setVolume, modifier = Modifier.weight(1f))
                    Icon(Icons.Default.VolumeUp, null, tint = textMut, modifier = Modifier.size(16.dp))
                }
                Spacer(Modifier.weight(1f))
                // Utility row
                Row(
                    Modifier.fillMaxWidth()
                        .padding(top = 10.dp),
                    horizontalArrangement = Arrangement.SpaceEvenly,
                ) {
                    UtilBtn("Shuffle", Icons.Default.Shuffle, viewModel.shuffle, accent, textSec, textMut,
                        onClick = viewModel::toggleShuffle)
                    UtilBtn("Lyrics",  Icons.AutoMirrored.Filled.Notes, false, accent, textSec, textMut, onClick = {})
                    UtilBtn("Queue",   Icons.AutoMirrored.Filled.QueueMusic, false, accent, textSec, textMut, onClick = {})
                    UtilBtn("Repeat",  Icons.Default.Repeat, viewModel.repeat, accent, textSec, textMut,
                        onClick = viewModel::toggleRepeat)
                }
            }
        }
    }
}

@Composable
private fun Scrubber(progress: Float, onDrag: (Float) -> Unit, onDragEnd: () -> Unit, textMut: Color) {
    Box(
        Modifier.fillMaxWidth().height(22.dp).pointerInput(Unit) {
            detectDragGestures(
                onDrag = { change, _ -> onDrag((change.position.x / size.width).coerceIn(0f, 1f)) },
                onDragEnd = { onDragEnd() },
            )
        },
        contentAlignment = Alignment.CenterStart,
    ) {
        // Track
        Box(Modifier.fillMaxWidth().height(4.dp).clip(RoundedCornerShape(2.dp)).background(Color(0x2EFFFFFF)))
        // Fill
        Box(Modifier.fillMaxWidth(progress).height(4.dp).clip(RoundedCornerShape(2.dp)).background(Color.White))
        // Thumb
        Box(Modifier.offset(x = androidx.compose.ui.unit.Dp(progress * 350 - 5))
            .size(10.dp).clip(CircleShape).background(Color.White))
    }
}

@Composable
private fun VolumeBar(volume: Float, onChange: (Float) -> Unit, modifier: Modifier) {
    Box(modifier.height(24.dp).pointerInput(Unit) {
        detectDragGestures { change, _ ->
            onChange((change.position.x / size.width).coerceIn(0f, 1f))
        }
    }, contentAlignment = Alignment.CenterStart) {
        Box(Modifier.fillMaxWidth().height(4.dp).clip(RoundedCornerShape(2.dp)).background(Color(0x26FFFFFF)))
        Box(Modifier.fillMaxWidth(volume).height(4.dp).clip(RoundedCornerShape(2.dp)).background(Color(0xE6FFFFFF)))
    }
}

@Composable
private fun UtilBtn(
    label: String, icon: androidx.compose.ui.graphics.vector.ImageVector,
    active: Boolean, accent: Color, textSec: Color, textMut: Color, onClick: () -> Unit,
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(4.dp),
        modifier = Modifier.clickable(onClick = onClick).padding(vertical = 6.dp),
    ) {
        Box(
            Modifier.size(44.dp).clip(RoundedCornerShape(12.dp))
                .background(if (active) Color(0x1FFFFFFF) else Color.Transparent),
            contentAlignment = Alignment.Center,
        ) {
            Icon(icon, null, tint = if (active) accent else textSec, modifier = Modifier.size(18.dp))
        }
        Text(label, color = if (active) Color.White else textMut,
            style = MaterialTheme.typography.labelSmall, fontWeight = FontWeight.SemiBold)
    }
}

private fun fmtTime(secs: Long): String {
    val m = secs / 60; val s = secs % 60
    return "%d:%02d".format(m, s)
}

NowPlayingViewModel 需要新增：

  • var isLiked: Boolean、fun toggleLike()
  • var volume: Float、fun setVolume(v: Float) （内部调用 AudioManager）
  • var shuffle/repeat: Boolean、toggleShuffle()/toggleRepeat()
  • fun seekTo(ms: Long)

4. 导航与顶层壳

4.1 AppNavigation 重写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    val currentBackStack by navController.currentBackStackEntryAsState()
    val route = currentBackStack?.destination?.route

    // 扫描
    val scannerVM: LibraryScannerViewModel = hiltViewModel()
    PermissionHandler(permission = readAudioPermission(), onGranted = { scannerVM.initLibrary() })

    // 动态 accent 来自当前播放曲
    val nowPlayingState by hiltViewModel<MiniPlayerViewModel>().playbackState.collectAsStateWithLifecycle()
    val palette = extractPaletteFor(nowPlayingState.currentTrack) // 见 4.3

    // 底栏收起态
    var barCollapsed by remember { mutableStateOf(false) }
    val showBar = route !in setOf(Routes.NOW_PLAYING)
    val isTabRoute = route in setOf(Routes.LIBRARY, Routes.SEARCH)

    ProvideAlbumPalette(palette = palette, isDark = true) {
        Box(Modifier.fillMaxSize().background(if (WebUi.isDark) WebUiColors.AppBgDark else WebUiColors.AppBgLight)) {
            NavHost(
                navController, startDestination = Routes.LIBRARY,
                modifier = Modifier.fillMaxSize(),
            ) {
                composable(Routes.LIBRARY) {
                    LibraryScreen(
                        onAlbumClick = { navController.navigate("${Routes.ALBUM_DETAIL}/$it") },
                        onArtistClick = { navController.navigate("${Routes.ARTIST_DETAIL}/$it") },
                        onListScrollCollapse = { barCollapsed = it },
                    )
                }
                composable(Routes.SEARCH) {
                    SearchScreen(onListScrollCollapse = { barCollapsed = it })
                }
                composable("${Routes.ALBUM_DETAIL}/{albumId}",
                    arguments = listOf(navArgument("albumId") { type = NavType.LongType })) {
                    AlbumDetailScreen(onBack = { navController.popBackStack() })
                }
                composable("${Routes.ARTIST_DETAIL}/{artistId}",
                    arguments = listOf(navArgument("artistId") { type = NavType.LongType })) {
                    ArtistDetailScreen(
                        onBack = { navController.popBackStack() },
                        onAlbumClick = { navController.navigate("${Routes.ALBUM_DETAIL}/$it") },
                    )
                }
                composable(Routes.NOW_PLAYING,
                    enterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Up, tween(400)) },
                    exitTransition  = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Down, tween(400)) }) {
                    NowPlayingScreen(onBack = { navController.popBackStack() })
                }
            }
            // 悬浮底部区
            AnimatedVisibility(
                visible = showBar,
                enter = slideInVertically { it }, exit = slideOutVertically { it },
                modifier = Modifier.align(Alignment.BottomCenter),
            ) {
                FloatingBottomArea(
                    miniPlayerContent = if (nowPlayingState.currentTrack != null) {
                        { MiniPlayer(onExpand = { navController.navigate(Routes.NOW_PLAYING) }) }
                    } else null,
                    tabBarContent = {
                        FloatingTabBar(
                            tabs = DefaultFloatingTabs,
                            activeTab = when (route) {
                                Routes.SEARCH -> "search"
                                else -> "library"
                            },
                            collapsed = barCollapsed && nowPlayingState.currentTrack != null && isTabRoute,
                            onTabChange = { id ->
                                val target = if (id == "search") Routes.SEARCH else Routes.LIBRARY
                                navController.navigateToTab(target)
                                barCollapsed = false
                            },
                        )
                    },
                    collapsed = barCollapsed && isTabRoute,
                )
            }
        }
    }
}

private object Routes {
    const val LIBRARY = "library"
    const val SEARCH = "search"
    const val ALBUM_DETAIL = "album_detail"
    const val ARTIST_DETAIL = "artist_detail"
    const val NOW_PLAYING = "now_playing"
}

private fun NavController.navigateToTab(route: String) {
    navigate(route) {
        popUpTo(graph.findStartDestination().id) { saveState = true }
        launchSingleTop = true; restoreState = true
    }
}

4.2 路由变更总结

旧路由 新路由 说明
library_song/library_albums/library_artists/library_folders library 合并为 Library 页，chip 子 tab 切换
— search 新增
album_detail/{id} album_detail/{id} 保留，重写 UI
artist_detail/{id} artist_detail/{id} 保留，重写 UI
now_playing now_playing 保留，重写 UI

4.3 动态 Palette 提取

新建 ui/theme/PaletteExtractor.kt（已存在，需改造为：从 AudioFile 取）：

1
2
3
4
5
6
@Composable
fun extractPaletteFor(track: AudioFile?): AlbumPalette {
    // 简化版：从 track.uri 读取封面 bitmap，用 androidx.palette 提取主色与暗色
    // 暂时 fallback 到 Default，Phase 后期补上
    return AlbumPalette.Default
}

5. 文件变更清单

5.1 新建（17 个）

路径 说明
ui/theme/WebUiPalette.kt AlbumPalette / WebUiColors
ui/theme/LocalAccent.kt LocalAccentColor / WebUi 快捷访问
ui/component/FloatingTabBar.kt 2-tab 玻璃胶囊
ui/component/FloatingBottomArea.kt flex-wrap 容器
ui/component/FloatingBarScroll.kt NestedScroll → collapsed State
ui/component/SongRow.kt 通用曲目行
ui/component/ChipTab.kt 子 tab chip
ui/component/GenreCard.kt Search 页面 genre 格子
ui/screen/LibraryScreen.kt 大标题 + chip + 4 子页（Albums/Artists/Songs/Playlists）
ui/screen/SearchScreen.kt Search 新页
app/src/main/res/font/dm_sans_regular.ttf 字体
app/src/main/res/font/dm_sans_medium.ttf 字体
app/src/main/res/font/dm_sans_semibold.ttf 字体
app/src/main/res/font/dm_sans_bold.ttf 字体

5.2 重写（10 个）

路径 改动
ui/component/AlbumArt.kt 渐变 + SVG 图案 fallback + 真实封面覆盖
ui/component/MiniPlayer.kt 玻璃胶囊 + 进度弧
ui/screen/AlbumDetailScreen.kt 大居中封面 + Play All 胶囊 + 曲目列表
ui/screen/ArtistDetailScreen.kt 渐变圆头像 + 专辑 + 曲目，按 WebUI 结构重排
ui/screen/NowPlayingScreen.kt drag handle + context + 278dp 封面 + 3-按钮 + 音量 + 4 图标工具行
ui/navigation/AppNavigation.kt 2 tab + 悬浮底栏，替换 Scaffold+NavigationBar
ui/theme/Type.kt 切到 DM Sans
ui/theme/Theme.kt 关闭 dynamicColor，深色优先
ui/theme/PaletteExtractor.kt 从 track 取封面 bitmap → androidx.palette 提取
ui/screen/NowPlayingScreen.kt 的 ViewModel 新增 isLiked/volume/shuffle/repeat/seekTo

5.3 废弃（5 个）

路径 处置
ui/screen/SongListScreen.kt 合并进 LibraryScreen 的 Songs chip
ui/screen/AlbumListScreen.kt 合并进 LibraryScreen 的 Albums chip
ui/screen/ArtistListScreen.kt 合并进 LibraryScreen 的 Artists chip
ui/screen/FolderBrowserScreen.kt 降级为 Library 页内次要入口（或移入设置）
ui/screen/FileBrowseScreen.kt 删除
prototype/*.kt 删除原型

6. 实施阶段

Phase A — 视觉基底（1 日）

  • 下载字体 → res/font/
  • 新增 WebUiPalette.kt / LocalAccent.kt
  • 改造 Type.kt / Theme.kt
  • 重写 AlbumArt.kt（渐变 + 图案 fallback）
  • 验收：启动 app，所有现有屏字体变 DM Sans；AlbumArt(uri = null, palette = Default) 能看到紫色渐变封面。

Phase B — 浮动底栏（1-2 日）

  • 新增 FloatingTabBar.kt / FloatingBottomArea.kt / FloatingBarScroll.kt
  • 重写 MiniPlayer.kt（玻璃胶囊 + 进度弧）
  • 重写 AppNavigation.kt：Scaffold → Box + 悬浮底栏，2 tab 路由
  • 合并 SongListScreen/AlbumListScreen/ArtistListScreen → LibraryScreen（先用当前 ViewModel 直接塞进去，chip tab 切换）
  • 验收：底部悬浮胶囊，向下滚动收缩为单行，向上回弹展开；点击 tab 切换 Library ↔ Search。

Phase C — Library / AlbumDetail 完整样式（2 日）

  • 完成 LibraryScreen 四个 chip 子 tab 的 item 样式（Albums grid / Artists list / Songs / Playlists 占位）
  • 重写 AlbumDetailScreen（大封面 + Play All）
  • 重写 ArtistDetailScreen（渐变头像 + 列表）
  • 新增 SongRow / ChipTab
  • 验收：Library 页切四个 chip，item 视觉与 WebUI 比对；AlbumDetail 进入后大封面+按钮样式一致。

Phase D — SearchScreen（1 日）

  • 新增 SearchScreen.kt + GenreCard.kt
  • 空态显示 6 格 genre；输入触发 debounce(300) 搜索并切换成结果列表
  • 复用 SearchViewModel（如不存在则新建，注入 TrackDao/AlbumDao/ArtistDao）
  • 验收：空态 / 输入 / 无结果三个状态都能复现。

Phase E — NowPlaying 完整重写（2-3 日）

  • 重写 NowPlayingScreen.kt 全部组件（drag handle / context header / 278dp 封面 + scale 动画 / 标题行 + heart / Scrubber / Transport 3-btn / Volume / 4 UtilBtn）
  • 扩展 NowPlayingViewModel（isLiked/volume/shuffle/repeat/seekTo）
  • 实现 VisualStyle enum 切换（noir/vivid/frosted）——可以做到 设置页一个 chip 切
  • 验收：进入 NowPlaying 逐项比对截图。

Phase F — 动态 Accent 提取（1-2 日）

  • 改造 PaletteExtractor.kt：从 track.uri 读取 cover bitmap → androidx.palette.graphics.Palette 提取 vibrantSwatch / darkVibrantSwatch → 组装 AlbumPalette
  • 在 AppNavigation 里切歌时重算 palette，推给 ProvideAlbumPalette
  • 异步：用 rememberCoroutineScope + Dispatchers.IO 读 bitmap，避免卡 UI
  • 验收：播放不同封面的歌，底栏高亮/曲名 accent 明显变化。

Phase G — 清理（0.5 日）

  • 删除废弃文件
  • 删除 prototype/*.kt
  • 删 FileBrowseScreen.kt / MusicListItem.kt（如未被 Library 新 row 复用）
  • 运行一次 ./gradlew :app:lint / ./gradlew :app:assembleDebug 验收

7. 与 WebUI 的视觉对照表（像素级 checklist）

组件 尺寸 / 颜色 WebUI 源
底部悬浮底栏容器 距底 10dp，左右 padding 12dp MikuPlayer.html :227
TabBar 展开宽度 200dp，高 54dp，radius 999 player-components.jsx :78
TabBar 收起宽度 54dp，radius 999 同上
MiniPlayer 高度 54dp radius 999 :160
MiniPlayer 内 padding left 5 right 6 top/bot 5 :167
MiniPlayer 曲名 DM Sans 13.5sp SemiBold :173
MiniPlayer 艺术家 DM Sans 11.5sp :177
MiniPlayer play 按钮 40dp 圆形 半透明底 :182
进度弧 stroke 1.5px accent 0.85 alpha :201
AlbumArt 渐变角度 145deg :37
AlbumArt 阴影 0 (size*0.06) (size*0.2) glow :38
Library 大标题 28sp Bold -0.5 letter-spacing player-screens.jsx :15
Chip tab padding 6/14, radius 100 :22
Chip 活动色 accent 底 + 白字 :24
Albums grid 2 列，gap 16dp :37
Artist 头像 52dp 圆，grad 135deg :59
AlbumDetail 封面 180dp radius 18 :129
Play All radius 100, padding 10/28, shadow 6 20 accent66 :139
NowPlaying drag handle 36x5 radius 3 alpha 0.25 player-nowplaying.jsx :82
NowPlaying 封面 278dp radius 14 shadow 24 50 .5 :113
NowPlaying play FAB 76dp 圆 白底 shadow 10 32 .35 :193
NowPlaying prev/next 38dp icon :188/203
UtilBtn 活动底 44dp radius 12 alpha 0.12 :56
UtilBtn label 10sp Bold 0.3 letter :62

8. 风险与备选

  1. 玻璃模糊（backdrop-filter）：Compose 没有直接对应。三档备选：

    • A（推荐起步）：用半透明 Color(alpha=0.72) + border(alpha=0.12) 模拟——视觉上近似，零成本
    • B：接入 haze 库，真 GPU 模糊
    • C：Android 12+ 用 RenderEffect.createBlurEffect，兼容差
    • 本文档选 A，验收期可再升级

  2. 字体授权：DM Sans 是 OFL 开源字体，可直接打包进 APK

  3. Palette 提取性能：切歌时 IO 线程读 bitmap ≈ 50-200ms，动画上会有 palette 延迟切换——可先用默认 palette 播放，读完再 swap

  4. AlbumArt patternVariant 复用：真实 App 数据里 albumId 是 Long（非 a1/a2），取 albumId.toInt() % 4 即可，视觉多样性够用

  5. ArtistDetailScreen 在 WebUI 里没有实现：文档只写了 onViewArtist 钩子；原生要自己补一个（渐变头像大图 + 专辑 grid + 曲目 list）

  6. Playlists tab WebUI 有静态数据：原生需要 Phase C 之后做 Playlist Room 表（已在 phase2-music-library.md 里规划）

9. 验收最终项

  • [ ] 所有屏字体都是 DM Sans
  • [ ] 底栏在 Library/Search 页显示，在 NowPlaying 隐藏
  • [ ] 底栏向下滚动时收缩成单行；向上滚动时展开
  • [ ] MiniPlayer 胶囊贴底边有一条 accent 色进度弧，随播放进度延长
  • [ ] 切不同专辑播放，按钮/进度条/高亮文字颜色可见地变化
  • [ ] Library 页顶部 4 个 chip 可切，活动 chip 背景 = accent
  • [ ] Album 页大封面 180dp 居中 + Play All 胶囊按钮
  • [ ] NowPlaying 有 drag handle，向下拽或点击可关
  • [ ] NowPlaying 暂停时封面有缩小动画 scale(0.86)
  • [ ] NowPlaying 进度条可拖动 seek
  • [ ] 底部 4 图标 Shuffle/Repeat 点击有 active bg，颜色变 accent
  • [ ] Search 空态显示 6 格 genre；输入文字展示 Results section

说些什么吧！

beaudar