开源项目维护者的自救：没开过编辑器，我用 TRAE Work 磨出了个「开源诊所」

有来技术
342 阅读10分钟

前言：先上成果

我维护着 youlai（有来） 开源生态——一套前后端分离的全栈脚手架，二十多个仓库铺在 Gitee / GitHub / AtomGit 三个平台。仓库越多，Issue 越难管：散在三处，没有优先级；同一个问题被问了 4 遍，答案跟着已关闭的 Issue 一起沉底；哪个仓库快没人管了，只能肉眼比对。

这烦恼不止维护者有。你搜一个报错，得猜答案埋在哪个平台的哪条 Issue 里；你想知道一个项目还活着吗，只能翻提交记录、数 Star 增速——一样没个准数。

于是我让 TRAE Work 造了个「开源诊所」，把这些活全揽了：三平台开放 Issue 拉到一屏，按优先级告诉你先修哪个；已关闭 Issue 里的答案挖成 FAQ；每个仓库算个健康分，项目死活一眼看穿。

在线体验（TRAE Work 托管，点开即用）：share.traecontent.cn/artifact/F-…

工具首页

image.png

能力说明
三平台聚合开放 Issue 拉到一屏，自动分诊排优先级
FAQ 挖掘已关闭 Issue 聚类，评论区答案挖成草稿
仓库体检18 个仓库健康分 + Star 趋势
热词洞察标题正文切词，高频痛点一屏看清

从一句提示词到 2700 行的工具，十几轮对话，没开过编辑器。下文按「为什么造 → 怎么造 → 造出啥 → 踩了啥坑 → 界面怎么变好看」展开，赶时间直接跳第五节抄提示词。

一、为什么造它：生态铺得越大，Issue 越管不过来

先交代背景。youlai 是一套前后端分离的全栈脚手架：

端阵容数量
前端vue3-element-admin（主推）+ JS 版 / 精简模板 / Naive UI 版 / UniApp / Electron6
后端youlai-boot（Java 主推）+ NestJS / Gin / Django / FastAPI / Laravel / ThinkPHP / ASP.NET / Axum9
衍生多租户 SaaS、MyBatis-Flex、PostgreSQL、多模块、Spring Boot 3 分支6

九种后端共享同一套 RESTful API 规范，前端可无缝切换。生态铺开了是好事，但仓库得跟着平台走：Gitee 主仓，GitHub、AtomGit 镜像。

然后，四重噩梦：

Issue 散在三个平台。 集中处理一轮，得开三个站点来回切标签页。

没有优先级。 冷冻半年的和昨天新提的，在列表里看起来一样「新」。

同一个问题被问了 4 遍。「低版本浏览器白屏」从 2023 问到 2026：I7NJTY → IBJD2S → ID5UB1 → IIO1S5。答案我早写在评论里，但 Issue 一关，答案就沉了。

答案沉成了矿。 主仓 331 条已关闭 Issue，261 条有讨论、60 条评论数 ≥3——一座埋着我亲手写过的答案的矿，从来没有机制把它们挖出来。

开场那三问里的「选型人」，痛点在这边对上了号：判断一个项目死活，只能肉眼比对三平台的提交时间、Star 趋势、Issue 堆积量。维护者要效率，选型人要信心，一个工具两头都救。

二、怎么造它：一句提示词，把边界写死

模型选的 TRAE Work 的 GLM-5.3——倍率 0.4x，同类的一半。要迭代十几轮的活，成本必须敏感。

image.png

第一句提示词：

帮我做一个纯前端单文件 HTML 工具「开源诊所」：

  1. 聚合 Gitee、GitHub、AtomGit 三个平台指定仓库的开放 Issue，拉到一张表里
  2. 按标题和正文关键词自动分类（Bug/部署/兼容/性能/需求/讨论/模糊），按冷冻天数 × 类型权重排优先级，零回复的额外 ×1.5
  3. 已关闭的 Issue 按主题聚类，生成 FAQ Markdown 草稿，答案线索来自评论
  4. 现代 SaaS 风格界面，深浅双主题，无任何外部依赖

默认仓库用 vue3-element-admin（三平台地址：gitee.com/youlaiorg、github.com/youlaitech、atomgit.com/youlai）

三个刻意的设计：

