制作页面背包 ​

这篇教程会制作一个普通页面，显示并操作玩家真实背包的 36 个槽位、主手、副手和四个盔甲槽，同时显示空槽数、已用槽数与物品总数。

先取得完整示例 ​

下载页面背包.yml，放到服务端：

plugins/ChaUI/pages/页面背包.yml

示例只使用矩形、文字和物品槽，不需要安装额外材质。

第一步：认识 36 格编号 ​

• backpack_0～backpack_8 是快捷栏。
• backpack_9～backpack_35 是主背包其余 27 格。
• 编号从 0 开始，不能写 backpack_36。

示例把 9～35 排成 3 行，再把 0～8 单独放在最下面一行，布局接近原版背包。

第二步：添加装备与双手槽 ​

头盔槽配置为：

- id: helmet_slot
  type: item_slot
  visible: true
  enabled: true
  pointerEvents: auto
  z: 2
  layout:
    x: 'window.width * 0.5 - 128'
    y: 'window.height * 0.5 - 52'
    width: '18'
    height: '18'
  itemSlot:
    bind: backpack_helmet
    mode: mapped
    check: vals.player.health > 0
    allowPut: true
    allowTake: true

其余位置使用：

主手槽是动态的。玩家选择第 3 个快捷栏槽时，backpack_mainhand 与 backpack_2 指向同一份真实物品；切换选择后它会自动跟随。

第三步：显示背包统计 ​

示例顶部文字为：

空槽：{vals.player.inventory.emptySlots}　已用：{vals.player.inventory.occupiedSlots}　物品总数：{vals.player.inventory.totalItemCount}

这三个数字只统计 36 格主背包，不把副手和盔甲算进去。例如玩家穿着盔甲但 36 格全部为空时，仍会显示空槽 36、已用 0。

第四步：理解点击交换 ​

mode: mapped 不会在页面里创建一份虚拟物品。点击槽位后：

1. 客户端提交“点击了哪个 bind”。
2. 服务端检查页面会话、槽位版本、allowPut 和 allowTake。
3. 服务端读取玩家真实背包并计算交换结果。
4. 服务端写回真实背包，再同步客户端。

不要给 mapped 槽位添加 closePolicy，关闭策略只属于 temporary 虚拟槽。persistent 和 mapped 关闭页面时都不执行返还、提交或丢弃策略。

示例中的 check 是可选“操作条件”：玩家血量大于 0 时才发送槽位操作包。留空表示直接允许；条件为假或无效时不会操作背包，但槽位的 events.leftClick 脚本仍会执行。它只是客户端前置判断，不能代替服务端权限与安全校验。

如果另一个页面、HUD 或世界页面也打开了 mode: mapped、bind: backpack_helmet 的槽位，两处会自动同步同一格真实装备。同样的跨页面规则也适用于 persistent 和 temporary；槽位身份由玩家与 mode + bind 决定，而不是页面或 session。

第五步：打开页面 ​

重载页面文件：

/chaui reload

向自己打开：

/chaui open <玩家> 页面背包

检查以下效果：

1. 36 格物品与玩家真实背包对应。
2. 盔甲、副手和主手显示正确。
3. 切换快捷栏后，右侧主手槽立即变化。
4. 点击槽位可以正常交换物品。
5. 空槽、已用槽和物品总数会随背包变化。
6. 缩放窗口后整个页面仍保持居中。

需要查询单个 bind 时，请查看背包映射表；需要自定义槽位图片时，请继续阅读物品槽组件。