新增数据，编辑数据初步完善

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 (
     <div className="flex justify-center space-x-4 mt-8 mb-4">
       <button 
@@ -13,14 +14,14 @@ export function ActionButtons({ onSave, onSaveDraft }: ActionButtonsProps) {
         className="ant-btn ant-btn-primary min-w-[120px]"
         onClick={onSave}
       >
-        <i className="ri-save-line mr-1"></i> 保存
+        <i className="ri-save-line mr-1"></i> {isEditMode ? '保存修改' : '保存'}
       </button>
       <button 
         type="button" 
         className="ant-btn ant-btn-default min-w-[120px]"
         onClick={onSaveDraft}
       >
-        <i className="ri-draft-line mr-1"></i> 保存草稿
+        <i className="ri-draft-line mr-1"></i> {isEditMode ? '另存为草稿' : '保存草稿'}
       </button>
       <button 
         type="button" 

app/components/rules/new/BasicInfo.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 interface BasicInfoProps {
   onChange?: (data: Record<string, unknown>) => void;
+  initialData?: Record<string, any>;
 }
 
 // 定义表单数据类型
@@ -20,7 +21,7 @@ interface FormDataType {
   type: string;
 }
 
-export function BasicInfo({ onChange }: BasicInfoProps) {
+export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
   const [formData, setFormData] = useState<FormDataType>({
     name: '',
     code: '',
@@ -39,6 +40,42 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
   const [isDescExpanded, setIsDescExpanded] = useState(false);
   const [lawArticlesInput, setLawArticlesInput] = useState('');
 
+  // 当initialData变化时更新表单数据
+  useEffect(() => {
+    if (initialData) {
+      const newFormData = {
+        name: initialData.name || '',
+        code: initialData.code || '',
+        risk: initialData.risk || 'medium',
+        is_enabled: initialData.is_enabled !== undefined ? initialData.is_enabled : true,
+        description: initialData.description || '',
+        references_laws: initialData.references_laws || {
+          name: '',
+          articles: [],
+          content: ''
+        },
+        evaluation_point_groups_id: initialData.evaluation_point_groups_id || null,
+        type: initialData.type || ''
+      };
+      
+      setFormData(newFormData);
+      
+      // 更新法律条款输入框
+      if (initialData.references_laws && Array.isArray(initialData.references_laws.articles)) {
+        setLawArticlesInput(initialData.references_laws.articles.join(','));
+      }
+      
+      // 如果有描述或法律依据，默认展开详细信息
+      if (initialData.description || 
+          (initialData.references_laws && 
+           (initialData.references_laws.name || 
+            initialData.references_laws.content || 
+            (initialData.references_laws.articles && initialData.references_laws.articles.length > 0)))) {
+        setIsDescExpanded(true);
+      }
+    }
+  }, [initialData]);
+
   const handleToggleDescription = () => {
     setIsDescExpanded(!isDescExpanded);
   };
@@ -210,102 +247,102 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
             </select>
             <div className="form-tip">创建后是否立即启用此评查点</div>
           </div>
+        </div>
+        
+        <div className="mt-8">
+          <div 
+            className={`flex justify-between items-center cursor-pointer ${isDescExpanded ? 'expanded' : ''}`}
+            onClick={handleToggleDescription}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                handleToggleDescription();
+              }
+            }}
+            tabIndex={0}
+            role="button"
+          >
+            <label className="form-label mb-0" htmlFor="description-section">评查点描述与法律依据</label>
+            <i className={`ri-arrow-${isDescExpanded ? 'up' : 'down'}-s-line text-lg expand-icon`}></i>
+          </div>
           
-          <div className="col-span-1 md:col-span-3">
-            <div 
-              className={`flex justify-between items-center cursor-pointer ${isDescExpanded ? 'expanded' : ''}`}
-              onClick={handleToggleDescription}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  handleToggleDescription();
-                }
-              }}
-              tabIndex={0}
-              role="button"
-            >
-              <label className="form-label mb-0" htmlFor="description-section">评查点描述与法律依据</label>
-              <i className="ri-arrow-down-s-line text-lg expand-icon"></i>
+          <div className={`mt-2 ${isDescExpanded ? '' : 'hidden'}`} id="description-section">
+            <div className="mb-4">
+              <textarea
+                id="rule-description"
+                className="form-textarea"
+                placeholder="请输入评查点的详细描述"
+                style={{ minHeight: '80px' }}
+                value={formData.description}
+                onChange={handleInputChange}
+              ></textarea>
+              <div className="form-tip">详细描述有助于其他用户了解该评查点的用途</div>
             </div>
