2026最新多游戏H5掼蛋房卡
### 核心功能清单
| # | 界面 | 文件路径 | 功能描述 |
|---|------|---------|---------|
| 01 | 游戏大厅 | `client/src/views/GameHall.vue` | 用户信息栏、资源显示(钻石/金币/房卡)、6大游戏入口(掼蛋/斗地主/跑得快/好友房/比赛/组队)、快捷操作、底部Tab导航 |
| 02 | 房间列表 | `client/src/views/RoomListPage.vue` | 房间筛选(按游戏类型)、房间卡片列表(房间号/类型/人数/消耗)、加入房间功能 |
| 03 | 创建房间 | `client/src/views/CreateRoomPage.vue` | 游戏类型选择(3种)、规则配置(局数/人数/红心配牌/历史查看等开关)、房卡消耗提示、创建确认 |
| 04 | 邀请玩家 | (集成在GameTablePage) | 四人座位布局(上/左/右/下)、玩家头像/状态、等待开始界面 |
| 05 | 掼蛋对局 | `client/src/views/GameTablePage.vue` | **核心界面** - 绿色牌桌背景、四人座位、手牌扇形展示(27张)、选牌出牌/不出/提示、操作按钮栏、侧边工具栏(聊天/表情/设置/解散)、计时器、离开确认弹窗 |
| 06 | 商城 | `client/src/views/ShopPage.vue` | 资源余额展示、钻石充值商品(4档+赠送)、房卡购买商品(4档+赠送)、支付方式选择(微信/支付宝/银行卡)、底部购买按钮 |
| 07 | 个人中心 | `client/src/views/PersonalCenterPage.vue` | 头像/VIP徽章、数据统计(总局数/胜场/胜率)、钱包资源(钻石/金币/房卡/可提现)、6宫格功能菜单(赠送/推广/提现/充值/设置/退出)、最近对局记录 |
| 08 | 卡票赠送 | `client/src/views/GiftPage.vue` | 资源类型选择(房卡/钻石/金币)、接收人输入(用户ID或手机号)、数量调节(+/-)、留言输入、余额校验、确认赠送 |
| 09 | 邀请推广 | `client/src/views/AgentPromotePage.vue` | **代理系统** - 未成为代理时:5级佣金体系展示(L1-L5各30%/15%/8%/4%/2%)、申请代理按钮;已是代理:等级/推广码/统计数据(可提现/累计佣金/下级代理/直属玩家)、推广二维码、佣金明细列表、团队树形统计 |
| 10 | 设置 | `client/src/views/SettingsPage.vue` | 账号信息、账号安全(改密/绑手机/绑微信)、偏好设置(音效/音乐/震动/深色模式-4个开关)、其他(版本号/协议/隐私政策/退出登录) |
### 后台管理系统
| 模块 | 功能 |
|------|------|
| 数据概览 | 总用户数/今日新增/订单总数/今日营收/代理商数 - 5大数据卡片 |
| 用户管理 | 搜索用户、详情查看、冻结/解封 |
| 代理审核 | 待审核代理列表、通过/拒绝操作 |
| 提现审核 | 待处理提现列表、风控标记(通过/可疑/风险)、通过打款/驳回 |
| 订单管理 | 充值订单查看与对账 |
| 系统配置 | 佣金比例/费率等参数在线修改 |
---
## 二、技术架构
```
guan-dan-game/
├── server/ # Node.js 后端服务
│ ├── src/
│ │ ├── app.js # 服务入口
│ │ ├── config/
│ │ │ └── database.js # 数据库配置
│ │ ├── routes/
│ │ │ ├── auth.js # 认证路由(注册/登录/微信登录)
│ │ │ ├── user.js # 用户路由(信息/代理申请/赠送/推广码)
│ │ │ ├── room.js # 房间路由(创建/加入/列表/解散)
│ │ │ ├── game.js # 游戏路由
│ │ │ ├── payment.js # 支付路由(下单/回调/多通道/佣金分发)
│ │ │ ├── withdraw.js # 提现路由(申请/记录/风控)
│ │ │ ├── agent.js # 代理路由(信息/佣金/团队树)
│ │ │ └── admin.js # 后台管理路由(概览/审核/配置)
│ │ └── utils/
│ │ └── db.js # MySQL连接池封装
│ ├── database/
│ │ └── schema.sql # 完整数据库设计(12张表)
│ └── package.json
│
├── client/ # Vue3 H5前端
│ ├── src/
│ │ ├── main.js # 入口
│ │ ├── App.vue # 根组件
│ │ ├── router/index.js # 路由(11个页面)
│ │ ├── stores/user.js # Pinia状态管理
│ │ ├── api/index.js # Axios封装
│ │ ├── assets/styles/global.css# 全局样式(移动端优先)
│ │ └── views/
│ │ ├── GameHall.vue # 01 大厅
│ │ ├── Login.vue # 登录页
│ │ ├── Register.vue # 注册页
│ │ ├── RoomListPage.vue # 02 房间列表
│ │ ├── CreateRoomPage.vue# 03 创建房间
│ │ ├── GameTablePage.vue # 04/05 对局界面
│ │ ├── ShopPage.vue # 06 商城
│ │ ├── PersonalCenterPage.vue # 07 个人中心
│ │ ├── GiftPage.vue # 08 赠送
│ │ ├── AgentPromotePage.vue # 09 推广代理
│ │ ├── SettingsPage.vue # 10 设置
│ │ └── AdminDashboard.vue# 后台管理
│ ├── index.html
│ ├── vite.config.js
│ └── package.json
```
### 技术栈
| 层级 | 技术 | 说明 |
|------|------|------|
| 前端框架 | Vue 3.4 + Vite 5 | Composition API, HMR热更新 |
| 状态管理 | Pinia 2.x | 轻量级全局状态 |
| 路由 | Vue Router 4 | Hash模式, 支持微信内嵌 |
| HTTP客户端 | Axios | 拦截器自动携带Token |
| 后端框架 | Express 4.x | RESTful API设计 |
| 数据库 | MySQL 8.0 | InnoDB引擎, 事务支持 |
| 认证 | JWT (jsonwebtoken) | 7天有效期Token |
| 密码加密 | bcryptjs | saltRounds=10 |
| 二维码 | qrcode | 推广码生成 |
| UI风格 | 原生CSS | 移动端480px适配, 暗色主题 |
页:
[1]