feat: 重新设计APP的UI

jixiaoyong · Mar 30, 2024 · cdae22d · cdae22d
1 parent 463c905
commit cdae22d
Show file tree

Hide file tree

Showing 10 changed files with 249 additions and 189 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -35,7 +35,7 @@ compose.desktop {
         nativeDistributions {
             targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
             packageName = "ApkSigner"
-            packageVersion = "1.1.3"
+            packageVersion = "1.2.0"
 
             buildTypes.release {
                 proguard {

diff --git a/src/main/kotlin/io/github/jixiaoyong/pages/MainPage.kt b/src/main/kotlin/io/github/jixiaoyong/pages/MainPage.kt
@@ -5,8 +5,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Divider
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Icon
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -66,42 +65,47 @@ fun App() {
     ToasterUtil.init(isDarkTheme)
 
     AppTheme(darkTheme = isDarkTheme) {
-        Column(modifier = Modifier.fillMaxSize()) {
+        Column(modifier = Modifier.fillMaxSize().background(color = Color.White)) {
             Row(
                 modifier =
-                    Modifier.fillMaxWidth()
-                        .heightIn(min = 65.dp)
-                        .background(MaterialTheme.colors.background)
-                        .padding(horizontal = 2.dp),
+                Modifier.fillMaxWidth()
+                    .heightIn(min = 65.dp)
+                    .background(Color(0xFFE7E7E7))
+                    .padding(horizontal = 2.dp),
                 horizontalArrangement = Arrangement.SpaceEvenly,
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 for (route in viewModel.routes) {
-                    val isActive = route.second == pageIndex
+                    val isActive = route.third == pageIndex
                     val backgroundColor =
                         if (isActive) {
-                            MaterialTheme.colors.secondary
+                            Color(0xffc0c4c4)
                         } else {
-                            MaterialTheme.colors.surface
+                            Color.Transparent
                         }
-                    val textColor = if (isActive) Color.White else MaterialTheme.colors.onPrimary
+                    val textColor = Color.Black
                     Row(
                         modifier =
-                            Modifier
-                                .weight(1f)
-                                .padding(horizontal = 1.dp)
-                                .background(backgroundColor, RoundedCornerShape(5.dp))
-                                .clickable {
-                                    viewModel.changePage(route.second)
-                                }.padding(vertical = 15.dp),
+                        Modifier
+                            .weight(1f)
+                            .padding(horizontal = 1.dp)
+                            .background(backgroundColor, RoundedCornerShape(5.dp))
+                            .clickable {
+                                viewModel.changePage(route.third)
+                            }.padding(vertical = 15.dp),
                         horizontalArrangement = Arrangement.Center,
                         verticalAlignment = Alignment.CenterVertically,
                     ) {
-                        Text(route.first, style = TextStyle(color = textColor))
+                        Icon(
+                            route.first,
+                            contentDescription = route.second,
+                            tint = Color(0xff007AFF),
+                            modifier = Modifier.padding(end = 5.dp).size(18.dp)
+                        )
+                        Text(route.second, style = TextStyle(color = textColor))
                     }
                 }
             }
-            Divider(color = MaterialTheme.colors.surface)
 
             when (pageIndex) {
                 Routes.SignInfo -> PageSignInfo(signInfoViewModel)

diff --git a/src/main/kotlin/io/github/jixiaoyong/pages/MainViewModel.kt b/src/main/kotlin/io/github/jixiaoyong/pages/MainViewModel.kt
@@ -1,6 +1,10 @@
 package io.github.jixiaoyong.pages
 
 import ApkSigner
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.List
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.Settings
 import androidx.compose.runtime.mutableStateOf
 import io.github.jixiaoyong.base.BaseViewModel
 import io.github.jixiaoyong.utils.SettingsTool
@@ -19,9 +23,9 @@ import kotlinx.coroutines.launch
 class MainViewModel(private val settings: SettingsTool) : BaseViewModel() {
     val routes =
         listOf(
-            Pair("\uD83D\uDD10 签名信息", Routes.SignInfo),
-            Pair("\uD83D\uDD12 签名APP", Routes.SignApp),
-            Pair("\uD83D\uDEE0 设置信息", Routes.SettingInfo),
+            Triple(Icons.Default.List, "签名信息", Routes.SignInfo),
+            Triple(Icons.Default.Lock, "签名APP", Routes.SignApp),
+            Triple(Icons.Default.Settings, "设置信息", Routes.SettingInfo),
         )
 
     val currentIndex = MutableStateFlow(Routes.SignInfo)

diff --git a/src/main/kotlin/io/github/jixiaoyong/pages/settings/Settings.kt b/src/main/kotlin/io/github/jixiaoyong/pages/settings/Settings.kt
@@ -29,7 +29,9 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.github.jixiaoyong.base.viewModel
 import io.github.jixiaoyong.pages.signapp.DropBoxPanel
-import io.github.jixiaoyong.utils.*
+import io.github.jixiaoyong.utils.FileChooseUtil
+import io.github.jixiaoyong.utils.ToastConfig
+import io.github.jixiaoyong.utils.showToast
 import io.github.jixiaoyong.widgets.ButtonWidget
 import io.github.jixiaoyong.widgets.InfoItemWidget
 import kotlinx.coroutines.launch
@@ -110,7 +112,7 @@ fun PageSettingInfo() {
         ) {
             DropBoxPanel(window,
                 modifier = Modifier.fillMaxWidth().height(100.dp).padding(10.dp)
-                    .background(color = MaterialTheme.colors.surface, shape = RoundedCornerShape(15.dp))
+                    .background(color = Color(0xffF2F2F7), shape = RoundedCornerShape(10.dp))
                     .padding(15.dp)
                     .clickable {
                         scope.launch {
@@ -132,6 +134,7 @@ fun PageSettingInfo() {
                 onFileDrop = { scope.launch { viewModel.setupBuildToolsConfig(it.first()) } }) {
                 Text(
                     text = "请拖拽Android SDK的build-tools的子文件夹到这里，以一次性修改apkSigner和zipAlign目录",
+                    color = Color(0xFFBABEBE),
                     modifier = Modifier.align(alignment = Alignment.Center)
                 )
             }
@@ -170,7 +173,7 @@ fun PageSettingInfo() {
 
             Row(
                 verticalAlignment = Alignment.CenterVertically,
-                modifier = Modifier.padding(horizontal = 15.dp, vertical = 10.dp)
+                modifier = Modifier.padding(horizontal = 10.dp, vertical = 10.dp)
             ) {
                 Column(modifier = Modifier.weight(1f, true)) {
                     Text(
@@ -181,12 +184,15 @@ fun PageSettingInfo() {
                             color = MaterialTheme.colors.onPrimary
                         )
                     )
-                    Text("当只有一个apk文件时，则自动尝试匹配上次使用的签名信息")
+                    Text(
+                        "当只有一个apk文件时，则自动尝试匹配上次使用的签名信息",
+                        style = TextStyle(fontWeight = FontWeight.Medium, fontSize = 14.sp, color = Color.Gray)
+                    )
                 }
                 Switch(
                     uiState.isAutoMatchSignature,
                     { autoMatch -> viewModel.saveAutoMatchSignature(autoMatch) },
-                    colors = SwitchDefaults.colors(checkedThumbColor = MaterialTheme.colors.secondary)
+                    colors = SwitchDefaults.colors(checkedThumbColor = Color(0xff007AFF))
                 )
             }
 
@@ -228,7 +234,7 @@ fun PageSettingInfo() {
                     append(str)
                     addStyle(
                         style = SpanStyle(
-                            color = Color(0xff64B5F6),
+                            color = Color(0xff007AFF),
                             textDecoration = TextDecoration.Underline
                         ), start = startIndex, end = endIndex
                     )

diff --git a/src/main/kotlin/io/github/jixiaoyong/pages/signInfos/SignInfoItem.kt b/src/main/kotlin/io/github/jixiaoyong/pages/signInfos/SignInfoItem.kt
@@ -9,16 +9,17 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Info
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import io.github.jixiaoyong.widgets.ButtonWidget
-import io.github.jixiaoyong.widgets.HoverableTooltip
 
 /**
  * @author : jixiaoyong
@@ -52,31 +53,33 @@ fun SignInfoItem(
 ) {
 
     Row(
-        modifier = modifier.padding(horizontal = 10.dp, vertical = 5.dp).fillMaxWidth(),
+        modifier = modifier.padding(horizontal = 10.dp, vertical = 8.dp).fillMaxWidth(),
         verticalAlignment = Alignment.CenterVertically
     ) {
 
-        Row(modifier = Modifier.weight(0.25f)) {
-            Text(name, color = MaterialTheme.colors.onPrimary)
-            HoverableTooltip(description = description) { modifier ->
-                Icon(
-                    Icons.Default.Info,
-                    contentDescription = "description information",
-                    modifier = modifier
-                )
-            }
+        Column(modifier = Modifier.weight(0.25f)) {
+            Text(
+                name,
+                color = MaterialTheme.colors.onPrimary,
+                fontWeight = FontWeight.Bold,
+            )
+            if (!description.isNullOrBlank()) Text(
+                description,
+                style = TextStyle(color = Color(0xff808080), fontSize = 12.sp)
+            )
         }
         Row(modifier = Modifier.weight(0.75f), verticalAlignment = Alignment.CenterVertically) {
+            var isFocused by remember { mutableStateOf(false) }
             TextField(
                 value,
                 onValueChange = onChange,
-                modifier = Modifier.weight(1f).border(
-                    1.dp,
-                    color = MaterialTheme.colors.secondary,
-                    shape = RoundedCornerShape(5.dp)
-                ),
+                modifier = Modifier.weight(1f)
+                    .border(1.dp, Color(if (isFocused) 0xff007AFF else 0xFFBABEBE), shape = RoundedCornerShape(10.dp))
+                    .onFocusChanged {
+                        isFocused = it.isFocused
+                    },
                 colors = TextFieldDefaults.outlinedTextFieldColors(
-                    backgroundColor = MaterialTheme.colors.background,
+                    backgroundColor = Color.Transparent,
                     focusedBorderColor = Color.Transparent,
                     disabledBorderColor = Color.Transparent,
                     focusedLabelColor = Color.Transparent,
@@ -86,6 +89,7 @@ fun SignInfoItem(
                 keyboardOptions =
                 if (isPwd) KeyboardOptions.Default.copy(keyboardType = KeyboardType.Password) else KeyboardOptions.Default,
                 shape = RoundedCornerShape(size = 15.dp),
+                textStyle = LocalTextStyle.current.copy(fontWeight = FontWeight.Normal, color = Color.Black)
             )
             if (null != onClick) ButtonWidget(
                 onClick = onClick,