|
|
# 前端检查规范
|
|
|
|
|
|
**版本**: 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报错导致功能不可用 |
|
|
|
| 🟡 严重 | 核心功能异常 | 数据不显示、按钮无响应、弹窗打不开 |
|
|
|
| 🟢 一般 | 非核心问题 | 样式偏移、文案不符、排序不生效 |
|
|
|
| ⚪ 建议 | 优化建议 | 性能优化、代码风格统一 |
|