# game_admin_web

**Repository Path**: iluim/game_admin_web

## Basic Information

- **Project Name**: game_admin_web
- **Description**: 云游戏运营管理后台前端页面
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-03
- **Last Updated**: 2025-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端管理界面 (soybean-admin)

基于 [soybean-admin](https://github.com/soybeanjs/soybean-admin) 构建的云游戏管理平台前端界面。

## 📖 概述

soybean-admin 是云游戏管理平台的前端管理界面，采用 Vue 3 + TypeScript + Naive UI 技术栈，提供现代化的管理界面和优秀的用户体验。界面支持响应式设计，适配 PC 端和移动端。

## 🛠️ 技术栈

- **框架**: Vue 3.5+ 
- **语言**: TypeScript 5.0+
- **构建工具**: Vite 6.0+
- **UI 组件库**: Naive UI
- **状态管理**: Pinia
- **路由**: Vue Router 4
- **样式**: UnoCSS + SCSS
- **包管理**: pnpm
- **代码规范**: ESLint + Prettier

## 🚀 快速开始

### 环境要求
- Node.js 18+
- pnpm 10.5.0+

### 安装依赖
```bash
cd soybean-admin
pnpm install
```

### 启动开发服务器
```bash
pnpm run dev
```

### 构建生产版本
```bash
pnpm run build
```

### 预览生产构建
```bash
pnpm run preview
```

## 📁 项目结构

```
soybean-admin/
├── packages/                # monorepo 包
│   ├── axios/              # axios 封装
│   ├── hooks/              # 公共 hooks
│   ├── materials/          # 物料组件
│   ├── utils/              # 工具函数
│   └── ...
├── public/                 # 静态资源
├── src/
│   ├── App.vue            # 根组件
│   ├── main.ts            # 入口文件
│   ├── assets/            # 静态资源
│   │   ├── imgs/          # 图片
│   │   └── svg-icon/      # SVG 图标
│   ├── components/        # 公共组件
│   │   ├── advanced/      # 高级组件
│   │   ├── common/        # 通用组件
│   │   ├── custom/        # 自定义组件
│   │   └── upload/        # 上传组件
│   ├── constants/         # 常量定义
│   ├── enum/              # 枚举定义
│   ├── hooks/             # hooks
│   │   ├── business/      # 业务 hooks
│   │   └── common/        # 通用 hooks
│   ├── layouts/           # 布局组件
│   ├── locales/           # 国际化
│   ├── plugins/           # 插件
│   ├── router/            # 路由配置
│   ├── service/           # API 服务
│   │   ├── api/           # API 接口
│   │   └── request/       # 请求封装
│   ├── store/             # 状态管理
│   ├── styles/            # 全局样式
│   ├── theme/             # 主题配置
│   ├── typings/           # 类型定义
│   ├── utils/             # 工具函数
│   └── views/             # 页面组件
│       ├── _builtin/      # 内置页面
│       ├── app/           # 应用管理
│       ├── config/        # 系统配置
│       ├── game/          # 游戏管理
│       ├── home/          # 首页
│       ├── payment/       # 支付管理
│       ├── resource/      # 资源管理
│       ├── stat/          # 统计分析
│       └── user/          # 用户管理
├── .env                   # 环境变量
├── .env.development       # 开发环境变量
├── .env.production        # 生产环境变量
├── vite.config.ts         # Vite 配置
├── package.json
└── README.md
```

## 🎯 功能模块

### 🏠 首页 (home)
- **概览面板**: 系统关键指标展示
- **数据图表**: 用户趋势、收入统计等可视化
- **快捷操作**: 常用功能快速入口

### 📱 应用管理 (app)
- **应用列表**: 应用信息展示和管理
- **应用配置**: 支付方式、登录方式配置
- **状态控制**: 应用启用/禁用

### 🎮 游戏管理 (game)
#### 游戏列表 (games)
- **游戏信息**: 游戏基本信息管理
- **标签管理**: 游戏标签增删改查
- **状态控制**: 游戏上下线管理
- **资源管理**: Logo、封面图片上传

#### 虚拟按键 (keyboard)
- **按键配置**: 键盘、手柄配置管理
- **配置预览**: 按键布局可视化

#### 游戏标签 (tags)
- **标签维护**: 标签增删改查
- **标签使用**: 查看标签关联的游戏

### 👥 用户管理 (user)
#### 用户账户 (account)
- **用户列表**: 用户基本信息展示
- **状态管理**: 用户启用/禁用
- **时长管理**: 账户时长查看和充值

#### 游玩记录 (plays)
- **使用记录**: 用户游戏使用记录查询
- **强制下机**: 在线用户强制下机
- **时长统计**: 游戏时长统计分析

#### 时长记录 (duration)
- **充值记录**: 用户时长充值历史
- **消费记录**: 用户时长消费明细

### 💰 支付管理 (payment)
#### 商品管理 (products)
- **商品配置**: 时长商品配置
- **价格管理**: 商品价格设置
- **状态控制**: 商品上下架

#### 订单管理 (orders)
- **订单查询**: 订单状态查询
- **支付跟踪**: 支付流程跟踪
- **退款处理**: 订单退款操作

### 🎯 资源管理 (resource)
#### Banner管理 (banner)
- **Banner配置**: Banner信息设置
- **跳转配置**: 游戏跳转、URL跳转
- **图片管理**: Banner图片上传和管理

#### 推荐管理 (recommend)
- **推荐配置**: 新游推荐设置
- **排序管理**: 推荐游戏排序
- **发布控制**: 推荐发布时间控制

### 📊 统计分析 (stat)
#### 用户统计 (user)
- **用户趋势**: 新增、活跃用户统计
- **时间筛选**: 自定义时间范围查询

#### 支付统计 (payment)
- **收入统计**: 每日收入统计
- **订单分析**: 订单数量和转化率
- **用户付费**: 新用户付费分析

### ⚙️ 系统配置 (config)
- **基础配置**: 系统基础参数设置
- **SMS配置**: 短信服务配置
- **支付配置**: 支付参数配置

## 🔌 API 集成

### 请求封装
```typescript
// src/service/request/index.ts
import { createRequest } from '@sa/axios';

const { instance, otherInstance } = createRequest({
  baseURL: import.meta.env.VITE_SERVICE_BASE_URL
});

export { instance as request, otherInstance };
```

### API 服务定义
```typescript
// src/service/api/game.ts
import { request } from '../request';

// 获取游戏列表
export function fetchGameList(params: GameApi.GameListReq) {
  return request<GameApi.GameListResp>({
    url: '/game/list',
    method: 'get',
    params
  });
}

// 创建游戏
export function addGame(data: GameApi.GameInfo) {
  return request<ApiTypes.Common.IdResp>({
    url: '/game/add',
    method: 'post',
    data
  });
}
```

### 类型定义
```typescript
// src/typings/api.d.ts
declare namespace GameApi {
  interface GameInfo {
    id?: number;
    gameID: string;
    name: string;
    gameType: number;
    // ... 其他字段
  }

  interface GameListReq extends Api.Common.PageParam {
    gameID?: string;
    status?: number;
  }

  interface GameListResp extends Api.Common.PageResp {
    list: GameInfo[];
  }
}
```

## 🎨 主题和样式

### 主题配置
```typescript
// src/theme/settings.ts
export const themeSettings: App.Theme.ThemeSetting = {
  themeScheme: 'auto',
  themeColor: '#646cff',
  // ... 其他主题配置
};
```

### UnoCSS 配置
```typescript
// uno.config.ts
import { defineConfig } from 'unocss';
import { createUnoPreset } from '@sa/uno-preset';

export default defineConfig({
  presets: [createUnoPreset()]
});
```

## 🌐 国际化

### 语言配置
```typescript
// src/locales/langs/zh-cn.ts
export default {
  system: {
    title: '云游戏管理平台'
  },
  common: {
    add: '新增',
    edit: '编辑',
    delete: '删除'
  }
};
```

### 使用方式
```vue
<template>
  <h1>{{ $t('system.title') }}</h1>
</template>

<script setup lang="ts">
import { $t } from '@/locales';
</script>
```

## 📱 响应式设计

项目使用 UnoCSS 的响应式断点系统：

- `sm`: ≥640px
- `md`: ≥768px  
- `lg`: ≥1024px
- `xl`: ≥1280px
- `2xl`: ≥1536px

```vue
<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
    <!-- 响应式网格布局 -->
  </div>
</template>
```

## 🔧 开发指南

### 新增页面
1. 在 `src/views/` 下创建页面组件
2. 在 `src/router/routes/` 中添加路由配置
3. 在对应 API 模块中添加接口

### 新增组件
1. 在 `src/components/` 下创建组件
2. 导出组件以供使用
3. 编写组件文档和示例

### 状态管理
```typescript
// src/store/modules/game.ts
export const useGameStore = defineStore('game', () => {
  const gameList = ref<GameApi.GameInfo[]>([]);
  
  const fetchGameList = async () => {
    // 获取游戏列表逻辑
  };
  
  return {
    gameList,
    fetchGameList
  };
});
```

## 🧪 测试

### 单元测试
```bash
pnpm run test
```

### E2E 测试
```bash
pnpm run test:e2e
```

## 📦 构建部署

### 开发环境
```bash
pnpm run dev
```

### 构建生产版本
```bash
pnpm run build
```

### Docker 部署
```dockerfile
FROM node:18-alpine

WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm install -g pnpm && pnpm install

COPY . .
RUN pnpm run build

FROM nginx:alpine
COPY --from=0 /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

## 🔍 调试技巧

### Vue DevTools
安装 Vue DevTools 浏览器扩展，方便调试组件状态和路由。

### Vite 调试
在 `vite.config.ts` 中配置 sourcemap：
```typescript
export default defineConfig({
  build: {
    sourcemap: true
  }
});
```

## 📋 代码规范

### ESLint 配置
```javascript
// eslint.config.js
import { defineEslintConfig } from '@sa/eslint-config';

export default defineEslintConfig({ vue: true, typescript: true });
```

### Git 提交规范
```bash
feat: 新增游戏管理功能
fix: 修复用户列表分页问题
docs: 更新API文档
style: 调整按钮样式
refactor: 重构游戏列表组件
test: 添加游戏管理测试用例
chore: 更新依赖版本
```

## 🤝 贡献指南

1. Fork 项目
2. 创建特性分支: `git checkout -b feature/new-feature`
3. 提交更改: `git commit -m 'feat: add new feature'`
4. 推送分支: `git push origin feature/new-feature`
5. 提交 Pull Request

## 📚 相关文档

- [Vue 3 官方文档](https://vuejs.org/)
- [Naive UI 组件库](https://www.naiveui.com/)
- [Vite 构建工具](https://vitejs.dev/)
- [UnoCSS 原子化CSS](https://unocss.dev/)
- [soybean-admin 原项目](https://github.com/soybeanjs/soybean-admin)

## 🐛 问题反馈

如遇到问题，请在项目 Issues 中反馈，描述问题时请包含：
- 浏览器版本
- 操作步骤
- 错误信息
- 屏幕截图（如适用）

---

**soybean-admin** - 现代化的 Vue 3 管理界面解决方案 ✨