重构特斯拉数据看板：记 TeslamateCyberUI 的诞生与 AI 结对编程实践
对于喜欢掌握数据主权的特斯拉车主来说，TeslaMate 是一个几乎无法绕过的优秀开源项目。它默默运行在后台，将车辆的每一次行驶、每一次充电详实地记录在 PostgreSQL 数据库中。
然而，作为一名对 UI 和交互有一定强迫症的开发者，我在日常使用中始终面临一个痛点：TeslaMate 原生自带的 Grafana 数据面板虽然在数据分析上无比强大，但它的设计初衷并不是面向移动端和日常快速查阅的。在手机屏幕上缩放复杂的折线图，或者在千篇一律的仪表盘中寻找某个关键数据，体验并不优雅。
周末，我在 Mac 上打开终端，看着服务器里沉淀的海量车辆数据，决定自己动手写一个更具现代感、响应式且带有“赛博朋克”风格的前端面板。由此，TeslamateCyberUI 诞生了。
技术选型与项目架构
在这个项目中，我采用了经典的前后端分离架构，兼顾了运行效率和界面的动态表现：
- 后端 (Golang)： 作为中间层，Go 语言极其轻量且并发性能优异。后端主要负责连接现有的 TeslaMate PostgreSQL 数据库，进行数据的读取、聚合和格式化，并通过 RESTful API 提供给前端。
- 前端 (React)： 负责核心的视觉呈现。通过 React 的组件化特性，我构建了车辆状态仪盘、平滑的数据曲线以及时间线视图。（这里要注意告诉AI，不要重复造轮子，图表库用开源的
Apache EChats） - 部署 (Docker)： 为了让其他 TeslaMate 用户能够“零成本”接入，我整理了
docker-compose.yml，只需挂载现有的数据库网络即可一键运行。
AI 结对编程：从繁琐的“搬砖”中解放
我是后端开发，不太懂前端，本次的项目也是100%由AI完成的。
1. 明确需求，让AI生成需求文档
通过简单的描述告诉AI你想做什么，有一个初步的需求文档和设计图。
我这里使用的是Gemini3 Pro
"我想做一个应用，目标是把开源项目tesla-mate采集到的数据，重新做一个看板APP。这个看板APP要求是响应式布局，支持主题切换，图表库用apache echat。后端用go语言+gin框架。后端API支持api key鉴权。前端配置base url+api key来请求后端。先帮我写一个需求文档，再帮我设计UI"
然后把需求文档（markdown）和设计图（html文件）放到项目目录下，方便AI后续理解需求。
2. 用Cursor或者Antigravity实现
这一步就简单了，让AI根据你的需求文档去实现，大多数的IDE都会帮你拆解成一个一个的小任务（plan模式），然后帮你实现。我基本上就是一个测试者的角色，有什么问题告诉AI，让他解决。
3. 踩坑与破局：WGS84 到 GCJ02 的坐标偏移
项目中最大的一个技术挑战出现在轨迹地图的绘制阶段。
为了提供更好的国内地图体验，我在前端接入了高德地图 JS API。然而，当把数据库里的 GPS 坐标直接画在地图上时，我发现整条行车轨迹发生了几百米的偏移，有些路段甚至漂移到了河里或建筑物上。
作为开发者，我立刻意识到这是坐标系不匹配导致的——特斯拉车辆记录并在数据库中保存的是标准的国际 GPS 坐标系（WGS84），而高德地图在国内使用的是经过加密偏移的火星坐标系（GCJ02）。
我将这个具体的工程问题抛给了 AI：
"我在 React 前端使用高德地图 (AMap) 绘制特斯拉的行车轨迹。数据库传过来的是 WGS84 标准坐标数组
[{lat, lng}]。高德地图需要 GCJ02 坐标。请帮我写一个高性能的 JavaScript 转换工具类，实现 WGS84 到 GCJ02 的精确转换，并给出一个批量转换轨迹数组的示例。"
很快，AI 提供了一套完整的坐标转换算法（包含复杂的克拉索夫斯基椭球体参数和经纬度偏移数学公式）。
TeslamateCyberUI 的核心特性
经过打磨，这个面板已经完全取代了 Grafana，成为我日常高频使用的车况查看工具。基于项目的 README，它目前包含以下核心功能：
🚗 车辆状态监控
- 实时状态 - 电池电量、续航里程、车辆位置、当前状态
- 车型图片 - 自动根据车型和外观颜色显示 Tesla 官方配置器图片
- 翻转卡片 - 点击查看详细信息（VIN、型号、颜色、软件版本）
- 位置地图 - 显示车辆当前位置和地址
- 充电状态 - 实时显示充电电压、功率
📊 数据统计
- 概览统计 - 总里程、能效统计、温度信息
- SOC 历史 - 电池电量变化曲线，支持自定义日期范围
- 活动时间线 - 可视化显示行驶、充电、在线、离线状态时间线
⚡ 充电管理
- 充电记录列表 - 所有充电历史，支持筛选和排序
- 充电详情 - 充电曲线图表（电量、功率）、充电时长、能量统计
- 费用计算 - 显示充电费用（如 TeslaMate 已配置）
- 位置信息 - 充电位置地图
🛣️ 驾驶记录
- 驾驶记录列表 - 所有驾驶历史，支持筛选和排序
- 驾驶详情 - 速度/功率曲线、海拔变化、驾驶时长、能耗统计
- 胎压监测 - 实时显示四轮胎压数据
- 温度信息 - 车内外温度记录
- 轨迹地图 - 支持高德地图和 OpenStreetMap 两种地图源
- 中国坐标纠偏 - 高德地图自动处理 GCJ-02 坐标偏移
🎨 个性化设置
- 5套主题配色 - 赛博朋克、特斯拉、暗夜、科技蓝、极光
- 自动主题色 - 从背景图片提取主色调自动生成主题
- 自定义背景 - 上传、裁剪、更换背景图片
- 卡片透明度 - 自由调整卡片透明度
- 多语言 - 支持中文/英文切换
- 单位切换 - 公制/英制单位切换
🔧 系统设置
- 地图源切换 - 高德地图（中国推荐）/ OpenStreetMap
- API 连接配置 - 配置后端地址和 API Key
- 高德地图 Key - 配置高德地图 API Key
- 背景图片管理 - 上传、裁剪、删除背景图片
🐳 Docker 一键部署
- 多阶段构建 - 前后端独立构建，优化镜像体积
- 环境变量配置 - 所有配置通过环境变量注入，无需修改代码
- 健康检查 - 内置容器健康检查，确保服务可用
🧪 Mock 数据模式
- 无需数据库 - 无需连接 TeslaMate 即可运行完整 UI
- 开发调试 - 内置模拟数据，支持前端开发和 UI 预览
- 在线演示 - 用于 Demo 站点展示
开源与共建
目前，项目已经部署在我自己的域名 tsl.deaglepc.cn 上稳定运行。本着开源精神，我已经将完整代码托管至 GitHub。
这是一个演示用的网站，后端API返回的都是用于演示的假数据，你如果自己部署了后端，当然也可以连接你自己的后端地址
如果你也有一台运行着 TeslaMate 的服务器，只需配置好 .env，拉取镜像即可体验。它完全作为只读面板运行，不会对你现有的 TeslaMate 数据造成任何影响。
项目地址： github.com/DeaglePC/Te…
技术的乐趣在于折腾并解决实际问题。未来我还会考虑加入更多有趣的数据维度分析，如果你有好的想法，欢迎提交 PR 或 Issue。
