IntelliPro 产研协作平台：基于 AI Agent 的低代码智能化配置方案设计与实现

一、需求概述

1.1 背景与痛点

现有低代码平台依赖用户手动配置页面结构与字段属性，操作繁琐、效率低下，同时架构层面存在能力短板，整体核心痛点分为业务操作 与架构设计两类：

1.1.1 业务操作痛点

痛点	描述
学习成本高	需熟练掌握平台组件功能及配置规则，上手难度大
配置繁琐低效	需手动逐个添加字段、配置属性，步骤冗余且存在大量重复点击，耗时费力
缺乏智能化	不支持自然语言生成配置，整体过度依赖人工手动操作

1.1.2 架构设计痛点

痛点	描述
版本管理弱	无配置变更历史记录、差异对比及回滚功能，迭代风险高
智能化扩展不足	原生架构无标准化 AI 接入设计，难以无缝集成 LLM、AI Agent 能力

1.2 目标与价值

目标用户: 低代码平台开发者、页面配置人员

使用场景: 围绕痛点解决与效率提升，核心场景包括：自然语言生成配置、图片辅助 AI 理解样式需求、快速创建常见业务页面

核心价值（痛点解决方案）:

• 配置繁琐：通过自然语言转 Schema 自动转换，减少手动配置步骤
• 学习成本高：提供字段类型推断与配置建议，降低平台规则学习成本
• 操作低效：支持 Schema 差异对比与版本回滚，提升配置效率
• 缺乏智能化：实现自然语言生成配置，摆脱手动操作依赖

二、术语与缩略语

明确核心术语及缩略语，便于理解方案内容：

名称	含义	描述
Schema	页面配置描述	低代码引擎使用的 JSON 格式配置，定义页面组件与字段属性
LowCode Engine	低代码引擎	配置驱动的页面渲染引擎，将 Schema 解析为可交互页面
LLM API	AI 聊天接口	大语言模型提供的接口，接收需求并返回响应
Streaming	流式响应	实时返回 AI 生成内容，提升交互体验
Diff	差异对比	对比两个 Schema 版本差异，展示配置变更内容
MessagePart	消息片段	解析后的消息单元，分为文本和 JSON 片段

三、产品技术方案设计

3.1 产品整体流程

IntelliPro 产品涵盖页面开发、测试、部署全链路，结合 AI 能力实现高效开发，核心流程围绕 AI Agent 与现有研发流程深度融合展开。
AI 自动化生码
一键生成
线上运维
全链路埋点、运行监控
终端访问
业务功能线上页面
应用部署
DMS 平台统一部署发布
代码仓库
Git
测试与质量校验
AI 自动生成测试用例
开发人工功能自测
AI 可视化自动化测试 / AI CR
后台静默生成 D 类轻量化页面
AI 生成 UI 代码
AI 生成接口代码（API2CODE）
AI/人工补充轻量通用逻辑
轻量化完整代码
本地 IDE 开发 B/C 类常规页面
IntelliPro 本地插件
AI 生成 UI 代码
AI 生成接口代码（API2CODE）
人工补充定制业务逻辑
完整可运行业务代码
文档平台
PRD 正式文档
IntelliPro 创作平台
可视化创作工作台
AI 智能对话
选择业务样板间
富文本编辑器
可视化设计页
实时预览页
产品发起：B/C 类标准业务页面

基于样板间定制开发
后端发起：D 类轻量化页面

全自动化生成
前端
用户配置上下文

角色/业务线/个人配置/知识库/IntelliPro 规则
线上运维
终端访问
IntelliPro 创作平台
AI对话生成模块
用户发起：对话生成图表页
AI 对话交互
智能生成图表页
定制化图表页
全链路埋点、运行监控

3.2 AI Agent 核心设计

3.2.1 标准AI Agent运行流程

标准 AI Agent 通过「感知-思考-规划-行动-整合-执行-反思」闭环处理复杂需求，步骤如下：

1. 感知：接收用户文本、图片输入，精准解析用户核心需求意图，为后续处理奠定基础
2. 思考：基于感知到的用户意图，评估需求复杂度，判断是否需要调用外部工具或检索相关知识
3. 规划：结合思考结果，明确工具调用顺序、知识检索路径，制定清晰的执行方案
4. 行动：按照规划路径，通过 MCP 协议调用外部服务，或通过 RAG 检索相关知识，获取需求处理所需的外部支撑
5. 整合：将行动环节获取的外部结果，与 Agent 内部已有的知识体系深度融合，形成完整、连贯的响应逻辑
6. 执行：基于整合后的完整逻辑，生成用户可理解的响应内容，或执行具体业务操作（如本文场景中的生成 Schema）
7. 反思：评估执行结果的质量的是否符合用户需求，更新 Agent 的记忆与运行策略，优化后续响应效果

