feat: basic ui

app/src/main/java/icu/fur93/esp32_car/page/ControlPage.kt

@@ -1,9 +1,9 @@
 package icu.fur93.esp32_car.page
 
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
-import androidx.compose.material.icons.Icons
+import androidx.compose.foundation.layout.padding
-import androidx.compose.material.icons.filled.Home
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -12,22 +12,21 @@ import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import icu.fur93.esp32_car.R
 import icu.fur93.esp32_car.Route
-import icu.fur93.esp32_car.ui.carditem.StatusCardInfo
-import icu.fur93.esp32_car.ui.carditem.StatusCardJoystickStatus
-import icu.fur93.esp32_car.ui.carditem.StatusCardMotorStatus
 import icu.fur93.esp32_car.ui.component.BottomNavigationBar
 import icu.fur93.esp32_car.ui.component.CardButtonGroup
 import icu.fur93.esp32_car.ui.component.CardButtonItem
 import icu.fur93.esp32_car.ui.component.PageTitle
-import icu.fur93.esp32_car.ui.component.StatusCard
 import icu.fur93.esp32_car.ui.layout.MainLayout
+import icu.fur93.esp32_car.ui.theme.LayoutContentModifier
 
 @Composable
 fun ControlPage(navController: NavHostController) {
     MainLayout(
         content = {
-            PageTitle("控制")
+            Column (LayoutContentModifier) {
-            ControlPageStatusCard()
+                PageTitle("控制")
+                ControlPageStatusCard()
+            }
         },
         bottomBar = {
             BottomNavigationBar(
@@ -52,7 +51,7 @@ fun ControlPageAutoControl() {
         buttons = listOf(
             CardButtonItem(
                 text = "循迹模式",
-                icon = ImageVector.vectorResource(id = R.drawable.outline_route_24)
+                icon = ImageVector.vectorResource(R.drawable.outline_route_24)
             )
         )
     )
@@ -65,15 +64,15 @@ fun ControlPageManualControl() {
         buttons = listOf(
             CardButtonItem(
                 text = "单摇杆模式",
-                icon = ImageVector.vectorResource(id = R.drawable.outline_joystick_24)
+                icon = ImageVector.vectorResource(R.drawable.outline_joystick_24)
             ),
             CardButtonItem(
                 text = "单向按键模式",
-                icon = ImageVector.vectorResource(id = R.drawable.outline_gamepad_24)
+                icon = ImageVector.vectorResource(R.drawable.outline_gamepad_24)
             ),
             CardButtonItem(
                 text = "陀螺仪模式",
-                icon = ImageVector.vectorResource(id = R.drawable.motion_sensor_active_24)
+                icon = ImageVector.vectorResource(R.drawable.motion_sensor_active_24)
             )
         )
     )

app/src/main/java/icu/fur93/esp32_car/page/HomePage.kt

@@ -1,6 +1,9 @@
 package icu.fur93.esp32_car.page
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.navigation.NavHostController
 import icu.fur93.esp32_car.Route
 import icu.fur93.esp32_car.ui.card.UnconnectedStatusCard
@@ -12,14 +15,17 @@ import icu.fur93.esp32_car.ui.component.BottomNavigationBar
 import icu.fur93.esp32_car.ui.component.PageTitle
 import icu.fur93.esp32_car.ui.component.StatusCard
 import icu.fur93.esp32_car.ui.layout.MainLayout
+import icu.fur93.esp32_car.ui.theme.LayoutContentModifier
 
 @Composable
 fun HomePage(navController: NavHostController) {
     MainLayout(
         content = {
-            PageTitle("标题还没想好")
+            Column (LayoutContentModifier) {
-            HomePageStatusCard()
+                PageTitle("标题还没想好")
+                HomePageStatusCard()
 //            UnconnectedStatusCard()
+            }
         },
         bottomBar = {
             BottomNavigationBar(

app/src/main/java/icu/fur93/esp32_car/page/SettingsPage.kt

@@ -1,15 +1,41 @@
 package icu.fur93.esp32_car.page
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
 import androidx.navigation.NavHostController
+import icu.fur93.esp32_car.R
 import icu.fur93.esp32_car.Route
 import icu.fur93.esp32_car.ui.component.BottomNavigationBar
+import icu.fur93.esp32_car.ui.component.PageTitle
 import icu.fur93.esp32_car.ui.layout.MainLayout
+import icu.fur93.esp32_car.ui.theme.LayoutContentPadding
+import icu.fur93.esp32_car.ui.theme.LayoutTopPadding
 
 @Composable
 fun SettingsPage(navController: NavHostController) {
     MainLayout(
         content = {
+            Column {
+                Column (
+                    Modifier.padding(
+                        top = LayoutTopPadding,
+                        start = LayoutContentPadding,
+                        end = LayoutContentPadding
+                    )
+                ) {
+                    PageTitle("设置")
+                }
+                SettingsList()
+            }
         },
         bottomBar = {
             BottomNavigationBar(
@@ -18,4 +44,41 @@ fun SettingsPage(navController: NavHostController) {
             )
         }
     )
+}
+
+@Composable
+fun SettingsList() {
+    LazyColumn {
+        item {
+            ListItem(
+                headlineContent = { Text("连接设备") },
+                supportingContent = { Text("已连接") },
+                trailingContent = {
+                    Icon(ImageVector.vectorResource(R.drawable.arrow_right_24), "连接设备")
+                }
+            )
+        }
+        item {
+            ListItem(
+                headlineContent = { Text("设备名称") },
+                supportingContent = { Text("当前名称: Name") },
+                trailingContent = {
+                    Icon(ImageVector.vectorResource(R.drawable.arrow_right_24), "设备名称")
+                }
+            )
+        }
+        item {
+            ListItem(
+                headlineContent = { Text("调试模式") },
+                trailingContent = {
+                    Switch(
+                        checked = false,
+                        onCheckedChange = {
+
+                        }
+                    )
+                }
+            )
+        }
+    }
 }

app/src/main/java/icu/fur93/esp32_car/ui/component/CardButtonGroup.kt

@@ -28,7 +28,7 @@ data class CardButtonItem(
     val modifier: Modifier? = Modifier
 )
 
-val CardButtonGroupGap = 8.dp
+val CardButtonGroupGap = 10.dp
 
 @Composable
 fun CardButtonGroup(
@@ -66,6 +66,7 @@ fun CardButton(
                 text = item.text,
                 style = CardButtonTypography.CardButtonItemTextStyle
             )
+            Spacer(Modifier.height(10.dp))
             Box(
                 modifier = Modifier.fillMaxWidth(),
                 contentAlignment = Alignment.BottomEnd

app/src/main/java/icu/fur93/esp32_car/ui/layout/MainLayout.kt

@@ -1,12 +1,12 @@
 package icu.fur93.esp32_car.ui.layout
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
 
 @Composable
 fun MainLayout(
@@ -19,7 +19,7 @@ fun MainLayout(
         Scaffold(
             bottomBar = bottomBar
         ) { innerPadding ->
-            Column (Modifier.padding(innerPadding).padding(22.dp)) {
+            Box(Modifier.padding(innerPadding)) {
                 content()
             }
         }

app/src/main/java/icu/fur93/esp32_car/ui/theme/Theme.kt

@@ -3,13 +3,16 @@ package icu.fur93.esp32_car.ui.theme
 import android.app.Activity
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
 
 private val DarkColorScheme = darkColorScheme(
     primary = Purple80,
@@ -55,4 +58,14 @@ fun Esp32carTheme(
         typography = Typography,
         content = content
     )
-}
+}
+
+val LayoutContentPadding = 22.dp;
+val LayoutTopPadding = 24.dp;
+
+val LayoutContentModifier = Modifier.padding(
+    start = LayoutContentPadding,
+    end = LayoutContentPadding,
+    top = LayoutTopPadding,
+    bottom = LayoutContentPadding
+)

app/src/main/java/icu/fur93/esp32_car/ui/theme/Type.kt

@@ -56,7 +56,7 @@ object CardButtonTypography {
         fontWeight = FontWeight.SemiBold
     )
     val CardButtonItemTextStyle = TextStyle(
-        fontSize = 18.sp,
+        fontSize = 16.sp,
         fontWeight = FontWeight.Normal
     )
 }

app/src/main/res/drawable/arrow_left_24.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="@android:color/white"
+    android:autoMirrored="true">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M560,680L360,480L560,280L560,680Z"/>
+</vector>

app/src/main/res/drawable/arrow_right_24.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="@android:color/white"
+    android:autoMirrored="true">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M400,680L400,280L600,480L400,680Z"/>
+</vector>