From b2ec97215f0363fbd14b1928efeb8c957ce994bf Mon Sep 17 00:00:00 2001
From: "let5sne.win10" <let5sne.win10.pc@gmail.com>
Date: Sat, 14 Feb 2026 21:36:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BE=8E=E5=8C=96Android=20app=20UI?=
 =?UTF-8?q?=EF=BC=8CMaterial=E9=A3=8E=E6=A0=BC=E9=87=8D=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增深蓝工业风配色方案和圆角卡片/按钮样式
- 顶部标题栏带运行状态指示灯
- 按钮增加disabled灰色状态，启动/停止/拍照三色区分
- 状态卡片支持ScrollView滚动，内容不再截断
- monospace字体显示连接命令，提升可读性

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../main/java/com/usbwebcam/MainActivity.kt   |   8 +
 .../src/main/res/drawable/bg_btn_capture.xml  |  10 +
 .../src/main/res/drawable/bg_btn_danger.xml   |  20 ++
 .../src/main/res/drawable/bg_btn_primary.xml  |  20 ++
 .../app/src/main/res/drawable/bg_card.xml     |   7 +
 .../app/src/main/res/drawable/bg_header.xml   |   6 +
 .../app/src/main/res/layout/activity_main.xml | 191 ++++++++++++------
 .../app/src/main/res/values/colors.xml        |  34 ++++
 .../app/src/main/res/values/styles.xml        |  33 +++
 9 files changed, 269 insertions(+), 60 deletions(-)
 create mode 100644 android-app/app/src/main/res/drawable/bg_btn_capture.xml
 create mode 100644 android-app/app/src/main/res/drawable/bg_btn_danger.xml
 create mode 100644 android-app/app/src/main/res/drawable/bg_btn_primary.xml
 create mode 100644 android-app/app/src/main/res/drawable/bg_card.xml
 create mode 100644 android-app/app/src/main/res/drawable/bg_header.xml
 create mode 100644 android-app/app/src/main/res/values/colors.xml
 create mode 100644 android-app/app/src/main/res/values/styles.xml

diff --git a/android-app/app/src/main/java/com/usbwebcam/MainActivity.kt b/android-app/app/src/main/java/com/usbwebcam/MainActivity.kt
index be94d38..92d89b0 100644
--- a/android-app/app/src/main/java/com/usbwebcam/MainActivity.kt
+++ b/android-app/app/src/main/java/com/usbwebcam/MainActivity.kt
@@ -103,6 +103,10 @@ class MainActivity : AppCompatActivity() {
                     text = "在电脑端浏览器打开上述地址即可查看画面"
                     visibility = View.VISIBLE
                 }
+                findViewById<TextView>(R.id.tv_indicator).apply {
+                    text = "● 运行中"
+                    setTextColor(getColor(R.color.status_running))
+                }
                 findViewById<Button>(R.id.btn_start).isEnabled = false
                 findViewById<Button>(R.id.btn_stop).isEnabled = true
             }
