# 背包功能 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格