优化阅读记录界面

app/src/main/java/io/legado/app/ui/book/readRecord/ReadRecordActivity.kt

@@ -2,6 +2,8 @@ package io.legado.app.ui.book.readRecord
 
 import android.os.Bundle
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.Crossfade
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
@@ -36,10 +38,13 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.res.stringResource
 import cn.hutool.core.date.DateUtil
 import io.legado.app.base.BaseComposeActivity
 import io.legado.app.data.entities.readRecord.ReadRecord
 import io.legado.app.data.entities.readRecord.ReadRecordSession
+import io.legado.app.ui.widget.compose.AnimatedTextLine
+import io.legado.app.ui.widget.compose.EmptyMessageView
 import io.legado.app.utils.StringUtils.formatFriendlyDate
 import org.koin.androidx.compose.koinViewModel
 
@@ -108,8 +113,25 @@ fun ReadRecordScreen(
         modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {
             Column {
-                LargeTopAppBar(
-                    title = { Text("阅读记录") },
+                MediumTopAppBar(
+                    title = {
+                        val (mainTitle, subTitle) = when (displayMode) {
+                            DisplayMode.AGGREGATE -> "阅读记录" to "汇总视图"
+                            DisplayMode.TIMELINE -> "阅读记录" to "时间线视图"
+                            DisplayMode.LATEST -> "阅读记录" to "最后阅读"
+                        }
+                        Column {
+                            Text(
+                                text = mainTitle,
+                                style = MaterialTheme.typography.titleLarge,
+                            )
+
+                            AnimatedTextLine(
+                                text = subTitle,
+                                style = MaterialTheme.typography.titleMedium
+                            )
+                        }
+                    },
                     navigationIcon = {
                         IconButton(onClick = onBackClick) {
                             Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null)
@@ -151,7 +173,27 @@ fun ReadRecordScreen(
         Column(modifier = Modifier.padding(padding).fillMaxSize()) {
 
             TotalTimeHeader(state.totalReadTime)
-
+            val isEmpty = when (displayMode) {
+                DisplayMode.AGGREGATE -> state.groupedRecords.isEmpty()
+                DisplayMode.TIMELINE -> state.timelineRecords.isEmpty()
+                DisplayMode.LATEST -> state.latestRecords.isEmpty()
+            }
+            Crossfade(
+                targetState = isEmpty,
+                animationSpec = tween(durationMillis = 500),
+                label = "ContentCrossfade"
+            ) { isListEmpty ->
+                if (isListEmpty){
+                    Box(
+                        modifier = Modifier
+                            .fillMaxSize(),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        EmptyMessageView(
+                            message = "没有记录"
+                        )
+                    }
+                } else {
                     LazyColumn {
                         when(displayMode){
                             DisplayMode.AGGREGATE -> {
@@ -209,7 +251,8 @@ fun ReadRecordScreen(
                                 }
                             }
                         }
-
+                    }
+                }
             }
         }
     }
@@ -232,7 +275,7 @@ fun LatestReadItem(
         modifier = modifier
             .fillMaxWidth()
             .clickable(onClick = onClick)
-            .padding(16.dp),
+            .padding(horizontal = 16.dp, vertical = 8.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
         BookCoverWithPlaceholder(coverPath)
@@ -372,7 +415,7 @@ fun ReadRecordItem(
         modifier = modifier
             .fillMaxWidth()
             .clickable(onClick = onClick)
-            .padding(16.dp),
+            .padding(horizontal = 16.dp, vertical = 8.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
         BookCoverWithPlaceholder(coverPath)
@@ -431,9 +474,8 @@ fun DateHeader(
     dailyTotalTime: Long
 ) {
     val dateText = formatFriendlyDate(date)
-    val totalTimeText = "阅读时长: ${formatDuring(dailyTotalTime)}"
+    val totalTimeText = "已读 ${formatDuring(dailyTotalTime)}"
     Surface(
-        color = MaterialTheme.colorScheme.surface,
         tonalElevation = 2.dp,
         modifier = Modifier.fillMaxWidth()
     ) {
@@ -446,8 +488,6 @@ fun DateHeader(
                 color = MaterialTheme.colorScheme.secondary
             )
 
-            Spacer(modifier = Modifier.height(4.dp))
-
             Text(
                 text = totalTimeText,
                 style = MaterialTheme.typography.bodySmall,
@@ -459,21 +499,35 @@ fun DateHeader(
 
 @Composable
 fun TotalTimeHeader(time: Long) {
+    Card(
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceContainer
+        ),
+        shape = MaterialTheme.shapes.medium,
+        modifier = Modifier
+            .padding(horizontal = 16.dp, vertical = 8.dp)
+    ) {
         Column(
             modifier = Modifier
-            .fillMaxWidth()
-            .background(MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.2f))
-            .padding(16.dp),
-        horizontalAlignment = Alignment.CenterHorizontally
+                .padding(12.dp),
+            horizontalAlignment = Alignment.Start
         ) {
-        Text("总阅读时长", style = MaterialTheme.typography.labelMedium)
+            Text(
+                text = "阅读时长",
+                style = MaterialTheme.typography.labelMedium,
+                color = MaterialTheme.colorScheme.onSurface
+            )
+
             Text(
                 text = formatDuring(time),
-            style = MaterialTheme.typography.headlineSmall,
-            fontWeight = FontWeight.Bold
+                style = MaterialTheme.typography.labelLarge,
+                fontWeight = FontWeight.Bold,
+                color = MaterialTheme.colorScheme.onSurface
             )
         }
     }
+}
+
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable