欢迎加入开源鸿蒙PC社区：
atomgit仓库地址： https://atomgit.com/m0_66062719/dianchibaoyang
一、项目概述与设计理念
1.1 应用背景
笔记本电脑电池是用户日常使用中非常关注的硬件组件，电池健康直接影响设备的使用体验和续航能力。一个专业的电池监测工具可以帮助用户：
┌─────────────────────────────────────────────────────┐
│ │
│ 用户需求分析 │
│ ├─ 实时了解当前电量和充电状态 │
│ ├─ 掌握电池健康度和剩余寿命 │
│ ├─ 了解历史使用习惯和充电模式 │
│ ├─ 智能提醒避免低电量关机 │
│ └─ 导出数据进行进一步分析 │
│ │
└─────────────────────────────────────────────────────┘1.2 技术架构选型
| 技术方案 | 优势 | 适用场景 |
|---|---|---|
| HTML5/CSS3 | 开发效率高，跨平台能力强 | 桌面应用界面 |
| JavaScript ES6+ | 现代语法特性，异步处理能力强 | 业务逻辑实现 |
| Electron | 原生系统集成，支持系统API | 桌面应用运行时 |
| localStorage | 简单易用，本地存储 | 设置和数据持久化 |
1.3 功能模块划分
┌─────────────────────────────────────────────────────┐
│ 功能模块架构 │
├─────────────────────────────────────────────────────┤
│ 🔋 实时监测 | 📊 技术信息 | 📈 历史统计 │
├─────────────────────────────────────────────────────┤
│ 🔔 智能提醒 | 💾 数据管理 | │
└─────────────────────────────────────────────────────┘二、核心代码实现详解
2.1 电池状态管理
电池状态是应用的核心数据，需要实时更新和同步：
javascript
// 电池数据结构
let batteryData = {
level: 100, // 当前电量百分比
charging: true, // 是否正在充电
chargingTime: 0, // 已充电时间
dischargingTime: 0, // 已放电时间
voltage: 12.6, // 当前电压
temperature: 30 // 当前温度
};
let hasShownFullAlert = false; // 防止满电提醒持续触发数据结构设计说明：
batteryData 对象包含六个核心字段：
├── level: 0-100 的整数，表示电量百分比
├── charging: 布尔值，true表示充电中，false表示放电中
├── chargingTime: 累计充电时间（秒）
├── dischargingTime: 累计放电时间（秒）
├── voltage: 当前电压值（伏特）
└── temperature: 当前温度（摄氏度）2.2 电池状态更新逻辑
实时更新电池状态并同步到UI：
javascript
function updateBatteryStatus() {
// 更新主显示电量
document.getElementById('batteryLevel').textContent = batteryData.level + '%';
// 更新电池填充条
const batteryFill = document.getElementById('batteryFill');
batteryFill.style.height = batteryData.level + '%';
// 根据电量设置颜色
batteryFill.classList.remove('warning', 'danger');
if (batteryData.level <= 20) {
batteryFill.classList.add('danger');
} else if (batteryData.level <= 40) {
batteryFill.classList.add('warning');
}
// 更新状态文本
const statusText = document.getElementById('batteryStatus');
if (batteryData.charging) {
if (batteryData.level >= 100) {
statusText.textContent = '✅ 已充满';
statusText.style.color = '#10b981';
} else {
statusText.textContent = '⚡ 正在充电';
statusText.style.color = '#10b981';
}
} else if (batteryData.level <= 20) {
statusText.textContent = '⚠️ 电量低，请连接充电器';
statusText.style.color = '#ef4444';
} else {
statusText.textContent = '🔋 使用中';
statusText.style.color = '#64748b';
}
// 更新剩余时间和技术信息
updateRemainingTime();
updateTechInfo();
checkAlerts();
}状态颜色映射：
电量范围 | 颜色类别 | 视觉效果
---------|---------|---------
0-20% | danger | 红色渐变（警告）
21-40% | warning | 橙色渐变（注意）
41-100% | normal | 绿色渐变（正常）2.3 剩余时间估算算法
根据当前电量和状态估算剩余时间：
javascript
function updateRemainingTime() {
const timeText = document.getElementById('batteryTime');
if (batteryData.charging) {
if (batteryData.level >= 100) {
// 已满电状态
timeText.textContent = '已充满！';
} else {
// 充电中：估算充满时间
const timeToFull = Math.round((100 - batteryData.level) * 2.5);
const hours = Math.floor(timeToFull / 60);
const mins = timeToFull % 60;
timeText.textContent = `充满约需：${hours}小时${mins}分钟`;
}
} else {
// 放电中：估算剩余可用时间
const timeToEmpty = Math.round(batteryData.level * 6);
const hours = Math.floor(timeToEmpty / 60);
const mins = timeToEmpty % 60;
timeText.textContent = `剩余可用：${hours}小时${mins}分钟`;
}
}时间估算公式：
充电时间（分钟）= (100 - 当前电量) × 2.5
放电时间（分钟）= 当前电量 × 6
示例：
当前电量 70%，充电中：
timeToFull = (100 - 70) × 2.5 = 75分钟 = 1小时15分钟
当前电量 50%，放电中：
timeToEmpty = 50 × 6 = 300分钟 = 5小时2.4 智能提醒系统
多条件触发的智能提醒机制：
javascript
function checkAlerts() {
// 低电量提醒
if (appSettings.lowBatteryAlert && batteryData.level <= appSettings.lowBatteryLevel && !batteryData.charging) {
showNotification('warning', `电量低！当前电量：${Math.round(batteryData.level)}%`);
}
// 充满提醒（只触发一次）
if (appSettings.fullBatteryAlert && batteryData.level >= 100 && batteryData.charging && !hasShownFullAlert) {
showNotification('success', '电池已充满！可以断开充电器了。');
hasShownFullAlert = true;
}
// 重置提醒标志
if (batteryData.level < 100) {
hasShownFullAlert = false;
}
// 温度过高提醒
if (appSettings.tempAlert && batteryData.temperature >= appSettings.tempThreshold) {
showNotification('danger', `电池温度过高：${batteryData.temperature}°C，请冷却后使用。`);
}
}提醒机制流程图：
┌─────────────────────────────────────────────────────┐
│ 提醒检查流程 │
├─────────────────────────────────────────────────────┤
│ │
│ 检查低电量提醒 │
│ ├─ 设置启用 && 电量<=阈值 && 未充电 → 显示提醒 │
│ └─ 否则跳过 │
│ │
│ 检查满电提醒 │
│ ├─ 设置启用 && 电量>=100 && 充电中 && 未触发过 │
│ │ → 显示提醒 && 设置触发标志 │
│ └─ 否则跳过 │
│ │
│ 检查温度提醒 │
│ ├─ 设置启用 && 温度>=阈值 → 显示提醒 │
│ └─ 否则跳过 │
│ │
└─────────────────────────────────────────────────────┘三、模拟数据生成与更新
3.1 历史数据结构
javascript
const batteryHistoryData = {
today: [
{ time: '00:00', level: 95, charging: false },
{ time: '04:00', level: 92, charging: false },
{ time: '08:00', level: 88, charging: false },
{ time: '12:00', level: 75, charging: true },
{ time: '16:00', level: 100, charging: false },
{ time: '20:00', level: 80, charging: false },
{ time: '24:00', level: 65, charging: false }
],
week: [
{ date: '周一', avgLevel: 75, chargeCount: 2, usageTime: 6.5 },
{ date: '周二', avgLevel: 72, chargeCount: 1, usageTime: 7.2 },
// ... 更多数据
],
month: [
{ week: '第1周', avgLevel: 78, chargeCount: 14, usageTime: 45 },
// ... 更多数据
]
};3.2 模拟电池状态变化
为了演示效果，实现了模拟电池状态变化：
javascript
function simulateBattery() {
setInterval(() => {
if (!batteryData.charging) {
// 放电模式：缓慢减少电量
if (batteryData.level > 0) {
batteryData.level = Math.max(0, batteryData.level - Math.random() * 0.3);
}
} else {
// 充电模式：达到100%后保持稳定
if (batteryData.level < 100) {
batteryData.level = Math.min(100, batteryData.level + Math.random() * 0.5);
}
}
// 根据状态调整温度
if (batteryData.charging && batteryData.level >= 100) {
batteryData.temperature = Math.round(32 + Math.random() * 3);
} else if (batteryData.charging) {
batteryData.temperature = Math.round(31 + Math.random() * 4);
} else {
batteryData.temperature = Math.round(28 + Math.random() * 4);
}
// 根据状态调整电压
if (batteryData.charging && batteryData.level >= 100) {
batteryData.voltage = 12.4 + Math.random() * 0.3;
} else if (batteryData.charging) {
const baseVoltage = 11.0 + (batteryData.level / 100) * 1.2;
batteryData.voltage = baseVoltage + Math.random() * 0.3;
} else {
const baseVoltage = 11.5 + (batteryData.level / 100) * 0.8;
batteryData.voltage = baseVoltage + Math.random() * 0.3;
}
updateBatteryStatus();
}, 2000);
}模拟逻辑说明：
放电模式：
- 每2秒减少 0-0.3% 的电量
- 温度保持在 28-32°C
- 电压随电量下降而降低
充电模式：
- 每2秒增加 0-0.5% 的电量
- 达到100%后保持稳定
- 温度稍高（31-35°C）
- 电压随电量上升而升高，满电时约12.4-12.7V四、设置管理与持久化
4.1 设置数据结构
javascript
const defaultSettings = {
refreshInterval: 30, // 刷新间隔（秒）
lowBatteryAlert: true, // 低电量提醒
lowBatteryLevel: 20, // 低电量阈值（%）
fullBatteryAlert: true, // 充满提醒
tempAlert: true, // 温度提醒
tempThreshold: 42, // 温度阈值（°C）
healthAlert: false, // 健康度提醒
notificationSound: true, // 通知音效
startupShow: false, // 启动时显示
themeMode: 'light' // 主题模式
};4.2 设置加载与保存
javascript
function loadSettings() {
const saved = localStorage.getItem('batterySettings');
if (saved) {
appSettings = { ...defaultSettings, ...JSON.parse(saved) };
}
applySettingsToUI();
}
function saveSettings() {
appSettings.lowBatteryAlert = document.getElementById('lowBatteryAlert').checked;
appSettings.lowBatteryLevel = parseInt(document.getElementById('lowBatteryLevel').value);
// ... 其他设置
localStorage.setItem('batterySettings', JSON.stringify(appSettings));
showToast('设置已保存！');
}五、UI设计与交互体验
5.1 电池图标动画
css
.battery-body {
width: 100px;
height: 200px;
border: 4px solid #1e293b;
border-radius: 10px;
position: relative;
overflow: hidden;
background: #f0f0f0;
}
.battery-body::before {
content: '';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 12px;
background: #1e293b;
border-radius: 4px 4px 0 0;
}
.battery-fill {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0%;
background: linear-gradient(0deg, #10b981, #34d399);
transition: height 0.5s ease;
}
.battery-fill.warning {
background: linear-gradient(0deg, #f59e0b, #fbbf24);
}
.battery-fill.danger {
background: linear-gradient(0deg, #ef4444, #f87171);
}5.2 通知组件
javascript
function showNotification(type, message) {
const notification = document.getElementById('notification');
const icon = document.getElementById('notificationIcon');
const msg = document.getElementById('notificationMessage');
switch (type) {
case 'warning': icon.textContent = '⚠️'; break;
case 'success': icon.textContent = '✅'; break;
case 'danger': icon.textContent = '🚨'; break;
default: icon.textContent = 'ℹ️';
}
msg.textContent = message;
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 5000);
}六、技术亮点与创新
6.1 智能提醒机制
提醒触发条件：
┌─────────────────────────────────────────────────────┐
│ 低电量提醒：电量 <= 阈值(默认20%) 且 未充电 │
│ 充满提醒：电量 >= 100% 且 充电中 且 未触发过 │
│ 温度提醒：温度 >= 阈值(默认42°C) │
└─────────────────────────────────────────────────────┘
防止重复提醒：
┌─────────────────────────────────────────────────────┐
│ 使用 hasShownFullAlert 标志位 │
│ 满电时设置为 true，电量低于100%时重置为 false │
│ 确保每个充电周期只触发一次满电提醒 │
└─────────────────────────────────────────────────────┘6.2 状态模拟系统
模拟数据生成：
┌─────────────────────────────────────────────────────┐
│ 电量变化：根据充电状态增减 │
│ 温度变化：充电时稍高，放电时稍低 │
│ 电压变化：满电时最高，随电量下降而降低 │
└─────────────────────────────────────────────────────┘
交互测试：
┌─────────────────────────────────────────────────────┐
│ 双击电池区域可切换充电/放电模式 │
│ 便于演示不同状态下的界面变化 │
└─────────────────────────────────────────────────────┘七、总结与展望
7.1 项目成果
| 功能模块 | 状态 | 核心特性 |
|---|---|---|
| 实时监测 | ✅ | 电量显示、状态指示、时间估算 |
| 技术信息 | ✅ | 健康度、温度、电压、容量、循环次数 |
| 历史统计 | ✅ | 日/周/月统计图表 |
| 智能提醒 | ✅ | 低电量、充满、温度、健康度提醒 |
| 数据管理 | ✅ | 设置持久化、历史导出 |
7.2 未来规划
- 系统API集成：接入真实的系统电池API
- 更多统计维度：添加周/月电量趋势分析
- 电池健康报告：生成详细的电池健康分析报告
- 云端同步：支持多设备数据同步
- 电池保养建议：根据使用习惯提供保养建议
7.3 技术价值
电池电量检测工具展示了如何在鸿蒙PC平台上开发系统工具类应用，为开发者提供了以下参考：
- 实时状态管理：数据同步和UI更新机制
- 智能提醒系统：多条件触发和去重逻辑
- 模拟数据生成：用于演示的动态数据模拟
- 设置持久化：localStorage的实践应用
- 响应式设计：适配不同屏幕尺寸
通过本项目的实践，开发者可以快速掌握系统工具类应用开发的核心技术，为构建更多优秀应用奠定基础。