【标签】 学习工作
【标题】【学习工作】+ PDJ富文本思维导图（支持AI根据给定主题自动生成思维导图）
【正文】
0. 先和大家打个招呼吧 
-
你是谁： 编程爱好者
-
你是怎么用 TRAE 把 Demo 做出来的： 花了10个小时完成了思维导图的雏形，然后又花了两周不断完善，从一个20KB的文件写到了500KB。我给家里的宝宝写过一个免费的学习套装，第一个功能 英语复读机 是纯手写，写了半年多。第二、三个功能一生词表和错题本是靠豆包，已经方便很多了。第四个功能 思维导图(在错题本中)完全用TRAE写，基本不用绞尽脑汁了，速度更是飞快。用TRAE编程关键是要写好提示词。比如修bug，你要先描述问题，越清晰越准确越好，然后让TRAE帮你找出原因，并给出最优的最小更改的修复。
-
我很喜欢编程，可大学学的国际贸易，和编程完全无关。那时只考过C语言二级计算机证书。面对对象编程也学过一些，但完全没有实战机会。直到后来我想在家里搭一个NAS网盘，发现了git上的filebrowser项目，感觉很好用，可也有一些bug。我就试着学搭建开发环境，修改bug，编译好后提交，折腾了两三年成了filebrowser前5的代码贡献者。然后就开始给家里的宝宝写辅助学习的工具(因为现有的都不能完全满足需求)。期间，AI编程兴起了，最初是在百度上搜索时发现第一个AI回答准确率很高。然后发现了豆包回答得更精准，后来又发现了TRAE，现在几乎已经能将一个普通人瞬间变成顶尖开发者了。时代变化太快了，人人都是开发者。
1. Demo 简介
-
是什么：web应用，单一html文件(做成这种形式主要是为了方便用户利用TRAE自行修改功能和样式，修改后不用编译就能使用)；
-
面向谁：大中小学生，上班族；
-
主要功能：1. 富文本思维导图，导图中的节点内容、节点注释、笔记、概要都是一个个小网页，可用图文并茂的形式呈现，还可插入音频，视频，表格等。2. 支持给定主题或内容调用AI自动生成导图。3.自带测试功能，提高了思维导图复习效率。4. 方便用户使用TRAE修改任何功能、样式、配色等。
-
页面展示1：可用标签对节点分类，选中标签，将高亮此标签的所有节点。
-
页面展示2：给定主题或文章利用ai一键生成思维导图
结果：
-
页面展示3：测试功能
-
页面展示4：富文本编辑器，可实现文字环绕。点击播放音视频。
-
功能说明：
-
操作指南：
2. Demo 创作思路
-
灵感来源：我给家里的宝宝们做过一个学习软件套装，包括英语复读机，一生词表，错题本。发现错题本里如果有思维导图功能就更好了，可以把思维导图的节点与错题本里的题目建立链接，学习效果更好。这次我是纯粹用TRAE来做的，写了一个单独的App.vue文件，10个小时就做出来雏形了，然后参考市面上的各类思维导图软件，不断完善功能。两周后基本完工。
-
想解决的问题：很多年前使用思维导图时，我就对每个节点只能输入简单的文字很不满意，我想插入图片，甚至音频视频，可是做不到。现在这些软件虽然改进了很多，但图片和文字都是分离的，因为它们从底层(如XML)就不支持富文本。另外，ai兴起后，可自动生成思维导图，效果很不错。
-
为什么做这个方向：思维导图使用者很多，市场上这类软件也众多。既然AI编程出现了，完全可以出现一款完全免费的，支持富文本的，有测验功能的，带朗读的，带AI功能的，可由用户随意修改的思维导图软件。
3. Demo 体验地址（三选一）
-
pdj富文本思维导图单行版.zip (231.8 KB)
4. TRAE 实践过程
-
我的整个项目都是用TRAE写的，主要用的是Vue2，改成的单独的html文件也是成品，拥有全部功能。(改成单一的Html文件需要替换掉vue中的所有第三方库，TRAE真是顶级coder,毫不费力，尤其是纯js写的富文本编辑器，效果很满意，比第三方库实现的都好。)
开发过程主要是先尝试搭建出思维导图的基本雏形，包括节点的增删改查，用拖拽调整节点位置和画布位置，双击居中，节点的全部收起和展开，节点内容的编辑(先不用集成富文本编辑器)。这步花了10个小时就完成了，主要是TRAE厉害，不过也用尽了4个账号的当日额度。
之后就是参考市面上的思维导图软件不断完善功能，基本已做全了，包括每个节点注释，节点附件，节点标签，节点收藏，笔记，概要，关联线，大纲模式。
然后是开发独特又实用的功能，包括节点(含子节点)的克隆，内容搜索(全文搜索，包括标签，收藏状态等)，利用AI根据给定主题和内容生成导图(因为是明文，无法提供内置api key，需要用户自己申请)，节点朗读(调用系统tts)，测试功能(流程是先在思维导图中把要背诵的内容用**包裹起来，用v-html渲染成填空形式，点击后可显示答案，再利用这些填空内容生成测试页面，包括艾宾浩斯复习曲线，填空题，选择题。每道题都加了掌握程度等级)。
最后就是美化页面，修bug。
-
附开发关键步骤截图（不少于 3 张）；
这是做富文本编辑器的，用纯js写的，不加载第三方库，以保证最终能生成单独的html文件。
给富媒体编辑器加上表格功能：因为要提交为单html文件，无法调用第三方库，就让TRAE手搓了一个富媒体编辑器。每项功能都要自己调。
适配手机触屏操作。
解决难题：鼠标在v-html上时不能滚动，TRAE分析得一针见血。之前曾折腾了很久都没搞定，原因是提示词不清晰，问题描述不明确。
添加布局模式：
-
附关键任务对话的 Session ID（不少于 3 个），用于证明作品由 TRAE 开发完成。
244531751832867:9e3d1031901709281031a49868aa1018_6a395704f962eca8ab2a514d.6a395704f962eca8ab2a5150.6a395704f962eca8ab2a514e:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/22 23:38:44)2144487970448707:8004e99aa19f38411a24d5c2a5408082_6a3bc35095ebff162351cc61.6a3bc35095ebff162351cc64.6a3bc35095ebff162351cc62:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/6/24 19:45:20)
.244531751832867:c787e2798cccb5a09be1901de3bb4a01_6a4ca0fc48cd3891ce472237.6a4cbd0d48cd3891ce472677.6a4cbd0d8ec33dfc2e5e234f:Trae CN.T(2026/7/7 16:47:09)
244531751832867:1ab6d7d75c3c725ab4823d4580e1946a_6a4cf31ff4a73a246df2a64f.6a4cf320f4a73a246df2a652.6a4cf31ff4a73a246df2a650:TRAE Work CN.0.1.30.no_sid.no_ppe.T(2026/7/7 20:37:52)
.244531751832867:e18d93a92cbc71bc9393287a747b1783_6a4b0b6b4383dbfad9b9f52b.6a4b0da44383dbfad9b9f52d.6a4b0da351474a51e0f8d406:Trae CN.T(2026/7/6 10:06:28)
5. 对应的报名审核通过的帖子链接