Hass-Panel
English | 简体中文
一个基于React的智能家居控制面板，它使用Home Assistant的Websocket API，并支持作为Home Assistant操作系统(HAOS)的插件部署。
视频预览
预览图
主要特性
- 响应式设计，支持移动端和桌面端
- 高度可配置，自由拖拽布局
- PWA支持，可安装到桌面
- 美观的用户界面，支持暗色模式
- 丰富的设备支持:
- 灯光控制
- 空调控制
- 窗帘控制
- 传感器监控
- 摄像头查看
- 场景控制
- 更多设备支持中...
安装部署
Docker方式 正式版
docker run \
--name hass-panel \
--restart unless-stopped \
-p 5123:5123 \
-v ./data/:/config/hass-panel \
-e REACT_APP_HASS_URL=http://your-hass-instance:8123 \
-e REACT_APP_HASS_TOKEN=your-hass-token \
-d \
ghcr.io/mrtian2016/hass-panel:latest
环境变量说明:
REACT_APP_HASS_URL: Home Assistant 实例地址REACT_APP_HASS_TOKEN: Home Assistant 长期访问令牌(可选)
Docker方式 测试版
docker run \
--name hass-panel \
--restart unless-stopped \
-p 5123:5123 \
-v ./data/:/config/hass-panel \
-e REACT_APP_HASS_URL=http://your-hass-instance:8123 \
-e REACT_APP_HASS_TOKEN=your-hass-token \
-d \
ghcr.io/mrtian2016/hass-panel:latest-beta
环境变量说明:
REACT_APP_HASS_URL: Home Assistant 实例地址REACT_APP_HASS_TOKEN: Home Assistant 长期访问令牌(可选)
Home Assistant Addon方式
或者手动添加：
- 在Home Assistant的侧边栏中，点击"配置" -> "加载项" -> "加载项商店"
- 点击右上角的三个点，选择"存储库"
- 添加存储库地址：
[url=https://github.com/mrtian2016/hass-panel]https://github.com/mrtian2016/hass-panel`[/url]
- 点击"添加"并刷新页面
- 在加载项商店中找到并安装"Hass Panel"
- 启动后即可在侧边栏访问
功能配置
支持的卡片类型
- 时间卡片 (TimeCard)
- 天气卡片 (WeatherCard)
- 灯光状态卡片 (LightStatusCard)
- 房间灯光概览卡片 (LightOverviewCard)
- 传感器卡片 (SensorCard)
- 媒体播放器卡片 (MediaPlayerCard)
- 窗帘控制卡片 (CurtainCard)
- 电量监控卡片 (ElectricityCard)
- 路由器监控卡片 (RouterCard)
- NAS监控卡片 (NASCard)
- 摄像头卡片 (CameraCard)
- 空调控制卡片 (ClimateCard)
- 人体传感器卡片 (MotionCard)
- 净水器卡片 (WaterPurifierCard)
- 光照传感器卡片 (IlluminanceCard)
- 快捷指令面板 (ScriptPanel)
卡片管理
- 支持显示/隐藏控制
- 支持拖拽排序
- 支持自定义大小(桌面端)
- 支持添加/编辑/删除卡片
- 支持自定义布局(3-5列)
- 支持响应式布局
开发
# 安装依赖
npm install
# 启动开发服务器
npm start
# 构建生产版本
npm run build
常见问题
-
配置不生效
-
设备显示离线
- 检查 Home Assistant 连接
- 验证实体 ID 是否存在
- 确认设备是否在线
-
图标不显示
| 
发表于 2025-2-12 15:39:24
