猹件开发组替换第一个箱子界面
这篇教程会使用 ChaUI 自带示例，把一个三行箱子自动替换成自定义页面。你不需要修改箱子插件，也不需要让第三方插件调用 ChaUI API。
完成后，箱子中央第 14 格会映射为 ChaUI 按钮：物品图标、名称和 Lore 会自动显示；点击按钮仍然点击原版箱子的同一格，因此已有插件的库存点击逻辑可以继续工作。
第一步：找到内置页面
启动安装了新版 ChaUI 的服务器后，插件会在缺少文件时自动释放：
plugins/ChaUI/pages/first_chest_replacement.yml这个页面只匹配下面两个条件：
- 箱子标题去掉颜色样式后等于
ChaUI First Chest； - 箱子顶部区域正好有 3 行。
严格匹配可以避免教程页面意外替换其他商店、小游戏或锻造菜单。
第二步：准备测试箱子
准备一个单箱子，在铁砧中把箱子物品改名为 ChaUI First Chest，再把它放到世界中。单箱子顶部区域正好是 3 行。
打开箱子前，在第 2 行中央，也就是从左上角开始数的第 14 格放入一个物品。ChaUI 的槽位编号从 0 开始，因此这一格写作：
container_13为了观察名称映射，可以先给物品改名。若测试的是已有插件菜单，也可以直接让插件在这一格放入带名称和 Lore 的菜单物品。
第三步：打开箱子
右键打开刚才的箱子。匹配成功后，你会看到自定义深色面板，而不是原版箱子背景。
依次检查：
- 中央按钮左侧显示第 14 格的真实物品图标。
- 按钮文字与物品名称一致。
- 物品有 Lore 时，按钮下方会按原行顺序显示。
- 鼠标悬浮按钮时仍能看到原版完整物品提示。
- 点击按钮会操作第 14 格，而不是执行一套伪造的 ChaUI 物品逻辑。
普通箱子中，点击后会按原版规则拿起或放下物品。第三方菜单中，插件仍会收到原来的库存点击事件。
第四步：在编辑器中修改外观
通过页面编辑入口打开 first_chest_replacement。你可以移动背景、修改颜色、更换按钮素材，或增加更多绑定组件。
页面属性中的容器设置保持为：
| 属性 | 值 |
|---|---|
| 打开模式 | container |
| 替换目标 | chest |
| 标题模式 | exact |
| 标题内容 | ChaUI First Chest |
| 箱子行数 | 3 |
| 优先级 | 100 |
选中 menu_button 后，可以看到它的“容器绑定”为 container_13。“容器提示”保持开启，鼠标悬浮时就会显示原版物品提示。
保存后关闭并重新打开箱子。容器页面会使用新配置重新匹配和显示。
完整页面配置
下面是本教程使用的完整页面。也可以直接下载第一个箱子替换示例。
id: first_chest_replacement
version: 1
title: 第一个箱子替换示例
size:
width: window.width
height: window.height
coordinateMode: absolute
display:
mode: container
container:
target: chest
title:
mode: exact
value: ChaUI First Chest
rows:
- 3
priority: 100
elements:
- id: panel
type: rect
visible: true
enabled: false
pointerEvents: block
opacity: 0.92
z: 0
layout:
x: window.width * 0.5 - 120
y: window.height * 0.5 - 65
width: 240
height: 130
rect:
color: '#151A24'
- id: title
type: text
visible: true
enabled: false
pointerEvents: pass
z: 1
layout:
x: window.width * 0.5 - 105
y: window.height * 0.5 - 52
width: 210
height: 14
text:
value: 第一个箱子替换界面
textSize: 1.0
textLineLength: 24
align: center
- id: menu_button_back
type: rect
visible: true
enabled: false
pointerEvents: pass
z: 1
layout:
x: window.width * 0.5 - 70
y: window.height * 0.5 - 20
width: 140
height: 30
rect:
color: '#334866'
- id: menu_item
type: item_display
visible: true
enabled: false
pointerEvents: pass
containerBinding: container_13
z: 2
layout:
x: window.width * 0.5 - 62
y: window.height * 0.5 - 13
width: 18
height: 18
itemDisplay: {}
- id: menu_button
type: button
visible: true
enabled: true
pointerEvents: auto
containerBinding: container_13
containerTooltip: true
z: 3
layout:
x: window.width * 0.5 - 70
y: window.height * 0.5 - 20
width: 140
height: 30
button:
label: '{vals.container.components.menu_button.name}'
textSize: 0.9
textX: 12
textY: 0
textLineLength: 20
align: center
- id: menu_lore
type: text
visible: true
enabled: false
pointerEvents: pass
containerBinding: container_13
z: 2
layout:
x: window.width * 0.5 - 100
y: window.height * 0.5 + 22
width: 200
height: 32
text:
value: '{vals.container.components.menu_lore.loreText}'
textSize: 0.75
textLineLength: 34
align: center为什么第三方插件不需要接入
ChaUI 只替换原版界面的绘制与命中区域。真实物品、鼠标光标、槽位同步和库存事件仍由当前原版容器负责。按钮点击最终回到 container_13，已有插件看到的仍是对原菜单槽位的点击。
下一步请阅读认识自动替换。那里会继续讲标题匹配、玩家背包、完整槽位交互、脚本动态改绑和冲突回退。
常见问题
打开后还是原版箱子
先确认箱子是单箱子、标题大小写完全等于 ChaUI First Chest，并确认客户端与服务端使用相同协议版本。双箱子有 6 行，不符合教程的 3 行限制。
按钮没有名称或图标
确认物品放在第 14 格，而不是按人类习惯误写成第 13 格。container_13 的数字从 0 开始。
点击后插件没有反应
确认插件原菜单确实监听的是这一格，并检查 menu_button 仍为启用、pointerEvents 为 auto、containerBinding 为 container_13。