分数，评查点分组数据对接上

app/components/rules/new/BasicInfo.tsx

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 
 interface BasicInfoProps {
   onChange?: (data: Record<string, unknown>) => void;
-  initialData?: Record<string, any>;
+  initialData?: FormDataType;
+  evaluationPointGroups?: Array<{id: number, pid: number, code: string, name: string, is_enabled: boolean}>;
 }
 
 // 定义表单数据类型
@@ -18,10 +19,12 @@ interface FormDataType {
     content: string;
   };
   evaluation_point_groups_id: number | null;
+  evaluation_point_groups_pid: number | null;
   type: string;
+  id?: number;
 }
 
-export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
+export function BasicInfo({ onChange, initialData, evaluationPointGroups = [] }: BasicInfoProps) {
   const [formData, setFormData] = useState<FormDataType>({
     name: '',
     code: '',
@@ -34,11 +37,13 @@ export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
       content: ''
     },
     evaluation_point_groups_id: null,
+    evaluation_point_groups_pid: null,
     type: ''
   });
 
   const [isDescExpanded, setIsDescExpanded] = useState(false);
   const [lawArticlesInput, setLawArticlesInput] = useState('');
+  const [filteredRuleGroups, setFilteredRuleGroups] = useState<Array<{id: number, pid: number, code: string, name: string, is_enabled: boolean}>>([]);
 
   // 当initialData变化时更新表单数据
   useEffect(() => {
@@ -55,6 +60,7 @@ export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
           content: ''
         },
         evaluation_point_groups_id: initialData.evaluation_point_groups_id || null,
+        evaluation_point_groups_pid: initialData.evaluation_point_groups_pid || null,
         type: initialData.type || ''
       };
       
@@ -76,6 +82,113 @@ export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
     }
   }, [initialData]);
 
+  // 当评查点类型或评查点组数据变化时，过滤规则组列表
+  useEffect(() => {
+    if (evaluationPointGroups && evaluationPointGroups.length > 0) {
+      console.log("评查点组数据更新，当前类型:", formData.type);
+      console.log("评查点组数据:", evaluationPointGroups);
+      
+      if (formData.type) {
+        // 获取所选评查点类型的组ID
+        const typeGroup = evaluationPointGroups.find(group => 
+          group.pid === 0 && 
+          group.code === formData.type
+        );
+        
+        console.log("找到的类型组:", typeGroup);
+        
+        if (typeGroup) {
+          // 更新评查点类型组ID
+          if (formData.evaluation_point_groups_pid !== typeGroup.id) {
+            const newData = { 
+              ...formData, 
+              evaluation_point_groups_pid: typeGroup.id 
+            };
+            setFormData(newData);
+            if (onChange) onChange(newData);
+          }
+          
+          // 过滤出属于该类型的规则组（pid等于类型组ID的项）
+          const groups = evaluationPointGroups.filter(group => 
+            group.pid === typeGroup.id && 
+            group.is_enabled
+          );
+          console.log("过滤后的规则组:", groups);
+          setFilteredRuleGroups(groups);
+          
+          // 如果当前选择的规则组不在过滤结果中，重置选择
+          if (formData.evaluation_point_groups_id && 
+              !groups.some(group => group.id === formData.evaluation_point_groups_id)) {
+            console.log("当前选择的规则组不在过滤结果中，重置选择");
+            const newData = { 
+              ...formData, 
+              evaluation_point_groups_id: null 
+            };
+            setFormData(newData);
+            if (onChange) onChange(newData);
+          }
+        } else {
+          console.log("未找到对应的类型组");
+          setFilteredRuleGroups([]);
+          
+          // 重置评查点类型组ID
+          if (formData.evaluation_point_groups_pid !== null) {
+            const newData = { 
+              ...formData, 
+              evaluation_point_groups_pid: null 
+            };
+            setFormData(newData);
+            if (onChange) onChange(newData);
+          }
+        }
+      } else {
+        console.log("未选择评查点类型");
+        setFilteredRuleGroups([]);
+        
+        // 重置评查点类型组ID
+        if (formData.evaluation_point_groups_pid !== null) {
+          const newData = { 
+            ...formData, 
+            evaluation_point_groups_pid: null 
+          };
+          setFormData(newData);
+          if (onChange) onChange(newData);
+        }
+      }
+    }
+  }, [formData.type, evaluationPointGroups, formData.evaluation_point_groups_id, formData.evaluation_point_groups_pid, onChange]);
+
+  // 获取评查点类型选项（pid=0的数据）
+  const getCheckpointTypeOptions = () => {
+    if (!evaluationPointGroups || evaluationPointGroups.length === 0) {
+      console.log("无评查点组数据，使用默认类型选项");
+      return (
+        <>
+          <option value="">请选择评查点类型</option>
+          <option value="essential">基本要素类</option>
+          <option value="content">内容合规类</option>
+          <option value="format">格式规范类</option>
+          <option value="legal">法律风险类</option>
+          <option value="business">业务专项类</option>
+        </>
+      );
+    }
+    
+    const typeGroups = evaluationPointGroups.filter(group => group.pid === 0 && group.is_enabled);
+    console.log("可用的评查点类型:", typeGroups);
+    
+    return (
+      <>
+        <option value="">请选择评查点类型</option>
+        {typeGroups.map(group => (
+          <option key={group.id} value={group.code}>
+            {group.name}
+          </option>
+        ))}
+      </>
+    );
+  };
+
   const handleToggleDescription = () => {
     setIsDescExpanded(!isDescExpanded);
   };
