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.
1.6 KiB
1.6 KiB
背包功能 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格