frontend/README.md

溯源赋码平台 - 前端应用

浙江贝凡溯源赋码平台的前端应用，基于 React + TypeScript + Ant Design。

技术栈

• React 19: UI 框
• TypeScript: 类型系统
• Ant Design 6: UI 组件库
• Vite 7: 构建工具
• React Router v7: 路由管理
• Axios: HTTP 客户端
• QRCode: 二维码生成

项目结构

frontend/
├── src/
│   ├── components/    # 通用组件
│   │   ├── AdminLayout.tsx
│   │   └── PublicLayout.tsx  # 公开页统一布局（Logo + 备案）
│   ├── pages/         # 页面组件
│   │   ├── Login.tsx
│   │   ├── PublicQuery.tsx
│   │   ├── Dashboard.tsx
│   │   ├── EmployeeSerials.tsx      # 权限管理（员工主档 + 自动员工码）
│   │   ├── ProductTraces.tsx        # 产品溯源管理
│   │   ├── ProductTracePublic.tsx   # 产品溯源扫码公开页
│   │   ├── ProjectOrders.tsx        # 项目工单列表（管理后台）
│   │   ├── ProjectOrderDetail.tsx   # 项目工单详情（管理后台）
│   │   ├── ProjectOrderComplete.tsx # 项目工单扫码完成（公开）
│   │   ├── Aftersales.tsx           # 售后工单列表（管理后台）
│   │   ├── AftersalesDetail.tsx     # 售后工单详情（管理后台）
│   │   ├── AftersalesConfirm.tsx    # 售后工单扫码确认（公开）
│   │   └── Profile.tsx
│   ├── services/      # API 服务层
│   │   └── api.ts
│   ├── types/         # TypeScript 类型定义
│   │   └── index.ts
│   ├── assets/        # 静态资源
│   ├── styles/        # 样式文件
│   ├── App.tsx        # 主应用组件
│   └── main.tsx       # 应用入口
├── package.json       # 项目配置
├── tsconfig.json     # TypeScript 配置
├── vite.config.ts    # Vite 配置
└── index.html        # HTML 入口

安装

pnpm install

开发

启动开发服务器：

pnpm dev

开发服务器将在 http://localhost:5173 运行

构建

构建生产版本：

pnpm build

预览

预览生产构建：

pnpm preview

环境变量

可以在 .env 文件中配置：

VITE_API_BASE_URL=/api

功能特性

公开页面

• 用户登录
• 公开查询序列号（支持二维码扫描）
  • 扫描到 zjbf-sh-* 售后码时自动跳转到售后确认页
  • 扫描到 zjbf-xm-* 项目工单码时自动跳转到项目完成页
• 售后工单确认页（扫码 → 签名画板 → 已授权；或填写退回原因 → 未授权）
• 产品溯源公开页（客户扫码查看企业、设备、质保、出厂日期、序列号、官网/公众号二维码）

管理后台

• 控制台（工单统计）
• 权限管理
  • 创建员工时录入姓名、电话、工号、岗位、角色
  • 角色仅可选择：软件工程师、硬件工程师、商务经理、项目经理
  • 四个角色均有后台登录权限，创建时必须设置初始密码
  • 不允许通过权限管理创建管理员或普通员工
  • 创建员工后自动生成员工码，列表直接展示员工码
  • 支持查看员工码二维码，扫码进入公开查询页
  • 员工码查询页展示姓名、电话、工号、岗位
• 产品溯源
  • 手动填写产品序列号
  • 字段顺序：企业名称、地址、电话、设备信息、质保期、出厂日期、产品序列号、官网链接（可选）、公众号二维码（可选）
  • 公众号二维码上传到 OSS，客户扫码产品二维码后可查看产品溯源信息
• 售后工单
  • 管理员创建并派单，软件工程师、硬件工程师、商务经理、项目经理只能处理分配给自己的工单
  • 工单里的企业名称是售后客户信息，只保存在工单中
  • 服务类型：软件故障 / 硬件故障 / 售后维保
  • 新建和详情字段使用“现场情况说明”
  • 管理员可进行工单分配（重新分配工单负责人）或强制关闭工单
  • 工单状态机：待处理 → 待客户确认 → 已完成 / 已退回
• 项目工单
  • 用于现场勘查、现场实施等项目任务
  • 现场图片最多 18 张，工程师签名后提交完成
  • 无客户签字环节，完成后形成项目完成电子表单
• 用户资料管理

License

MIT