# kingdom-web

**Repository Path**: evil_angel/kingdom-web

## Basic Information

- **Project Name**: kingdom-web
- **Description**: 简单三国游戏web端
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-05-25
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Kingdom Web Frontend

基于 Vue 3 + Vite + Ant Design Vue 的三国策略游戏前端。

## 技术栈

- Vue 3.3.4
- Vite 4.4.9
- Ant Design Vue 4.x
- Vue Router 4.x
- Vuex 4.x
- Axios

## 项目结构

```
kingdom-web/
├── src/
│   ├── api/                    # API 接口定义
│   │   ├── index.js            # 用户认证、字典等通用接口
│   │   ├── city.js             # 城池相关接口
│   │   └── vector.js           # 向量/位置相关接口
│   ├── components/             # 通用组件库
│   │   ├── basic/              # 基础组件
│   │   ├── form/               # 表单组件 (Form/FormModal/FormDrawer)
│   │   ├── table/              # 表格组件 (BasicTable)
│   │   ├── search/             # 搜索组件 (BasicSearch)
│   │   ├── modal/              # 弹窗组件
│   │   ├── drawer/             # 抽屉组件
│   │   ├── cropper/            # 图片裁剪组件
│   │   └── directive/          # 自定义指令 (auth 权限指令)
│   ├── store/                  # Vuex 状态管理
│   │   ├── index.js
│   │   └── module/
│   │       ├── core.js         # 核心模块 (用户/菜单/路由/任务栏/全局搜索)
│   │       └── view.js         # 视图模块
│   ├── router/                 # 路由配置
│   │   └── index.js            # 动态路由生成、菜单路由映射
│   ├── utils/                  # 工具函数
│   │   ├── request.js          # Axios 封装 (多环境配置/拦截器)
│   │   ├── MetaUtils.js        # 元数据工具
│   │   ├── Validator.js        # 表单验证
│   │   └── SysUtils.js         # 系统工具
│   ├── views/                  # 页面视图
│   │   ├── login/              # 登录页
│   │   ├── main/               # 主框架 (任务栏/用户中心/搜索)
│   │   ├── core/               # 核心功能 (后台管理/消息源)
│   │   ├── quartz/             # 定时任务管理
│   │   └── error/              # 错误页 (403/404)
│   ├── theme/                  # 主题配置
│   └── main.js                 # 入口文件
├── vite.config.js              # Vite 配置
└── package.json
```

## 开发命令

```bash
# 开发环境
npm run dev-laptop      # 本地笔记本环境
npm run dev-desktop     # 本地桌面环境
npm run frp-laptop      # FRP 穿透笔记本环境
npm run frp-desktop     # FRP 穿透桌面环境

# 生产构建
npm run build           # 构建生产版本
npm run serve           # 预览构建结果
```

## 环境配置

在 `src/utils/request.js` 中配置：

| 环境 | API 地址 | WebSocket 地址 | SSE 地址 |
|------|----------|----------------|----------|
| local-desktop | http://api.kingdom.desktop.ly.com | ws://socket.kingdom.desktop.ly.com | http://sse.kingdom.desktop.ly.com |
| local-laptop | http://api.kingdom.laptop.ly.com | ws://socket.kingdom.laptop.ly.com | http://sse.kingdom.desktop.ly.com |
| frp-desktop | http://8.138.102.31:8371 | ws://8.138.102.31:8372 | http://8.138.102.31:8373 |
| frp-laptop | http://8.138.102.31:8374 | ws://8.138.102.31:8375 | http://8.138.102.31:8376 |

## 核心功能模块

### 1. 用户认证 🔶
- 登录/注销
- 图形验证码
- OAuth2 授权
- Token 自动注入 (access_token)

### 2. 动态路由系统 🔷
- 菜单驱动的路由生成
- 权限控制 (v-auth 指令)
- 面包屑导航
- KeepAlive 缓存管理

### 3. 任务栏系统 🔷
- 多标签页切换
- 视图状态管理
- 关闭/刷新页面

### 4. 组件库 🔷
- **BasicTable** - 数据表格 (增删改查/分页/排序)
- **BasicSearch** - 搜索表单
- **FormModal/FormDrawer** - 表单弹窗
- **ImageCropper** - 头像裁剪上传

### 5. 全局搜索 🔶
- 权限搜索
- 菜单搜索
- 数据过滤

### 6. 消息通知 🔶
- SSE 服务端推送
- WebSocket 实时通信

## 开发规范

### 组件命名规范
- 组件必须设置 `name` 属性 (用于 KeepAlive 缓存)
- 组件名称不能重复

### 路由规范
- 使用 hash 模式路由
- 菜单 URL 与路由 path 对应
- 动态路由通过 `addRoute` 注册

### 状态管理
- 系统核心状态：`store.getters['sys/xxx']`
- 视图状态：`store.getters['view/xxx']`

## 待完成功能

- 🔶 登录模块优化
- 🔶 注册模块 (验证码)
- 🔶 同盟模块 UI
- 🔶 战斗模块 UI
- 🔶 消息系统完善

## 与后端接口对应

| 前端模块 | 后端 Controller |
|----------|-----------------|
| 用户中心 | CenterController |
| 菜单权限 | MenuController |
| 验证码 | CaptchaController |
| 城池管理 | CityController |
| 武将管理 | GeneralController |
| 士兵管理 | SoldierController |
| 联盟管理 | AllianceController |
| 定时任务 | Quartz 相关 |