2026-06-05 17:40:13 +08:00
2026-06-05 17:40:13 +08:00
2026-02-06 14:06:49 +08:00
2026-02-06 15:05:09 +08:00
2026-06-04 10:26:05 +08:00
2026-06-04 10:26:05 +08:00
2026-02-06 14:06:49 +08:00
2026-02-06 14:06:49 +08:00

溯源管理平台 - 前端应用

浙江贝凡溯源管理平台的前端应用,基于 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
│   │   ├── Manage.tsx
│   │   ├── EmployeeSerials.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-* 售后码时自动跳转到售后确认页
  • 售后工单确认页(扫码 → 签名画板 → 已授权;或填写退回原因 → 未授权)

管理后台

  • 控制台(数据统计)
  • 生成二维码和序列号
    • 支持自动生成和自定义前缀
    • 支持自定义二维码颜色
  • 企业管理
    • 用于授权代理商/企业码管理,供客户扫码查询代理商授权状态
    • 查看企业详情
    • 查看序列号列表
    • 吊销企业/序列号
    • 查看序列号二维码
  • 员工管理
    • 创建员工时录入姓名、电话、工号、岗位、角色
    • 角色仅保留管理员、技术员、员工
    • 管理员/技术员有后台登录权限,创建时显示并必填初始密码
    • 员工无后台权限,创建时不显示密码框
    • 创建员工后自动生成员工码,列表直接展示员工码
    • 支持查看员工码二维码,扫码进入公开查询页
    • 员工码查询页展示姓名、电话、工号、岗位
  • 售后工单
    • 技术员创建工单、填写处理结果、提交客户确认
    • 工单里的企业名称是售后客户信息,不会进入企业管理列表
    • 服务类型:软件故障 / 硬件故障 / 售后维保
    • 新建和详情字段使用“现场情况说明”
    • 管理员可进行工单分配(重新分配技术员)或强制关闭工单
    • 工单状态机:待处理 → 待客户确认 → 已完成 / 已退回
  • 用户资料管理

License

MIT

S
Description
No description provided
Readme 1.2 MiB
Languages
TypeScript 93%
CSS 6.8%
HTML 0.2%