@@ -120,6 +124,10 @@ class MainActivity : AppCompatActivity() {
         runOnUiThread {
             findViewById<TextView>(R.id.tv_status).text = "服务已停止"
             findViewById<TextView>(R.id.tv_ip).visibility = View.GONE
+            findViewById<TextView>(R.id.tv_indicator).apply {
+                text = "⏸ 未启动"
+                setTextColor(getColor(R.color.status_stopped))
+            }
             findViewById<Button>(R.id.btn_start).isEnabled = true
             findViewById<Button>(R.id.btn_stop).isEnabled = false
         }
diff --git a/android-app/app/src/main/res/drawable/bg_btn_capture.xml b/android-app/app/src/main/res/drawable/bg_btn_capture.xml
new file mode 100644
index 0000000..ae669b8
--- /dev/null
+++ b/android-app/app/src/main/res/drawable/bg_btn_capture.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="#40FFFFFF">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/accent_green" />
+            <corners android:radius="10dp" />
+        </shape>
+    </item>
+</ripple>
diff --git a/android-app/app/src/main/res/drawable/bg_btn_danger.xml b/android-app/app/src/main/res/drawable/bg_btn_danger.xml
new file mode 100644
index 0000000..25beece
--- /dev/null
+++ b/android-app/app/src/main/res/drawable/bg_btn_danger.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="#40FFFFFF">
+    <item>
+        <selector>
+            <item android:state_enabled="false">
+                <shape android:shape="rectangle">
+                    <solid android:color="#B0BEC5" />
+                    <corners android:radius="10dp" />
+                </shape>
+            </item>
+            <item>
+                <shape android:shape="rectangle">
+                    <solid android:color="@color/accent_red" />
+                    <corners android:radius="10dp" />
+                </shape>
+            </item>
+        </selector>
+    </item>
+</ripple>
diff --git a/android-app/app/src/main/res/drawable/bg_btn_primary.xml b/android-app/app/src/main/res/drawable/bg_btn_primary.xml
new file mode 100644
index 0000000..a50f99b
--- /dev/null
+++ b/android-app/app/src/main/res/drawable/bg_btn_primary.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="#40FFFFFF">
+    <item>
+        <selector>
+            <item android:state_enabled="false">
+                <shape android:shape="rectangle">
+                    <solid android:color="#B0BEC5" />
+                    <corners android:radius="10dp" />
+                </shape>
+            </item>
+            <item>
+                <shape android:shape="rectangle">
+                    <solid android:color="@color/accent_blue" />
+                    <corners android:radius="10dp" />
+                </shape>
+            </item>
+        </selector>
+    </item>
+</ripple>
diff --git a/android-app/app/src/main/res/drawable/bg_card.xml b/android-app/app/src/main/res/drawable/bg_card.xml
new file mode 100644
index 0000000..e399e79
--- /dev/null
+++ b/android-app/app/src/main/res/drawable/bg_card.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/bg_card" />
+    <corners android:radius="12dp" />
+    <stroke android:width="1dp" android:color="@color/divider" />
+</shape>
diff --git a/android-app/app/src/main/res/drawable/bg_header.xml b/android-app/app/src/main/res/drawable/bg_header.xml
new file mode 100644
index 0000000..256d2f2
--- /dev/null
+++ b/android-app/app/src/main/res/drawable/bg_header.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/primary" />
+    <corners android:radius="12dp" />
+</shape>
diff --git a/android-app/app/src/main/res/layout/activity_main.xml b/android-app/app/src/main/res/layout/activity_main.xml
index a94887f..0dd64b1 100644
--- a/android-app/app/src/main/res/layout/activity_main.xml
+++ b/android-app/app/src/main/res/layout/activity_main.xml
@@ -2,81 +2,152 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:orientation="horizontal"
-    android:padding="24dp"
-    android:background="#FAFAFA">
+    android:orientation="vertical"
+    android:background="@color/bg_main">
 
-    <!-- 左侧：状态信息 -->
+    <!-- 顶部标题栏 -->
     <LinearLayout
-        android:layout_width="0dp"
-        android:layout_height="match_parent"
-        android:layout_weight="1"
-        android:orientation="vertical"
+        android:layout_width="match_parent"
+        android:layout_height="56dp"
+        android:orientation="horizontal"
         android:gravity="center_vertical"
-        android:paddingEnd="24dp">
+        android:paddingHorizontal="20dp"
+        android:background="@drawable/bg_header">
 
         <TextView
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:text="📷  USB 摄像头服务"
+            android:textSize="18sp"
+            android:textColor="@color/text_on_dark"
+            android:textStyle="bold" />
+
+        <TextView
+            android:id="@+id/tv_indicator"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:text="USB 摄像头服务"
-            android:textSize="22sp"
-            android:textColor="#212121"
-            android:textStyle="bold"
-            android:layout_marginBottom="16dp" />
-
-        <TextView
-            android:id="@+id/tv_status"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:text="等待启动..."
-            android:textSize="16sp"
-            android:textColor="#424242"
-            android:lineSpacingExtra="4dp"
-            android:background="#FFFFFF"
-            android:padding="16dp"
-            android:layout_marginBottom="16dp" />
-
-        <TextView
-            android:id="@+id/tv_ip"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
+            android:text="⏸ 未启动"
             android:textSize="13sp"
-            android:textColor="#757575"
-            android:visibility="gone" />
+            android:textColor="@color/status_stopped" />
 
     </LinearLayout>
 
-    <!-- 右侧：按钮区 -->
+    <!-- 主内容区 -->
     <LinearLayout
-        android:layout_width="wrap_content"
-        android:layout_height="match_parent"
-        android:orientation="vertical"
-        android:gravity="center">
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="1"
+        android:orientation="horizontal"
+        android:padding="12dp">
 
-        <Button
-            android:id="@+id/btn_start"
-            android:layout_width="160dp"
-            android:layout_height="56dp"
-            android:text="启动服务"
-            android:textSize="18sp"
-            android:layout_marginBottom="12dp" />
+        <!-- 左侧：状态信息卡片 -->
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_height="match_parent"
+            android:layout_weight="1"
+            android:orientation="vertical"
+            android:layout_marginEnd="12dp">
 
-        <Button
-            android:id="@+id/btn_stop"
-            android:layout_width="160dp"
-            android:layout_height="56dp"
-            android:text="停止服务"
-            android:textSize="18sp"
-            android:enabled="false"
-            android:layout_marginBottom="24dp" />
+            <LinearLayout
+                style="@style/CardStyle"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:orientation="vertical">
 
-        <Button
-            android:id="@+id/btn_capture"
-            android:layout_width="160dp"
-            android:layout_height="56dp"
-            android:text="拍照保存"
-            android:textSize="18sp"
-            android:backgroundTint="#4CAF50" />
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="服务状态"
+                    android:textSize="12sp"
+                    android:textColor="@color/text_secondary"
+                    android:textStyle="bold"
+                    android:textAllCaps="true"
+                    android:letterSpacing="0.08"
+                    android:layout_marginBottom="8dp" />
+
+                <View
+                    android:layout_width="match_parent"
+                    android:layout_height="1dp"
+                    android:background="@color/divider"
+                    android:layout_marginBottom="8dp" />
+
+                <ScrollView
+                    android:layout_width="match_parent"
+                    android:layout_height="0dp"
+                    android:layout_weight="1"
+                    android:fillViewport="true">
+
+                    <LinearLayout
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:orientation="vertical">
+
+                        <TextView
+                            android:id="@+id/tv_status"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:text="等待启动..."
+                            android:textSize="14sp"
+                            android:textColor="@color/text_primary"
+                            android:lineSpacingExtra="5dp"
+                            android:fontFamily="monospace" />
+
+                        <TextView
+                            android:id="@+id/tv_ip"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:textSize="12sp"
+                            android:textColor="@color/text_hint"
+                            android:layout_marginTop="8dp"
+                            android:visibility="gone" />
+
+                    </LinearLayout>
+
+                </ScrollView>
+
+            </LinearLayout>
+
+        </LinearLayout>
+
+        <!-- 右侧：操作按钮 -->
+        <LinearLayout
+            android:layout_width="180dp"
+            android:layout_height="match_parent"
+            android:orientation="vertical"
+            android:gravity="center">
+
+            <Button
+                android:id="@+id/btn_start"
+                style="@style/BtnPrimary"
+                android:layout_width="match_parent"
+                android:layout_height="52dp"
+                android:text="▶  启动服务"
+                android:layout_marginBottom="10dp" />
+
+            <Button
+                android:id="@+id/btn_stop"
+                style="@style/BtnDanger"
+                android:layout_width="match_parent"
+                android:layout_height="52dp"
+                android:text="■  停止服务"
+                android:enabled="false"
+                android:layout_marginBottom="24dp" />
+
+            <View
+                android:layout_width="match_parent"
+                android:layout_height="1dp"
+                android:background="@color/divider"
+                android:layout_marginBottom="24dp" />
+
+            <Button
+                android:id="@+id/btn_capture"
+                style="@style/BtnCapture"
+                android:layout_width="match_parent"
+                android:layout_height="60dp"
+                android:text="📸  拍照保存" />
+
+        </LinearLayout>
 
     </LinearLayout>
 
diff --git a/android-app/app/src/main/res/values/colors.xml b/android-app/app/src/main/res/values/colors.xml
new file mode 100644
index 0000000..078bf9b
--- /dev/null
+++ b/android-app/app/src/main/res/values/colors.xml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- 主色调：深蓝工业风 -->
+    <color name="primary">#1B2838</color>
+    <color name="primary_dark">#0F1923</color>
+    <color name="primary_light">#2A3F56</color>
+
+    <!-- 强调色 -->
+    <color name="accent_green">#43A047</color>
+    <color name="accent_green_dark">#2E7D32</color>
+    <color name="accent_red">#E53935</color>
+    <color name="accent_red_dark">#C62828</color>
+    <color name="accent_blue">#1E88E5</color>
+    <color name="accent_blue_dark">#1565C0</color>
+
+    <!-- 背景 -->
+    <color name="bg_main">#ECEFF1</color>
+    <color name="bg_card">#FFFFFF</color>
+    <color name="bg_status_bar">#1B2838</color>
+
+    <!-- 文字 -->
+    <color name="text_primary">#212121</color>
+    <color name="text_secondary">#546E7A</color>
+    <color name="text_hint">#90A4AE</color>
+    <color name="text_on_dark">#ECEFF1</color>
+    <color name="text_on_primary">#FFFFFF</color>
+
+    <!-- 状态指示 -->
+    <color name="status_running">#43A047</color>
+    <color name="status_stopped">#90A4AE</color>
+
+    <!-- 分隔线 -->
+    <color name="divider">#CFD8DC</color>
+</resources>
diff --git a/android-app/app/src/main/res/values/styles.xml b/android-app/app/src/main/res/values/styles.xml
new file mode 100644
index 0000000..627d133
--- /dev/null
+++ b/android-app/app/src/main/res/values/styles.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- 卡片样式 -->
+    <style name="CardStyle">
+        <item name="android:background">@drawable/bg_card</item>
+        <item name="android:padding">16dp</item>
+    </style>
+
+    <!-- 按钮基础样式 -->
+    <style name="BtnBase">
+        <item name="android:textSize">16sp</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:textAllCaps">false</item>
+        <item name="android:stateListAnimator">@null</item>
+        <item name="android:elevation">2dp</item>
+    </style>
+
+    <style name="BtnPrimary" parent="BtnBase">
+        <item name="android:background">@drawable/bg_btn_primary</item>
+        <item name="android:textColor">@color/text_on_primary</item>
+    </style>
+
+    <style name="BtnDanger" parent="BtnBase">
+        <item name="android:background">@drawable/bg_btn_danger</item>
+        <item name="android:textColor">@color/text_on_primary</item>
+    </style>
+
+    <style name="BtnCapture" parent="BtnBase">
+        <item name="android:background">@drawable/bg_btn_capture</item>
+        <item name="android:textColor">@color/text_on_primary</item>
+        <item name="android:textSize">18sp</item>
+    </style>
+</resources>