独立产品七年Java转全栈后的"不务正业"：把B站小约翰可汗的500+视频做成了结构化知识库，求各位大佬指点！

各位电鸭的大佬们好！👋

我是hresh，坐标武汉，七年Java开发经验，目前正在向全栈独立开发者转型。想和大家分享一个用AI辅助开发的"不务正业"项目——通辽宇宙知识库。

📊 项目数据概览

• 47个奇葩小国完整地图标注和详情页面

• 114位硬核狠人人物库，支持多维度筛选

• 180个视频内容结构化整理

• 500+条通辽国粹梗文化收录

• 600+历史头像演变史记录

• 1400+条签名考古资料

🎯 项目背景

作为小约翰可汗的老粉，我发现他的历史科普内容非常优质，但分散在180+个视频中，很难系统性学习和查找。于是萌生了一个想法：能否将这些视频内容结构化整理，做成可交互的知识平台？

🛠️ 技术实现

前端架构：

• Vue 3 + Vite + TailwindCSS：选择了我最熟悉的技术栈

• 数据可视化：Chart.js + ECharts + D3.js组合拳

• 地图功能：Leaflet + 热力图插件实现地理信息展示

• 状态管理：Pinia替代Vuex，体验更现代化

后端架构：

• Express + Node.js：轻量级API服务

• 数据处理：Python脚本进行视频内容提取和结构化

开发过程：

• 全程使用Cursor + Claude进行AI辅助开发

• 从UI设计到组件代码，再到API设计，AI给予了很多帮助

• 数据采集和清洗也完全依赖AI进行内容提取

🔍 核心功能亮点

🗺️ 可视化知识展示

将视频中的历史内容通过地图和图表进行可视化展示。用户可以在世界地图上探索奇葩小国分布，通过人物地图了解历史人物的地理关联。

🔍 智能检索系统

支持按类型、地区、时代等多维度筛选，还有全文搜索功能。比如搜索"间谍"，能快速找到相关的硬核狠人；搜索"革命"，能筛选出对应的小国故事。

🎮 趣味互动工具

开发了"通辽单位换算器"，可以将任意面积转换为通辽单位进行对比，既有教育价值又充满趣味性。

---

📱 全平台适配

实现了完美的响应式设计，支持深色模式，在移动端体验同样流畅。

💡 技术难点与解决方案

1. 大量数据的前端性能优化：使用虚拟滚动、懒加载和代码分割

2. 地图数据可视化：集成多个图表库，实现热力图和聚类显示

3. 响应式适配：TailwindCSS的断点系统配合Vue3的组合式API

4. SEO优化：预渲染和结构化数据支持搜索引擎抓取

项目地址：https://www.tongliaouniverse.cn

希望能得到电鸭社区各位大佬的指点，无论是技术架构、AI开发最佳实践，还是独立开发者的成长路径，都非常欢迎交流！🙏

也欢迎对历史或者AI开发感兴趣的朋友体验一下，期待您的反馈！