docs 文档索引

本文档目录为 LangChain Agent 设计表单生成功能提供完整的项目架构和数据结构参考。

文档列表

00-数据结构总览.md

用途：了解项目的核心数据结构 内容：

• 表单字段结构 (FormField)
• 组件属性结构 (ComponentProps)
• 选项结构 (Option)
• API 响应结构
• 数据流转流程

适合：Agent 需要理解整体数据模型时

---

01-表单字段组件类型.md

用途：了解所有支持的组件类型 内容：

• 30+ 种组件类型完整列表
• 每种组件的用途和配置要点
• 组件注册位置
• 新增组件流程

适合：Agent 需要选择合适的组件类型时

---

02-component_props-配置规范.md

用途：了解组件属性的详细配置 内容：

• 通用属性（所有组件）
• 各类组件专属属性
• Option 结构详解
• 数据提交格式
• 样式属性

适合：Agent 生成具体组件配置时

---

03-API-接口文档.md

用途：了解后端 API 接口 内容：

• 表单管理接口（增删改查）
• 数据管理接口
• 组件接口
• 通用接口（上传、验证码等）
• HTTP 缓存控制

适合：Agent 需要与后端交互时

---

04-示例数据.md

用途：提供各类组件的配置示例 内容：

• 20+ 个真实配置示例
• 完整表单配置示例
• 数据提交格式示例
• LangChain Prompt 模板

适合：Few-shot Learning、Prompt 模板构建

---

05-LangChain-Agent-使用指南.md

用途：Agent 开发指南 内容：

• 自然语言到组件映射表
• 必填/数量/选项识别规则
• 复杂需求处理
• Prompt 模板
• LangChain 代码示例
• 验证和错误处理

适合：开发 LangChain Agent 的主要参考文档

---

06-规则控制系统.md

用途：表单字段显示/隐藏规则系统 内容：

• 规则系统概述（SHOW/HIDE 模式、AND/OR 逻辑）
• 规则数据结构（rule_list、Rule、RuleExpr）
• 核心函数分析（checkRules、evaluateMultipleRules、evaluateRuleCondition、handleCascadeHiding）
• 触发机制（@active 事件）
• 实际示例（简单/复杂/多规则/级联隐藏）
• LangChain Agent 集成要点

适合：Agent 需要生成规则配置或理解字段间依赖关系时

---

07-页面数据提取指南.md

用途：从实际运行的表单页面中提取配置数据 内容：

• Pinia Store 数据存储结构
• 数据提取方法（Chrome DevTools MCP / Vue DevTools API / 直接 API）
• 完整提取流程（打开页面 → 等待加载 → 提取数据 → 解析配置）
• 数据提取模板和代码示例
• 数据转换和验证

适合：用户提供表单 URL 时，需要从页面提取完整配置

---

快速查找指南

按场景查找

场景	推荐文档
理解项目架构	00-数据结构总览
选择组件类型	01-表单字段组件类型、05-LangChain-Agent-使用指南
生成配置	02-component_props-配置规范、04-示例数据
Few-shot 示例	04-示例数据
开发 Agent	05-LangChain-Agent-使用指南
生成规则配置	06-规则控制系统
理解字段依赖	06-规则控制系统
从 URL 提取表单	07-页面数据提取指南

按组件类型查找

组件类别	文档位置
文本输入类	01-表单字段组件类型（文档输入类）
选择类	01-表单字段组件类型（选择类）、04-示例数据（示例4-6）
日期时间类	01-表单字段组件类型（日期时间类）、04-示例数据（示例8）
上传类	01-表单字段组件类型（上传类）、04-示例数据（示例9）
特殊功能类	01-表单字段组件类型（特殊功能类）、04-示例数据（示例11-20）

按属性查找

属性	文档位置
通用属性	02-component_props-配置规范（通用属性）
options 配置	02-component_props-配置规范（选项类组件属性）
图片上传配置	02-component_props-配置规范（上传类属性）
样式属性	02-component_props-配置规范（样式属性）
规则配置	06-规则控制系统（数据结构、触发机制）
字段显示/隐藏	06-规则控制系统（SHOW/HIDE 模式）
级联隐藏	06-规则控制系统（级联隐藏逻辑）

Agent 开发建议

1. 先读顺序

1. 05-LangChain-Agent-使用指南 - 了解 Agent 设计要点
2. 01-表单字段组件类型 - 了解可用的组件
3. 04-示例数据 - 获取 Few-shot 示例
4. 02-component_props-配置规范 - 深入了解配置细节
5. 06-规则控制系统 - 了解字段显示/隐藏规则（如需动态表单）

2. 关键数据结构

Agent 必须正确理解的核心结构：

// 最核心的结构
FormField {
  key: string
  value: any
  component_props: {
    tag: string      // 决定组件类型
    label: string    // 显示名称
    required: boolean
    // ... 其他属性
  }
}

3. 组件类型映射表

直接参考 05-LangChain-Agent-使用指南 中的映射表，建立用户描述 → 组件类型的映射。

4. Few-shot 示例使用

从 04-示例数据.md 中提取典型示例作为 Prompt 的一部分，提高输出质量。

5. 验证策略

生成配置后，验证以下内容：

• tag 值是否有效（参考 01 文档的组件列表）
• required 是否为布尔值
• 选项类组件是否有 options 数组
• 上传类组件是否有合理的数量限制

数据流转图

用户自然语言
       ↓
   [Agent 解析]
       ↓
   意图识别 + 实体提取
       ↓
   组件类型选择 + 配置生成
       ↓
   [验证输出]
       ↓
表单字段配置 JSON
       ↓
   createComponentType()
       ↓
   动态表单渲染

联系方式

如有问题或需要补充文档，请查阅：

• 项目源码：src/hooks/useComponentType.js
• 组件目录：src/components/
• API 目录：src/api/