把「不做的事」说死。「纯前端」「无依赖」堵死了 AI 上 webpack 和后端的可能——你不说边界，它就给你全家桶。

业务规则给公式。「冷冻天数 × 类型权重 × 零回复 1.5」能被精确实现；「智能排优先级」只能被自由发挥，发挥出来的算法基本不能看。

贴真实数据。 三平台真实仓库地址直接给，AI 会顺手把端点和字段对上；给「某个仓库」它就只能靠想象。

第一版能跑，但离能用差得远。对话式开发的正确预期：第一版拿 60 分，剩下 40 分靠反馈磨。 我的反馈方式收敛成：截图 → 圈红 → 一句话。比如「5 维」指标被压成竖条，我圈红配一句「太难看了」，TRAE Work 改完自己开浏览器验证，我再截图确认——全程没写过一行 CSS。

image.png

三、造出了啥：四大功能，一屏全览

四个功能挨个过，截图里都是工具真实跑出来的数据。

分诊台。 核心是优先级公式：Bug/部署权重 3.0（直接阻塞用户）、兼容/性能 2.5、需求 1.0、讨论 0.5，零回复的 ×1.5。

逻辑很简单：冷冻 100 天但有人回复的 Bug，说明已介入；冷冻 100 天零回复的，才是悬案。「本周攻坚清单」自动取前 5，一键复制进周报。

image.png

FAQ 挖掘。 冲着那座沉底的答案矿去的：按标题关键词聚类，每类取评论最多的一条当代表，调评论 API 把答案挖成 Markdown。

一个必须处理的细节：Gitee 的「已关闭」要区分「已完成」和「已拒绝」——已拒绝的往往是使用误区，恰恰是 FAQ 的最佳素材。答案只取评论原文，AI 只做提取排版，不做发挥。

效果拿第一节那条被问了 4 遍的白屏验收——五条沉底的 Issue，归拢成了一条：

Q：低版本浏览器（Chrome 86/94、QQ 浏览器、Safari 旧版）打开白屏或报错 Vue 3 只支持原生支持 ES2016 的浏览器，本项目默认不做向下转译；如必须兼容旧浏览器，可尝试 @vitejs/plugin-legacy。 来源：#IIO1S5 成员答复 · 相关提问：#I7NJTY #IBJD2S #ID5UB1 #I6UPVL

下一次再有人问白屏，丢这一条就够了。

image.png

仓库体检。 五维健康分：Star 规模/增速、推送距离、Issue 堆积、仓库年龄。默认载入生态 18 个仓库，点行展开 Star 趋势——选型的人看一眼就知道项目死活。

没 Token 时趋势线用本地快照生长：每次体检记当日 Star 进 localStorage，不伪造历史，只记录真实访问过的每一天。

image.png

热词洞察。 工具成型后我问了句「还有别的功能建议吗」，候选里挑了它——能回答「大家到底在反复问什么」。中文按二元组切词：

// 中文没有天然分界，bigram 是零依赖下的最优解：
// 「点击顶部菜单」→「点击」「击顶」「顶部」「部菜」「菜单」
// 高频 bigram 自然浮出，无意义碎片因频率低被截断
for (var i = 0; i < run.length - 1; i++) {
  var bg = run.slice(i, i + 2);
  if (HOT_CHAR_STOP.has(bg[0]) || HOT_CHAR_STOP.has(bg[1])) continue;
  freq[bg] = (freq[bg] || 0) + 1;
}

跑出来「菜单」×25、「路由」×14、「登录」×10——拼起来就是一幅真实痛点画像，比翻二十条标题快得多。

image.png

四、踩过的坑：三个平台，三副脾气

能展示 happy path 的人很多，能讲清什么时候会坏的人不多。这节是真坑。

Gitee 403。 免费接口有未公开的频控，多轮调试容易触发，恢复时间不确定。我的处理是降级不是硬扛：内置离线「演示快照」（真实 Issue 数据嵌进 HTML），体检默认对象换成 AtomGit 同款仓库。API 配额是资源，不是意志力的考验。

AtomGit 端点。 长得像 GitHub，路径不同：

// GitHub：v3 风格
fetch('https://api.github.com/repos/youlaitech/vue3-element-admin')
// AtomGit：v5 风格，host 带 /api 前缀
fetch('https://api.atomgit.com/api/v5/repos/youlai/vue3-element-admin')

