abox-mgr/docs/device-control-compose-ui-change-log.md

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:

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 继续实现。

预期提交范围

本次提交范围应限制在：

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。