扣盯小子

SDK 包边界 ​

HyperCard 现在按三个 npm 包拆分。最重要的原则是:SDK 负责“拿数据渲染和编辑”,宿主负责“业务数据、权限、接口和产品工作台”。

总览 ​

包负责不负责
@hy-bricks/core运行时、libs 注入、组件编译辅助、多画布 registry组件库查询、权限、业务数据请求
@hy-bricks/editor源码编辑、预览、受控 v-model、历史/Diff 入口事件fetch 历史版本、发布权限、后端 schema
@hy-bricks/canvas页面渲染、画布设计器、LayoutBox、选择/拖拽/resize、命令栈组件列表 UI、属性面板 UI、业务编排 UI

core ​

core 是运行时底座。它的核心是 createHyperCard()。

宿主可以注入任意库:

ts
app.use(createHyperCard({
  libs: {
    echarts,
    http,
    formatMoney,
  },
}))

组件源码里只认 __HYPERCARD__ 这个运行时上下文。

editor ​

editor 是组件源码编辑器。它要保持薄:

  • source 由宿主传入。
  • 修改通过 v-model 回传。
  • “看改动”“历史版本”“发布”只 emit 事件。
  • 真正保存、比较、回滚、鉴权都由宿主做。

这条边界很重要。否则编辑器会被某个业务后端 schema 绑死。

canvas ​

canvas 是页面渲染和设计核心。

它提供:

  • HyperCardPageRenderer
  • HyperCardCanvasDesigner
  • CanvasHandle
  • LayoutBox
  • containerLayout
  • 选择、拖拽、resize、命令栈、实例树、辅助线、网格、资源解析等能力

但它不内置:

  • 组件库面板
  • 属性面板
  • 右键菜单 UI
  • 页面库 UI
  • AI 命令栏 UI

这些都由宿主项目自己组合。SDK 给 API 和规则。

宿主必须负责什么 ​

  • 用户能不能看见某份业务数据。
  • 调哪个业务接口拿数据。
  • 组件库怎么分组、搜索、上架。
  • 页面版本怎么保存、审核、发布。
  • 数据错误怎么提示。
  • 业务主题、国际化、审计日志。

一句话 ​

HyperCard SDK 是“画布引擎 + 组件运行时 + 源码编辑器”,不是完整业务后台。