Browse Source

fix: device guide layout

dev_ios
AnranYus 3 weeks ago
parent
commit
0d38f76298
  1. BIN
      shared/src/commonMain/composeResources/drawable/bg_login.png
  2. BIN
      shared/src/commonMain/composeResources/drawable/bg_login_fullscreen.png
  3. BIN
      shared/src/commonMain/composeResources/drawable/bg_userinfo_guide.png
  4. BIN
      shared/src/commonMain/composeResources/drawable/bg_welcome.png
  5. BIN
      shared/src/commonMain/composeResources/drawable/ic_arrow_right.png
  6. BIN
      shared/src/commonMain/composeResources/drawable/ic_connect_tip.png
  7. BIN
      shared/src/commonMain/composeResources/drawable/ic_domain_hand_left.png
  8. BIN
      shared/src/commonMain/composeResources/drawable/ic_domain_hand_right.png
  9. BIN
      shared/src/commonMain/composeResources/drawable/ic_uapp_checked.png
  10. BIN
      shared/src/commonMain/composeResources/drawable/ic_uapp_uncheck.png
  11. BIN
      shared/src/commonMain/composeResources/drawable/ic_unuse_hand_left.png
  12. BIN
      shared/src/commonMain/composeResources/drawable/ic_unuse_hand_right.png
  13. BIN
      shared/src/commonMain/composeResources/drawable/ic_use_hand_left.png
  14. BIN
      shared/src/commonMain/composeResources/drawable/ic_use_hand_right.png
  15. 114
      shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/ConnectionGuideScreen.kt
  16. 157
      shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/DominantHandScreen.kt
  17. 59
      shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/PersonalInfoScreen.kt
  18. 136
      shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/RegisterScreen.kt
  19. 139
      shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WearingFingerScreen.kt
  20. 130
      shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WelcomeScreen.kt

BIN
shared/src/commonMain/composeResources/drawable/bg_login.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

BIN
shared/src/commonMain/composeResources/drawable/bg_login_fullscreen.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
shared/src/commonMain/composeResources/drawable/bg_userinfo_guide.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

BIN
shared/src/commonMain/composeResources/drawable/bg_welcome.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 914 KiB

BIN
shared/src/commonMain/composeResources/drawable/ic_arrow_right.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 B

BIN
shared/src/commonMain/composeResources/drawable/ic_connect_tip.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 KiB

BIN
shared/src/commonMain/composeResources/drawable/ic_domain_hand_left.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
shared/src/commonMain/composeResources/drawable/ic_domain_hand_right.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
shared/src/commonMain/composeResources/drawable/ic_uapp_checked.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 564 B

BIN
shared/src/commonMain/composeResources/drawable/ic_uapp_uncheck.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 520 B

BIN
shared/src/commonMain/composeResources/drawable/ic_unuse_hand_left.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
shared/src/commonMain/composeResources/drawable/ic_unuse_hand_right.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
shared/src/commonMain/composeResources/drawable/ic_use_hand_left.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
shared/src/commonMain/composeResources/drawable/ic_use_hand_right.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

114
shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/ConnectionGuideScreen.kt

