# 模块 7：若依前端规则重点

<div class="mt-6 text-sm">

api 目录调用 · 权限指令 · 动态路由 · 列表 loading · 表单校验 · 删除二次确认 · 导出权限 · 字典显示

</div>

<!--
若依前端规则应覆盖这些点。
接口调用要放 api 目录。
按钮权限要使用项目已有权限指令或权限方法。
动态路由不能随意绕过。
列表页必须有 loading、空状态、错误处理。
表单必须有校验。
删除必须二次确认。
导出按钮要有权限控制。
字典字段要使用统一字典显示。
-->

---

# 前端改动流程

<div class="mt-5 text-sm">

| 阶段 | TRAE 应先做什么 | 不允许什么 |
|---|---|---|
| 找入口 | 找页面、api 模块、权限字符、字典 | 直接改页面 |
| 改代码 | 保持 api 分层、权限指令、loading/finally | 页面里硬编码请求地址 |
| 查风险 | 检查按钮权限、二次确认、错误提示 | 只看前端不看后端 |
| 验证 | 给出手工验证和必要测试建议 | 只说“已完成” |

</div>

<!--
前端改动也要有流程。
特别是若依这类后台项目，页面按钮、api 模块、权限字符、字典和后端接口是连在一起的。
不能只盯着 Vue 页面改。
-->

---

# 用户管理页面规则示例

<div class="mt-6 text-sm">

- 新增、修改、删除、导出按钮必须使用权限控制
- 删除必须二次确认
- 提交失败后恢复 loading
- 修改用户后刷新列表
- 敏感字段不得明文展示或输出日志
</div>

<!--
以用户管理页面为例。
新增、修改、删除、导出按钮必须使用权限控制。
删除必须二次确认。
提交失败后 loading 必须恢复。
修改用户后列表必须刷新。
密码、手机号、邮箱等敏感字段不得随意明文展示或输出日志。
-->

---

# 按钮权限审查表

<div class="mt-5 text-sm">

| 按钮 | 前端权限字符 | 前端位置 | 后端接口 | 后端权限 | 日志 |
|---|---|---|---|---|---|
| 新增 | system:user:add | 页面按钮/指令 | POST /system/user | 待核对 | 待核对 |
| 修改 | system:user:edit | 页面按钮/指令 | PUT /system/user | 待核对 | 待核对 |
| 删除 | system:user:remove | 页面按钮/指令 | DELETE /system/user/{ids} | 待核对 | 待核对 |
| 导出 | system:user:export | 页面按钮/指令 | POST /system/user/export | 待核对 | 待核对 |

</div>

<!--
这张表是前端专项规则的核心输出。
学员可以让 TRAE 先填表，填不出来的地方就写待核对。
只有前端权限字符是不够的，还要继续核对后端接口权限和日志。
-->

---

# 前端 rules 片段

<div class="mt-4 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-sm">

```md
## 若依前端规则

- 新增页面按钮时，必须复用项目已有权限指令或权限判断方法。
- 新增接口调用时，必须放在对应 api 文件中，页面只调用封装方法。
- 删除、重置密码、导出等敏感按钮必须有二次确认、loading 恢复和错误提示。
- 涉及字典字段展示时，必须优先使用项目已有字典组件或字典工具。
- 前端权限只控制交互显示，不能作为接口安全结论。
```

</div>

<!--
这段前端 rules 可以直接进入最终 rules.md。
它把页面开发中的常见隐性要求写清楚：权限指令、api 分层、二次确认、loading、字典和安全边界。
-->