zengzy / rps · Files

💻 前端开发者 | 步骤 4/7 | 24.5s

---

1. 推荐前端技术栈

• Vue 3 + TypeScript + Vite：符合偏好栈，开发快、类型安全、构建轻量。
• Pinia：管理登录态、权限、工单/工序运行态。
• Vue Router：按角色动态路由。
• Element Plus / Naive UI：快速搭建后台表单、表格、弹窗。
• Axios + OpenAPI 类型生成：统一接口封装，减少前后端字段不一致。
• ECharts：报表、异常率、通过率、设备状态看板。
• SignalR/WebSocket：接收工单状态、设备在线、异常告警实时刷新。

2. 前端应用形态

• PC 管理后台：管理员维护工单、工艺路线、人员、设备、物料、权限、审核异常。
• 车间工位操作端：大按钮、少输入、扫码优先，适合触屏工控机。
• 大屏看板：展示工单进度、异常数、测试通过率、设备在线率。
• PDA/移动端适配：MVP 可做响应式页面，后续可封装为 PWA，支持扫码枪/摄像头。

3. 页面模块设计

• 登录页：账号、角色、工位选择。
• 工单列表：状态筛选、批次、型号、进度。
• 工单详情：SN 列表、工序流转、事件记录。
• 工序执行台：当前任务、扫码开工、设备/物料校验。
• 扫码录入：SN、物料批次、设备编号输入。
• 测试结果录入：测试项、阈值、结果、附件日志。
• 异常处理：异常创建、冻结、返修、复测、关闭。
• 追溯查询：按 SN/工单/批次/人员/设备查看链路。
• 报表看板：通过率、异常率、返修率、导出。
• 权限配置：角色、菜单、按钮、数据范围。

4. 状态管理与接口请求

Pinia 拆分 authStore、permissionStore、workOrderStore、operationStore、traceStore。Axios 统一处理 Token、错误码、加载态。关键提交接口根据后端返回的“当前状态、下一步动作、错误码”驱动 UI，不在前端自行推断状态机。

5. 关键组件

• BaseForm：动态表单、校验、只读/编辑切换。
• DataTable：分页、筛选、导出、列权限。
• ScanInput：自动聚焦、防重复提交、扫码回车触发。
• OperationStepper：展示工序状态机。
• TestResultEditor：测试项录入、附件上传、合格判定。
• ExceptionDialog：异常弹窗、原因、处理动作。
• RealtimeBadge：设备在线、任务状态实时刷新。

6. 权限与路由守卫

登录后获取用户角色、菜单、按钮权限。路由使用 meta.roles 控制访问；按钮用指令如 v-permission 控制。接口 403 统一提示并记录越权操作。采购方仅开放追溯查询和只读报表。

7. 目录结构示例

src/
  api/
  assets/
  components/
  layouts/
  router/
  stores/
  views/
    login/
    work-orders/
    operations/
    exceptions/
    trace/
    reports/
    system/
  composables/
  utils/
  types/

前端重点是：扫码操作低延迟、状态展示清晰、异常强提示、追溯链路可视化、权限边界严格。