3.2.2 标准AI Agent主要组成

记忆
长期记忆
RAG
系统Prompt
短期记忆
Agent
Planning
工具
LLM

模块解读

模块	核心作用	关键说明
Agent 核心	作为中枢调度器，串联所有模块	接收用户指令，协调规划、工具调用、记忆读写，最终输出响应
Planning 规划模块	任务拆解与决策	将复杂目标拆分为子任务，判断执行路径，支持反思与迭代优化
工具模块	外部能力扩展	MCP：实现 Agent 与外部系统的标准化交互协议，统一工具调用接口 知识库 / API：通过 RAG 检索、第三方服务调用，补充 LLM 的知识与执行能力
LLM 大语言模型	理解与生成核心	负责自然语言理解、推理、对话生成，是 Agent 的「大脑」
记忆模块	上下文存储与复用	短期记忆保存当前对话上下文； 长期记忆通过 RAG、系统 Prompt 沉淀知识与规则

3.2.3 标准 AI Agent 运行实例

结合标准 AI Agent 运行流程（感知-思考-规划-行动-整合-执行-反思），以「低代码页面配置需求处理」为例，其运行实例流程如下：
Agent 运行实例
指令
调用
响应
启动
规划
读写
传递记忆/指令
知识库检索
调用
结果回传
召回知识输入
结果
推理结果
整合
工作流编排层
核心业务流程
多智能体协作层
多智能体集群
用户发起请求
Agent (MCP 客户端)
MCP 服务端
任务规划器
大语言模型 LLM
RAG 检索增强
工程工具集
会话/长期记忆
结果输出
统一对外服务：AI Agent

图示清晰呈现了标准 AI Agent（含 MCP、RAG 调用）接收用户需求、调度各模块、生成最终响应的完整闭环，与 3.2.1 节标准流程、3.2.2 节组成模块形成呼应，直观展示了标准架构的落地过程。

3.2.4 Text2Schema AI Agent选型与简化

IntelliPro text2Schema AI Agent 运行实例
提交自然语言 Schema 需求
启动
规划
调用
结果
结果回传
传递记忆/指令
返回 Schema 推理结果
整合信息
读写
记忆管理模块
系统长期记忆(Schema 规则/模板等)
会话临时记忆(上下文/摘要)
用户发起请求
核心调度 Agent(IntelliPro text2Schema)
Schema 任务规划器
推理引擎 LLM
工程工具集
Schema 结果输出

Text2Schema AI Agent 基于标准 AI Agent 架构，结合规则固定、场景简单的业务特性做轻量化精简，剔除冗余组件，高效落地。

精简项	替代方案	精简原因	核心优势
无 MCP 调用	依靠内置业务编排与生成逻辑闭环实现	无需调用外部工具、无需拉取外部动态数据	架构精简，效果精准稳定
无 RAG 检索	提示词固化 Schema 规范与业务规则	规则体量小、内容固定无需知识库检索	开发便捷，维护成本低
单 Agent 闭环	无需多 Agent 协作	业务流程简单无复杂分工	结构轻量化，易调试交付

注意: 精简为场景化最优适配，非能力缺失。业务升级后可按需接入 MCP、RAG、多智能体，平滑扩展为标准架构。

3.2.5 核心竞争力

Text2Schema AI Agent 的核心竞争力聚焦规划、工程工具、记忆三大模块，精准适配低代码 Schema 生成场景，优势如下：

序号	类目	核心优势	备注
1	Planning（规划）	动态规划用户意图，适配 Schema 全量/增量修改，应对边界场景	基于提示词工程，精准匹配需求
2	工程工具	提供 Schema 校验、Diff 对比、版本管理，保障配置可靠	代码工程实现，提升配置效率
3	记忆	支持长短期记忆与上下文压缩，减少 Token 消耗、降低 AI 幻觉	AI 工程优化，提升交互体验

3.2.6 扩展规划：D 类页面自动化生成

基于现有 Text2Schema AI Agent 轻量化架构，后续可通过 MCP 协议 扩展能力，并结合多智能体协作，实现 D 类轻量化页面全自动生成，核心规划如下：

1. 对接 API 文档 MCP 能力：通过 MCP 协议接入 API 文档服务，自动解析接口模型，提取字段、数据类型等元信息，为动态页面配置提供底层数据支撑。
2. 引入生码智能体协同能力 ：在多智能体协作层新增生码 Agent，依托 MCP 协议实现智能体之间调度互通，打通页面配置到代码生成全链路，自动产出完整页面业务代码。

3.3 AI Agent 整体技术方案