@ -1,5 +1,6 @@
package com.whitefish.ring.ui.guide
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
@ -8,11 +9,16 @@ import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import ring.shared.generated.resources.Res
import ring.shared.generated.resources.bg_userinfo_guide
import ring.shared.generated.resources.ic_connect_tip
@Composable
fun ConnectionGuideScreen(
@ -23,116 +29,74 @@ fun ConnectionGuideScreen(
.fillMaxSize()
.background(Color(0xFFF5F5F5))
) {
Image(painterResource(Res.drawable.bg_userinfo_guide),contentDescription = null, modifier = Modifier.fillMaxSize())
Column(
modifier = Modifier
.fillMaxSize()
.padding(horizontal = 24.dp),
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.height(80.dp))
Spacer(modifier = Modifier.height(62.dp))
// 标题
Text(
text = "连接您的Acti戒指",
fontSize = 24.sp,
fontWeight = FontWeight.Medium,
color = Color(0xFF333333),
color = Color(0xFF484848),
textAlign = TextAlign.Center,
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(40.dp))
Spacer(modifier = Modifier.height(22.dp))
// 说明文字
Text(
text = "将您的戒指连接到充电器,并继续下一步。请确保您的手机已启用蓝牙功能。",
fontSize = 16.sp,
color = Color(0xFF666666),
fontSize = 20.sp,
color = Color(0xff484848),
textAlign = TextAlign.Center,
lineHeight = 24.sp,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
.padding(horizontal = 44.dp)
)
Spacer(modifier = Modifier.height(60.dp))
// 戒指和充电器图片占位符
Box(
modifier = Modifier
.size(280.dp)
.background(
Color.White,
RoundedCornerShape(20.dp)
),
contentAlignment = Alignment.Center
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
// 戒指图标
Text(
text = "💍",
fontSize = 80.sp
)
Spacer(modifier = Modifier.height(20.dp))
// 连接线
Box(
modifier = Modifier
.width(60.dp)
.height(4.dp)
.background(
Color(0xFF007AFF),
RoundedCornerShape(2.dp)
)
)
Spacer(modifier = Modifier.height(20.dp))
// 充电器图标
Box(
modifier = Modifier
.size(80.dp)
.background(
Color(0xFF333333),
RoundedCornerShape(40.dp)
),
contentAlignment = Alignment.Center
) {
Text(
text = "",
fontSize = 40.sp,
color = Color.White
)
}
}
}
Spacer(modifier = Modifier.weight(1f))
Image(
painterResource(Res.drawable.ic_connect_tip),
contentDescription = null,
modifier = Modifier.fillMaxWidth().height(375.dp),
contentScale = ContentScale.Crop
)
Spacer(modifier = Modifier.height(53.dp))
// 下一步按钮
Button(
onClick = onNextClick,
modifier = Modifier
.fillMaxWidth()
.height(56.dp),
shape = RoundedCornerShape(28.dp),
.height(51.dp)
.padding(horizontal = 36.dp),
shape = RoundedCornerShape(30.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF007AFF),
containerColor = Color(0x8098999B),
contentColor = Color.White
)
) {
Text(
text = "下一步",
fontSize = 18.sp,
fontWeight = FontWeight.Medium
fontWeight = FontWeight.Medium,
color = Color.Black
)
}
Spacer(modifier = Modifier.height(40.dp))
Spacer(modifier = Modifier.height(53.dp))
}
}
}

157
shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/DominantHandScreen.kt

