ff767837e741dde91a336e6c1a0e98f6aab698fb
溯源管理平台 - 前端应用
浙江贝凡溯源管理平台的前端应用,基于 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
│ ├── pages/ # 页面组件
│ │ ├── Login.tsx
│ │ ├── PublicQuery.tsx
│ │ ├── Dashboard.tsx
│ │ ├── Generate.tsx
│ │ ├── Manage.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
功能特性
公开页面
- 用户登录
- 公开查询序列号(支持二维码扫描)
管理后台
- 控制台(数据统计)
- 生成二维码和序列号
- 支持自动生成和自定义前缀
- 支持自定义二维码颜色
- 企业管理
- 查看企业详情
- 查看序列号列表
- 吊销企业/序列号
- 查看序列号二维码
- 用户资料管理
License
MIT
Description
Languages
TypeScript
93.5%
CSS
6.1%
HTML
0.4%