基于 3.2 节 AI Agent 核心设计，本节从技术层面拆解流程核心模块，明确各模块职责与实现逻辑，支撑 AI Agent 功能落地，确保方案可执行、可扩展。
校验与发布（工程实现）
LLM 生成核心
是
否
校验通过
全量校验失败
增量校验失败
用户上下文配置
角色
业务线
个人偏好设置
个人知识库
IntelliPro 自定义规则
规则库
动态规则
动态 Schema 样板规则
静态规则
基础或业务组件使用规则
Schema 模板示例
增量更新规则
输出格式
会话管理
本地会话管理
FIFO 策略
本地存储
清理过期会话
AI 会话链路
超阈值压缩
当前对话
历史会话
生成会话摘要
用户动态输入
压缩转码
文本 Prompt
图片输入
Base64 编码
DOM 元素位置采集
PM/FE/BE 发起需求
首次生成
全量更新
全量校验适配
输出全量 Schema
二次迭代生成
改动范围评估：改动占比 > 40%?
增量更新
增量 Diff 规则
结果校验
全量/增量更新
重试/降级处理
生成完整 Schema
页面渲染生成
版本生命周期管理
历史回溯

3.3.1 核心模块整体说明

整套流程覆盖 Text2Schema 从需求发起、智能生成、校验发布到版本管理的全业务闭环，包含七大核心模块，职责清晰、预留扩展能力，兼顾当前落地与后续平滑迭代。

3.3.2 各核心模块详细职责

1. 用户动态输入模块

• 支持文本、图片转 Base64 等多模态输入；
• 预留 DOM 元素位置采集扩展能力：底层通过 AST 解析建立 DOM 节点与 Schema 字段的映射绑定，为精准生成、增量更新提供定位支撑，方案轻量化、实现成本低。

2. 会话管理模块

维护多轮对话上下文，超长会话自动摘要压缩以控制 Token 开销；本地会话按 FIFO 机制清理过期数据，平衡存储占用与会话可用性。

3. 规则库模块

静态规则保障生成标准化；动态规则基于业务样板沉淀，适配多场景个性化生成需求。

4. 用户上下文配置模块

通过角色、业务线、个人偏好实现场景适配；预留个人知识库、IntelliPro 自定义规则扩展接口，提升后续适配能力。

5. LLM 生成核心模块

采用全量+增量双生成策略：首次生成走全量更新与校验，输出完整 Schema；二次迭代以 40% 改动占比为阈值，智能选择全量或增量模式，兼顾准确性与效率。

6. 校验与发布模块

对 Schema 做合法性校验，校验通过后按需选择全量替换或增量应用，最终渲染页面；校验失败则自动重试降级（全量）或回退全量更新（增量）。

7. 版本生命周期管理模块

提供版本管控与历史回溯，支撑全量/增量更新流程，支持版本回滚、迭代追溯，保障 Schema 迭代可管控、可复盘。

四、架构设计

4.1 现有架构概述

现有低代码平台核心架构如下，技术栈成熟、可扩展性强：

• 前端框架：基于 React + TypeScript 开发，保障类型安全与开发效率
• 核心引擎：采用 @alilc/lowcode-engine 作为页面核心渲染引擎，支撑页面可视化构建
• 架构模式：插件化架构设计，支持功能模块化扩展，降低迭代成本
• 配置方式：页面结构通过 JSON Schema 进行标准化描述，实现配置与渲染解耦

4.2 现有架构核心痛点

现有低代码平台在业务使用体验、版本管控及智能化扩展方面存在明显短板，整体核心痛点详见本文 1.1 章节背景与痛点分析，本节不再重复罗列。

4.3 新架构逻辑架构设计

针对上述架构痛点，本次设计的新架构围绕「智能化、低耦合、可扩展」核心，从业务流程、分层设计、核心模块三个维度展开，实现现有架构的 AI 增强优化。

4.3.1 整体业务流程（AI增强链路）

针对现有架构痛点，引入 AI Agent 能力优化业务流程，实现从需求描述到前端交付的全链路智能化，流程如下：
前端开发 PRD 生成服务 原型渲染引擎 属性编辑器 AI Agent PM 前端开发 PRD 生成服务 原型渲染引擎 属性编辑器 AI Agent PM 内部处理： 需求解析→匹配模板→组装 Prompt→调用 LLM→校验 Schema opt [可选流程：原型手动微调] 基于原型与 PRD，在 Cursor 中批量生成 可运行业务前端代码 完整链路：需求描述→AI 生成 Schema→原型预览→手动微调→自动出 PRD→前端代码交付 提交页面自然语言需求 输出标准页面 Schema 可视化渲染页面原型 进入属性编辑，调整组件配置 增量更新页面配置 刷新展示调整后原型 确认最终原型版本 生成并输出结构化 PRD 文档 交付 PRD 文档 + 最终页面原型

4.3.2 新架构分层设计（四层架构）

