# 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.zh-CN.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)

---

## 📋 Project Introduction

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.

## 🛠️ Tech Stack

- **Framework**: React 19 + TypeScript
- **Build Tool**: Vite
- **UI Component Library**: Ant Design 6
- **Styling**: Tailwind CSS
- **Routing**: React Router DOM 7
- **HTTP Client**: Axios
- **Code Quality**: ESLint

## ✨ Features

### 🔐 User Authentication System
- Secure Login: RSA-OAEP password encryption
- Captcha Protection: Prevent brute force attacks
- Token Management: Auto-refresh mechanism
- Permission Control: Private route protection
- User Registration

### 📊 Backend Management
- **Dashboard**: Data overview
- **User Management**: Complete CRUD operations
- **Works Management**: Image/video preview, file download
- **Points Management**: User points management
- **Tasks Management**: Task status tracking
- **AI Models Configuration**: Model parameter management
- **Settings**: System configuration

### 🎨 UI Features
- Responsive Design: Adapt to various screen sizes
- Modern UI: Based on Ant Design
- Status Mapping: English status codes to Chinese display
- Smart Truncation: Long IDs and UUIDs auto-truncated
- One-click Copy: Click to copy full content

## 📁 Project Structure

```
user-admin-server-clint/
├── public/                # Static assets
│   ├── favicon.svg
│   └── icons.svg
├── src/
│   ├── api/              # API related
│   │   ├── axios.ts      # Axios instance configuration
│   │   └── openapi.json  # API documentation
│   ├── components/       # Common components
│   │   ├── Header.tsx    # Header navigation
│   │   ├── Layout.tsx    # Layout component
│   │   └── Sidebar.tsx   # Sidebar
│   ├── pages/            # Page components
│   │   ├── Dashboard.tsx # Home page
│   │   ├── Login.tsx     # Login page
│   │   ├── Register.tsx  # Registration page
│   │   ├── Users.tsx     # User management
│   │   ├── Works.tsx     # Works management
│   │   ├── Points.tsx    # Points management
│   │   ├── Tasks.tsx     # Tasks management
│   │   ├── AIModels.tsx  # AI Models configuration
│   │   └── Settings.tsx  # Settings
│   ├── routes/           # Route configuration
│   │   └── index.tsx
│   ├── utils/            # Utility functions
│   │   └── passwordEncryptor.ts # Password encryption utility
│   ├── App.tsx           # Root component
│   └── main.tsx          # Entry file
├── .gitignore
├── package.json
├── pnpm-lock.yaml
├── vite.config.ts
├── tsconfig.json
├── tailwind.config.js
└── postcss.config.js
```

## 🚀 Quick Start

### Requirements
- Node.js >= 18
- pnpm >= 8

### Install Dependencies
```bash
pnpm install
```

### Development Mode
```bash
pnpm dev
```

### Build for Production
```bash
pnpm build
```

### Preview Build Result
```bash
pnpm preview
```

### Lint Code
```bash
pnpm lint
```

## 📡 API Configuration

The project uses `/api` as the base path, configured in `src/api/axios.ts`:

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

To modify the backend address, update the `baseURL` configuration.

## 🔧 Configuration

### Vite Configuration
- Dev server port: Default 5173
- Proxy: Configure API proxy in `vite.config.ts`

### Environment Variables
Create `.env`, `.env.development`, `.env.production` files to configure environment variables.

## 📝 Development Guide

### Adding New Pages
1. Create a new page component in `src/pages/`
2. Add route configuration in `src/routes/index.tsx`
3. Add navigation menu in `src/components/Sidebar.tsx` (if needed)

### Making API Calls
Use the `api` instance exported from `src/api/axios.ts` for HTTP requests:

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

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

## 📄 License

[MIT License](LICENSE)

## 🤝 Contributing

Issues and Pull Requests are welcome!

## 📮 Contact

If you have any questions, please contact us by:
- Submitting an Issue
- Sending an email

---

## 🌍 Other Languages / 其他语言

- [简体中文](README.zh-CN.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)

---

[**Back to Top ↑**](#local-admin-server-client)