init
This commit is contained in:
smart
@@ -0,0 +1,517 @@
|
||||
---
|
||||
layout: cover
|
||||
background: https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1920&q=80
|
||||
---
|
||||
|
||||
# 第 1 天：TRAE 基础工作流与陌生代码库理解
|
||||
|
||||
<div class="text-lg text-gray-300 mt-4">
|
||||
真实项目案例：若依 RuoYi-Vue / RuoYi-Vue3
|
||||
</div>
|
||||
|
||||
<div class="mt-6 text-sm text-gray-400">
|
||||
主线任务：理解「登录 → 用户信息 → 菜单路由 → 按钮权限」调用链路
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 为什么选若依作为案例？
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-8">
|
||||
|
||||
<div>
|
||||
<div class="card-blue">
|
||||
<div class="font-semibold mb-3">若依的特点</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
- 🏢 足够**真实** — 不是 demo，是完整后台管理系统
|
||||
- 📋 足够**典型** — 用户、角色、菜单、权限、日志、字典
|
||||
- 🔗 足够**复杂** — 前后端分离、多模块、多层级
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="font-semibold mb-3">适合训练的维度</div>
|
||||
<div class="space-y-1 text-sm text-gray-300">
|
||||
|
||||
- 陌生代码库理解
|
||||
- 前后端分离结构分析
|
||||
- 登录认证链路
|
||||
- 动态菜单与路由
|
||||
- 角色与权限体系
|
||||
- 按钮权限控制
|
||||
- 操作日志审计
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 今天训练四个动作
|
||||
|
||||
<div class="grid grid-cols-4 gap-6 mt-12">
|
||||
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 rounded-2xl bg-blue-900/50 border border-blue-500/50 flex items-center justify-center mx-auto text-2xl">
|
||||
🏗️
|
||||
</div>
|
||||
<div class="mt-4 font-bold">看结构</div>
|
||||
<div class="text-xs text-gray-400 mt-2">目录、模块<br/>分层、技术栈</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 rounded-2xl bg-emerald-900/50 border border-emerald-500/50 flex items-center justify-center mx-auto text-2xl">
|
||||
🔍
|
||||
</div>
|
||||
<div class="mt-4 font-bold">找入口</div>
|
||||
<div class="text-xs text-gray-400 mt-2">登录、用户信息<br/>菜单、权限入口</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 rounded-2xl bg-amber-900/50 border border-amber-500/50 flex items-center justify-center mx-auto text-2xl">
|
||||
🔗
|
||||
</div>
|
||||
<div class="mt-4 font-bold">追链路</div>
|
||||
<div class="text-xs text-gray-400 mt-2">从登录到路由<br/>到按钮权限</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 rounded-2xl bg-red-900/50 border border-red-500/50 flex items-center justify-center mx-auto text-2xl">
|
||||
✅
|
||||
</div>
|
||||
<div class="mt-4 font-bold">查依据</div>
|
||||
<div class="text-xs text-gray-400 mt-2">每个结论<br/>验证文件来源</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-10 text-center text-sm text-gray-400">
|
||||
最终产出：若依权限与菜单模块代码理解报告
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 模块 1：TRAE 在真实研发中的定位
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-8">
|
||||
|
||||
<div class="card-green">
|
||||
<div class="text-emerald-400 font-semibold mb-3">TRAE 适合辅助</div>
|
||||
<div class="space-y-1 text-sm">
|
||||
|
||||
- 检索代码
|
||||
- 解释函数
|
||||
- 梳理结构
|
||||
- 生成链路初稿
|
||||
- 生成文档初稿
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-red">
|
||||
<div class="text-red-400 font-semibold mb-3">不能直接替代</div>
|
||||
<div class="space-y-1 text-sm">
|
||||
|
||||
- 业务判断
|
||||
- 权限决策
|
||||
- 安全判断
|
||||
- 上线决策
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-6 p-4 rounded-lg bg-white/5 border border-white/10 text-sm">
|
||||
<strong>核心区分：</strong>
|
||||
<span class="text-blue-300">代码事实</span>（代码现在怎么写） vs
|
||||
<span class="text-amber-300">业务事实</span>（业务应该怎么规定）<br/>
|
||||
TRAE 擅长发现代码事实，人工必须判断业务事实
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 模块 2：若依核心业务对象
|
||||
|
||||
<div class="mt-6">
|
||||
|
||||
```mermaid {scale: 0.85}
|
||||
graph LR
|
||||
U[User 用户] -->|绑定| R[Role 角色]
|
||||
R -->|授权| M[Menu 菜单]
|
||||
M -->|包含| P[Permission 权限字符]
|
||||
P -->|控制| A[页面/按钮/接口]
|
||||
U -->|属于| D[Dept 部门]
|
||||
R -->|数据权限| D
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-4 mt-8 text-sm">
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold text-blue-300 mb-2">页面权限</div>
|
||||
能不能看到某个菜单页面
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold text-emerald-300 mb-2">按钮权限</div>
|
||||
能不能操作新增/修改/删除
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="font-semibold text-amber-300 mb-2">数据权限</div>
|
||||
能看到哪些部门范围的数据
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 模块 3：@workspace 理解全局结构
|
||||
|
||||
<div class="mt-4">
|
||||
|
||||
<div class="card-blue text-sm">
|
||||
|
||||
**标准 Prompt：**
|
||||
|
||||
```
|
||||
@workspace 请分析若依项目全局结构。
|
||||
|
||||
维度：
|
||||
1. 前端目录 2. 后端目录
|
||||
3. 登录认证 4. 动态路由
|
||||
5. API 封装 6. 权限控制
|
||||
7. 操作日志 8. 代码生成
|
||||
9. 测试与构建 10. 不确定点
|
||||
|
||||
每个结论标注依据文件。
|
||||
```
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 p-3 rounded-lg bg-red-900/20 border border-red-500/30 text-sm">
|
||||
⚠️ <strong>不要问：</strong>「@workspace 帮我看看若依项目」— 太泛泛，会得到空洞总结
|
||||
</div>
|
||||
|
||||
---
|
||||
layout: two-cols
|
||||
layoutClass: gap-6
|
||||
---
|
||||
|
||||
# 若依前后端结构重点
|
||||
|
||||
<div class="mt-4 text-sm">
|
||||
|
||||
### 前端重点目录
|
||||
|
||||
| 目录 | 职责 |
|
||||
|------|------|
|
||||
| `src/api` | 接口封装 |
|
||||
| `src/router` | 路由配置 |
|
||||
| `src/store` | 状态管理 |
|
||||
| `src/views` | 页面组件 |
|
||||
| `src/directive` | 权限指令 |
|
||||
| `src/permission` | 路由守卫 |
|
||||
| `src/utils/request` | 请求拦截 |
|
||||
|
||||
</div>
|
||||
|
||||
::right::
|
||||
|
||||
<div class="mt-14 text-sm">
|
||||
|
||||
### 后端重点模块
|
||||
|
||||
| 模块 | 职责 |
|
||||
|------|------|
|
||||
| `ruoyi-admin` | 启动+接口 |
|
||||
| `ruoyi-framework` | 框架配置 |
|
||||
| `ruoyi-system` | 业务逻辑 |
|
||||
| `ruoyi-common` | 公共工具 |
|
||||
|
||||
<div class="mt-4">
|
||||
|
||||
**分层结构：** Controller → Service → Mapper
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 模块 4：核心调用链路
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
|
||||
```mermaid {scale: 0.8}
|
||||
graph TD
|
||||
A[用户登录] --> B[获取 Token]
|
||||
B --> C[获取用户信息 getInfo]
|
||||
C --> D[获取菜单路由 getRouters]
|
||||
D --> E[生成动态路由]
|
||||
E --> F[进入系统页面]
|
||||
F --> G[权限字符控制按钮]
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-4 gap-2 text-xs text-center">
|
||||
<div class="p-2 rounded bg-blue-900/30">登录页面</div>
|
||||
<div class="p-2 rounded bg-blue-900/30">API 调用</div>
|
||||
<div class="p-2 rounded bg-blue-900/30">后端 Controller</div>
|
||||
<div class="p-2 rounded bg-blue-900/30">状态更新</div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 登录认证链路
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-6">
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
|
||||
<div class="p-2 rounded bg-blue-900/20 border-l-2 border-blue-500">1. 用户输入账号密码</div>
|
||||
<div class="text-blue-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-blue-900/20 border-l-2 border-blue-500">2. Login 页面提交</div>
|
||||
<div class="text-blue-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-blue-900/20 border-l-2 border-blue-500">3. 调用 login API</div>
|
||||
<div class="text-blue-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-emerald-900/20 border-l-2 border-emerald-500">4. 后端认证用户</div>
|
||||
<div class="text-blue-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-emerald-900/20 border-l-2 border-emerald-500">5. 返回 Token</div>
|
||||
<div class="text-blue-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-blue-900/20 border-l-2 border-blue-500">6. 前端保存 Token</div>
|
||||
<div class="text-blue-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-blue-900/20 border-l-2 border-blue-500">7. Request 拦截器携带 Token</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="card">
|
||||
<div class="font-semibold mb-3">重点确认</div>
|
||||
<div class="space-y-2 text-sm text-gray-300">
|
||||
|
||||
- Token 存储在哪里？
|
||||
- Request 拦截器在哪里带 Token？
|
||||
- Token 失效后如何处理？
|
||||
- 是否有刷新 Token 机制？
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 动态路由加载链路
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-6">
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="p-2 rounded bg-emerald-900/20 border-l-2 border-emerald-500">1. 调用 getRouters</div>
|
||||
<div class="text-emerald-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-emerald-900/20 border-l-2 border-emerald-500">2. 后端返回菜单树</div>
|
||||
<div class="text-emerald-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-blue-900/20 border-l-2 border-blue-500">3. 前端转换为路由对象</div>
|
||||
<div class="text-emerald-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-blue-900/20 border-l-2 border-blue-500">4. 动态挂载路由 (addRoute)</div>
|
||||
<div class="text-emerald-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-blue-900/20 border-l-2 border-blue-500">5. 渲染侧边栏菜单</div>
|
||||
<div class="text-emerald-400 text-center">↓</div>
|
||||
<div class="p-2 rounded bg-blue-900/20 border-l-2 border-blue-500">6. 用户进入页面</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="card">
|
||||
<div class="font-semibold mb-3">菜单类型</div>
|
||||
<div class="space-y-3 text-sm text-gray-300">
|
||||
|
||||
| 类型 | 说明 |
|
||||
|------|------|
|
||||
| 目录 | M - 包含子菜单 |
|
||||
| 菜单 | C - 对应页面组件 |
|
||||
| 按钮 | F - 权限字符 |
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 按钮权限链路
|
||||
|
||||
<div class="mt-6 text-center text-sm">
|
||||
|
||||
```mermaid {scale: 0.85}
|
||||
graph LR
|
||||
A[菜单配置权限字符] --> B[角色授权该字符]
|
||||
B --> C[getInfo 返回 permissions]
|
||||
C --> D[前端权限指令判断]
|
||||
D --> E[按钮显示/隐藏]
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6 mt-8">
|
||||
|
||||
<div class="card-amber">
|
||||
<div class="text-amber-400 font-semibold mb-2">⚠️ 关键警告</div>
|
||||
<div class="text-sm">
|
||||
|
||||
前端按钮权限 **只能控制 UI 展示**
|
||||
|
||||
如果用户绕过前端直接请求后端接口，安全由后端接口权限决定
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-blue">
|
||||
<div class="text-blue-300 font-semibold mb-2">必须确认</div>
|
||||
<div class="text-sm">
|
||||
|
||||
- Controller 是否有权限注解？
|
||||
- Service 是否校验数据权限？
|
||||
- 不能只看前端就下结论
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 模块 5：AI 输出可信度判断
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-6">
|
||||
|
||||
<div class="card-red">
|
||||
<div class="text-red-400 font-semibold mb-3">❌ 不可信回答</div>
|
||||
<div class="text-sm p-3 rounded bg-red-900/20 italic">
|
||||
「若依已经实现了完整权限控制，用户登录后会自动加载菜单和按钮权限，后端接口也都有权限校验，整体风险较低。」
|
||||
</div>
|
||||
<div class="text-xs text-gray-400 mt-2">
|
||||
无文件路径 · 无函数名 · 无依据 · 无不确定点
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-green">
|
||||
<div class="text-emerald-400 font-semibold mb-3">✅ 可信回答</div>
|
||||
<div class="text-sm p-3 rounded bg-emerald-900/20 italic">
|
||||
「前端登录成功后调用 getInfo 获取用户信息和权限字符。随后调用 getRouters 获取动态路由菜单。可确认前端存在菜单和按钮权限控制。但仍需检查后端 Controller 权限注解。」
|
||||
</div>
|
||||
<div class="text-xs text-gray-400 mt-2">
|
||||
有依据 · 有调用关系 · 区分前后端 · 标注不确定点
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 可信结论四件套
|
||||
|
||||
<div class="grid grid-cols-4 gap-4 mt-10">
|
||||
|
||||
<div class="text-center card p-6">
|
||||
<div class="text-3xl mb-3">📁</div>
|
||||
<div class="font-bold">文件路径</div>
|
||||
<div class="text-xs text-gray-400 mt-2">前端 api 文件<br/>后端 Controller</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center card p-6">
|
||||
<div class="text-3xl mb-3">⚙️</div>
|
||||
<div class="font-bold">函数/类/注解</div>
|
||||
<div class="text-xs text-gray-400 mt-2">getInfo · getRouters<br/>权限注解</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center card p-6">
|
||||
<div class="text-3xl mb-3">🔗</div>
|
||||
<div class="font-bold">调用关系</div>
|
||||
<div class="text-xs text-gray-400 mt-2">登录→token→info<br/>→routes→权限</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center card p-6">
|
||||
<div class="text-3xl mb-3">❓</div>
|
||||
<div class="font-bold">不确定点</div>
|
||||
<div class="text-xs text-gray-400 mt-2">无法确认的内容<br/>必须标注</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-8 text-center text-sm text-gray-400">
|
||||
没有这四项内容的 AI 输出，不能轻易采纳进入报告
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
# 模块 6：代码理解报告结构
|
||||
|
||||
<div class="mt-6 text-sm">
|
||||
|
||||
| 章节 | 内容要求 |
|
||||
|------|---------|
|
||||
| 模块职责 | 具体说明，不能写空话 |
|
||||
| 核心对象 | User / Role / Menu / Permission / Dept |
|
||||
| 目录与文件 | 标注和权限主线的关系 |
|
||||
| 核心调用链路 | 拆分子链路，标注依据 |
|
||||
| 权限风险 | 风险描述 + 触发条件 + 影响 + 验证 |
|
||||
| 操作日志风险 | 哪些操作缺失日志 |
|
||||
| 改造建议 | 文件 + 方法 + 验收标准 |
|
||||
| 不确定结论 | 必须单独列出 |
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mt-4 card-red text-sm">
|
||||
<strong>风险写法要求：</strong>不能写「权限有风险」，必须具体到触发条件 + 影响范围 + 验证方式
|
||||
</div>
|
||||
|
||||
---
|
||||
layout: center
|
||||
---
|
||||
|
||||
# 第 1 天交付物
|
||||
|
||||
<div class="grid grid-cols-3 gap-4 mt-8 text-sm max-w-3xl mx-auto">
|
||||
|
||||
<div class="card-blue p-4 text-center">
|
||||
<div class="text-lg mb-1">01</div>
|
||||
TRAE 使用边界清单
|
||||
</div>
|
||||
|
||||
<div class="card-blue p-4 text-center">
|
||||
<div class="text-lg mb-1">02</div>
|
||||
若依模块认知图
|
||||
</div>
|
||||
|
||||
<div class="card-blue p-4 text-center">
|
||||
<div class="text-lg mb-1">03</div>
|
||||
若依项目结构图
|
||||
</div>
|
||||
|
||||
<div class="card-green p-4 text-center">
|
||||
<div class="text-lg mb-1">04</div>
|
||||
权限调用链路图
|
||||
</div>
|
||||
|
||||
<div class="card-green p-4 text-center">
|
||||
<div class="text-lg mb-1">05</div>
|
||||
TRAE 输出校验清单
|
||||
</div>
|
||||
|
||||
<div class="card-amber p-4 text-center">
|
||||
<div class="text-lg mb-1">06</div>
|
||||
代码理解报告
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user