新架构采用分层设计，各层职责清晰、松耦合，便于扩展与维护，按「用户交互→业务处理→数据存储→外部支撑」的逻辑分层，具体如下：

• 用户界面层：面向用户交互，提供聊天、消息展示、操作入口及图片上传功能；
• 业务逻辑层：核心处理层，负责消息解析、Schema 提取校验、差异对比及状态管理；
• 数据存储层：负责对话历史及临时数据的存储，适配不同场景的存储需求（LocalStorage / SessionStorage / 内存缓存）；
• 外部依赖层：提供 AI 能力、低代码渲染、图片处理等外部支撑，不侵入核心逻辑。

4.3.3 核心模块功能（按分层对应）

各分层核心模块的具体功能如下表所示，覆盖从用户交互到数据存储的全流程：

所属分层	模块	功能描述
用户界面层	ChatPanel	聊天界面主组件，管理对话状态、消息流及用户交互
用户界面层	ImageUpload	处理图片上传与格式转换，支撑多模态输入
业务逻辑层	MessageParser	解析 AI 响应，处理输出信息的格式（分离文本与 JSON 片段），支撑 Schema 后续处理
业务逻辑层	SchemaExtractor	验证 Schema 有效性，生成符合规范的页面配置 Schema
业务逻辑层	DiffEngine	对比 Schema 版本差异，生成变更摘要及高亮展示
数据存储层	StorageManager	管理对话历史持久化存储，适配不同场景存储策略

4.4 技术选型（适配AI增强需求）

结合现有平台技术栈兼容性、功能需求及开发效率，技术选型如下表所示：

技术栈	选择原因
React 18 + TypeScript	与现有平台兼容，保障开发连续性，提供类型安全减少 bug
UI 组件库	统一视觉风格，降低设计与开发成本
LLM API	支持文本+图片多模态输入，满足智能生成需求
ReactMarkdown	专业 Markdown 渲染，支持代码高亮，适配技术场景
dayjs	轻量简洁，满足对话时间戳等时间处理需求
remark-gfm	支持 GitHub 风格 Markdown，提升渲染兼容性与美观度

4.5 存量平台兼容性评估

新架构采用插件化隔离集成设计，对现有低代码平台及依赖组件侵入性极低，整体兼容无改造、无业务影响，具体说明如下：

• 低代码引擎：以独立插件方式接入 AI 增强能力，完全不侵入引擎底层源码，兼容平台所有存量业务能力，不干扰常规页面配置与渲染逻辑。
• 存储体系 ：依托浏览器 LocalStorage / SessionStorage 实现会话与配置缓存，无需依赖后端存储服务，无需额外新增部署与运维成本。
• AI 能力依赖：采用按需触发机制，仅用户发起智能配置对话时才调用 LLM API，与平台基础运行链路完全解耦，无常驻资源消耗。

五、详细设计（落地实现方案）

5.1 核心流程可视化（时序图/流程图）

5.1.1 用户对话全流程

用户通过聊天面板发起需求，系统完成 AI 交互、Schema 处理及页面渲染的全流程如下：
页面UI Project API SchemaExtractor MessageParser LLM API StorageManager ChatPanel 用户 页面UI Project API SchemaExtractor MessageParser LLM API StorageManager ChatPanel 用户 支持文本/图片多模态输入 流式生成 JSON Schema loop [流式响应过程] alt [Schema有效] [Schema无效] 用户可继续对话或对生成的 Schema 进行操作 提交页面需求描述 加载会话历史上下文 返回会话历史数据 发送生成请求（含系统提示词+上下文） 返回流式内容片段 实时渲染对话消息 流式响应完成 解析响应，分离文本与 JSON 片段 转交 JSON 原始内容 校验 Schema 格式与业务有效性 导入有效 Schema 至项目 触发页面 UI 渲染更新 持久化会话消息至存储 渲染 Schema 操作按钮（保存/撤销） 仅渲染对话响应内容

5.1.2 DiffEngine 差异处理流程

Schema 生成后，通过差异对比引擎处理版本变更，清晰呈现新增、删除、修改字段，流程如下：
基准Schema

旧版本
目标Schema

新版本
Schema 差异比对引擎
生成变更摘要
提取高亮差异
新增/删除/修改字段

5.2 核心组件与模块设计

核心组件基于 TypeScript 开发，遵循单一职责、低耦合、高内聚设计原则，模块间协同完成从消息交互到 Schema 处理的全流程，具体设计如下：

5.2.1 ChatPanel（聊天面板组件）

职责：UI 交互入口，管理对话状态、消息发送/接收，调度核心模块完成业务逻辑

// 公共类型定义（全局通用，支撑所有模块）
interface MessageActionStatus {
  loading?: boolean;
  disabled?: boolean;
}
interface IPublicApiProject {}

