# react-mgmt

**Repository Path**: liumoshang/react-mgmt

## Basic Information

- **Project Name**: react-mgmt
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-02
- **Last Updated**: 2026-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 设备管理系统

基于 React + Vite + Ant Design 构建的设备管理系统

## 技术栈

- **React 18** - UI 框架
- **Vite** - 构建工具
- **Ant Design 5** - UI 组件库
- **React Router DOM 6** - 路由管理
- **Axios** - HTTP 请求库

## 项目结构

```
react-mgmt/
├── public/                 # 静态资源
├── src/
│   ├── components/        # 公共组件
│   ├── layout/            # 布局组件
│   │   └── MainLayout.jsx # 主布局（侧边栏+顶部导航）
│   ├── pages/             # 页面组件
│   │   ├── DeviceManagement.jsx    # 设备管理
│   │   ├── FaultManagement.jsx     # 故障管理
│   │   ├── CustomerManagement.jsx  # 客户管理
│   │   └── SystemConfig.jsx        # 系统配置
│   ├── router/            # 路由配置
│   ├── utils/             # 工具函数
│   │   └── request.js    # Axios 封装
│   ├── App.jsx            # 根组件
│   ├── main.jsx           # 入口文件
│   └── index.css          # 全局样式
├── index.html             # HTML 模板
├── package.json           # 项目配置
└── vite.config.js         # Vite 配置
```

## 功能模块

### 1. 设备管理

- 设备列表展示
- 新增设备
- 编辑设备
- 删除设备
- 搜索设备

### 2. 故障管理

- 故障记录列表
- 故障状态管理（待处理、处理中、已解决、已关闭）
- 新增故障
- 编辑故障
- 删除故障

### 3. 客户管理

- 客户信息管理
- 联系人信息
- 客户状态管理
- 新增/编辑/删除客户

### 4. 系统配置

- 系统基本设置
- API 接口配置
- 显示设置
- 功能开关配置

## 开始使用

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

项目将在 http://localhost:3000 启动

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## Axios 封装说明

项目中已封装 Axios 请求库（`src/utils/request.js`），包含：

- 请求拦截器：自动添加 token
- 响应拦截器：统一处理错误
- 基础 URL 配置：`/api`
- 超时时间：10秒
- 错误处理：401/403/404/500 等状态码处理

### 使用示例

```javascript
import request from './utils/request'

// GET 请求
request.get('/devices')

// POST 请求
request.post('/devices', data)

// PUT 请求
request.put('/devices/:id', data)

// DELETE 请求
request.delete('/devices/:id')
```

## 路由配置

- `/` - 首页（重定向到 /device）
- `/device` - 设备管理
- `/fault` - 故障管理
- `/customer` - 客户管理
- `/system` - 系统配置

## 注意事项

1. 当前数据为模拟数据，实际使用时需要对接后端 API
2. 修改 API 基础地址请编辑 `src/utils/request.js` 中的 `baseURL`
3. 所有表单验证已配置，可根据需要调整
4. 项目使用了 Ant Design 5.x 组件库，支持主题定制

## 开发建议

- 使用 ESLint 和 Prettier 保持代码风格统一
- 组件开发遵循 React Hooks 最佳实践
- 使用 Vite 的热更新功能提高开发效率
- 合理使用 React.memo 和 useMemo 优化性能

## License

MIT