欢迎来到我的博客

距离 上次更新 又过了几天，这个海缆管理工具已经迭代到 v1.13.0。这一轮更新的主题是打磨细节——没有太多新功能，但在用户体验和代码质量上做了不少改进。 主要更新 💰 成本总览面板 (v1.11.0) Sales Order 表单里有各种成本卡片（Cable、Backhaul、Cross-Connect 等），之前填完只能靠脑算总成本。现在加了一个实时计算面板： ┌─────────────────────────────────────┐ │ 📊 Cost Totals Summary │ ├─────────────────────────────────────┤ │ Recurring (MRC): $2,500 /month │ │ One-time (NRC): $15,000 │ │ Amortized: $625 /month │ └─────────────────────────────────────┘ 设计细节： 面板跟随成本卡片的状态实时更新 支持 Toggle 选择器，可以快速开关成本类型 Amortized 值自动根据合同期限计算（NRC 分摊到每月） 为了这个功能，还重构了成本卡片的 UI 模式——原来的"Add Cost"按钮改成了Toggle 开关，更清晰地表达"这个成本项是否包含"的语义。 📱 浮动胶囊导航 (v1.12.0) 移动端的底部导航栏从全宽条形改成了浮动胶囊风格： Before: ┌─────────────────────────────────────┐ │ 🏠 📦 💰 👥 ⚙️ │ └─────────────────────────────────────┘ After: ╭───────────────────────╮ │ 🏠 📦 💰 👥 ⚙️ │ ╰───────────────────────╯ 这是参考了 iOS 17 和各种现代 App 的导航设计。关键实现细节： ...

又过了一天，这个"随手造的轮子"已经迭代到了 v1.10.0。从 v1.2 的架构重构 到现在，系统经历了从"能用"到"好用"再到"可靠"的蜕变。 主要更新 🔄 销售订单续约系统 (v1.4.0 - v1.9.0) 这是最实用的新功能。之前合同到期需要手动创建新订单、重新填写所有信息，现在一键续约就能搞定。 核心设计思路： ID 连续性：续约后保持原始订单号，便于历史追溯 商务灵活性：支持续约时调整价格（MRC/NRC），记录新旧价差 智能日期计算：自动计算新合同期限，支持自定义合同长度 ┌─────────────────────────────────────────┐ │ 📋 Renewal Workspace │ ├─────────────────────────────────────────┤ │ Current MRC: $3,000 → New MRC: [$___]│ │ Current NRC: $500 → New NRC: [$___]│ │ │ │ ▼ Cost Renewals (Optional) │ │ ┌─ Cable Cost ────────────────┐ │ │ │ MRC: $___ Annual O&M: $___| │ │ └─────────────────────────────┘ │ └─────────────────────────────────────────┘ v1.9.0 集成成本续约：续约时可以同步更新 Cable、Backhaul、Cross-Connect 等供应商成本，确保 P&L 全程准确。 ...

距离上一篇文章发布刚好三天，这个"随手造的轮子"又经历了一轮密集迭代。原本以为 v1.0 已经够用了，结果实际使用中发现：能跑和好用之间差距还挺大的。 这一轮更新了什么？ 🏢 CRM/SRM 集成 最大的变化是引入了客户和供应商管理。 之前销售订单里的客户名称是自由文本——想填什么填什么。问题很快就暴露了： 同一个客户，不同订单里名字不一样（“Telia” vs “Telia Carrier” vs “Telia Company”） 统计时根本没法聚合 供应商信息更是散落在各个成本卡片里 现在改成了关系型设计： 新增 Customers 和 Suppliers 表 销售订单、库存成本卡片里的客户/供应商字段，变成可搜索的下拉框 后台存储的是 UUID 外键，前端显示简称 这个改动涉及到 SQL migration、Store 层 CRUD、表单验证、UI 组件……工作量比想象的大不少。 📐 销售订单表单重新设计 原来的表单是简单的两栏布局，随着字段越来越多，变得又长又乱。这次做了一次嵌套式主从布局： ┌─────────────────────────────────────────────────────────────┐ │ Profitability │ Sales Info │ Cost Structure │ │ Analysis │ │ │ │ (Sticky) │──────────────┴──────────────────────────│ │ │ Order Notes (Full Width) │ └──────────────────┴─────────────────────────────────────────┘ 左侧边栏：利润分析卡片，设置为 position: sticky，滚动时始终可见 右侧主区域：销售信息 + 成本结构用 2 栏 grid，备注独占一行 移动端：自动堆叠成单列 sticky 元素在嵌套容器里的表现踩了不少坑，比如父容器 overflow 属性会影响 sticky 生效、flex 子项需要显式设置高度等。 ...

背景 做海缆销售的日常离不开 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？ ...

从 CCNA 到 CCNP ENCOR：新的征程 很高兴地宣布，我终于完成了 CCNA 的学习！回顾这段旅程，从最基础的 TCP/IP 协议栈到各种网络设备的工作原理，再到子网划分和路由协议，每一步都充满了挑战与乐趣。总计学习时长约 93 小时。虽然这只是网络世界的敲门砖，但它为我打开了一扇全新的大门，让我对网络技术有了系统性的认识。 然而，学习的脚步不能停歇。CCNA 让我看到了网络世界的广阔，也让我意识到还有更多更深层次的知识等待我去探索。因此，我决定向下一个目标迈进：CCNP Enterprise Core (ENCOR)。 CCNP ENCOR 作为思科高级企业网络解决方案的基石，涵盖了企业网络实施与操作的方方面面，包括： 企业网络架构 虚拟化技术 基础设施自动化 网络安全基础 双栈架构 (IPv4 和 IPv6) 这无疑将是一次更具深度和广度的学习挑战。我期待能够通过 ENCOR 的学习，进一步提升自己在网络设计、部署、故障排除和自动化方面的能力。 我将继续在这里记录我的学习过程、遇到的问题以及解决方案，希望能与所有对网络技术感兴趣的朋友们共同进步。 新的篇章，新的挑战，加油！