AI 驱动的代码模块配置能力实践回顾

免费领取国家顶级域名（.cn/.中国）

欢迎加入国家域名信源站点导航

站点智能：AI搭建 AI辅助运营独立站，把生意做到全世界

这周主要完成了可视化编辑器中“代码模块 AI 辅助配置”能力的接入

为什么做

代码模块本身灵活度高，但配置门槛也高。很多时候用户只是想调整模块整体色调、文案风格，却需要理解配置项、HTML 结构和编辑器内部数据格式

引入 AI 辅助的目标，是把“手动理解配置并修改”的流程，转成“描述需求，由 AI 辅助生成配置”的流程。这样可以降低代码模块的使用门槛，也为后续更多模块接入 AI 生成能力打基础

实现方案

整体方案采用“旧编辑器负责入口和应用，新 React 页面负责 AI 交互”的方式

旧编辑器侧主要做三件事：新增 AI 辅助按钮、收集当前模块数据、通过 postMessage 和 iframe 页面通信。新编辑器侧负责完整交互，包括对话输入、步骤切换、AI 请求、流式结果展示、配置解析、配置编辑和模块预览

1. iframe 页面独立打包，作为 code-ai-assist.html 入口接入适配旧编辑器

2. AI 请求使用真实接口，返回为流式内容，需要解析每段 output.text 并拼接最终结果

3. 返回 JSON 需要兼容不同结构，比如 settings 或 config.settings

4. 页面交互效果打磨

这个功能横跨旧编辑器、新 React 编辑器、AI 接口和发布流程。开发时需要明确每一块的责任边界：旧编辑器负责模块数据和最终应用，新页面负责 AI 交互，接口负责生成配置，发布流程负责保证入口文件可访问， 实现时没有直接在旧编辑器里硬塞复杂 UI，而是选择 iframe 接入新 React 页面。这个选择让功能复杂度集中在新编辑器里，也让后续复用更自然

目前已经完成了从入口到应用的完整闭环

用户可以在代码模块里打开 AI 辅助弹窗，输入主题色和需求，发起 AI 请求，等待AI返回结果，查看生成配置，编辑配置项，并把配置应用回当前操作代码模块

同时， 沉淀了几个可以复用的功能

1. AI对话输入组件

2. 对话消息组件

3. 步骤条组件

4. 模块预览组件

5. 流式接口解析逻辑

这些能力后续不仅可以继续当前的AI复制配置功能，也可以扩展到表单模块、页面模块、模板生成等场景

这个功能的主要使用对象是 可视化编辑器用户，包括内部同事和外部客户，尤其是需要使用代码模块但不熟悉配置结构的用户

从研发视角看，也交付给后续编辑器功能开发。因为这次把 AI 页面独立放在新编辑器中实现，后面继续扩展 AI 生成能力时，不需要在旧编辑器里继续堆复杂交互

目前功能已经在本地完成实现和打包验证，关键问题也已经排查到位