Hass-Panel：一个有手就会用的 Homeassistant 开源面板 | 现已支持 23 种卡片类型

大家好，我是 mMartin。之前曾在 V2EX 分享过 Hass-Panel 的开发历程，很多朋友对这个项目表示了浓厚的兴趣。今天我想向大家介绍 Hass-Panel 的最新进展和功能更新。

🎉 感谢社区支持！项目已收获 421 个 Star ，继续为智能家居爱好者提供更好的体验！

AI 驱动的开发过程

Hass-Panel 项目的 95% 代码都是在 Cursor 的协助下完成的。作为基于 AI 的编程工具，Cursor 极大地加速了开发进程，从卡片组件到状态管理，都能快速生成高质量代码，并为不熟悉的技术栈提供专业指导。

然而，随着项目规模扩大，也发现了一些局限性：项目代码量增长后，AI 对整体结构理解有限；处理复杂依赖关系时，上下文理解不完整；深度优化仍需开发者专业知识；文件数量增加导致上下文窗口限制。

为应对这些挑战，我采用项目模块化策略，让 AI 专注处理独立功能单元。这种方式不仅提高效率，也让我能专注于产品设计和用户体验，而非陷入繁琐的代码细节。对个人开发者而言，AI 辅助编程确实是改变游戏规则的利器。

项目回顾与进展

Hass-Panel 是一个基于 React 开发的 Home Assistant 控制面板，从最初的想法到现在已经发展成为一个功能丰富、易于使用的智能家居控制中心。感谢社区的反馈和建议，项目现在已经：

• 支持 23 种不同类型的卡片，覆盖几乎所有常见智能家居设备
• 完善了多用户管理系统，支持 JWT 认证
• 优化了摄像头支持，现在支持 WebRTC/ONVIF/RTSP 多种协议
• 改进了响应式设计，在手机和桌面端都有出色表现

核心优势

与市面上其他 Home Assistant 面板相比，Hass-Panel 的独特之处在于：

• 🚀 极简部署：一行 Docker 命令或通过 HAOS 插件一键安装
• 🎨 精美设计：毛玻璃效果卡片、主题色滚动条、优雅的暗色模式
• 🔧 零代码配置：所有设置都可以通过 UI 完成，无需编写 YAML 或 JSON
• 📱 全平台适配：PWA 支持，可安装到手机桌面，随时访问

新增卡片类型

最近几个版本中，新增了多种实用卡片：

• PVE 监控卡片：实时监控 Proxmox 虚拟环境
• 服务器监控卡片：CPU 、内存、磁盘使用率一目了然
• 通用实体卡片：支持自定义配置和分组显示，适用于任何 HA 实体
• 每日一言卡片：为你的智能家居面板增添一丝文艺气息
• 净水器卡片：监控滤芯寿命和水质状态

安装方式

Docker 方式（推荐）

docker run \
  --name hass-panel \
  --restart unless-stopped \
  --network host \
  -v ./data/:/config/hass-panel \
  -d \
  ghcr.io/mrtian2016/hass-panel:latest

安装完成后直接打开机器的 5123 端口即可使用。

Home Assistant 插件方式

1. 在 Home Assistant 的侧边栏中，点击"配置" -> "加载项" -> "加载项商店"
2. 点击右上角的三个点，选择"存储库"
3. 添加存储库地址：https://github.com/mrtian2016/hass-panel
4. 点击"添加"并刷新页面
5. 在加载项商店中找到并安装"Hass Panel"
6. 启动后即可在侧边栏访问

用户反馈与改进

根据反馈：

• 优化了移动端的触控体验
• 改进了卡片的加载性能
• 增强了系统的稳定性
• 简化了初始化配置流程

未来规划

接下来的计划：

• 支持更多类型的智能设备
• 提供更丰富的自定义主题选项
• 开发更多数据可视化组件
• 增强与其他系统的集成能力

开源与合作

Hass-Panel 是一个开源项目（ AGPL-3.0 许可证），目前已收获 421 个 Star。项目欢迎各种形式的贡献：

• 提交 Issue 报告问题或提出建议
• 贡献代码改进现有功能
• 帮助完善文档和使用指南
• 分享你使用 Hass-Panel 的经验和创意

如果你觉得这个项目对你有帮助，请在 GitHub 上给项目点个 ⭐️ Star ，帮助我达到下一个里程碑！谢谢各位大佬！

相关链接

• GitHub 仓库
• 项目官网
• 使用文档

如果你有任何问题或建议，欢迎在评论区留言讨论。