引言

AI 辅助开发正在从“生成代码”逐步演进为“组合开发能力”。对于企业应用而言，页面往往不仅需要表单和列表，还需要电子表格、图表、流程编辑器、富文本编辑器等复杂前端组件。

如果 AI 只能使用内置组件，生成页面的能力就会受到明显限制。为此，活字格 React AI 单元格增加了自定义集成第三方前端库的能力。开发者可以先将浏览器端 JavaScript 库封装为活字格前端扩展库，再将其配置到 React AI 页面中，最后通过自然语言指定库的使用方式，由 AI 生成对应的业务页面。

本文以 SpreadJS 为例，介绍完整的集成过程，并分析其中涉及的扩展库封装、设计器配置和 AI 页面生成机制。

一、整体实现流程

整个过程可以拆分为三个阶段：

1. 将第三方 JavaScript 库整理为活字格前端扩展库包。
2. 在活字格设计器中导入扩展库，并将其配置到 React AI 页面。
3. 在需求提示中指定第三方库，由 AI 生成业务页面。

从调用关系上看，整体流程如下：

第三方前端库
      ↓
前端扩展库包
      ↓
活字格设计器导入
      ↓
React AI 页面配置
      ↓
自然语言需求 + 第三方库能力
      ↓
AI 生成业务页面

这里需要注意，React AI 单元格并不是直接读取第三方库的源代码，而是通过扩展库包中提供的加载配置、能力说明和使用提示来理解该库。因此，扩展库封装质量会直接影响后续的 AI 生成效果。

二、创建活字格前端扩展库包

2.1 为什么需要封装

从 npm 或官方网站下载的第三方库，通常只面向传统前端开发流程。要让它在活字格 React AI 单元格中使用，还需要补充以下信息：

• 库文件及其依赖文件；
• JavaScript 和 CSS 的加载顺序；
• 全局变量或模块导出方式；
• 初始化方法和核心 API；
• 典型使用场景；
• AI 生成代码时应遵循的调用方式；
• 扩展库的版本及元数据。

因此，扩展库包本质上是第三方库与活字格运行环境之间的一层适配描述。

2.2 使用前端库包 AI 指南

本示例使用 FrontendLibraryPackage-AI-Guide.md 作为前端库包 AI 指南。

这份指南定义了将浏览器端 JavaScript 类库转换为活字格前端扩展库包时需要遵循的规范，包括：

• 扩展库目录和文件组织方式；
• 依赖关系及资源加载方式；
• 库能力和 API 的描述格式；
• React AI 单元格可识别的使用提示；
• 扩展库的预览、上传和运行要求。

将该 Markdown 文档交给 WorkBuddy 后，WorkBuddy 会读取并解析其中的规则，并将其安装为一个自定义 Skill。

之后，在创建 SpreadJS 扩展库时，AI 就可以根据该 Skill 自动完成扩展库结构设计和打包工作。开发者不需要预先编写完整的封装代码，只需要明确以下信息：

• 使用哪个第三方库；
• 希望解决什么业务问题；
• 页面需要哪些交互能力；
• 目标运行环境和技术边界是什么。

2.3 让 AI 生成 SpreadJS 扩展库

可以向 AI 提供类似下面的需求：

请基于当前的前端库包规范，创建一个可供活字格 React AI 单元格使用的 SpreadJS 扩展库。
​
使用场景：
1. 在 React AI 页面中创建类 Excel 表格；
2. 支持初始化二维数据；
3. 支持单元格编辑；
4. 支持公式计算；
5. 支持读取和更新单元格内容；
6. 提供必要的库说明和 AI 调用提示。
​
请完成扩展库的文件组织、依赖配置、加载说明、API 描述和最终打包。

这里的关键并不是提示词本身，而是要同时提供清晰的业务目标和明确的技术范围。扩展库的具体文件结构、资源加载方式及 API 说明，可以交由 AI 按照 Skill 中的规范生成。

完成处理后，AI 会输出打包后的扩展库文件。此时，SpreadJS 仍然是原始第三方库，而扩展库包则是面向活字格运行环境的可部署版本。

