Files
2026-08-28 05:24:30 +08:00

2.0 KiB
Raw Permalink Blame History

游戏运营后台

可复用的游戏服务端运营后台前端模板,技术栈为 React、TypeScript、Ant Design、TanStack Query 和 Vite。

当前包含:

  • 登录页
  • 总览
  • 账号管理
  • 区服管理
  • 玩家管理
  • CDK管理
  • 公告管理
  • 订单管理

开发

npm install
npm run dev

开发服务器监听 0.0.0.0:19999:

  • 登录页:http://localhost:19999/
  • 后台:http://localhost:19999/panel/

.env.development 默认启用 MSW Mock API,因此不依赖后端即可完成页面开发和验收。

配置

变量 用途
VITE_MOCK_API 开发环境是否启用 Mock API
VITE_ADMIN_BASE_PATH 后台部署路径前缀,默认 /
VITE_BACKEND_TARGET 可选的开发代理后端地址
VITE_SOURCEMAP 生产构建是否输出 sourcemap

生产环境可由服务端在 HTML 中提前注入 window.ADMIN_UI_BASE_PATH。路由固定挂载在该前缀下的 /panel,适合由 Go 的 embed.FS 或其他静态资源方案直接嵌入。

API 约定

现有页面通过以下前缀访问业务接口:

/panel/api/game/overview
/panel/api/game/accounts
/panel/api/game/servers
/panel/api/game/players
/panel/api/game/cdks
/panel/api/game/announcements
/panel/api/game/orders

接口响应使用统一结构:

{
  "success": true,
  "msg": "",
  "obj": {}
}

开发阶段的对应实现位于 src/mocks/handlers.ts,接入真实服务端时可保持页面和 Query 层不变。

命令

npm run typecheck
npm run lint
npm run format:check
npm run test
npm run build

目录

src/
  api/          请求封装和游戏业务 Query
  components/   登录表单与图表组件
  hooks/        主题和页面标题
  i18n/         登录页多语言
  layouts/      左侧菜单和顶部标签栏
  mocks/        开发环境 Mock API
  pages/        当前运营后台页面
  schemas/      游戏业务 Zod Schema
  styles/       全局布局样式
  test/         当前功能回归测试