smart
107 lines
3.4 KiB
Markdown
107 lines
3.4 KiB
Markdown
# 模块 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、字典和安全边界。
|
|
-->
|