whale-town-end/client

🎛️ Whale Town 管理员前端界面

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

🚀 快速开始

📋 环境要求

• Node.js >= 18.0.0
• pnpm >= 8.0.0

🛠️ 安装与运行

# 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            # 项目配置

🔧 开发命令

# 启动开发服务器
pnpm run dev

# 构建生产版本
pnpm run build

# 预览生产构建
pnpm run preview

# 代码检查
pnpm run lint

# 代码格式化
pnpm run format

# 类型检查
pnpm run type-check

🌍 环境配置

开发环境 (.env.local)

VITE_API_BASE_URL=http://localhost:3000
VITE_APP_TITLE=Whale Town 管理后台

生产环境 (.env.production)

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 - 下载日志归档

🎨 界面预览

登录页面

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

用户管理页面

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

日志管理页面

• 实时日志显示
• 日志级别筛选
• 日志文件下载

🚀 部署指南

构建生产版本

# 构建
pnpm run build

# 构建产物在 dist/ 目录

部署到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文档
2. 项目架构文档
3. 开发规范指南

---

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