@@ -115,6 +228,19 @@ export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
         break;
       case 'checkpoint-type':
         newData.type = value;
+        // 重置规则组选择
+        newData.evaluation_point_groups_id = null;
+        
+        // 设置评查点类型组ID
+        if (value) {
+          const typeGroup = evaluationPointGroups.find(group => 
+            group.pid === 0 && 
+            group.code === value
+          );
+          newData.evaluation_point_groups_pid = typeGroup ? typeGroup.id : null;
+        } else {
+          newData.evaluation_point_groups_pid = null;
+        }
         break;
     }
     
@@ -207,32 +333,37 @@ export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
               value={formData.type}
               onChange={handleInputChange}
             >
-              <option value="">请选择评查点类型</option>
+              {getCheckpointTypeOptions()}
-              <option value="essential">基本要素类</option>
-              <option value="content">内容合规类</option>
-              <option value="format">格式规范类</option>
-              <option value="legal">法律风险类</option>
-              <option value="business">业务专项类</option>
             </select>
             <div className="form-tip">评查点类型用于分类管理，便于规则统一调用</div>
           </div>
           <div>
             <label className="form-label" htmlFor="evaluation-point-group">
-              所属规则组
+              所属规则组 <span className="required-mark">*</span>
             </label>
             <select 
               id="evaluation-point-group" 
-              className="form-select"
+              className={`form-select ${!formData.type || filteredRuleGroups.length === 0 ? 'bg-gray-100 cursor-not-allowed' : ''}`}
               value={formData.evaluation_point_groups_id?.toString() || ""}
               onChange={handleInputChange}
+              disabled={!formData.type || filteredRuleGroups.length === 0}
             >
-              <option value="">请选择规则组</option>
+              <option value="">
-              <option value="1">合同基本要素检查</option>
+                {!formData.type ? "请先选择评查点类型" : 
-              <option value="2">销售合同专项检查</option>
+                 filteredRuleGroups.length === 0 ? "该类型下暂无可用规则组" : 
-              <option value="3">采购合同专项检查</option>
+                 "请选择规则组"}
-              <option value="4">专卖许可证审核规则</option>
+              </option>
-              <option value="5">行政处罚规范性检查</option>
+              {filteredRuleGroups.map(group => (
+                <option key={group.id} value={group.id.toString()}>
+                  {group.name}
+                </option>
+              ))}
             </select>
+            <div className="form-tip">
+              {!formData.type ? "请先选择评查点类型" : 
+               filteredRuleGroups.length === 0 ? "该类型下暂无可用规则组" : 
+               "选择评查点所属的规则组"}
+            </div>
           </div>
           <div>
             <label className="form-label" htmlFor="is-enabled">是否启用</label>

app/components/rules/new/ExtractionSettings.tsx

@@ -1,5 +1,6 @@
 import { useState, KeyboardEvent, FormEvent, useContext, useEffect, useCallback, useRef } from 'react';
