【类别】TRAE AI创造力大赛 - 初赛专区
【标签】学习工作
【标题】学习工作赛道 | 创赛项目交付管理系统 —— 从找文件的崩溃里长出来的工具
【正文】
1. Demo 简介
一句话介绍
创赛项目交付管理系统是一款专为"多项目、多版本、多交付"场景打造的轻量化材料管理与交付工具（Web端单页应用）。帮你把散落各处的文件管起来，把做过的工作清清楚楚地交付出去。
面向谁
-
同时参加好几个比赛的创赛学生团队（项目多、版本多、找文件找到崩溃）
-
带多个比赛项目的指导老师/辅导机构（要看进度、要留痕迹、要对工作量）
-
广告/设计/咨询等按项目交付的乙方从业者（改稿改到第N版，客户要第一版的时候能秒找）
-
任何被"文件版本混乱"困扰的人——只要你电脑里有"最终版_真的最终版_打死不改了.pptx"这种东西，你就是目标用户
核心功能
① 项目总览 — 所有项目一张看板 不管是同时参加3个比赛，还是同时对接5个客户，所有项目的进度、阶段、负责人、截止日期都在一张看板上。哪些快到期了、哪个卡壳了，一眼就能看到。
② 材料库 — 版本混乱终结者 按项目分类，按类型归档（计划书、PPT、路演稿、证明材料…），上传新版本自动保留历史。
-
再也不用"PPT_v1_v2_最终版_最终最终版.pptx"
-
客户/老师说"我觉得还是第一版好"的时候，你能3秒内找出来
-
每个版本都有记录，谁改了什么、什么时候改的，清清楚楚
③ 一键交付包 — 把工作量"可视化" 打比赛也好、做项目也罢，最尴尬的就是"干了很多活，但交付的时候看不出做了啥"。 一键生成交付包，自动按规范整理目录、命名文件，打开交付包就能看到：项目迭代了多少版、做了哪些工作、每一步的产出是什么。让你的工作量看得见，不再被低估。
④ 任务拆解 — 不打无准备的仗 把项目拆成一个个小任务，分配到人、设置截止时间。谁在做什么、什么快到期了，一清二楚。 不会再出现"临比赛前三天才发现还有个材料没人写"的翻车现场。
⑤ 角色权限 — 不同的人看不同的东西 超级管理员、项目负责人、普通成员三级权限。
-
队友只能看自己负责的项目
-
老师/老板能看到所有项目的进度和交付物
-
客户只能看到最终交付的内容 各司其职，互不干扰。
2. Demo 创作思路
灵感来源：一次找文件的崩溃
这个项目的灵感说起来有点好笑——来源于我实习时的一次"社死现场"。
那天leader突然过来问我：“去年那个XX项目的最终版方案你还有吗？客户要参考一下。”
我当时拍胸脯说：“有！我找找。”
然后我就开始了漫长的找文件之旅：
-
先翻自己的电脑，文件夹叫"XX项目"的有3个
-
每个里面都有十几个版本的方案
-
翻微信聊天记录，往上翻了几百条
-
最后还是不确定哪个是"最终交付版"
那一刻我坐在工位上，面对着满屏的文件夹和"最终版_真的不改了_第7版"这种文件名，突然觉得这事儿不对——为什么我们做了那么多工作，但连"找到正确的版本"这件小事都这么费劲？
想解决的三个真实问题
问题1：文件乱，版本更乱 项目一多、改版次数一多，电脑里的文件必然失控。每个人的命名习惯不一样，存储位置不一样，找一个文件要打开N个文件夹。你以为的"最终版"可能是三周前的版本。
问题2：干了很多活，但交付的时候"看不见" 不管是企业实习还是打比赛，这个问题都一样：
-
辅导老师/团队成员其实做了大量工作（改了十几版PPT、调了几十次计划书）
-
但最终交付的时候，别人看到的只是一个文件
-
工作量没有被看见，甚至会产生"你是不是没怎么干活"的误会
我想做的就是：把过程也交付出去。 不是只给一个最终文件，而是让对方能看到整个项目是怎么一步步迭代过来的，每一步都做了什么。
问题3：专门做给某一类人？好像有点窄 最开始我想的是"专门给创赛辅导机构做"——他们每年带那么多队伍，肯定有这个痛点。 但后来我发现，这个痛点根本不是某个行业的：
-
广告公司改方案，改到第20版客户说要第一版
-
设计公司做视觉，源文件堆了几百个
-
律师改合同，每一版都要留痕
-
学生打比赛，材料改来改去
本质上都是一样的：多项目、多版本、需要清晰交付。 既然如此，为什么不把它做通用一点呢？
为什么是现在？为什么是我？
说实话，我就是个普通学生，技术也不算好。放在以前，有这个想法也只能想想——总不能等我学个三五年编程再做吧？
但这次不一样了。因为有了 TRAE，我只要能把问题想清楚、把需求说明白，就能把东西做出来。这也是我参加这次比赛的原因之一：想验证一下，一个有想法但技术一般的普通人，能不能靠 AI 把想法变成现实。
目前这个还是 MVP 版本，还有很多问题我没想明白（比如数据存在哪、怎么保证数据安全），但至少它是一个能用的东西了。以后慢慢迭代吧～
3. Demo 体验地址
本地体验（推荐）
创赛交付系统-Demo.html (126.0 KB)
已打包为单文件 HTML，零部署、零依赖、零账号，下载后双击直接在浏览器打开就能玩。
内置了5个模拟项目、完整的材料数据和用户体系，你可以：
-
以"超级管理员"身份登录，体验全部功能
-
切换不同角色，看看权限差异
-
模拟生成交付包、调整项目进度、新增材料
4. TRAE 实践过程
完整开发流程
作为一个技术小白，整个项目从想法到可运行的 Demo，我没有写一行代码，全程是和 TRAE 对话做出来的。大致经历了这几个阶段：
阶段一：把想法说清楚（约40分钟）
最开始我只有一个模糊的概念：“我想做一个管项目文件的东西”。
TRAE 没有直接开始写代码，而是先跟我聊了很多问题：
-
给谁用？有几种角色？
-
最痛的是哪件事？
-
核心功能是哪几个？先做什么后做什么？
-
数据大概长什么样？
聊完之后，我自己都觉得思路清晰了很多。最后我们确定了 MVP 的范围：5个核心模块，React + Ant Design 技术栈，单文件 HTML 方便分享。
阶段二：主体开发（约2小时）
TRAE 一次性生成了完整的代码，包括：
-
登录页 + 侧边栏导航
-
首页数据看板（统计卡片 + 项目列表 + 最近动态）
-
项目管理列表（搜索、筛选、分页）
-
项目详情页（概览、材料库、工作记录、沟通记录、任务事项、交付包 6个标签页）
-
权限管理（用户管理、角色管理、权限矩阵）
-
系统设置
最惊喜的是它连模拟数据都帮我生成得有模有样——5个不同行业的项目、几十个材料文件、十几条工作记录，看起来就像真的有人在用一样。
阶段三：踩坑与调试（约1小时）
中间遇到了一个印象特别深的 bug：系统设置页点进去是白屏，什么都没有。
一开始我们都以为是组件逻辑写错了，看了半天代码也没发现问题。然后 TRAE 用浏览器自动化工具真实地打开页面，像真正的开发者一样一步步排查：
-
先把组件内容全部删掉，只留最简单的文字——页面正常，说明不是组件本身的问题
-
然后逐个加回元素，加到某个按钮的时候，白屏了
-
最后定位到是用了一个不存在的图标组件
RefreshOutlined——CDN 版本的图标库里没有这个图标，导致 React 直接崩溃
找到原因后，把图标换成 ReloadOutlined，立刻就好了。整个排查过程非常像真实开发中的"二分法调试"，只是 TRAE 自己会动手验证。
这件事给我的感触挺深的：以前我觉得"AI 写代码就是一键生成"，但实际上它也会遇到 bug，也需要调试。不同的是，它调试的速度比人快多了。
阶段四：细节打磨（约40分钟）
基础功能跑通后，我让 TRAE 加了一些体验细节：
-
卡片悬停上浮的动效
-
数字从0滚动到目标值的动画
-
页面切换的淡入过渡
-
统计卡片点击跳转到对应标签页
-
按钮的点击反馈
这些小东西单独看都不起眼，但全部加起来之后，整个产品的"质感"立刻就不一样了。
关键步骤截图
首页
权限管理
项目管理
材料版本管理
交付导出
关键任务对话 Session ID
287391602971753:9026557b0141fc4eaa21b60cb9e8f766_6a192e01569da652c0ef30bc.6a4e0be8913453961f982132.6a4e0be7913453961f982130:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/8 16:35:52)
287391602971753:2a26160f5209e3cae4ce93e66c21cc23_6a192e01569da652c0ef30bc.6a4e7dd2913453961f982217.6a4e7dd2913453961f982215:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/9 00:41:54) 287391602971753:f5814537a8859aaaa436f4b9f841d191_6a192e01569da652c0ef30bc.6a4e8bc6913453961f98247c.6a4e8bc6913453961f98247a:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/9 01:41:26) 287391602971753:bc533914482e4e33314d5f1924cf0e78_6a192e01569da652c0ef30bc.6a4e8f2c913453961f982513.6a4e8f2c913453961f982511:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/9 01:55:56)
最后的话
作为一个技术小白，参加这个比赛之前我其实挺没底的——总觉得做产品是程序员的事，我只有一个想法，能行吗？
但做完这个 Demo 之后，我的想法变了。
想法从来都不廉价，能把想法说清楚、并且坚持把它做出来的人，才是稀缺的。
技术的门槛正在越来越低。以前你需要学半年前端才能做出来的东西，现在可能一下午就搞定了。但不变的是：你得知道自己要什么，你得理解用户的痛点，你得在各种选择之间做取舍。
这些，才是真正难的东西。
希望这个小工具能帮到同样被文件版本困扰的你。如果觉得有用欢迎点赞收藏，有什么想法也欢迎在评论区交流～