// 聊天面板Props定义
interface ChatPanelProps {
  // 面板配置
  visible?: boolean;
  width?: number;
  // 核心回调
  onSendMsg: (msg: string) => void;
  onLLMResp: (resp: string, isComplete: boolean) => void;
  // 版本操作
  onRevert: (msgId: string, prevSchema?: string) => void;
  onSave: (msgId: string, currSchema?: string) => void;
  // 状态与依赖
  msgActionStatus?: Record<string, MessageActionStatus>;
  project: IPublicApiProject; // 低代码项目实例（必传）
}

5.2.2 MessageParser（消息解析模块）

职责 ：纯文本解析，拆分 AI 响应中的文本/JSON 片段，为 Schema 处理提供原始数据，联动 DiffEngine 实现版本对比

// 解析结果类型
export interface MessagePart {
  type: 'text' | 'json' | 'diff';
  content: string;
}

/**
 * 基础解析：分离AI响应中的纯文本与JSON代码块
 */
export function parseMsgContent(content: string): MessagePart[] {
  const parts: MessagePart[] = [];
  const jsonReg = /```json([\s\S]*?)```/g;
  let lastIndex = 0;

  content.replace(jsonReg, (match, jsonContent, index) => {
    // 提取前置文本
    if (index > lastIndex) parts.push({ type: 'text', content: content.slice(lastIndex, index) });
    // 提取JSON片段
    parts.push({ type: 'json', content: jsonContent.trim() });
    lastIndex = index + match.length;
    return match;
  });

  // 提取剩余文本
  if (lastIndex < content.length) {
    parts.push({ type: 'text', content: content.slice(lastIndex) });
  }
  return parts;
}

/**
 * 带差异对比的解析：依赖DiffEngine生成版本差异
 */
export function parseMsgWithDiff(content: string, prevSchema?: string): MessagePart[] {
  const parts = parseMsgContent(content);
  if (!prevSchema) return parts;

  // 联动DiffEngine计算差异
  const currJson = parts.find(p => p.type === 'json')?.content;
  if (currJson) {
    const diffs = diffJson(JSON.parse(prevSchema), JSON.parse(currJson));
    parts.push({ type: 'diff', content: generateDiffSummary(diffs) });
  }
  return parts;
}

/**
 * 消息截断：防止LLM token超限，优化上下文传输
 */
export function trimHistoryMsg<T>(chatHistory: T[], maxLen = 500): T[] {
  return chatHistory.map((item: any) => {
    if (item.content?.length > maxLen) {
      item.content = item.content.slice(0, maxLen) + '...';
    }
    return item;
  });
}

5.2.3 SchemaExtractor（Schema 提取模块）

职责 ：接收 MessageParser 输出的 JSON 数据，完成合法性校验 + 标准化格式化，适配低代码引擎导入

/**
 * Schema 核心校验：判断是否符合低代码平台规范
 */
export function isValidSchema(obj: unknown): obj is { pages: any[]; components: any[] } {
  return typeof obj === 'object' && obj !== null && 'pages' in obj && 'components' in obj;
}

/**
 * 从解析后的内容中提取并校验Schema
 */
export function extractValidSchema(text: string): object | null {
  try {
    // 兼容代码块/纯JSON格式
    const jsonStr = text.match(/```json([\s\S]*?)```/)?.[1] || text;
    const schema = JSON.parse(jsonStr.trim());
    return isValidSchema(schema) ? schema : null;
  } catch {
    return null;
  }
}

/**
 * Schema 标准化：补全必填字段，适配引擎导入规则
 */
export function formatStandardSchema(schema: Record<string, any>): object {
  return {
    pages: schema.pages ?? [],
    components: schema.components ?? [],
    version: schema.version ?? '1.0.0',
  };
}

5.2.4 DiffEngine（差异对比引擎）

职责：为版本管理提供核心能力，计算 Schema 差异、生成摘要与高亮格式，被上游模块直接调用

// 差异结果类型
export interface DiffResult {
  type: 'add' | 'delete' | 'modify';
  key: string;
  oldValue?: any;
  newValue?: any;
}

/**
 * 递归计算嵌套JSON对象差异
 */
export function diffJson(oldObj: any, newObj: any): DiffResult[] {
  const diffs: DiffResult[] = [];
  const allKeys = new Set([...Object.keys(oldObj), ...Object.keys(newObj)]);

  allKeys.forEach(key => {
    const oldVal = oldObj[key];
    const newVal = newObj[key];

    // 递归处理嵌套对象
    if (typeof oldVal === 'object' && typeof newVal === 'object' && oldVal && newVal) {
      diffs.push(...diffJson(oldVal, newVal));
      return;
    }

    // 识别新增/删除/修改
    if (!oldObj.hasOwnProperty(key)) diffs.push({ type: 'add', key, newValue: newVal });
    else if (!newObj.hasOwnProperty(key)) diffs.push({ type: 'delete', key, oldValue: oldVal });
    else if (oldVal !== newVal) diffs.push({ type: 'modify', key, oldVal, newVal });
  });

  return diffs;
}

