用途 tui-section 用于产出 Section(分区)的 ASCII 文本界面(TUI)表示。它面向需要在终端或文本环境中呈现分区组件的场景,把结构化输入模型转换为可直接阅读的等宽字符画,并同步给出可供后续设计工具使用的规格与批量操作计划。
主要能力
- 解析输入:读取输入模型 JSON,包含 widthCols、grid、props、modelValue、state、style、typography、layout、hotkeys 等字段。
- 计算布局:按网格把列/行位置换算为像素坐标,默认 cellWidthPx=8、cellHeightPx=16。
- 渲染 TUI_RENDER:使用制表符(box-drawing)构建等宽 ASCII 艺术,遵守 widthCols 限制。
- 生成 COMPONENT_SPEC:输出含 bbox、style、typography、state、hotkeys 的 JSON 规格。
- 生成 PENCIL_SPEC:输出供 Pencil MCP 使用的画布与组件列表。
- 规划 PENCIL_BATCH_DESIGN:输出批量设计调用,每次调用最多 25 个操作。
- 校验:确认 COMPONENT_SPEC 中 bbox 尺寸与 TUI_RENDER 网格一致,并确认批量操作未超 25 个操作的上限。
使用方式 先提供输入模型 JSON(推荐字段如 widthCols、grid、props、modelValue、state、style、typography、layout、hotkeys),然后技能按固定工作流处理:解析输入 → 计算布局 → 渲染 TUI_RENDER → 构建 COMPONENT_SPEC → 构建 PENCIL_SPEC → 规划 PENCIL_BATCH_DESIGN → 校验。输出契约要求依次给出四个 OUTPUT 区块:TUI_RENDER、COMPONENT_SPEC、PENCIL_SPEC、PENCIL_BATCH_DESIGN。
渲染规则(组件级) 遵循 tui-front-ui 的共享规则:不使用 TAB 字符;不超出 widthCols;提供标题行、主体区域,若为交互组件则给出最简快捷键;disabled=true 时必须抑制交互提示;loading=true 时必须显示稳定的占位内容;error!=null 时必须打印在单行页脚(按宽度截断)。
输入模型示例 包含 widthCols、grid(cellWidthPx、cellHeightPx)、props、modelValue、state(focused、disabled、loading、error)、style(fillColor、textColor、strokeColor、strokeThickness、cornerRadius)、typography(fontFamily、fontSize、fontWeight、lineHeight)、layout(paddingPx、gapPx)、hotkeys。
输出区块说明 COMPONENT_SPEC 包含 id、name、type、bbox、zIndex、layout、style、typography、overflow(mode、ellipsis、maxLines)、state、hotkeys。PENCIL_SPEC 包含 canvas(widthPx、heightPx、backgroundColor)、grid、nodes、components。PENCIL_BATCH_DESIGN 以 CALL 形式给出,使用 G()、I()、U() 等操作创建 Screen、Section/Background、Section/Text 等节点。
示例类型 资料提供三类示例:最小/默认示例、带样式/自定义示例(如 Account Overview 内容)、以及 disabled/error/边界情况示例(内容隐藏、页脚错误行)。每个示例均完整包含四个输出区块。
适用场景 适合在需要以纯文本方式预览或交付分区组件结构时使用,例如终端 UI 设计、组件规格生成,以及把 TUI 规格转换为 Pencil 设计画布的批量设计流程。
限制
- 关于运行环境、平台依赖、是否收费、价格、安装命令、具体性能或效果等信息,资料中暂未提供。
- 批量设计调用受 25 个操作上限约束,超出需拆分。
- 输出必须遵守 widthCols 与网格换算规则,否则校验不通过。
- 输出契约要求四个区块齐全,示例中必须包含全部输出块。
组件汇总行 用于页面聚合的汇总行格式为:id、name、top、left、width、height、z、keyProps、state、hotkeys,示例如 tui-section / Section / 0 / 0 / 0 / 0 / 0 / keyProps=... / state=... / hotkeys=...。