把话费流量使用情况搬进 Home Assistant，一个漂亮的卡片搞定

> 把你的话费、流量、语音使用情况搬进 Home Assistant，一个漂亮的卡片全部搞定。

---

## 📱 写在前面

你是否有过这样的困扰：

-**月底流量告急**，却不知道还剩多少

-**话费突然欠费**，措手不及

-**套餐周期** 用到哪天，完全没概念

作为一个 Home Assistant 重度用户，我一直想把手机套餐信息整合进我的智能家居面板。市面上有各种炫酷的卡片——温湿度、股票、天气——但偏偏没有一个专门展示手机话费和套餐的。

于是，我自己做了一个。

---

## ✨ 效果预览

**浅色主题（默认）**

## 🚀 核心特性

### 🎯 1. 实时数据同步

支持绑定 Home Assistant 传感器，**每次数据更新，卡片自动刷新**。配合自动化定时抓取，随时掌握最新套餐状态。

### 🎨 2. 灵活的主题适配

-**默认浅色主题**，在各类仪表板中都清晰可读

-**支持深色主题**，一键切换

-**6 项颜色自定义**，背景、文字、强调色全部可调

### 📊 3. 进度条可视化

每个数据项都有对应的进度条：

- 📊 剩余流量 / 已用流量

- 📞 剩余语音 / 已用语音

- 💵 已用话费

- 📅 套餐周期进度

一眼看清用量，告别月底措手不及。

### 📱 4. 响应式布局

自动适配不同屏幕尺寸，移动端和桌面端都好看。

### 🔌 5. 多种数据来源

-**直接配置**：写死数值，简洁明了

-**传感器绑定**：实时更新，数据鲜活

-**混合模式**：部分固定，部分动态

---

## 📦 安装方式

### 方式一：HACS 安装（推荐 ✅）

```

HACS → 前端 → 添加自定义仓库 →

输入: https://github.com/j1617/phone-info-card →

类别选择 "Lovelace" → 安装

```

### 方式二：手动安装

1. 下载 `phone-info-card.js`

2. 放入 `/config/www/`

3. 在 `configuration.yaml` 注册资源：

```yaml

lovelace:

resources:

- url: /local/phone-info-card.js

type: module

```

4. 重启 Home Assistant

---

## ⚡ 快速上手

### 基础配置（固定数值）

```yaml

type: custom:phone-info-card

operator: 中国联通

phone_number: 176****8888

balance: '711.99'

data_remaining: '20.29'

data_used: '2.07'

voice_remaining: '92'

voice_used: '8'

cost_used: '43.22'

cycle_day: 28

cycle_total: 30

```

### 传感器配置（实时更新）✅ 推荐

```yaml

type: custom:phone-info-card

operator: 中国联通

phone_number: 176****8888

balance_entity: sensor.176sheng_yu_hua_fei

data_remaining_entity: sensor.176sheng_yu_liu_liang

data_used_entity: sensor.176yi_yong_liu_liang

voice_remaining_entity: sensor.176sheng_yu_yu_yin

voice_used_entity: sensor.176yi_yong_yu_yin

cost_used_entity: sensor.176yi_yong_hua_fei

cycle_day: 28

cycle_total: 30

```

### 深色主题配置

```yaml

type: custom:phone-info-card

operator: 中国联通

phone_number: 176****8888

balance_entity: sensor.176sheng_yu_hua_fei

background_color: '#1a1f2e'

text_color: '#f1f5f9'

secondary_color: '#94a3b8'

accent_color: '#06b6d4'

card_background: '#232b3a'

```

---

> 💡 **提示**：如果你有更好的数据来源方案，欢迎在 GitHub 提 Issue 或 PR！

---

## 🛠 完整配置参数

### 数据类

| 参数 | 类型 | 说明 |

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

| `operator` | string | 运营商名称 |

| `phone_number` | string | 手机号（脱敏显示） |

| `balance` | string | 剩余话费（元） |

| `balance_entity` | string | 剩余话费传感器 |

| `data_remaining` | string | 剩余流量（GB） |

| `data_remaining_entity` | string | 剩余流量传感器 |

| `data_used` | string | 已用流量（GB） |

| `voice_remaining` | string | 剩余语音（分钟） |

| `voice_used` | string | 已用语音（分钟） |

| `cost_used` | string | 已用话费（元） |

| `cycle_day` | number | 套餐已用天数 |

| `cycle_total` | number | 套餐总天数 |

### 样式类

| 参数 | 默认值 | 说明 |

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

| `background_color` | #ffffff | 主背景色 |

| `text_color` | #1e293b | 文字颜色 |

| `secondary_color` | #64748b | 次要文字 |

| `accent_color` | #3b82f6 | 强调色 |

| `card_background` | #f8fafc | 卡片背景 |

| `header_background` | 渐变 | 顶部渐变 |

---

## 📄 项目信息

-**GitHub**: https://github.com/j1617/phone-info-card

-**版本**: v1.1.0

-**许可证**: MIT

-**支持**: HACS

---

## 🙏 写在最后

这个卡片起源于我自己「让生活更优雅」的小需求。如果你觉得有用，欢迎：

- ⭐ **Star** 项目

- 🍴 **Fork** 二次开发

- 🐛 提 **Issue** 反馈问题

- 📝 贡献 **代码** 一起完善

如果你有更好的想法（比如支持多卡号、流量预警通知等），非常欢迎交流！

---

**让 Home Assistant 更懂你的生活，从一个话费卡片开始。** 🎉

---

*Last updated: 2026-04-29*