/**
 * 生成差异摘要（前端快速展示）
 */
export function generateDiffSummary(diffs: DiffResult[]): string {
  const count = { add: 0, delete: 0, modify: 0 };
  diffs.forEach(d => count[d.type]++);
  return `新增${count.add}项 | 删除${count.delete}项 | 修改${count.modify}项`;
}

/**
 * 生成高亮格式JSON（适配页面展示）
 */
export function toDiffHighlightJson(obj: any, diffs: DiffResult[]): string {
  let json = JSON.stringify(obj, null, 2);
  diffs.forEach(d => {
    json = json.replace(new RegExp(`"${d.key}":\\s*.*?,?`), `【${d.type}】$&`);
  });
  return json;
}

5.3 存储方案详细设计

5.3.1 差异化存储策略

采用差异化存储策略，结合 URL 参数校验（是否含 schema_id）区分存储方式，兼顾数据持久性与系统性能，涵盖 LocalStorage、SessionStorage 及内存缓存三种类型，流程如下：
有
无
URL 参数校验
是否含 schema_id?
LocalStorage 持久化存储
正式项目
5MB 限制，超量自动清理
持久化保留
SessionStorage 临时存储
临时项目/测试
浏览器默认限制
页面关闭清除
内存缓存临时状态存储
临时状态未保存消息
无明确限制，随页销毁
页面刷新清除

各存储类型详细参数如下表所示：

存储类型	使用场景	容量限制	持久性
localStorage	有 schema_id 的正式项目对话及 Schema 数据	浏览器默认 5MB，超限制自动清理最旧对话	持久化（浏览器关闭后保留）
sessionStorage	无 schema_id 的临时项目、测试对话	浏览器默认限制	会话级（页面关闭后清除）
内存缓存	当前会话临时状态、未保存消息	无明确限制（随页面销毁）	页面级（页面刷新后清除）

5.3.2 核心数据结构定义

对话及消息数据采用标准化结构设计，便于解析、存储与复用，具体定义如下：

// 对话整体数据结构
interface ConvData {
  messages: ChatMsg[]; // 对话消息列表
  createTime: number; // 创建时间戳
  updateTime: number; // 更新时间戳
}
// 单条消息结构（适配多模态）
interface ChatMsg {
  id: string; // 消息唯一标识
  type: 'user' | 'assistant'; // 消息类型
  content: string; // 消息内容
  imgs?: ImageInfo[]; // 图片消息（可选，多模态支持）
  timestamp: number; // 发送时间戳
}
// 图片信息结构
interface ImageInfo {
  url: string; // 图片地址
  size: number; // 图片大小（单位：KB）
  type: string; // 图片格式（jpg/png/webp）
}

5.3.3 存储性能优化策略

针对存储容量、性能及用户体验，优化策略如下：

• 容量管理：localStorage 总容量超过 5MB 时，自动清理最早创建的对话，保障存储可用性
• 消息限制：单个对话最多保存 100 条消息，避免消息过多导致解析卡顿
• 增量保存：仅在消息内容变更时触发存储操作，添加防抖，减少存储开销
• 迁移机制：临时项目（sessionStorage）添加 schema_id 后，自动迁移至 localStorage，保障数据连续性

5.4 安全方案设计（风险防控）

5.4.1 多层输入验证机制

针对用户输入、Schema 导入等场景，建立多层验证机制，防范安全风险：

• JSON 解析：所有 JSON.parse 操作包裹 try-catch，避免恶意 JSON 格式导致页面崩溃
• Schema 验证：采用多层校验（格式校验+业务规则校验），确保导入的 Schema 符合平台规范，防范非法配置
• 图片处理：限制图片文件类型（仅支持 jpg、png、webp）及大小（最大 20MB），避免恶意文件上传

5.4.2 全局错误边界设计

为组件添加错误边界，捕获渲染及运行时错误，避免页面整体崩溃，提升用户体验：

// 全局可复用错误边界组件
class ErrorBoundary extends Component {
  state = { hasErr: false };
  // 捕获子组件错误，更新状态显示错误提示
  static getDerivedStateFromError() {
    return { hasErr: true };
  }
  // 记录错误日志（便于排查问题）
  componentDidCatch(err: Error, errInfo: ErrorInfo) {
    console.error('组件错误：', err, errInfo);
  }
  render() {
    // 错误状态下显示友好提示，正常状态下渲染子组件
    return this.state.hasErr ? <div>组件加载失败，请刷新重试</div> : this.props.children;
  }
}

