---
name: vue2-element-dev
description: Use when implementing or modifying Vue2 + Element UI pages/components in this repository, especially for list pages, form dialogs, API integration, route/menu wiring, and pre-delivery checks.
disable-model-invocation: true
---

# Vue2 Element Dev

## 适用场景

- 新增或修改 `src/views` 下的页面（列表、表单、弹窗）
- 新增或修改 `src/components` 下的复用组件
- 做接口联调、参数映射、提交与回显
- 做路由接入、导航菜单接入、权限相关入口调整

## 项目默认约定（平衡型）

- **优先复用现有模式**：先参考同目录页面写法，再补差异
- **命名可读**：页面目录、组件名、方法名优先语义化
- **数据分层**：查询参数、表单数据、UI 状态分开管理
- **接口调用单点化**：统一放到 `src/api/*.js`，页面仅做调用和状态处理
- **样式就近维护**：页面样式写在组件内，避免全局污染

## 页面开发流程

1. 先找一个同类型页面作为参考（表格页/配置页/弹窗页）
2. 搭出页面骨架：筛选区、操作区、表格区、分页区
3. 补齐数据结构：`list`、`loading`、`query`、`pagination`
4. 接入接口：查询、重置、增删改、状态切换
5. 完成交互反馈：确认弹窗、成功提示、失败兜底
6. 执行构建或 lint 验证，修复明显问题后再交付

## 推荐代码组织

- `data`
  - 查询模型：`queryForm`
  - 列表模型：`tableData`
  - 状态模型：`loading` / `dialogVisible` / `submitLoading`
- `computed`
  - 放衍生值，不放有副作用逻辑
- `methods`
  - `fetchList`：统一列表查询入口
  - `handleSearch` / `handleReset`
  - `handleAdd` / `handleEdit` / `handleDelete`
  - `handleSubmit`：表单提交统一出口

## 接口联调约定

- API 文件里维护请求函数，页面中只做调用
- 参数透传前做必要整形（时间范围、数字布尔转换）
- 提交前做前端必填校验；提交后统一提示
- 失败场景要收敛：关闭 loading、保留用户输入、提示可理解信息

## 路由与菜单接入约定

- 新页面需要补路由入口与导航入口
- 菜单文案与页面标题保持一致，避免多处命名不一致
- 权限字段沿用现有规则，不自创新字段名

## 交付前最低检查

- 页面可正常进入，主流程可跑通（查、增/改、删）
- 列表页分页/筛选联动正常
- 弹窗表单可回显、可校验、可提交
- 无明显控制台报错，构建或 lint 不出现新增阻断错误

## 快速参考

- 详细示例：见 [examples.md](examples.md)
- 提交前清单：见 [checklist.md](checklist.md)