atlas-console/README.md

# Atlas Console

> A modern React admin dashboard template

## Features

- 🔐 Login authentication
- 📱 Responsive sidebar (collapsible)
- 📊 Dashboard with statistics
- ⚙️ Settings management
- 🎨 Clean UI design

## Tech Stack

- **Frontend**: React 19 + Vite
- **Routing**: React Router DOM
- **API**: Fetch API with mock support

## Quick Start

### Install Dependencies

```bash
npm install
```

### Development

```bash
npm run dev
```

Then open http://localhost:5173 in your browser.

### Build for Production

```bash
npm run build
```

The build output will be in the `dist` folder.

### Preview Production Build

```bash
npm run preview
```

## Demo Account

- **Username**: admin
- **Password**: admin123

## API Configuration

The project uses a centralized API service located at `src/api/index.js`.

### Using Mock Data

By default, the project uses mock data. To use real API:

1. Open `src/api/index.js`
2. Find this line:
   ```javascript
   const USE_MOCK = true // 启用 Mock 数据
   // const USE_MOCK = false // 使用真实 API
   ```
3. Change to:
   ```javascript
   // const USE_MOCK = true // 启用 Mock 数据
   const USE_MOCK = false // 使用真实 API
   ```

### API Endpoints

When connecting to a real backend, ensure these endpoints are available:

| Method | Endpoint | Description |
|--------|----------|-------------|
| POST | `/api/auth/login` | Login |
| GET | `/api/auth/info` | Get user info |
| POST | `/api/auth/logout` | Logout |
| GET | `/api/projects` | Get project list |
| GET | `/api/settings` | Get settings |
| POST | `/api/settings` | Save settings |
| GET | `/api/stats` | Get dashboard stats |

### Connecting to Real Backend

1. Open `src/api/index.js`
2. Modify the `BASE_URL`:
   ```javascript
   const BASE_URL = 'http://your-api-server.com/api'
   ```
3. Enable real API mode:
   ```javascript
   const USE_MOCK = false
   ```

## Project Structure

```
atlas-console/
├── public/              # Static assets
├── src/
│   ├── api/            # API service
│   │   ├── index.js    # Core API with mock support
│   │   └── modules/    # API modules
│   │       ├── auth.js     # Auth APIs
│   │       ├── project.js  # Project APIs
│   │       ├── settings.js # Settings APIs
│   │       └── stats.js    # Stats APIs
│   ├── assets/         # Images, fonts, etc.
│   ├── pages/          # Page components
│   │   ├── Login.jsx   # Login page
│   │   ├── Layout.jsx  # Main layout with sidebar
│   │   ├── Home.jsx    # Dashboard
│   │   ├── Menu1.jsx   # Menu 1 page
│   │   └── Menu2.jsx   # Menu 2 page
│   ├── App.jsx         # Root component
│   ├── main.jsx        # Entry point
│   └── index.css       # Global styles
├── index.html          # HTML template
├── package.json        # Dependencies
└── vite.config.js      # Vite configuration
```

## Deployment

### Static Hosting

The project can be deployed to any static hosting service:

#### Netlify

```bash
# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod
```

#### Vercel

```bash
# Install Vercel CLI
npm install -g vercel

# Deploy
vercel --prod
```

#### Nginx

1. Build the project: `npm run build`
2. Copy `dist` folder to Nginx web root
3. Configure Nginx:

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

#### Docker

Create a `Dockerfile`:

```dockerfile
FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

Build and run:

```bash
docker build -t atlas-console .
docker run -d -p 80:80 atlas-console
```

### Backend Integration

For production, you'll need a backend service that provides the API endpoints. The frontend expects:

- RESTful API at `/api/*`
- JWT token authentication
- CORS configured for your domain

## License

MIT