5.5 异常处理方案设计（稳定性保障）

针对 API 调用、Schema 处理等核心场景，制定明确异常处理策略，提升系统稳定性：

5.5.1 API 调用异常

异常类型	处理方式
网络错误	自动重试 3 次（间隔 1s），失败后显示友好提示
Token 认证异常（身份验证）	提示用户检查 LLM API 配置，引导重新输入有效 Token
超时处理	30 秒超时，显示错误信息并允许重新发起请求

5.5.2 Schema 处理异常

异常类型	处理方式
解析失败	降级为普通文本显示，提示用户手动编辑或重新对话
导入失败	保留原始消息，显示失败原因，引导手动调整后重新导入
版本冲突	提供版本选择界面，展示差异并支持保留或合并版本

5.6 平台兼容性方案设计

5.6.1 浏览器兼容性适配

• 主流现代浏览器：支持 Chrome 88+、Firefox 85+、Safari 14+，保障核心功能正常运行
• 移动端浏览器：支持 iOS Safari、Android Chrome，适配移动端交互场景
• 兼容性优化：使用 @babel/preset-env 自动注入 Polyfill，兼容低版本浏览器核心 API

5.6.2 多设备响应式适配

• 响应式设计：聊天面板宽度自适应，最小支持 320px，适配手机、平板、PC 等不同设备
• 触摸操作：优化移动端按钮尺寸（最小 44px × 44px）及间距，提升触摸体验
• 性能优化：大消息采用分页加载，避免长列表渲染卡顿；图片懒加载，减少初始加载时间

5.7 状态管理设计（操作可追溯）

针对 Schema 操作状态，设计清晰的状态管理逻辑，确保操作可追溯、可撤销，流程如下：
无操作
保存操作
撤销操作
发起 Schema 操作
判断操作类型
标记为 none 状态
显示「保存/撤销」按钮
标记为 applied 状态
显示「撤销并保存」按钮
标记为 reverted 状态
显示「重新应用」按钮

六、架构取舍策略

维度	取舍	优势	劣势
性能与功能	客户端解析渲染，而非服务器渲染	降服务端复杂度，减网络传输，提页面响应	增客户端负担，对大文件、复杂 Schema 处理有限
存储与隐私	浏览器本地存储，而非云端存储	护用户隐私，无需部署云端存储	数据不可跨设备同步，受本地存储容量限制（5MB）

七、接口设计与开发规范

7.1 外部后台服务接口

7.1.1 核心接口总览

接口名	服务提供方	用途
LLM Messages API	AI 服务商	处理 AI 对话，生成页面配置 Schema
LLM Stream API	AI 服务商	接收 AI 流式响应，优化实时交互体验

7.1.2 LLM 接口统一配置示例

const llmBaseConfig = {
  baseURL: 'https://api.example.com/v1',
  model: 'xxx', // 统一选用同款 LLM 模型
  maxTokens: 2048, // 限制生成长度，控制调用成本
  stream: true, // 全局开启流式响应
  timeout: 30000, // 请求超时防阻塞
  headers: {
    'Content-Type': 'application/json'
  }
};

7.2 内部插件接口设计规范

为规范插件开发、保障与低代码引擎兼容适配，定义插件注册与消息回调标准接口。

7.2.1 插件对外注册接口

// AI聊天插件：向低代码引擎注册左侧 AI 助手面板
const AiChatPlugin = (ctx: IPublicModelPluginContext) => {
  return {
    async init() {
      skeleton.add({
        area: 'leftArea',
        type: 'PanelDock',
        name: 'aiChat',
        content: AIChatPanelContent,
        props: { title: 'AI 助手', icon: 'xxx' }
      });
    }
  };
};

7.2.2 消息处理回调接口定义

// 消息处理标准接口：统一管理对话交互与 Schema 版本操作回调
interface MsgHandler {
  onSend?: (msg: string) => void; // 用户发送消息回调
  onResponse?: (res: string, isComplete: boolean) => void; // AI 流式响应回调
  onRevert?: (msgId: string, prevSchema?: string) => void; // 撤销 Schema 变更回调
  onSave?: (msgId: string, currSchema?: string) => void; // 保存 Schema 变更回调
}

八、线上质量保障：监控指标与数据分析

8.1 核心技术监控指标

8.1.1 业务链路监控

指标	描述
对话请求成功率	AI 响应成功次数/总请求次数，衡量智能交互可用性
Schema 生成成功率	有效合规 Schema 输出次数/AI 有效响应次数，衡量生成准确度
配置操作转化率	用户从发起对话、生成 Schema 到应用配置的全链路转化情况

8.1.2 性能监控

