0. 先和大家打个招呼
我是谁： 一个做文旅规划设计十几年的文旅人，对 AI 很感兴趣，觉得 AI 能实现我很多创意想法
我是怎么用 TRAE 把 Demo 做出来的：
说实话，我不懂代码。但有一个画面在我脑子里转了很久——我想看见代码"长"出来的样子，不是一堆文件列表，而是像一棵树一样，有根有枝有叶，哪里枯了哪里开花了一眼就知道。
当我把这个想法讲给 TRAE 听的时候，我说的不是技术术语，而是比喻："你想象一下三星堆那棵青铜神树，树上有鸟，有龙盘着，有花苞——这些每个都对应代码里的一个东西。"TRAE 没有觉得我在说胡话，它真的理解了：鸟=触发器，龙=异常监控，花苞=还没实现的接口。
最让我觉得"原来这么简单"的一步是：我只需要描述"扫描完了应该出现红色的故障，然后可以选一个去修，修完再扫一遍，全绿了就算通过"——TRAE 就把整个状态机写出来了。5000+ 行代码，120+ 个函数，我一个不懂代码的人，靠一句句描述和 TRAE 的多轮对话，从零做出来了。
它帮我跨过的最大的坎是：一个零依赖的单文件 HTML，包含 Canvas 全屏渲染、6 套动画系统、2 套状态机——这种复杂度放以前，不懂代码的人根本不可能碰。但 TRAE 让我做到了。
1. Demo 简介
是什么： 一个零依赖的 HTML 单文件交互式面板，以三星堆青铜神树为视觉原型，把 AI 编程项目的「生长过程」和「质量状态」可视化。代码项目从一维文字变成一棵看得见的树——哪里通了、哪里堵了、哪里有隐患，一眼就能看出来。
面向两种人：
| 用户 | 核心需求 | 对应模式 |
|---|---|---|
| 刚用 AI 编程的小白 | 想看懂代码是怎么一步步搭起来的，有个"监理"盯着每一步质量 |  搭建模式 |
| 接手屎山代码的人 | 想快速摸清项目结构、问题分布、严重程度、先修哪个 |  探伤模式 |
核心功能：
| 功能 | 说明 |
|---|---|
| 搭建模式 · 生长可视化 |
代码从底向上逐层"生长"，底座→配置→数据→服务→接口→出口，生长顺序=程序执行顺序 |
 盘龙监理 · 全程监控 |
龙盘在主干上，颜色随健康度实时变化：绿=正常，红=故障，像老监理盯着全局 |
| 探伤模式 · 屎山体检 |
18种常见屎山问题，按致命/高危/中低分级，自动定位问题源和影响范围 |
 节点详情卡 |
点击节点看详情：状态、质量评分、问题列表、代码位置、修复建议 |
 演示模式 · 自动循环 |
没人操作时自动演示"生长→故障→修复→复查→全绿"全周期 |
 调试模式 · 交互验证 |
动鼠标唤醒交互，手动注入/修复故障，验证各种边界情况 |
 视角控制 |
