# mi-react-demo

**Repository Path**: wuliwzt/mi-react-demo

## Basic Information

- **Project Name**: mi-react-demo
- **Description**: react +hiui学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-05
- **Last Updated**: 2025-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 中后台管理系统

基于 React + HiUI 构建的现代化中后台管理系统框架。

## 🚀 特性

- ✨ 基于 HiUI 4.16.0 组件库
- 🔐 完整的用户认证系统
- 🛡️ 基于角色的权限控制
- 📱 响应式设计，支持移动端
- 🎨 美观的 UI 设计
- 🔄 状态管理（Zustand）
- 🛣️ 路由管理（React Router）

## 📦 技术栈

- **前端框架**: React 18.3.1
- **UI 组件库**: @hi-ui/hiui 4.16.0
- **状态管理**: Zustand
- **路由管理**: React Router DOM 6.20.1
- **样式**: CSS3 + 响应式设计

## 🏗️ 项目结构

```
src/
├── components/          # 公共组件
├── pages/              # 页面组件
│   ├── Login.js        # 登录页面
│   └── Dashboard.js    # 仪表盘页面
├── layouts/            # 布局组件
│   └── MainLayout.js   # 主布局
├── store/              # 状态管理
│   └── userStore.js    # 用户状态
├── hooks/              # 自定义 Hooks
│   └── useAuth.js      # 权限控制 Hook
├── utils/              # 工具函数
│   └── request.js      # 请求工具类
└── assets/             # 静态资源
```

## 🚀 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 启动开发服务器

```bash
npm start
```

### 3. 构建生产版本

```bash
npm run build
```

## 🔐 登录接口

系统已配置登录接口，支持以下参数：

**接口地址**: `http://localhost:8080/auth/login`
**请求方法**: POST
**请求参数**:
```json
{
  "identifier": "13297939390",
  "password": "123456",
  "loginType": "pc",
  "loginMethod": "password"
}
```

**测试账号**:
- 手机号: 13297939390
- 密码: 123456

## 📱 功能模块

### 仪表盘
- 数据概览
- 系统状态监控
- 最近活动记录
- 数据分析（预留图表集成接口）

### 用户管理
- 用户列表
- 用户档案管理

### 系统管理
- 角色管理
- 权限管理
- 菜单管理

### 内容管理
- 文章管理
- 分类管理

## 🛡️ 权限控制

系统实现了基于角色的权限控制：

- **管理员 (admin)**: 拥有所有权限
- **经理 (manager)**: 拥有读写权限
- **普通用户 (user)**: 只有读取权限

## 🎨 自定义主题

可以通过修改 CSS 变量来自定义主题色彩：

```css
:root {
  --primary-color: #1890ff;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #f5222d;
}
```

## 📱 响应式设计

系统支持多种屏幕尺寸：
- 桌面端 (≥1200px)
- 平板端 (≥768px)
- 移动端 (<768px)

## 🔧 开发指南

### 添加新页面

1. 在 `src/pages/` 目录下创建新页面组件
2. 在 `src/App.js` 中添加路由配置
3. 在 `src/layouts/MainLayout.js` 中添加菜单项

### 添加新 API

1. 在 `src/utils/request.js` 中添加新的 API 方法
2. 在相应的 store 中调用 API

### 权限控制

使用 `useAuth` Hook 进行权限检查：

```jsx
import { useAuth } from '../hooks/useAuth'

const MyComponent = () => {
  const { checkPermission, checkRole } = useAuth()
  
  if (!checkPermission('write')) {
    return <div>无权限访问</div>
  }
  
  return <div>有权限访问</div>
}
```

## 🐛 常见问题

### 1. React 版本兼容性

如果遇到 HiUI 组件兼容性问题，请确保使用 React 18.x 版本。

### 2. 接口请求失败

检查后端服务是否正常运行，确认接口地址和参数格式。

### 3. 样式问题

确保 HiUI 组件库正确引入，检查 CSS 文件是否正确加载。

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 支持

如有问题，请通过以下方式联系：
- 提交 GitHub Issue
- 发送邮件至项目维护者