Generator SDK

简体中文

English

简体中文

English

Appearance

整体架构 ​

系统总览 ​

分层边界 ​

这个仓库的结构在以下四条边界清晰时最好理解：

  • generator-sdk 负责平台能力
  • generator-workbench 负责官方壳层
  • 生成器 runtime 负责业务状态和渲染
  • host page 决定如何挂载 runtime

如果生成器既要支持完整编辑页，又要支持模板页嵌入场景，就应当收敛到 Runtime Contract，而不是依赖临时性的 host bridge。

发布交接链路 ​

平台侧的发布链路大致是：

  1. 本地工程完成集成
  2. 通过开发者控制台上传构建产物
  3. 进入平台审核流程
  4. 审核通过后，由平台托管并暴露访问入口

这个仓库主要覆盖前两步。

SDK 内部结构 ​

从高层看，SDK 主要分成：

  • core/：配置、HTTP、存储、事件基础设施
  • modules/：auth、cloud、history、credits、billing、export
  • helpers/：如 withBilling
  • types/：公开类型定义

技术栈 ​

  • TypeScript
  • Vite library mode
  • ESM + UMD + 声明文件输出
  • 与框架无关的 API 设计

下一步 ​

整体架构 ​

架构总览 ​

SDK 内部目录结构 ​

SDK/
  src/
    core/
      config.ts          # 全局常量（baseURL、OSS bucket）
      http.ts            # axios 实例 + 请求/响应拦截器 + SdkError 定义
      storage.ts         # uToken Cookie 读写
      event-emitter.ts   # 类型安全事件总线
    modules/
      auth.ts            # 登录/退出/状态查询
      cloud.ts           # 云保存/恢复/删除
      history.ts         # 历史记录列表/详情/删除
      credits.ts         # 积分余额查询/扣除
      billing.ts         # 统一计费
      export.ts          # 下载/打开 Studio
    helpers/
      with-billing.ts    # withBilling 高阶工具函数
    types/
      index.ts           # 所有公开类型定义
    sdk.ts               # GeneratorSDK 主类（全局单例）
    index.ts             # ESM 入口
    umd.ts               # UMD 入口

技术栈 ​

  • 语言：TypeScript
  • 构建：Vite Library Mode
  • 产物：ESM + UMD + TypeScript 类型声明
  • 设计：框架无关，原生 HTML / React / Vue / Svelte 均可使用

运行时嵌入分层 ​

generator-sdk 只定义平台能力，不定义生成器的宿主嵌入协议。

如果一个生成器既要在完整生成器页面中运行，又要在模板页中只渲染画布和部分参数，则推荐增加一层 Generator Runtime Contract：

  • generator-sdk：登录、云保存、历史记录、积分、计费、导出
  • Generator Runtime Contract：full / embed 双模式、状态同步、参数 schema、面板过滤、导出接口
  • generator-workbench：统一官方宿主壳层，负责顶栏、登录入口、模板入口、浮动导出入口以及 runtime 的 panel/canvas 挂载
  • 宿主页面：决定是否渲染完整页面、只渲染画布、只渲染部分参数

建议的新生成器默认具备：

  • mount({ mode, target, container })
  • getState() / setState() / patchState()
  • getPanelSchema()
  • export()
  • subscribe()

详细协议见 Runtime Contract。

MIT Licensed

Atomm Studio