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

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={`mt-2 ${isDescExpanded ? '' : 'hidden'}`} id="description-section">
-            <div 
+            <div className="mb-4">
-              className={`flex justify-between items-center cursor-pointer ${isDescExpanded ? 'expanded' : ''}`}
+              <textarea
-              onClick={handleToggleDescription}
+                id="rule-description"
-              onKeyDown={(e) => {
+                className="form-textarea"
-                if (e.key === 'Enter' || e.key === ' ') {
+                placeholder="请输入评查点的详细描述"
-                  handleToggleDescription();
+                style={{ minHeight: '80px' }}
-                }
+                value={formData.description}
-              }}
+                onChange={handleInputChange}
-              tabIndex={0}
+              ></textarea>
-              role="button"
+              <div className="form-tip">详细描述有助于其他用户了解该评查点的用途</div>
-            >
-              <label className="form-label mb-0" htmlFor="description-section">评查点描述与法律依据</label>
-              <i className="ri-arrow-down-s-line text-lg expand-icon"></i>
             </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
+                <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-content">条款内容</label>
-                  id="rule-description"
+                <textarea 
-                  className="form-textarea"
+                  className="form-textarea" 
-                  placeholder="请输入评查点的详细描述"
+                  style={{ minHeight: '60px' }} 
-                  style={{ minHeight: '80px' }}
+                  placeholder="例如：当事人应当按照约定全面履行自己的义务。" 
-                  value={formData.description}
+                  id="law-content"
+                  value={formData.references_laws.content}
                   onChange={handleInputChange}
                 ></textarea>
-                <div className="form-tip">详细描述有助于其他用户了解该评查点的用途</div>
               </div>