滚轮缩放（0.3-2.5倍）、右键拖动平移、双击重置视角（CAD风格操作） |
产品截图：
（此处上传 3 张截图：搭建模式全景、搭建模式故障状态、探伤模式故障检测）
2. Demo 创作思路
灵感来源： 代码逻辑从来都是树状的——函数调用是枝，模块依赖是根。但所有工具都把它拍平成一维文字。我在思考用什么来呈现项目结构时，恰巧看到了三星堆出土的青铜神树——那棵三千多年前的青铜树上站着九只铜鸟，树干上盘绕着铜龙，底座稳固、枝干分层。一瞬间就对上了：青铜神树上的鸟 = 触发器/事件钩子，盘龙 = 异常监控，花苞 = 预留接口，底座 = 运行环境，每一层枝干 = 分层架构。
中国古代神话中「扶桑树」是太阳升起的地方，金乌栖息其上，这与「程序从构建到触发」的生命周期完美对应。三星堆青铜神树给了视觉原型，扶桑神话给了概念命名，两者合起来就是「扶桑树」这个产品。
想解决的问题：
- AI 编程小白的痛点：AI 啪啦啪啦生成一堆文件，你不知道它在干嘛、对不对、为什么跑不起来。得有个东西陪着你，一步一步看着代码"长"出来，每一步都检查质量——就像有个监理在旁边。
- 接手屎山代码的痛点：拿到一个老项目，几千个文件，不知道从哪看起、哪里坑最多、先改哪里性价比最高。得有个东西帮你"扫一遍"，把结构画出来，把问题标红，告诉你轻重缓急。
为什么做这个方向： 现在 AI 写代码的工具越来越多，但「看懂代码」的工具几乎没有。所有人都在解决"怎么写得更快"，没人解决"怎么看得更懂"。扶桑树不抢 AI 的饭碗，它是 AI 的"显示器"——把看不见的代码逻辑，变成看得见的一棵树。
3. Demo 体验地址
在线体验（推荐）： https://fusang-tree.pages.dev
体验指南：
-
搭建模式：进入页面默认就是搭建模式，自动播放。看神树怎么从底座开始，一层一层往上长，盘龙当监理盯着——哪层出问题了龙会变红，修好了又变绿。
-
探伤模式：点右上角「 探伤」进入，树会全绿显示。等 2 秒不动鼠标会自动演示扫描过程；动一下鼠标就进入交互状态，可以点节点手动注入故障、修复故障，体验完整的"发现问题→定位问题→解决问题→复查通过"流程。
-
视角操作：滚轮缩放、右键拖动平移、双击画布空白处重置视角。
4. TRAE 实践过程
作为一个不懂代码的文旅规划设计师，整个项目完全用 TRAE 对话式开发完成。5000+ 行代码、Canvas 渲染引擎、6 套动画系统、2 套状态机——靠一句句描述和多轮对话从零做出来。
关键开发步骤：
步骤 1：从"青铜神树"的比喻开始
- 用大白话向 TRAE 描述创意：“想象三星堆青铜神树，鸟=触发器，龙=监控，花苞=没实现的功能”
- TRAE 听懂了这个比喻，生成了第一版概念页和 8 类神话意象→工程概念的映射体系
- Session ID：
6a44e128d257084362b30742
步骤 2：搭建模式 + 生长动画
- 描述"代码像树一样从底往上长，每层点亮有动画，盘龙跟着变色"
- TRAE 实现了 Canvas 渲染引擎、树状布局、逐层点亮状态机、盘龙动画系统
- Session ID：
6a45e2df4318ba2f31214a7a
步骤 3：探伤系统 + 18 种屎山代码问题
- 设计质量问题模型：14 种质量指标 + 18 种故障类型 + 互斥关系表
- 实现：动态评分、上游依赖传导、节点详情卡、全局体检面板
- Session ID：
6a45f2a34318ba2f31214cb1
步骤 4：模式隔离加固 + 双模式自动切换
- 描述"没人动就自动演示，一碰鼠标就切到可操作"
- 加固模式间状态隔离，确保演示和调试的数据不互相污染
- 修复了变量名错误导致的切换失效问题（nodes→tasks）
- Session ID：
6a4766fbe96972a1e800a846
步骤 5：视角控制 + 边界保护（v1.9.3）
- 实现 CAD 风格滚轮缩放（0.3-2.5倍）、右键拖动平移、双击重置
- 修复节点光圈脱钩、边界公式不对称、拖动光标闪烁等问题
步骤 6：模式锁定 + 闲置检测（v1.11.0）
- 手动点击模式按钮后永久锁定，闲置检测失效
- 模式切换时完整备份/恢复节点数据（含 errors 数组）
- 调试模式注入故障菜单默认展开，直接显示 18 种 bug 选项
- 节点右上角红色徽章实时显示当前 bug 数量
开发关键截图：
5. 报名帖链接
报名帖（已通过）：【学习工作】AI编程项目可视化面板——为二维代码做个可视化窗口
报名创意名称：AI 编程项目可视化面板 → 初赛 Demo 品牌命名：扶桑树
开发心得
本次开发最深的一个体会是：TRAE 的多轮对话 + 逐行对比能力 让一个复杂 Canvas 应用的逻辑复刻成为可能。index.html 包含 5000+ 行代码、120+ 函数、6 个绘制子系统、3 套状态机、9 种消息协议——这些全部在 TRAE 环境中从零创建，经过多轮「创建→对比→修复」迭代才达到完整度。
最关键的转折点是逐行对比阶段：表面看函数名都在，但深入对比后发现 50+ 处逻辑差异——getEffectiveStatus 缺失递归上游传导、getQualityScore 算法完全不同、盘龙系列简化为 2 个函数（源码 6 个）、鼠标事件缺少边界保护……这些差异单独看都不致命，但叠加起来会导致整个状态机行为偏离。TRAE 的子代理并行修复能力在这个阶段发挥了关键作用。
v1.11.0 的模式隔离加固是另一个重要里程碑：修复了变量名错误（nodes→tasks）导致的状态重置失效问题，实现了模式切换时的完整数据备份/恢复，确保演示模式循环不会污染调试模式的数据，反之亦然。手动模式锁定功能让用户可以自由探索而不必担心自动演示打断操作。
最后阶段实现的"视角控制"功能大大提升了体验：用户可以用熟悉的 CAD 风格操作（滚轮缩放、右键拖动）自由探索神树的各个细节，边界保护确保树始终在屏幕可见范围内。
设计体验说明
在视觉与交互层面，扶桑树做了以下设计：
| 设计维度 | 具体实现 |
|---|---|
| 视觉风格 | 暗色科技风（背景 #1A1A2E / 主色 #00D4FF / 紫色点缀），降低长时间使用疲劳感 |
| 布局 | Canvas 全屏渲染，树状结构从底向上生长，符合"从基础到顶点"的认知顺序；右上角模式按钮栏紧凑排列 |
| 色彩语义 | 绿=完成、红=阻塞、黄=进行中、紫=等待，色彩与状态一一对应，降低学习成本 |
| 状态映射 | 节点颜色实时反映项目状态，盘龙龙身颜色随项目健康度变化（绿=健康/红=故障），一眼感知全局 |
| 交互流畅度 | 三种模式间一键切换，扫描进度条实时更新（亮绿色 2px 细条，带发光效果），修复动画分三阶段提供明确反馈 |
| 视角控制 | 滚轮缩放 0.3-2.5 倍、右键拖动平移、双击重置，符合专业工具操作习惯 |
