开源的 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 的形式运行以获得完美体验。