-            
-            <div className={`mt-2 ${isDescExpanded ? '' : 'hidden'}`} id="description-section">
+
+            {/* 引用法典输入区域 */}
+            <div className="mb-4">
+              <label className="form-label" htmlFor="law-section">引用法典</label>
+              
+              <div className="mb-3" id="law-section">
+                <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-name">法典名称</label>
+                <input 
+                  type="text" 
+                  className="form-input" 
+                  placeholder="例如：《中华人民共和国民法典》" 
+                  id="law-name" 
+                  value={formData.references_laws.name}
+                  onChange={handleInputChange}
+                />
+              </div>
+              
+              <div className="mb-3">
+                <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-articles">条款号 <span className="text-xs text-gray-400">(多个条款请用逗号分隔)</span></label>
+                <input 
+                  type="text" 
+                  className="form-input" 
+                  placeholder="例如：第五百八十五条,第五百八十六条" 
+                  id="law-articles" 
+                  value={lawArticlesInput}
+                  onChange={(e) => handleLawArticlesChange(e.target.value)}
+                />
+                <div className="form-tip">多个条款用逗号分隔，将自动转换为数组格式</div>
+              </div>
+              
               <div className="mb-4">
-                <textarea
-                  id="rule-description"
-                  className="form-textarea"
-                  placeholder="请输入评查点的详细描述"
-                  style={{ minHeight: '80px' }}
-                  value={formData.description}
+                <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-content">条款内容</label>
+                <textarea 
+                  className="form-textarea" 
+                  style={{ minHeight: '60px' }} 
+                  placeholder="例如：当事人应当按照约定全面履行自己的义务。" 
+                  id="law-content"
+                  value={formData.references_laws.content}
                   onChange={handleInputChange}
                 ></textarea>
-                <div className="form-tip">详细描述有助于其他用户了解该评查点的用途</div>
               </div>