-import { RuleContext } from './ReviewSettings';
+import { RuleContext } from '~/contexts/RuleContext';
+import { processFieldName } from '~/utils';
 
 /**
  * ExtractionSettings 组件
@@ -169,7 +170,7 @@ export function ExtractionSettings({ onChange, initialData }: ExtractionSettings
       
       // 获取所有字段（不包括regexFields，这部分单独处理）
       const llm_ocr_fields = fields.llm_ocr || [];
-      const llm_fields = (fields.llm || []).map((field) => field.split('_')[0]);
+      const llm_fields = (fields.llm || []).map(processFieldName);
       
       // 检查是否在其他类型字段中存在
       if (llm_ocr_fields.some(f => f.toLowerCase() === fieldNameLower) || 
@@ -202,7 +203,7 @@ export function ExtractionSettings({ onChange, initialData }: ExtractionSettings
       // 收集所有字段名 - 不受当前标签页影响，始终收集所有类型的字段
       const allFieldNamesList = [
         ...fields.llm_ocr, 
-        ...fields.llm.map(f => f.split('_')[0]), 
+        ...fields.llm.map(f => processFieldName(f)), 
         ...validRegexFields.map(f => f.fieldName.trim())
       ].filter(name => name); // 过滤空值
       
@@ -250,20 +251,7 @@ export function ExtractionSettings({ onChange, initialData }: ExtractionSettings
         });
       }
       
-      // 分发自定义事件，确保更新到所有依赖此事件的组件
+      // 不再使用自定义事件，统一通过Context共享数据
-      document.dispatchEvent(
-        new CustomEvent('extraction-fields-updated', {
-          detail: {
-            fields: allFields,
-            fieldsData: {
-              llm_ocr: fields.llm_ocr || [],
-              llm: fields.llm || [],
-              regex: validRegexFields.map(f => f.fieldName.trim())
-            },
-            timestamp: Date.now() // 添加时间戳确保事件能被识别为新事件
-          },
-        })
-      );
       
       // 更新上次发送的字段列表和时间
       lastEventFieldsRef.current = [...allFields];

app/contexts/RuleContext.tsx

@@ -0,0 +1,26 @@
+import { createContext } from 'react';
+
+/**
+ * 规则上下文类型
+ * 用于在抽取设置和评查设置之间共享数据
+ */
+export interface RuleContextType {
+  /**
+   * 抽取的字段列表
+   */
+  extractionFields: string[];
+  
+  /**
+   * 更新字段列表的函数
+   */
+  updateFields: (fields: string[]) => void;
+}
+
+/**
+ * 创建规则上下文
+ * 用于在抽取设置和评查设置组件之间共享字段数据
+ */
+export const RuleContext = createContext<RuleContextType>({
+  extractionFields: [],
+  updateFields: () => {}
+}); 

app/entry.client.tsx

@@ -5,14 +5,12 @@
  */
 
 import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
+import { startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
 
 startTransition(() => {
   hydrateRoot(
     document,
-    <StrictMode>
+    <RemixBrowser />
-      <RemixBrowser />
-    </StrictMode>
   );
 });

app/utils.ts

@@ -0,0 +1,68 @@
+/**
+ * 工具函数集合
+ * 包含字段处理、防抖等通用功能
+ */
+
+/**
+ * 处理字段名，去除类型后缀
+ * 例如: "字段名_类型" -> "字段名"
+ */
+export function processFieldName(field: string): string {
+  if (field.includes('_')) {
+    return field.split('_')[0]; // 只保留类型前面的字段名
+  }
+  return field;
+}
+
+/**
+ * 处理字段数组，去除类型后缀并去重
+ */
+export function processFieldNames(fields: string[]): string[] {
+  // 处理字段，去掉类型后缀
+  const processedFields = fields.map(processFieldName);
+  
+  // 去重并返回
+  return [...new Set(processedFields)];
+}
+
+/**
+ * 创建防抖函数
+ * @param fn 要执行的函数
+ * @param delay 延迟时间（毫秒）
+ */
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timer: NodeJS.Timeout | null = null;
+  
+  return function(...args: Parameters<T>) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    
+    timer = setTimeout(() => {
+      fn(...args);
+      timer = null;
+    }, delay);
+  };
+}
+
+/**
+ * 比较两个数组是否有实质性不同
+ * 用于避免不必要的状态更新
+ */
+export function areArraysDifferent<T>(arr1: T[], arr2: T[]): boolean {
+  return JSON.stringify(arr1) !== JSON.stringify(arr2);
+}
+
+/**
+ * 查找两个数组之间的差异项
+ * @returns 包含新增和删除项的对象
+ */
+export function getArrayDifference<T>(current: T[], previous: T[]): { added: T[], removed: T[] } {
+  const added = current.filter(item => !previous.includes(item));
+  const removed = previous.filter(item => !current.includes(item));
+  
+  return { added, removed };
+}