# 🎛️ Whale Town 管理员前端界面

基于 React + Vite + Ant Design 构建的现代化管理员后台界面。

## 🚀 快速开始

### 📋 环境要求
- Node.js >= 18.0.0
- pnpm >= 8.0.0

### 🛠️ 安装与运行

```bash
# 1. 确保后端服务已启动
cd ..
pnpm run dev

# 2. 安装前端依赖
cd client
pnpm install

# 3. 启动开发服务器
pnpm run dev

# 4. 访问管理界面
# 浏览器打开: http://localhost:5173
```

### 🔑 默认登录信息
- **用户名**: admin
- **密码**: Admin123456

## 🎯 核心功能

### 🔐 管理员认证
- 独立的Token认证系统
- 安全的登录验证
- 自动Token刷新

### 👥 用户管理
- 用户列表查看和搜索
- 用户状态管理
- 用户密码重置
- 分页和排序功能

### 📊 系统监控
- 实时日志查看
- 日志文件下载
- 系统状态监控

### 🎨 界面特性
- 响应式设计，支持移动端
- 现代化UI组件
- 暗色/亮色主题切换
- 国际化支持

## 🏗️ 技术栈

### 🚀 核心框架
- **React** `^18.0.0` - 前端UI框架
- **Vite** `^5.0.0` - 现代化构建工具
- **TypeScript** `^5.0.0` - 类型安全的JavaScript

### 🎨 UI组件
- **Ant Design** `^5.0.0` - 企业级UI组件库
- **Ant Design Icons** - 图标库
- **CSS Modules** - 样式模块化

### 🔧 开发工具
- **ESLint** - 代码质量检查
- **Prettier** - 代码格式化
- **Husky** - Git钩子管理

### 🌐 HTTP客户端
- **Axios** - HTTP请求库
- **React Query** - 数据获取和缓存

## 📁 项目结构

```
client/
├── src/
│   ├── components/          # 通用组件
│   ├── pages/              # 页面组件
│   ├── services/           # API服务
│   ├── utils/              # 工具函数
│   ├── types/              # TypeScript类型定义
│   ├── styles/             # 全局样式
│   ├── App.tsx             # 应用主组件
│   └── main.tsx            # 应用入口
├── public/                 # 静态资源
├── index.html              # HTML模板
├── vite.config.ts          # Vite配置
├── tsconfig.json           # TypeScript配置
└── package.json            # 项目配置
```

## 🔧 开发命令

```bash
# 启动开发服务器
pnpm run dev

# 构建生产版本
pnpm run build

# 预览生产构建
pnpm run preview

# 代码检查
pnpm run lint

# 代码格式化
pnpm run format

# 类型检查
pnpm run type-check
```

## 🌍 环境配置

### 开发环境 (.env.local)
```bash
VITE_API_BASE_URL=http://localhost:3000
VITE_APP_TITLE=Whale Town 管理后台
```

### 生产环境 (.env.production)
```bash
VITE_API_BASE_URL=https://your-api-domain.com
VITE_APP_TITLE=Whale Town 管理后台
```

## 🔗 API集成

### 认证接口
- `POST /admin/auth/login` - 管理员登录
- 自动Token管理和刷新

### 用户管理接口
- `GET /admin/users` - 获取用户列表
- `GET /admin/users/:id` - 获取用户详情
- `POST /admin/users/:id/reset-password` - 重置用户密码
- `PUT /admin/users/:id/status` - 修改用户状态

### 系统接口
- `GET /admin/logs/runtime` - 获取运行日志
- `GET /admin/logs/archive` - 下载日志归档

## 🎨 界面预览

### 登录页面
- 简洁的登录表单
- 输入验证和错误提示
- 记住登录状态

### 用户管理页面
- 用户列表表格
- 搜索和筛选功能
- 用户状态管理
- 密码重置操作

### 日志管理页面
- 实时日志显示
- 日志级别筛选
- 日志文件下载

## 🚀 部署指南

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

# 构建产物在 dist/ 目录
```

### 部署到Nginx
```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        root /path/to/client/dist;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 🤝 开发规范

### 代码风格
- 使用TypeScript进行类型检查
- 遵循ESLint和Prettier规范
- 组件使用函数式组件和Hooks

### 文件命名
- 组件文件使用PascalCase：`UserList.tsx`
- 工具文件使用camelCase：`apiClient.ts`
- 样式文件使用kebab-case：`user-list.module.css`

### 提交规范
- 遵循项目Git提交规范
- 提交前自动运行代码检查

## 📞 技术支持

如有问题，请查看：
1. [后端API文档](../docs/api/README.md)
2. [项目架构文档](../docs/ARCHITECTURE.md)
3. [开发规范指南](../docs/development/)

---

**🎛️ 现代化管理界面，让后台管理更高效！**