Files
leaudit-platform-frontend/app/routes/rules.new1.tsx
T
2025-04-09 01:34:14 +08:00

1540 lines
54 KiB
TypeScript

/**
* 评查点管理页面 - 创建或编辑评查点规则
*
* 功能概述:
* - 支持创建新的评查点规则或编辑现有规则
* - 评查点包含基本信息、抽取设置和评查设置三大部分
* - 支持使用三种抽取方式: 大模型(LLM)抽取、多模态(VLM)抽取和正则表达式抽取
* - 支持配置各种类型的评查规则,如存在性检查、内容一致性检查等
* - 支持保存评查规则和保存草稿功能
*
* 组件结构:
* - PageHeader: 页面标题和保存按钮
* - BasicInfo: 评查点的基本信息设置,如名称、编码、风险级别等
* - ExtractionSettings: 抽取设置,配置从文档中抽取哪些字段及抽取方式
* - ReviewSettings: 评查设置,基于抽取字段配置评查规则、评查结果消息等
* - ActionButtons: 页面底部的操作按钮,包括保存、保存草稿和返回
*
* 数据流转:
* 1. 页面加载时检查URL参数,确定是新建还是编辑模式
* 2. 编辑模式下从API获取评查点数据并填充表单
* 3. ExtractionSettings通过RuleContext将抽取的字段传递给ReviewSettings
* 4. 各组件的onChange回调收集表单变更并更新formData状态
* 5. 保存时将formData转换为API需要的格式并提交
*
* @author 中国烟草AI合同及卷宗审核系统开发团队
*/
import { type MetaFunction } from "@remix-run/node";
import { useState, useEffect } from "react";
import { BasicInfo } from "~/components/rules/new/BasicInfo";
import { ExtractionSettings } from "~/components/rules/new/ExtractionSettings";
import { ReviewSettings } from "~/components/rules/new/ReviewSettings";
import { RuleContext } from "~/contexts/RuleContext";
import { ActionButtons } from "~/components/rules/new/ActionButtons";
import { PageHeader } from "~/components/rules/new/PageHeader";
import rulesStyles from "~/styles/rules.css?url";
import { useNavigate, useLocation } from "@remix-run/react";
export const meta: MetaFunction = () => {
return [
{ title: "评查点管理 - 中国烟草AI合同及卷宗审核系统" },
{
name: "description",
content: "创建或修改评查点,设置规则参数"
}
];
};
export function links() {
return [{ rel: "stylesheet", href: rulesStyles }];
}
export const handle = {
breadcrumb: "评查点管理"
};
// 定义类型
/**
* 正则表达式字段定义
* @property field - 字段名称
* @property pattern - 正则表达式模式
*/
interface RegexField {
field: string;
pattern: string;
}
/**
* 多模态(VLM)字段定义,包含字段名和类型
* @property name - 字段名称
* @property type - 字段类型,如"default"、"table"等
*/
interface ApiVlmField {
name: string;
type: string;
}
/**
* 提示词设置
* @property type - 提示词类型,如"system"、"user"等
* @property template - 提示词模板内容
*/
interface PromptSetting {
type: string;
template: string;
}
/**
* 抽取配置,包含三种抽取方式
* @property llm - 大模型抽取配置
* @property vlm - 多模态抽取配置
* @property regex - 正则表达式抽取配置
*/
interface ExtactionConfigType {
llm: {
fields: string[];
prompt_setting: PromptSetting;
};
vlm: {
fields: (ApiVlmField | string)[];
prompt_setting: PromptSetting;
};
regex: {
fields: RegexField[];
};
}
/**
* API请求使用的抽取配置,字段可选
*/
interface ApiExtactionConfigType {
llm?: {
fields?: string[];
prompt_setting?: {
type?: string;
template?: string;
}
};
vlm?: {
fields?: ApiVlmField[];
prompt_setting?: {
type?: string;
template?: string;
}
};
regex?: {
fields?: RegexField[];
};
}
/**
* 规则配置类型,使用索引签名支持不同类型规则的不同配置项
*/
interface RuleConfigType {
[key: string]: unknown;
}
/**
* 评查规则定义
* @property id - 规则唯一标识
* @property type - 规则类型,如"exists"、"consistency"等
* @property config - 规则配置,根据规则类型不同而不同
*/
interface Rule {
id: string;
type: string;
config: RuleConfigType;
}
/**
* 评查配置
* @property logicType - 规则组合逻辑,如"and"、"or"、"custom"
* @property customLogic - 自定义逻辑表达式
* @property rules - 规则列表
*/
interface EvaluationConfigType {
logicType: string;
customLogic: string;
rules: Rule[];
}
/**
* 表单数据类型,包含评查点的所有配置项
*/
interface FormDataType {
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; // 所属评查组ID
extraction_config: ExtactionConfigType; // 抽取配置
evaluation_config: EvaluationConfigType; // 评查配置
pass_message: string; // 通过消息
fail_message: string; // 失败消息
suggestion_message: string; // 建议消息
suggestion_message_type: string; // 建议消息类型
post_action: string; // 评查后动作
action_config: string; // 动作配置
type: string; // 评查点类型
evaluation_point_groups_pid: number | null; // 评查点类型组ID
score: number; // 分数
scoreDisplay?: string; // 分数显示值
}
/**
* API返回的评查点数据
*/
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;
evaluation_point_groups_pid?: 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;
meta?: {
type: string;
pid?: number;
[key: string]: unknown;
};
score?: number;
scoreDisplay?: string;
}
/**
* API响应数据类型
*/
interface ApiResponse {
code?: number;
msg?: string;
data?: Array<Record<string, unknown>> | Record<string, unknown>;
[key: string]: unknown;
}
/**
* API提交数据格式
*/
interface ApiRuleData {
id?: number;
name: string;
version?: string;
description: string;
doc_type?: string[];
extraction_config: {
llm: {
fields: string[];
prompt_setting: PromptSetting;
};
vlm: {
fields: ApiVlmField[];
prompt_setting: PromptSetting;
};
regex: {
fields: RegexField[];
};
};
evaluation_config: {
logic?: string;
auto_check?: boolean;
output_items?: string[];
points?: Array<Record<string, unknown>>;
[key: string]: unknown;
};
}
/**
* 深拷贝工具函数
* 用于创建对象的深拷贝,避免引用类型导致的意外修改
* @param obj 要复制的对象
* @returns 深拷贝后的对象
*/
function deepClone<T>(obj: T): T {
if (obj === null || obj === undefined || typeof obj !== 'object') {
return obj;
}
try {
return JSON.parse(JSON.stringify(obj));
} catch (err) {
console.error('深拷贝对象失败:', err);
return obj;
}
}
export default function RuleNew() {
const navigate = useNavigate();
const location = useLocation();
// 保存从抽取设置中获取的字段列表,用于评查规则选择
const [extractionFields, setExtractionFields] = useState<string[]>([]);
// 标记是否为编辑模式(通过URL参数判断)
const [isEditMode, setIsEditMode] = useState<boolean>(false);
// 标记数据加载状态
const [isLoading, setIsLoading] = useState<boolean>(false);
// 保存评查点组数据,用于基本信息表单中选择
const [evaluationPointGroups, setEvaluationPointGroups] = useState<Array<{id: number, pid: number, code: string, name: string, is_enabled: boolean}>>([]);
// 表单数据,包含评查点的所有信息
const [formData, setFormData] = useState<FormDataType>({
// 基本信息字段
name: '',
code: '',
risk: 'medium',
is_enabled: true,
description: '',
references_laws: {
name: '',
articles: [],
content: ''
},
evaluation_point_groups_id: null,
type: '',
evaluation_point_groups_pid: null,
// 抽取设置
extraction_config: {
llm: {
fields: [],
prompt_setting: {
type: 'system',
template: ''
}
},
vlm: {
fields: [],
prompt_setting: {
type: 'system',
template: ''
}
},
regex: {
fields: [{ field: '', pattern: '' }]
}
},
// 评查设置
evaluation_config: {
logicType: 'and',
customLogic: '',
rules: []
},
// 评查结果消息
pass_message: '文档检查通过,符合规范要求。',
fail_message: '文档存在以下问题,请修改后重新提交。',
suggestion_message: '',
suggestion_message_type: 'warning',
// 评查后动作
post_action: 'none',
action_config: '',
// 分数
score: 0
});
/**
* 页面加载时初始化处理
* 1. 检查URL参数,判断是新建还是编辑模式
* 2. 编辑模式下获取评查点数据
* 3. 获取评查点组数据(用于表单选择项)
*/
useEffect(() => {
const searchParams = new URLSearchParams(location.search);
const id = searchParams.get('id');
if (id) {
setIsEditMode(true);
fetchEvaluationPoint(parseInt(id));
}
// 获取评查点组数据
fetchEvaluationPointGroups();
}, [location.search]);
/**
* 获取评查点组数据
* 从API获取所有评查点组,用于基本信息表单中选择
*/
const fetchEvaluationPointGroups = async () => {
try {
console.log("获取评查点组数据");
const response = await fetch("http://127.0.0.1:9000/admin/evaluation_point_groups", {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
if (!response.ok) {
const errorText = await response.text();
console.error(`API响应错误: ${response.status}`, errorText);
throw new Error(`获取评查点组数据失败: ${response.status} - ${errorText}`);
}
const responseData = await response.json();
console.log("评查点组数据原始响应:", responseData);
// 适配API响应格式
let groupsData: Array<{id: number, pid: number, code: string, name: string, is_enabled: boolean}> = [];
if (responseData && typeof responseData === 'object') {
if (responseData.code === 0 && responseData.data) {
// 新API格式
groupsData = Array.isArray(responseData.data) ? responseData.data : [responseData.data];
} else if (Array.isArray(responseData)) {
// 旧API格式
groupsData = responseData;
} else if (responseData.data && Array.isArray(responseData.data)) {
// 旧API格式
groupsData = responseData.data;
}
}
// 确保所有项都有必需的字段
groupsData = groupsData.filter(item =>
item && typeof item === 'object' &&
'id' in item &&
'pid' in item &&
'code' in item &&
'name' in item
);
console.log("处理后的评查点组数据:", groupsData);
console.log("根级评查点类型:", groupsData.filter(group => group.pid === 0));
setEvaluationPointGroups(groupsData);
// 如果表单数据已加载但类型未设置,尝试根据evaluation_point_groups_pid设置类型
if (formData.id && !formData.type && formData.evaluation_point_groups_pid) {
console.log("评查点组数据加载后更新类型,当前pid:", formData.evaluation_point_groups_pid);
const typeGroup = groupsData.find(group => group.id === formData.evaluation_point_groups_pid);
if (typeGroup) {
console.log("找到对应的类型组:", typeGroup);
setFormData(prevData => ({
...prevData,
type: typeGroup.code
}));
console.log("根据评查点类型ID更新类型为:", typeGroup.code);
} else if (formData.evaluation_point_groups_id) {
// 通过规则组查找类型
const selectedGroup = groupsData.find(group => group.id === formData.evaluation_point_groups_id);
if (selectedGroup && selectedGroup.pid !== 0) {
const parentTypeGroup = groupsData.find(group => group.id === selectedGroup.pid);
if (parentTypeGroup) {
console.log("通过规则组找到类型组:", parentTypeGroup);
setFormData(prevData => ({
...prevData,
type: parentTypeGroup.code,
evaluation_point_groups_pid: parentTypeGroup.id
}));
console.log("根据规则组更新类型为:", parentTypeGroup.code);
}
}
}
}
} catch (error) {
console.error('获取评查点组数据失败:', error);
// 显示错误提示但不影响应用继续使用
alert(`获取评查点组数据失败: ${error instanceof Error ? error.message : '未知错误'}\n将使用默认数据`);
}
};
/**
* 获取评查点数据
* 编辑模式下从API获取指定ID的评查点数据
* @param id 评查点ID
*/
const fetchEvaluationPoint = async (id: number) => {
setIsLoading(true);
try {
console.log(`获取评查点数据,ID: ${id}`);
const response = await fetch(`http://127.0.0.1:9000/admin/evaluation_points?id=eq.${id}`, {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
if (!response.ok) {
const errorText = await response.text();
console.error(`API响应错误: ${response.status}`, errorText);
throw new Error(`获取评查点数据失败: ${response.status} - ${errorText}`);
}
const responseData = await response.json();
console.log("API响应数据:", responseData);
// 新的API响应格式适配
if (responseData && typeof responseData === 'object') {
if (responseData.code === 0 && responseData.data) {
// 符合新的API响应格式
if (Array.isArray(responseData.data)) {
if (responseData.data.length > 0) {
console.log("处理数组数据的第一项");
processPointData(responseData.data[0]);
} else {
console.error("数据数组为空");
throw new Error(`未找到ID为${id}的评查点数据`);
}
} else if (typeof responseData.data === 'object') {
console.log("处理单个对象数据");
processPointData(responseData.data);
}
} else if (responseData.code !== 0) {
// API返回错误
throw new Error(responseData.msg || `获取数据失败,错误码: ${responseData.code}`);
} else if (Array.isArray(responseData)) {
// 处理旧API格式:数组形式
if (responseData.length > 0) {
console.log("数组格式响应,使用第一项");
processPointData(responseData[0]);
} else {
console.error("数组为空,未找到数据");
throw new Error(`未找到ID为${id}的评查点数据`);
}
} else if (responseData.data) {
// 处理旧API格式:包含data字段的对象
console.log("包装对象格式响应,使用data字段");
if (Array.isArray(responseData.data)) {
if (responseData.data.length > 0) {
processPointData(responseData.data[0]);
} else {
console.error("data数组为空");
throw new Error(`未找到ID为${id}的评查点数据`);
}
} else if (typeof responseData.data === 'object') {
processPointData(responseData.data);
} else {
console.error("data字段格式不正确");
throw new Error('数据格式不正确: data字段不是预期的格式');
}
} else if (responseData.id) {
// 处理旧API格式:直接返回的对象
console.log("单对象格式响应");
processPointData(responseData);
} else {
console.error("无法识别的对象格式", responseData);
throw new Error('未找到评查点数据或数据格式不正确');
}
} else {
console.error("响应格式无法识别", responseData);
throw new Error('未找到评查点数据或数据格式不正确');
}
} catch (error) {
console.error('获取评查点数据失败:', error);
alert(`获取评查点数据失败: ${error instanceof Error ? error.message : '未知错误'}`);
// 获取数据失败时返回上一页
navigate(-1);
} finally {
setIsLoading(false);
}
};
/**
* 处理获取到的评查点数据
* 将API返回的数据格式转换为表单数据格式
* @param pointData API返回的评查点数据
*/
const processPointData = (pointData: ApiPointData) => {
console.log("处理评查点数据:", pointData);
if (!pointData) {
console.error("评查点数据为空");
throw new Error("评查点数据为空");
}
try {
// 转换API数据为表单数据格式
const extractionConfig = pointData.extraction_config || {};
const evaluationConfig = pointData.evaluation_config || {};
console.log("提取配置:", extractionConfig);
console.log("评查配置:", evaluationConfig);
console.log("评查规则详细信息:", JSON.stringify(evaluationConfig.rules || [], null, 2));
// 提取字段列表,用于规则设置
const extractedFields: string[] = [];
// 处理LLM字段
if (extractionConfig.llm && extractionConfig.llm.fields) {
extractedFields.push(...extractionConfig.llm.fields);
}
// 处理VLM字段
if (extractionConfig.vlm && extractionConfig.vlm.fields) {
extractedFields.push(...(extractionConfig.vlm.fields || []).map((field) => {
if (typeof field === 'object' && field.name) {
return field.type && field.type !== 'default' ? `${field.name}_${field.type}` : field.name;
}
return '';
}).filter(Boolean));
}
// 处理正则字段
if (extractionConfig.regex && extractionConfig.regex.fields) {
extractedFields.push(...(extractionConfig.regex.fields || []).map((field) => field.field || '').filter(Boolean));
}
console.log("提取的字段:", extractedFields);
setExtractionFields(extractedFields);
// 提取评查点类型ID
let pointGroupPid: number | null = null;
if (pointData.evaluation_point_groups_pid !== undefined && pointData.evaluation_point_groups_pid !== null) {
// 直接使用字段值
pointGroupPid = typeof pointData.evaluation_point_groups_pid === 'number'
? pointData.evaluation_point_groups_pid
: null;
console.log("从evaluation_point_groups_pid获取类型ID:", pointGroupPid);
} else if (pointData.meta && typeof pointData.meta === 'object' && pointData.meta.pid !== undefined) {
// 从meta中提取
pointGroupPid = typeof pointData.meta.pid === 'number'
? pointData.meta.pid
: null;
console.log("从meta.pid获取类型ID:", pointGroupPid);
}
console.log("最终确定的类型ID:", pointGroupPid);
// 处理分数
let pointScore = 0;
if (pointData.score !== undefined && pointData.score !== null) {
pointScore = typeof pointData.score === 'number' ? pointData.score : 0;
console.log("从score字段获取分数:", pointScore);
} else if (pointData.meta && typeof pointData.meta === 'object' && pointData.meta.score !== undefined) {
pointScore = typeof pointData.meta.score === 'number' ? pointData.meta.score : 0;
console.log("从meta.score获取分数:", pointScore);
}
// 将API数据格式转换为内部使用的格式
setFormData({
id: pointData.id,
name: pointData.name || '',
code: pointData.code || '',
risk: pointData.risk || 'medium',
is_enabled: pointData.is_enabled !== undefined ? pointData.is_enabled : true,
description: pointData.description || '',
references_laws: pointData.references_laws || {
name: '',
articles: [],
content: ''
},
evaluation_point_groups_id: pointData.evaluation_point_groups_id || null,
evaluation_point_groups_pid: pointGroupPid,
type: pointData.type || (pointData.meta && pointData.meta.type ? pointData.meta.type : ''),
// 将API数据格式转换为内部使用的格式
extraction_config: {
llm: {
fields: extractionConfig.llm?.fields || [],
prompt_setting: {
type: extractionConfig.llm?.prompt_setting?.type || 'system',
template: extractionConfig.llm?.prompt_setting?.template || ''
}
},
vlm: {
fields: extractionConfig.vlm?.fields?.map(field => {
if (typeof field === 'string') {
return { name: field, type: 'default' };
}
return field;
}) || [],
prompt_setting: {
type: extractionConfig.vlm?.prompt_setting?.type || 'system',
template: extractionConfig.vlm?.prompt_setting?.template || ''
}
},
regex: {
fields: (extractionConfig.regex?.fields || []).map((field) => ({
field: field.field || '',
pattern: field.pattern || ''
}))
}
},
// 将API评查配置转换为内部使用的格式
evaluation_config: {
logicType: evaluationConfig.logicType || 'and',
customLogic: evaluationConfig.customLogic || '',
rules: (evaluationConfig.rules || []).map(rule => {
// 规则ID处理
if (!rule.id) {
rule.id = `rule_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
}
// 根据规则类型调整config字段
if (rule.config) {
switch (rule.type) {
case 'exists':
if (rule.config.fields) {
// 确保config中有fields字段
console.log(`[调试] API数据转UI - exists规则 ${rule.id} 字段: ${JSON.stringify(rule.config.fields)}`);
} else if (rule.config.selectedFields) {
// 兼容旧字段名
rule.config.fields = rule.config.selectedFields;
delete rule.config.selectedFields;
console.log(`[调试] API数据转UI - exists规则 ${rule.id} 从selectedFields映射到fields`);
}
// 确保config中有logic字段
if (rule.config.existsLogic && !rule.config.logic) {
rule.config.logic = rule.config.existsLogic;
delete rule.config.existsLogic;
console.log(`[调试] API数据转UI - exists规则 ${rule.id} 从existsLogic映射到logic`);
}
break;
case 'consistency':
case 'logic':
// 将logicRelation转换为标准的logic
if (rule.config.logicRelation && !rule.config.logic) {
rule.config.logic = rule.config.logicRelation;
delete rule.config.logicRelation;
console.log(`[调试] API数据转UI - ${rule.type}规则 ${rule.id} 从logicRelation映射到logic`);
}
break;
}
}
return rule;
})
},
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 || '',
score: typeof pointData.score === 'number' ? pointData.score : 0
});
console.log("已成功解析并加载评查点数据");
} catch (error) {
console.error("处理评查点数据时出错:", error);
throw error;
}
};
/**
* 更新抽取字段列表
* 在抽取设置和评查设置之间共享字段列表信息
* @param fields 更新后的字段列表
*/
const updateExtractionFields = (fields: string[]) => {
setExtractionFields(fields);
};
/**
* 处理BasicInfo组件数据变更
* 更新基本信息相关的表单数据
* @param data 基本信息组件传回的数据
*/
const handleBasicInfoChange = (data: Record<string, unknown>) => {
setFormData(prevData => ({
...prevData,
...data
}));
};
/**
* 处理ExtractionSettings组件数据变更
* 更新抽取设置相关的表单数据
* @param data 抽取设置组件传回的数据
*/
const handleExtractionSettingsChange = (data: Record<string, unknown>) => {
console.log("抽取设置更新:", data);
setFormData(prevData => {
// 深拷贝以避免不可预期的状态更新
const updatedExtractionConfig = { ...prevData.extraction_config };
// 根据不同类型的数据进行处理
// 处理regexFields数据 - 保留正则表达式配置
if (data.regexFields) {
const regexFields = data.regexFields as Array<{ field: string; pattern: string }>;
// 检查是否有 activeFieldId 标记,表示正在编辑中
const activeFieldId = data.activeFieldId as string;
if (activeFieldId) {
console.log("检测到正在编辑的正则字段,保留所有字段");
updatedExtractionConfig.regex.fields = regexFields;
} else {
// 正常更新模式,过滤掉空字段名的项
updatedExtractionConfig.regex.fields = regexFields
.filter(field => field.field && field.field.trim() !== '')
.map(field => ({
field: field.field,
pattern: field.pattern || ''
}));
}
}
// 处理字段数据 - 保留提取的字段名称
if (data.fields) {
const extractionFields = data.fields as { llm?: string[], vlm?: string[] };
const activeFieldId = data.activeFieldId as string;
if (activeFieldId) {
// 检测到正在编辑的大模型或多模态字段,保留所有字段
console.log("检测到正在编辑的大模型或多模态字段,保留所有字段");
if (extractionFields.llm) {
updatedExtractionConfig.llm.fields = extractionFields.llm;
}
if (extractionFields.vlm) {
// 保存字符串形式的字段,在提交API时再进行处理
updatedExtractionConfig.vlm.fields = extractionFields.vlm;
}
} else {
// 正常更新模式,过滤掉空字段
if (extractionFields.llm) {
updatedExtractionConfig.llm.fields = extractionFields.llm.filter(field => field && field.trim() !== '');
}
if (extractionFields.vlm) {
// 保存字符串形式的字段,在提交API时再进行处理
updatedExtractionConfig.vlm.fields = extractionFields.vlm.filter(field => field && field.trim() !== '');
}
}
}
// 处理提示词设置
if (data.promptSettings) {
const promptSettings = data.promptSettings as Record<string, { type: string; content: string; template: string }>;
// 更新大模型抽取提示词设置
if (promptSettings.llm) {
updatedExtractionConfig.llm.prompt_setting = {
type: promptSettings.llm.type as string || 'system',
template: promptSettings.llm.content as string || ''
};
}
// 更新多模态抽取提示词设置
if (promptSettings.vlm) {
updatedExtractionConfig.vlm.prompt_setting = {
type: promptSettings.vlm.type as string || 'system',
template: promptSettings.vlm.content as string || ''
};
}
}
// 单独处理promptType,确保提示词设置类型正确
if (data.promptType) {
const promptType = data.promptType as Record<string, string>;
if (promptType.llm) {
updatedExtractionConfig.llm.prompt_setting.type = promptType.llm;
}
if (promptType.vlm) {
updatedExtractionConfig.vlm.prompt_setting.type = promptType.vlm;
}
}
// 单独处理promptContent,确保提示词内容保存正确
if (data.promptContent) {
const promptContent = data.promptContent as Record<string, string>;
if (promptContent.llm) {
updatedExtractionConfig.llm.prompt_setting.template = promptContent.llm;
}
if (promptContent.vlm) {
updatedExtractionConfig.vlm.prompt_setting.template = promptContent.vlm;
}
}
// 更新或调试其他字段数据
console.log("更新抽取配置:", {
pendingUpdate: data.pendingUpdate,
fieldsCount: extractionFields ? {
llm: extractionFields.llm?.length || 0,
vlm: extractionFields.vlm?.length || 0
} : 'unchanged',
regexFieldsCount: data.regexFields ? (data.regexFields as any[]).length : 0,
activeFieldId: data.activeFieldId,
promptTypeChanged: !!data.promptType,
promptContentChanged: !!data.promptContent,
promptSettingsChanged: !!data.promptSettings
});
// 生成所有字段列表,保存到状态中供评查设置使用
if (data.allFields) {
console.log("更新字段列表:", data.allFields);
// 将新字段列表保存到状态中
updateExtractionFields(data.allFields as string[]);
}
// 返回更新后的表单数据
return {
...prevData,
extraction_config: updatedExtractionConfig
};
});
};
/**
* 处理ReviewSettings组件数据变更
* 更新评查设置相关的表单数据
* @param data 评查设置组件传回的数据
*/
const handleReviewSettingsChange = (data: Record<string, unknown>) => {
setFormData(prevData => {
const updatedData = { ...prevData };
// 记录所有收到的数据
console.log("评查设置更新数据:", data);
// 更新规则 - 只有当明确提供了rules数据时才更新
if (data.rules) {
// 验证并修复规则数据
const validatedRules = validateAndFixRules(data.rules as Rule[]);
console.log("规则数据验证后:", validatedRules);
updatedData.evaluation_config.rules = validatedRules;
}
// 更新组合逻辑
if (data.combinationLogic !== undefined) {
updatedData.evaluation_config.logicType = data.combinationLogic as string;
}
// 更新自定义逻辑
if (data.customLogic !== undefined) {
updatedData.evaluation_config.customLogic = data.customLogic as string;
}
// 更新通过/不通过/建议消息
if (data.pass_message !== undefined) {
updatedData.pass_message = data.pass_message as string;
}
if (data.fail_message !== undefined) {
updatedData.fail_message = data.fail_message as string;
}
if (data.suggestion_message !== undefined) {
updatedData.suggestion_message = data.suggestion_message as string;
}
if (data.suggestion_message_type !== undefined) {
updatedData.suggestion_message_type = data.suggestion_message_type as string;
}
// 更新评查后动作
if (data.post_action !== undefined) {
updatedData.post_action = data.post_action as string;
}
if (data.action_config !== undefined) {
updatedData.action_config = data.action_config as string;
}
// 更新分数
if (data.score !== undefined) {
const scoreValue = parseFloat(data.score as string);
updatedData.score = isNaN(scoreValue) ? 0 : scoreValue;
}
// 更新分数显示值
if (data.scoreDisplay !== undefined) {
updatedData.scoreDisplay = data.scoreDisplay as string;
}
return updatedData;
});
};
/**
* 检查并修复评查规则数据
* 确保数据的完整性和有效性
* @param rules 原始规则数据
* @returns 验证和修复后的规则数据
*/
const validateAndFixRules = (rules: Rule[] | undefined): Rule[] => {
if (!rules || !Array.isArray(rules)) {
console.log("规则数据无效或为空,返回空数组");
return [];
}
// 过滤无效规则,确保每个规则都有type字段
const validRules = rules.filter(rule => {
if (!rule || typeof rule !== 'object') {
console.log("发现无效规则对象:", rule);
return false;
}
if (!rule.type || typeof rule.type !== 'string' || rule.type.trim() === '') {
console.log("发现无效规则类型:", rule);
return false;
}
if (!rule.id || typeof rule.id !== 'string') {
console.log("发现缺少ID的规则:", rule);
// 为缺少ID的规则自动生成ID
rule.id = `rule_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
}
// 确保config存在
if (!rule.config || typeof rule.config !== 'object') {
console.log("规则缺少配置对象,自动创建:", rule);
rule.config = {};
}
return true;
});
console.log(`规则验证结果: 输入${rules.length}条,有效${validRules.length}`);
return validRules;
};
/**
* 格式化数据,准备提交到接口
* 将内部表单数据转换为API期望的格式
* @param data 表单数据
* @returns 格式化后的API数据
*/
const formatDataForApi = (data: FormDataType): ApiRuleData => {
console.log('格式化数据用于API提交:', data);
// 基本信息处理
const formattedData: ApiRuleData = {
name: data.name || '',
version: '', // 从FormDataType中获取或使用默认值
description: data.description || '',
doc_type: [], // 从FormDataType中获取或使用默认值
extraction_config: {
llm: {
fields: data.extraction_config.llm.fields || [],
prompt_setting: data.extraction_config.llm.prompt_setting || {
type: 'system',
template: ''
}
},
vlm: {
fields: Array.isArray(data.extraction_config.vlm.fields)
? data.extraction_config.vlm.fields.map((field: string | ApiVlmField) => {
// 如果是字符串,处理为对象
if (typeof field === 'string') {
if (field.includes('_')) {
const [name, type] = field.split('_');
return { name, type: type || 'default' };
}
return { name: field, type: 'default' };
}
// 如果已经是对象,直接返回
return field;
})
: [],
prompt_setting: data.extraction_config.vlm.prompt_setting || {
type: 'system',
template: ''
}
},
regex: {
fields: data.extraction_config.regex.fields.filter(f => f.field && f.field.trim() !== '').map(f => ({
field: f.field,
pattern: f.pattern || ''
}))
}
},
evaluation_config: {
// 默认值或从当前数据中转换
logic: 'and', // 默认值
auto_check: true, // 默认值
output_items: [], // 默认值
points: [] // 默认值
}
};
console.log('API数据格式化完成:', formattedData);
return formattedData;
};
/**
* 确定使用的HTTP方法和URL
* 根据是否为编辑模式返回不同的HTTP方法和端点
* @param id 评查点ID,编辑模式下存在
* @returns HTTP方法和端点
*/
const getEndpointAndMethod = (id?: number) => {
let method = 'POST';
let endpoint = 'http://127.0.0.1:9000/admin/evaluation_points';
// 如果是编辑模式,使用PATCH更新现有记录
if (id) {
method = 'PATCH';
endpoint = `http://127.0.0.1:9000/admin/evaluation_points?id=eq.${id}`;
}
return { method, endpoint };
};
/**
* 保存评查点
* 验证数据并提交到API
*/
const handleSave = async () => {
try {
setIsLoading(true);
// 记录当前评查规则状态
console.log("保存前评查规则状态:", formData.evaluation_config.rules);
// 基本验证
if (!formData.name || !formData.code) {
alert("请填写评查点名称和编码,这些是必填项");
setIsLoading(false);
return;
}
// 检查评查点类型
if (!formData.type) {
alert("请选择评查点类型");
setIsLoading(false);
return;
}
// 检查所属规则组
if (!formData.evaluation_point_groups_id) {
alert("请选择所属规则组");
setIsLoading(false);
return;
}
// 检查评查规则 - 只在新增模式下检查规则是否为空
if (!isEditMode &&
(!formData.evaluation_config.rules ||
formData.evaluation_config.rules.length === 0 ||
!formData.evaluation_config.rules.some(rule => rule.type && rule.type.trim() !== ''))) {
console.log("规则验证失败,当前规则:", formData.evaluation_config.rules);
console.log("规则数量:", formData.evaluation_config.rules?.length || 0);
console.log("规则有效性:", formData.evaluation_config.rules?.some(rule => rule.type && rule.type.trim() !== ''));
alert("请至少添加一条有效的评查规则");
setIsLoading(false);
return;
}
// 编辑模式下,只有当规则数组不为空时才验证规则有效性
if (isEditMode &&
formData.evaluation_config.rules &&
formData.evaluation_config.rules.length > 0 &&
!formData.evaluation_config.rules.some(rule => rule.type && rule.type.trim() !== '')) {
console.log("编辑模式下规则无效,当前规则:", formData.evaluation_config.rules);
console.log("编辑模式-规则数量:", formData.evaluation_config.rules.length);
console.log("编辑模式-规则详情:", JSON.stringify(formData.evaluation_config.rules, null, 2));
console.log("编辑模式-规则有效性:", formData.evaluation_config.rules.some(rule => rule.type && rule.type.trim() !== ''));
alert("请至少添加一条有效的评查规则或清空规则列表");
setIsLoading(false);
return;
}
const evaluationPointData = formatDataForApi(formData);
console.log("保存数据:", evaluationPointData);
const { method, endpoint } = getEndpointAndMethod(formData.id);
console.log(`发送${method}请求到`, endpoint);
// 发送数据到API
const response = await fetch(endpoint, {
method: method,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(evaluationPointData)
});
// 输出完整响应信息
console.log("响应状态:", response.status, response.statusText);
if (!response.ok) {
const errorText = await response.text();
console.error(`API响应错误: ${response.status}`, errorText);
try {
// 尝试解析错误响应为JSON
const errorJson = JSON.parse(errorText);
console.error("解析的错误JSON:", errorJson);
throw new Error(`保存失败: ${errorJson.msg || response.statusText}`);
} catch (parseError) {
// 如果无法解析为JSON,使用原始文本
throw new Error(`保存失败: ${response.status} - ${errorText}`);
}
}
const contentType = response.headers.get('content-type');
console.log("响应Content-Type:", contentType);
// 检查是否是JSON响应
if (contentType && contentType.includes('application/json')) {
const responseData = await response.json();
console.log("API响应数据:", responseData);
// 处理响应
await handleApiResponse(responseData, isEditMode);
} else {
// 非JSON响应
const text = await response.text();
console.log("非JSON响应:", text);
alert("操作已完成!");
navigate('/rules');
}
} catch (error) {
console.error('保存失败:', error);
alert(`保存失败: ${error instanceof Error ? error.message : '未知错误'}`);
} finally {
setIsLoading(false);
}
};
/**
* 保存为草稿
* 验证基本数据并提交到API,与保存正式版相比校验更宽松
*/
const handleSaveDraft = async () => {
try {
setIsLoading(true);
// 基本验证
if (!formData.name || !formData.code) {
alert("请填写评查点名称和编码,这些是必填项");
setIsLoading(false);
return;
}
// 检查评查点类型
if (!formData.type) {
alert("请选择评查点类型");
setIsLoading(false);
return;
}
// 检查所属规则组
if (!formData.evaluation_point_groups_id) {
alert("请选择所属规则组");
setIsLoading(false);
return;
}
// 编辑模式下不检查评查规则是否为空
// 草稿模式下规则可以为空
const draftData = formatDataForApi(formData);
console.log("保存草稿数据:", draftData);
const { method, endpoint } = getEndpointAndMethod(formData.id);
console.log(`发送${method}请求到`, endpoint);
// 发送数据到API
const response = await fetch(endpoint, {
method: method,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(draftData)
});
// 输出完整响应信息
console.log("响应状态:", response.status, response.statusText);
if (!response.ok) {
const errorText = await response.text();
console.error(`API响应错误: ${response.status}`, errorText);
try {
// 尝试解析错误响应为JSON
const errorJson = JSON.parse(errorText);
console.error("解析的错误JSON:", errorJson);
throw new Error(`保存失败: ${errorJson.msg || response.statusText}`);
} catch (parseError) {
// 如果无法解析为JSON,使用原始文本
throw new Error(`保存失败: ${response.status} - ${errorText}`);
}
}
const contentType = response.headers.get('content-type');
console.log("响应Content-Type:", contentType);
// 检查是否是JSON响应
if (contentType && contentType.includes('application/json')) {
const responseData = await response.json();
console.log("API响应数据:", responseData);
// 处理响应
await handleApiResponse(responseData, isEditMode, true);
} else {
// 非JSON响应
const text = await response.text();
console.log("非JSON响应:", text);
alert("草稿已保存!");
navigate('/rules');
}
} catch (error) {
console.error('保存草稿失败:', error);
alert(`保存草稿失败: ${error instanceof Error ? error.message : '未知错误'}`);
} finally {
setIsLoading(false);
}
};
/**
* 处理API响应
* 根据API响应结果进行页面跳转等后续操作
* @param responseData API响应数据
* @param isEditMode 是否为编辑模式
* @param isDraft 是否为草稿模式
*/
const handleApiResponse = async (
responseData:
| ApiResponse
| Array<{ id: number; [key: string]: unknown }>,
isEditMode: boolean,
isDraft: boolean = false
) => {
// 适配新的API响应格式
if (responseData && typeof responseData === 'object') {
// 符合新的API规范
if ('code' in responseData && responseData.code === 0) {
console.log(`${isDraft ? '草稿' : ''}保存成功 (新API格式):`, responseData.data);
alert(`${isDraft ? '草稿' : ''}保存成功!`);
// 根据操作类型重定向
if (isEditMode) {
// 编辑模式,保留在当前编辑页面
navigate(`/rules/new?id=${formData.id}`);
} else {
// 创建模式,跳转到新创建数据的编辑页面
let newId: number | undefined;
if (responseData.data && Array.isArray(responseData.data) && responseData.data.length > 0) {
newId = responseData.data[0].id as number;
} else if (responseData.data && typeof responseData.data === 'object' && 'id' in responseData.data) {
newId = responseData.data.id as number;
}
if (newId) {
navigate(`/rules/new?id=${newId}`);
} else {
// 无法获取ID,返回列表页
navigate('/rules');
}
}
return;
} else if ('code' in responseData && responseData.code !== 0) {
// API返回错误
console.warn("API返回错误:", responseData.msg);
throw new Error(responseData.msg as string || "操作失败");
}
}
// 兼容处理旧的响应格式
if (Array.isArray(responseData)) {
if (responseData.length > 0) {
console.log(`${isDraft ? '草稿' : ''}保存成功 (数组响应):`, responseData[0]);
alert(`${isDraft ? '草稿' : ''}保存成功!`);
// 如果是创建,跳转到编辑页面
if (!isEditMode && responseData[0].id) {
navigate(`/rules/new?id=${responseData[0].id}`);
} else {
navigate('/rules');
}
} else {
console.warn("响应数组为空");
alert("操作已完成,但服务器未返回数据");
navigate('/rules');
}
} else if (responseData && typeof responseData === 'object') {
if ('data' in responseData && responseData.data) {
console.log(`${isDraft ? '草稿' : ''}保存成功 (带data字段):`, responseData.data);
alert(`${isDraft ? '草稿' : ''}保存成功!`);
let newId: number | undefined;
if (Array.isArray(responseData.data) && responseData.data.length > 0 && 'id' in responseData.data[0]) {
newId = responseData.data[0].id as number;
} else if (typeof responseData.data === 'object' && 'id' in responseData.data) {
newId = responseData.data.id as number;
}
if (!isEditMode && newId) {
navigate(`/rules/new?id=${newId}`);
} else {
navigate('/rules');
}
} else if ('id' in responseData && responseData.id) {
console.log(`${isDraft ? '草稿' : ''}保存成功 (直接对象):`, responseData);
alert(`${isDraft ? '草稿' : ''}保存成功!`);
if (!isEditMode) {
navigate(`/rules/new?id=${responseData.id as number}`);
} else {
navigate('/rules');
}
} else {
console.warn("响应对象格式不符合预期", responseData);
alert("操作已完成,但返回的数据格式不符合预期");
navigate('/rules');
}
} else {
console.warn("响应不是数组或对象", responseData);
alert("操作已完成,但返回的数据格式不符合预期");
navigate('/rules');
}
};
/**
* 当评查点组数据和表单数据都加载完成后,确保类型信息被正确设置
*/
useEffect(() => {
// 仅在编辑模式下,且表单数据已加载,评查点组数据也已加载的情况下执行
if (
isEditMode &&
formData.id &&
evaluationPointGroups.length > 0 &&
(!formData.type || formData.type === '')
) {
console.log("检测到编辑模式下类型未设置,尝试自动设置类型");
// 首先尝试通过evaluation_point_groups_pid设置类型
if (formData.evaluation_point_groups_pid) {
const typeGroup = evaluationPointGroups.find(
group => group.id === formData.evaluation_point_groups_pid
);
if (typeGroup) {
console.log("通过评查点类型ID找到类型组:", typeGroup);
setFormData(prevData => ({
...prevData,
type: typeGroup.code
}));
console.log("自动设置类型为:", typeGroup.code);
return;
}
}
// 如果无法通过evaluation_point_groups_pid设置,尝试通过evaluation_point_groups_id设置
if (formData.evaluation_point_groups_id) {
const ruleGroup = evaluationPointGroups.find(
group => group.id === formData.evaluation_point_groups_id
);
if (ruleGroup && ruleGroup.pid && ruleGroup.pid !== 0) {
const parentGroup = evaluationPointGroups.find(
group => group.id === ruleGroup.pid
);
if (parentGroup) {
console.log("通过规则组找到父级类型组:", parentGroup);
setFormData(prevData => ({
...prevData,
type: parentGroup.code,
evaluation_point_groups_pid: parentGroup.id
}));
console.log("自动设置类型为:", parentGroup.code);
}
}
}
}
}, [isEditMode, formData.id, formData.type, formData.evaluation_point_groups_id, formData.evaluation_point_groups_pid, evaluationPointGroups]);
// 渲染页面内容
return (
<div className="container">
{/* 页面标题和右上角保存按钮 */}
<PageHeader
title={isEditMode ? "编辑评查点" : "新增评查点"}
onSave={handleSave}
/>
{/* 加载状态显示 */}
{isLoading ? (
<div className="flex justify-center items-center p-12">
<div className="loading-spinner"></div>
<span className="ml-3">...</span>
</div>
) : (
<>
{/* 评查点基本信息设置 */}
<div className="mb-8">
<BasicInfo
onChange={handleBasicInfoChange}
initialData={formData}
evaluationPointGroups={evaluationPointGroups}
/>
</div>
{/* 抽取设置 - 配置从文档中提取的字段 */}
<div className="mb-8">
<RuleContext.Provider value={{ extractionFields, updateFields: updateExtractionFields }}>
<ExtractionSettings
onChange={handleExtractionSettingsChange}
initialData={{
llm: formData.extraction_config.llm,
vlm: formData.extraction_config.vlm,
regex: formData.extraction_config.regex
}}
/>
</RuleContext.Provider>
</div>
{/* 评查设置 - 配置评查规则、消息等 */}
<div className="mb-8">
<RuleContext.Provider value={{ extractionFields, updateFields: updateExtractionFields }}>
<ReviewSettings
key={`review-settings-${isEditMode ? formData.id : 'new'}`}
onChange={handleReviewSettingsChange}
initialData={{
rules: deepClone(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,
score: formData.score,
scoreDisplay: formData.scoreDisplay
}}
/>
</RuleContext.Provider>
</div>
{/* 底部操作按钮区域 */}
<ActionButtons
onSave={handleSave}
onSaveDraft={handleSaveDraft}
isEditMode={isEditMode}
/>
</>
)}
</div>
);
}