@ -1,20 +1,43 @@
package com.whitefish.ring.ui.guide
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
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.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
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.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import ring.shared.generated.resources.Res
import ring.shared.generated.resources.bg_userinfo_guide
import ring.shared.generated.resources.ic_domain_hand_left
import ring.shared.generated.resources.ic_domain_hand_right
@Composable
fun DominantHandScreen(
@ -22,7 +45,8 @@ fun DominantHandScreen(
onHandSelected: (Hand) -> Unit = {}
) {
var selectedHand by remember { mutableStateOf<Hand?>(null) }
Image(painterResource(Res.drawable.bg_userinfo_guide),contentDescription = null, modifier = Modifier.fillMaxSize())
Box(
modifier = Modifier
.fillMaxSize()
@ -35,30 +59,30 @@ fun DominantHandScreen(
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.height(80.dp))
// 标题
Text(
text = "惯用手",
fontSize = 24.sp,
fontWeight = FontWeight.Medium,
color = Color(0xFF333333),
textAlign = TextAlign.Center,
textAlign = TextAlign.Start,
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(16.dp))
// 副标题
Text(
text = "请选择您的惯用手",
fontSize = 16.sp,
color = Color(0xFF666666),
textAlign = TextAlign.Center,
fontSize = 12.sp,
color = Color(0xFF484848),
textAlign = TextAlign.Start,
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(80.dp))
// 选择区域
Row(
modifier = Modifier.fillMaxWidth(),
@ -74,7 +98,7 @@ fun DominantHandScreen(
},
modifier = Modifier.weight(1f)
)
// 右手选项
HandOptionCard(
hand = Hand.RIGHT,
@ -86,29 +110,32 @@ fun DominantHandScreen(
modifier = Modifier.weight(1f)
)
}
Spacer(modifier = Modifier.weight(1f))
// 下一步按钮
Button(
onClick = onNextClick,
enabled = selectedHand != null,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 12.dp)
.height(56.dp),
shape = RoundedCornerShape(28.dp),
colors = ButtonDefaults.buttonColors(
containerColor = if (selectedHand != null) Color(0xFF007AFF) else Color(0xFFCCCCCC),
contentColor = Color.White
containerColor = if (selectedHand != null) Color(0x8098999B) else Color(
0xFFCCCCCC
),
contentColor = Color.Black
)
) {
Text(
text = "下一步",
fontSize = 18.sp,
text = "完成",
fontSize = 16.sp,
fontWeight = FontWeight.Medium
)
}
Spacer(modifier = Modifier.height(40.dp))
}
}
@ -123,63 +150,53 @@ private fun HandOptionCard(
) {
Card(
modifier = modifier
.height(200.dp)
.clickable { onClick() },
shape = RoundedCornerShape(20.dp),
colors = CardDefaults.cardColors(
containerColor = if (isSelected) Color(0xFFE3F2FD) else Color.White
),
.clickable(
indication = null,
interactionSource = remember { MutableInteractionSource() }
) { onClick() },
colors = CardDefaults.cardColors().copy(containerColor = Color.Transparent),
elevation = CardDefaults.cardElevation(
defaultElevation = if (isSelected) 8.dp else 4.dp
defaultElevation = 0.dp
)
) {
Box(
Card(
modifier = Modifier
.fillMaxSize()
.then(
if (isSelected) {
Modifier.border(
width = 2.dp,
color = Color(0xFF007AFF),
shape = RoundedCornerShape(20.dp)
)
} else {
Modifier
}
),
contentAlignment = Alignment.Center
.fillMaxWidth()
.height(208.dp)
.clip(RoundedCornerShape(20.dp)),
colors = CardDefaults.cardColors()
.copy(containerColor = if (isSelected) Color(0xE1484848) else Color(0x41484848)),
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
// 手部图标占位符
Box(
modifier = Modifier
.size(100.dp)
.background(
if (isSelected) Color(0xFF007AFF) else Color(0xFFE5E5E5),
RoundedCornerShape(50.dp)
),
contentAlignment = Alignment.Center
) {
Text(
text = if (hand == Hand.LEFT) "" else "🤚",
fontSize = 48.sp,
color = if (isSelected) Color.White else Color(0xFF666666)
Spacer(Modifier.weight(1f))
if (hand == Hand.LEFT) {
Image(
painterResource(Res.drawable.ic_domain_hand_left),
contentDescription = null,
modifier = Modifier.align(
Alignment.CenterHorizontally
)
)
} else {
Image(
painterResource(Res.drawable.ic_domain_hand_right),
contentDescription = null,
modifier = Modifier.align(
Alignment.CenterHorizontally
)
}
Spacer(modifier = Modifier.height(20.dp))
Text(
text = if (hand == Hand.LEFT) "左手" else "右手",
fontSize = 18.sp,
fontWeight = FontWeight.Medium,
color = if (isSelected) Color(0xFF007AFF) else Color(0xFF333333)
)
}
Spacer(Modifier.weight(1f))
}
Text(
if (hand == Hand.LEFT) "左手" else "右手",
modifier = Modifier
.fillMaxWidth()
.padding(top = 8.dp),
textAlign = TextAlign.Center,
fontSize = 16.sp,
fontWeight = FontWeight.Medium,
)
}
}

59
shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/PersonalInfoScreen.kt

@ -1,5 +1,6 @@
package com.whitefish.ring.ui.guide
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
@ -13,7 +14,11 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import ring.shared.generated.resources.Res
import ring.shared.generated.resources.ic_arrow_right
import ring.shared.generated.resources.bg_userinfo_guide
data class PersonalInfo(
val gender: String = "",
@ -29,12 +34,13 @@ fun PersonalInfoScreen(
onHeightClick: () -> Unit = {}
) {
var personalInfo by remember { mutableStateOf(PersonalInfo()) }
Box(
modifier = Modifier
.fillMaxSize()
.background(Color(0xFFF5F5F5))
) {
Image(painterResource(Res.drawable.bg_userinfo_guide),contentDescription = null, modifier = Modifier.fillMaxSize())
Column(
modifier = Modifier
.fillMaxSize()
@ -47,8 +53,8 @@ fun PersonalInfoScreen(
text = "个人信息完善",
fontSize = 24.sp,
fontWeight = FontWeight.Medium,
color = Color(0xFF333333),
textAlign = TextAlign.Center,
color = Color(0xFF484848),
textAlign = TextAlign.Start,
modifier = Modifier.fillMaxWidth()
)
@ -58,12 +64,12 @@ fun PersonalInfoScreen(
Text(
text = "完善您的个人信息以便更好的服务",
fontSize = 16.sp,
color = Color(0xFF666666),
textAlign = TextAlign.Center,
color = Color(0xFF484848),
textAlign = TextAlign.Start,
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(60.dp))
Spacer(modifier = Modifier.height(122.dp))
// 性别选项
PersonalInfoItem(
@ -97,11 +103,12 @@ fun PersonalInfoScreen(
onClick = onNextClick,
modifier = Modifier
.fillMaxWidth()
.height(56.dp),
shape = RoundedCornerShape(28.dp),
.padding(horizontal = 12.dp)
.height(51.dp),
shape = RoundedCornerShape(30.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF007AFF),
contentColor = Color.White
containerColor = Color(0xff98999b),
contentColor = Color.Black
)
) {
Text(
@ -126,18 +133,15 @@ private fun PersonalInfoItem(
modifier = Modifier
.fillMaxWidth()
.clickable { onClick() },
shape = RoundedCornerShape(16.dp),
shape = RoundedCornerShape(0.dp),
colors = CardDefaults.cardColors(
containerColor = Color.White
containerColor = Color.Transparent
),
elevation = CardDefaults.cardElevation(
defaultElevation = 2.dp
)
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 20.dp, vertical = 20.dp),
.padding(vertical = 12.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
@ -156,14 +160,21 @@ private fun PersonalInfoItem(
modifier = Modifier.padding(end = 8.dp)
)
}
// Icon(
// imageVector = Icons.Default.KeyboardArrowRight,
// contentDescription = "展开",
// tint = Color(0xFF999999),
// modifier = Modifier.size(24.dp)
// )
Spacer(modifier = Modifier.weight(1f))
Image(painterResource(Res.drawable.ic_arrow_right),
contentDescription = null,
modifier = Modifier
.size(10.dp)
)
}
HorizontalDivider(
color = Color(0x8067707F),
thickness = 1.dp,
)
}
}

136
shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/RegisterScreen.kt

@ -1,5 +1,6 @@
package com.whitefish.ring.ui.guide
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
@ -8,11 +9,16 @@ import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import ring.shared.generated.resources.Res
import ring.shared.generated.resources.bg_login
import ring.shared.generated.resources.bg_login_fullscreen
@Composable
fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String) -> Unit = { _, _ -> }) {
@ -26,51 +32,38 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
.fillMaxSize()
.background(Color(0xFFF5F5F5)),
) {
Image(painterResource(Res.drawable.bg_login_fullscreen),contentDescription = null, modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
Image(painterResource(Res.drawable.bg_login),contentDescription = null, modifier = Modifier.fillMaxWidth().height(375.dp), contentScale = ContentScale.Crop)
Column(
modifier =
Modifier
.fillMaxSize()
.padding(horizontal = 24.dp),
.padding(horizontal = 23.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Spacer(modifier = Modifier.height(120.dp))
// 戒指图片占位符
Box(
modifier =
Modifier
.size(160.dp)
.background(
Color(0xFFE5E5E5),
RoundedCornerShape(80.dp),
),
contentAlignment = Alignment.Center,
) {
Text(
text = "💍",
fontSize = 64.sp,
)
}
Spacer(modifier = Modifier.height(40.dp))
Spacer(modifier = Modifier.height(210.dp))
// 欢迎标题
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.Start,
) {
Text(
text = "Hi,",
fontSize = 28.sp,
fontSize = 32.sp,
fontWeight = FontWeight.Medium,
color = Color(0xFF333333),
color = Color(0xFF484848),
textAlign = TextAlign.Center,
)
Text(
text = "欢迎来到Acti",
fontSize = 28.sp,
fontSize = 32.sp,
fontWeight = FontWeight.Medium,
color = Color(0xFF333333),
color = Color(0xFF484848),
textAlign = TextAlign.Center,
)
}
@ -89,7 +82,7 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
modifier = Modifier.padding(bottom = 8.dp),
)
OutlinedTextField(
TextField(
value = phoneNumber,
onValueChange = { phoneNumber = it },
placeholder = {
@ -98,15 +91,16 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
color = Color(0xFF999999),
)
},
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(12.dp),
colors =
OutlinedTextFieldDefaults.colors(
focusedBorderColor = Color(0xFF007AFF),
unfocusedBorderColor = Color(0xFFE5E5E5),
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White,
),
TextFieldDefaults.colors().copy(focusedContainerColor = Color.Transparent, unfocusedContainerColor = Color.Transparent),
modifier = Modifier.fillMaxWidth(),
// colors =
// TextField.colors(
// focusedBorderColor = Color.White,
// unfocusedBorderColor = Color.White,
// focusedContainerColor = Color.White,
// unfocusedContainerColor = Color.White,
// ),
singleLine = true,
)
}
@ -129,42 +123,38 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
) {
OutlinedTextField(
value = verificationCode,
onValueChange = { verificationCode = it },
placeholder = {
Text(
text = "请输入验证码",
color = Color(0xFF999999),
)
},
modifier = Modifier.weight(1f),
shape = RoundedCornerShape(12.dp),
colors =
OutlinedTextFieldDefaults.colors(
focusedBorderColor = Color(0xFF007AFF),
unfocusedBorderColor = Color(0xFFE5E5E5),
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White,
),
singleLine = true,
)
Spacer(modifier = Modifier.width(12.dp))
TextButton(
onClick = {
if (phoneNumber.isNotEmpty()) {
isCodeSent = true
}
},
enabled = phoneNumber.isNotEmpty(),
) {
Text(
text = if (isCodeSent) "重新发送验证码" else "获取验证码",
fontSize = 14.sp,
color = if (phoneNumber.isNotEmpty()) Color(0xFF007AFF) else Color(0xFF999999),
Box{
TextField(
value = verificationCode,
onValueChange = { verificationCode = it },
placeholder = {
Text(
text = "请输入验证码",
color = Color(0xFF999999),
)
},
colors =
TextFieldDefaults.colors().copy(focusedContainerColor = Color.Transparent, unfocusedContainerColor = Color.Transparent),
modifier = Modifier.fillMaxWidth(),
singleLine = true,
)
Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
TextButton(
onClick = {
if (phoneNumber.isNotEmpty()) {
isCodeSent = true
}
},
enabled = phoneNumber.isNotEmpty(),
) {
Text(
text = if (isCodeSent) "重新发送验证码" else "获取验证码",
fontSize = 14.sp,
color = if (phoneNumber.isNotEmpty()) Color(0xFF007AFF) else Color(0xFF999999),
)
}
}
}
}
}
@ -189,13 +179,14 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
modifier =
Modifier
.fillMaxWidth()
.height(56.dp),
shape = RoundedCornerShape(28.dp),
.height(51.dp)
.padding(horizontal = 13.dp),
shape = RoundedCornerShape(30.dp),
colors =
ButtonDefaults.buttonColors(
containerColor =
if (phoneNumber.isNotEmpty() && verificationCode.isNotEmpty()) {
Color(0xFF007AFF)
Color(0x8098999B)
} else {
Color(0xFFCCCCCC)
},
@ -205,6 +196,7 @@ fun RegisterScreen(onLoginClick: (phoneNumber: String, verificationCode: String)
Text(
text = "登录",
fontSize = 18.sp,
color = Color.Black,
fontWeight = FontWeight.Medium,
)
}

139
shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WearingFingerScreen.kt

@ -1,5 +1,6 @@
package com.whitefish.ring.ui.guide
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
@ -15,19 +16,21 @@ import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import ring.shared.generated.resources.Res
import ring.shared.generated.resources.bg_userinfo_guide
import ring.shared.generated.resources.ic_unuse_hand_left
import ring.shared.generated.resources.ic_unuse_hand_right
import ring.shared.generated.resources.ic_use_hand_left
import ring.shared.generated.resources.ic_use_hand_right
enum class Hand {
LEFT, RIGHT
}
enum class Finger {
THUMB, INDEX, MIDDLE, RING, PINKY
}
data class WearingPosition(
val hand: Hand,
val finger: Finger
)
@Composable
@ -42,6 +45,7 @@ fun WearingFingerScreen(
.fillMaxSize()
.background(Color(0xFFF5F5F5))
) {
Image(painterResource(Res.drawable.bg_userinfo_guide),contentDescription = null, modifier = Modifier.fillMaxSize())
Column(
modifier = Modifier
.fillMaxSize()
@ -55,8 +59,8 @@ fun WearingFingerScreen(
text = "佩戴手指",
fontSize = 24.sp,
fontWeight = FontWeight.Medium,
color = Color(0xFF333333),
textAlign = TextAlign.Center,
color = Color.Black,
textAlign = TextAlign.Start,
modifier = Modifier.fillMaxWidth()
)
@ -65,9 +69,9 @@ fun WearingFingerScreen(
// 副标题
Text(
text = "请选择您佩戴Acti戒指的手指",
fontSize = 16.sp,
color = Color(0xFF666666),
textAlign = TextAlign.Center,
fontSize = 12.sp,
color = Color.Black,
textAlign = TextAlign.Start,
modifier = Modifier.fillMaxWidth()
)
@ -82,8 +86,8 @@ fun WearingFingerScreen(
HandSelector(
hand = Hand.LEFT,
selectedPosition = selectedPosition,
onFingerClick = { finger ->
val position = WearingPosition(Hand.LEFT, finger)
onFingerClick = {
val position = WearingPosition(Hand.LEFT)
selectedPosition = position
onFingerSelected(position)
}
@ -93,13 +97,25 @@ fun WearingFingerScreen(
HandSelector(
hand = Hand.RIGHT,
selectedPosition = selectedPosition,
onFingerClick = { finger ->
val position = WearingPosition(Hand.RIGHT, finger)
onFingerClick = {
val position = WearingPosition(Hand.RIGHT)
selectedPosition = position
onFingerSelected(position)
}
)
}
val text = selectedPosition?.hand?.let {if (it == Hand.LEFT){
"您已选择佩戴在左手"
}else{
"您已选择佩戴在右手"
}}?:""
Text(text,
fontSize = 16.sp,
color = Color(0xFF999999),
modifier = Modifier.padding(top = 16.dp)
)
Spacer(modifier = Modifier.weight(1f))
@ -109,11 +125,12 @@ fun WearingFingerScreen(
enabled = selectedPosition != null,
modifier = Modifier
.fillMaxWidth()
.height(56.dp),
shape = RoundedCornerShape(28.dp),
.padding(horizontal = 12.dp)
.height(51.dp),
shape = RoundedCornerShape(30.dp),
colors = ButtonDefaults.buttonColors(
containerColor = if (selectedPosition != null) Color(0xFF007AFF) else Color(0xFFCCCCCC),
contentColor = Color.White
containerColor = if (selectedPosition != null) Color(0x8098999B) else Color(0xFFCCCCCC),
contentColor = Color.Black
)
) {
Text(
@ -132,7 +149,7 @@ fun WearingFingerScreen(
private fun HandSelector(
hand: Hand,
selectedPosition: WearingPosition?,
onFingerClick: (Finger) -> Unit
onFingerClick: () -> Unit
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
@ -142,51 +159,25 @@ private fun HandSelector(
modifier = Modifier
.size(140.dp, 180.dp)
.background(
Color.White,
Color.Transparent,
RoundedCornerShape(20.dp)
)
.border(
width = 2.dp,
color = Color(0xFFE5E5E5),
shape = RoundedCornerShape(20.dp)
),
contentAlignment = Alignment.Center
).clickable {
onFingerClick.invoke()
},
contentAlignment = Alignment.Center,
) {
// 简化的手部表示
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
// 拇指
FingerButton(
finger = Finger.THUMB,
isSelected = selectedPosition?.hand == hand && selectedPosition.finger == Finger.THUMB,
onClick = { onFingerClick(Finger.THUMB) },
modifier = Modifier.offset(x = if (hand == Hand.LEFT) 20.dp else (-20).dp)
)
Spacer(modifier = Modifier.height(8.dp))
// 其他四个手指
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
listOf(Finger.INDEX, Finger.MIDDLE, Finger.RING, Finger.PINKY).forEach { finger ->
FingerButton(
finger = finger,
isSelected = selectedPosition?.hand == hand && selectedPosition.finger == finger,
onClick = { onFingerClick(finger) }
)
}
if ( selectedPosition?.hand == hand){
if (hand == Hand.LEFT){
Image(painterResource(Res.drawable.ic_use_hand_left),contentDescription = null)
}else{
Image(painterResource(Res.drawable.ic_use_hand_right),contentDescription = null)
}
// 显示戒指图标在选中的手指上
if (selectedPosition?.hand == hand) {
Text(
text = "💍",
fontSize = 16.sp,
modifier = Modifier.padding(top = 4.dp)
)
}else{
if (hand == Hand.LEFT){
Image(painterResource(Res.drawable.ic_unuse_hand_left),contentDescription = null)
}else{
Image(painterResource(Res.drawable.ic_unuse_hand_right),contentDescription = null)
}
}
}
@ -203,32 +194,6 @@ private fun HandSelector(
}
}
@Composable
private fun FingerButton(
finger: Finger,
isSelected: Boolean,
onClick: () -> Unit,
modifier: Modifier = Modifier
) {
Box(
modifier = modifier
.size(20.dp, 40.dp)
.clip(RoundedCornerShape(10.dp))
.background(
if (isSelected) Color(0xFF007AFF) else Color(0xFFE5E5E5)
)
.clickable { onClick() },
contentAlignment = Alignment.Center
) {
if (isSelected) {
Text(
text = "💍",
fontSize = 12.sp
)
}
}
}
@Composable
@Preview
fun WearingFingerScreenPreview() {

130
shared/src/commonMain/kotlin/com/whitefish/ring/ui/guide/WelcomeScreen.kt

@ -1,6 +1,8 @@
package com.whitefish.ring.ui.guide
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
@ -8,11 +10,17 @@ import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.ui.tooling.preview.Preview
import ring.shared.generated.resources.Res
import ring.shared.generated.resources.bg_welcome
import ring.shared.generated.resources.ic_uapp_checked
import ring.shared.generated.resources.ic_uapp_uncheck
@Composable
fun WelcomeScreen(onStartClick: () -> Unit = {}) {
@ -24,21 +32,23 @@ fun WelcomeScreen(onStartClick: () -> Unit = {}) {
.fillMaxSize()
.background(Color(0xFFF5F5F5)),
) {
Image(painterResource(Res.drawable.bg_welcome),contentDescription = null, modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Crop)
Column(
modifier =
Modifier
.fillMaxSize()
.padding(horizontal = 24.dp),
.padding(horizontal = 36.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Spacer(modifier = Modifier.height(120.dp))
Spacer(modifier = Modifier.height(21.dp))
// 主标题
Text(
text = "Acti",
fontSize = 48.sp,
fontWeight = FontWeight.Bold,
color = Color(0xFF333333),
fontSize = 64.sp,
color = Color(0xFF484848),
textAlign = TextAlign.Center,
)
@ -47,9 +57,9 @@ fun WelcomeScreen(onStartClick: () -> Unit = {}) {
// 副标题
Text(
text = "赋能每一个动作",
fontSize = 18.sp,
fontSize = 36.sp,
fontWeight = FontWeight.Normal,
color = Color(0xFF666666),
color = Color(0xFF484848),
textAlign = TextAlign.Center,
)
@ -58,106 +68,76 @@ fun WelcomeScreen(onStartClick: () -> Unit = {}) {
// 英文副标题
Text(
text = "Empower Every Move",
fontSize = 16.sp,
fontSize = 24.sp,
fontWeight = FontWeight.Normal,
color = Color(0xFF999999),
color = Color(0xFF484848),
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.weight(1f))
// 戒指图片占位符
Box(
// 立即使用按钮
Button(
onClick = onStartClick,
enabled = isChecked,
modifier =
Modifier
.size(200.dp)
.background(
Color(0xFFE5E5E5),
RoundedCornerShape(16.dp),
),
contentAlignment = Alignment.Center,
.fillMaxWidth()
.height(51.dp),
shape = RoundedCornerShape(30.dp),
colors =
ButtonDefaults.buttonColors(
containerColor = if (isChecked) Color(0xFF87919F) else Color(0xFFCCCCCC),
contentColor = Color.White,
),
) {
Text(
text = "💍",
fontSize = 80.sp,
text = "立即使用",
fontSize = 16.sp,
fontWeight = FontWeight.Medium,
)
}
Spacer(modifier = Modifier.weight(1f))
Spacer(modifier = Modifier.height(9.dp))
// 协议同意checkbox
Row(
modifier =
Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp),
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
Checkbox(
checked = isChecked,
onCheckedChange = { isChecked = it },
colors =
CheckboxDefaults.colors(
checkedColor = Color(0xFF007AFF),
),
)
UAPPCheckBox(isChecked, modifier = Modifier.size(15.dp)){
isChecked = !isChecked
}
Spacer(modifier = Modifier.width(8.dp))
Text(
text = "我已阅读并同意",
fontSize = 14.sp,
color = Color(0xFF666666),
)
Text(
text = "《用户协议》",
fontSize = 14.sp,
color = Color(0xFF007AFF),
)
Text(
text = "",
fontSize = 14.sp,
color = Color(0xFF666666),
)
Text(
text = "《隐私政策》",
fontSize = 14.sp,
color = Color(0xFF007AFF),
text = "我已阅读井同意《用户隐私协议》和《用户注册协议》",
fontSize = 12.sp,
color = Color(0xFF6636363),
)
}
Spacer(modifier = Modifier.height(24.dp))
Spacer(modifier = Modifier.height(300.dp))
// 立即使用按钮
Button(
onClick = onStartClick,
enabled = isChecked,
modifier =
Modifier
.fillMaxWidth()
.height(56.dp),
shape = RoundedCornerShape(28.dp),
colors =
ButtonDefaults.buttonColors(
containerColor = if (isChecked) Color(0xFF007AFF) else Color(0xFFCCCCCC),
contentColor = Color.White,
),
) {
Text(
text = "立即使用",
fontSize = 18.sp,
fontWeight = FontWeight.Medium,
)
}
Spacer(modifier = Modifier.height(40.dp))
}
}
}
@Composable
fun UAPPCheckBox(checked: Boolean, modifier: Modifier, onClick: () -> Unit){
if (checked){
Image(painterResource(Res.drawable.ic_uapp_checked), contentDescription = null, modifier = modifier.clickable { onClick.invoke() })
}else{
Image(painterResource(Res.drawable.ic_uapp_uncheck), contentDescription = null, modifier = modifier.clickable { onClick.invoke() })
}
}
@Composable
@Preview
fun WelcomeScreenPreview() {

Loading…
Cancel
Save