1060 lines
37 KiB
TypeScript
1060 lines
37 KiB
TypeScript
import React, {
|
||
useState,
|
||
useEffect,
|
||
} from "react";
|
||
import type { EvaluationPoint } from "~/models/evaluation_points";
|
||
import { EVALUATION_OPTIONS, VLMFieldType } from "~/models/evaluation_points";
|
||
|
||
/**
|
||
* ExtractionSettings 组件
|
||
*
|
||
* 功能：
|
||
* - 提供三种抽取设置方式：大模型抽取、多模态抽取和正则抽取
|
||
* - 允许在三个标签页中添加不同类型的字段
|
||
* - 统一的更新机制，确保点击"更新全部字段"按钮时，所有三种类型的字段都会被收集和更新
|
||
*
|
||
* 优化后的交互逻辑：
|
||
* 1. 用户可以在三个标签页之间切换，在每个标签页中添加对应类型的字段
|
||
* 2. 添加字段后，会自动标记为"有未保存更改"状态
|
||
* 3. 无论当前在哪个标签页，点击底部的"更新全部字段"按钮都会收集所有三种类型的字段
|
||
* 4. 更新成功后会显示详细的字段数量统计信息，包括每种类型的字段数
|
||
* 5. 系统会自动检查字段名重复，确保所有字段名唯一
|
||
*
|
||
* 注意：
|
||
* - 仅当点击"更新全部字段"按钮后，字段才会真正提交给父组件和规则上下文
|
||
* - 用户必须手动点击更新按钮，才能在评查设置中使用这些字段
|
||
*
|
||
* 类型定义：
|
||
* - LogicType: 'and' | 'or' | 'custom' - 用于评查配置中多个规则的组合逻辑
|
||
* - 'and': 所有规则都必须满足
|
||
* - 'or': 任一规则满足即可
|
||
* - 'custom': 自定义逻辑表达式，如 "(规则1 AND 规则2) OR 规则3"
|
||
*
|
||
* - LogicOperator: 'and' | 'or' - 用于单个规则内的条件组合
|
||
* - 'and': 规则内所有条件都必须满足
|
||
* - 'or': 规则内任一条件满足即可
|
||
*/
|
||
|
||
interface ExtractionSettingsProps {
|
||
onChange: (data: Record<string, unknown>) => void;
|
||
initialData: EvaluationPoint;
|
||
promptTypeOptions?: Array<{ value: string; label: string }>;
|
||
vlmFieldTypeOptions?: Array<{ value: string; label: string }>;
|
||
}
|
||
|
||
export function ExtractionSettings({
|
||
onChange,
|
||
initialData,
|
||
}: ExtractionSettingsProps) {
|
||
|
||
// 核心数据状态
|
||
const [formData, setFormData] = useState<EvaluationPoint>({
|
||
// 字段配置
|
||
extraction_config: {
|
||
llm: initialData?.extraction_config?.llm ?? {
|
||
fields: [],
|
||
prompt_setting: {
|
||
type: "system",
|
||
template: "",
|
||
},
|
||
},
|
||
vlm: initialData?.extraction_config?.vlm ?? {
|
||
fields: [],
|
||
prompt_setting: {
|
||
type: "system",
|
||
template: "",
|
||
},
|
||
},
|
||
regex: initialData?.extraction_config?.regex ?? {
|
||
fields: [],
|
||
},
|
||
},
|
||
});
|
||
|
||
// 当前选中的标签页
|
||
const [currentTab, setCurrentTab] = useState<string>("llm");
|
||
// 字段输入值
|
||
const [inputValue, setInputValue] = useState({
|
||
llm: '',
|
||
vlm: ''
|
||
});
|
||
// 字段列表
|
||
const [fields, setFields] = useState({
|
||
llm: initialData?.extraction_config?.llm?.fields || [],
|
||
vlm: initialData?.extraction_config?.vlm?.fields || []
|
||
});
|
||
// VLM字段类型
|
||
const [selectedVlmFieldType, setSelectedVlmFieldType] = useState('default');
|
||
// 提示词类型
|
||
const [promptType, setPromptType] = useState({
|
||
llm: initialData?.extraction_config?.llm?.prompt_setting?.type || 'system',
|
||
vlm: initialData?.extraction_config?.vlm?.prompt_setting?.type || 'system'
|
||
});
|
||
// 提示词模板
|
||
const [selectedTemplate, setSelectedTemplate] = useState({
|
||
llm: '',
|
||
vlm: ''
|
||
});
|
||
// 提示词内容
|
||
const [promptContent, setPromptContent] = useState({
|
||
llm: initialData?.extraction_config?.llm?.prompt_setting?.template || '',
|
||
vlm: initialData?.extraction_config?.vlm?.prompt_setting?.template || ''
|
||
});
|
||
// 正则表达式字段
|
||
const [regexFields, setRegexFields] = useState(
|
||
initialData?.extraction_config?.regex?.fields || []
|
||
);
|
||
// 状态消息
|
||
const [statusMessage, setStatusMessage] = useState<{id: string, message: string} | null>(null);
|
||
// 是否有未保存更改
|
||
const [hasPendingChanges, setHasPendingChanges] = useState(false);
|
||
// 更新状态
|
||
const [updateStatus, setUpdateStatus] = useState<{success: boolean, message: string} | null>(null);
|
||
|
||
const handleTabChange = (tab: string) => {
|
||
setCurrentTab(tab);
|
||
};
|
||
|
||
// 自动保存字段变更状态
|
||
// 这个效果确保添加字段后自动保存到组件状态，但不自动提交更新
|
||
useEffect(() => {
|
||
setHasPendingChanges(true);
|
||
}, [fields, regexFields, promptContent])
|
||
|
||
// 处理字段输入变化
|
||
const handleFieldInputChange = (
|
||
e: React.ChangeEvent<HTMLInputElement>,
|
||
type: 'llm' | 'vlm'
|
||
) => {
|
||
setInputValue({
|
||
...inputValue,
|
||
[type]: e.target.value
|
||
});
|
||
};
|
||
|
||
// 处理添加字段
|
||
const addField = (type: 'llm' | 'vlm') => {
|
||
if (!inputValue[type]) return;
|
||
|
||
// 处理多个字段输入
|
||
const inputs = inputValue[type].split(/[,，\s]+/).filter(Boolean);
|
||
|
||
if (type === 'llm') {
|
||
const newFields = [...fields.llm];
|
||
inputs.forEach(input => {
|
||
if (!newFields.includes(input)) {
|
||
newFields.push(input);
|
||
}
|
||
});
|
||
setFields({ ...fields, llm: newFields });
|
||
} else {
|
||
const newFields = [...fields.vlm];
|
||
inputs.forEach(input => {
|
||
const exists = newFields.some(field =>
|
||
typeof field === 'string'
|
||
? field === input
|
||
: field.name === input
|
||
);
|
||
|
||
if (!exists) {
|
||
newFields.push({
|
||
name: input,
|
||
type: selectedVlmFieldType as VLMFieldType
|
||
});
|
||
}
|
||
});
|
||
setFields({ ...fields, vlm: newFields });
|
||
}
|
||
|
||
// 清空输入框
|
||
setInputValue({
|
||
...inputValue,
|
||
[type]: ''
|
||
});
|
||
|
||
setHasPendingChanges(true);
|
||
};
|
||
|
||
// 处理键盘事件
|
||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, type: 'llm' | 'vlm') => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
addField(type);
|
||
}
|
||
};
|
||
|
||
// 处理删除字段
|
||
const removeField = (type: 'llm' | 'vlm', index: number) => {
|
||
if (type === 'llm') {
|
||
const newFields = [...fields.llm];
|
||
newFields.splice(index, 1);
|
||
setFields({ ...fields, llm: newFields });
|
||
} else {
|
||
const newFields = [...fields.vlm];
|
||
newFields.splice(index, 1);
|
||
setFields({ ...fields, vlm: newFields });
|
||
}
|
||
|
||
setHasPendingChanges(true);
|
||
};
|
||
|
||
// 获取VLM字段信息
|
||
const getFieldInfo = (fieldString: string) => {
|
||
const parts = fieldString.split('_');
|
||
const fieldName = parts[0];
|
||
const fieldType = parts.length > 1 ? parts[1] : 'default';
|
||
|
||
let typeName, badgeClass;
|
||
switch (fieldType) {
|
||
case 'currency':
|
||
typeName = '货币';
|
||
badgeClass = 'bg-green-100 text-green-800';
|
||
break;
|
||
case 'print':
|
||
typeName = '打印';
|
||
badgeClass = 'bg-blue-100 text-blue-800';
|
||
break;
|
||
case 'seal':
|
||
typeName = '印章';
|
||
badgeClass = 'bg-red-100 text-red-800';
|
||
break;
|
||
case 'cross-seal':
|
||
typeName = '骑缝章';
|
||
badgeClass = 'bg-orange-100 text-orange-800';
|
||
break;
|
||
case 'english':
|
||
typeName = '英文';
|
||
badgeClass = 'bg-purple-100 text-purple-800';
|
||
break;
|
||
case 'number':
|
||
typeName = '数字';
|
||
badgeClass = 'bg-yellow-100 text-yellow-800';
|
||
break;
|
||
case 'handwriting':
|
||
typeName = '手写';
|
||
badgeClass = 'bg-pink-100 text-pink-800';
|
||
break;
|
||
default:
|
||
typeName = '默认';
|
||
badgeClass = 'bg-gray-100 text-gray-800';
|
||
}
|
||
|
||
return { fieldName, fieldType, typeName, badgeClass };
|
||
};
|
||
|
||
// 渲染提示词类型选择
|
||
const renderPromptTypeSelect = (value: string, type: 'llm' | 'vlm') => {
|
||
return (
|
||
<select
|
||
className="form-select"
|
||
id={`${type}-prompt-type`}
|
||
value={value}
|
||
onChange={(e) => handlePromptTypeChange(e, type)}
|
||
>
|
||
{EVALUATION_OPTIONS.promptTypeOptions.map((option) => (
|
||
<option key={`${type}-${option.value}`} value={option.value}>
|
||
{option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
);
|
||
};
|
||
|
||
// 处理提示词类型变化
|
||
const handlePromptTypeChange = (
|
||
e: React.ChangeEvent<HTMLSelectElement>,
|
||
type: 'llm' | 'vlm'
|
||
) => {
|
||
setPromptType({
|
||
...promptType,
|
||
[type]: e.target.value
|
||
});
|
||
|
||
setHasPendingChanges(true);
|
||
};
|
||
|
||
// 处理提示词模板变化
|
||
const handleTemplateChange = (
|
||
e: React.ChangeEvent<HTMLSelectElement>,
|
||
type: 'llm' | 'vlm'
|
||
) => {
|
||
const templateId = e.target.value;
|
||
setSelectedTemplate({
|
||
...selectedTemplate,
|
||
[type]: templateId
|
||
});
|
||
|
||
// 这里可以根据模板ID获取模板内容
|
||
const templateContent = getTemplateContent(templateId);
|
||
if (templateContent) {
|
||
setPromptContent({
|
||
...promptContent,
|
||
[type]: templateContent
|
||
});
|
||
}
|
||
|
||
setHasPendingChanges(true);
|
||
};
|
||
|
||
// 获取模板内容
|
||
const getTemplateContent = (templateId: string) => {
|
||
// 模拟模板内容，实际应从API获取或配置中读取
|
||
const templates: Record<string, string> = {
|
||
'1': '请从以下文档中提取关键信息，以JSON格式返回以下字段：${fieldsList}',
|
||
'4': '请从以下采购合同中提取乙方资质信息，包括：${fieldsList}',
|
||
'5': '请从以下合同中提取关键条款，包括：${fieldsList}',
|
||
'6': '请从以下烟草许可证中提取信息：${fieldsList}',
|
||
'7': '请识别文档中的印章信息，提取以下字段：${fieldsList}',
|
||
'8': '请从文档表格中提取以下信息：${fieldsList}',
|
||
'9': '请识别文档中的手写内容，提取以下字段：${fieldsList}'
|
||
};
|
||
|
||
return templates[templateId] || '';
|
||
};
|
||
|
||
// 处理提示词内容变化
|
||
const handlePromptContentChange = (
|
||
e: React.ChangeEvent<HTMLTextAreaElement>,
|
||
type: 'llm' | 'vlm'
|
||
) => {
|
||
setPromptContent({
|
||
...promptContent,
|
||
[type]: e.target.value
|
||
});
|
||
|
||
setHasPendingChanges(true);
|
||
};
|
||
|
||
// 将变量应用到提示词
|
||
const applyVariableToPrompt = (variable: string, type: 'llm' | 'vlm') => {
|
||
const variableText = `\${${variable}}`;
|
||
setPromptContent({
|
||
...promptContent,
|
||
[type]: promptContent[type] + variableText
|
||
});
|
||
|
||
setHasPendingChanges(true);
|
||
};
|
||
|
||
// 渲染VLM字段类型选择
|
||
const renderVlmFieldTypeSelect = () => {
|
||
return (
|
||
<select
|
||
className="form-select w-1/4 mr-2"
|
||
id="vlm-field-type"
|
||
value={selectedVlmFieldType}
|
||
onChange={(e) => setSelectedVlmFieldType(e.target.value)}
|
||
>
|
||
{EVALUATION_OPTIONS.vlmFieldTypeOptions.map((option) => (
|
||
<option key={option.value} value={option.value}>
|
||
{option.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
);
|
||
};
|
||
|
||
// 添加正则字段行
|
||
const addRegexFieldRow = () => {
|
||
const newField = {
|
||
field: '',
|
||
pattern: ''
|
||
};
|
||
|
||
setRegexFields([...regexFields, newField]);
|
||
setHasPendingChanges(true);
|
||
};
|
||
|
||
// 移除正则字段行
|
||
const removeRegexFieldRow = (index: number) => {
|
||
const newFields = [...regexFields];
|
||
newFields.splice(index, 1);
|
||
setRegexFields(newFields);
|
||
|
||
setHasPendingChanges(true);
|
||
};
|
||
|
||
// 更新正则字段
|
||
const updateRegexField = (index: number, property: 'field' | 'pattern', value: string) => {
|
||
const newFields = [...regexFields];
|
||
newFields[index] = {
|
||
...newFields[index],
|
||
[property]: value
|
||
};
|
||
|
||
setRegexFields(newFields);
|
||
setHasPendingChanges(true);
|
||
};
|
||
|
||
// 处理正则字段失去焦点
|
||
const handleRegexFieldBlur = (index: number, property: 'field' | 'pattern') => {
|
||
// 显示暂时状态消息
|
||
if (property === 'pattern' && regexFields[index].pattern) {
|
||
setStatusMessage({
|
||
id: `field-${index}`,
|
||
message: '正则表达式已更新'
|
||
});
|
||
|
||
// 3秒后清除消息
|
||
setTimeout(() => {
|
||
setStatusMessage(null);
|
||
}, 3000);
|
||
}
|
||
};
|
||
|
||
// 应用正则模板
|
||
const applyRegexTemplate = (regex: string) => {
|
||
// 如果有字段，应用到最后一个字段
|
||
if (regexFields.length > 0) {
|
||
const lastIndex = regexFields.length - 1;
|
||
updateRegexField(lastIndex, 'pattern', regex);
|
||
}
|
||
|
||
setHasPendingChanges(true);
|
||
};
|
||
|
||
// 处理更新全部字段
|
||
const handleUpdateFields = () => {
|
||
// 过滤掉没有字段名的正则字段
|
||
const validRegexFields = regexFields.filter(field => field.field.trim() !== '');
|
||
|
||
// 收集所有字段数据
|
||
const updatedFormData = {
|
||
...formData,
|
||
extraction_config: {
|
||
llm: {
|
||
fields: fields.llm,
|
||
prompt_setting: {
|
||
type: promptType.llm,
|
||
template: promptType.llm === 'custom' ? promptContent.llm : ''
|
||
}
|
||
},
|
||
vlm: {
|
||
fields: fields.vlm,
|
||
prompt_setting: {
|
||
type: promptType.vlm,
|
||
template: promptType.vlm === 'custom' ? promptContent.vlm : ''
|
||
}
|
||
},
|
||
regex: {
|
||
fields: validRegexFields
|
||
}
|
||
}
|
||
};
|
||
|
||
// 验证字段唯一性
|
||
const allFieldNames = [
|
||
...fields.llm,
|
||
...fields.vlm.map(f => typeof f === 'string' ? f : f.name),
|
||
...validRegexFields.map(f => f.field)
|
||
];
|
||
|
||
const duplicates = allFieldNames.filter((item, index) =>
|
||
allFieldNames.indexOf(item) !== index
|
||
);
|
||
|
||
if (duplicates.length > 0) {
|
||
setUpdateStatus({
|
||
success: false,
|
||
message: `发现重复字段名：${duplicates.join(', ')}，请修改后再提交`
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 更新数据
|
||
setFormData(updatedFormData);
|
||
|
||
// 调用父组件的onChange回调
|
||
if (onChange) {
|
||
onChange(updatedFormData);
|
||
|
||
// 同时通过RuleContext上下文更新字段列表，确保评查设置组件能立即使用
|
||
if (typeof window !== 'undefined') {
|
||
// 使用setTimeout确保在React更新周期之外执行
|
||
setTimeout(() => {
|
||
// 触发一个自定义事件，通知RuleContext更新
|
||
const event = new CustomEvent('extraction-fields-updated', {
|
||
detail: { fields: allFieldNames }
|
||
});
|
||
window.dispatchEvent(event);
|
||
}, 0);
|
||
}
|
||
|
||
// 显示成功消息
|
||
setUpdateStatus({
|
||
success: true,
|
||
message: `更新成功! 共更新 ${fields.llm.length} 个大模型字段, ${fields.vlm.length} 个多模态字段, ${validRegexFields.length} 个正则字段`
|
||
});
|
||
|
||
// 重置更改状态
|
||
setHasPendingChanges(false);
|
||
|
||
// 3秒后清除状态消息
|
||
setTimeout(() => {
|
||
setUpdateStatus(null);
|
||
}, 3000);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="ant-card">
|
||
<div className="ant-card-header">
|
||
<h3>抽取设置</h3>
|
||
</div>
|
||
<div className="ant-card-body">
|
||
<div className="mb-6">
|
||
<div className="tab-nav mb-4" id="extraction-method-tabs">
|
||
<button
|
||
className={`tab-nav-item ${currentTab === "llm" ? "active" : ""}`}
|
||
onClick={() => handleTabChange("llm")}
|
||
type="button"
|
||
>
|
||
<i className="ri-brain-line mr-1"></i> 大模型抽取
|
||
</button>
|
||
<button
|
||
className={`tab-nav-item ${currentTab === "vlm" ? "active" : ""}`}
|
||
onClick={() => handleTabChange("vlm")}
|
||
type="button"
|
||
>
|
||
<i className="ri-scan-line mr-1"></i> 多模态抽取
|
||
</button>
|
||
<button
|
||
className={`tab-nav-item ${
|
||
currentTab === "regex" ? "active" : ""
|
||
}`}
|
||
onClick={() => handleTabChange("regex")}
|
||
type="button"
|
||
>
|
||
<i className="ri-code-box-line mr-1"></i> 正则抽取
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={`extraction-config ${
|
||
currentTab !== "llm" ? "hidden" : ""
|
||
}`}
|
||
id="llm-config"
|
||
>
|
||
<div className="grid grid-cols-1 gap-3">
|
||
<div className="col-span-1">
|
||
<label className="form-label mb-1" htmlFor="field-input">
|
||
抽取字段
|
||
</label>
|
||
<div className="flex mb-2">
|
||
<input
|
||
type="text"
|
||
className="form-input mr-2"
|
||
id="field-input"
|
||
placeholder="请输入字段名，多个字段可用、或,或空格分隔"
|
||
value={inputValue.llm}
|
||
onChange={(e) => handleFieldInputChange(e, "llm")}
|
||
onKeyDown={(e) => handleKeyDown(e, "llm")}
|
||
autoComplete="off"
|
||
/>
|
||
<button
|
||
className="ant-btn ant-btn-default"
|
||
id="add-field-btn"
|
||
type="button"
|
||
onClick={() => addField("llm")}
|
||
>
|
||
添加
|
||
</button>
|
||
</div>
|
||
<div className="chips-container" id="fields-container">
|
||
{fields.llm.map((field, index) => (
|
||
<div className="chip" key={`llm-field-${index}`}>
|
||
{field}
|
||
<span
|
||
className="close-btn"
|
||
onClick={() => removeField("llm", index)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" || e.key === " ")
|
||
removeField("llm", index);
|
||
}}
|
||
role="button"
|
||
tabIndex={0}
|
||
aria-label={`删除字段 ${field}`}
|
||
>
|
||
×
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="form-tip mt-1 text-xs">
|
||
支持一次输入多个字段，用逗号、空格或顿号分隔
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 gap-3 mt-3">
|
||
<div className="col-span-1">
|
||
<label className="form-label mb-1" htmlFor="llm-prompt-settings">
|
||
提示词设置
|
||
</label>
|
||
<div className="flex items-center mb-2" id="llm-prompt-settings">
|
||
{renderPromptTypeSelect(promptType.llm, "llm")}
|
||
</div>
|
||
|
||
<div
|
||
className="bg-gray-50 p-2 rounded text-xs text-gray-600 mb-2"
|
||
id="llm-system-prompt-info"
|
||
style={{
|
||
display: promptType.llm === "system" ? "block" : "none",
|
||
}}
|
||
>
|
||
系统将根据评查点类型和抽取目标自动生成适合的提示词，您无需额外配置。
|
||
</div>
|
||
|
||
<div
|
||
id="llm-custom-prompt-container"
|
||
style={{
|
||
display: promptType.llm === "custom" ? "block" : "none",
|
||
}}
|
||
className="border border-dashed border-gray-300 p-3 rounded-md"
|
||
>
|
||
<div className="mb-2">
|
||
<label
|
||
className="form-label mb-1 text-sm"
|
||
htmlFor="llm-prompt-template"
|
||
>
|
||
选择提示词模板
|
||
</label>
|
||
<select
|
||
className="form-select"
|
||
id="llm-prompt-template"
|
||
value={selectedTemplate.llm}
|
||
onChange={(e) => handleTemplateChange(e, "llm")}
|
||
>
|
||
<option value="">请选择模板</option>
|
||
<option value="1">行政处罚-抽取通用模板</option>
|
||
<option value="4">采购合同-乙方资质抽取</option>
|
||
<option value="5">合同-关键条款抽取</option>
|
||
<option value="6">烟草许可证-信息抽取</option>
|
||
</select>
|
||
</div>
|
||
<div className="mb-2">
|
||
<label
|
||
className="form-label mb-1 text-sm"
|
||
htmlFor="llm-prompt-content"
|
||
>
|
||
提示词内容
|
||
</label>
|
||
<textarea
|
||
className="form-textarea"
|
||
id="llm-prompt-content"
|
||
rows={4}
|
||
placeholder="选择模板后自动填充，您也可以进行修改..."
|
||
value={promptContent.llm}
|
||
onChange={(e) => handlePromptContentChange(e, "llm")}
|
||
readOnly={!selectedTemplate.llm}
|
||
></textarea>
|
||
<div className="form-tip mt-1 bg-gray-50 p-2 rounded text-xs">
|
||
<p className="mb-1">
|
||
<strong>支持的变量</strong>
|
||
（点击变量将其添加到提示词中）：
|
||
</p>
|
||
<div className="flex flex-wrap gap-1">
|
||
{[
|
||
"docType",
|
||
"fieldsList",
|
||
"companyName",
|
||
"documentId",
|
||
"date",
|
||
"industry",
|
||
"ocrText",
|
||
].map((variable) => (
|
||
<button
|
||
key={variable}
|
||
type="button"
|
||
className="var-tag"
|
||
onClick={() => applyVariableToPrompt(variable, "llm")}
|
||
>
|
||
{variable}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={`extraction-config ${
|
||
currentTab !== "vlm" ? "hidden" : ""
|
||
}`}
|
||
id="vlm-config"
|
||
>
|
||
<div className="grid grid-cols-1 gap-3">
|
||
<div className="col-span-1">
|
||
<label className="form-label mb-1" htmlFor="field-input-vlm">
|
||
抽取字段与类型
|
||
</label>
|
||
<div className="flex mb-2">
|
||
<input
|
||
type="text"
|
||
className="form-input mr-2"
|
||
id="field-input-vlm"
|
||
placeholder="请输入字段名"
|
||
value={inputValue.vlm}
|
||
onChange={(e) => handleFieldInputChange(e, "vlm")}
|
||
onKeyDown={(e) => handleKeyDown(e, "vlm")}
|
||
autoComplete="off"
|
||
/>
|
||
{renderVlmFieldTypeSelect()}
|
||
<button
|
||
className="ant-btn ant-btn-default"
|
||
id="add-field-btn-vlm"
|
||
type="button"
|
||
onClick={() => addField("vlm")}
|
||
>
|
||
添加
|
||
</button>
|
||
</div>
|
||
<div className="chips-container" id="fields-container-vlm">
|
||
{fields.vlm.map((field, index) => {
|
||
const { fieldName, fieldType, typeName, badgeClass } =
|
||
getFieldInfo(
|
||
typeof field === "string"
|
||
? field
|
||
: `${field.name}_${field.type}`
|
||
);
|
||
return (
|
||
<div className="chip" key={`vlm-field-${index}`}>
|
||
{fieldName}
|
||
<span
|
||
className={`badge ${badgeClass} text-xs ml-1`}
|
||
data-type={fieldType}
|
||
>
|
||
{typeName}
|
||
</span>
|
||
<span
|
||
className="close-btn"
|
||
onClick={() => removeField("vlm", index)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" || e.key === " ")
|
||
removeField("vlm", index);
|
||
}}
|
||
role="button"
|
||
tabIndex={0}
|
||
aria-label={`删除字段 ${fieldName}`}
|
||
>
|
||
×
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
<div className="form-tip mt-1 text-xs">
|
||
请为每个字段选择适当的抽取类型，有助于提高识别准确率
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 gap-3 mt-3">
|
||
<div className="col-span-1">
|
||
<label
|
||
className="form-label mb-1"
|
||
htmlFor="multimodal-prompt-settings"
|
||
>
|
||
提示词设置
|
||
</label>
|
||
<div
|
||
className="flex items-center mb-2"
|
||
id="multimodal-prompt-settings"
|
||
>
|
||
{renderPromptTypeSelect(promptType.vlm, "vlm")}
|
||
</div>
|
||
<div
|
||
className="bg-gray-50 p-2 rounded text-xs text-gray-600 mb-2"
|
||
id="multimodal-system-prompt-info"
|
||
style={{
|
||
display: promptType.vlm === "system" ? "block" : "none",
|
||
}}
|
||
>
|
||
系统将根据评查点类型和抽取目标自动生成适合的提示词，支持图表、印章等图像内容抽取。
|
||
</div>
|
||
|
||
<div
|
||
id="multimodal-custom-prompt-container"
|
||
style={{
|
||
display: promptType.vlm === "custom" ? "block" : "none",
|
||
}}
|
||
className="border border-dashed border-gray-300 p-3 rounded-md"
|
||
>
|
||
<div className="mb-2">
|
||
<label
|
||
className="form-label mb-1 text-sm"
|
||
htmlFor="multimodal-prompt-template"
|
||
>
|
||
选择提示词模板
|
||
</label>
|
||
<select
|
||
className="form-select"
|
||
id="multimodal-prompt-template"
|
||
value={selectedTemplate.vlm}
|
||
onChange={(e) => handleTemplateChange(e, "vlm")}
|
||
>
|
||
<option value="">请选择模板</option>
|
||
<option value="7">多模态-印章识别模板</option>
|
||
<option value="8">多模态-表格抽取模板</option>
|
||
<option value="9">多模态-手写内容识别模板</option>
|
||
</select>
|
||
</div>
|
||
<div className="mb-2">
|
||
<label
|
||
className="form-label mb-1 text-sm"
|
||
htmlFor="multimodal-prompt-content"
|
||
>
|
||
提示词内容
|
||
</label>
|
||
<textarea
|
||
className="form-textarea"
|
||
id="multimodal-prompt-content"
|
||
rows={4}
|
||
placeholder="选择模板后自动填充，您也可以进行修改..."
|
||
value={promptContent.vlm}
|
||
onChange={(e) => handlePromptContentChange(e, "vlm")}
|
||
readOnly={!selectedTemplate.vlm}
|
||
></textarea>
|
||
<div className="form-tip mt-1 bg-gray-50 p-2 rounded text-xs">
|
||
<p className="mb-1">
|
||
<strong>支持的变量</strong>
|
||
（点击变量将其添加到提示词中）：
|
||
</p>
|
||
<div className="flex flex-wrap gap-1">
|
||
{[
|
||
"docType",
|
||
"fieldsList",
|
||
"companyName",
|
||
"documentId",
|
||
"date",
|
||
"industry",
|
||
"contentType",
|
||
"pageRange",
|
||
"colorMode",
|
||
"ocrText",
|
||
].map((variable) => (
|
||
<button
|
||
key={variable}
|
||
type="button"
|
||
className="var-tag"
|
||
onClick={() => applyVariableToPrompt(variable, "vlm")}
|
||
>
|
||
{variable}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={`extraction-config ${
|
||
currentTab !== "regex" ? "hidden" : ""
|
||
}`}
|
||
id="regex-config"
|
||
>
|
||
<div className="grid grid-cols-1 gap-3">
|
||
<div className="col-span-1">
|
||
<div className="mb-2">
|
||
<div className="flex justify-between items-center mb-1">
|
||
<label
|
||
className="form-label m-0"
|
||
htmlFor="regex-fields-container"
|
||
>
|
||
字段正则表达式配置
|
||
</label>
|
||
<button
|
||
className="ant-btn ant-btn-default"
|
||
id="add-regex-field-row"
|
||
type="button"
|
||
onClick={addRegexFieldRow}
|
||
>
|
||
<i className="ri-add-line"></i> 添加字段
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mt-2" id="regex-fields-container">
|
||
{regexFields.map((field, index) => (
|
||
<div
|
||
className={`regex-field-row flex items-start mb-2 border rounded-md p-2 bg-gray-50`}
|
||
key={`regex-field-${index}`}
|
||
>
|
||
<div className="w-3/10 mr-2">
|
||
<label
|
||
className="text-xs text-gray-600 mb-0 block"
|
||
htmlFor={`regex-field-name-${index}`}
|
||
>
|
||
字段名称
|
||
</label>
|
||
<input
|
||
type="text"
|
||
className={`form-input regex-field-name ${
|
||
!field.field ? "border-yellow-300" : ""
|
||
}`}
|
||
id={`regex-field-name-${index}`}
|
||
placeholder="如：合同编号"
|
||
value={field.field || ""}
|
||
onChange={(e) =>
|
||
updateRegexField(
|
||
index,
|
||
"field",
|
||
e.target.value
|
||
)
|
||
}
|
||
onBlur={() =>
|
||
handleRegexFieldBlur(index, "field")
|
||
}
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="w-7/10 mr-2">
|
||
<label
|
||
className="text-xs text-gray-600 mb-0 block"
|
||
htmlFor={`regex-expression-${index}`}
|
||
>
|
||
正则表达式
|
||
</label>
|
||
<input
|
||
type="text"
|
||
className={`form-input regex-expression ${
|
||
!field.pattern ? "border-yellow-300" : ""
|
||
}`}
|
||
id={`regex-expression-${index}`}
|
||
placeholder="如：\\d{4}[-/年](0?[1-9]|1[0-2])[-/月](0?[1-9]|[12][0-9]|3[01])[日]?"
|
||
value={field.pattern || ""}
|
||
onChange={(e) =>
|
||
updateRegexField(
|
||
index,
|
||
"pattern",
|
||
e.target.value
|
||
)
|
||
}
|
||
onBlur={() =>
|
||
handleRegexFieldBlur(index, "pattern")
|
||
}
|
||
autoComplete="off"
|
||
/>
|
||
{statusMessage && statusMessage.id === `field-${index}` && (
|
||
<div className="text-xs mt-1 text-blue-600 transition-opacity duration-300">
|
||
{statusMessage.message}
|
||
</div>
|
||
)}
|
||
{!field.pattern && (
|
||
<div className="text-xs mt-1 text-yellow-600">
|
||
未设置正则表达式，此字段将保留但不会执行抽取
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-col justify-end pt-3">
|
||
<button
|
||
className="text-red-500 hover:text-red-700 remove-regex-field-row"
|
||
type="button"
|
||
aria-label="删除"
|
||
onClick={() => removeRegexFieldRow(index)}
|
||
>
|
||
<i className="ri-delete-bin-line"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="mt-2">
|
||
<label
|
||
className="form-label mb-1"
|
||
htmlFor="regex-template-container"
|
||
>
|
||
常用正则模板
|
||
</label>
|
||
<div
|
||
className="flex flex-wrap gap-1 mt-1"
|
||
id="regex-template-container"
|
||
>
|
||
{[
|
||
{
|
||
label: "日期格式：yyyy-mm-dd",
|
||
regex:
|
||
"\\d{4}[-/年](0?[1-9]|1[0-2])[-/月](0?[1-9]|[12][0-9]|3[01])[日]?",
|
||
},
|
||
{ label: "合同编号格式", regex: "[A-Z]{2,5}-\\d{4,10}" },
|
||
{
|
||
label: "金额格式",
|
||
regex:
|
||
"(人民币|RMB)?\\s?(\\d{1,3}(,\\d{3})*(\\.\\d{2})?)\\s?[万元]?",
|
||
},
|
||
{
|
||
label: "座机号码格式",
|
||
regex: "\\d{3}-\\d{8}|\\d{4}-\\d{7,8}",
|
||
},
|
||
{ label: "手机号码格式", regex: "1[3-9]\\d{9}" },
|
||
].map(({ label, regex }) => (
|
||
<div
|
||
key={label}
|
||
className="chip cursor-pointer regex-template"
|
||
onClick={() => applyRegexTemplate(regex)}
|
||
role="button"
|
||
tabIndex={0}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" || e.key === " ")
|
||
applyRegexTemplate(regex);
|
||
}}
|
||
>
|
||
{label}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 在所有标签页外部添加统一的更新按钮和状态显示，这样在任何标签页都可见 */}
|
||
<div className="border-t border-gray-200 pt-5 mt-5">
|
||
<div className="flex flex-col items-center mb-2">
|
||
{hasPendingChanges && !updateStatus && (
|
||
<div className="text-center text-sm mb-3 p-2 rounded bg-yellow-100 text-yellow-700">
|
||
您有未更新的字段变更，请点击下方的“更新全部字段”按钮提交所有标签页的字段变更
|
||
</div>
|
||
)}
|
||
{!hasPendingChanges && !updateStatus && (
|
||
<div className="text-center text-xs mb-2 text-gray-600">
|
||
提示：请在完成所有标签页的字段编辑后，点击此按钮更新所有字段
|
||
</div>
|
||
)}
|
||
<button
|
||
className={`ant-btn ${
|
||
hasPendingChanges ? "ant-btn-primary" : "ant-btn-default"
|
||
} text-base py-2 px-4 font-medium shadow-sm hover:shadow`}
|
||
type="button"
|
||
onClick={handleUpdateFields}
|
||
>
|
||
<i className="ri-refresh-line mr-1"></i>
|
||
{hasPendingChanges
|
||
? "更新全部字段 (有未保存更改)"
|
||
: "更新全部字段"}
|
||
</button>
|
||
</div>
|
||
{updateStatus && (
|
||
<div
|
||
className={`text-center text-sm mt-2 p-2 rounded ${
|
||
updateStatus.success
|
||
? "bg-green-100 text-green-700"
|
||
: "bg-red-100 text-red-700"
|
||
}`}
|
||
>
|
||
{updateStatus.message}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|