TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

基础组件完善

Browse Source
This commit is contained in:
awen
2025-04-09 01:34:14 +08:00
parent e421bcd44b
commit ebdf97aebf
11 changed files with 2673 additions and 1692 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/rules/new/ExtractionSettings.tsx
+69 -61
View File
@@ -1,6 +1,7 @@
import { useState, KeyboardEvent, FormEvent, useContext, useEffect, useCallback, useRef } from 'react';
import { RuleContext } from '~/contexts/RuleContext';
import { processFieldName } from '~/utils';
import type { PromptType, VLMFieldType } from '~/models/evaluation_points';
// 定义通知函数的类型
type NotifyFn = (data: Record<string, unknown>) => void;
@@ -41,7 +42,7 @@ interface RegexField {
interface VlmField {
name: string;
type: string;
type: VLMFieldType | string;
}
interface PromptTemplate {
@@ -72,9 +73,16 @@ interface ExtractionSettingsProps {
fields?: RegexField[];
};
};
promptTypeOptions?: Array<{value: string, label: string}>;
vlmFieldTypeOptions?: Array<{value: string, label: string}>;
}
export function ExtractionSettings({ onChange, initialData }: ExtractionSettingsProps) {
export function ExtractionSettings({
onChange,
initialData,
promptTypeOptions = [],
vlmFieldTypeOptions = []
}: ExtractionSettingsProps) {
const ruleContext = useContext(RuleContext);
const lastUpdateTimeRef = useRef(0); // 添加一个ref来记录上次更新时间
const lastEventFieldsRef = useRef<string[]>([]);
@@ -884,6 +892,62 @@ export function ExtractionSettings({ onChange, initialData }: ExtractionSettings
setSelectedFieldType(e.currentTarget.value);
};
// 在渲染选择模态字段类型的下拉列表时使用vlmFieldTypeOptions
const renderVlmFieldTypeSelect = (field: string, index: number) => {
return (
<select
className="form-select"
value={selectedFieldType}
onChange={handleFieldTypeChange}
>
{vlmFieldTypeOptions.length > 0 ? (
vlmFieldTypeOptions.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))
) : (
// 默认选项，如果没有提供字段类型选项
<>
<option value="default">默认</option>
<option value="currency">货币</option>
<option value="print">打印</option>
<option value="seal">印章</option>
<option value="cross-seal">骑缝章</option>
<option value="english">英文</option>
<option value="number">数字</option>
<option value="handwriting">手写</option>
</>
)}
</select>
);
};
// 在渲染提示词类型的选择器时使用promptTypeOptions
const renderPromptTypeSelect = (type: string, promptType: 'llm' | 'vlm') => {
return (
<select
className="form-select"
value={type}
onChange={(e) => handlePromptTypeChange(e, promptType)}
>
{promptTypeOptions.length > 0 ? (
promptTypeOptions.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))
) : (
// 默认选项，如果没有提供提示词类型选项
<>
<option value="system">使用系统默认提示词</option>
<option value="custom">使用自定义提示词</option>
</>
)}
</select>
);
};
return (
<div className="ant-card">
<div className="ant-card-header">
@@ -970,28 +1034,7 @@ export function ExtractionSettings({ onChange, initialData }: ExtractionSettings
提示词设置
</label>
<div className="flex items-center mb-2" id="llm-prompt-settings">
<label className="inline-flex items-center mr-6">
<input
type="radio"
name="llm-prompt-type"
value="system"
checked={promptType.llm === 'system'}
onChange={(e) => handlePromptTypeChange(e, 'llm')}
className="form-radio"
/>
<span className="ml-2">使用系统默认提示词</span>
</label>
<label className="inline-flex items-center">
<input
type="radio"
name="llm-prompt-type"
value="custom"
checked={promptType.llm === 'custom'}
onChange={(e) => handlePromptTypeChange(e, 'llm')}
className="form-radio"
/>
<span className="ml-2">使用自定义提示词</span>
</label>
{renderPromptTypeSelect(promptType.llm, 'llm')}
</div>
<div
@@ -1084,21 +1127,7 @@ export function ExtractionSettings({ onChange, initialData }: ExtractionSettings
onChange={(e) => handleFieldInputChange(e, 'vlm')}
onKeyDown={(e) => handleKeyDown(e, 'vlm')}
/>
<select
className="form-select mr-2"
id="field-type-vlm"
value={selectedFieldType}
onChange={handleFieldTypeChange}
>
<option value="default">默认</option>
<option value="seal">印章</option>
<option value="cross-seal">骑缝章</option>
<option value="handwriting">手写体</option>
<option value="print">印刷体</option>
<option value="english">英文</option>
<option value="number">数字</option>
<option value="currency">货币</option>
</select>
{renderVlmFieldTypeSelect(inputValue.vlm, 0)}
<button
className="ant-btn ant-btn-default"
id="add-field-btn-vlm"
@@ -1143,28 +1172,7 @@ export function ExtractionSettings({ onChange, initialData }: ExtractionSettings
提示词设置
</label>
<div className="flex items-center mb-2" id="multimodal-prompt-settings">
<label className="inline-flex items-center mr-6">
<input
type="radio"
name="multimodal-prompt-type"
value="system"
checked={promptType.vlm === 'system'}
onChange={(e) => handlePromptTypeChange(e, 'vlm')}
className="form-radio"
/>
<span className="ml-2">使用系统默认提示词</span>
</label>
<label className="inline-flex items-center">
<input
type="radio"
name="multimodal-prompt-type"
value="custom"
checked={promptType.vlm === 'custom'}
onChange={(e) => handlePromptTypeChange(e, 'vlm')}
className="form-radio"
/>
<span className="ml-2">使用自定义提示词</span>
</label>
{renderPromptTypeSelect(promptType.vlm, 'vlm')}
</div>
<div
className="bg-gray-50 p-2 rounded text-xs text-gray-600 mb-2"