Flagship/abox-mgr
5
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增设备列表 Compose 页面 (#8)

Browse Source 
# WIP: Add device list Compose screen

## Summary

This MR adds only the reusable Kotlin Jetpack Compose device list screen for my assigned scope.

The screen displays the three ABox device categories:

- Smart socket
- Temperature/humidity sensor
- Infrared controller

This MR intentionally does not modify the app entry point, login flow, app shell routing, or any device detail/control screen. Those parts are handled by other feature branches.

## Changes

- Add `DeviceListScreen`.
- Expose click callbacks for each device category:
  - `onSocketClick`
  - `onTemperatureHumidityClick`
  - `onInfraredClick`
- Update the device-list change log document.
- Remove the earlier out-of-scope temporary device control screens from this branch.

## Scope

Included:

- Device list Compose UI component
- Device category entry UI
- Callback API for future route integration

Not included:

- App entry point changes
- Login flow changes
- Device control navigation graph
- Smart socket control screen
- Temperature/humidity status screen
- Infrared controller screen
- Direct ABSDK calls
- Java Activity classes
- XML layout files

## Integration Notes

The screen is designed to be hosted by the app shell or routing owner later:

```kotlin
DeviceListScreen(
    onSocketClick = { /* route to socket module */ },
    onTemperatureHumidityClick = { /* route to temperature/humidity module */ },
    onInfraredClick = { /* route to infrared controller module */ },
)
```

The current branch keeps these callbacks external so other feature owners can connect their modules without this MR taking ownership of routing.

## Verification

- Built and ran `android.app` locally from Android Studio.
- `:android:app:assembleDebug` completed successfully after trimming this branch to the device-list component scope.

## Notes

`settings.gradle.kts` is intentionally not part of this MR. Local Gradle/JDK/toolchain setup is handled on the developer machine and should not modify the team-provided project configuration.

---

# WIP: 新增设备列表 Compose 页面

## 概要

本 MR 只新增我当前分工负责的 Kotlin Jetpack Compose 设备列表页面组件。

设备列表展示三类 ABox 设备入口：

- 智能插座
- 温湿度传感器
- 红外控制器

本 MR 故意不修改 App 入口、登录流程、应用壳路由，也不实现任何设备详情/控制页面。这些部分由其他功能分支负责。

## 修改内容

- 新增 `DeviceListScreen`。
- 为三类设备入口暴露点击回调：
  - `onSocketClick`
  - `onTemperatureHumidityClick`
  - `onInfraredClick`
- 更新设备列表变更说明文档。
- 从本分支中移除早期临时加入、但不属于当前分工范围的设备控制页面。

## 本 MR 包含

- 设备列表 Compose UI 组件
- 设备类别入口 UI
- 后续路由接入所需的 callback API

## 本 MR 不包含

- App 入口修改
- 登录流程修改
- 设备控制 navigation graph
- 智能插座控制页面
- 温湿度状态页面
- 红外控制器页面
- Compose UI 中直接调用 ABSDK
- Java Activity
- XML layout

## 对接说明

该页面后续可以由 App shell 或路由负责人挂载：

```kotlin
DeviceListScreen(
    onSocketClick = { /* 后续跳转到智能插座模块 */ },
    onTemperatureHumidityClick = { /* 后续跳转到温湿度模块 */ },
    onInfraredClick = { /* 后续跳转到红外控制器模块 */ },
)
```

当前分支只提供页面和回调 API，不负责具体跳转目标，以便其他模块负责人对接自己的功能页面。

## 验证

- 已在本地通过 Android Studio 成功 build/run `android.app`。
- 修剪为设备列表组件范围后，`:android:app:assembleDebug` 构建成功。

## 备注

`settings.gradle.kts` 不属于本 MR 范围。本地 Gradle/JDK/toolchain 配置在开发者本机处理，不修改团队提供的项目配置文件。

---------

Co-authored-by: KremeCN <3265494849@qq.com>
Reviewed-on: #8
Co-authored-by: alZerNest <2223976172@qq.com>
This commit was merged in pull request #8.
This commit is contained in:
alZerNest
2026-08-25 11:39:12 +08:00
committed by KremeCN
co-authored by KremeCN
parent ed98c2be98
commit 249721be33
7 changed files with 499 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
android/app/src/androidTest/kotlin/com/flagship/abox/manager/ui/devicecontrollist/DeviceListScreenTest.kt
+54
View File
@@ -0,0 +1,54 @@
package com.flagship.abox.manager.ui.devicecontrollist
import androidx.activity.ComponentActivity
import androidx.compose.ui.test.assertIsDisplayed
import androidx.compose.ui.test.junit4.createAndroidComposeRule
import androidx.compose.ui.test.onNodeWithText
import androidx.compose.ui.test.performClick
import androidx.test.ext.junit.runners.AndroidJUnit4
import com.flagship.abox.manager.R
import com.flagship.abox.manager.designsystem.ABoxTheme
import org.junit.Assert.assertEquals
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith
@RunWith(AndroidJUnit4::class)
class DeviceListScreenTest {
@get:Rule
val composeRule = createAndroidComposeRule<ComponentActivity>()
@Test
fun deviceListRendersAllDeviceCategoryButtonsAndHandlesClicks() {
var socketClicks = 0
var tempClicks = 0
var infraredClicks = 0
val context = composeRule.activity
val socketTitle = context.getString(R.string.device_socket_title)
val tempTitle = context.getString(R.string.device_temperature_humidity_title)
val infraredTitle = context.getString(R.string.device_infrared_title)
val listTitle = context.getString(R.string.device_list_title)
composeRule.setContent {
ABoxTheme {
DeviceListScreen(
onSocketClick = { socketClicks++ },
onTemperatureHumidityClick = { tempClicks++ },
onInfraredClick = { infraredClicks++ },
)
}
}
composeRule.onNodeWithText(listTitle).assertIsDisplayed()
composeRule.onNodeWithText(socketTitle).assertIsDisplayed().performClick()
assertEquals(1, socketClicks)
composeRule.onNodeWithText(tempTitle).assertIsDisplayed().performClick()
assertEquals(1, tempClicks)
composeRule.onNodeWithText(infraredTitle).assertIsDisplayed().performClick()
assertEquals(1, infraredClicks)
}
}
android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrollist/DeviceListScreen.kt
+95
View File
@@ -0,0 +1,95 @@
package com.flagship.abox.manager.ui.devicecontrollist
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.flagship.abox.manager.R
import com.flagship.abox.manager.designsystem.ABoxButton
import com.flagship.abox.manager.designsystem.ABoxTheme
@Composable
fun DeviceListScreen(
modifier: Modifier = Modifier,
onSocketClick: () -> Unit = {},
onTemperatureHumidityClick: () -> Unit = {},
onInfraredClick: () -> Unit = {},
) {
Column(
modifier = modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.padding(32.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Text(
text = stringResource(R.string.device_list_title),
style = MaterialTheme.typography.headlineLarge,
textAlign = TextAlign.Center,
)
Text(
text = stringResource(R.string.device_list_description),
modifier = Modifier.padding(top = 12.dp, bottom = 32.dp),
style = MaterialTheme.typography.bodyLarge,
textAlign = TextAlign.Center,
)
DeviceEntryButton(
text = stringResource(R.string.device_socket_title),
description = stringResource(R.string.device_socket_description),
onClick = onSocketClick,
)
DeviceEntryButton(
text = stringResource(R.string.device_temperature_humidity_title),
description = stringResource(R.string.device_temperature_humidity_description),
onClick = onTemperatureHumidityClick,
)
DeviceEntryButton(
text = stringResource(R.string.device_infrared_title),
description = stringResource(R.string.device_infrared_description),
onClick = onInfraredClick,
)
}
}
@Composable
private fun DeviceEntryButton(
text: String,
description: String,
onClick: () -> Unit,
) {
ABoxButton(
onClick = onClick,
modifier = Modifier
.fillMaxWidth()
.padding(top = 16.dp),
) {
Column(
modifier = Modifier.padding(vertical = 8.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(text = text, style = MaterialTheme.typography.titleMedium)
Text(text = description, style = MaterialTheme.typography.bodySmall)
}
}
}
@Preview(showBackground = true)
@Composable
private fun DeviceListScreenPreview() {
ABoxTheme {
DeviceListScreen()
}
}
android/app/src/main/kotlin/com/flagship/abox/manager/ui/shell/MainAppShell.kt
+2 -9
View File
@@ -29,6 +29,7 @@ import com.flagship.abox.manager.R
import com.flagship.abox.manager.designsystem.ABoxNavigationBar
import com.flagship.abox.manager.designsystem.ABoxNavigationBarItem
import com.flagship.abox.manager.designsystem.ABoxTopPillBar
import com.flagship.abox.manager.ui.devicecontrollist.DeviceListScreen
/**
* Main authenticated application shell.
@@ -50,7 +51,7 @@ fun MainAppShell(
onAddClick: (() -> Unit)? = null,
actionInProgress: Boolean = false,
errorMessage: String? = null,
devicesSlot: @Composable () -> Unit = { DefaultDevicesSlot() },
devicesSlot: @Composable () -> Unit = { DeviceListScreen() },
scenesSlot: @Composable () -> Unit = { DefaultScenesSlot() },
activitySlot: @Composable () -> Unit = { DefaultActivitySlot() },
) {
@@ -133,14 +134,6 @@ fun MainAppShell(
}
}
@Composable
private fun DefaultDevicesSlot() {
SlotPlaceholder(
title = stringResource(R.string.devices_placeholder_title),
description = stringResource(R.string.devices_placeholder_description),
)
}
@Composable
private fun DefaultScenesSlot() {
SlotPlaceholder(
android/app/src/main/res/values-zh-rCN/strings.xml
+10
View File
@@ -42,4 +42,14 @@
<string name="scenes_placeholder_description">情景动作与执行插槽（由 tzh 模块实现）。</string>
<string name="activity_placeholder_title">活动记录</string>
<string name="activity_placeholder_description">未记录任何事件。</string>
<!-- 设备列表 -->
<string name="device_list_title">设备列表</string>
<string name="device_list_description">选择需要控制或查看状态的 ABox 终端设备。</string>
<string name="device_socket_title">智能插座</string>
<string name="device_socket_description">进入智能插座相关功能。</string>
<string name="device_temperature_humidity_title">温湿度传感器</string>
<string name="device_temperature_humidity_description">进入温湿度状态相关功能。</string>
<string name="device_infrared_title">红外控制器</string>
<string name="device_infrared_description">进入红外控制器相关功能。</string>
</resources>
android/app/src/main/res/values/strings.xml
+10
View File
@@ -42,4 +42,14 @@
<string name="scenes_placeholder_description">Scene actions and execution slot for tzh.</string>
<string name="activity_placeholder_title">Activity Log</string>
<string name="activity_placeholder_description">No recorded events yet.</string>
<!-- Device list -->
<string name="device_list_title">Device List</string>
<string name="device_list_description">Select an ABox terminal device to control or check status.</string>
<string name="device_socket_title">Smart Socket</string>
<string name="device_socket_description">Access smart socket features.</string>
<string name="device_temperature_humidity_title">Temperature &amp; Humidity Sensor</string>
<string name="device_temperature_humidity_description">View temperature and humidity status.</string>
<string name="device_infrared_title">Infrared Controller</string>
<string name="device_infrared_description">Access infrared controller features.</string>
</resources>
docs/device-control-compose-ui-change-log.md
+195
View File
@@ -0,0 +1,195 @@
# Device List Compose UI Change Log
Branch: `feature/device-control-compose-ui`
## Summary
This branch adds only the Kotlin Jetpack Compose device list page owned by this feature area.
The implementation provides a reusable Compose screen that displays the ABox terminal device categories:
- Smart socket
- Temperature/humidity sensor
- Infrared controller
This branch intentionally does not modify the app entry point or app shell routing. The app shell, login flow, and detail-feature routing are owned by other feature branches.
## Added Files
### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrollist/DeviceListScreen.kt`
Adds the device list page.
The page displays entries for:
- Smart socket
- Temperature/humidity sensor
- Infrared controller
Current scope:
- Display the device categories as list entry UI.
- Keep the UI in Kotlin Compose.
- Expose click callbacks for each device category.
- Avoid adding app-shell routing, detail routes, or detail control pages in this branch.
Integration API:
```kotlin
DeviceListScreen(
onSocketClick = { /* route to socket module later */ },
onTemperatureHumidityClick = { /* route to temperature/humidity module later */ },
onInfraredClick = { /* route to infrared controller module later */ },
)
```
Future integration point:
- The app shell or feature owner responsible for routing can host this screen and connect these callbacks to their own routes/modules later.
## Architecture Notes
This branch follows the current repository direction:
- Kotlin instead of Java
- Jetpack Compose instead of XML layouts
- Single-Activity UI instead of multiple Activities
- Navigation Compose compatibility through external callbacks
- Existing design-system wrappers where practical
This branch intentionally does not copy the previous Java/XML experiment module into the team repository.
## Scope Intentionally Not Included
This branch does not include:
- App entry point changes
- App shell or login routing changes
- A device-control navigation graph file
- Socket control screen implementation
- Temperature/humidity status screen implementation
- Infrared controller screen implementation
- Shared detail-control component scaffolding
- Direct ABSDK calls from Compose UI
- New Java Activity classes
- XML layout files
- A separate Android module copied from the experiment project
- Full session/login integration for device gateway calls
- Persistent infrared key storage
These should be added by the corresponding feature owners in later branches or follow-up commits after team architecture review.
## Verification
- Built and ran `android.app` from Android Studio successfully during local validation.
- `:android:app:assembleDebug` completed successfully after trimming the feature scope.
## Files Intended for Commit
The intended commit scope is limited to:
```text
android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrollist/DeviceListScreen.kt
docs/device-control-compose-ui-change-log.md
```
`settings.gradle.kts` is intentionally excluded from this feature commit. Local Gradle/JDK/toolchain setup should be handled on the developer machine and should not modify the team-provided project configuration in this branch.
---
# 设备列表 Compose UI 修改说明（中文）
分支：`feature/device-control-compose-ui`
## 概要
本分支只新增当前分工负责的 Kotlin Jetpack Compose 设备列表页面。
设备列表展示的设备类别包括：
- 智能插座
- 温湿度传感器
- 红外控制器
本分支故意不修改 App 入口或应用壳路由。程序入口、登录流程和各设备详情模块路由由其他功能分支负责。
## 新增文件
### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrollist/DeviceListScreen.kt`
新增设备列表页面。
页面展示三个设备入口：
- 智能插座
- 温湿度传感器
- 红外控制器
当前实现范围：
- 展示设备类别入口 UI。
- 保持 Kotlin Compose 实现。
- 为每个设备类别暴露点击回调。
- 不在本分支实现 App 入口接入、设备详情 route 或设备控制页面。
对接 API：
```kotlin
DeviceListScreen(
onSocketClick = { /* 后续跳转到智能插座模块 */ },
onTemperatureHumidityClick = { /* 后续跳转到温湿度模块 */ },
onInfraredClick = { /* 后续跳转到红外控制器模块 */ },
)
```
后续接入点：
- 由负责 App shell 或对应设备模块的同学，在各自分支中挂载这个页面，并把这些回调连接到他们自己的详情路由或功能模块。
## 架构说明
本分支遵循当前小组仓库的技术方向：
- 使用 Kotlin，而不是 Java。
- 使用 Jetpack Compose，而不是 XML layout。
- 使用单 Activity 架构，而不是多个 Activity 跳转。
- 通过外部回调保持与 Navigation Compose 的兼容性。
- 尽量复用已有 design system 中的组件封装。
本分支没有把之前个人实验项目中的 Java/XML 模块直接复制进团队仓库。
## 本分支未包含的内容
本分支暂不包含：
- App 入口修改。
- App shell 或登录路由修改。
- 设备控制 navigation graph 文件。
- 智能插座控制页面。
- 温湿度状态页面。
- 红外控制器操作页面。
- 设备详情控制页面共用组件。
- Compose UI 中直接调用 ABSDK。
- 新增 Java Activity。
- 新增 XML layout。
- 从个人实验项目复制独立 Android 模块。
- 完整登录/session 与设备 gateway 的联动。
- 红外学习按键的持久化存储。
这些内容建议由对应模块负责人在后续 branch 或后续 commit 中继续实现。
## 验证
- 本地验证过程中已从 Android Studio 成功 build/run `android.app`。
- 修剪职责范围后，`:android:app:assembleDebug` 构建成功。
## 预期提交范围
本次提交范围应限制在：
```text
android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrollist/DeviceListScreen.kt
docs/device-control-compose-ui-change-log.md
```
`settings.gradle.kts` 当前不属于本次设备列表 UI 功能提交范围。本地 Gradle/JDK/toolchain 配置应在开发者本机处理，不应修改团队提供的项目配置文件。
docs/device-list-compose-ui-pr-description.md
+133
View File
@@ -0,0 +1,133 @@
# WIP: Add device list Compose screen
## Summary
This MR adds only the reusable Kotlin Jetpack Compose device list screen for my assigned scope.
The screen displays the three ABox device categories:
- Smart socket
- Temperature/humidity sensor
- Infrared controller
This MR intentionally does not modify the app entry point, login flow, app shell routing, or any device detail/control screen. Those parts are handled by other feature branches.
## Changes
- Add `DeviceListScreen`.
- Expose click callbacks for each device category:
- `onSocketClick`
- `onTemperatureHumidityClick`
- `onInfraredClick`
- Update the device-list change log document.
- Remove the earlier out-of-scope temporary device control screens from this branch.
## Scope
Included:
- Device list Compose UI component
- Device category entry UI
- Callback API for future route integration
Not included:
- App entry point changes
- Login flow changes
- Device control navigation graph
- Smart socket control screen
- Temperature/humidity status screen
- Infrared controller screen
- Direct ABSDK calls
- Java Activity classes
- XML layout files
## Integration Notes
The screen is designed to be hosted by the app shell or routing owner later:
```kotlin
DeviceListScreen(
onSocketClick = { /* route to socket module */ },
onTemperatureHumidityClick = { /* route to temperature/humidity module */ },
onInfraredClick = { /* route to infrared controller module */ },
)
```
The current branch keeps these callbacks external so other feature owners can connect their modules without this MR taking ownership of routing.
## Verification
- Built and ran `android.app` locally from Android Studio.
- `:android:app:assembleDebug` completed successfully after trimming this branch to the device-list component scope.
## Notes
`settings.gradle.kts` is intentionally not part of this MR. Local Gradle/JDK/toolchain setup is handled on the developer machine and should not modify the team-provided project configuration.
---
# WIP: 新增设备列表 Compose 页面
## 概要
本 MR 只新增我当前分工负责的 Kotlin Jetpack Compose 设备列表页面组件。
设备列表展示三类 ABox 设备入口：
- 智能插座
- 温湿度传感器
- 红外控制器
本 MR 故意不修改 App 入口、登录流程、应用壳路由，也不实现任何设备详情/控制页面。这些部分由其他功能分支负责。
## 修改内容
- 新增 `DeviceListScreen`。
- 为三类设备入口暴露点击回调：
- `onSocketClick`
- `onTemperatureHumidityClick`
- `onInfraredClick`
- 更新设备列表变更说明文档。
- 从本分支中移除早期临时加入、但不属于当前分工范围的设备控制页面。
## 本 MR 包含
- 设备列表 Compose UI 组件
- 设备类别入口 UI
- 后续路由接入所需的 callback API
## 本 MR 不包含
- App 入口修改
- 登录流程修改
- 设备控制 navigation graph
- 智能插座控制页面
- 温湿度状态页面
- 红外控制器页面
- Compose UI 中直接调用 ABSDK
- Java Activity
- XML layout
## 对接说明
该页面后续可以由 App shell 或路由负责人挂载：
```kotlin
DeviceListScreen(
onSocketClick = { /* 后续跳转到智能插座模块 */ },
onTemperatureHumidityClick = { /* 后续跳转到温湿度模块 */ },
onInfraredClick = { /* 后续跳转到红外控制器模块 */ },
)
```
当前分支只提供页面和回调 API，不负责具体跳转目标，以便其他模块负责人对接自己的功能页面。
## 验证
- 已在本地通过 Android Studio 成功 build/run `android.app`。
- 修剪为设备列表组件范围后，`:android:app:assembleDebug` 构建成功。
## 备注
`settings.gradle.kts` 不属于本 MR 范围。本地 Gradle/JDK/toolchain 配置在开发者本机处理，不修改团队提供的项目配置文件。