做了个赛博朋克风格的 teslamate UI

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