# LocalAI-Studio--user-admin-server-clint

**Repository Path**: php-chen/LocalAI-Studio--user-admin-server-clint

## Basic Information

- **Project Name**: LocalAI-Studio--user-admin-server-clint
- **Description**: This is a modern backend management system frontend project based on React + TypeScript + Vite, providing comprehensive backend functionality support for LocalAI Studio, including user management, work management, points management, task management, and more.
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-28
- **Last Updated**: 2026-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Local Admin Server Client

[**English**](README.md) | [**日本語**](README.ja-JP.md) | [**한국어**](README.ko-KR.md) | [**Español**](README.es-ES.md) | [**Français**](README.fr-FR.md) | [**Deutsch**](README.de-DE.md) | [**返回首页**](README.md)

---

## 📋 项目简介

这是一个基于 React + TypeScript + Vite 的现代化后台管理系统前端项目，为 LocalAI Studio 提供用户管理、作品管理、积分管理、任务管理等完整的后台功能支持。

## 🛠️ 技术栈

- **框架**: React 19 + TypeScript
- **构建工具**: Vite
- **UI 组件库**: Ant Design 6
- **样式方案**: Tailwind CSS
- **路由管理**: React Router DOM 7
- **HTTP 客户端**: Axios
- **代码质量**: ESLint

## ✨ 功能特性

### 🔐 用户认证系统
- 安全登录：RSA-OAEP 密码加密传输
- 验证码保护：防止暴力登录
- Token 管理：自动刷新机制
- 权限控制：私有路由保护
- 用户注册功能

### 📊 后台管理功能
- **首页**：数据概览
- **用户管理**：完整的 CRUD 操作
- **作品管理**：图片/视频预览、文件下载
- **积分管理**：用户积分管理
- **任务管理**：任务状态追踪
- **AI 模型配置**：模型参数管理
- **系统设置**：系统配置管理

### 🎨 界面特性
- 响应式设计：适配多种屏幕尺寸
- 现代化 UI：基于 Ant Design
- 状态映射：英文状态码转中文显示
- 智能截断：长 ID 和 UUID 自动截断
- 一键复制：点击即可复制完整内容

## 📁 项目结构

```
user-admin-server-clint/
├── public/                # 静态资源
│   ├── favicon.svg
│   └── icons.svg
├── src/
│   ├── api/              # API 相关
│   │   ├── axios.ts      # Axios 实例配置
│   │   └── openapi.json  # API 文档
│   ├── components/       # 公共组件
│   │   ├── Header.tsx    # 顶部导航
│   │   ├── Layout.tsx    # 布局组件
│   │   └── Sidebar.tsx   # 侧边栏
│   ├── pages/            # 页面组件
│   │   ├── Dashboard.tsx # 首页
│   │   ├── Login.tsx     # 登录页
│   │   ├── Register.tsx  # 注册页
│   │   ├── Users.tsx     # 用户管理
│   │   ├── Works.tsx     # 作品管理
│   │   ├── Points.tsx    # 积分管理
│   │   ├── Tasks.tsx     # 任务管理
│   │   ├── AIModels.tsx  # AI 模型配置
│   │   └── Settings.tsx  # 系统设置
│   ├── routes/           # 路由配置
│   │   └── index.tsx
│   ├── utils/            # 工具函数
│   │   └── passwordEncryptor.ts # 密码加密工具
│   ├── App.tsx           # 根组件
│   └── main.tsx          # 入口文件
├── .gitignore
├── package.json
├── pnpm-lock.yaml
├── vite.config.ts
├── tsconfig.json
├── tailwind.config.js
└── postcss.config.js
```

## 🚀 快速开始

### 环境要求
- Node.js >= 18
- pnpm >= 8

### 安装依赖
```bash
pnpm install
```

### 开发模式
```bash
pnpm dev
```

### 构建生产版本
```bash
pnpm build
```

### 预览构建结果
```bash
pnpm preview
```

### 代码检查
```bash
pnpm lint
```

## 📡 API 配置

项目使用 `/api` 作为基础路径，在 `src/api/axios.ts` 中配置：

```typescript
const api = axios.create({
  baseURL: '/api',
  timeout: 10000,
  withCredentials: true,
});
```

如需修改后端地址，可更新 `baseURL` 配置。

## 🔧 配置说明

### Vite 配置
- 开发服务器端口：默认 5173
- 代理配置：可在 `vite.config.ts` 中配置 API 代理

### 环境变量
可创建 `.env`、`.env.development`、`.env.production` 文件配置环境变量。

## 📝 开发指南

### 添加新页面
1. 在 `src/pages/` 创建新页面组件
2. 在 `src/routes/index.tsx` 添加路由配置
3. 在 `src/components/Sidebar.tsx` 添加导航菜单（如需要）

### API 调用
使用 `src/api/axios.ts` 中导出的 `api` 实例进行 HTTP 请求：

```typescript
import api from '../api/axios';

const response = await api.get('/your-endpoint');
```

## 📄 许可证

[MIT License](LICENSE)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📮 联系方式

如有问题，请通过以下方式联系：
- 提交 Issue
- 发送邮件

---

## 🌍 其他语言

- [English](README.md)
- [日本語](README.ja-JP.md)
- [한국어](README.ko-KR.md)
- [Español](README.es-ES.md)
- [Français](README.fr-FR.md)
- [Deutsch](README.de-DE.md)

---

[**返回顶部 ↑**](#local-admin-server-client)