diff --git a/app/components/rules/new/ActionButtons.tsx b/app/components/rules/new/ActionButtons.tsx index 221d166..f680f8c 100644 --- a/app/components/rules/new/ActionButtons.tsx +++ b/app/components/rules/new/ActionButtons.tsx @@ -3,9 +3,10 @@ import React from 'react'; interface ActionButtonsProps { onSave?: () => void; onSaveDraft?: () => void; + isEditMode?: boolean; } -export function ActionButtons({ onSave, onSaveDraft }: ActionButtonsProps) { +export function ActionButtons({ onSave, onSaveDraft, isEditMode }: ActionButtonsProps) { return (
+ + +
+
{ + if (e.key === 'Enter' || e.key === ' ') { + handleToggleDescription(); + } + }} + tabIndex={0} + role="button" + > + + +
-
-
{ - if (e.key === 'Enter' || e.key === ' ') { - handleToggleDescription(); - } - }} - tabIndex={0} - role="button" - > - - +
+
+ +
详细描述有助于其他用户了解该评查点的用途
- -
+ + {/* 引用法典输入区域 */} +
+ + +
+ + +
+ +
+ + handleLawArticlesChange(e.target.value)} + /> +
多个条款用逗号分隔，将自动转换为数组格式
+
+
- -
详细描述有助于其他用户了解该评查点的用途
- - {/* 引用法典输入区域 */} -
- - -
- - -
- -
- - handleLawArticlesChange(e.target.value)} - /> -
多个条款用逗号分隔，将自动转换为数组格式
-
- -
- - -
- -
- 引用的法律条文将在评查结果中显示，帮助用户理解评查规则的法律依据 -
- - {/* 预览区域 */} -
-
预览效果
-
-
- {formData.references_laws.name || '《中华人民共和国民法典》'} -
-
- {formData.references_laws.articles.length > 0 ? - formData.references_laws.articles.map((article, index) => ( - {article} - )) : ( - <> - 第五百八十五条 - 第五百八十六条 - - )} -
-
- {formData.references_laws.content || '当事人应当按照约定全面履行自己的义务。'} -
+ +
+ 引用的法律条文将在评查结果中显示，帮助用户理解评查规则的法律依据 +
+ + {/* 预览区域 */} +
+
预览效果
+
+
+ {formData.references_laws.name || '《中华人民共和国民法典》'} +
+
+ {formData.references_laws.articles.length > 0 ? + formData.references_laws.articles.map((article, index) => ( + {article} + )) : ( + <> + 第五百八十五条 + 第五百八十六条 + + )} +
+
+ {formData.references_laws.content || '当事人应当按照约定全面履行自己的义务。'}
diff --git a/app/components/rules/new/ExtractionSettings.tsx b/app/components/rules/new/ExtractionSettings.tsx index 5c93ac4..ca90f65 100644 --- a/app/components/rules/new/ExtractionSettings.tsx +++ b/app/components/rules/new/ExtractionSettings.tsx @@ -1,12 +1,8 @@ import { useState, KeyboardEvent, FormEvent, useContext, useEffect } from 'react'; import { RuleContext } from './ReviewSettings'; -interface ExtractionSettingsProps { - onChange?: (data: Record) => void; -} - interface RegexField { - id: string; + id?: string; fieldName: string; regex: string; } @@ -18,7 +14,30 @@ interface PromptTemplate { template_content: string; } -export function ExtractionSettings({ onChange }: ExtractionSettingsProps) { +interface ExtractionSettingsProps { + onChange?: (data: Record) => void; + initialData?: { + llm_ocr?: { + fields?: string[]; + prompt_setting?: { + type?: string; + template?: string; + } + }; + llm_vl?: { + fields?: string[]; + prompt_setting?: { + type?: string; + template?: string; + } + }; + ocr_regex?: { + fields?: RegexField[]; + } + }; +} + +export function ExtractionSettings({ onChange, initialData }: ExtractionSettingsProps) { // 使用RuleContext获取全局状态 const ruleContext = useContext(RuleContext); @@ -50,9 +69,61 @@ export function ExtractionSettings({ onChange }: ExtractionSettingsProps) { llm: '' }); - // 在组件初始化时，如果Context中已有字段数据，则使用Context数据初始化 + // 加载初始数据 useEffect(() => { - if (ruleContext && ruleContext.extractionFields.length > 0) { + if (initialData) { + // 设置字段数据 + const newFields = { + llm_ocr: initialData.llm_ocr?.fields || [], + llm: initialData.llm_vl?.fields || [] + }; + setFields(newFields); + + // 设置提示词类型 + setPromptType({ + llm_ocr: initialData.llm_ocr?.prompt_setting?.type || 'system', + llm: initialData.llm_vl?.prompt_setting?.type || 'system' + }); + + // 设置提示词内容 + setPromptContent({ + llm_ocr: initialData.llm_ocr?.prompt_setting?.template || '', + llm: initialData.llm_vl?.prompt_setting?.template || '' + }); + + // 设置正则字段 + if (initialData.ocr_regex && initialData.ocr_regex.fields && initialData.ocr_regex.fields.length > 0) { + const regexFieldsWithIds = initialData.ocr_regex.fields.map((field: RegexField, index: number) => ({ + id: (index + 1).toString(), + fieldName: field.fieldName || '', + regex: field.regex || '' + })); + setRegexFields(regexFieldsWithIds); + } + + // 更新全局字段列表 + const allFields = [ + ...newFields.llm_ocr, + ...newFields.llm, + ...(initialData.ocr_regex?.fields || []).map((f: RegexField) => f.fieldName) + ].filter(Boolean); + + if (ruleContext && ruleContext.updateFields) { + ruleContext.updateFields(allFields); + } + } + }, [initialData, ruleContext?.updateFields]); + + // 在组件首次加载时更新字段 + useEffect(() => { + if (!initialData) { + updateAllFields(); + } + }, []); + + // 当组件首次加载时，如果Context中已有字段数据，则使用Context数据初始化 + useEffect(() => { + if (!initialData && ruleContext && ruleContext.extractionFields.length > 0) { // 将Context中的字段数据添加到当前激活的抽取方式中 setFields(prevFields => ({ ...prevFields, @@ -61,11 +132,6 @@ export function ExtractionSettings({ onChange }: ExtractionSettingsProps) { } }, []); - // 当组件首次加载时更新字段 - useEffect(() => { - updateAllFields(); - }, []); - // 获取所有可用字段（合并大模型、多模态和正则抽取的字段） const getAllFields = (): string[] => { // 从大模型OCR抽取中获取字段 @@ -169,10 +235,11 @@ export function ExtractionSettings({ onChange }: ExtractionSettingsProps) { // 使用useEffect监听字段变化并更新Context useEffect(() => { - // 立即更新字段列表 - updateAllFields(); + const debouncedUpdate = setTimeout(() => { + updateAllFields(); + }, 300); - // eslint-disable-next-line react-hooks/exhaustive-deps + return () => clearTimeout(debouncedUpdate); }, [fields.llm_ocr, fields.llm, regexFields]); const handleTabChange = (tab: string) => { diff --git a/app/components/rules/new/PageHeader.tsx b/app/components/rules/new/PageHeader.tsx index 37b342a..37d2776 100644 --- a/app/components/rules/new/PageHeader.tsx +++ b/app/components/rules/new/PageHeader.tsx @@ -5,7 +5,7 @@ interface PageHeaderProps { export function PageHeader({ title, onSave }: PageHeaderProps) { return ( -
+

{title}