基础语法

本章从零介绍 BUI 的模板/脚本/样式结构与常用指令。你可以把它理解成“Vue 风格的 UI”。

提醒：当前 不支持 HUD，只用于界面/面板/弹窗类 UI。

1. 文件结构

一个 BUI 文件由三块组成：

<template>
  <!-- UI 结构 -->
</template>

<script>
  // JS 逻辑
</script>

<style>
  /* BSS 样式 */
</style>

最小可用例子

<template>
  <Panel class="panel" ref="root">
    <Label ref="title" text="角色面板" />
    <Button class="ok" @click="onOk">确认</Button>
  </Panel>
</template>

<script>
function onOk(event) {
  // event 里有 keyCode / mouseButton 等
  chatSend("已确认", true)
}

onMounted(() => {
  const title = ref("title")
  title.setTextString("角色面板")
})
</script>

<style>
.panel {
  width: 200;
  height: 120;
  background: bss-sdf(6, #2b2b2b, #3a3a3a, 1);
}
.ok {
  width: 80;
  height: 24;
}
</style>

2. 模板语法

2.1 标签与组件

• 标签：对应一个 UI 组件，如 Panel、Button、TextField。
• 组件引用：首字母大写且不是内置元素的标签会被当作自定义组件。
• 动态组件：<component :is="compName" />

组件清单见：组件总览。

2.2 属性与绑定

• 普通属性：text="标题"（字符串）
• 绑定属性：:value="count"（JS 表达式）
• 事件监听：@click="onClick"

支持的内置指令：

• b-if / b-else-if / b-else
• b-for="(item, index) in list"
• b-show="visible"
• b-model="value"（双向绑定）
• ref="name"（引用）
• :key="id"（渲染 key）

b-model 当前适用于：TextField / TextArea / Toggle / Switch。

2.3 事件

事件写法：@event="handler"。

常用事件名（完整列表见 UI JS API）：

• 鼠标：mouseDown / mouseUp / mouseClick / doubleClick
• 移动：mouseMove / mouseEnter / mouseLeave / mouseWheel
• 拖拽：dragEnter / dragLeave / dragUpdate / dragPerform / dragEnd
• 键盘：keyDown / keyUp / charTyped
• 其他：focus / blur / layoutChanged / tick

2.4 插槽

• 默认插槽：<slot></slot>
• 命名插槽：<slot name="header"></slot>
• 具名传入：

<MyComp>
  <template #header>
    <Label text="标题" />
  </template>
</MyComp>

也支持 b-slot="name" 或 #name 的写法。

2.5 指令扩展

当前内置指令：

<TextField b-focus />
<Button b-disabled="isLoading" />
<Panel b-visible="showPanel" />

说明：

• b-focus：自动聚焦
• b-disabled：禁用/启用
• b-visible：显示/隐藏

如需扩展自定义指令，请通过二次开发在代码侧注册。

2.6 过渡动画指令

支持 b-transition 系列属性：

• b-transition：过渡预设名称
• b-transition-enter / b-transition-leave
• b-transition-duration / b-transition-easing / b-transition-delay

<Panel b-transition="fade" />
<Panel b-transition-enter="fadeIn" b-transition-leave="fadeOut" />

3. 脚本语法

• <script> 内为 JavaScript。
• 事件处理函数直接写在脚本中。
• 访问 UI 元素使用 ref("id")。
• 访问同步状态使用 internalSyncStore.get("sync:xxx")。
• UI API 见 UI JS API。

4. 样式 (BSS)

BSS 类似 CSS：

• 选择器：.class / #id / Tag / 伪类
• 属性：width/height/margin/padding/background/opacity...
• 变量：--color + var(--color)
• 动画：@keyframes + animation

详见 BSS 参考。