tui-collapse

用途

tui-collapse 用于生成并渲染像素级精确的 ASCII 文本界面（TUI）Collapse（折叠面板）组件。它面向需要以纯文本形式表达界面布局、并同时产出可对接 Pencil MCP 设计规格的场景。

主要能力

输出完整的四类结果块：TUI_RENDER、COMPONENT_SPEC、PENCIL_SPEC、PENCIL_BATCH_DESIGN。
始终输出布局属性，包括 top/left/width/height、spacing、colors、typography、zIndex。
始终输出可供 Pencil MCP 使用的规格，以及 batch_design 计划（每次调用不超过 25 个操作）。
支持状态表达：focused、disabled、loading、error。
支持热键（hotkeys）字段。

使用方式

工作流如下：

解析输入——读取输入模型 JSON（widthCols、grid、props、modelValue、state、style、typography、layout、hotkeys）。
计算布局——使用网格（cellWidthPx=8、cellHeightPx=16）将列/行位置转换为像素坐标。
渲染 TUI_RENDER——使用制表符（box-drawing characters）构建等宽 ASCII 图形，并遵守 widthCols。
构建 COMPONENT_SPEC——输出包含 bbox、style、typography、state、hotkeys 的 JSON 规格。
构建 PENCIL_SPEC——输出 Pencil MCP 的画布与组件列表。
规划 PENCIL_BATCH_DESIGN——输出 batch_design 调用（每次调用最多 25 个操作）以在 Pencil 中创建设计。
校验——验证 COMPONENT_SPEC 中的 bbox 尺寸与 TUI_RENDER 网格一致；确认批量操作保持在 25 个操作限制内。

推荐输入模型示例：

{
  "widthCols": 70,
  "grid": { "cellWidthPx": 8, "cellHeightPx": 16 },
  "props": {},
  "modelValue": null,
  "state": { "focused": false, "disabled": false, "loading": false, "error": null },
  "style": {
    "fillColor": "#ffffff",
    "textColor": "#111111",
    "strokeColor": "#e5e7eb",
    "strokeThickness": 1,
    "cornerRadius": 12
  },
  "typography": { "fontFamily": "Inter", "fontSize": 14, "fontWeight": 400, "lineHeight": 20 },
  "layout": { "paddingPx": 16, "gapPx": 8 },
  "hotkeys": []
}

输出契约（强制）包含四个块：

OUTPUT: TUI_RENDER——仅等宽文本。
OUTPUT: COMPONENT_SPEC——JSON，含 id、name、type、bbox、zIndex、layout、style、typography、overflow、state、hotkeys。
OUTPUT: PENCIL_SPEC——JSON，含 canvas、grid、nodes、components。
OUTPUT: PENCIL_BATCH_DESIGN——按 CALL 分组的批量设计指令。

渲染规则（组件级）

遵循 tui-front-ui 的共享规则：

不使用 TAB 字符。
不超过 widthCols。
提供表头行、主体区域，交互时提供最小热键提示。
disabled=true 必须抑制交互提示。
loading=true 必须显示稳定占位符。
error!=null 必须打印在单行页脚中（按宽度截断）。

适用场景

需要以 ASCII 文本形式呈现 Collapse 折叠面板布局的场合。
需要同时产出组件规格（COMPONENT_SPEC）与 Pencil MCP 设计规格（PENCIL_SPEC、PENCIL_BATCH_DESIGN）的场合。
需要覆盖默认、自定义样式、禁用/错误等状态的组件示例生成。

限制

批量设计每次调用最多 25 个操作。
渲染不得超出 widthCols，且不得使用 TAB。
关于收费、价格、平台支持范围等信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

渲染规则（组件级）

适用场景

限制