安装与引入

generator-sdk 是平台能力层。如果你还希望直接使用官方统一壳层，并内置登录入口、模板入口和浮动导出入口，建议同时安装 generator-workbench。

如果你想单独了解这个壳层的定位、挂载方式和展示效果，可以继续阅读 Generator Workbench。

方式一：npm 包（工程化项目）

bash

pnpm add @atomm-developer/generator-sdk
pnpm add @atomm-developer/generator-workbench
# 或
npm install @atomm-developer/generator-sdk
npm install @atomm-developer/generator-workbench

typescript

import { GeneratorSDK, SdkError, withBilling } from '@atomm-developer/generator-sdk'
import { defineGeneratorWorkbench } from '@atomm-developer/generator-workbench'

// TypeScript 类型也一并导出，可直接使用
import type { UserInfo, AuthStatus, CloudRecord, UsageInfo } from '@atomm-developer/generator-sdk'

defineGeneratorWorkbench()

⚠️ Vue 3 项目重要：请勿将 SDK 实例存储在响应式数据中，详见 SDK 初始化

方式二：CDN 引入（纯 HTML / vibe coding）

html

<script src="https://static-res.atomm.com/scripts/js/generator-sdk/index.umd.js"></script>
<script src="https://static-res.atomm.com/scripts/js/generator-sdk/generator-workbench/index.umd.js"></script>
<script>
  // UMD 格式下 window.GeneratorSDK 即为 GeneratorSDK 类
  const sdk = GeneratorSDK.init({ appKey: 'your_app_key' })

  // SdkError 和 withBilling 挂载在 GeneratorSDK 上
  const SdkError = GeneratorSDK.SdkError
  const withBilling = GeneratorSDK.withBilling

  GeneratorWorkbench.defineGeneratorWorkbench()
</script>

generator-workbench 现在会在 window.Vue 不存在时自动加载 Vue 3，在自己的 Shadow DOM 里以非阻塞方式注入默认的 atomm-ui 样式，并在 window.AtommUI 不存在时自动加载默认的 atomm-ui CDN 脚本，因此宿主壳本身不再需要额外手动引入 Vue 或 atomm-ui.js。当前 shell 会发起单次后台 CSS 拉取，并把同一份 CSS 文本分别补到 Shadow DOM 和全局 document.head，所以 CSS 加载不再阻塞首屏壳层渲染，也不会再走之前的 <link> + fetch 双通道请求。

但这只覆盖宿主壳自身。若你的 runtime 业务 UI 也直接使用 atomm-ui 组件，且它的实际挂载根节点位于 Shadow Root 或其他隔离上下文中，仍需要把业务 UI 样式注入到 runtime 的实际样式宿主，而不是只依赖页面 <head>。

包名	作用	推荐场景
`@atomm-developer/generator-sdk`	提供 auth、template、export、billing、history 等平台能力	始终必装
`@atomm-developer/generator-workbench`	提供官方统一宿主壳层，负责顶栏、模板入口、登录区、导出入口和 runtime 挂载	新的标准生成器推荐安装

构建产物

`@atomm-developer/generator-sdk`

文件	格式	用途	使用方式
`dist/index.es.js`	ESM	npm 工程化项目	`import { GeneratorSDK } from '@atomm-developer/generator-sdk'`
`dist/index.umd.js`	UMD	CDN `<script>` 标签	`window.GeneratorSDK`
`dist/index.d.ts`	TypeScript 类型	IDE 自动补全	自动加载

`@atomm-developer/generator-workbench`

文件	格式	用途	使用方式
`dist/index.es.js`	ESM	npm 工程化项目	`import { defineGeneratorWorkbench } from '@atomm-developer/generator-workbench'`
`dist/index.umd.js`	UMD	CDN `<script>` 标签	`window.GeneratorWorkbench`
`dist/index.d.ts`	TypeScript 类型	IDE 自动补全	自动加载

依赖说明

依赖	版本	用途	打包行为
`@makeblock/passport-client`	^4.0.19	登录弹窗	打包进 SDK
`@makeblock/upload`	^1.0.0	OSS 上传	打包进 SDK
`axios`	^1.7.9	HTTP 请求	打包进 SDK
`uuid`	^11.1.0	生成唯一 ID	打包进 SDK

所有依赖都打包进 SDK，使用方无需额外安装。

安装与引入 ​

方式一：npm 包（工程化项目） ​

方式二：CDN 引入（纯 HTML / vibe coding） ​

推荐安装组合 ​

构建产物 ​

@atomm-developer/generator-sdk ​

@atomm-developer/generator-workbench ​

依赖说明 ​