登录页面UI调整

2025-10-21 17:19:32 +08:00
parent 18dd52e193
commit 66da741eda
8 changed files with 169 additions and 95 deletions
--- a/app/src/main/java/com/aiosman/ravenow/ui/composables/ActionButton.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/composables/ActionButton.kt
@@ -17,6 +17,7 @@ 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.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
@@ -32,6 +33,7 @@ fun ActionButton(
    text: String,
    color: Color? = null,
    backgroundColor: Color? = null,
+    backgroundBrush: Brush? = null,
    leading: @Composable (() -> Unit)? = null,
    expandText: Boolean = false,
    contentPadding: PaddingValues = PaddingValues(vertical = 16.dp),
@@ -65,7 +67,11 @@ fun ActionButton(
    Box(
        modifier = modifier
            .clip(RoundedCornerShape(roundCorner.dp))
-            .background(animatedBackgroundColor)
+            .background(
+                brush = backgroundBrush ?: Brush.linearGradient(
+                    colors = listOf(animatedBackgroundColor, animatedBackgroundColor)
+                )
+            )
            .noRippleClickable {
                if (enabled && !isLoading) {
                    click()
--- a/app/src/main/java/com/aiosman/ravenow/ui/login/login.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/login/login.kt
@@ -9,6 +9,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.gestures.rememberScrollableState
 import androidx.compose.foundation.gestures.scrollable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -40,12 +41,14 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -70,6 +73,11 @@ import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
+import com.airbnb.lottie.compose.LottieAnimation
+import com.airbnb.lottie.compose.LottieCompositionSpec
+import com.airbnb.lottie.compose.LottieConstants
+import com.airbnb.lottie.compose.rememberLottieComposition
+
@Preview
@Composable
 fun LoginPage() {
@@ -209,14 +217,14 @@ fun LoginPage() {
                    saveData()
                }
                
-                // 显示成功提示
-                coroutineScope.launch(Dispatchers.Main) {
-                    Toast.makeText(
-                        context,
-                        "游客登录成功",
-                        Toast.LENGTH_SHORT
-                    ).show()
-                }
+//                // 显示成功提示
+//                coroutineScope.launch(Dispatchers.Main) {
+//                    Toast.makeText(
+//                        context,
+//                        "游客登录成功",
+//                        Toast.LENGTH_SHORT
+//                    ).show()
+//                }
                
                // 初始化应用状态（游客模式会自动跳过推送和TRTC初始化）
                try {
@@ -260,13 +268,52 @@ fun LoginPage() {
            .fillMaxSize()
            .background(AppColors.background)
    ) {
-        Box(
+        Row(
            modifier = Modifier
-                .fillMaxSize()
+                .fillMaxWidth()
+                .padding(horizontal = 24.dp)
+                .padding(top = 100.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
        ) {
-            val localContext = LocalContext.current // 获取 Context
-            MovingImageWall(localContext.resources) // 将 resources 传递给 MovingImageWall
+            Text(
+                text = stringResource(R.string.join_party_carnival),
+                fontSize = 14.sp,
+                color = AppColors.text
+            )
+
+            Box(
+                modifier = Modifier
+                    .size(30.dp)
+                    .background(
+                        color = AppColors.text.copy(alpha = 0.1f),
+                        shape = androidx.compose.foundation.shape.CircleShape
+                    )
+                    .noRippleClickable {
+                        guestLogin()
+                    },
+                contentAlignment = Alignment.Center
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.rider_pro_close),
+                    contentDescription = "Close",
+                    modifier = Modifier.size(16.dp),
+                    colorFilter = ColorFilter.tint(AppColors.text)
+                )
+            }
        }
+        Box(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            val lottieFile = if (AppState.darkMode) "login.lottie" else "login_light.lottie"
+            LottieAnimation(
+                composition = rememberLottieComposition(LottieCompositionSpec.Asset(lottieFile)).value,
+                iterations = LottieConstants.IterateForever,
+                modifier = Modifier.fillMaxSize()
+                    .padding(30.dp)
+            )
+        }
+        Spacer(modifier = Modifier.height(20.dp))
        Column(
            modifier = Modifier
                .fillMaxSize()
@@ -274,78 +321,82 @@ fun LoginPage() {
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Spacer(modifier = Modifier.weight(1f))
-            Image(
-                painter = painterResource(id = R.mipmap.invalid_name),
-                contentDescription = "Rave Now",
-                modifier = Modifier
-                    .size(52.dp)
-                    .clip(RoundedCornerShape(10.dp))
-            )
-            Spacer(modifier = Modifier.height(8.dp))
-            Text(
-                "Rave Now",
-                fontSize = 28.sp,
-                fontWeight = FontWeight.W900,
-                color = AppColors.text
-            )
-            Spacer(modifier = Modifier.height(16.dp))
-            Text(
-                "Your Night Starts Here",
-                fontSize = 20.sp,
-                fontWeight = FontWeight.W700,
-                color = AppColors.text
-            )
+//            Image(
+//                painter = painterResource(id = R.mipmap.invalid_name),
+//                contentDescription = "Rave Now",
+//                modifier = Modifier
+//                    .size(52.dp)
+//                    .clip(RoundedCornerShape(10.dp))
+//            )
+//            Spacer(modifier = Modifier.height(8.dp))
+//            Text(
+//                "Rave Now",
+//                fontSize = 28.sp,
+//                fontWeight = FontWeight.W900,
+//                color = AppColors.text
+//            )
+//            Spacer(modifier = Modifier.height(16.dp))
+//            Text(
+//                "Your Night Starts Here",
+//                fontSize = 20.sp,
+//                fontWeight = FontWeight.W700,
+//                color = AppColors.text
+//            )
+            //注册tab
            Spacer(modifier = Modifier.height(8.dp))
            ActionButton(
                modifier = Modifier.fillMaxWidth(),
                text = stringResource(R.string.sign_up_upper),
-                color = AppColors.mainText,
-                backgroundColor = AppColors.main
+                color = if (AppState.darkMode) Color.Black else Color.White,
+                backgroundColor = if (AppState.darkMode) Color.White else Color.Black
            ) {
                navController.navigate(
                    NavigationRoute.EmailSignUp.route,
                )
            }
-            if (showGoogleLogin) {
-                Spacer(modifier = Modifier.height(16.dp))
-                ActionButton(
-                    modifier = Modifier.fillMaxWidth(),
-                    text = stringResource(R.string.sign_in_with_google),
-                    color = AppColors.text,
-                    leading = {
-                        Image(
-                            painter = painterResource(id = R.drawable.rider_pro_google),
-                            contentDescription = "Google",
-                            modifier = Modifier.size(36.dp)
-                        )
-                    },
-                    expandText = true,
-                    contentPadding = PaddingValues(vertical = 8.dp, horizontal = 8.dp)
-                ) {
-                    googleLogin()
-                }
-            }
+//            if (showGoogleLogin) {
+//                Spacer(modifier = Modifier.height(16.dp))
+//                ActionButton(
+//                    modifier = Modifier.fillMaxWidth(),
+//                    text = stringResource(R.string.sign_in_with_google),
+//                    color = AppColors.text,
+//                    leading = {
+//                        Image(
+//                            painter = painterResource(id = R.drawable.rider_pro_google),
+//                            contentDescription = "Google",
+//                            modifier = Modifier.size(36.dp)
+//                        )
+//                    },
+//                    expandText = true,
+//                    contentPadding = PaddingValues(vertical = 8.dp, horizontal = 8.dp)
+//                ) {
+//                    googleLogin()
+//                }
+//            }
            //登录tab
            Spacer(modifier = Modifier.height(24.dp))
-            ActionButton(
-                modifier = Modifier.fillMaxWidth(),
+            Text(
                text = stringResource(R.string.login_upper),
-                color = AppColors.text,
-            ) {
-                navController.navigate(
-                    NavigationRoute.UserAuth.route,
-                )
-            }
-            
-            // 游客登录按钮
-            Spacer(modifier = Modifier.height(16.dp))
-            ActionButton(
-                modifier = Modifier.fillMaxWidth(),
-                text = "游客模式",
-                color = AppColors.text.copy(alpha = 0.7f),
-            ) {
-                guestLogin()
-            }
+                color = AppColors.text.copy(alpha = 0.5f),
+                fontSize = 16.sp,
+                textAlign = TextAlign.Center,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .noRippleClickable {
+                        navController.navigate(
+                            NavigationRoute.UserAuth.route,
+                        )
+                    }
+            )
+//            // 游客登录按钮
+//            Spacer(modifier = Modifier.height(16.dp))
+//            ActionButton(
+//                modifier = Modifier.fillMaxWidth(),
+//                text = "游客模式",
+//                color = AppColors.text.copy(alpha = 0.7f),
+//            ) {
+//                guestLogin()
+//            }
            Spacer(modifier = Modifier.height(70.dp))
        }
    }
--- a/app/src/main/java/com/aiosman/ravenow/ui/login/userauth.kt
+++ b/app/src/main/java/com/aiosman/ravenow/ui/login/userauth.kt
@@ -22,6 +22,8 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -299,32 +301,38 @@ fun UserAuthScreen() {
            ActionButton(
                modifier = Modifier.fillMaxWidth(),
                text = stringResource(R.string.lets_ride_upper),
-                backgroundColor = AppColors.main,
+                backgroundBrush = Brush.linearGradient(
+                    colors = listOf(
+                        Color(0xFF7c45ed),
+                        Color(0x777c68ef),
+                        Color(0x777bd8f8)
+                    )
+                ),
                color = AppColors.mainText,
            ) {
                onLogin()
            }
-            if (AppState.enableGoogleLogin) {
-                Spacer(modifier = Modifier.height(16.dp))
-                Text(stringResource(R.string.or_login_with), color = AppColors.secondaryText)
-                Spacer(modifier = Modifier.height(16.dp))
-                ActionButton(
-                    modifier = Modifier.fillMaxWidth(),
-                    text = stringResource(R.string.sign_in_with_google),
-                    color = AppColors.text,
-                    leading = {
-                        Image(
-                            painter = painterResource(id = R.drawable.rider_pro_google),
-                            contentDescription = "Google",
-                            modifier = Modifier.size(36.dp)
-                        )
-                    },
-                    expandText = true,
-                    contentPadding = PaddingValues(vertical = 8.dp, horizontal = 8.dp)
-                ) {
-                    googleLogin()
-                }
-            }
+//            if (AppState.enableGoogleLogin) {
+//                Spacer(modifier = Modifier.height(16.dp))
+//                Text(stringResource(R.string.or_login_with), color = AppColors.secondaryText)
+//                Spacer(modifier = Modifier.height(16.dp))
+//                ActionButton(
+//                    modifier = Modifier.fillMaxWidth(),
+//                    text = stringResource(R.string.sign_in_with_google),
+//                    color = AppColors.text,
+//                    leading = {
+//                        Image(
+//                            painter = painterResource(id = R.drawable.rider_pro_google),
+//                            contentDescription = "Google",
+//                            modifier = Modifier.size(36.dp)
+//                        )
+//                    },
+//                    expandText = true,
+//                    contentPadding = PaddingValues(vertical = 8.dp, horizontal = 8.dp)
+//                ) {
+//                    googleLogin()
+//                }
+//            }

        }