-
-              {/* 引用法典输入区域 */}
-              <div className="border-t border-gray-100 pt-4 mb-4">
-                <label className="form-label" htmlFor="law-section">引用法典</label>
-                
-                <div className="mb-3" id="law-section">
-                  <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-name">法典名称</label>
-                  <input 
-                    type="text" 
-                    className="form-input" 
-                    placeholder="例如：《中华人民共和国民法典》" 
-                    id="law-name" 
-                    value={formData.references_laws.name}
-                    onChange={handleInputChange}
-                  />
-                </div>
-                
-                <div className="mb-3">
-                  <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-articles">条款号 <span className="text-xs text-gray-400">(多个条款请用逗号分隔)</span></label>
-                  <input 
-                    type="text" 
-                    className="form-input" 
-                    placeholder="例如：第五百八十五条,第五百八十六条" 
-                    id="law-articles" 
-                    value={lawArticlesInput}
-                    onChange={(e) => handleLawArticlesChange(e.target.value)}
-                  />
-                  <div className="form-tip">多个条款用逗号分隔，将自动转换为数组格式</div>
-                </div>
-                
-                <div className="mb-3">
-                  <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-content">条款内容</label>
-                  <textarea 
-                    className="form-textarea" 
-                    style={{ minHeight: '60px' }} 
-                    placeholder="例如：当事人应当按照约定全面履行自己的义务。" 
-                    id="law-content"
-                    value={formData.references_laws.content}
-                    onChange={handleInputChange}
-                  ></textarea>
-                </div>
-                
-                <div className="p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700 mb-2">
-                  <i className="ri-information-line mr-1"></i> 引用的法律条文将在评查结果中显示，帮助用户理解评查规则的法律依据
-                </div>
-                
-                {/* 预览区域 */}
-                <div className="p-3 border border-gray-200 rounded-md bg-gray-50 mt-3">
-                  <div className="text-sm font-medium mb-2">预览效果</div>
-                  <div className="law-reference">
-                    <div className="law-reference-title" id="preview-law-name">
-                      {formData.references_laws.name || '《中华人民共和国民法典》'}
-                    </div>
-                    <div className="law-reference-articles" id="preview-law-articles">
-                      {formData.references_laws.articles.length > 0 ? 
-                        formData.references_laws.articles.map((article, index) => (
-                          <span key={index} className="law-article">{article}</span>
-                        )) : (
-                        <>
-                          <span className="law-article">第五百八十五条</span>
-                          <span className="law-article">第五百八十六条</span>
-                        </>
-                      )}
-                    </div>
-                    <div className="law-reference-content" id="preview-law-content">
-                      {formData.references_laws.content || '当事人应当按照约定全面履行自己的义务。'}
-                    </div>
+              
+              <div className="p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700 mb-2">
+                <i className="ri-information-line mr-1"></i> 引用的法律条文将在评查结果中显示，帮助用户理解评查规则的法律依据
+              </div>
+              
+              {/* 预览区域 */}
+              <div className="mt-3">
+                <div className="text-sm font-medium mb-2">预览效果</div>
+                <div className="law-reference">
+                  <div className="law-reference-title" id="preview-law-name">
+                    {formData.references_laws.name || '《中华人民共和国民法典》'}
+                  </div>
+                  <div className="law-reference-articles" id="preview-law-articles">
+                    {formData.references_laws.articles.length > 0 ? 
+                      formData.references_laws.articles.map((article, index) => (
+                        <span key={index} className="law-article">{article}</span>
+                      )) : (
+                      <>
+                        <span className="law-article">第五百八十五条</span>
+                        <span className="law-article">第五百八十六条</span>
+                      </>
+                    )}
+                  </div>
+                  <div className="law-reference-content" id="preview-law-content">
+                    {formData.references_laws.content || '当事人应当按照约定全面履行自己的义务。'}
                   </div>
                 </div>
               </div>

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<string, unknown>) => 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<string, unknown>) => 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) => {

app/components/rules/new/PageHeader.tsx

@@ -5,7 +5,7 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, onSave }: PageHeaderProps) {
   return (
-    <div className="flex justify-between items-center pb-2">
+    <div className="flex justify-between items-center pb-2 mb-4 border-b border-gray-200">
       <h1 className="text-xl font-medium text-gray-800">{title}</h1>
       <div>
         <button 

app/components/rules/new/ReviewSettings.tsx

@@ -23,6 +23,17 @@ interface Condition {
 
 interface ReviewSettingsProps {
   onChange?: (data: Record<string, unknown>) => void;
+  initialData?: {
+    rules?: RuleType[];
+    combinationLogic?: string;
+    customLogic?: string;
+    pass_message?: string;
+    fail_message?: string;
+    suggestion_message?: string;
+    suggestion_message_type?: string;
+    post_action?: string;
+    action_config?: string;
+  };
 }
 
 // 创建全局上下文以便在不同组件间共享数据
@@ -37,7 +48,7 @@ export const RuleContext = createContext<RuleContextType>({
   updateFields: () => {}
 });
 
-export function ReviewSettings({ onChange }: ReviewSettingsProps) {
+export function ReviewSettings({ onChange, initialData }: ReviewSettingsProps) {
   const [rules, setRules] = useState<RuleType[]>([
     { id: '1', type: '', config: {} }
   ]);
@@ -62,20 +73,77 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
   // 保存最近一次可用的字段列表
   const [availableFields, setAvailableFields] = useState<string[]>(extractionFields || []);
 
+  // 加载初始数据
+  useEffect(() => {
+    if (initialData) {
+      // 设置规则
+      if (initialData.rules && initialData.rules.length > 0) {
+        setRules(initialData.rules);
+      }
+      
+      // 设置组合逻辑
+      if (initialData.combinationLogic) {
+        setCombinationLogic(initialData.combinationLogic);
+        if (initialData.combinationLogic === 'custom') {
+          setShowCustomLogic(true);
+        }
+      }
+      
+      // 设置自定义逻辑
+      if (initialData.customLogic) {
+        setCustomLogic(initialData.customLogic);
+      }
+      
+      // 设置通过/不通过消息
+      if (initialData.pass_message) {
+        setPassMessage(initialData.pass_message);
+      }
+      
+      if (initialData.fail_message) {
+        setFailMessage(initialData.fail_message);
+      }
+      
+      // 设置建议消息
+      if (initialData.suggestion_message) {
+        setSuggestMessage(initialData.suggestion_message);
+      }
+      
+      if (initialData.suggestion_message_type) {
+        setSuggestionMessageType(initialData.suggestion_message_type);
+      }
+      
+      // 设置后处理动作
+      if (initialData.post_action) {
+        setPostAction(initialData.post_action);
+      }
+      
+      if (initialData.action_config) {
+        setActionConfig(initialData.action_config);
+      }
+    }
+  }, [initialData]);
+
+  // 监听extractionFields的变化
+  useEffect(() => {
+    if (extractionFields && extractionFields.length > 0) {
+      const newFields = [...extractionFields];
+      // 只在字段列表实际发生变化时更新
+      if (JSON.stringify(newFields) !== JSON.stringify(availableFields)) {
+        setAvailableFields(newFields);
+      }
+    }
+  }, [extractionFields]);
+
   // 监听抽取设置中的字段变化
   useEffect(() => {
     // 当Context中的字段发生变化时，更新可用字段但保留已有配置
     if (extractionFields.length > 0) {
-      console.log('extractionFields updated in ReviewSettings:', extractionFields);
       // 检查是否有字段被删除
       const deletedFields = availableFields.filter(field => !extractionFields.includes(field));
       
       // 处理新增的字段
       const newFields = extractionFields.filter((field: string) => !availableFields.includes(field));
       
-      console.log('New fields:', newFields);
-      console.log('Deleted fields:', deletedFields);
-      
       if (newFields.length > 0 || deletedFields.length > 0) {
         // 设置最新的可用字段列表
         setAvailableFields(extractionFields);
@@ -94,28 +162,27 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
     const handleExtractionChange = (event: Event) => {
       if (event instanceof CustomEvent && event.detail && Array.isArray(event.detail.fields)) {
         const incomingFields = event.detail.fields;
-        console.log('Received extraction fields update:', incomingFields);
         
-        // 检查是否有字段被删除
-        const deletedFields = availableFields.filter(field => !incomingFields.includes(field));
-        
-        // 识别新增的字段
-        const newFields = incomingFields.filter((field: string) => !availableFields.includes(field));
-        
-        console.log('Deleted fields:', deletedFields);
-        console.log('New fields:', newFields);
-        
-        if (newFields.length > 0 || deletedFields.length > 0) {
-          // 设置最新的可用字段列表
-          setAvailableFields(incomingFields);
+        // 检查是否有实际变化
+        if (JSON.stringify(incomingFields) !== JSON.stringify(availableFields)) {
+          // 检查是否有字段被删除
+          const deletedFields = availableFields.filter(field => !incomingFields.includes(field));
           
-          // 处理规则中已删除的字段
-          if (deletedFields.length > 0) {
-            handleDeletedFields(deletedFields);
+          // 识别新增的字段
+          const newFields = incomingFields.filter((field: string) => !availableFields.includes(field));
+          
+          if (newFields.length > 0 || deletedFields.length > 0) {
+            // 设置最新的可用字段列表
+            setAvailableFields(incomingFields);
+            
+            // 处理规则中已删除的字段
+            if (deletedFields.length > 0) {
+              handleDeletedFields(deletedFields);
+            }
+            
+            // 使用最新的字段列表更新规则配置
+            updateRulesWithNewFields(incomingFields);
           }
-          
-          // 使用最新的字段列表更新规则配置
-          updateRulesWithNewFields(incomingFields);
         }
       }
     };
@@ -127,7 +194,7 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
     return () => {
       document.removeEventListener('extraction-fields-updated', handleExtractionChange);
     };
-  }, [extractionFields]);
+  }, [extractionFields, availableFields]);
 
   // 检查并更新字段（仍然保留此函数供需要时手动触发）
   // eslint-disable-next-line @typescript-eslint/no-unused-vars