开源的 teslamate 项目非常不错，但是手机上用 grafana 看板不太好看，而且太割裂了，太多分类了，每次都要找半天。AI 时代，想要什么自己做就完事。于是有了这个项目，除了预设的几套主题，还支持自己上传背景图片，这样我那几十万张壁纸就有用武之地了。
github： https://github.com/DeaglePC/TeslamateCyberUI
可以直接在这里体验 demo： https://tsl.deaglepc.cn/
功能特性
🚗 车辆状态监控
- 实时状态 - 电池电量、续航里程、车辆位置、当前状态
- 车型图片 - 自动根据车型和外观颜色显示 Tesla 官方配置器图片
- 翻转卡片 - 点击查看详细信息（ VIN 、型号、颜色、软件版本）
- 位置地图 - 显示车辆当前位置和地址
- 充电状态 - 实时显示充电电压、功率
📊 数据统计
- 概览统计 - 总里程、能效统计、温度信息
- SOC 历史 - 电池电量变化曲线，支持自定义日期范围
- 活动时间线 - 可视化显示行驶、充电、在线、离线状态时间线
⚡ 充电管理
- 充电记录列表 - 所有充电历史，支持筛选和排序
- 充电详情 - 充电曲线图表（电量、功率）、充电时长、能量统计
- 费用计算 - 显示充电费用（如 TeslaMate 已配置）
- 位置信息 - 充电位置地图
🛣️ 驾驶记录
- 驾驶记录列表 - 所有驾驶历史，支持筛选和排序
- 驾驶详情 - 速度/功率曲线、驾驶时长、能耗统计
- 轨迹地图 - 支持高德地图和 OpenStreetMap 两种地图源
- 中国坐标纠偏 - 高德地图自动处理 GCJ-02 坐标偏移
🎨 个性化设置
- 5 套主题配色 - 赛博朋克、特斯拉、暗夜、科技蓝、极光
- 自动主题色 - 从背景图片提取主色调自动生成主题
- 自定义背景 - 上传、裁剪、更换背景图片
- 卡片透明度 - 自由调整卡片透明度
- 多语言 - 支持中文/英文切换
- 单位切换 - 公制/英制单位切换
🔧 系统设置
- 地图源切换 - 高德地图（中国推荐）/ OpenStreetMap
- API 连接配置 - 配置后端地址和 API Key
- 高德地图 Key - 配置高德地图 API Key
- 背景图片管理 - 上传、裁剪、删除背景图片
📱 PWA （渐进式 Web 应用）支持
本面板已完整支持 PWA ，提供媲美原生 App 的沉浸式体验：
- 秒开体验 - 支持核心资源的本地离线缓存
- 桌面/主屏幕安装 - 在桌面系统（ Chrome/Edge ）或移动端（ iOS/Android 主屏幕）可一键“安装到设备”
- 原生沉浸感 - 隐藏浏览器状态栏与导航条，在 iOS 下呈现全屏无边框的赛博朋克深邃体验
💡 最佳实践：建议不要在浏览器内直接高频使用。请在你的手机浏览器（如 Safari ）底部点击“分享” -> “添加到主屏幕”，或在电脑端浏览器的地址栏右侧点击“安装应用”图标，将其以独立 App 的形式运行以获得完美体验。