admin/MonkeyCode
1
0
Fork 0
mirror of https://github.com/chaitin/MonkeyCode.git synced 2026-02-02 06:43:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 修改样式

Browse Source
This commit is contained in:
Gavan
2025-06-26 16:39:17 +08:00
parent cb70d4485c
commit 07080ead09
27 changed files with 571 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
ui/README.md
View File

@@ -1,68 +1,226 @@
# baizhiyun-app-airport
# Monkey Code UI
一个基于React 19和TypeScript的前端应用，使用Vite构建，Material UI作为UI框架。
> 一个现代化的代码开发平台前端应用，基于 React 19 和 TypeScript 构建，提供智能代码统计、用户管理、AI模型管理等核心功能。
## 技术栈
[![React](https://img.shields.io/badge/React-19.1.0-blue.svg)](https://reactjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-blue.svg)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Vite-6.3.5-646CFF.svg)](https://vitejs.dev/)
[![Material-UI](https://img.shields.io/badge/Material--UI-6.4.12-0081CB.svg)](https://mui.com/)
- React 19
- TypeScript
- Vite
- Material UI (@mui) + Emotion
- 状态管理: ahooks
- 路由: react-router-dom v7
- 表单: react-hook-form
- 图表: echarts
- 动画: lottie-react
- API请求: axios
- 日期处理: dayjs
- Markdown处理: react-markdown
## ✨ 功能特性
## 主要功能
### 📊 数据统计
- **全局统计**: 系统整体数据分析和可视化展示
- **成员统计**: 用户个人数据统计和活动分析
- **多维度图表**: 柱状图、折线图、饼图等多种数据展示方式
1. **仪表盘**: 应用主界面，展示关键指标和数据概览
2. **聊天功能**: 用户交流界面
3. **完成/结果**: 展示操作结果或完成状态
4. **模型管理**: 模型相关操作和展示
5. **用户管理**: 用户信息管理
6. **管理员功能**: 系统管理后台
7. **认证和登录**: 用户认证流程
8. **邀请系统**: 用户邀请功能
### 💬 智能交互
- **聊天功能**: 实时消息交流和会话管理
- **完成状态**: 任务完成情况跟踪和结果展示
## 项目结构
### 🤖 模型管理
- **模型配置**: 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** - 代码高亮显示
## 📁 项目结构
```
src/
├── api/ # API请求相关
├── assets/ # 静态资源
├── components/ # 公共组件
├── layouts/ # 布局组件
├── pages/ # 页面组件
│ ├── admin/ # 管理员相关
│ ├── auth/ # 认证相关
│ ├── chat/ # 聊天功能
│ ├── completion/ # 完成/结果页面
│ ├── dashboard/ # 仪表盘
│ ├── invite/ # 邀请相关
│ ├── login/ # 登录页面
│ ├── model/ # 模型相关
│ └── user/ # 用户相关
├── router.tsx # 路由配置
├── theme.ts # 主题配置
├── utils/ # 工具函数
└── main.tsx # 应用入口
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 # 项目依赖
```
## 开发环境配置
## 🚀 快速开始
1. 确保已安装Node.js (>=18.0.0) 和 pnpm
2. 克隆项目仓库
3. 安装依赖: `pnpm install`
4. 启动开发服务器: `pnpm dev`
5. 打开浏览器访问: `http://localhost:5173`
### 环境要求
## 常用命令
- **Node.js** >= 18.0.0
- **pnpm** >= 7.0.0 (推荐使用pnpm作为包管理器)
- `pnpm dev`: 启动开发服务器
- `pnpm build`: 生产环境构建
- `pnpm preview`: 预览生产构建
- `pnpm lint`: 运行代码检查
### 安装步骤
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
## 📞 联系方式
如有问题或建议，请联系开发团队。

3
ui/package.json
View File

@@ -1,6 +1,5 @@
{
"name": "baizhiyun-app-airport",
"private": true,
"name": "monkey-code-ui",
"version": "0.0.0",
"type": "module",
"scripts": {

BIN
ui/public/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 64 KiB

20
ui/src/assets/fonts/font.css Normal file
View File

@@ -0,0 +1,20 @@
@font-face {
font-family: 'gilroy';
src: url('./gilroy-bold.otf');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'gilroy';
src: url('./gilroy-medium.otf');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'gilroy';
src: url('./gilroy-regular.otf');
font-weight: 400;
font-style: normal;
}

BIN
ui/src/assets/fonts/gilroy-bold.otf Executable file
View File

Binary file not shown.

BIN
ui/src/assets/fonts/gilroy-medium.otf Executable file
View File

Binary file not shown.

BIN
ui/src/assets/fonts/gilroy-regular.otf Executable file
View File

Binary file not shown.

BIN
ui/src/assets/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 52 KiB

1
ui/src/assets/react.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

57
ui/src/components/label/index.tsx Normal file
View File

@@ -0,0 +1,57 @@
import { styled, alpha } from '@mui/material';
interface StyledLabelProps {
color?: 'default' | 'success' | 'warning' | 'error' | 'info' | string;
}
const StyledLabel = styled('div')<StyledLabelProps>(
({ theme, color = 'default' }) => {
// 获取颜色值
const getColor = (colorProp: string) => {
// 如果是主题预设颜色
if (['success', 'warning', 'error', 'info'].includes(colorProp)) {
return theme.palette[
colorProp as 'success' | 'warning' | 'error' | 'info'
].main;
}
// 如果是 default，使用灰色
if (colorProp === 'default') {
return theme.palette.grey[500];
}
// 如果是自定义颜色字符串
return colorProp;
};
const textColor = getColor(color);
// 获取背景颜色（淡化版本）
const getBackgroundColor = (colorProp: string) => {
if (['success', 'warning', 'error', 'info'].includes(colorProp)) {
// 使用主题的 light 版本，如果没有则使用 alpha 透明度
const palette =
theme.palette[colorProp as 'success' | 'warning' | 'error' | 'info'];
return alpha(palette.main, 0.15);
}
// 如果是 default，使用淡灰色背景
if (colorProp === 'default') {
return theme.palette.grey[100];
}
// 对于自定义颜色，使用低透明度作为背景
return alpha(colorProp, 0.15);
};
return {
padding: theme.spacing(0.5, 1),
borderRadius: theme.shape.borderRadius * 4,
color: textColor,
backgroundColor: getBackgroundColor(color),
border: `1px solid ${alpha(textColor, 0.3)}`,
display: 'inline-flex',
alignItems: 'center',
fontSize: theme.typography.caption.fontSize,
fontWeight: theme.typography.fontWeightMedium,
};
}
);
export default StyledLabel;

7
ui/src/components/sidebar/index.tsx
View File

@@ -92,15 +92,18 @@ const Sidebar = () => {
window.open('https://baizhi.cloud', '_blank');
}}
>
<Icon type='icon-baizhiyunlogo' sx={{ fontSize: 20 }} />
<Box component='img' src={Logo} sx={{ width: 32, height: 32 }} />
<Box
sx={{
fontSize: '16px',
fontWeight: 'bold',
textAlign: 'center',
'&:first-letter': {
color: 'info.main',
},
}}
>
MonkeyCode
Monkey Code
</Box>
</Stack>

7
ui/src/index.css
View File

@@ -11,9 +11,14 @@ html {
padding: 0;
}
:root {
--font-gilory: 'gilroy';
--font-HarmonyOS: 'HarmonyOS';
}
body {
margin: 0;
font-family: 'PingFang SC', var(--font-gilory), var(--font-HarmonyOS),
font-family: var(--font-gilory), var(--font-HarmonyOS), 'PingFang SC',
'Roboto', 'Helvetica', 'Arial', sans-serif;
color: var(--mui-palette-text-primary);
font-weight: 400;

1
ui/src/main.tsx
View File

@@ -1,6 +1,7 @@
import ReactDOM from 'react-dom/client';
import 'dayjs/locale/zh-cn';
import { RouterProvider } from 'react-router-dom';
import '@/assets/fonts/font.css';
import '@/assets/fonts/iconfont';
import './index.css';
import '@/assets/styles/markdown.css';

1
ui/src/pages/admin/adminTable.tsx
View File

@@ -226,6 +226,7 @@ const AdminTable = () => {
</Button>
</Stack>
<Table<DomainAdminUser>
// height='calc(100% - 50px)'
columns={columns}
loading={loading}
dataSource={data?.users || []}

2
ui/src/pages/admin/index.tsx
View File

@@ -5,7 +5,7 @@ import { Stack } from '@mui/material';
const Admin = () => {
return (
<Stack gap={2}>
<Stack gap={2} sx={{ height: '100%' }}>
<AdminTable />
<LoginHistory />
</Stack>

14
ui/src/pages/chat/index.tsx
View File

@@ -4,8 +4,10 @@ import { getListChatRecord } from '@/api/Billing';
import { aggregatedTime } from '@/utils';
import dayjs from 'dayjs';
import { convertTokensToRMB } from '@/utils';
import Card from '@/components/card';
import { Box, Stack, styled, Chip } from '@mui/material';
import StyledLabel from '@/components/label';
import ChatDetailModal from './chatDetailModal';
import { ColumnsType } from '@c-x/ui/dist/Table';
@@ -69,19 +71,15 @@ const Chat = () => {
title: '工作模式',
width: 120,
render(value: DomainChatRecord['work_mode']) {
const workModeMap = {
const workModeMap: Record<string, string> = {
code: 'warning',
chat: 'success',
ask: 'info',
};
return (
<Chip
size='small'
label={value}
// variant='outlined'
// @ts-ignore
color={workModeMap[value] || 'default'}
/>
<StyledLabel color={value ? workModeMap[value] : 'default'}>
{value}
</StyledLabel>
);
},
},

8
ui/src/pages/completion/index.tsx
View File

@@ -9,6 +9,7 @@ import dayjs from 'dayjs';
import { ColumnsType } from '@c-x/ui/dist/Table';
import { addCommasToNumber } from '@/utils';
import CompletionDetailModal from './completionDetailModal';
import StyledLabel from '@/components/label';
const Completion = () => {
const [page, setPage] = useState(1);
@@ -65,12 +66,9 @@ const Completion = () => {
title: '是否采纳',
width: 130,
render(value: boolean) {
const color = value ? 'success' : 'default';
return (
<Chip
size='small'
label={value ? '已采纳' : '未采纳'}
color={value ? 'success' : 'default'}
/>
<StyledLabel color={color}>{value ? '已采纳' : '未采纳'}</StyledLabel>
);
},
},

200
ui/src/pages/dashboard/components/globalStatistic.tsx
View File

@@ -87,110 +87,110 @@ const GlobalStatistic = () => {
borderRadius: 2.5,
}}
>
<Grid container size={9} spacing={2}>
<Grid size={4}>
<UserCard data={statisticsData} />
</Grid>
<Grid size={8}>
<LineCharts
title='活跃用户'
data={userActiveChartData}
extra={
<>
最近 90 天共
<StyledHighlight>
{timeStatData?.total_users || 0}
</StyledHighlight>
个活跃用户数
</>
}
/>
</Grid>
<Grid size={4}>
<PieCharts
title='工作模式-对话任务'
data={categoryStatData.work_mode || []}
extra='最近 90 天'
/>
</Grid>
<Grid size={4}>
<PieCharts
title='编程语言'
data={categoryStatData.program_language || []}
extra='最近 90 天'
/>
</Grid>
<Grid size={4}>
<BarCharts
title='实时使用情况'
data={realTimeTokenChartData}
extra='近 60 分钟'
/>
</Grid>
<Grid size={6}>
<LineCharts
title='对话任务'
data={chatChartData}
extra={
<>
最近 90 天共
<StyledHighlight>
{timeStatData?.total_chats || 0}
</StyledHighlight>
个对话任务
</>
}
/>
</Grid>
<Grid size={6}>
<LineCharts
title='补全任务'
data={codeCompletionChartData}
extra={
<>
最近 90 天共
<StyledHighlight>
{timeStatData?.total_completions || 0}
</StyledHighlight>
个补全任务
</>
}
/>
</Grid>
<Grid size={6}>
<LineCharts
title='代码量'
data={codeLineChartData}
extra={
<>
最近 90 天共修改
<StyledHighlight>
{timeStatData?.total_lines_of_code || 0}
</StyledHighlight>
行代码
</>
}
/>
</Grid>
<Grid size={6}>
<LineCharts
title='补全任务采纳率'
data={acceptedPerChartData}
extra={
<>
最近 90 天平均采纳率为
<StyledHighlight>
{(timeStatData?.total_accepted_per || 0).toFixed(2)}
</StyledHighlight>
%
</>
}
/>
</Grid>
{/* <Grid container size={9} spacing={2}> */}
<Grid size={3}>
<UserCard data={statisticsData} />
</Grid>
<Grid size={6}>
<LineCharts
title='活跃用户'
data={userActiveChartData}
extra={
<>
最近 90 天共
<StyledHighlight>
{timeStatData?.total_users || 0}
</StyledHighlight>
个活跃用户数
</>
}
/>
</Grid>
<Grid size={3}>
<ContributionCard data={userCodeRankData} />
</Grid>
<Grid size={4}>
<PieCharts
title='工作模式-对话任务'
data={categoryStatData.work_mode || []}
extra='最近 90 天'
/>
</Grid>
<Grid size={4}>
<PieCharts
title='编程语言'
data={categoryStatData.program_language || []}
extra='最近 90 天'
/>
</Grid>
<Grid size={4}>
<BarCharts
title='实时使用情况'
data={realTimeTokenChartData}
extra='近 60 分钟'
/>
</Grid>
<Grid size={6}>
<LineCharts
title='对话任务'
data={chatChartData}
extra={
<>
最近 90 天共
<StyledHighlight>
{timeStatData?.total_chats || 0}
</StyledHighlight>
个对话任务
</>
}
/>
</Grid>
<Grid size={6}>
<LineCharts
title='补全任务'
data={codeCompletionChartData}
extra={
<>
最近 90 天共
<StyledHighlight>
{timeStatData?.total_completions || 0}
</StyledHighlight>
个补全任务
</>
}
/>
</Grid>
<Grid size={6}>
<LineCharts
title='代码量'
data={codeLineChartData}
extra={
<>
最近 90 天共修改
<StyledHighlight>
{timeStatData?.total_lines_of_code || 0}
</StyledHighlight>
行代码
</>
}
/>
</Grid>
<Grid size={6}>
<LineCharts
title='补全任务采纳率'
data={acceptedPerChartData}
extra={
<>
最近 90 天平均采纳率为
<StyledHighlight>
{(timeStatData?.total_accepted_per || 0).toFixed(2)}
</StyledHighlight>
%
</>
}
/>
</Grid>
{/* </Grid> */}
</Grid>
);
};

17
ui/src/pages/dashboard/components/statisticCard.tsx
View File

@@ -30,7 +30,7 @@ const StyledItem = styled('div')(({ theme }) => ({
const StyledText = styled('a')(({ theme }) => ({
fontSize: 14,
color: theme.palette.text.secondary,
color: theme.palette.text.primary,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
@@ -47,6 +47,7 @@ const StyledSerialNumber = styled('span')<{ num: number }>(({ theme, num }) => {
color: color,
fontSize: 14,
fontWeight: 700,
width: 8,
};
});
@@ -64,8 +65,16 @@ export const ContributionCard = ({
<Box sx={{ fontSize: 12, color: 'text.tertiary' }}>最近 90 天</Box>
</Stack>
<Stack gap={2} sx={{ mt: 2 }}>
{data.map((item, index) => (
<Box
gap={0.5}
sx={{
mt: 2,
display: 'flex',
flexDirection: 'column',
height: 120,
}}
>
{data.slice(0, 5).map((item, index) => (
<Stack
direction='row'
alignItems='center'
@@ -104,7 +113,7 @@ export const ContributionCard = ({
<Box sx={{ fontSize: 14 }}>{item.lines}</Box>
</Stack>
))}
</Stack>
</Box>
</Card>
);
};

80
ui/src/pages/model/components/modelCard.tsx
View File

@@ -3,7 +3,8 @@ import Card from '@/components/card';
import { useRequest } from 'ahooks';
import { getMyModelList, putUpdateModel } from '@/api/Model';
import { DomainModel, ConstsModelStatus } from '@/api/types';
import { Stack, Box, Button, Grid2 as Grid, Chip } from '@mui/material';
import { Stack, Box, Button, Grid2 as Grid, ButtonBase } from '@mui/material';
import StyledLabel from '@/components/label';
import { Icon, Modal, message } from '@c-x/ui';
import { addCommasToNumber } from '@/utils';
import NoData from '@/assets/images/nodata.png';
@@ -78,26 +79,31 @@ const ModelItem = ({
position: 'relative',
transition: 'all 0.3s ease',
boxShadow:
'0px 12px 24px -4px rgba(68, 80, 91, 0.1), 0px 0px 2px 0px rgba(68, 80, 91, 0.1)',
'0px 0px 10px 0px rgba(68, 80, 91, 0.1), 0px 0px 2px 0px rgba(68, 80, 91, 0.1)',
'&:hover': {
boxShadow:
'rgba(54, 59, 76, 0.3) 0px 10px 30px 0px, rgba(54, 59, 76, 0.03) 0px 0px 1px 1px',
},
'&::before': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: 3,
background: data.is_active
? 'linear-gradient(90deg, #4CAF50, #66BB6A)'
: 'linear-gradient(90deg, #E0E0E0, #BDBDBD)',
transition: 'all 0.3s ease',
},
// '&::before': {
// content: '""',
// position: 'absolute',
// top: 0,
// left: 0,
// right: 0,
// height: 3,
// background: data.is_active
// ? 'linear-gradient(90deg, #4CAF50, #66BB6A)'
// : 'linear-gradient(90deg, #E0E0E0, #BDBDBD)',
// transition: 'all 0.3s ease',
// },
}}
>
<Stack direction='row' alignItems='center' justifyContent='space-between'>
<Stack
direction='row'
alignItems='center'
justifyContent='space-between'
sx={{ height: 28 }}
>
<Stack direction='row' alignItems='center' gap={1}>
<Icon
type={
@@ -108,13 +114,7 @@ const ModelItem = ({
<Box sx={{ fontWeight: 700 }}>{data.model_name}</Box>
</Stack>
{data.is_active && (
<Chip
size='small'
label='正在使用'
sx={{ color: '#fff', bgcolor: 'success.dark' }}
/>
)}
{data.is_active && <StyledLabel color='success'>正在使用</StyledLabel>}
</Stack>
<Stack
gap={1}
@@ -154,20 +154,39 @@ const ModelItem = ({
direction='row'
justifySelf='flex-end'
sx={{ button: { minWidth: 0 } }}
gap={2}
>
<Button color='info' size='small' onClick={() => onEdit(data)}>
<ButtonBase
disableRipple
sx={{
color: 'info.main',
}}
onClick={() => onEdit(data)}
>
编辑
</Button>
</ButtonBase>
{!data.is_active && (
<Button color='success' size='small' onClick={onActiveModel}>
<ButtonBase
disableRipple
sx={{
color: 'success.main',
}}
onClick={onActiveModel}
>
激活
</Button>
</ButtonBase>
)}
{data.is_active && (
<Button color='error' size='small' onClick={onInactiveModel}>
<ButtonBase
disableRipple
sx={{
color: 'error.main',
}}
onClick={onInactiveModel}
>
停用
</Button>
</ButtonBase>
)}
{/* <Button color='error' size='small'>
删除
@@ -229,7 +248,10 @@ const ModelCard: React.FC<IModelCardProps> = ({ title, modelType }) => {
<ModelModal
open={open}
onClose={() => setOpen(false)}
onClose={() => {
setOpen(false);
setEditData(null);
}}
refresh={refresh}
data={editData}
modelType={modelType}

3
ui/src/pages/model/components/modelModal.tsx
View File

@@ -198,6 +198,9 @@ const ModelModal = ({
if (open) {
getListModel().then((res) => {
setModelUserList(res.providers || []);
if (!data) {
setValue('provider', res.providers?.[0].provider || 'DeepSeek');
}
});
}
}, [open]);

18
ui/src/pages/model/components/tokenUsage.tsx
View File

@@ -18,7 +18,7 @@ const StyledTokenWrapper = styled(Stack)(({ theme }) => ({
fontSize: 14,
backgroundColor: theme.vars.palette.grey[50],
borderRadius: '10px',
padding: theme.spacing(1.5, 1),
padding: theme.spacing(1.5),
}));
const TokenUsage = () => {
@@ -68,7 +68,9 @@ const TokenUsage = () => {
<StyledHighlight>
{addCommasToNumber(llmModelData?.total_input)}
</StyledHighlight>
<Box sx={{ color: 'text.tertiary' }}>对话模型 - 输入 Token</Box>
<Box sx={{ color: 'text.tertiary', fontSize: 12 }}>
对话模型 - 输入 Token
</Box>
</StyledTokenWrapper>
<LineCharts data={llmInputData} name='输入 Token' />
</Stack>
@@ -77,7 +79,9 @@ const TokenUsage = () => {
<StyledHighlight>
{addCommasToNumber(llmModelData?.total_output)}
</StyledHighlight>
<Box sx={{ color: 'text.tertiary' }}>对话模型 - 输出 Token</Box>
<Box sx={{ color: 'text.tertiary', fontSize: 12 }}>
对话模型 - 输出 Token
</Box>
</StyledTokenWrapper>
<LineCharts data={llmOutputData} name='输出 Token' />
</Stack>
@@ -86,7 +90,9 @@ const TokenUsage = () => {
<StyledHighlight>
{addCommasToNumber(coderModelData?.total_input)}
</StyledHighlight>
<Box sx={{ color: 'text.tertiary' }}>代码补全模型 - 输入 Token</Box>
<Box sx={{ color: 'text.tertiary', fontSize: 12 }}>
代码补全模型 - 输入 Token
</Box>
</StyledTokenWrapper>
<LineCharts data={coderInputData} name='输入 Token' />
</Stack>
@@ -95,7 +101,9 @@ const TokenUsage = () => {
<StyledHighlight>
{addCommasToNumber(coderModelData?.total_output)}
</StyledHighlight>
<Box sx={{ color: 'text.tertiary' }}>代码补全模型 - 输出 Token</Box>
<Box sx={{ color: 'text.tertiary', fontSize: 12 }}>
代码补全模型 - 输出 Token
</Box>
</StyledTokenWrapper>
<LineCharts data={coderOutputData} name='输出 Token' />

63
ui/src/pages/user/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import Card from '@/components/card';
import { Stack, styled, Switch } from '@mui/material';
import { Grid2 as Grid, Stack, styled, Switch } from '@mui/material';
import { useRequest } from 'ahooks';
import { getGetSetting, putUpdateSetting } from '@/api/User';
import MemberManage from './memberManage';
@@ -37,32 +37,41 @@ const User = () => {
});
return (
<Stack gap={2}>
<StyledCard>
<StyledLabel>单点登录</StyledLabel>
<Switch
checked={data?.enable_sso}
onChange={(e) => updateSetting({ enable_sso: e.target.checked })}
/>
</StyledCard>
<StyledCard>
<StyledLabel>强制成员启用两步认证</StyledLabel>
<Switch
checked={data?.force_two_factor_auth}
onChange={(e) => {
console.log(e.target.checked);
updateSetting({ force_two_factor_auth: e.target.checked });
}}
/>
</StyledCard>
<StyledCard>
<StyledLabel>禁止成员使用密码登录</StyledLabel>
<Switch
checked={data?.disable_password_login}
onChange={(e) =>
updateSetting({ disable_password_login: e.target.checked })
}
/>
</StyledCard>
<Grid container spacing={2}>
<Grid size={4}>
<StyledCard>
<StyledLabel>单点登录</StyledLabel>
<Switch
checked={data?.enable_sso}
onChange={(e) => updateSetting({ enable_sso: e.target.checked })}
/>
</StyledCard>
</Grid>
<Grid size={4}>
<StyledCard>
<StyledLabel>强制成员启用两步认证</StyledLabel>
<Switch
checked={data?.force_two_factor_auth}
onChange={(e) => {
console.log(e.target.checked);
updateSetting({ force_two_factor_auth: e.target.checked });
}}
/>
</StyledCard>
</Grid>
<Grid size={4}>
<StyledCard>
<StyledLabel>禁止成员使用密码登录</StyledLabel>
<Switch
checked={data?.disable_password_login}
onChange={(e) =>
updateSetting({ disable_password_login: e.target.checked })
}
/>
</StyledCard>
</Grid>
</Grid>
<MemberManage />
<LoginHistory />
</Stack>

1
ui/src/pages/user/inviteUserModal.tsx
View File

@@ -23,7 +23,6 @@ const InviteUserModal = ({
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(inviteUrl);
message.success('链接已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);

16
ui/src/pages/user/memberManage.tsx
View File

@@ -336,11 +336,23 @@ const MemberManage = () => {
>
<Box sx={{ fontWeight: 700 }}>成员列表</Box>
<Stack direction='row' gap={1}>
<TextField label='搜索' size='small' />
<TextField
label='搜索'
size='small'
sx={{
fontSize: 14,
'.MuiInputLabel-root': {
fontSize: 14,
},
'.MuiInputBase-root': {
height: 36.5,
boxSizing: 'border-box',
},
}}
/>
<Button
variant='contained'
color='primary'
size='small'
onClick={() => setOpen(true)}
>
邀请新用户

13
ui/src/theme.ts
View File

@@ -20,13 +20,13 @@ const lightTheme = createTheme(
main: '#F64E54',
},
success: {
main: '#82DDAF',
main: '#35B37E',
light: '#AAF27F',
dark: '#229A16',
contrastText: '#fff',
},
info: {
main: '#556AFF',
main: '#3248F2',
},
disabled: {
main: '#666',
@@ -50,6 +50,8 @@ const lightTheme = createTheme(
primary: '#21222D',
secondary: 'rgba(33,34,45, 0.7)',
tertiary: 'rgba(33,34,45, 0.5)',
// @ts-ignore
auxiliary: 'rgba(33,34,45, 0.5)',
disabled: 'rgba(33,34,45, 0.2)',
},
divider: '#ECEEF1',
@@ -96,7 +98,7 @@ const lightTheme = createTheme(
MuiButtonBase: {
styleOverrides: {
root: {
lineHeight: '1.5',
// lineHeight: '1.5',
fontFamily: 'var(--font-gilory), var(--font-HarmonyOS)',
},
},
@@ -104,7 +106,7 @@ const lightTheme = createTheme(
MuiButton: {
styleOverrides: {
root: {
lineHeight: '1.5',
// lineHeight: '1.5',
borderRadius: '10px',
boxShadow: 'none',
},
@@ -158,6 +160,9 @@ const lightTheme = createTheme(
paddingLeft: '24px !important',
fontFamily: 'var(--font-gilory), var(--font-HarmonyOS)',
padding: '25px 12px 26px !important',
'&:first-of-type': {
paddingLeft: '16px !important',
},
},
head: {
paddingTop: '0 !important',

31
ui/vite.config.ts
View File

@@ -1,20 +1,25 @@
import { defineConfig } from 'vite';
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
export default defineConfig(({ mode }) => {
// 加载环境变量
const env = loadEnv(mode, process.cwd(), '');
return {
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
},
server: {
proxy: {
'^/api/': process.env.VITE_API_BASE_URL || 'http://localhost:8080/',
server: {
proxy: {
'^/api/': env.VITE_API_BASE_URL || 'http://localhost:8080/',
},
host: '0.0.0.0',
port: 3300,
},
host: '0.0.0.0',
port: 3300,
},
};
});