一个纯本地运行的模型购买记录管理工具,帮助你统计高达/拼装模型的购买支出、补款进度与月度开销。
| 技术 | 版本 | 用途 |
|---|---|---|
| Vite | ^5.3 | 构建工具 |
| Vue 3 | ^3.4 | 前端框架 |
| Element Plus | ^2.7 | UI 组件库 |
| Pinia | ^2.2 | 状态管理 |
| TypeScript | ^5.5 | 类型安全 |
| ECharts | ^5.5 | 图表可视化 |
| localforage | ^1.10 | IndexedDB 封装(图片存储) |
| xlsx | ^0.18 | Excel 导出 |
| VueUse | ^10.11 | 组合式工具函数 |
- 模型名称:必填
- 模型规格:SD / MGSD / EG / HG / RG / RE100 / FM / MG / MGEX / PG / 自定义(历史自定义规格自动复用)
- 购买渠道:淘宝 / pdd / jd / 自定义(历史渠道自动复用)
- 模型出处:选填,标签化存储,下次可选择(最长 100 字)
- 已支付金额:预购填定金,全款填全款金额
- 购买状态:预购 / 全款
- 全款价格 + 邮费:预购时填写,自动计算补款价格
补款 = 全款 + 邮费 - 已支付 - 支付日期:未填默认本地当前时间
- 补款日期:预购状态填写
- 水贴记录:选填,记录水贴名称/品牌/链接等
- 模型图片:选填,最多 5 张,IndexedDB 存储 + 智能压缩
- 列顺序:模型名称 / 图片 / 规格 / 购买渠道 / 购买状态 / 已支付 / 支付日期 / 补款价格 / 补款日期 / 水贴 / 出处 / 操作
- 图片缩略图点击预览大图
- 操作列:编辑 / 删除 / 已补款(一键转全款)
- 合计行:总价 + 待支付金额
- 时间筛选(第一行):购买年份 / 购买月份 / 补款年份 / 补款月份(购买与补款互斥)
- 属性筛选(第二行):购买状态 / 是否有水贴 / 模型规格 / 模型名称模糊搜索
- 合计行随筛选结果动态更新
- ECharts 柱状图,双系列(模型数量 + 金额)
- 联动时间筛选,动态切换统计维度:
- 购买时间筛选 → 模型数量 + 已支付总价
- 补款时间筛选 → 模型数量 + 补款总价
- 未筛选 → 模型数量 + 总价
- X 轴三级钻取:按年 → 按月 → 按日
- JSON 导入:支持追加导入 / 覆盖导入
- JSON 导出:完整备份数据
- Excel 导出:含合计行
- 明暗主题切换:首次跟随系统,手动切换后持久化
- 数据持久化:记录存 localStorage,图片存 IndexedDB
- 快速补款:一键将预购记录转为全款,自动更新已支付金额
- Node.js >= 18
- npm >= 9
# 安装依赖
npm install
# 开发模式
npm run dev
# 构建生产版本
npm run build
# 预览构建结果
npm run preview启动后访问 http://localhost:5173/
modeling-statistics/
├── src/
│ ├── types/index.ts # 类型定义
│ ├── utils/
│ │ ├── calculate.ts # 补款/统计计算
│ │ ├── date.ts # 日期工具
│ │ ├── image.ts # 图片压缩处理
│ │ └── storage.ts # IndexedDB 封装
│ ├── stores/records.ts # Pinia store + localStorage 持久化
│ ├── components/
│ │ ├── RecordForm.vue # 录入表单(含图片上传)
│ │ ├── RecordTable.vue # 表格(含缩略图、合计行、快速补款)
│ │ ├── FilterBar.vue # 筛选栏(时间+属性两行布局)
│ │ ├── StatSummary.vue # 统计卡片
│ │ ├── StatsChart.vue # ECharts 柱状图
│ │ ├── ImportButton.vue # JSON 导入
│ │ ├── ExportButton.vue # JSON/Excel 导出
│ │ └── ThemeToggle.vue # 明暗主题切换
│ ├── views/Home.vue # 主页面
│ ├── App.vue # 根组件
│ ├── main.ts # 入口
│ └── styles/main.css # 全局样式
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json
| 数据类型 | 存储位置 | 容量 |
|---|---|---|
| 购买记录 | localStorage | ~5MB(数千条记录) |
| 模型图片 | IndexedDB | 数百MB~数GB |
图片上传时会自动:
- Canvas 压缩(最大边 1600px,质量 0.65~0.85 分档)
- 生成缩略图(200px,≤10KB)
- 优先 webp 格式,不支持时降级 jpeg
- 原图存 Blob,缩略图存 base64
MIT