第一版 AI 按 GitHub 风格类推了 AtomGit 的 URL，直接 404。长得像的两家 API，越要逐字核对端点——AI 会自信地类推出错误答案。

纯前端的边界。 三平台仓库 API 恰好都允许跨域，这是运气不是常态；GitHub 未认证 60 次/小时，所以评论深挖做成手动触发；Token 只在内存里，明确标注可选。做工具和写文章一样：用户的环境永远比你想的恶劣。

五、怎么变好看：避开「AI 大众脸」的六个细节

功能是 60 分，界面决定别人愿不愿意用。AI 生成的页面一眼假，不是错觉——它有几个固定惯性。十几轮「截图 → 圈红 → 一句话」磨下来，我攒出六条经验，先上速查表，赶时间的看表就走：

#一眼假的症状一句话药方
1蓝紫渐变铺满全页低饱和铺 90%，只留一个强调色
2毛玻璃糊满整页backdrop-filter 只给顶栏
3区块宽度东扭西歪卡片化 + 8px 栅格管到底
4多层阴影叠罗汉边框留白分层，阴影只给悬浮态
5页面静得像截图核心数字动起来，全页 ≤3 种
6字号挤成一团等宽数字，相邻层级差 1.5 倍

表给结论，段落给理由——六条都不长。

1. 配色：低饱和铺底，一处点睛。 大众脸的根源就是渐变铺满。反过来做：米白或石墨灰铺 90% 的面积，一个高饱和强调色当视觉锚点，语义色克制使用（绿 = 健康、红 = 危险）。渐变能用，但只做一处——一枚圆环、一行标题关键词。大面积铺必翻车。

2. 毛玻璃：一处就够。 全页 backdrop-filter 是灾难，只放在 sticky 顶栏：滚动时内容从导航后面朦胧透出。高级感的来源是克制，不是堆料。不信现在去文首的在线工具滚一下顶栏，再想象同样的效果糊满全页。

3. 模块化：卡片 + 8px 栅格。 肉眼说不出哪里不对、但就是觉得难受的页面，九成是区块宽度没对齐。标题区、内容区、卡片区共用同一套栅格，间距、圆角全走 8px 节奏，一条线管到底。

4. 扁平化：阴影只给悬浮态。 层级用边框 + 留白区分就够，多层阴影叠罗汉是上个时代的拟物残党。

5. 微交互：让数字「活」起来。 刷新文首工具的首页，健康分圆环从 0 生长到 92、趋势线扫描、卡片悬停上浮——动效是「这工具有人在乎」的信号。但全页别超过三种，多了就成迪厅。

6. 字体层级：拉开，再拉开。 数据一律 tabular-nums 等宽，否则数字一跳就抖；标题收紧字距（-0.02em 起），相邻两级字号至少差 1.5 倍。字号层级拉开的视觉收益，比任何装饰都大。

六条拼成提示词，就一段话：

界面要求：

  • 低饱和底色 + 单一强调色，深浅双主题；渐变只做一处点睛，禁大面积铺
  • 毛玻璃只用于 sticky 顶栏；其余扁平：边框+留白分层，阴影只给悬浮态
  • 内容卡片化，间距/圆角走 8px 栅格，标题区/内容区/卡片区宽度严格对齐
  • 数据用等宽数字，标题收紧字距，相邻字号层级 ≥1.5 倍
  • 核心指标带入场动效（生长/扫描/滚动），hover 微浮起，全页动效 ≤3 种

写在最后：TRAE Work 值得一试

这次从想法到能用的工具，没开编辑器、没起本地服务，全程在 TRAE Work 里完成：AI 改完自己开浏览器验证，我看截图给反馈，产物一键托管成分享链接——文首那个在线体验地址就是这么来的。

回头看开头那三问：Issue 该去哪边搜、项目还活着吗、报错去哪找答案——一个工具全接住了。对想把重复工作自动化、又不想为一个小工具立项的程序员，这套流程值得试一次。

最后是福利：我在用 TraeWork AI 办公平台搞定各类任务，通过我的分享链接注册并登录桌面端，新用户一次性获得 5000 积分，邀请成功后你我再各得 500 积分，都可用于对话、任务等 AI 能力：

👉 www.trae.cn/work-fissio…

avatar
文章
阅读
粉丝