-
+              
-              {/* 引用法典输入区域 */}
+              <div className="p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700 mb-2">
-              <div className="border-t border-gray-100 pt-4 mb-4">
+                <i className="ri-information-line mr-1"></i> 引用的法律条文将在评查结果中显示，帮助用户理解评查规则的法律依据
-                <label className="form-label" htmlFor="law-section">引用法典</label>
+              </div>
-                
+              
-                <div className="mb-3" id="law-section">
+              {/* 预览区域 */}
-                  <label className="text-sm text-gray-600 mb-1 block" htmlFor="law-name">法典名称</label>
+              <div className="mt-3">
-                  <input 
+                <div className="text-sm font-medium mb-2">预览效果</div>
-                    type="text" 
+                <div className="law-reference">
-                    className="form-input" 
+                  <div className="law-reference-title" id="preview-law-name">
-                    placeholder="例如：《中华人民共和国民法典》" 
+                    {formData.references_laws.name || '《中华人民共和国民法典》'}
-                    id="law-name" 
+                  </div>
-                    value={formData.references_laws.name}
+                  <div className="law-reference-articles" id="preview-law-articles">
-                    onChange={handleInputChange}
+                    {formData.references_laws.articles.length > 0 ? 
-                  />
+                      formData.references_laws.articles.map((article, index) => (
-                </div>
+                        <span key={index} className="law-article">{article}</span>
-                
+                      )) : (
-                <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>
+                        <span className="law-article">第五百八十五条</span>
-                  <input 
+                        <span className="law-article">第五百八十六条</span>
-                    type="text" 
+                      </>
-                    className="form-input" 
+                    )}
-                    placeholder="例如：第五百八十五条,第五百八十六条" 
+                  </div>
-                    id="law-articles" 
+                  <div className="law-reference-content" id="preview-law-content">
-                    value={lawArticlesInput}
+                    {formData.references_laws.content || '当事人应当按照约定全面履行自己的义务。'}
-                    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>
                 </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(() => {
-    // 立即更新字段列表
+    const debouncedUpdate = setTimeout(() => {
-    updateAllFields();
+      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));
+        if (JSON.stringify(incomingFields) !== JSON.stringify(availableFields)) {
-        
+          // 检查是否有字段被删除
-        // 识别新增的字段
+          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 (deletedFields.length > 0) {
+          const newFields = incomingFields.filter((field: string) => !availableFields.includes(field));
-            handleDeletedFields(deletedFields);
+          
+          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

app/routes/rules.new.tsx

@@ -1,19 +1,19 @@
 import { type MetaFunction } from "@remix-run/node";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { BasicInfo } from "~/components/rules/new/BasicInfo";
 import { ExtractionSettings } from "~/components/rules/new/ExtractionSettings";
 import { ReviewSettings, RuleContext } from "~/components/rules/new/ReviewSettings";
 import { ActionButtons } from "~/components/rules/new/ActionButtons";
 import { PageHeader } from "~/components/rules/new/PageHeader";
 import rulesStyles from "~/styles/rules.css?url";
-import { useNavigate } from "@remix-run/react";
+import { useNavigate, useLocation } from "@remix-run/react";
 
 export const meta: MetaFunction = () => {
   return [
-    { title: "新增评查点 - 中国烟草AI合同及卷宗审核系统" },
+    { title: "评查点管理 - 中国烟草AI合同及卷宗审核系统" },
     { 
       name: "description", 
-      content: "创建新的评查点，设置规则参数" 
+      content: "创建或修改评查点，设置规则参数" 
     }
   ];
 };
@@ -23,7 +23,7 @@ export function links() {
 }
 
 export const handle = {
-  breadcrumb: "新增评查点"
+  breadcrumb: "评查点管理"
 };
 
 // 定义类型
@@ -32,6 +32,16 @@ interface RegexField {
   regex: string;
 }
 
+interface ApiRegexField {
+  field: string;
+  pattern: string;
+}
+
+interface ApiVlmField {
+  name: string;
+  type: string;
+}
+
 interface PromptSetting {
   type: string;
   template: string;
@@ -51,8 +61,28 @@ interface ExtactionConfigType {
   };
 }
 
+interface ApiExtactionConfigType {
+  llm?: {
+    fields?: string[];
+    prompt_setting?: {
+      type?: string;
+      template?: string;
+    }
+  };
+  vlm?: {
+    fields?: ApiVlmField[];
+    prompt_setting?: {
+      type?: string;
+      template?: string;
+    }
+  };
+  regex?: {
+    fields?: ApiRegexField[];
+  };
+}
+
 interface RuleConfigType {
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 interface Rule {
@@ -68,6 +98,7 @@ interface EvaluationConfigType {
 }
 
 interface FormDataType {
+  id?: number;
   name: string;
   code: string;
   risk: string;
@@ -87,11 +118,54 @@ interface FormDataType {
   suggestion_message_type: string;
   post_action: string;
   action_config: string;
+  type?: string;
+}
+
+// API响应类型
+interface ApiResponseType<T> {
+  code: number;
+  msg: string;
+  data: T;
+}
+
+interface ApiPointData {
+  id: number;
+  name: string;
+  code: string;
+  risk: string;
+  is_enabled: boolean;
+  description: string;
+  references_laws: {
+    name: string;
+    articles: string[];
+    content: string;
+  };
+  evaluation_point_groups_id: number | null;
+  extraction_config: ApiExtactionConfigType;
+  evaluation_config: {
+    logicType?: string;
+    customLogic?: string;
+    rules?: Array<{
+      id: string;
+      type: string;
+      config: Record<string, unknown>;
+    }>;
+  };
+  pass_message: string;
+  fail_message: string;
+  suggestion_message: string;
+  suggestion_message_type: string;
+  post_action: string;
+  action_config: string;
+  type?: string;
 }
 
 export default function RuleNew() {
   const navigate = useNavigate();
+  const location = useLocation();
   const [extractionFields, setExtractionFields] = useState<string[]>([]);
+  const [isEditMode, setIsEditMode] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [formData, setFormData] = useState<FormDataType>({
     // 基本信息字段
     name: '',
@@ -105,6 +179,7 @@ export default function RuleNew() {
       content: ''
     },
     evaluation_point_groups_id: null,
+    type: '',
     
     // 抽取设置
     extraction_config: {
@@ -145,6 +220,185 @@ export default function RuleNew() {
     action_config: ''
   });
 
+  // 页面加载时检查URL中是否有ID参数，如果有则为编辑模式
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const id = searchParams.get('id');
+    
+    if (id) {
+      setIsEditMode(true);
+      fetchEvaluationPoint(parseInt(id));
+    }
+  }, [location]);
+
+  // 获取评查点数据
+  const fetchEvaluationPoint = async (id: number) => {
+    setIsLoading(true);
+    try {
+      const response = await fetch(`http://127.0.0.1:9000/admin/evaluation_points?id=eq.${id}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error(`获取评查点数据失败: ${response.status}`);
+      }
+
+      const responseData = await response.json() as ApiResponseType<ApiPointData[]>;
+      
+      // 根据API返回结构解析数据
+      if (responseData && responseData.code === 0 && responseData.data && responseData.data.length > 0) {
+        const pointData = responseData.data[0];
+        
+        // 转换API数据为表单数据格式
+        const extractionConfig = pointData.extraction_config || {};
+        const evaluationConfig = pointData.evaluation_config || {};
+        
+        // 提取字段列表，用于规则设置
+        const extractedFields: string[] = [
+          ...(extractionConfig.llm?.fields || []),
+          ...(extractionConfig.vlm?.fields || []).map((field) => {
+            if (typeof field === 'object' && field.name) {
+              return field.type ? `${field.name}_${field.type}` : field.name;
+            }
+            return '';
+          }),
+          ...(extractionConfig.regex?.fields || []).map((field) => field.field || '')
+        ].filter(Boolean);
+        
+        setExtractionFields(extractedFields);
+        
+        // 构建表单数据
+        setFormData({
+          id: pointData.id,
+          name: pointData.name || '',
+          code: pointData.code || '',
+          risk: pointData.risk || 'medium',
+          is_enabled: pointData.is_enabled || false,
+          description: pointData.description || '',
+          references_laws: pointData.references_laws || {
+            name: '',
+            articles: [],
+            content: ''
+          },
+          evaluation_point_groups_id: pointData.evaluation_point_groups_id || null,
+          type: pointData.type || '',
+          
+          // 将API数据格式转换为内部使用的格式
+          extraction_config: {
+            llm_ocr: {
+              fields: extractionConfig.llm?.fields || [],
+              prompt_setting: {
+                type: extractionConfig.llm?.prompt_setting?.type || 'system',
+                template: extractionConfig.llm?.prompt_setting?.template || ''
+              }
+            },
+            llm_vl: {
+              fields: (extractionConfig.vlm?.fields || []).map((field) => {
+                if (typeof field === 'object' && field.name) {
+                  return field.type ? `${field.name}_${field.type}` : field.name;
+                }
+                return '';
+              }).filter(Boolean),
+              prompt_setting: {
+                type: extractionConfig.vlm?.prompt_setting?.type || 'system',
+                template: extractionConfig.vlm?.prompt_setting?.template || ''
+              }
+            },
+            ocr_regex: {
+              fields: (extractionConfig.regex?.fields || []).map((field) => ({
+                fieldName: field.field || '',
+                regex: field.pattern || ''
+              }))
+            }
+          },
+          
+          evaluation_config: {
+            logicType: evaluationConfig.logicType || 'and',
+            customLogic: evaluationConfig.customLogic || '',
+            rules: (evaluationConfig.rules || []).map((rule) => {
+              // 将API规则格式转换为UI使用的格式
+              let config: RuleConfigType = {};
+              
+              switch (rule.type) {
+                case 'exists':
+                  config = {
+                    selectedFields: rule.config?.fields || [],
+                    logicRelation: rule.config?.logic || 'and'
+                  };
+                  break;
+                case 'consistency':
+                  config = {
+                    pairs: rule.config?.pairs || [],
+                    logicRelation: rule.config?.logic || 'and'
+                  };
+                  break;
+                case 'format':
+                  config = {
+                    field: rule.config?.field || '',
+                    formatType: rule.config?.formatType || '',
+                    parameters: rule.config?.parameters || ''
+                  };
+                  break;
+                case 'logic':
+                  config = {
+                    conditions: rule.config?.conditions || [],
+                    logicRelation: rule.config?.logic || 'and'
+                  };
+                  break;
+                case 'regex':
+                  config = {
+                    field: rule.config?.field || '',
+                    pattern: rule.config?.pattern || '',
+                    matchType: rule.config?.matchType || 'match'
+                  };
+                  break;
+                case 'ai':
+                  config = {
+                    model: rule.config?.model || 'qwen14b',
+                    temperature: rule.config?.temperature || 0.1,
+                    prompt: rule.config?.prompt || ''
+                  };
+                  break;
+                case 'code':
+                  config = {
+                    language: rule.config?.language || 'javascript',
+                    code: rule.config?.code || ''
+                  };
+                  break;
+                default:
+                  config = rule.config || {};
+              }
+              
+              return {
+                id: rule.id,
+                type: rule.type,
+                config
+              };
+            })
+          },
+          
+          pass_message: pointData.pass_message || '文档检查通过，符合规范要求。',
+          fail_message: pointData.fail_message || '文档存在以下问题，请修改后重新提交。',
+          suggestion_message: pointData.suggestion_message || '',
+          suggestion_message_type: pointData.suggestion_message_type || 'warning',
+          post_action: pointData.post_action || 'none',
+          action_config: pointData.action_config || ''
+        });
+      } else {
+        throw new Error('未找到评查点数据或数据格式不正确');
+      }
+    } catch (error) {
+      console.error('获取评查点数据失败:', error);
+      alert(`获取评查点数据失败: ${error instanceof Error ? error.message : '未知错误'}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   // 更新抽取字段列表，用于在评查规则中选择
   const updateExtractionFields = (fields: string[]) => {
     setExtractionFields(fields);
@@ -191,15 +445,15 @@ export default function RuleNew() {
       
       // 更新提示词设置
       if (data.promptSettings) {
-        const promptSettings = data.promptSettings as Record<string, any>;
+        const promptSettings = data.promptSettings as Record<string, unknown>;
         
         // 确定当前是处理哪种类型的提示词
         if (extractionMethod === 'llm_ocr') {
-          updatedExtractionConfig.llm_ocr.prompt_setting.type = promptSettings.type || 'system';
+          updatedExtractionConfig.llm_ocr.prompt_setting.type = promptSettings.type as string || 'system';
-          updatedExtractionConfig.llm_ocr.prompt_setting.template = promptSettings.content || '';
+          updatedExtractionConfig.llm_ocr.prompt_setting.template = promptSettings.content as string || '';
         } else if (extractionMethod === 'llm') {
-          updatedExtractionConfig.llm_vl.prompt_setting.type = promptSettings.type || 'system';
+          updatedExtractionConfig.llm_vl.prompt_setting.type = promptSettings.type as string || 'system';
-          updatedExtractionConfig.llm_vl.prompt_setting.template = promptSettings.content || '';
+          updatedExtractionConfig.llm_vl.prompt_setting.template = promptSettings.content as string || '';
         }
       } else {
         // 兼容旧的API
@@ -283,141 +537,162 @@ export default function RuleNew() {
     });
   };
 
+  // 格式化数据，准备提交到接口
+  const formatDataForApi = (formData: FormDataType, isDraft: boolean = false) => {
+    // 转换提取配置为符合数据库格式的JSON
+    const extractionConfig = {
+      llm: {
+        fields: formData.extraction_config.llm_ocr.fields || [],
+        prompt_setting: {
+          type: formData.extraction_config.llm_ocr.prompt_setting.type || 'system',
+          template: formData.extraction_config.llm_ocr.prompt_setting.template || ''
+        }
+      },
+      vlm: {
+        fields: (formData.extraction_config.llm_vl.fields || []).map((field: string) => {
+          // 处理带有类型后缀的字段名 (如 "字段名_类型")
+          if (field.includes('_')) {
+            const [name, type] = field.split('_');
+            return {
+              name,
+              type: type || 'default'
+            };
+          }
+          return { name: field, type: 'default' };
+        }),
+        prompt_setting: {
+          type: formData.extraction_config.llm_vl.prompt_setting.type || 'system',
+          template: formData.extraction_config.llm_vl.prompt_setting.template || ''
+        }
+      },
+      regex: {
+        fields: (formData.extraction_config.ocr_regex.fields || []).map((field: RegexField) => {
+          return {
+            field: field.fieldName || '',
+            pattern: field.regex || ''
+          };
+        })
+      }
+    };
+    
+    // 转换评查配置为符合数据库格式的JSON
+    const evaluationConfig = {
+      logicType: formData.evaluation_config.logicType || 'and',
+      customLogic: formData.evaluation_config.customLogic || '',
+      rules: (formData.evaluation_config.rules || []).map((rule: Rule) => {
+        let config = {};
+        
+        // 根据不同的规则类型生成对应的配置
+        switch (rule.type) {
+          case 'exists': 
+            config = {
+              fields: rule.config?.selectedFields || [],
+              logic: rule.config?.logicRelation || 'and'
+            };
+            break;
+          case 'consistency':
+            config = {
+              pairs: rule.config?.pairs || [],
+              logic: rule.config?.logicRelation || 'and'
+            };
+            break;
+          case 'format':
+            config = {
+              field: rule.config?.field || '',
+              formatType: rule.config?.formatType || '',
+              parameters: rule.config?.parameters || ''
+            };
+            break;
+          case 'logic':
+            config = {
+              conditions: rule.config?.conditions || [],
+              logic: rule.config?.logicRelation || 'and'
+            };
+            break;
+          case 'regex':
+            config = {
+              field: rule.config?.field || '',
+              pattern: rule.config?.pattern || '',
+              matchType: rule.config?.matchType || 'match'
+            };
+            break;
+          case 'ai':
+            config = {
+              model: rule.config?.model || 'qwen14b',
+              temperature: rule.config?.temperature || 0.1,
+              prompt: rule.config?.prompt || ''
+            };
+            break;
+          case 'code':
+            config = {
+              language: rule.config?.language || 'javascript',
+              code: rule.config?.code || ''
+            };
+            break;
+          default:
+            config = rule.config || {};
+        }
+        
+        return {
+          id: rule.id,
+          type: rule.type,
+          config
+        };
+      })
+    };
+
+    // 构建完整的评查点数据
+    const evaluationPointData: Record<string, unknown> = {
+      code: formData.code,
+      name: formData.name,
+      evaluation_point_groups_id: formData.evaluation_point_groups_id,
+      risk: formData.risk,
+      description: formData.description,
+      is_enabled: isDraft ? false : formData.is_enabled,
+      is_draft: isDraft,
+      type: formData.type,
+      references_laws: formData.references_laws,
+      extraction_config: extractionConfig,
+      evaluation_config: evaluationConfig,
+      pass_message: formData.pass_message,
+      fail_message: formData.fail_message,
+      suggestion_message: formData.suggestion_message,
+      suggestion_message_type: formData.suggestion_message_type,
+      post_action: formData.post_action,
+      action_config: formData.action_config
+    };
+
+    // 如果是编辑模式，添加ID
+    if (isEditMode && formData.id) {
+      evaluationPointData.id = formData.id;
+    }
+    
+    return evaluationPointData;
+  };
+
   // 保存评查点
   const handleSave = async () => {
     try {
-      // 转换提取配置为符合数据库格式的JSON
+      setIsLoading(true);
-      const extractionConfig = {
+      const evaluationPointData = formatDataForApi(formData);
-        llm: {
-          fields: formData.extraction_config.llm_ocr.fields || [],
-          prompt_setting: {
-            type: formData.extraction_config.llm_ocr.prompt_setting.type || 'system',
-            template: formData.extraction_config.llm_ocr.prompt_setting.template || ''
-          }
-        },
-        vlm: {
-          fields: (formData.extraction_config.llm_vl.fields || []).map((field: any) => {
-            // 处理带有类型后缀的字段名 (如 "字段名_类型")
-            if (typeof field === 'string' && field.includes('_')) {
-              const [name, type] = field.split('_');
-              return {
-                name,
-                type: type || 'default'
-              };
-            }
-            return { name: field, type: 'default' };
-          }),
-          prompt_setting: {
-            type: formData.extraction_config.llm_vl.prompt_setting.type || 'system',
-            template: formData.extraction_config.llm_vl.prompt_setting.template || ''
-          }
-        },
-        regex: {
-          fields: (formData.extraction_config.ocr_regex.fields || []).map((field: any) => {
-            if (typeof field === 'object') {
-              return {
-                field: field.fieldName || '',
-                pattern: field.regex || ''
-              };
-            }
-            return { field: '', pattern: '' };
-          })
-        }
-      };
       
-      console.log('提交的提取配置:', extractionConfig);
+      // 确定使用的HTTP方法和URL
-      console.log('原始提取配置:', formData.extraction_config);
+      let method = 'POST';
+      let endpoint = 'http://127.0.0.1:9000/admin/evaluation_points';
       
-      // 转换评查配置为符合数据库格式的JSON
+      // 如果是编辑模式，使用PATCH更新现有记录
-      const evaluationConfig = {
+      if (isEditMode && formData.id) {
-        logicType: formData.evaluation_config.logicType || 'and',
+        method = 'PATCH';
-        customLogic: formData.evaluation_config.customLogic || '',
+        endpoint = `http://127.0.0.1:9000/admin/evaluation_points?id=eq.${formData.id}`;
-        rules: (formData.evaluation_config.rules || []).map((rule: any) => {
+      }
-          let config = {};
-          
-          // 根据不同的规则类型生成对应的配置
-          switch (rule.type) {
-            case 'exists': 
-              config = {
-                fields: rule.config?.selectedFields || [],
-                logic: rule.config?.logicRelation || 'and'
-              };
-              break;
-            case 'consistency':
-              config = {
-                pairs: rule.config?.pairs || [],
-                logic: rule.config?.logicRelation || 'and'
-              };
-              break;
-            case 'format':
-              config = {
-                field: rule.config?.field || '',
-                formatType: rule.config?.formatType || '',
-                parameters: rule.config?.parameters || ''
-              };
-              break;
-            case 'logic':
-              config = {
-                conditions: rule.config?.conditions || [],
-                logic: rule.config?.logicRelation || 'and'
-              };
-              break;
-            case 'regex':
-              config = {
-                field: rule.config?.field || '',
-                pattern: rule.config?.pattern || '',
-                matchType: rule.config?.matchType || 'match'
-              };
-              break;
-            case 'ai':
-              config = {
-                model: rule.config?.model || 'qwen14b',
-                temperature: rule.config?.temperature || 0.1,
-                prompt: rule.config?.prompt || ''
-              };
-              break;
-            case 'code':
-              config = {
-                language: rule.config?.language || 'javascript',
-                code: rule.config?.code || ''
-              };
-              break;
-            default:
-              config = rule.config || {};
-          }
-          
-          return {
-            id: rule.id,
-            type: rule.type,
-            config
-          };
-        })
-      };
-      
-      // 构建完整的评查点数据
-      const evaluationPointData = {
-        code: formData.code,
-        name: formData.name,
-        evaluation_point_groups_id: formData.evaluation_point_groups_id,
-        risk: formData.risk,
-        description: formData.description,
-        is_enabled: formData.is_enabled,
-        references_laws: formData.references_laws,
-        extraction_config: extractionConfig,
-        evaluation_config: evaluationConfig,
-        pass_message: formData.pass_message,
-        fail_message: formData.fail_message,
-        suggestion_message: formData.suggestion_message,
-        suggestion_message_type: formData.suggestion_message_type,
-        post_action: formData.post_action,
-        action_config: formData.action_config
-      };
       
       // 发送数据到API
-      const response = await fetch('/api/evaluation-points', {
+      const response = await fetch(endpoint, {
-        method: 'POST',
+        method: method,
         headers: {
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+          'Prefer': isEditMode ? 'return=representation' : 'return=representation'
         },
         body: JSON.stringify(evaluationPointData)
       });
@@ -426,153 +701,46 @@ export default function RuleNew() {
         throw new Error(`API响应错误: ${response.status}`);
       }
       
-      const result = await response.json();
+      const responseData = await response.json() as ApiResponseType<unknown>;
-      console.log('保存成功:', result);
       
-      // 保存成功后跳转到评查点列表页面
+      if (responseData.code === 0) {
-      navigate('/rules');
+        console.log('保存成功:', responseData.data);
+        // 保存成功后跳转到评查点列表页面
+        navigate('/rules');
+      } else {
+        throw new Error(`API错误: ${responseData.msg || '未知错误'}`);
+      }
     } catch (error) {
       console.error('保存失败:', error);
       alert(`保存失败: ${error instanceof Error ? error.message : '未知错误'}`);
+    } finally {
+      setIsLoading(false);
     }
   };
   
   // 保存为草稿
   const handleSaveDraft = async () => {
     try {
-      // 转换提取配置为符合数据库格式的JSON
+      setIsLoading(true);
-      const extractionConfig = {
+      const draftData = formatDataForApi(formData, true);
-        llm: {
-          fields: formData.extraction_config.llm_ocr.fields || [],
-          prompt_setting: {
-            type: formData.extraction_config.llm_ocr.prompt_setting.type || 'system',
-            template: formData.extraction_config.llm_ocr.prompt_setting.template || ''
-          }
-        },
-        vlm: {
-          fields: (formData.extraction_config.llm_vl.fields || []).map((field: any) => {
-            // 处理带有类型后缀的字段名 (如 "字段名_类型")
-            if (typeof field === 'string' && field.includes('_')) {
-              const [name, type] = field.split('_');
-              return {
-                name,
-                type: type || 'default'
-              };
-            }
-            return { name: field, type: 'default' };
-          }),
-          prompt_setting: {
-            type: formData.extraction_config.llm_vl.prompt_setting.type || 'system',
-            template: formData.extraction_config.llm_vl.prompt_setting.template || ''
-          }
-        },
-        regex: {
-          fields: (formData.extraction_config.ocr_regex.fields || []).map((field: any) => {
-            if (typeof field === 'object') {
-              return {
-                field: field.fieldName || '',
-                pattern: field.regex || ''
-              };
-            }
-            return { field: '', pattern: '' };
-          })
-        }
-      };
       
-      console.log('草稿提交的提取配置:', extractionConfig);
+      // 确定使用的HTTP方法和URL
-      console.log('草稿原始提取配置:', formData.extraction_config);
+      let method = 'POST';
+      let endpoint = 'http://127.0.0.1:9000/admin/evaluation_points';
       
-      // 转换评查配置为符合数据库格式的JSON
+      // 如果是编辑模式，使用PATCH更新现有记录
-      const evaluationConfig = {
+      if (isEditMode && formData.id) {
-        logicType: formData.evaluation_config.logicType || 'and',
+        method = 'PATCH';
-        customLogic: formData.evaluation_config.customLogic || '',
+        endpoint = `http://127.0.0.1:9000/admin/evaluation_points?id=eq.${formData.id}`;
-        rules: (formData.evaluation_config.rules || []).map((rule: any) => {
+      }
-          let config = {};
-          
-          // 根据不同的规则类型生成对应的配置
-          switch (rule.type) {
-            case 'exists': 
-              config = {
-                fields: rule.config?.selectedFields || [],
-                logic: rule.config?.logicRelation || 'and'
-              };
-              break;
-            case 'consistency':
-              config = {
-                pairs: rule.config?.pairs || [],
-                logic: rule.config?.logicRelation || 'and'
-              };
-              break;
-            case 'format':
-              config = {
-                field: rule.config?.field || '',
-                formatType: rule.config?.formatType || '',
-                parameters: rule.config?.parameters || ''
-              };
-              break;
-            case 'logic':
-              config = {
-                conditions: rule.config?.conditions || [],
-                logic: rule.config?.logicRelation || 'and'
-              };
-              break;
-            case 'regex':
-              config = {
-                field: rule.config?.field || '',
-                pattern: rule.config?.pattern || '',
-                matchType: rule.config?.matchType || 'match'
-              };
-              break;
-            case 'ai':
-              config = {
-                model: rule.config?.model || 'qwen14b',
-                temperature: rule.config?.temperature || 0.1,
-                prompt: rule.config?.prompt || ''
-              };
-              break;
-            case 'code':
-              config = {
-                language: rule.config?.language || 'javascript',
-                code: rule.config?.code || ''
-              };
-              break;
-            default:
-              config = rule.config || {};
-          }
-          
-          return {
-            id: rule.id,
-            type: rule.type,
-            config
-          };
-        })
-      };
-
-      // 构建带草稿标记的评查点数据
-      const draftData = {
-        code: formData.code,
-        name: formData.name,
-        evaluation_point_groups_id: formData.evaluation_point_groups_id,
-        risk: formData.risk,
-        description: formData.description,
-        is_enabled: false, // 草稿默认不启用
-        is_draft: true, // 标记为草稿
-        references_laws: formData.references_laws,
-        extraction_config: extractionConfig,
-        evaluation_config: evaluationConfig,
-        pass_message: formData.pass_message,
-        fail_message: formData.fail_message,
-        suggestion_message: formData.suggestion_message,
-        suggestion_message_type: formData.suggestion_message_type,
-        post_action: formData.post_action,
-        action_config: formData.action_config
-      };
       
       // 发送数据到API
-      const response = await fetch('/api/evaluation-points/draft', {
+      const response = await fetch(endpoint, {
-        method: 'POST',
+        method: method,
         headers: {
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+          'Prefer': 'return=representation'
         },
         body: JSON.stringify(draftData)
       });
@@ -581,44 +749,80 @@ export default function RuleNew() {
         throw new Error(`API响应错误: ${response.status}`);
       }
       
-      const result = await response.json();
+      const responseData = await response.json() as ApiResponseType<unknown>;
-      console.log('保存草稿成功:', result);
       
-      // 保存成功后跳转到评查点列表页面
+      if (responseData.code === 0) {
-      navigate('/rules');
+        console.log('保存草稿成功:', responseData.data);
+        // 保存成功后跳转到评查点列表页面
+        navigate('/rules');
+      } else {
+        throw new Error(`API错误: ${responseData.msg || '未知错误'}`);
+      }
     } catch (error) {
       console.error('保存草稿失败:', error);
       alert(`保存草稿失败: ${error instanceof Error ? error.message : '未知错误'}`);
+    } finally {
+      setIsLoading(false);
     }
   };
 
   return (
     <div className="container">
       <PageHeader 
-        title="新增评查点" 
+        title={isEditMode ? "编辑评查点" : "新增评查点"} 
         onSave={handleSave} 
       />
       
-      <div className="mb-8">
+      {isLoading ? (
-        <BasicInfo onChange={handleBasicInfoChange} />
+        <div className="flex justify-center items-center p-12">
-      </div>
+          <div className="loading-spinner"></div>
-      
+          <span className="ml-3">加载中...</span>
-      <div className="mb-8">
+        </div>
-        <RuleContext.Provider value={{ extractionFields, updateFields: updateExtractionFields }}>
+      ) : (
-          <ExtractionSettings onChange={handleExtractionSettingsChange} />
+        <>
-        </RuleContext.Provider>
+          <div className="mb-8">
-      </div>
+            <BasicInfo onChange={handleBasicInfoChange} initialData={formData} />
-      
+          </div>
-      <div className="mb-8">
+          
-        <RuleContext.Provider value={{ extractionFields, updateFields: updateExtractionFields }}>
+          <div className="mb-8">
-          <ReviewSettings onChange={handleReviewSettingsChange} />
+            <RuleContext.Provider value={{ extractionFields, updateFields: updateExtractionFields }}>
-        </RuleContext.Provider>
+              <ExtractionSettings 
-      </div>
+                onChange={handleExtractionSettingsChange} 
-      
+                initialData={{
-      <ActionButtons 
+                  llm_ocr: formData.extraction_config.llm_ocr,
-        onSave={handleSave}
+                  llm_vl: formData.extraction_config.llm_vl,
-        onSaveDraft={handleSaveDraft}
+                  ocr_regex: formData.extraction_config.ocr_regex
-      />
+                }} 
+              />
+            </RuleContext.Provider>
+          </div>
+          
+          <div className="mb-8">
+            <RuleContext.Provider value={{ extractionFields, updateFields: updateExtractionFields }}>
+              <ReviewSettings 
+                onChange={handleReviewSettingsChange} 
+                initialData={{
+                  rules: formData.evaluation_config.rules,
+                  combinationLogic: formData.evaluation_config.logicType,
+                  customLogic: formData.evaluation_config.customLogic,
+                  pass_message: formData.pass_message,
+                  fail_message: formData.fail_message,
+                  suggestion_message: formData.suggestion_message,
+                  suggestion_message_type: formData.suggestion_message_type,
+                  post_action: formData.post_action,
+                  action_config: formData.action_config
+                }} 
+              />
+            </RuleContext.Provider>
+          </div>
+          
+          <ActionButtons 
+            onSave={handleSave}
+            onSaveDraft={handleSaveDraft}
+            isEditMode={isEditMode}
+          />
+        </>
+      )}
     </div>
   );
 }