【Code with SOLO】给热爱历史的儿子做了个中国历史万花筒
技术栈：TRAE SOLO · HTML5 + CSS3 + JavaScript · 纯前端零依赖
摘要
我是一个程序员爸爸，六年级的儿子对历史知识非常热爱——他能滔滔不绝地讲三国故事，能分清唐宋元明清的顺序，但他经常问我：“爸爸，李世民和魏征到底是什么关系？”“武则天是怎么当上皇帝的？”“秦始皇手下都有谁？”
每次他问这些问题，我都得翻半天资料才能给他一个系统的回答。市面上的历史 App 要么太浅（几张卡片翻完就没了），要么太学术（密密麻麻的文字孩子根本看不下去）。缺少一个能按"朝代→帝王→重臣"三级结构组织内容、并且用可视化方式展示的历史知识网站。
所以，我用 TRAE SOLO 从零搭建了 「历史万花筒」——一个覆盖中华上下五千年、十五个朝代、400+ 位帝王的交互式历史可视化网站。儿子可以像翻万花筒一样，点进任意朝代、任意帝王，看到他们的年号、故事、趣闻，以及与名臣的关系图谱。
从一句"爸爸我想看李世民的故事"到一个完整的可视化网站，只用了 SOLO 两个小时。
一、项目背景与痛点
1.1 一个真实的故事
我儿子今年六年级，是个不折不扣的"历史迷"。
他的书架上摆满了《上下五千年》《明朝那些事儿》《写给儿童的中国历史》，每天睡前都要翻几页。他能跟我聊玄武门之变的前因后果，能讲清楚赤壁之战的每一个细节，甚至能在同学面前科普"为什么说唐朝是中国最牛的朝代"。
但问题来了——他的知识是碎片化的。
他能讲李世民的故事，但说不清唐朝22位皇帝的传承顺序；他知道诸葛亮，但不了解蜀汉完整的君臣体系；他对某个朝代感兴趣时，找不到一个系统性的入口去深入了解。
更让我头疼的是，每次他想查某个历史人物，要么在搜索引擎里翻来翻去，要么在维基百科上看一堆干巴巴的文字——没有图片、没有关系图、没有时间线，一个11岁的孩子根本看不下去。
1.2 现有方案的不足
我帮他调研了一圈市面上的历史学习工具：
| 类型 | 代表产品 | 问题 |
|---|---|---|
| 历史App | 某些少儿历史App | 内容太浅，像翻卡片，看完就忘 |
| 百科类 | 百度百科/维基百科 | 文字密集，没有可视化，孩子看不下去 |
| 视频类 | B站历史视频 | 内容好但无法系统浏览，只能被动观看 |
| 书籍 | 各种历史读物 | 无法快速跳转、无法搜索、无法关联 |
核心痛点：缺少一个结构化 + 可视化 + 交互式的历史知识平台，让孩子能按照"朝代→帝王→重臣"的层级关系，直观地探索中华五千年历史。
1.3 为什么这件事值得做
2025年底，教育部发布了《中小学人工智能通识教育指南》和《"人工智能+教育"行动计划》，明确鼓励利用 AI 技术创新教育方式。
而历史教育，恰恰是最需要"结构化可视化"的学科之一——五千年的朝代更替、数百位帝王的传承关系、无数名臣将相的君臣羁绊，这些信息如果只靠文字阅读，效率极低。
如果能有一个网站，让孩子像逛博物馆一样浏览历史，像翻万花筒一样发现故事——这件事本身就很有价值。
二、产品核心功能
2.1 朝代目录：十五朝兴衰一览
打开网站，首先看到的是一个古典中国风的朝代目录页。
- 15 个朝代以卡片形式展示，每个卡片标注朝代名称、时间跨度、国祚年数、都城、开国君主
- 底部有一条历史年表，用比例条直观展示各朝代的存续时长（周朝790年最长，秦朝仅15年最短）
- 点击任意朝代卡片，即可进入该朝代的详情页
设计理念：让孩子一眼就能感受到"中华文明五千年"的厚重感，同时激发好奇心——“秦朝才15年？为什么这么短？”
2.2 帝王世系：时间线上的传承脉络
进入某个朝代后，展示的是该朝代所有帝王的时间线视图：
- 按在位时间排列，每位帝王标注庙号、姓名、年号、在位年限
- 支持按时期筛选（如唐朝分为"初唐/盛唐/中唐/晚唐"）
- 点击任意帝王，弹出详情模态框，展示完整的历史资料
以唐朝为例，22位皇帝从李渊到唐哀帝，传承关系一目了然。
2.3 万花筒视角：让历史"活"起来
这是整个网站最有创意的功能——万花筒视图。
- 选择一位帝王后，进入万花筒模式
- 以该帝王为中心，年号、趣闻、故事以万花筒式的几何图案展开
- 每个信息节点都可以点击查看详情
- 视觉效果融合了古典中国风与现代几何美学
为什么叫"万花筒"？ 因为历史就像万花筒——转一个角度，就是一段全新的故事。同一个李世民，从军事角度看是天策上将，从政治角度看是贞观之治的缔造者，从人性角度看是一个"魏征控"。万花筒让孩子从不同角度理解同一段历史。
2.4 君臣图谱：帝王与名臣的羁绊
这是我最满意的功能之一。
- 选择一位帝王后，以关系图谱的形式展示他与名臣的关系
- 帝王居中，名臣环绕，用连线标注关系类型（“首席谋臣”“心腹重臣”"次子·继承者"等）
- 每位名臣都有独立的故事介绍
比如选择唐太宗李世民，你会看到魏征（直臣）、房玄龄（宰相）、杜如晦（谋臣）、长孙无忌（国舅）等人的关系网络——这些名字从课本上跳下来，变成了一个个有血有肉的人物。
2.5 帝王详情：比课本更有趣的历史故事
每位帝王的详情页包含：
- 基本信息：姓名、庙号、谥号、生卒年、在位时间、陵墓
- 年号与含义：如"贞观"——政通人和，四海升平
- 历史故事：用孩子能读懂的语言讲述帝王的一生
- 趣味冷知识：如"李世民是个’魏征控’"、“李渊是被迫创业被迫退休的皇帝”
- AI 生成画像：部分帝王配有 AI 生成的肖像
三、实践过程（用 SOLO 的全过程）
3.1 我是怎么拆解任务的
作为一个程序员，我知道这个项目的核心挑战不是技术，而是内容——15个朝代、400+位帝王的历史资料，如果纯手工整理，可能需要几个月。
所以我把项目拆成了两条线并行推进：
技术线（SOLO 主导）：
- 搭建项目框架（HTML + CSS + JS）
- 实现朝代目录页和卡片布局
- 实现帝王时间线视图
- 实现万花筒可视化效果
- 实现君臣关系图谱
- 背景粒子动画和古典中国风 UI
内容线（我 + SOLO 协作）：
- 确定朝代列表和基础数据
- 整理各朝代帝王资料
- 撰写帝王故事和趣味冷知识
- 整理君臣关系数据
- AI 生成帝王画像
3.2 关键 Prompt 与 SOLO 协作过程
第一步：搭建古典中国风 UI 框架
“我要做一个中华历史可视化网站，风格是古典中国风。配色用朱红、金色、墨色、宣纸色。导航栏要有毛笔字的感觉。背景要有漂浮的粒子效果，颜色是金色和朱红色。首页是一个朝代目录，用卡片网格展示。”
SOLO 直接给出了完整的 HTML + CSS 框架，包括：
- 自定义 CSS 变量系统（
--red-imperial、--gold、--ink、--paper等） - Canvas 粒子背景动画
- 响应式卡片网格布局
- 古典中国风的印章元素和排版
第二步：实现朝代数据和目录
“帮我创建15个朝代的数据结构，包含：朝代ID、名称、全称、时间范围、国祚年数、代表色、简介、开国君主、都城、帝王数量、亮点、数据文件路径。然后用 JavaScript 动态渲染朝代卡片。”
SOLO 生成了完整的数据文件和渲染逻辑。
第三步：帝王时间线
“进入朝代详情页后，展示该朝代所有帝王的时间线。按在位时间排列，每位帝王显示庙号、姓名、年号、在位年限。支持按时期筛选（如初唐/盛唐/中唐/晚唐）。点击帝王弹出详情模态框。”
第四步：万花筒效果
“做一个万花筒视图。用户选择一位帝王后，以万花筒的形式展示他的年号、故事、趣闻。用 CSS 动画实现旋转和对称效果。风格要融合古典中国风和现代几何美学。”
第五步：君臣关系图谱
“实现一个君臣关系图谱。帝王在中心，名臣环绕四周，用 SVG 连线标注关系类型。每位名臣有头像和简介。支持选择不同帝王查看不同的关系网络。”
3.3 踩过的坑
坑1：内容量太大
15个朝代400+位帝王的数据，纯手工整理根本不现实。我的解决方案是让 SOLO 先生成唐朝（22位皇帝）的完整数据作为模板，包括故事、趣闻、君臣关系，然后我基于这个模板逐步补充其他朝代。
坑2：万花筒效果的平衡
一开始万花筒效果太炫，反而影响了信息阅读。后来和儿子一起调试，找到了"视觉吸引力"和"信息可读性"的平衡点。
坑3：字体加载
中文字体文件很大（思源宋体 20MB+），首次加载很慢。通过 font-display: swap 和按需加载解决了这个问题。
坑4：移动端适配
儿子经常用平板看，所以必须做好移动端适配。SOLO 帮我做了完整的响应式设计。
四、成果展示
4.1 网站概览
项目名称：历史万花筒 · 中华上下五千年
技术栈：纯前端（HTML5 + CSS3 + JavaScript），零后端依赖
数据规模：
- 15 个朝代
- 400+ 位帝王
- 500+ 位历史名臣
- 5000 年文明史
4.2 核心页面展示
朝代目录页：
- 古典中国风 Hero 区域，带有"万花筒"印章和统计数字（15个朝代 / 400+位帝王 / 5000年文明）
- 朝代卡片网格，每张卡片展示朝代核心信息
- 历史年表比例条，直观展示各朝代存续时长
朝代详情页（以唐朝为例）：
- 帝王世系时间线，22位皇帝一目了然
- 万花筒视图，以几何图案展示帝王故事
- 君臣图谱，SVG 连线展示帝王与名臣关系
帝王详情模态框：
- 完整的帝王档案（姓名、庙号、年号、生卒年、陵墓）
- 孩子能读懂的历史故事
- 趣味冷知识（“李世民是个魏征控”）
- AI 生成画像
4.3 数据结构设计
朝代 (Dynasty)
├── 基础信息（名称、时间、都城、开国君主）
├── 帝王列表 (Emperors[])
│ ├── 基本信息（姓名、庙号、谥号、在位时间）
│ ├── 年号 (EraNames[])
│ ├── 历史故事 (Story)
│ ├── 趣味冷知识 (FunFact)
│ └── 君臣关系 (Ministers[])
│ ├── 姓名、头衔
│ ├── 关系类型
│ └── 个人故事
└── 时期划分 (Periods)
4.4 技术亮点
| 技术点 | 实现方式 |
|---|---|
| 古典中国风 UI | CSS 变量系统 + 思源宋体 + 印章元素 |
| 粒子背景 | Canvas 2D，金色/朱红色粒子漂浮 |
| 朝代目录 | 动态卡片渲染 + 比例条年表 |
| 帝王时间线 | 按时期分组 + 筛选器 |
| 万花筒视图 | CSS 动画 + 几何对称布局 |
| 君臣图谱 | SVG 连线 + 节点布局 |
| 响应式设计 | 完整移动端适配 |
| 性能优化 | 字体按需加载 + 数据懒加载 |
五、效果与总结
5.1 对孩子的改变
项目做完那天晚上，我让儿子试用了一下。
他的反应是——“哇，原来唐朝有22个皇帝！” 然后他开始一个一个点进去看，从李渊看到唐哀帝，中间不停地跟我分享：“爸爸你知道吗，李渊是被自己儿子逼退位的！”“武则天居然改了国号！”“这个皇帝只当了1年！”
那天晚上，他主动探索了整整两个小时，中间没有看一次手机。
作为一个爸爸，那一刻的感受是——这比逼他看任何历史书都有效。
5.2 效率对比
| 工作内容 | 传统方式 | 用 SOLO | 效率提升 |
|---|---|---|---|
| 项目框架搭建 | 1-2天 | 30分钟 | 30-50倍 |
| UI 设计与实现 | 2-3天 | 2小时 | 10-15倍 |
| 朝代数据整理 | 1-2周（持续） | 3-4天 | 3-5倍 |
| 万花筒效果 | 1-2天 | 1小时 | 15-20倍 |
| 君臣图谱 | 1天 | 1小时 | 8-10倍 |
| 总计 | 2-3周 | 3-4天 | 5-10倍 |
5.3 核心价值
对孩子：
- 从"碎片化知识"到"系统性理解"——通过朝代→帝王→重臣的层级结构，建立完整的历史知识框架
- 从"被动阅读"到"主动探索"——可视化交互让孩子像逛博物馆一样发现历史
- 从"记不住"到"忘不了"——趣味冷知识和故事化叙述，让历史人物变得鲜活
对家长：
- 零门槛使用——纯前端网站，打开浏览器即可体验
- 内容可靠——基于正史资料整理，适合作为课外补充
- 持续更新——数据结构清晰，可以不断补充新的朝代和人物
对教育：
- 可视化：时间线、关系图谱、万花筒，让抽象的历史变得直观
- 结构化：三级知识体系（朝代→帝王→重臣），符合认知规律
- 趣味性：万花筒视角和趣味冷知识，激发孩子的探索欲
5.4 用 SOLO 的感受
作为一个程序员，我本来可以自己写这个项目。但说实话，如果不是 SOLO，这个项目大概率会停留在"想法"阶段——下班后还要花几周写代码、调样式、整理数据，现实不允许。
SOLO 最大的价值不是"帮我写了代码"，而是把"想法"到"可用产品"的距离从几周压缩到了几天。我只需要把需求说清楚，把审美方向定好，剩下的实现细节 SOLO 都能搞定。
尤其是古典中国风的 UI 设计，如果让我自己从零搭，光是调配色、字体、间距就要花一整天。但 SOLO 一次就给出了让我满意的设计系统。
六、后续计划
- 补充更多朝代的详细数据：目前唐朝的数据最完整（22位皇帝），其他朝代还在逐步补充
- 增加搜索功能：支持按帝王姓名、年号、事件关键词搜索
- 增加朝代对比功能：选择两个朝代，对比疆域、人口、文化成就等
- 增加历史事件时间线：在帝王时间线基础上，增加重大历史事件的标注
- 适配更多设备：优化平板和手机端的交互体验
- 开源发布：希望更多家长和孩子能使用，也欢迎社区贡献内容
七、写在最后
做这个项目的初衷很简单——儿子喜欢历史，我想帮他找到一个更好的方式去了解历史。
在这个过程中，SOLO 不仅仅是一个编程工具，更像是我和儿子之间的桥梁。他负责提需求（“爸爸，我想看秦始皇的手下都有谁”），我负责用 SOLO 把需求变成现实。
有一天儿子跟我说：“爸爸，你能不能把明朝也做出来？我想看看朱元璋的故事。”
我说：“好，今晚就做。”
那一刻，我觉得这就是 AI 给普通家庭带来的最好的东西——不是替代，而是赋能。它让一个爸爸有能力在一天之内，把孩子的每一个好奇心都变成一个可以触摸的现实。
项目技术栈：HTML5 + CSS3 + JavaScript（纯前端，零依赖）
开发工具：TRAE SOLO
内容规模：15个朝代 · 400+位帝王 · 500+位名臣 · 5000年文明
更欢迎大家提出意见，持续完善！
（他真的对历史很感兴趣）