背景
做海缆销售的日常离不开 Excel——资源容量、客户订单、收入成本、利润率……各种数据散落在不同的表格里。虽然 Excel 功能强大，但随着数据量增长，维护起来越来越力不从心：
- 容量被卖了多少、还剩多少，需要来回翻表核算
- 成本和收入分散在不同 Sheet，计算利润率容易出错
- 合同快到期了？得时不时翻一遍才知道
与其继续与 Excel 斗智斗勇，不如自己造个轮子。
系统概览
最终做出来的是一个单页应用 (SPA)，核心功能包括：
📊 Dashboard 仪表盘
- 总容量、总项目价值、活跃 MRR 一目了然
- 收入 vs 运营成本对比
- 即将到期的销售/资源预警
- 销售人员业绩排行榜
📦 Inventory 库存管理
- 按海缆系统分类管理资源
- 追踪容量利用率和占用状态（可用/已售/过期）
- 支持 Lease 和 IRU 两种模式的成本记录
💰 Sales 销售订单
- 完整的客户订单管理
- 自动计算真实月度成本（含 IRU 摊销和 O&M）
- 毛利率实时计算
- 销售与库存联动：卖出容量自动更新资源状态
🎨 其他特性
- 支持 Light/Dark 双主题
- 响应式设计，手机、平板、大屏都能用
- 数据存本地 LocalStorage，也支持 JSON 导出备份
技术选型
考虑到这是一个给自己和小团队用的工具，我选择了最简单直接的技术栈：
| 组件 | 选型 |
|---|---|
| 逻辑层 | Vanilla JavaScript (ES6+) |
| 样式 | Vanilla CSS3 |
| 图标 | Ionicons |
| 存储 | LocalStorage (MVP 阶段) |
| 部署 | GitHub Pages |
为什么选原生 JS 而不是 React/Vue？
- 需求明确，规模可控：功能就这些，用框架反而增加复杂度
- 零构建依赖：不需要 npm install 半小时，改完直接跑
- 学习成本低：未来谁接手都能看懂
- 表现够用：对于这个量级的应用，性能完全不是问题
一些有意思的点
利润计算引擎
不同销售模式的利润计算逻辑差异很大。比如 IRU Resale 需要区分首月利润率和后续月份利润率——因为首月可能有一次性费用（OTC）的影响。
为此专门抽象了一个统一的 P&L 计算引擎，根据销售类型自动适配不同的计算逻辑。
容量状态联动
销售订单和库存是联动的。新建订单时选择容量来源（Capacity Source），系统会自动校验可用容量，订单保存后库存状态实时更新。
这个逻辑看起来简单，但边界情况不少：订单草稿怎么算？同一段容量被多个订单引用怎么办？合同到期后如何自动释放容量？
响应式布局的取舍
移动端适配花了不少心思。在手机上采用底部导航栏 + 卡片式列表，而不是直接把桌面端缩小。毕竟用手机看表格的体验实在不好。
写在最后
这个小项目前后断断续续折腾了一个多月，从最初的"随便写写"到后来不断完善细节，收获比想象中多。
代码已开源 👉 GitHub: cable-inventory
在线演示 👉 https://legionc.github.io/cable-inventory/
如果你也有类似的需求，欢迎 fork 改造。有问题或建议也欢迎交流~