---
description: 若依Vue3管理后台前端规范（Element Plus）
globs: ["**/ruoyi-admin/**/*.vue","**/ruoyi-admin/**/*.ts"]
alwaysApply: false
---
# 冲突优先级声明
全局前后端协作规范优先级高于本文件。

# 若依Vue3后台前端开发规范
## 一、页面目录结构规范
页面存放路径 `views/{业务模块}/`，目录拆分：
1. index.vue：列表主页面（搜索栏、表格、新增/编辑弹窗入口）；
2. XxxFormDrawer.vue：新增、编辑抽屉表单；
3. XxxDetailDrawer.vue：详情查看抽屉；
4. components/：页面内部复用小型组件，不全局公用；
5. api/：当前模块接口请求文件；
6. types.ts：当前模块TS类型定义。

## 二、页面基础框架规范
统一使用项目封装通用列表组件 `SqSearchTableFrame`，内置搜索区、表格、分页、新增/删除按钮插槽；
1. 搜索表单使用el-form-item，搜索项控制在6个以内，多余折叠；
2. 表格列使用el-table-column，字典状态列使用 <dict-tag /> 自动翻译；
3. 表格操作列统一封装操作按钮组件，区分查看、编辑、删除；
4. 删除、批量删除按钮绑定二次确认弹窗，提示用户确认操作；
5. 分页统一使用框架封装分页组件，参数pageNum、pageSize与后端PageReqVO对齐。

## 三、表单抽屉规范
1. 新增/编辑共用一套FormDrawer组件，通过入参id区分新增/编辑；
2. 表单校验使用el-form内置rules校验，必填项标红*；
3. 下拉选择、状态选择统一使用字典接口回显，禁止硬编码选项；
4. 表单提交统一调用封装api，成功后关闭抽屉并刷新表格列表；
5. 复杂多行数据使用el-table内嵌表单行，支持新增、删除子行。

## 四、TS类型规范
1. types.ts 统一定义PageReq、SaveReq、Resp类型，与后端VO字段完全一致；
2. 所有ID字段定义为string，避免雪花ID数字精度丢失；
3. 状态枚举直接复用后端字典编码，前端不单独维护状态数字；
4. 接口请求统一封装axios工具，请求参数、返回值绑定TS类型。

## 五、前端通用禁止项
❌ 禁止页面硬编码字典状态、业务枚举数字；
❌ 禁止手动拼接接口地址，统一api文件导出请求方法；
❌ 禁止表单不做前端必填校验，仅依赖后端校验；
❌ 禁止表格操作无二次确认弹窗（删除、批量删除）；
❌ 禁止TS类型中ID使用number类型，防止雪花ID精度丢失。
