# 前端检查规范

**版本**: 1.0  
**更新时间**: 2026-04-27  
**适用范围**: CNC机床数据采集系统前端（Vue 3 + Vite + Element Plus + ECharts）

---

## 一、核心验收标准

### 1. Mock路由访问
- **要求**: 通过URL中添加 `/mock` 前缀，可访问所有前端界面
- **验证方式**: 访问 `http://localhost:5173/mock/login`，登录后可正常浏览所有16个页面
- **验收条件**: 
  - `/mock/login` 可正常显示登录页
  - 登录后跳转至 `/mock/dashboard`
  - 侧边栏所有菜单项点击后正确跳转到 `/mock/*` 路径下对应页面
  - 页面刷新后仍保持在 `/mock/*` 路径下

### 2. Mock数据贯穿
- **要求**: 通过 `/mock/login` 登录后，整个后台所有功能均使用Mock数据
- **验证方式**: 所有API请求应走 `/mock-api/` 前缀
- **验收条件**:
  - 登录验证使用Mock凭据（admin / admin123）
  - 所有列表页数据来自Mock API
  - 新增/编辑/删除操作调用Mock API并刷新页面数据
  - 不出现真实API调用（无 `/api/` 前缀请求）

### 3. 控制台零错误零警告
- **要求**: 后台所有功能交互正常，浏览器控制台不能有错误（Error）和警告（Warning）
- **验证方式**: 逐页访问，检查浏览器DevTools Console面板
- **验收条件**:
  - `console.error` 数量 = 0
  - `console.warn` 数量 = 0
  - 无未捕获的JS异常
  - 无Vue组件渲染警告
  - 无网络请求失败（HTTP 4xx/5xx）

### 4. UI元素正常显示
- **要求**: 所有UI元素可正常显示和交互
- **验收条件**:
  - Select下拉框宽度足够显示完整文字
  - 表格列宽合理，文字不被截断
  - 弹窗/对话框正常弹出和关闭
  - 分页组件正常工作
  - 表单验证提示正常显示

---

## 二、检查范围（16个页面 × 13个模块）

### 管理后台页面（12个模块）

| # | 模块 | 页面文件 | 路由路径 |
|---|------|---------|---------|
| 01 | 登录 | LoginPage.vue | /mock/login |
| 02 | 仪表盘 | DashboardPage.vue | /mock/dashboard |
| 03 | 设备管理-列表 | MachineListPage.vue | /mock/machine |
| 03 | 设备管理-详情 | MachineDetailPage.vue | /mock/machine/:id |
| 04 | 品牌模板-列表 | BrandListPage.vue | /mock/brand |
| 04 | 品牌模板-编辑 | BrandEditPage.vue | /mock/brand/:id/edit |
| 05 | 采集地址-列表 | CollectAddressListPage.vue | /mock/collect-address |
| 05 | 采集地址-详情 | CollectAddressDetailPage.vue | /mock/collect-address/:id |
| 06 | 员工管理-列表 | WorkerListPage.vue | /mock/worker |
| 06 | 员工管理-详情 | WorkerDetailPage.vue | /mock/worker/:id |
| 07 | 产量报表 | ProductionPage.vue | /mock/production |
| 08 | 告警中心 | AlertPage.vue | /mock/alert |
| 09 | 系统设置 | SettingsPage.vue | /mock/settings |
| 10 | 车间管理 | （合并至系统设置Tab） | /mock/settings |
| 11 | 操作日志 | LogPage.vue | /mock/log |
| 12 | 大屏配置 | ScreenConfigPage.vue | /mock/screen-config |

### 大屏看板（1个模块）

| # | 模块 | 页面文件 | 路由路径 |
|---|------|---------|---------|
| 13 | 大屏看板 | ScreenPage.vue | /mock/screen |

---

## 三、逐页检查清单

每页需检查以下项目：

### 通用检查项（所有页面）
- [ ] 页面正常加载，无白屏
- [ ] 控制台无 Error
- [ ] 控制台无 Warning
- [ ] Mock API请求路径正确（`/mock-api/` 前缀）
- [ ] 无网络请求失败

### 列表页额外检查项
- [ ] 表格数据正常渲染
- [ ] 分页组件显示和切换正常
- [ ] 搜索/筛选功能正常
- [ ] 新增按钮弹出弹窗正常
- [ ] 编辑按钮弹出弹窗并填充数据
- [ ] 删除按钮弹出确认框
- [ ] Select下拉框宽度正常

### 详情页额外检查项
- [ ] 从列表页点击可正确跳转
- [ ] 基本信息区域数据展示正常
- [ ] 返回按钮可正确返回列表页
- [ ] 面包屑导航正确显示

### 表单/弹窗检查项
- [ ] 必填字段校验提示正常
- [ ] 表单提交后数据刷新
- [ ] 弹窗关闭后表单重置
- [ ] Loading状态正常显示

---

## 四、构建验证

### Vite Build
- **命令**: `npx vite build`
- **验收条件**: 
  - 构建成功（exit code 0）
  - 无编译错误
  - 无TypeScript类型错误

### TypeScript类型
- **验收条件**: Vue文件中 `any` 类型使用 ≤ 5处（合理遗留）

---

## 五、执行方法

### 自动化检查（Playwright）
1. 启动dev server: `npx vite`
2. 使用Playwright逐页访问
3. 收集每个页面的console.error和console.warn
4. 验证路由跳转和Mock数据

### 手动检查补充
1. 逐页点击所有按钮（新增/编辑/删除/导出）
2. 验证弹窗交互
3. 检查表格排序和分页
4. 验证表单校验

---

## 六、问题等级定义

| 等级 | 定义 | 示例 |
|------|------|------|
| 🔴 阻断 | 页面无法使用 | 白屏、JS报错导致功能不可用 |
| 🟡 严重 | 核心功能异常 | 数据不显示、按钮无响应、弹窗打不开 |
| 🟢 一般 | 非核心问题 | 样式偏移、文案不符、排序不生效 |
| ⚪ 建议 | 优化建议 | 性能优化、代码风格统一 |