Frudrax Cheng
133 lines
4.3 KiB
Markdown
133 lines
4.3 KiB
Markdown
# 溯源赋码平台 - 前端应用
|
|
|
|
浙江贝凡溯源赋码平台的前端应用，基于 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 入口
|
|
```
|
|
|
|
## 安装
|
|
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
## 开发
|
|
|
|
启动开发服务器：
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
开发服务器将在 http://localhost:5173 运行
|
|
|
|
## 构建
|
|
|
|
构建生产版本：
|
|
|
|
```bash
|
|
pnpm build
|
|
```
|
|
|
|
## 预览
|
|
|
|
预览生产构建：
|
|
|
|
```bash
|
|
pnpm preview
|
|
```
|
|
|
|
## 环境变量
|
|
|
|
可以在 `.env` 文件中配置：
|
|
|
|
```env
|
|
VITE_API_BASE_URL=/api
|
|
```
|
|
|
|
## 功能特性
|
|
|
|
### 公开页面
|
|
|
|
- 用户登录
|
|
- 公开查询序列号（支持二维码扫描）
|
|
- 扫描到 `zjbf-sh-*` 售后码时自动跳转到售后确认页
|
|
- 扫描到 `zjbf-xm-*` 项目工单码时自动跳转到项目完成页
|
|
- 售后工单确认页（扫码 → 签名画板 → 已授权；或填写退回原因 → 未授权）
|
|
- 产品溯源公开页（客户扫码查看企业、设备、质保、出厂日期、序列号、官网/公众号二维码）
|
|
|
|
### 管理后台
|
|
|
|
- 控制台（工单统计）
|
|
- 权限下发
|
|
- 创建员工时录入姓名、电话、工号、岗位、角色
|
|
- 角色仅保留管理员、技术员、员工
|
|
- 管理员/技术员有后台登录权限，创建时显示并必填初始密码
|
|
- 员工无后台权限，创建时不显示密码框
|
|
- 创建员工后自动生成员工码，列表直接展示员工码
|
|
- 支持查看员工码二维码，扫码进入公开查询页
|
|
- 员工码查询页展示姓名、电话、工号、岗位
|
|
- 产品溯源
|
|
- 手动填写产品序列号
|
|
- 字段顺序：企业名称、地址、电话、设备信息、质保期、出厂日期、产品序列号、官网链接（可选）、公众号二维码（可选）
|
|
- 公众号二维码上传到 OSS，客户扫码产品二维码后可查看产品溯源信息
|
|
- 售后工单
|
|
- 技术员创建工单、填写处理结果、提交客户确认
|
|
- 工单里的企业名称是售后客户信息，只保存在工单中
|
|
- 服务类型：软件故障 / 硬件故障 / 售后维保
|
|
- 新建和详情字段使用“现场情况说明”
|
|
- 管理员可进行工单分配（重新分配技术员）或强制关闭工单
|
|
- 工单状态机：待处理 → 待客户确认 → 已完成 / 已退回
|
|
- 项目工单
|
|
- 用于现场勘查、现场实施等项目任务
|
|
- 现场图片最多 18 张，工程师签名后提交完成
|
|
- 无客户签字环节，完成后形成项目完成电子表单
|
|
- 用户资料管理
|
|
|
|
## License
|
|
|
|
MIT
|