优雅监控家中所有电脑状态 — HA Computer Card 自定义卡片介绍

>适用人群：Home Assistant 用户、智能家居爱好者、有多台电脑需要监控的家庭

--

痛点：家里电脑多了，状态全靠猜？

家里有台式机、笔记本、NAS、服务器……

• 哪台开机了？哪台睡着了？

• IP 地址是多少来着？

• 这台电脑现在耗多少电？

• 想远程关机，但不知道是不是还开着……

装了 HA 之后，你可能已经用`switch`或`binary_sensor`把电脑的开关状态接入了，但原生实体显示在仪表盘上就是一行小字，**既不直观，也不美观**。

今天给大家推荐一款我开发的 HA Lovelace 自定义卡片 ——**Computer Card（电脑状态卡片）**，专门解决这个问题。

---

效果预览

装好之后，你的仪表盘里会出现这样一张卡片 👇

这个卡片黑色主题还是很好看的，支持**纵向列表**和**横向多列**两种布局，多台设备时自动排版，手机端自动变为单列。

---

核心功能

✅ 实时状态一目了然

• 每张卡片清晰显示电脑是「运行中」还是「已关机」

• 状态用颜色圆点 + 文字双重提示，远距离也能看清

🖥️ 设备图标自动匹配

支持多种设备类型，自动显示对应图标：

| 设备类型 | 图标 |

|---------|------|

| 台式机 desktop | 🖥️ |

| 笔记本 laptop | 💻 |

| 服务器 server | 🗄️ |

| NAS | 💽 |

| 平板 tablet | 📱 |

| 迷你主机 mini_pc | 📦 |

📋 IP / MAC 一键复制

IP 地址和 MAC 地址显示区域**支持点击复制**，排查网络问题时不用再手动敲地址。

>这个功能踩了不少坑 —— HA 的 iframe 环境对`navigator.clipboard`有限制，最终用 textarea fallback 方案解决，现已稳定可用 ✅

⚡ 总功率统计

所有配置了功率传感器的电脑，卡片头部会自动显示**合计功率**，一眼看清家里电脑的总耗电。

⚡ 用电明细（可选）

如果配置了功率/用电传感器，每张电脑卡片下方会显示：

• 实时功率（W）

• 今日用电（kWh）

• 本月用电（kWh）

📐 横向布局，多设备友好

多台电脑时，可以切换为横向 Grid 布局：

```yaml

type:custom:computer-card

title:家里电脑

display_mode:horizontal

columns:2

entities:

-name:主力台式机

switch_entity:switch.desktop_main

device_type:desktop

-name:工作笔记本

switch_entity:switch.laptop_work

device_type:laptop

-name:NAS

switch_entity:switch.nas

device_type:nas

```

四台设备时自动排成 2×2，非常紧凑好看。

---

安装方法

方式一：HACS（推荐）

1. 打开 **HACS → 前端**

2. 点击右下角 **「+」**

3. 选择 **「自定义仓库」**

4. 仓库地址填写：`https://github.com/j1617/computer-card`

5. 类别选择 **Lovelace**

6. 点击安装，刷新页面即可使用

方式二：手动安装

1. 将 `computer-card.js` 放到 HA 配置目录的 `www/` 下

2. 在 **设置 → 仪表盘 → 资源** 中添加：

3. ```

4. /local/computer-card.js

5. ```

6. 重启 HA

---

配置示例

技术细节（开发者视角）

• 使用 Shadow DOM 封装样式，不污染全局

• 兼容 HA 2024.x+ Grid 布局系统

• 自动适配 HA 深色/浅色主题（使用 CSS 变量）

• set hass() 做了数据变更检测，避免不必要的 DOM 重建（解决了悬停闪烁问题）

---

版本记录

| 版本 | 亮点 |

| v1.1.4 | 修复点击复制在 HA iframe 中不生效的问题 |

| v1.1.3 | 修复 IP/MAC 悬停闪烁 |

| v1.1.2 | 修复 Shadow DOM onclick 报错 |

| v1.1.1 | 新增总功率统计 + IP/MAC 点击复制 |

| v1.1.0 |`ip_entity`/`mac_entity`支持直接填值 |

| v1.0.0 | 首次发布 |

---

获取方式

• 🐙 GitHub：https://github.com/j1617/computer-card

如果觉得好用，欢迎在 GitHub 上点个 ⭐ Star！

有问题欢迎在评论区留言～

---

❓问题：留下一个抢答题，电脑在线状态实体如何实现？

想用 HomeAssistant 一键查看全网设备在线状态？超简单！无需复杂配置，依靠 HA 自带插件就能轻松实现，零基础也能快速上手～

还不会搭建局域网设备在线状态监测的朋友，评论区留言交流！留言热度够高，下期直接出完整版实操教程，手把手教你玩转这款实用插件，轻松掌控家里所有联网设备状态✨