Add device control list UI

Changes: - Add Kotlin Compose device list and device control placeholder screens. - Register the new device-control navigation graph from the existing app shell. - Preserve the current foundation and placeholder flow. Documentation: - Added English and Chinese change log under docs/device-control-compose-ui-change-log.md for team review.
2026-08-23 17:31:34 +08:00
parent 6f7d3248b0
commit 1fb046cb09
8 changed files with 756 additions and 2 deletions
@@ -0,0 +1,344 @@
+# Device Control Compose UI Change Log
+
+Branch: `feature/device-control-compose-ui`
+
+## Summary
+
+This branch adds a Kotlin Jetpack Compose implementation for the device-control UI owned by this feature area.
+
+The implementation introduces a new device-control entry point and a group of Compose screens for the three device types required by the current project scope:
+
+- Socket device control
+- Temperature/humidity status display
+- Infrared remote control actions
+
+The existing placeholder/foundation app flow is preserved. The new device-control flow is added as an additional navigation path instead of replacing the existing screens.
+
+## Modified Files
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/ABoxManagerApp.kt`
+
+Changes:
+
+- Added an entry button on the foundation screen for the Kotlin device-control UI.
+- Registered the new device-control navigation graph in the existing `NavHost`.
+- Preserved the existing foundation and placeholder routes.
+
+Purpose:
+
+- Allows teammates to open the newly added device-control screens from the current Compose app shell.
+
+## Added Files
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/DeviceControlRoutes.kt`
+
+Adds navigation routes and a small navigation graph for the device-control feature.
+
+Routes included:
+
+- Device list
+- Socket control
+- Temperature/humidity status
+- Infrared control
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/DeviceListScreen.kt`
+
+Adds the top-level device list screen.
+
+The screen contains entries for:
+
+- Smart socket
+- Temperature/humidity sensor
+- Infrared remote controller
+
+Each entry navigates to its corresponding Compose screen.
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/DeviceControlComponents.kt`
+
+Adds shared UI components used by the device-control screens.
+
+Included components:
+
+- Shared device page scaffold
+- Primary action button wrapper
+- Two-column action button row
+
+Purpose:
+
+- Keeps repeated screen layout and action button patterns consistent across device screens.
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/SocketControlScreen.kt`
+
+Adds a Compose screen for socket control.
+
+Current scope:
+
+- Displays socket status text.
+- Provides actions for refreshing status, turning on, and turning off.
+- Uses local Compose state as a placeholder.
+
+Future integration point:
+
+- Replace placeholder state handling with `SocketGateway.getStatus(...)` and `SocketGateway.setPower(...)` through a ViewModel.
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/TemperatureHumidityScreen.kt`
+
+Adds a Compose screen for temperature/humidity display.
+
+Current scope:
+
+- Displays temperature and humidity values.
+- Provides a refresh action.
+- Uses local Compose state as a placeholder.
+
+Future integration point:
+
+- Replace placeholder state handling with `TemperatureHumidityGateway.getReading(...)` through a ViewModel.
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/InfraredControlScreen.kt`
+
+Adds a Compose screen for infrared remote operations.
+
+Current scope:
+
+- Allows entering an infrared device name.
+- Allows entering an infrared key name.
+- Provides send and learn actions.
+- Uses local Compose state as a placeholder.
+
+Future integration point:
+
+- Replace placeholder state handling with `InfraredGateway.sendKey(...)` and `InfraredGateway.learnKey(...)` through a ViewModel.
+
+## 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 instead of `Intent`-based Activity navigation
+- Existing design-system wrappers where practical
+
+This branch intentionally does not copy the previous Java/XML experiment module into the team repository.
+
+## ABSDK Integration Notes
+
+The UI screens added in this branch do not call ABSDK directly.
+
+The repository already contains domain abstractions and an ABSDK bridge:
+
+- `SocketGateway`
+- `TemperatureHumidityGateway`
+- `InfraredGateway`
+- `AbsdkBridge`
+- `VendorAbsdkClient`
+
+Recommended next step:
+
+- Add ViewModels for the device-control screens.
+- Inject/use the gateway interfaces from the domain layer.
+- Expose screen UI state from ViewModels to the Compose screens.
+
+## Scope Intentionally Not Included
+
+This branch does not include:
+
+- 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 in later branches or follow-up commits after team architecture review.
+
+## Files Intended for Commit
+
+The intended commit scope is limited to:
+
+```text
+android/app/src/main/kotlin/com/flagship/abox/manager/ui/ABoxManagerApp.kt
+android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/
+docs/device-control-compose-ui-change-log.md
+```
+
+`settings.gradle.kts` is intentionally not part of this feature commit unless the team decides the local toolchain resolver change is required.
+
+---
+
+# 设备控制 Compose UI 修改说明（中文）
+
+分支：`feature/device-control-compose-ui`
+
+## 概要
+
+本分支新增了一套 Kotlin Jetpack Compose 版本的设备控制 UI，用于承载当前负责的设备列表与三类终端设备页面。
+
+本次新增的设备范围包括：
+
+- 智能插座控制
+- 温湿度状态显示
+- 红外遥控器操作
+
+本分支没有替换原有的 foundation / placeholder 页面，而是在现有 Compose 应用壳中新增了一个设备控制入口。因此，原有占位流程仍然保留，设备控制流程是额外新增的导航路径。
+
+## 修改文件
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/ABoxManagerApp.kt`
+
+修改内容：
+
+- 在 foundation 页面增加了一个进入 Kotlin 版设备控制 UI 的按钮。
+- 在现有 `NavHost` 中注册了设备控制导航图。
+- 保留了原有 foundation route 和 placeholder route。
+
+作用：
+
+- 方便团队成员从当前 Compose 应用入口进入新增加的设备控制页面。
+
+## 新增文件
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/DeviceControlRoutes.kt`
+
+新增设备控制相关的 Compose Navigation 路由与导航图。
+
+包含的页面路由：
+
+- 设备列表
+- 智能插座控制
+- 温湿度状态
+- 红外遥控器控制
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/DeviceListScreen.kt`
+
+新增设备列表页面。
+
+页面包含三个设备入口：
+
+- 智能插座
+- 温湿度传感器
+- 红外遥控器
+
+每个入口会跳转到对应的 Compose 设备页面。
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/DeviceControlComponents.kt`
+
+新增设备控制页面共用 UI 组件。
+
+包含：
+
+- 通用设备页面脚手架
+- 主要操作按钮封装
+- 双按钮横向操作区
+
+作用：
+
+- 减少各设备页面中的重复布局代码。
+- 让插座、温湿度、红外页面保持相似的视觉结构。
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/SocketControlScreen.kt`
+
+新增智能插座控制页面。
+
+当前实现范围：
+
+- 显示插座状态文本。
+- 提供刷新状态、打开、关闭三个操作入口。
+- 当前使用本地 Compose state 作为占位状态。
+
+后续接入点：
+
+- 通过 ViewModel 接入 `SocketGateway.getStatus(...)`。
+- 通过 ViewModel 接入 `SocketGateway.setPower(...)`。
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/TemperatureHumidityScreen.kt`
+
+新增温湿度状态页面。
+
+当前实现范围：
+
+- 显示温度值。
+- 显示湿度值。
+- 提供刷新温湿度按钮。
+- 当前使用本地 Compose state 作为占位状态。
+
+后续接入点：
+
+- 通过 ViewModel 接入 `TemperatureHumidityGateway.getReading(...)`。
+
+### `android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/InfraredControlScreen.kt`
+
+新增红外遥控器页面。
+
+当前实现范围：
+
+- 输入红外设备名称。
+- 输入红外按键 KEY。
+- 提供发送红外按键操作。
+- 提供学习红外按键操作。
+- 当前使用本地 Compose state 作为占位状态。
+
+后续接入点：
+
+- 通过 ViewModel 接入 `InfraredGateway.sendKey(...)`。
+- 通过 ViewModel 接入 `InfraredGateway.learnKey(...)`。
+
+## 架构说明
+
+本分支遵循当前小组仓库的技术方向：
+
+- 使用 Kotlin，而不是 Java。
+- 使用 Jetpack Compose，而不是 XML layout。
+- 使用单 Activity 架构，而不是多个 Activity 跳转。
+- 使用 Navigation Compose，而不是 `Intent` 页面跳转。
+- 尽量复用已有 design system 中的组件封装。
+
+本分支没有把之前个人实验项目中的 Java/XML 模块直接复制进团队仓库。
+
+## ABSDK 接入说明
+
+本次新增的 Compose UI 页面没有直接调用 ABSDK。
+
+当前仓库中已经存在较正式的 domain 抽象和 ABSDK bridge：
+
+- `SocketGateway`
+- `TemperatureHumidityGateway`
+- `InfraredGateway`
+- `AbsdkBridge`
+- `VendorAbsdkClient`
+
+因此后续真实设备控制逻辑建议通过 ViewModel 调用 domain gateway，而不是在 Compose UI 中直接调用 ABSDK。
+
+推荐后续工作：
+
+- 为插座页面新增 ViewModel。
+- 为温湿度页面新增 ViewModel。
+- 为红外页面新增 ViewModel。
+- 在 ViewModel 中调用对应 gateway。
+- 将调用结果转换为 Compose UI state。
+
+## 本分支未包含的内容
+
+本分支暂不包含：
+
+- Compose UI 中直接调用 ABSDK。
+- 新增 Java Activity。
+- 新增 XML layout。
+- 从个人实验项目复制独立 Android 模块。
+- 完整登录/session 与设备 gateway 的联动。
+- 红外学习按键的持久化存储。
+
+这些内容建议在团队确认架构之后，作为后续 branch 或后续 commit 继续实现。
+
+## 预期提交范围
+
+本次提交范围应限制在：
+
+```text
+android/app/src/main/kotlin/com/flagship/abox/manager/ui/ABoxManagerApp.kt
+android/app/src/main/kotlin/com/flagship/abox/manager/ui/devicecontrol/
+docs/device-control-compose-ui-change-log.md
+```
+
+`settings.gradle.kts` 当前不属于本次设备控制 UI 功能提交范围，除非团队明确认为本地 toolchain resolver 配置也需要进入 PR。