# GameGroup 前端项目

游戏社群管理平台前端应用,基于 Vue 3 + TypeScript + Vite + Element Plus 构建。

## 技术栈

- **框架**: Vue 3.4+
- **语言**: TypeScript 5.3+
- **构建工具**: Vite 5.0+
- **UI 框架**: Element Plus 2.5+
- **状态管理**: Pinia 2.1+
- **路由**: Vue Router 4.2+
- **HTTP 客户端**: Axios 1.6+
- **CSS 框架**: Tailwind CSS 3.4+
- **CSS 预处理**: Sass 1.69+

## 项目结构

```
GameGroupFE/
├── doc/                     # 文档目录
│   └── 开发步骤文档.md      # 开发步骤文档
├── public/                  # 静态资源
├── src/
│   ├── api/                 # API 接口
│   │   ├── auth.ts         # 认证接口
│   │   ├── user.ts         # 用户接口
│   │   ├── group.ts        # 小组接口
│   │   ├── game.ts         # 游戏接口
│   │   └── appointment.ts  # 预约接口
│   ├── assets/             # 资源文件
│   │   ├── images/        # 图片
│   │   ├── icons/         # 图标
│   │   └── styles/        # 样式
│   ├── components/         # 组件
│   │   ├── common/        # 通用组件
│   │   │   ├── Button/
│   │   │   ├── Input/
│   │   │   ├── Modal/
│   │   │   └── Card/
│   │   ├── business/      # 业务组件
│   │   │   ├── UserCard/
│   │   │   ├── GroupCard/
│   │   │   ├── GameCard/
│   │   │   └── AppointmentCard/
│   │   └── layout/        # 布局组件
│   │       ├── MainLayout.vue
│   │       ├── AppHeader.vue
│   │       ├── AppSidebar.vue
│   │       └── MobileLayout.vue
│   ├── composables/       # 组合式函数
│   ├── constants/         # 常量
│   │   ├── enums.ts      # 枚举
│   │   └── config.ts     # 配置
│   ├── directives/        # 自定义指令
│   ├── router/           # 路由配置
│   │   └── index.ts
│   ├── stores/           # 状态管理
│   │   ├── auth.ts      # 认证状态
│   │   └── app.ts       # 应用状态
│   ├── types/            # 类型定义
│   │   ├── api.ts
│   │   ├── user.ts
│   │   ├── group.ts
│   │   ├── game.ts
│   │   └── appointment.ts
│   ├── utils/            # 工具函数
│   │   ├── request.ts   # HTTP 请求
│   │   ├── storage.ts   # 本地存储
│   │   ├── format.ts    # 格式化
│   │   └── validate.ts  # 验证
│   ├── views/           # 页面组件
│   │   ├── auth/       # 认证页面
│   │   ├── home/       # 首页
│   │   ├── user/       # 用户页面
│   │   ├── group/      # 小组页面
│   │   ├── game/       # 游戏页面
│   │   ├── appointment/ # 预约页面
│   │   ├── points/     # 积分页面
│   │   └── honor/      # 荣誉页面
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件
├── .gitignore
├── index.html
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

访问 http://localhost:5173

### 构建生产版本

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 主要功能

- ✅ 用户认证(登录/注册)
- ✅ 用户个人中心
- ✅ 小组管理
- ✅ 游戏库
- ✅ 预约管理
- ✅ 积分排行
- ✅ 荣誉墙
- ✅ 响应式设计
- ✅ 移动端适配

## 开发规范

### 命名规范

- 组件文件: PascalCase (UserCard.vue)
- 普通文件: kebab-case (user-profile.ts)
- 变量/函数: camelCase (getUserInfo)
- 常量: UPPER_SNAKE_CASE (API_BASE_URL)
- 类型/接口: PascalCase (UserProfile)

### Git 提交规范

```bash
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 重构
test: 测试相关
chore: 构建/工具相关
```

## 环境变量

创建 `.env.local` 文件配置环境变量:

```bash
VITE_API_BASE_URL=/api
```

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## License

MIT