SuperAPI AI 工具集

pattern-implement

编程与开发

查看项目

更新于 10-15 20:14

技能介绍

用途:按最小 UI 原则实现单个子模式,先验证数据流,再考虑样式。

主要能力与规则:每个子模式只写一个最小桩 UI,不加样式,仅保留基本输入/按钮;始终使用 pattern<Input, Output>(),把动作暴露为 Stream<T> 以便测试。

实现顺序:先写叶子模式(不依赖其他模式),再写容器模式(组合叶子模式),最后写 main.tsx(组合全部)。

建议先读文档:docs/common/patterns/(尤其 meta/ 中的通用惯用法)、docs/common/concepts/action.md(action() 用于局部状态)、handler.md(handler() 用于可复用逻辑)、reactivity.md(Cell 的 .get()/.set() 行为)、identity.md(equals() 用于对象比较)。

关键写法:action() 在模式体内闭包局部状态,例如 const inputValue = Cell.of(""); const submit = action(() => { items.push({ text: inputValue.get() }); inputValue.set(""); });。handler() 可配合不同绑定复用,例如 const deleteItem = handler<void, { items: Writable<Item[]>; index: number }>((_, { items, index }) => items.set(items.get().toSpliced(index, 1)));,在 JSX 中写 onClick={deleteItem({ items, index })}。渲染子模式要用函数调用而非 JSX:正确写法 {items.map((item) => ItemPattern({ item, allItems: items }))};错误写法 {items.map((item) => <ItemPattern item={item} />)},因为带类型的 Output 用 JSX 会失败。

完成标准:模式通过 deno task ct check pattern.tsx --no-run 编译;最小 UI 能渲染输入框和按钮;可进入测试。

限制:资料未提供收费、价格、平台支持范围等细节;运行命令时可用 Skill("ct") 查阅 ct CLI 文档。