10 分钟：第一个面板

目标是先跑通最小链路：模板注册、打开 UI、读到 sync:*、执行关闭动作。

模板文件

创建 ui/rpg/main.bui：

<template>
  <Panel id="root" class="w-[220px] p-[10px] flex flex-col gap-2">
    <Label text="Status Panel" />
    <Label :text="'HP: ' + (internalSyncStore.get('sync:hp') ?? 0)" />
    <Button text="Close" @click="requestClose()" />
  </Panel>
</template>

<script>
import { requestClose } from "bui:ui"
</script>

<style>
#root {
  background: #101927;
  color: #eef4ff;
  border: 1px solid #2c3f5f;
}
</style>

<properties>
  <mount mode="screen">
    <screen pauseGame="false" closeOnEsc="true" />
  </mount>
</properties>

打开 UI

import com.behemiron.engine.spigot.api.ui.BUIServerAPI

fun openMain(player: Player) {
    BUIServerAPI.ui().open(
        player = player,
        templateId = "rpg/main",
        initialState = mapOf("hp" to 100)
    )
}

initialState 里的裸 key 会被写进同步状态命名空间，所以这里的 hp 最终会以 sync:hp 被模板读取。

更新同步状态

fun updateHp(player: Player, hp: Int) {
    BUIServerAPI.state().setSyncValue(player, "rpg/main", "hp", hp)
}

结果检查

1. 打开后能看到 HP: 100
2. 调用 updateHp(player, 87) 后文本变成 HP: 87
3. 点击按钮后界面关闭