You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.6 KiB
52 lines
1.6 KiB
1 month ago
|
# 背包功能 MVP 设计
|
||
|
|
|
||
|
|
## 需求
|
||
|
|
|
||
|
|
在游戏客户端添加背包展示页面，显示角色背包中的物品，鼠标悬停显示物品名称和基本信息。
|
||
|
|
|
||
|
|
## 现有后端 API
|
||
|
|
|
||
|
|
- `GET /api/god/bag/character/{characterId}` - 获取角色背包信息（包含背包名称和容量）
|
||
|
|
- `GET /api/god/bag/{characterBagId}/items` - 获取背包物品列表
|
||
|
|
- 物品类型：装备(1)、丹药(2)
|
||
|
|
|
||
|
|
## 实现方案
|
||
|
|
|
||
|
|
### 1. 添加游戏客户端 API (`src/api/bag.ts`)
|
||
|
|
|
||
|
|
- `getCharacterBag(characterId)` - 获取角色背包信息
|
||
|
|
- `getBagItems(characterBagId)` - 获取背包物品
|
||
|
|
|
||
|
|
### 2. 添加 Pinia Store (`src/stores/bag.ts`)
|
||
|
|
|
||
|
|
- 管理背包数据、当前页码等状态
|
||
|
|
- 提供加载、刷新方法
|
||
|
|
|
||
|
|
### 3. 添加背包页面 (`src/views/BagView.vue`)
|
||
|
|
|
||
|
|
- 顶部：显示背包名称和容量信息（如 "普通背包 5/20"）
|
||
|
|
- 物品网格：每页显示 **16** 个物品（4列 × 4行）
|
||
|
|
- 底部：分页控件（上一页/下一页）
|
||
|
|
- 物品格子：显示物品图标、名称、数量角标（仅数量>1时显示）
|
||
|
|
- 鼠标悬停：使用 Element Plus 的 `el-tooltip` 显示详细信息
|
||
|
|
|
||
|
|
### 4. 添加路由 (`src/router/index.ts`)
|
||
|
|
|
||
|
|
- 路径：`/bag`
|
||
|
|
- 需登录访问
|
||
|
|
|
||
|
|
### 5. 更新导航菜单 (`GameView.vue`)
|
||
|
|
|
||
|
|
- 在 menuItems 中添加：{ label: '背包', icon: '🎒' }
|
||
|
|
|
||
|
|
## 物品信息展示（hover 提示内容）
|
||
|
|
|
||
|
|
- **装备**：名称、稀有度（普通/稀有/史诗/传说）
|
||
|
|
- **丹药**：名称、功效描述
|
||
|
|
|
||
|
|
## 技术细节
|
||
|
|
|
||
|
|
- 使用前端本地分页（不修改后端）
|
||
|
|
- 当前角色从 `characterStore` 获取
|
||
|
|
- 页面访问需要登录验证
|
||
|
|
- 背包容量：普通20格、稀有40格、史诗60格、传说100格
|