TARE-Learn/slidev/pages/day1.md

---
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>