SuperAPI AI 工具集

composing-grid-canvases

通用与其它

查看项目

更新于 10-16 08:07

技能介绍

用途:编排 PostHog grid canvas——由 placement 组成的网格布局,每项渲染一个可复用的 component 画布(独立 source、build 与 placement 契约)。用户的 home canvas 即个人频道中的普通 grid canvas。布局即数据,发布或补丁后立即生效,无需构建。

三种画布共用同一生命周期:freeform 为独立应用;component 为可复用组件,与 freeform 同源构建流程,外加 placement 契约,可见性随频道(个人=私有,团队=共享);grid 仅描述布局,无文件源。

解析阶梯(configure → fork → build):先搜索 store(canvas-list,kind=component 加 search),组件同时具备 component_meta 与 published_build_id 才可放置,若 configSchema 能表达需求便直接放置并配置,不写代码;接近但配置无法表达时,读取源码、用 canvas-create(kind=component)新建并适配后发布,在新组件描述中写明差异;无合适组件时再新建。新组件默认落在创建它的频道,除非用户要求更广共享。

构建组件:与 freeform 相同,需加载 building-react-quill-canvases(或 building-html-canvases)、querying-canvas-data、validating-and-publishing-canvases,另有三点额外要求。以 references/component-example.md 的可构建项目为起点。创建时 kind=component,描述要利于 store 搜索,说明展示内容与 config 控制项。在项目顶层 component 键声明 placement 契约,如 size(defaultW/defaultH/minW/minH/maxW,宽度 1–12、高度 1–40,需满足 minW<=defaultW<=maxW)与 configSchema。schema 词表为白名单,含 type、title、description、default、properties、required、additionalProperties、items、enum、const、minimum、maximum、minLength、maxLength、minItems、maxItems、format,不支持 $ref 与 pattern。响应式设计:根元素加 min-h-screen 以填满并随内容增长;不要用 h-screen(固定视口会裁剪)或 h-full(发布后外壳无显式高度,100% 会塌缩)。以 minW×minH 仍有用,config 是唯一的按项输入。发布后等待构建完成,未就绪的组件无法上线。

整画布编排:先规划全部 placement(一事一项),再用阶梯解析,统一布局(不重叠、尺寸匹配、刻意填满),批量写入(初始布局一次 publish,后续外科式 patch),最终每项处于 live 或 failed,绝不残留 generating。

评论:用 tasks-comments-list、tasks-comments-retrieve 在任务前后查看评论线程并处理未决项。

编辑 grid:读→打的循环,用 canvas-layout-get 代替 canvas-source-retrieve,写入用 canvas-layout-patch(外科操作,需 guard)或 canvas-layout-publish(完整文档,用于初始或重构)。遇 409 需重读布局、重新应用改动再打补丁。操作含 add_placement、update_placement、remove_placement、set_grid。placement 不得重叠或超出 grid.columns。

placement 生命周期:pending(用户画框但未描述)、generating(agent 填充,generationTaskId 关联任务、prompt 记录请求)、live(渲染组件,默认 latest,可固定版本,要求组件已发布且对操作者可见)、failed(保留 prompt 以便重试)。

常见校验:component_not_found(id 错误、已删、非组件或不可见)、component_not_published、placement_config_invalid、placement_size_out_of_contract(警告非错误,仍发布成功)、placements_overlap / invalid_placement(几何问题)。回复末尾用 canvas 工具返回的 url 字段链接,勿自行构造 URL。官方文档未提供的细节暂未提供。