指标	描述
LLM 接口响应耗时	大模型接口首字符返回耗时，评估流式交互体验
Schema 解析耗时	客户端解析、校验、格式化 Schema 的单次耗时
面板渲染性能	AI 聊天面板及消息列表的首次渲染、滚动渲染性能

8.2 错误监控范围

• LLM 接口异常：含网络异常、身份认证失败、请求超时、非法返回数据等
• Schema 处理异常：含解析失败、格式校验不通过、导入低代码引擎失败等
• 本地存储异常：含 LocalStorage 读写失败、容量超限、会话数据丢失等

8.3 用户行为数据分析指标

指标	描述
日活跃用户数	每日使用 AI 智能配置助手的独立用户数
平均对话轮数	用户完成单次页面配置的平均交互轮次
功能使用分布	各类业务页面生成功能的使用频次及占比

九、外部依赖与技术限制

9.1 核心外部依赖

依赖系统	限制条件
LLM API	需有效 API Key，有请求频率限制，依赖服务商稳定
LowCode Engine	需兼容现有 Schema 格式，确保插件集成
浏览器环境	支持 ES2018+，不兼容 IE11 等老旧浏览器

9.2 核心技术限制

• Token 限制：LLM API 单次请求最大 8192 tokens，超出需拆分
• 存储限制：localStorage 容量 5-10MB，需做好空间管理
• 并发限制：同一时间仅处理一个 AI 对话，避免性能下降

9.3 运维配合要求

• API Key 管理：环境变量配置，避免明文暴露
• 监控告警：LLM API 调用失败率 > 5% 触发告警
• 日志收集：收集用户操作及错误日志，便于排查

十、功能效果演示

10.1 核心功能特性

1. 多模态智能生成 ：支持自然语言文字描述、上传原型图双方式，AI 自动生成页面配置，并智能推断字段类型、校验规则与展示样式
2. 全量版本生命周期管理 ：自动记录 Schema 版本历史，支持版本切换、撤销回滚，可视化直观展示多版本字段与配置差异

10.2 功能使用演示

10.2.1 输入示例（用户管理页面）

生成用户管理页面：
- 搜索栏：用户名、邮箱、状态筛选
- 表格列：ID、用户名、邮箱、注册时间、状态
- 操作：查看、编辑、删除、批量删除

10.2.2 生成输出结果

• 自动生成完整 TablePage 配置，无需手动点选
• 匹配指定搜索字段、表格列，自动匹配字段类型
• 自动配置字段验证规则（如邮箱校验）及显示样式
• 生成操作按钮，支持批量操作逻辑

10.3 核心效果与优势

支持自然语言描述、原型截图上传多模态录入需求，一次描述即可同步应用至所有关联页面，从入门门槛、配置效率、智能能力三方面，闭环解决现有平台业务痛点。

优势维度	优势说明
降低学习门槛	依托自然语言即可完成配置，无需深耕平台组件与配置规则，新手可快速上手
简化配置提效	支持配置批量复用，AI 自动推断字段类型与属性，无需逐一手动配置、重复点击，告别繁琐低效
补齐智能能力	兼容文字、截图两种需求表达方式，由 AI 自动生成页面配置，摆脱传统纯手动操作模式

十二、风险预估与测试保障

12.1 技术风险分析

风险项	影响程度	应对措施
LLM API 服务不稳定	中	配置请求重试与降级策略，异常时切换离线使用模式
Schema 格式版本变更	低	增加版本兼容校验逻辑，留存版本日志保障向前兼容
浏览器适配兼容性	低	覆盖主流浏览器测试，通过 Polyfill 适配低版本环境

12.2 业务风险分析

• 用户接受度：新交互模式存在学习门槛，配套操作引导与场景示例降低使用门槛
• AI 生成准确性：AI 输出配置存在偏差风险，保留手动编辑调整入口
• 页面性能影响：会话缓存易引发页面卡顿，优化缓存清理与列表渲染逻辑

12.3 风险对应测试覆盖重点

针对上述技术及业务风险，从业务功能、异常容错、非功能特性维度制定测试规范，全面覆盖风险场景，保障系统上线质量。

测试类型	测试内容
AI 对话流程测试	覆盖多模态输入场景，校验响应准确率与交互流畅度，规避 LLM 服务不稳定风险
Schema 能力测试	校验 Schema 解析规则、引擎导入兼容性及版本差异对比能力，适配格式版本变更风险
异常容错测试	模拟网络、接口、非法数据等异常场景，验证系统降级运行与容错处理能力
整体性能测试	高会话历史、复杂配置场景下，校验业务处理效率与页面渲染性能，规避页面卡顿风险
浏览器兼容性测试	适配主流现代浏览器，验证功能可用性、界面展示及交互一致性，覆盖兼容适配风险

十三、附录

13.1 参考资料

• 低代码引擎
• Claude（LLM API 文档）
• React Markdown 文档