# mini-game-front

**Repository Path**: AbsoRaise/mini-game-front

## Basic Information

- **Project Name**: mini-game-front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-09
- **Last Updated**: 2026-04-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Mini Game Arena - Frontend

uni-app (Vue 3) 跨平台前端项目，支持 H5 和微信小程序。

## 技术栈
- **框架**: uni-app + Vue 3 + Vite
- **状态管理**: Pinia
- **样式**: SCSS + Cyber Arena Dark 主题
- **通信**: uni.request + uni.connectSocket
- **平台**: H5 / 微信小程序

## 启动

### H5 开发模式
```bash
npm install
npm run dev:h5
```
开发服务器运行在 http://localhost:5173，自动代理 `/api` 和 `/ws` 到后端 8080 端口。

### 微信小程序
```bash
npm run dev:mp-weixin
```
编译产物在 `dist/dev/mp-weixin`，用微信开发者工具打开该目录。

> **注意**: 微信小程序需要在 `manifest.json` 中填写你的小程序 appid，并在微信后台配置服务器域名。

## 页面

### TabBar 页面（底部导航）
- `pages/home/home` - 游戏大厅（游戏卡片目录、即将上线、平台数据）
- `pages/leaderboard/leaderboard` - 排行榜（积分榜/胜场榜、Top3 领奖台）
- `pages/profile/profile` - 个人中心（资料、战绩、对局历史、退出登录）

### 子页面
- `pages/login/login` - 登录/注册
- `pages/game-lobby/game-lobby` - 游戏大厅（房间列表、规则、创建/加入房间）
- `pages/game/game` - 对战页面（棋盘、聊天、投降）
- `pages/admin/admin` - 管理后台（用户/房间/角色管理）

## 项目结构
```
src/
├── App.vue                        # 根组件
├── main.js                        # 入口
├── pages.json                     # 页面路由配置
├── manifest.json                  # 平台配置
├── uni.scss                       # 全局 SCSS 变量（Cyber Arena Dark 主题）
├── pages/
│   ├── home/home.vue              # 游戏目录（TabBar）
│   ├── leaderboard/leaderboard.vue # 排行榜（TabBar）
│   ├── profile/profile.vue        # 个人中心（TabBar）
│   ├── login/login.vue            # 登录注册
│   ├── game-lobby/game-lobby.vue  # 游戏大厅
│   ├── game/game.vue              # 对战页面
│   └── admin/admin.vue            # 管理后台
├── components/
│   ├── TabBar.vue                 # 自定义底部导航
│   ├── GameCard.vue               # 游戏卡片组件
│   └── SuperTicTacToe.vue         # 棋盘组件
├── store/
│   └── user.js                    # 用户状态 (Pinia)
└── utils/
    ├── request.js                 # HTTP 请求封装 + 所有 API
    └── websocket.js               # WebSocket 封装
```

## 多游戏架构
当前已实现 Super Tic-Tac-Toe，架构支持后续添加更多游戏：
1. 在后端 `GameCatalogController` 中注册新游戏类型
2. 在前端 `home.vue` 的 games 列表中添加新游戏卡片
3. 在 `game-lobby.vue` 的 `GAME_META` 中添加规则说明
4. 创建对应的游戏组件（如 `FiveInARow.vue`）