一、技术架构设计
1.1 整体架构
前端层(Vue3)
├── 表单组件层
├── AI 服务层
└── 数据处理层
AI 能力层
├── Claude API (表单理解)
├── 规则引擎 (智能校验)
└── OCR/解析 (数据提取)1.2 核心功能模块
- AI 自动填充：基于上下文智能推荐
- 智能校验建议：实时验证和错误纠正
- 表单数据提取：从图片/PDF 提取结构化数据
二、AI 自动填充实现
2.1 技术实现原理
核心思路
- 监听用户输入行为
- 分析已填写字段建立上下文
- 调用 AI 预测未填写字段
- 提供智能建议供用户选择
2.2 完整代码实现
<template>
<div class="smart-form-container">
<h2>智能表单 - AI 自动填充</h2>
<div class="form-wrapper">
<div class="form-group">
<label>公司名称</label>
<input
v-model="formData.company"
@input="handleFieldChange('company')"
placeholder="请输入公司名称"
/>
<div v-if="suggestions.company" class="suggestion">
<span class="suggestion-label">AI 建议：</span>
<span class="suggestion-value" @click="applySuggestion('company')">
{{ suggestions.company }}
</span>
</div>
</div>
<div class="form-group">
<label>所属行业</label>
<input
v-model="formData.industry"
@input="handleFieldChange('industry')"
placeholder="请输入所属行业"
/>
<div v-if="suggestions.industry" class="suggestion">
<span class="suggestion-label">AI 建议：</span>
<span class="suggestion-value" @click="applySuggestion('industry')">
{{ suggestions.industry }}
</span>
</div>
</div>
<div class="form-group">
<label>公司规模</label>
<select v-model="formData.scale" @change="handleFieldChange('scale')">
<option value="">请选择</option>
<option value="1-50">1-50人</option>
<option value="51-200">51-200人</option>
<option value="201-500">201-500人</option>
<option value="500+">500人以上</option>
</select>
</div>
<div class="form-group">
<label>联系邮箱</label>
<input
v-model="formData.email"
@input="handleFieldChange('email')"
placeholder="请输入联系邮箱"
/>
<div v-if="suggestions.email" class="suggestion">
<span class="suggestion-label">AI 建议：</span>
<span class="suggestion-value" @click="applySuggestion('email')">
{{ suggestions.email }}
</span>
</div>
</div>
<div class="form-group">
<label>公司地址</label>
<textarea
v-model="formData.address"
@input="handleFieldChange('address')"
placeholder="请输入公司地址"
rows="3"
></textarea>
<div v-if="suggestions.address" class="suggestion">
<span class="suggestion-label">AI 建议：</span>
<span class="suggestion-value" @click="applySuggestion('address')">
{{ suggestions.address }}
</span>
</div>
</div>
<div class="form-group">
<label>业务描述</label>
<textarea
v-model="formData.description"
@input="handleFieldChange('description')"
placeholder="请描述公司主要业务"
rows="4"
></textarea>
</div>
<button @click="autoFillAll" class="btn-primary" :disabled="loading">
{{ loading ? 'AI 分析中...' : '一键智能填充' }}
</button>
<button @click="submitForm" class="btn-success">提交表单</button>
</div>
<div class="ai-status" v-if="aiAnalysis">
<h3>AI 分析结果</h3>
<pre>{{ aiAnalysis }}</pre>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const formData = reactive({
company: '',
industry: '',
scale: '',
email: '',
address: '',
description: ''
})
const suggestions = reactive({
company: '',
industry: '',
scale: '',
email: '',
address: '',
description: ''
})
const loading = ref(false)
const aiAnalysis = ref('')
let debounceTimer = null
// 防抖处理字段变化
const handleFieldChange = (fieldName) => {
clearTimeout(debounceTimer)
debounceTimer = setTimeout(() => {
generateSuggestions(fieldName)
}, 800)
}
// 生成智能建议
const generateSuggestions = async (changedField) => {
// 构建上下文
const context = {
changedField,
currentData: { ...formData }
}
try {
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1000,
messages: [{
role: 'user',
content: `你是一个表单填写助手。根据用户已填写的信息，预测并建议其他字段的内容。
当前表单数据：
${JSON.stringify(context.currentData, null, 2)}
用户刚刚修改了字段：${changedField}
请分析上下文，为未填写或可以优化的字段提供建议。返回 JSON 格式：
{
"industry": "根据公司名推测的行业",
"email": "根据公司名生成的标准邮箱格式",
"address": "可能的公司地址",
"description": "基于行业的业务描述建议"
}
只返回JSON，不要其他解释。`
}]
})
})
const data = await response.json()
const content = data.content[0].text
// 解析 AI 返回的建议
const jsonMatch = content.match(/\{[\s\S]*\}/)
if (jsonMatch) {
const aiSuggestions = JSON.parse(jsonMatch[0])
// 更新建议（只更新未填写的字段）
Object.keys(aiSuggestions).forEach(key => {
if (!formData[key] && aiSuggestions[key]) {
suggestions[key] = aiSuggestions[key]
}
})
}
} catch (error) {
console.error('AI 建议生成失败：', error)
}
}
// 应用建议
const applySuggestion = (fieldName) => {
formData[fieldName] = suggestions[fieldName]
suggestions[fieldName] = '' // 清除已应用的建议
}
// 一键智能填充
const autoFillAll = async () => {
loading.value = true
aiAnalysis.value = ''
try {
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1500,
messages: [{
role: 'user',
content: `你是一个智能表单填写助手。根据用户已填写的部分信息，智能补全整个表单。
当前表单数据：
${JSON.stringify(formData, null, 2)}
请分析已有信息，为空白字段提供合理的建议值。考虑：
1. 公司名称与行业的关联性
2. 标准的企业邮箱格式
3. 合理的公司规模推测
4. 符合行业特点的业务描述
返回完整的表单数据 JSON，格式如下：
{
"company": "...",
"industry": "...",
"scale": "...",
"email": "...",
"address": "...",
"description": "...",
"analysis": "简要说明你的填充逻辑"
}
只返回JSON，不要其他文字。`
}]
})
})
const data = await response.json()
const content = data.content[0].text
const jsonMatch = content.match(/\{[\s\S]*\}/)
if (jsonMatch) {
const result = JSON.parse(jsonMatch[0])
// 只填充空白字段
Object.keys(result).forEach(key => {
if (key !== 'analysis' && !formData[key] && result[key]) {
formData[key] = result[key]
}
})
aiAnalysis.value = result.analysis || '已完成智能填充'
}
} catch (error) {
console.error('自动填充失败：', error)
alert('AI 服务暂时不可用，请稍后重试')
} finally {
loading.value = false
}
}
// 提交表单
const submitForm = () => {
console.log('提交表单数据：', formData)
alert('表单提交成功！\n\n' + JSON.stringify(formData, null, 2))
}
</script>
<style scoped>
.smart-form-container {
max-width: 800px;
margin: 0 auto;
padding: 30px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h2 {
color: #2c3e50;
margin-bottom: 30px;
font-size: 28px;
}
.form-wrapper {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #34495e;
font-weight: 500;
font-size: 14px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #dcdfe6;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s;
box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #409eff;
box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}
.suggestion {
margin-top: 8px;
padding: 10px;
background: #f0f9ff;
border-left: 3px solid #409eff;
border-radius: 4px;
font-size: 13px;
}
.suggestion-label {
color: #409eff;
font-weight: 500;
margin-right: 8px;
}
.suggestion-value {
color: #606266;
cursor: pointer;
text-decoration: underline;
transition: color 0.2s;
}
.suggestion-value:hover {
color: #409eff;
}
.btn-primary,
.btn-success {
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
margin-right: 12px;
margin-top: 10px;
}
.btn-primary {
background: #409eff;
color: white;
}
.btn-primary:hover:not(:disabled) {
background: #66b1ff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-success {
background: #67c23a;
color: white;
}
.btn-success:hover {
background: #85ce61;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(103, 194, 58, 0.4);
}
.ai-status {
margin-top: 30px;
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
}
.ai-status h3 {
color: #409eff;
margin-bottom: 15px;
font-size: 16px;
}
.ai-status pre {
background: white;
padding: 15px;
border-radius: 6px;
color: #606266;
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>三、智能校验建议实现
3.1 技术实现原理
核心思路
- 实时监听字段变化
- AI 分析数据合理性
- 提供智能修正建议
- 标记潜在错误
3.2 完整代码实现
<template>
<div class="smart-validation-container">
<h2>智能校验建议</h2>
<div class="form-wrapper">
<div class="form-group" :class="{ 'has-error': validationResults.name?.hasError }">
<label>姓名</label>
<input
v-model="formData.name"
@blur="validateField('name')"
placeholder="请输入姓名"
/>
<div v-if="validationResults.name" class="validation-message">
<span :class="validationResults.name.hasError ? 'error' : 'success'">
{{ validationResults.name.message }}
</span>
<span
v-if="validationResults.name.suggestion"
class="suggestion-fix"
@click="applySuggestion('name', validationResults.name.suggestion)"
>
建议：{{ validationResults.name.suggestion }}
</span>
</div>
</div>
<div class="form-group" :class="{ 'has-error': validationResults.idCard?.hasError }">
<label>身份证号</label>
<input
v-model="formData.idCard"
@blur="validateField('idCard')"
placeholder="请输入身份证号"
/>
<div v-if="validationResults.idCard" class="validation-message">
<span :class="validationResults.idCard.hasError ? 'error' : 'success'">
{{ validationResults.idCard.message }}
</span>
<span
v-if="validationResults.idCard.suggestion"
class="suggestion-fix"
@click="applySuggestion('idCard', validationResults.idCard.suggestion)"
>
建议：{{ validationResults.idCard.suggestion }}
</span>
</div>
</div>
<div class="form-group" :class="{ 'has-error': validationResults.phone?.hasError }">
<label>手机号码</label>
<input
v-model="formData.phone"
@blur="validateField('phone')"
placeholder="请输入手机号码"
/>
<div v-if="validationResults.phone" class="validation-message">
<span :class="validationResults.phone.hasError ? 'error' : 'success'">
{{ validationResults.phone.message }}
</span>
<span
v-if="validationResults.phone.suggestion"
class="suggestion-fix"
@click="applySuggestion('phone', validationResults.phone.suggestion)"
>
建议：{{ validationResults.phone.suggestion }}
</span>
</div>
</div>
<div class="form-group" :class="{ 'has-error': validationResults.email?.hasError }">
<label>电子邮箱</label>
<input
v-model="formData.email"
@blur="validateField('email')"
placeholder="请输入电子邮箱"
/>
<div v-if="validationResults.email" class="validation-message">
<span :class="validationResults.email.hasError ? 'error' : 'success'">
{{ validationResults.email.message }}
</span>
<span
v-if="validationResults.email.suggestion"
class="suggestion-fix"
@click="applySuggestion('email', validationResults.email.suggestion)"
>
建议：{{ validationResults.email.suggestion }}
</span>
</div>
</div>
<div class="form-group" :class="{ 'has-error': validationResults.bankCard?.hasError }">
<label>银行卡号</label>
<input
v-model="formData.bankCard"
@blur="validateField('bankCard')"
placeholder="请输入银行卡号"
/>
<div v-if="validationResults.bankCard" class="validation-message">
<span :class="validationResults.bankCard.hasError ? 'error' : 'success'">
{{ validationResults.bankCard.message }}
</span>
<span
v-if="validationResults.bankCard.suggestion"
class="suggestion-fix"
@click="applySuggestion('bankCard', validationResults.bankCard.suggestion)"
>
建议：{{ validationResults.bankCard.suggestion }}
</span>
</div>
</div>
<button @click="validateAll" class="btn-validate" :disabled="validating">
{{ validating ? '校验中...' : '智能全量校验' }}
</button>
</div>
<div v-if="overallAnalysis" class="analysis-panel">
<h3>整体分析报告</h3>
<div class="analysis-content">{{ overallAnalysis }}</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const formData = reactive({
name: '',
idCard: '',
phone: '',
email: '',
bankCard: ''
})
const validationResults = reactive({
name: null,
idCard: null,
phone: null,
email: null,
bankCard: null
})
const validating = ref(false)
const overallAnalysis = ref('')
// 本地规则校验
const localValidation = {
name: (value) => {
if (!value) return { hasError: true, message: '姓名不能为空' }
if (value.length < 2) return { hasError: true, message: '姓名至少2个字符' }
if (!/^[\u4e00-\u9fa5a-zA-Z\s]+$/.test(value)) {
return { hasError: true, message: '姓名只能包含中文、英文和空格' }
}
return { hasError: false, message: '格式正确' }
},
idCard: (value) => {
if (!value) return { hasError: true, message: '身份证号不能为空' }
if (!/^\d{17}[\dXx]$/.test(value)) {
return { hasError: true, message: '身份证号格式不正确，应为18位' }
}
return { hasError: false, message: '格式正确' }
},
phone: (value) => {
if (!value) return { hasError: true, message: '手机号不能为空' }
if (!/^1[3-9]\d{9}$/.test(value)) {
return { hasError: true, message: '手机号格式不正确' }
}
return { hasError: false, message: '格式正确' }
},
email: (value) => {
if (!value) return { hasError: true, message: '邮箱不能为空' }
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
return { hasError: true, message: '邮箱格式不正确' }
}
return { hasError: false, message: '格式正确' }
},
bankCard: (value) => {
if (!value) return { hasError: true, message: '银行卡号不能为空' }
if (!/^\d{16,19}$/.test(value)) {
return { hasError: true, message: '银行卡号应为16-19位数字' }
}
return { hasError: false, message: '格式正确' }
}
}
// 单字段校验
const validateField = async (fieldName) => {
const value = formData[fieldName]
// 先本地校验
const localResult = localValidation[fieldName](value)
if (localResult.hasError) {
validationResults[fieldName] = localResult
// 如果本地校验失败，调用 AI 获取修复建议
await getAISuggestion(fieldName, value, localResult.message)
return
}
// 本地校验通过，进行 AI 深度校验
await performAIValidation(fieldName, value)
}
// AI 深度校验
const performAIValidation = async (fieldName, value) => {
try {
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 800,
messages: [{
role: 'user',
content: `你是数据校验专家。请分析以下字段数据的合理性：
字段名：${fieldName}
字段值：${value}
所有数据：${JSON.stringify(formData, null, 2)}
检查要点：
1. 数据逻辑一致性（如身份证号与年龄是否匹配）
2. 常见错误模式（如多余空格、错误分隔符）
3. 数据完整性
4. 潜在的输入错误
返回 JSON 格式：
{
"hasError": false,
"message": "校验通过的消息",
"suggestion": "如果有问题，提供修正建议"
}
只返回JSON，不要其他内容。`
}]
})
})
const data = await response.json()
const content = data.content[0].text
const jsonMatch = content.match(/\{[\s\S]*\}/)
if (jsonMatch) {
const result = JSON.parse(jsonMatch[0])
validationResults[fieldName] = result
}
} catch (error) {
console.error('AI 校验失败：', error)
validationResults[fieldName] = {
hasError: false,
message: '本地校验通过'
}
}
}
// 获取 AI 修复建议
const getAISuggestion = async (fieldName, value, errorMessage) => {
try {
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 500,
messages: [{
role: 'user',
content: `用户输入了错误的数据，请提供修复建议。
字段名：${fieldName}
错误值：${value}
错误原因：${errorMessage}
请分析可能的正确格式，并给出具体的修正建议。
返回 JSON：{"suggestion": "修正后的值"}
只返回JSON。`
}]
})
})
const data = await response.json()
const content = data.content[0].text
const jsonMatch = content.match(/\{[\s\S]*\}/)
if (jsonMatch) {
const result = JSON.parse(jsonMatch[0])
validationResults[fieldName].suggestion = result.suggestion
}
} catch (error) {
console.error('获取建议失败：', error)
}
}
// 应用修复建议
const applySuggestion = (fieldName, suggestion) => {
formData[fieldName] = suggestion
validationResults[fieldName] = {
hasError: false,
message: '已应用 AI 建议',
suggestion: null
}
}
// 全量智能校验
const validateAll = async () => {
validating.value = true
overallAnalysis.value = ''
// 先校验所有字段
for (const field of Object.keys(formData)) {
await validateField(field)
}
// 进行整体关联性分析
try {
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1000,
messages: [{
role: 'user',
content: `请对以下表单数据进行整体分析：
${JSON.stringify(formData, null, 2)}
检查：
1. 字段间的逻辑一致性
2. 数据完整性
3. 潜在风险
4. 改进建议
给出简洁的分析报告（200字以内）。`
}]
})
})
const data = await response.json()
overallAnalysis.value = data.content[0].text
} catch (error) {
console.error('整体分析失败：', error)
} finally {
validating.value = false
}
}
</script>
<style scoped>
.smart-validation-container {
max-width: 800px;
margin: 0 auto;
padding: 30px;
}
h2 {
color: #2c3e50;
margin-bottom: 30px;
}
.form-wrapper {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.form-group {
margin-bottom: 25px;
transition: all 0.3s;
}
.form-group.has-error {
padding-left: 4px;
border-left: 3px solid #f56c6c;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #34495e;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 12px;
border: 1px solid #dcdfe6;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s;
box-sizing: border-box;
}
.form-group.has-error input {
border-color: #f56c6c;
}
.validation-message {
margin-top: 8px;
font-size: 13px;
}
.validation-message .error {
color: #f56c6c;
}
.validation-message .success {
color: #67c23a;
}
.suggestion-fix {
display: block;
margin-top: 5px;
color: #409eff;
cursor: pointer;
text-decoration: underline;
}
.suggestion-fix:hover {
color: #66b1ff;
}
.btn-validate {
width: 100%;
padding: 14px;
background: #409eff;
color: white;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}
.btn-validate:hover:not(:disabled) {
background: #66b1ff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}
.btn-validate:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.analysis-panel {
margin-top: 30px;
padding: 20px;
background: #ecf5ff;
border-radius: 8px;
border-left: 4px solid #409eff;
}
.analysis-panel h3 {
color: #409eff;
margin-bottom: 15px;
font-size: 16px;
}
.analysis-content {
color: #606266;
line-height: 1.8;
font-size: 14px;
}
</style>四、表单数据提取实现
4.1 技术实现原理
核心思路
- 上传图片/PDF 文件
- 使用 Claude Vision API 识别
- 提取结构化数据
- 自动填充表单
4.2 完整代码实现
<template>
<div class="data-extraction-container">
<h2>表单数据提取</h2>
<div class="upload-section">
<div class="upload-area" @click="triggerFileInput">
<div v-if="!previewImage" class="upload-placeholder">
<div class="upload-icon">📄</div>
<p>点击上传名片/证件照片</p>
<p class="upload-hint">支持 JPG、PNG 格式</p>
</div>
<img v-else :src="previewImage" class="preview-image" />
</div>
<input
ref="fileInput"
type="file"
accept="image/*"
@change="handleFileUpload"
style="display: none"
/>
<button
v-if="previewImage"
@click="extractData"
class="btn-extract"
:disabled="extracting"
>
{{ extracting ? '识别中...' : '开始提取数据' }}
</button>
</div>
<div v-if="extractedData" class="extracted-section">
<h3>提取结果</h3>
<div class="form-wrapper">
<div class="form-group">
<label>姓名</label>
<input v-model="extractedData.name" />
</div>
<div class="form-group">
<label>公司</label>
<input v-model="extractedData.company" />
</div>
<div class="form-group">
<label>职位</label>
<input v-model="extractedData.position" />
</div>
<div class="form-group">
<label>手机号</label>
<input v-model="extractedData.phone" />
</div>
<div class="form-group">
<label>邮箱</label>
<input v-model="extractedData.email" />
</div>
<div class="form-group">
<label>地址</label>
<textarea v-model="extractedData.address" rows="3"></textarea>
</div>
<button @click="saveExtractedData" class="btn-save">
保存到表单
</button>
</div>
</div>
<div v-if="extractionLog" class="log-section">
<h3>识别日志</h3>
<pre>{{ extractionLog }}</pre>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const fileInput = ref(null)
const previewImage = ref('')
const extracting = ref(false)
const extractedData = ref(null)
const extractionLog = ref('')
// 触发文件选择
const triggerFileInput = () => {
fileInput.value.click()
}
// 处理文件上传
const handleFileUpload = (event) => {
const file = event.target.files[0]
if (!file) return
const reader = new FileReader()
reader.onload = (e) => {
previewImage.value = e.target.result
}
reader.readAsDataURL(file)
}
// 提取数据
const extractData = async () => {
extracting.value = true
extractionLog.value = '正在识别图片内容...'
try {
// 将图片转为 base64
const base64Image = previewImage.value.split(',')[1]
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1500,
messages: [{
role: 'user',
content: [
{
type: 'image',
source: {
type: 'base64',
media_type: 'image/jpeg',
data: base64Image
}
},
{
type: 'text',
text: `请识别这张图片中的所有文本信息，并提取成结构化数据。
这可能是名片、身份证、营业执照等证件。请提取：
- 姓名
- 公司/单位
- 职位/职务
- 手机号
- 邮箱
- 地址
- 其他重要信息
返回 JSON 格式：
{
"name": "姓名",
"company": "公司",
"position": "职位",
"phone": "手机号",
"email": "邮箱",
"address": "地址",
"other": "其他信息"
}
如果某个字段识别不到，设为空字符串。只返回JSON，不要其他文字。`
}
]
}]
})
})
const data = await response.json()
const content = data.content[0].text
extractionLog.value = '识别完成！正在解析数据...'
const jsonMatch = content.match(/\{[\s\S]*\}/)
if (jsonMatch) {
const parsed = JSON.parse(jsonMatch[0])
extractedData.value = parsed
extractionLog.value = '数据提取成功！'
} else {
extractionLog.value = '未能识别到有效数据'
}
} catch (error) {
console.error('数据提取失败：', error)
extractionLog.value = '提取失败：' + error.message
} finally {
extracting.value = false
}
}
// 保存提取的数据
const saveExtractedData = () => {
console.log('保存数据：', extractedData.value)
alert('数据已保存到表单！\n\n' + JSON.stringify(extractedData.value, null, 2))
}
</script>
<style scoped>
.data-extraction-container {
max-width: 900px;
margin: 0 auto;
padding: 30px;
}
h2, h3 {
color: #2c3e50;
margin-bottom: 20px;
}
.upload-section {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
margin-bottom: 30px;
}
.upload-area {
border: 2px dashed #dcdfe6;
border-radius: 8px;
padding: 40px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.upload-area:hover {
border-color: #409eff;
background: #f5f7fa;
}
.upload-placeholder {
color: #909399;
}
.upload-icon {
font-size: 48px;
margin-bottom: 15px;
}
.upload-hint {
font-size: 13px;
color: #c0c4cc;
margin-top: 8px;
}
.preview-image {
max-width: 100%;
max-height: 400px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.btn-extract,
.btn-save {
width: 100%;
padding: 14px;
margin-top: 20px;
background: #409eff;
color: white;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.btn-extract:hover:not(:disabled),
.btn-save:hover {
background: #66b1ff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}
.btn-extract:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.extracted-section {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
margin-bottom: 30px;
}
.form-wrapper {
margin-top: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #34495e;
font-weight: 500;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #dcdfe6;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
.log-section {
background: #f5f7fa;
padding: 20px;
border-radius: 8px;
}
.log-section pre {
background: white;
padding: 15px;
border-radius: 6px;
color: #606266;
font-size: 13px;
line-height: 1.6;
}
</style>五、简历撰写指南
5.1 项目经验描述模板
项目名称： 企业级智能表单系统
项目时间： 2025.06 - 2025.11
项目描述： 负责开发企业级智能表单系统，集成 AI 能力实现表单自动填充、智能校验和数据提取功能。通过接入 Claude API，实现了基于上下文的智能推荐和实时数据校验，显著提升用户填写效率和数据准确性。
核心职责
- 设计并实现 AI 自动填充功能，根据已填字段智能预测未填内容，填写效率提升 60%
- 开发智能校验系统，实现本地规则 + AI 深度校验双重机制，数据错误率降低 75%
- 实现基于 Claude Vision API 的数据提取功能，支持从名片、证件等图片自动识别并填充
- 优化防抖策略和 API 调用时机，将 AI 接口调用成本降低 40%
技术栈： Vue3 Composition API、Claude API、防抖节流、异步请求优化
项目成果
- 用户平均填表时间从 8 分钟降至 3 分钟
- 表单数据准确率从 82% 提升至 96%
- 系统上线后获得业务部门高度认可，推广至 5 个业务线使用
5.2 SOP 标准回答话术
面试官：介绍一下你做的智能表单项目
回答话术： "好的。这个项目是我负责的企业级智能表单系统，主要解决传统表单填写效率低、错误率高的问题。
项目背景是这样的：我们公司有很多业务场景需要用户填写大量表单，比如客户信息登记、合同录入等，传统方式下用户填写很慢，而且经常出错，后续人工审核成本很高。
我们的解决方案分三个核心功能：
第一是 AI 自动填充。用户填写某个字段后，系统会分析已有信息，调用 Claude API 预测其他字段的内容。比如用户填了公司名称，系统就能推测行业、生成标准邮箱格式等。我在实现时重点处理了防抖策略，避免频繁调用 API，同时设计了建议机制，用户可以选择接受或忽略。
第二是智能校验。我设计了双重校验机制：先用本地正则做基础校验，通过后再调 AI 做深度分析。AI 会检查数据的逻辑一致性，比如身份证号和年龄是否匹配，还能发现常见错误模式并给出修复建议。这个功能把数据错误率从 82% 降到了 96%。
第三是数据提取。基于 Claude Vision API，用户上传名片或证件照片，系统自动识别文字并填充到对应字段。这个功能特别受销售团队欢迎，录入客户信息效率提升了 70%。
技术难点主要有两个：一是如何优化 AI 调用时机，既要保证体验又要控制成本；二是如何设计校验逻辑，让 AI 建议足够准确但不会打扰用户。我通过防抖、智能缓存、异步处理等方式解决了这些问题。
最终效果很好，平均填表时间从 8 分钟降到 3 分钟，系统现在已经推广到 5 个业务线在用。"
面试官：你是怎么优化 API 调用成本的？
回答话术： "这是个很实际的问题。我主要从三个方面优化：
第一是防抖策略。用户输入时我不会立即调用 API，而是等待 800ms，只有用户停止输入后才发起请求。这避免了用户边打字边触发请求的问题，API 调用量直接减少 70%。
第二是智能缓存。对于相同或相似的输入，我会缓存 AI 的建议结果。比如用户填了"阿里巴巴"，下次其他用户再填这个，就直接用缓存结果。这进一步减少了 20% 的调用。
第三是分级策略。不是所有字段都需要 AI，我做了优先级划分：简单字段用本地规则，复杂字段才调 AI。而且只在用户真正需要时才触发，比如失焦事件而不是每次输入。
通过这三个优化，我们把 API 成本降低了 40%，同时响应速度还提升了，用户体验反而更好了。"
5.3 难点与亮点分析
难点1：AI 建议的准确性与用户体验平衡
问题描述： AI 建议虽然智能，但如果推荐不准确会打扰用户，影响体验。如何让 AI 既主动又不过度干扰？
解决方案
- 建立置信度机制：AI 返回结果时附带置信度，只有高置信度才显示建议
- 上下文分析：不是孤立分析单个字段，而是结合整个表单上下文
- 用户行为学习：记录用户接受/拒绝建议的行为，动态调整触发策略
- 非侵入式设计：建议以淡色提示框形式出现，用户可一键应用或忽略
技术实现
// 带置信度的 AI 建议
const aiPrompt = `
分析上下文并给出建议，同时评估置信度：
{
"field": "email",
"suggestion": "zhangsan@alibaba.com",
"confidence": 0.95, // 置信度
"reason": "基于公司名和常见邮箱格式"
}
`
// 只显示高置信度建议
if (result.confidence > 0.8) {
showSuggestion(result)
}难点2：图片数据提取的容错处理
问题描述： 用户上传的图片质量参差不齐，光线、角度、模糊等都会影响识别准确率。
解决方案
- 前置图片预处理：自动调整对比度、旋转角度
- 多次识别机制：如果首次识别置信度低，提示用户重拍或手动校正
- 结构化提示词：明确告诉 AI 要提取哪些字段，降低误识别
- 人工校验环节：提取后展示结果供用户确认和修改
技术实现
// 结构化的提取提示词
const extractPrompt = `
识别这张名片/证件，提取以下字段：
- name: 姓名（必需）
- company: 公司（可选）
- phone: 手机号（必需，格式：1xxxxxxxxxx）
- email: 邮箱（可选）
- address: 地址（可选）
返回 JSON，未识别的字段返回 null。
如果图片不清晰，在 "quality" 字段标注："low"。
`亮点1：渐进式智能填充策略
不是一次性填完所有字段，而是根据用户填写进度逐步给出建议：
- 用户填 1-2 个字段：给出直接相关字段建议
- 用户填 3-5 个字段：给出所有空白字段建议
- 用户填写超过一半：提供"一键完成"功能
亮点2：智能校验的双重机制
本地规则 + AI 深度分析的结合：
- 本地规则：快速响应，秒级反馈
- AI 分析：深度校验，发现隐藏问题
- 两者结合：既保证速度又保证准确性
亮点3：成本优化的工程实践
通过防抖、缓存、分级调用等策略，在保证功能完整的同时大幅降低成本：
- 防抖减少 70% 调用
- 缓存减少 20% 调用
- 分级策略避免不必要的调用
这是真实的工程思维，不是为了用 AI 而用 AI。
5.4 避免 AI 化的表达技巧
❌ AI 化表达： "利用先进的人工智能技术，构建了一个高度智能化的表单系统，实现了自动化填充、智能化校验和数据提取的全流程优化。"
✅ 自然表达： "用户填表时，系统会根据已填内容智能推荐后续字段，还能发现数据错误并给出修改建议。比如用户填了公司名，系统就能猜出行业和邮箱格式。"
关键差异
- 用"会"而不是"能够"、"可以"
- 举具体例子而不是抽象描述
- 说用户视角而不是技术视角
- 用简单动词而不是高大上词汇
5.5 完整简历示例
【智能表单系统】2024.06 - 2024.11
项目背景：
公司多个业务线存在大量表单填写场景，传统方式效率低、错误率高，人工审核成本高。
我的工作：
1. AI 自动填充功能开发
- 设计基于上下文的智能推荐机制，用户填写 1-2 个字段后系统自动预测其他内容
- 实现防抖策略（800ms）和智能缓存，降低 API 调用成本 40%
- 用户平均填表时间从 8 分钟降至 3 分钟
2. 智能校验系统实现
- 设计本地规则 + AI 深度校验的双重机制，兼顾速度和准确性
- 实现实时错误提示和修复建议，数据准确率从 82% 提升至 96%
- 开发字段关联性校验，自动发现逻辑错误（如身份证号与年龄不符）
3. 数据提取功能实现
- 基于 Claude Vision API 实现名片、证件照片的文字识别
- 设计结构化提示词和容错机制，识别准确率达 92%
- 支持用户确认和修改提取结果，保证数据可控
技术栈：Vue3、Claude API、防抖节流、异步优化
项目成果：
- 系统上线后推广至 5 个业务线使用
- 表单填写效率提升 60%，数据准确率提升 14%
- 获得业务部门高度认可，作为公司 AI 应用标杆案例六、运行说明
6.1 环境准备
# 使用 Vite 创建 Vue3 项目
npm create vite@latest smart-form -- --template vue
cd smart-form
npm install6.2 运行代码
- 将上述任一完整代码复制到
src/App.vue - 运行
npm run dev - 浏览器访问
http://localhost:5173
6.3 注意事项
重要： Claude API 调用需要在实际环境中配置 API Key。本 demo 为展示功能逻辑，实际使用时需要：
- 在后端配置 API Key（不要暴露在前端）
- 前端通过后端代理调用 API
- 实现请求限流和错误处理
核心要点
- 技术实现要考虑成本优化（防抖、缓存、分级调用）
- 用户体验要平衡智能和干扰（置信度、非侵入式设计）
- 简历表达要具体、自然、避免 AI 化用词
- 面试回答要有条理、有数据、有深度思考