三、在活字格设计器中导入扩展库

打开活字格设计器，进入：

设置 → 自定义 JavaScript / CSS

在前端扩展库区域导入刚刚生成的 SpreadJS 扩展库包。

导入过程中，活字格会读取扩展库中的元数据和依赖配置。导入完成后，可以检查以下信息：

• 扩展库名称；
• 版本号；
• 依赖资源；
• 使用说明；
• 运行时加载配置。

这一步的主要作用是让活字格项目具备使用 SpreadJS 的运行环境。如果扩展库未正确导入，后续 React AI 页面即使生成了相关代码，也可能因为资源缺失或加载顺序错误而无法运行。

四、在 React AI 页面中配置 SpreadJS

扩展库导入完成后，创建一个 React AI 页面。

在页面的前端扩展库配置中，选择 SpreadJS 扩展库。完成配置后，该页面就拥有了 SpreadJS 的运行时能力，同时 React AI 单元格也能够知道当前页面可以调用哪些第三方能力。

接下来，可以向 React AI 单元格提交业务需求，例如：

请使用已配置的 SpreadJS 扩展库，生成一个销售预算工作表。
​
要求：
1. 初始化销售预算数据；
2. 包含产品、负责人、预算金额、实际销售额和完成率字段；
3. 支持用户直接编辑表格；
4. 完成率根据预算金额和实际销售额自动计算；
5. 在底部显示预算总额和实际销售额合计；
6. 页面加载后立即显示可操作的表格。

提交提示后，AI 会根据三个方面生成页面：

• 当前页面的 React 运行环境；
• 已配置的 SpreadJS 扩展库；
• 用户提供的业务需求。

这意味着 AI 不仅要生成页面布局，还需要正确完成第三方库的初始化、数据绑定、公式配置和交互处理。

五、运行销售预算工作表

页面生成完成后，在浏览器中运行即可看到销售预算工作表。

初始化阶段，页面会创建预置的销售预算数据。用户可以直接编辑单元格内容，销售额、完成率以及汇总结果会根据公式自动重新计算。

在这个示例中，各部分职责可以划分为：

这种职责分离使 AI 生成页面时能够复用成熟的第三方组件能力，而不必从零实现复杂的表格逻辑。

六、工程实践中的注意事项

6.1 明确库的运行环境

封装扩展库前，需要确认第三方库是否支持浏览器运行，以及是否依赖特定的全局变量、CSS 文件或初始化顺序。

6.2 控制暴露给 AI 的 API 范围

不建议把第三方库的全部 API 原样暴露给 AI。更合理的做法是围绕业务场景整理常用能力，提供清晰、稳定的调用说明，以减少生成代码的不确定性。

6.3 保持版本信息一致

扩展库版本、实际使用的第三方库版本以及项目中的说明文档应保持一致。升级第三方库后，应重新验证依赖加载、初始化逻辑和页面生成结果。

6.4 验证生成代码的边界情况

AI 生成的页面仍然需要进行常规测试，重点检查：

• 空数据和异常数据处理；
• 公式计算是否正确；
• 用户编辑后的数据是否能够正常更新；
• 页面重复初始化时是否产生重复实例；
• 第三方资源加载失败时是否有明确提示。

结语

通过自定义前端扩展库，活字格 React AI 单元格可以突破内置组件的限制，将 SpreadJS 等成熟的浏览器端第三方库纳入 AI 辅助开发流程。

完整实现路径可以概括为：

1. 根据前端库包规范封装第三方库；
2. 在活字格设计器中导入并配置扩展库；
3. 在 React AI 页面中通过自然语言指定库的使用方式；
4. 由 AI 生成并调整最终业务页面。

SpreadJS 只是一个示例。对于图表、富文本、流程设计、地图和数据可视化等场景，也可以采用相同方式进行扩展。随着可用前端库不断增加，React AI 单元格将不仅能够生成基础页面，也能够组合更多专业组件，构建更贴近实际业务的企业级应用。

参考链接：AI 辅助开发—React AI 单元格自定义集成三方库