MikuMikuAR 文档

Appearance

UI 辅助函数聚合 ​

系统概览 ​

UI 辅助函数聚合层（barrel re-export）。提供声明式 UI 控件创建函数（slider、toggle、dropdown、 collapsible 等），统一返回 DOM 元素。ui-helpers.ts 为聚合入口，各组件在独立文件中实现。

核心职责 ​

  • ui-helpers.ts — barrel re-export 入口。
  • ui-advanced-rows.ts — 高级行控件（color/vector3）。

  • ui-rows.ts 已独立立卡：ui-rows.md（基础行控件构建器，ADR-140/191/173）。

  • ui-slide-row.ts — 滑动行控件。
  • ui-collapsible.ts — 折叠面板、章节标题、预设芯片。
  • ui-resource-panel.ts — 资源面板组件。
  • ui-virtual-grid.ts — 虚拟网格组件（大列表性能优化）。
  • ui-fullscreen-overlay.ts — 全屏覆盖层。

对外 API（节选） ​

  • addSliderRow(label, bind, options) — 创建滑块行。
  • addToggleRow(label, bind, options) — 创建开关行。
  • addCollapsible(title, contentFactory) — 创建折叠面板。
  • addBoneSelectRow(container, label, boneNames, currentName, onChange, opts?) — 骨骼下拉选择（分组+搜索+IK标记）；替代 addModeRow 在骨骼列表的误用；[doc:adr-173]
  • createHeaderToggle(config) — 标题栏小型开关（<label class="toggle header-toggle">），统一 label 包裹 checkbox 的双触发去重 + bind 自更新 + disabled/onDisabledClick 支持；[doc:adr-173]
  • isIkBone(boneName) — 判断骨骼是否为 IK 相关（MMD 标准 IK 骨骼名集合 + 以 IK 结尾的后缀）；[doc:adr-173]
  • buildBoneGroups(bones) — 按 MMD 标准分组骨骼数组，返回 [groupName, bones[]][]；[doc:adr-173]
  • createResourcePanel(options) — 创建资源面板。
  • createVirtualGrid(options) — 创建虚拟网格。
  • openFullscreen(content) / closeFullscreen() — 全屏覆盖。

与其他子系统关系 ​

  • 被所有 menus 模块调用。
  • 渲染：render-menu.ts 使用这些函数构建 UI。
  • 数据绑定：通过 bind 属性绑定到 envState / uiState。

不变量 ​

  • Barrel re-export：ui-helpers.ts 聚合所有子模块，调用方 import 路径不变。
  • 控件生命周期：创建函数返回 DOM 元素，调用方负责插入和移除。
  • 数据绑定：通过 bind 路径实现，不直接读写状态。