mirror of
https://github.com/chaitin/MonkeyCode.git
synced 2026-02-01 22:33:30 +08:00
227 lines
6.8 KiB
Markdown
227 lines
6.8 KiB
Markdown
# Monkey Code UI
|
||
|
||
> 一个现代化的代码开发平台前端应用，基于 React 19 和 TypeScript 构建，提供智能代码统计、用户管理、AI模型管理等核心功能。
|
||
|
||
[](https://reactjs.org/)
|
||
[](https://www.typescriptlang.org/)
|
||
[](https://vitejs.dev/)
|
||
[](https://mui.com/)
|
||
|
||
## ✨ 功能特性
|
||
|
||
### 📊 数据统计
|
||
- **全局统计**: 系统整体数据分析和可视化展示
|
||
- **成员统计**: 用户个人数据统计和活动分析
|
||
- **多维度图表**: 柱状图、折线图、饼图等多种数据展示方式
|
||
|
||
### 💬 智能交互
|
||
- **聊天功能**: 实时消息交流和会话管理
|
||
- **完成状态**: 任务完成情况跟踪和结果展示
|
||
|
||
### 🤖 模型管理
|
||
- **模型配置**: AI模型参数设置和管理
|
||
- **使用统计**: 模型调用次数和Token使用量统计
|
||
- **性能监控**: 模型响应时间和成功率监控
|
||
|
||
### 👥 用户管理
|
||
- **用户注册**: 完整的用户注册和认证流程
|
||
- **权限管理**: 基于角色的访问控制(RBAC)
|
||
- **邀请系统**: 用户邀请和团队管理
|
||
- **登录历史**: 用户登录记录和安全审计
|
||
|
||
### 🛡️ 管理后台
|
||
- **系统管理**: 全面的系统配置和监控
|
||
- **用户管理**: 管理员用户操作和权限分配
|
||
- **数据分析**: 深度业务数据分析和报表
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
### 前端框架
|
||
- **React 19** - 最新的React框架，支持Concurrent Features
|
||
- **TypeScript** - 类型安全的JavaScript超集
|
||
- **Vite** - 现代化的前端构建工具
|
||
|
||
### UI框架与样式
|
||
- **Material-UI (@mui)** - Google Material Design组件库
|
||
- **Emotion** - CSS-in-JS样式库
|
||
- **@c-x/ui** - 自定义组件库
|
||
|
||
### 状态管理与数据
|
||
- **ahooks** - React Hooks工具库
|
||
- **react-hook-form** - 高性能表单管理
|
||
- **axios** - HTTP客户端库
|
||
|
||
### 路由与导航
|
||
- **react-router-dom v7** - 声明式路由管理
|
||
|
||
### 数据可视化
|
||
- **ECharts** - 功能强大的图表库
|
||
- **react-activity-calendar** - 活动日历组件
|
||
|
||
### 工具库
|
||
- **dayjs** - 轻量级日期处理库
|
||
- **decimal.js** - 精确数值计算
|
||
- **lottie-react** - 动画效果库
|
||
- **react-markdown** - Markdown渲染器
|
||
- **react-syntax-highlighter** - 代码高亮显示
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
ui/
|
||
├── src/
|
||
│ ├── api/ # API请求层
|
||
│ │ ├── Billing.ts # 计费相关API
|
||
│ │ ├── Dashboard.ts # 仪表盘API
|
||
│ │ ├── Model.ts # 模型管理API
|
||
│ │ ├── OpenAiv1.ts # OpenAI接口
|
||
│ │ ├── User.ts # 用户管理API
|
||
│ │ ├── httpClient.ts # HTTP客户端配置
|
||
│ │ └── types.ts # API类型定义
|
||
│ ├── assets/ # 静态资源
|
||
│ │ ├── fonts/ # 字体文件
|
||
│ │ ├── images/ # 图片资源
|
||
│ │ ├── json/ # JSON配置文件
|
||
│ │ └── styles/ # 全局样式
|
||
│ ├── components/ # 公共组件
|
||
│ │ ├── avatar/ # 头像组件
|
||
│ │ ├── card/ # 卡片组件
|
||
│ │ ├── form/ # 表单组件
|
||
│ │ ├── header/ # 头部组件
|
||
│ │ ├── lottieIcon/ # 动画图标
|
||
│ │ ├── markDown/ # Markdown渲染
|
||
│ │ └── sidebar/ # 侧边栏组件
|
||
│ ├── layouts/ # 布局组件
|
||
│ │ └── mainLayout/ # 主布局
|
||
│ ├── pages/ # 页面组件
|
||
│ │ ├── admin/ # 管理员页面
|
||
│ │ ├── auth/ # 认证页面
|
||
│ │ ├── chat/ # 聊天页面
|
||
│ │ ├── completion/ # 完成页面
|
||
│ │ ├── dashboard/ # 仪表盘页面
|
||
│ │ ├── expectation/ # 期望页面
|
||
│ │ ├── invite/ # 邀请页面
|
||
│ │ ├── login/ # 登录页面
|
||
│ │ ├── model/ # 模型管理页面
|
||
│ │ └── user/ # 用户管理页面
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── router.tsx # 路由配置
|
||
│ ├── theme.ts # 主题配置
|
||
│ └── main.tsx # 应用入口
|
||
├── public/ # 公共资源
|
||
├── api-templates/ # API模板
|
||
├── scripts/ # 构建脚本
|
||
├── vite.config.ts # Vite配置
|
||
├── tsconfig.json # TypeScript配置
|
||
├── eslint.config.js # ESLint配置
|
||
└── package.json # 项目依赖
|
||
```
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- **Node.js** >= 18.0.0
|
||
- **pnpm** >= 7.0.0 (推荐使用pnpm作为包管理器)
|
||
|
||
### 安装步骤
|
||
|
||
1. **克隆项目**
|
||
```bash
|
||
git clone <repository-url>
|
||
cd monkey-code-ui
|
||
```
|
||
|
||
2. **安装依赖**
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
3. **启动开发服务器**
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
4. **访问应用**
|
||
打开浏览器访问: `http://localhost:3300`
|
||
|
||
### 环境配置
|
||
|
||
创建 `.env` 文件配置环境变量：
|
||
|
||
```bash
|
||
# API服务地址
|
||
VITE_API_BASE_URL=http://localhost:8080/
|
||
|
||
# 其他环境变量...
|
||
```
|
||
|
||
## 📝 可用脚本
|
||
|
||
| 命令 | 说明 |
|
||
|------|------|
|
||
| `pnpm dev` | 启动开发服务器 (端口: 3300) |
|
||
| `pnpm build` | 构建生产版本 |
|
||
| `pnpm preview` | 预览生产构建结果 |
|
||
| `pnpm lint` | 运行ESLint代码检查 |
|
||
| `pnpm api` | 生成API接口代码 |
|
||
| `pnpm icon` | 下载图标资源 |
|
||
|
||
## 🏗️ 构建部署
|
||
|
||
### 生产构建
|
||
|
||
```bash
|
||
pnpm build
|
||
```
|
||
|
||
构建产物将生成在 `dist/` 目录中。
|
||
|
||
### Docker 部署
|
||
|
||
项目包含 `nginx.conf` 配置文件，可用于 Docker 容器化部署：
|
||
|
||
```bash
|
||
# 构建Docker镜像
|
||
docker build -t monkey-code-ui .
|
||
|
||
# 运行容器
|
||
docker run -p 80:80 monkey-code-ui
|
||
```
|
||
|
||
## 🔧 开发指南
|
||
|
||
### 代码规范
|
||
|
||
- 使用 **TypeScript** 进行类型检查
|
||
- 遵循 **ESLint** 代码规范
|
||
- 使用 **Prettier** 格式化代码
|
||
- 采用 **函数式组件** + **Hooks** 开发模式
|
||
|
||
### API 集成
|
||
|
||
项目使用统一的API客户端配置，支持：
|
||
- 请求/响应拦截器
|
||
- 错误处理
|
||
- 类型安全的接口定义
|
||
|
||
### 主题定制
|
||
|
||
在 `src/theme.ts` 中配置Material-UI主题：
|
||
- 颜色方案
|
||
- 字体设置
|
||
- 组件样式覆盖
|
||
|
||
## 🤝 贡献指南
|
||
|
||
1. Fork 项目
|
||
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
|
||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||
5. 开启 Pull Request
|
||
|
||
|
||
## 📞 联系方式
|
||
|
||
如有问题或建议，请联系开发团队。
|