# bee_front_react

**Repository Path**: jiongber/bee_front_react

## Basic Information

- **Project Name**: bee_front_react
- **Description**: bee管理端的react版本
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: thin
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2025-10-14
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Bee 管理系统前端

Bee 管理系统是一个基于 React 19、Ant Design 6、Redux Toolkit 和 Vite 构建的现代化后台管理系统。

## 系统特性

- **现代化技术栈**：采用最新的前端技术，包括 React 19.2、Vite 7.3 等
- **权限管理**：基于 JWT 的认证机制和细粒度权限控制
- **动态路由**：根据用户权限动态生成路由和菜单
- **主题切换**：支持亮色和暗色主题，可自定义主题配置
- **标签页管理**：多标签页浏览体验，支持标签页操作和持久化
- **组件丰富**：基于 Ant Design 6 的丰富组件库，采用双色图标风格

## 技术栈

- **React 19.2**: 最新的 React 版本，提供更好的性能和新特性
- **Vite 7.3**: 新一代前端构建工具，快速的冷启动和热更新
- **Ant Design 6.2**: 企业级 UI 设计语言和 React 组件库
- **Redux Toolkit 2.11**: 现代化 Redux 开发工具包，简化状态管理
- **React Router v7.12**: 声明式路由管理
- **Axios 1.13**: 基于 Promise 的 HTTP 客户端
- **Framer Motion 12.26**: 流畅的动画效果库

## 项目结构

```
src/
├── api/              # API 接口封装
├── assets/           # 静态资源文件
├── components/       # 公共组件
│   ├── common/       # 通用组件
│   │   ├── AuthControl.jsx    # 权限控制组件
│   │   ├── DynamicIcon.jsx   # 动态图标组件
│   │   ├── IconSelector.jsx  # 图标选择器
│   │   └── Loading.jsx       # 加载组件
│   └── layout/       # 布局组件
│       ├── BreadcrumbNav.jsx  # 面包屑导航
│       ├── ContentArea.jsx    # 内容区域
│       ├── FullscreenToggle.jsx # 全屏切换
│       ├── LayoutProvider.jsx # 布局提供者
│       ├── Layouts.jsx        # 布局组件
│       ├── MenuSearch.jsx     # 菜单搜索
│       ├── Sidebar.jsx        # 侧边栏
│       ├── TabContextMenu.jsx # 标签页右键菜单
│       ├── Tabs.jsx           # 标签页
│       ├── ThemeToggle.jsx    # 主题切换
│       └── UserActions.jsx    # 用户操作
├── hooks/            # 自定义 Hooks
├── store/            # Redux 状态管理
├── utils/            # 工具函数
├── views/            # 页面组件
│   ├── home/         # 首页
│   ├── my/           # 个人中心
│   ├── show/         # 功能演示
│   │   ├── elementAuth/  # 元素权限演示
│   │   ├── iconSelect/   # 图标选择演示
│   │   └── multiLevelMenu/ # 多级菜单演示
│   ├── LoginPage.jsx # 登录页面
│   └── NotFound.jsx  # 404页面
├── App.jsx           # 根组件
└── main.jsx          # 入口文件
```

## 核心功能模块

### 页面展示

#### 1. 首页
- 系统首页展示

#### 2. 个人中心
- 用户个人信息管理

#### 3. 功能演示
- 元素权限控制演示
- 图标选择器演示
- 多级菜单演示

### 系统功能

#### 1. 动态路由和菜单
- 基于后端返回的权限数据动态生成路由和菜单
- 支持多级菜单结构

#### 2. 主题和布局
- 支持暗色/亮色主题切换
- 提供多种布局模式（默认布局、顶部导航布局）
- 主题切换时带有流畅的动画效果

#### 3. 标签页管理
- 多标签页浏览体验
- 支持右键菜单操作（关闭当前、关闭其他、关闭所有）
- 标签页状态持久化

#### 4. 权限控制
- 基于 JWT Token 的认证机制
- 登录状态管理和自动过期处理
- 路由级别的权限控制
- 元素级别（按钮）权限控制

#### 5. 状态管理
- 使用 Redux Toolkit 管理全局状态
- 用户信息、主题设置、标签页状态等集中管理
- 状态持久化到 localStorage

## 快速开始

### 安装依赖

```bash
pnpm install
```

### 开发环境启动

```bash
pnpm run dev
```

默认会在 `http://localhost:8848` 启动开发服务器。

### 构建生产版本

```bash
pnpm run build
```

### 代码检查

```bash
pnpm run lint
```

## 配置说明

### 代理配置

项目在 `vite.config.js` 中配置 API 代理 如下：

```javascript
proxy: {
  "/admin": {
    target: "http://14.103.135.216:8091",
    changeOrigin: true
  },
  "/file": {
    target: "http://14.103.135.216:8092",
    changeOrigin: true
  }
}
```

根据不同的 API 前缀，请求会被代理到不同的后端服务：
- `/admin` 开头的请求代理到主后台服务 (8091端口)
- `/file` 开头的请求代理到文件服务 (8092端口)

### 别名配置

项目配置了 `@` 作为 `src` 目录的别名，方便导入模块。

## 状态管理

项目使用 Redux Toolkit 管理全局状态，主要包括以下几个模块：

1. **user**: 用户认证信息（token、用户信息）
2. **theme**: 主题设置（暗色模式、布局类型）
3. **tabs**: 标签页状态

## 主题切换

系统支持亮色和暗色主题切换，并在切换时提供流畅的动画效果。主题设置会自动保存到 localStorage 中。

## 浏览器兼容性

- 现代浏览器（Chrome, Firefox, Safari, Edge 最近两个版本）

## 开发规范

- 使用 ESLint 进行代码检查
- 遵循 Airbnb JavaScript 风格指南
- 组件和文件命名采用 PascalCase 或 camelCase
- 使用 CSS Modules 或内联样式管理组件样式
- 图标统一使用 Ant Design 风格

## 注意事项

1. 项目使用 pnpm 作为包管理器，请勿使用 npm 或 yarn
2. 所有组件和工具函数应遵循单一职责原则
3. 样式文件使用 CSS Modules 避免样式冲突
4. 图标选择器统一使用 Ant Design 风格图标 
5. 已弃用 antd 的 List 组件，使用 Row/Col 组件替代
6. 代码块展示使用 Typography 组件配合 pre/code 标签