style(ui): 列表项改用 Miuix BasicComponent(MD3 圆角卡片)

抽屉的会话行/入口行、设置页的主题选项统一换成 BasicComponent,间距 8dp,选中态用 ✓ 标记。
This commit is contained in:
AskaEth committed 2026-09-08 22:55:29 +08:00
1 parent 00856eeaf7
commit df2a26701c
2 files changed
+52 -54

No files matched your search

@@ -23,11 +23,12 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.Dialog
import top.yukonga.miuix.kmp.basic.BasicComponent
import top.yukonga.miuix.kmp.basic.Text import top.yukonga.miuix.kmp.basic.Text
import top.yukonga.miuix.kmp.basic.TextButton import top.yukonga.miuix.kmp.basic.TextButton
import top.yukonga.miuix.kmp.theme.MiuixTheme import top.yukonga.miuix.kmp.theme.MiuixTheme
/** 侧边栏内容:会话列表 + IoT/设置占位 + 登出。 */ /** 侧边栏内容:会话列表 + IoT/设置占位 + 登出。列表项统一用 Miuix 的 MD3 圆角卡片。 */
@Composable @Composable
fun ColumnScope.SessionDrawerContent( fun ColumnScope.SessionDrawerContent(
state: SessionsUiState, state: SessionsUiState,
@@ -52,14 +53,17 @@ fun ColumnScope.SessionDrawerContent(
Row( Row(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(horizontal = 20.dp, vertical = 4.dp), .padding(start = 20.dp, end = 12.dp, bottom = 4.dp),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
Text("会话", style = MiuixTheme.textStyles.subtitle, modifier = Modifier.weight(1f)) Text("会话", style = MiuixTheme.textStyles.subtitle, modifier = Modifier.weight(1f))
TextButton("新建", onClick = onCreate) TextButton("新建", onClick = onCreate)
} }
LazyColumn(modifier = Modifier.weight(1f)) { LazyColumn(
modifier = Modifier.weight(1f),
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
items(items = state.sessions, key = { it.id }) { session -> items(items = state.sessions, key = { it.id }) { session ->
SessionRow( SessionRow(
session = session, session = session,
@@ -86,9 +90,11 @@ fun ColumnScope.SessionDrawerContent(
) )
} }
Spacer(Modifier.height(8.dp)) Spacer(Modifier.height(12.dp))
DrawerAction("IoT(规划中)", onOpenIot) DrawerAction("IoT(规划中)", onOpenIot)
DrawerAction("App 设置(规划中)", onOpenSettings) Spacer(Modifier.height(8.dp))
DrawerAction("App 设置", onOpenSettings)
Spacer(Modifier.height(8.dp))
DrawerAction("登出", onLogout) DrawerAction("登出", onLogout)
Spacer(Modifier.height(16.dp)) Spacer(Modifier.height(16.dp))
@@ -113,42 +119,35 @@ private fun SessionRow(
onClick: () -> Unit, onClick: () -> Unit,
onDelete: () -> Unit, onDelete: () -> Unit,
) { ) {
Row( BasicComponent(
modifier = Modifier title = session.title,
.fillMaxWidth() onClick = onClick,
.clickable(onClick = onClick) endActions = {
.padding(horizontal = 20.dp, vertical = 12.dp), if (active) {
verticalAlignment = Alignment.CenterVertically, Text(
) { text = "✓",
Text( style = MiuixTheme.textStyles.main,
text = session.title, color = MiuixTheme.colorScheme.primary,
style = MiuixTheme.textStyles.main, modifier = Modifier.padding(horizontal = 6.dp),
color = if (active) MiuixTheme.colorScheme.primary else MiuixTheme.colorScheme.onBackground, )
modifier = Modifier.weight(1f), }
) if (!session.isMain) {
if (!session.isMain) { Text(
Text( text = "删除",
text = "删除", style = MiuixTheme.textStyles.footnote1,
style = MiuixTheme.textStyles.footnote1, color = MiuixTheme.colorScheme.error,
color = MiuixTheme.colorScheme.error, modifier = Modifier
modifier = Modifier .clickable(onClick = onDelete)
.clickable(onClick = onDelete) .padding(horizontal = 8.dp, vertical = 4.dp),
.padding(horizontal = 8.dp, vertical = 4.dp), )
) }
} },
} )
} }
@Composable @Composable
private fun DrawerAction(label: String, onClick: () -> Unit) { private fun DrawerAction(label: String, onClick: () -> Unit) {
Text( BasicComponent(title = label, onClick = onClick)
text = label,
style = MiuixTheme.textStyles.main,
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = onClick)
.padding(horizontal = 20.dp, vertical = 14.dp),
)
} }
@Composable @Composable
@@ -1,6 +1,5 @@
package top.yeij.cyrene.ui.settings package top.yeij.cyrene.ui.settings
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
@@ -22,6 +21,7 @@ import top.yeij.cyrene.BuildConfig
import top.yeij.cyrene.app.AppContainer import top.yeij.cyrene.app.AppContainer
import top.yeij.cyrene.core.prefs.AppPrefs import top.yeij.cyrene.core.prefs.AppPrefs
import top.yeij.cyrene.core.prefs.ThemeMode import top.yeij.cyrene.core.prefs.ThemeMode
import top.yukonga.miuix.kmp.basic.BasicComponent
import top.yukonga.miuix.kmp.basic.Scaffold import top.yukonga.miuix.kmp.basic.Scaffold
import top.yukonga.miuix.kmp.basic.SmallTopAppBar import top.yukonga.miuix.kmp.basic.SmallTopAppBar
import top.yukonga.miuix.kmp.basic.Text import top.yukonga.miuix.kmp.basic.Text
@@ -59,6 +59,7 @@ fun SettingsScreen(
selected = prefs.themeMode == mode, selected = prefs.themeMode == mode,
onClick = { scope.launch { settings.setThemeMode(mode) } }, onClick = { scope.launch { settings.setThemeMode(mode) } },
) )
Spacer(Modifier.height(8.dp))
} }
SectionTitle("聊天") SectionTitle("聊天")
@@ -68,6 +69,7 @@ fun SettingsScreen(
checked = prefs.showNarration, checked = prefs.showNarration,
onCheckedChange = { scope.launch { settings.setShowNarration(it) } }, onCheckedChange = { scope.launch { settings.setShowNarration(it) } },
) )
Spacer(Modifier.height(8.dp))
SwitchPreference( SwitchPreference(
title = "思维链默认展开", title = "思维链默认展开",
summary = "流式期间展开思维链,结束后自动折叠", summary = "流式期间展开思维链,结束后自动折叠",
@@ -110,22 +112,19 @@ private fun ThemeOption(
selected: Boolean, selected: Boolean,
onClick: () -> Unit, onClick: () -> Unit,
) { ) {
Row( BasicComponent(
modifier = Modifier title = label,
.fillMaxWidth() onClick = onClick,
.clickable(onClick = onClick) endActions = {
.padding(horizontal = 20.dp, vertical = 14.dp), if (selected) {
verticalAlignment = Alignment.CenterVertically, Text(
) { text = "✓",
Text(label, style = MiuixTheme.textStyles.main, modifier = Modifier.weight(1f)) style = MiuixTheme.textStyles.main,
if (selected) { color = MiuixTheme.colorScheme.primary,
Text( )
text = "✓", }
style = MiuixTheme.textStyles.main, },
color = MiuixTheme.colorScheme.primary, )
)
}
}
} }
private fun ThemeMode.label(): String = when (this) { private fun ThemeMode.label(): String = when (this) {