【标签】学习工作
【标题】学习工作 | 知识星图 —— 建造一枚童话火箭，唤醒你的知识星球 
【正文】
══════════════ 1. Demo 简介 ══════════════
产品形态：AI 驱动的 Web 应用 —— 一个单文件 HTML，双击即可在浏览器中体验，零安装、零依赖。
视觉风格：《小王子》童话唯美风。温暖深蓝夜空、黄铜暖色火箭、灰蓝沉睡小行星、手绘金色虚线星座——所有视觉元素都围绕"童话星空叙事"统一设计。
面向用户：自学者、在校学生、终身学习者。
核心功能：
① 知识星域自动展开
输入"React"“Python”“产品设计”，自动展开为一颗颗知识小行星。每颗行星代表一个知识点，行星之间用金色虚线连接展示依赖关系。行星按学习层级自动排布（根节点在上、依赖节点在下），形成自然的星图布局。
② 童话火箭建造与发射仪式（核心体验）
点击行星 → 查看学习任务 → 勾选完成任务 → "建造火箭"按钮出现 →
金色星尘汇聚，火箭部件逐步组装（尾翼→机身→头部→舷窗）→ 建造完成，尾焰闪烁 →
点击"点火发射"→ 冲击波扩散，屏幕微震 → 火箭拖着金色星尘尾巴优雅升空 →
抵达行星 → 全屏暖白闪光 → 行星从灰蓝渐变为暖金，光芒绽放，开始呼吸脉动。
③ 三层名言情感系统（贯穿全流程）
· 火箭发射时：底部浮现经典名言（如"正是你为这颗星球花费的时间，才让它变得如此珍贵。“）
· 行星点亮时：Canvas 浮出迷你鼓励卡片（如"这颗星亮了 ✦”“坚持是最美的光”）
· 星座达成时：成就弹窗展示随机名言（7 句《小王子》& 圣埃克苏佩里经典，带去重）
④ 星座成型与成就加冕
全部行星点亮后 → 金色虚线依次"生长"连接 → 星座画框浮现 → 艺术字标题亮相 →
成就弹窗弹出（羊皮纸卡片 + 金色竖线装帧 + 名言）→ 可生成星座海报保存为 PNG
══════════════ 2. Demo 创作思路 ══════════════
灵感来源：仰望夜空时的一个念头——《小王子》说"如果你爱上了一朵生长在一颗星星上的花，那么夜间你看着天空就感到甜蜜"。如果把每个知识领域比作一片星域，每个知识点是一颗待点亮的星，学习就不再是一份待办清单，而是一场"点亮宇宙"的探索之旅。
想解决的问题：
- 知识零散难成体系 —— 东学一点西学一点，不知道自己究竟掌握了什么
- 学习缺乏持续动力 —— 没有即时反馈与成就感，容易半途而废
- 学完就忘无法可视化 —— 无法直观看到知识积累的轨迹与全貌
为什么做这个方向：用童话叙事替代冷冰冰的"打卡学习"，让每次学习完成都有一场小小的"发射仪式"。火箭不是冷硬的钢铁机器——它是黄铜暖色、圆润曲线、蜡烛火焰般摇曳的尾焰——像从旧绘本里飞出来的飞行器。
══════════════ 3. Demo 体验地址 ══════════════
knowledge-starmap-demo.zip (30.8 KB)
文件说明：单文件 HTML，约 4100 行，内嵌 CSS + JS，无任何外部资源依赖。双击即可在浏览器中打开体验。已测试桌面端（Chrome/Edge/Firefox）和移动端响应式布局。
══════════════ 4. TRAE 实践过程 ══════════════
整个 Demo 分 6 个阶段，通过 TRAE Work 逐阶段开发：
【Phase 1】温暖夜空 + 童话画布框架
- 小王子暖色调配色系统（9 个 CSS 变量）
- Canvas 星空画布：250+ 星点（80% 圆形 + 20% 四角星 ✦），缓慢漂移 + 明暗闪烁
- 顶部导航栏 + 左侧羊皮纸质感侧边栏 + 底部状态栏
938301501488884:e48d8cf2487cdba1d95066a70a3c1c8c_6a4e6d506803cb6393581bfe.6a4e6d506803cb6393581c01.6a4e6d506803cb6393581bff:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 23:31:28)
【Phase 2】知识星域数据 + 小行星交互
- 三套完整知识星域：React（9 颗行星）、Python 数据分析（8 颗）、产品设计（7 颗）
- 小行星 Canvas 渲染：灰蓝球体 + 径向渐变体积感 + 迷你星环 + 标签
- 鼠标 hover 放大 + 金色光晕、click 选中虚线环、依赖虚线连线
- 自动层级布局算法
938301501488884:da6b4b03f7d3452f32043fb1148e31e1_6a4e6ec36803cb6393581c42.6a4e6ec36803cb6393581c45.6a4e6ec36803cb6393581c43:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/8 23:37:39)
【Phase 3】学习任务面板 - 24 个知识点 × 2-3 个任务 = 60+ 个预设任务
- 圆形复选框弹跳动画、完成状态绿色 + 删除线
- 全部完成后行星闪烁金色光点 + "建造火箭"按钮出现
938301501488884:ccb917389f5f721c1a37485037ea4515_6a4f0e0f6803cb6393581c6c.6a4f0e0f6803cb6393581c6f.6a4f0e0f6803cb6393581c6d:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 10:57:19)
【Phase 4】童话火箭动画（代码量最大的一个阶段） - drawRocket() 绘制函数：黄铜渐变机身 + 圆润弧顶 + 弧形尾翼 + 三层渐变尾焰 + 舷窗内发光
- 建造动画：25 个金色星尘粒子贝塞尔曲线汇聚 → 部件逐步实体化 → 浮动 + 尾焰闪烁
- 发射动画：冲击波光环 → 升空（cubic-bezier 缓出）→ 12 点星尘拖尾 → 全屏暖白闪光 → 15 个迸发粒子
- 音效：Web Audio API 实现建造"叮"、点火"呼"、抵达"共鸣音"
- 名言浮现 + 跳过按钮 + 动画队列管理
938301501488884:a5bbe2b5cd0b442d4e57530364cefa56_6a4f1ee96803cb6393581cdd.6a4f1ee96803cb6393581ce0.6a4f1ee96803cb6393581cde:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 12:09:13)
【Phase 5】行星点亮 + 星座连线 + 成就弹窗 - 行星点亮过渡：颜色 lerp 插值（灰蓝→暖金）+ 十字星芒 + 呼吸脉动
- 迷你鼓励卡片：Canvas 浮出羊皮纸圆角卡片，10 句随机鼓励语，2.5 秒淡出
- 星座连线：每条线按依赖层级依次"生长"（0→全长），虚线 + 金色半透明
- 成就弹窗：DOM 弹窗（CSS scale 弹入）+ 7 句名言随机不重复 + 海报生成
938301501488884:2ab8927058287565b6a8cf8c883d95fb_6a4f27046803cb6393581e1c.6a4f27046803cb6393581e1f.6a4f27046803cb6393581e1d:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 12:43:48)
【Phase 6】收尾打磨 - 首次引导页：快捷按钮 + 自定义输入 + 降级提示
- 进度条、侧边栏折叠、移动端底部抽屉面板
- localStorage 持久化 + 自动恢复（含已点亮行星的呼吸动画和星座状态恢复）
- 未点亮行星偶尔随机闪烁微弱紫光（“它们在做梦”）
- 页面元信息 + favicon + footer
938301501488884:494d7bf5df70375de7cf099543876ddf_6a4f2c086803cb6393581f2f.6a4f30b06803cb6393582055.6a4f30b06803cb6393582053:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/9 13:25:04)
══════════════ 5. 社区报名帖链接 ══════════════