Clean Home Panel产品系统

自己使用 ESP32/ESPHome 搭建了智能家居硬件（灯光控制、传感器采集、开关联动），后端跑 Home Assistant 做自动化和设备管理。但在日常使用中
Home Assistant 自带的 Lovelace 面板配置复杂，YAML 语法门槛高，默认界面偏向工程师操作台，家人不会用、手机端体验不够原生
Clean Home Panel 解决的就是"自建智能家居缺少一个干净的日常控制面板"这个需求。

连接与认证：
输入 Home Assistant 地址和长期访问令牌，WebSocket 直连
配置自动保存到浏览器本地，下次打开无需重新输入
内置 Demo 模式，不连 HA 也能体验完整交互
设备自动发现与分类：
连接后自动拉取 Home Assistant 全部实体
智能分类为：灯光、开关、传感器三个分组
显示设备名称、当前状态
灯光控制：
卡片式布局，右上角一键开关
点卡片进入详情面板：亮度滑动条 + 10 色预设快捷选色
RGB 颜色实时切换
开关控制：
卡片右上角拨动开关，瞬时响应
支持 switch、input_boolean、automation、script 等实体类型
传感器数据展示：
列表式展示温度、湿度、PM2.5、用电量等传感器数据
实时数值 + 单位，离线/未知状态标识
实时状态同步：
通过 HA WebSocket 事件订阅，设备状态变化即时刷新
多个设备同时操作不会丢状态
PWA 安装：
手机浏览器打开 → 添加到主屏幕 → 像原生 App 一样使用
独立窗口、无浏览器 UI、全屏体验

浏览器 (index.html + app.js)
│
│ WebSocket (wss://)
▼
Home Assistant Server
│
├── 认证 → 长期访问令牌
├── 获取实体列表 → get_states
├── 订阅状态变化 → subscribe_events (state_changed)
└── 设备控制 → call_service (light.turn_on / switch.turn_off ...)