feat(day2): 更新课件

slidev/pages/day2/m7-frontend-rules.md

@@ -20,6 +20,27 @@ api 目录调用 · 权限指令 · 动态路由 · 列表 loading · 表单校
 
 ---
 
+# 前端改动流程
+
+<div class="mt-5 text-sm">
+
+| 阶段 | TRAE 应先做什么 | 不允许什么 |
+|---|---|---|
+| 找入口 | 找页面、api 模块、权限字符、字典 | 直接改页面 |
+| 改代码 | 保持 api 分层、权限指令、loading/finally | 页面里硬编码请求地址 |
+| 查风险 | 检查按钮权限、二次确认、错误提示 | 只看前端不看后端 |
+| 验证 | 给出手工验证和必要测试建议 | 只说“已完成” |
+
+</div>
+
+<!--
+前端改动也要有流程。
+特别是若依这类后台项目，页面按钮、api 模块、权限字符、字典和后端接口是连在一起的。
+不能只盯着 Vue 页面改。
+-->
+
+---
+
 # 用户管理页面规则示例
 
 <div class="mt-6 text-sm">
@@ -39,3 +60,47 @@ api 目录调用 · 权限指令 · 动态路由 · 列表 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、字典和安全边界。
+-->