85d488a508
- 重新组织docs目录结构，按功能模块分类 - 新增deployment和development目录 - 更新API文档结构 - 添加客户端README文档 - 移除过时的文档文件
222 lines
4.5 KiB
Markdown
222 lines
4.5 KiB
Markdown
# 🎛️ 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/)
|
||
|
||
---
|
||
|
||
**🎛️ 现代化管理界面，让后台管理更高效！** |