AI 表单助理
AI 表单助理是一个可以帮助您快速生成和修改表单的强大工具，通过利用人工智能技术，使得表单设计更加高效和便捷。本文详细介绍如何在设计器中启用以及配置 AI 表单助理以提升您的工作效率。
功能特性
AI 表单助理提供以下核心功能：
- 智能表单生成: 根据自然语言描述自动生成表单结构
- 表单修改优化: 智能分析现有表单并提供改进建议
- 流式对话体验: 实时显示AI思考过程和执行步骤
- 消息历史管理: 自动保存对话历史，支持清除和恢复
启用 AI 表单助理
在开始使用 AI 表单助理之前，您需要配置相应的 API token。以下是如何在您的 Vue 项目中进行配置的步骤：
基础配置
通过设置 config.ai.token，您就能启用 AI 表单助理功能。
vue
<template>
<fc-designer ref="designer" :config="config" />
</template>
<script setup>
const config = {
ai: {
token: 'Bearer fc-d8ed***************ffab0' // 请使用您从官网获取的有效 token
}
}
</script>提示: 您可以通过访问官网申请 API token来获取。
使用实例
AI 表单助理可以根据不同需求自动生成和修改表单。以下是一些典型使用场景的示例，帮助您快速掌握这些功能：
基础表单生成
- 生成一个就诊满意度问卷表单
- 创建一个建议收集表单，包含联系人、联系邮箱、分类和建议内容
- 追加一个用户信息表单
组件操作
- 添加一个标签组件，显示文本为 "Tag"
- 删除商品简介字段
- 商品价格字段使用数字输入框组件
条件逻辑
- 当单选框选择 "选项1" 时，显示输入框组件
- 根据出生日期自动计算年龄
- 根据商品单价和数量自动计算总价
验证规则
- 设置输入框为必填，并限制长度必须大于13
- 添加手机号格式验证
- 添加自定义验证：确认密码必须与密码一致
样式优化
- 给输入类组件补充占位提示文本（placeholder）
- 将姓名和手机号并排显示在同一行
高级功能
- 生成一个Vue组件，实现金额输入框
- 生成一个js版本的高精度加法
最佳实践
1. 清晰的指令描述
推荐做法：
生成一个用户注册表单，包含：
- 用户名（必填，3-20个字符）
- 邮箱（必填，邮箱格式验证）
- 密码（必填，至少8位）
- 确认密码（必填，与密码一致）
- 手机号（可选，11位数字）避免：
做一个注册表单2. 分步骤操作
对于复杂需求，建议分步骤进行：
- 先生成基础表单结构
- 再添加验证规则
- 最后调整样式和布局
3. 利用上下文
AI 表单助理会记住之前的对话内容，您可以：
用户：生成一个商品信息表单
AI：已生成包含商品名称、价格、描述的表单
用户：添加库存字段
AI：已添加库存数量字段4. 错误处理
如果AI生成的结果不符合预期，您可以：
- 直接说明问题："这个字段应该是数字类型"
- 提供具体修改要求："将价格字段改为必填"
- 重新描述需求："我需要的是下拉选择，不是输入框"
对话管理
消息操作
- 复制消息: 点击消息右下角的复制按钮
- 删除消息: 点击消息右下角的删除按钮
- 清除对话: 点击AI面板头部的清除按钮
历史记录
- 对话历史会自动保存到本地存储
- 刷新页面后可以恢复之前的对话
思考过程
AI 在处理复杂请求时会显示思考步骤：
- 分析需求 - 理解您的具体要求
- 生成方案 - 制定实现计划
- 执行操作 - 实际修改表单
- 验证结果 - 检查生成结果
利用 AI 表单助理，您不但可以大幅减少手动编码的时间，还能灵活调整表单以适应各种业务需求，从而在复杂项目中更高效地创建和管理表单。
隐藏 AI 模块
如果您希望暂时不使用或不显示 AI 模块功能，可以通过设置 config.showAi = false 来隐藏该模块。
vue
<template>
<fc-designer ref="designer" :config="config" />
</template>
<script setup>
const config = {
showAi: false // 隐藏 AI 模块
}
</script>通过上述配置，您可以灵活地启动和利用 AI 表单助理功能以满足您的开发需求。AI 表单助理在为表单设计提供智能支持的同时，也保留了灵活性，可以根据特定业务场景进行调整。希望此文档能够帮助您更好地理解和使用 AI 表单助理。