SkillMap 技能图谱 v1.0 完成｜构建自己的成长路线图工具

今天是 SkillMap 项目的一个重要节点：技能图谱 SkillGraph 组件的 v1.0 开发已完成，整个系统已具备自用能力，可以开始正式录入技能数据，进行路径管理与可视化测试。

✅ 今日进展

• 🧠 SkillGraph 图谱组件开发完成

  • 使用 react-force-graph 构建技能可视化网络
  • 支持节点颜色分组、路径关联、点击详情、缩放复位
  • 节点样式响应主题自动适配，整体布局更加美观

• 🧩 界面与交互优化

  • 交互按钮优化为主题自适应样式
  • 引入玻璃拟态风格图例卡片，提升视觉质感
  • 支持响应式自适应、首次加载宽度修正

• 📁 页面结构重构

  • SkillGraph 已集成至 /skill-map 页面
  • 结构支持多种视图切换（卡片 / 列表 / 图谱）

🌟 当前成果概览

• 技能点关系图谱完整可视化（标签、上下游技能）
• 点击节点展开技能详情抽屉
• 支持多种技能状态（待学习 / 学习中 / 已掌握）
• 页面操作区支持缩放、居中、图例控制
• 支持暗黑 / 明亮模式切换，响应式布局良好
• 数据结构可支持路径规划、AI 建议、可追踪成长轨迹
• 节点与路径自定义结构（tags / parents / children / level）

📌 下一步计划

SkillMap v1 的图谱功能已经完成，接下来将围绕“提升可用性 → 支持他人使用 → 准备上线 MVP”三个阶段展开：

✅ 功能增强

• 拆分复杂组件，提升可维护性
• 技能卡片视图支持点击标签（Tag）快速筛选
• 技能路径支持排序优先级配置
• 支持技能点的手动录入与可视化编辑

✅ 技术架构升级

• 升级 React 版本，提升语法兼容性和性能
• 修复当前运行时报错、构建警告等问题
• 集成前端异常监控（如 Sentry）

✅ 面向上线的准备

• 实现用户登录系统（基于 JWT 或第三方登录）
• 将本地 JSON 数据迁移至数据库（考虑 Supabase / SQLite / Prisma）
• 实现中英文语言切换
• 独立部署至自有服务器与独立域名
• 配置 Google Analytics、前端追踪与使用数据分析

✍️ 个人反思

SkillMap 从一开始的「技能记录小工具」，逐渐演化为一个更系统化的“成长路径管理系统”。

开发过程使我意识到：技能的掌握过程其实就是构建有向图的过程。每一个技能点都不是孤立的，它连接着上游输入与下游应用，而 SkillMap 作为可视化工具，是帮助我不断“看见路径”的镜子。

接下来我将专注于打磨核心功能、真实录入正式数据，并尝试向更多开发者开放使用。

🧠 技能图谱，不只是「我会什么」，更是「我将成为谁」。

👉 点此体验 SkillMap v1