KennethCheng
33dfdc824c
把 Statistics 从占位 Empty 升级成真正的图表页,plan §9.4 落地: - echarts + vue-echarts,按需引入 CanvasRenderer / LineChart / BarChart + Grid / Tooltip / Legend / Title / DataZoom(全部 tree-shakable) - 四张图,每张独立 NCard,统一主题色 brand #18a058 1) 油价趋势(折线 + 面积)—— 每月 total_amount / total_liters 当月均价 2) 标准油耗趋势(折线)—— 每月在"连续两次 is_full"之间采样的均值 3) 月度费用(柱状)—— 每月加油 total_amount 之和 4) 每公里成本(折线)—— 同油耗采样算法 - 时间窗选择:近 3 月 / 6 月 / 12 月 / 全部(NSelect 顶栏) - 油耗 / 每公里成本采样逻辑与后端 pkg/decimal 严格对齐: * 列表按 refuel_time 升序遍历 * 只在"is_full 序列"内采样 * 半箱油记录自动跳过,不污染指标 - autoresize 适配移动端旋转 / 桌面窗口 - Loading / Empty / Error 状态完整;切车自动重拉 未做(留待后续): - DataZoom 区域缩放 —— 已在 echarts 引入但没启用,数据量大时再上 - 多车辆对比 —— 计划里没明确要求,先不上 - 油价对比基准线(同地区均值) —— 暂无数据源 验证: pnpm typecheck 0 errors pnpm build 18.1s(echarts 入了 4 个组件 + 1 个 renderer,bundle 略增)
38 lines
1000 B
JSON
38 lines
1000 B
JSON
{
|
|
"name": "fuellog-web",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"description": "FuelLog (加油记) frontend — Vue 3 + Vite + TS + Pinia + Naive UI",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vue-tsc --noEmit && vite build",
|
|
"preview": "vite preview --port 4173",
|
|
"typecheck": "vue-tsc --noEmit",
|
|
"lint": "eslint . --ext .vue,.ts,.tsx --max-warnings 0"
|
|
},
|
|
"dependencies": {
|
|
"axios": "^1.7.7",
|
|
"echarts": "^6.1.0",
|
|
"naive-ui": "^2.40.1",
|
|
"pinia": "^2.2.6",
|
|
"vfonts": "^0.0.3",
|
|
"vue": "^3.5.13",
|
|
"vue-echarts": "^8.3.0",
|
|
"vue-router": "^4.4.5"
|
|
},
|
|
"devDependencies": {
|
|
"@types/node": "^22.9.3",
|
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
"@vue/tsconfig": "^0.7.0",
|
|
"autoprefixer": "^10.4.20",
|
|
"postcss": "^8.4.49",
|
|
"tailwindcss": "^3.4.15",
|
|
"typescript": "~5.6.3",
|
|
"unplugin-auto-import": "^0.18.6",
|
|
"unplugin-vue-components": "^0.27.5",
|
|
"vite": "^5.4.11",
|
|
"vue-tsc": "^2.1.10"
|
|
}
|
|
}
|