haoliang-net/docs/前端检查规范.md

前端检查规范

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