TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
awen
2025-04-03 16:25:55 +08:00
parent de5ff38c60
commit d84df0e8a3
6 changed files with 808 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/rules/new/ActionButtons.tsx
+4 -3
View File
@@ -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
+129 -92
View File
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
interface BasicInfoProps {
onChange?: (data: Record<string, unknown>) => void;
initialData?: Record<string, any>;
}
// 定义表单数据类型
@@ -20,7 +21,7 @@ interface FormDataType {
type: string;
}
export function BasicInfo({ onChange }: BasicInfoProps) {
export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
const [formData, setFormData] = useState<FormDataType>({
name: '',
code: '',
@@ -39,6 +40,42 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
const [isDescExpanded, setIsDescExpanded] = useState(false);
const [lawArticlesInput, setLawArticlesInput] = useState('');
// 当initialData变化时更新表单数据
useEffect(() => {
if (initialData) {
const newFormData = {
name: initialData.name || '',
code: initialData.code || '',
risk: initialData.risk || 'medium',
is_enabled: initialData.is_enabled !== undefined ? initialData.is_enabled : true,
description: initialData.description || '',
references_laws: initialData.references_laws || {
name: '',
articles: [],
content: ''
},
evaluation_point_groups_id: initialData.evaluation_point_groups_id || null,
type: initialData.type || ''
};
setFormData(newFormData);
// 更新法律条款输入框
if (initialData.references_laws && Array.isArray(initialData.references_laws.articles)) {
setLawArticlesInput(initialData.references_laws.articles.join(','));
}
// 如果有描述或法律依据，默认展开详细信息
if (initialData.description ||
(initialData.references_laws &&
(initialData.references_laws.name ||
initialData.references_laws.content ||
(initialData.references_laws.articles && initialData.references_laws.articles.length > 0)))) {
setIsDescExpanded(true);
}
}
}, [initialData]);
const handleToggleDescription = () => {
setIsDescExpanded(!isDescExpanded);
};
@@ -210,102 +247,102 @@ export function BasicInfo({ onChange }: BasicInfoProps) {
</select>
<div className="form-tip">创建后是否立即启用此评查点</div>
</div>
</div>
<div className="mt-8">
<div
className={`flex justify-between items-center cursor-pointer ${isDescExpanded ? 'expanded' : ''}`}
onClick={handleToggleDescription}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleToggleDescription();
}
}}
tabIndex={0}
role="button"
>
<label className="form-label mb-0" htmlFor="description-section">评查点描述与法律依据</label>
<i className={`ri-arrow-${isDescExpanded ? 'up' : 'down'}-s-line text-lg expand-icon`}></i>
</div>
<div className="col-span-1 md:col-span-3">
<div
className={`flex justify-between items-center cursor-pointer ${isDescExpanded ? 'expanded' : ''}`}
onClick={handleToggleDescription}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleToggleDescription();
}
}}
tabIndex={0}
role="button"
>
<label className="form-label mb-0" htmlFor="description-section">评查点描述与法律依据</label>
<i className="ri-arrow-down-s-line text-lg expand-icon"></i>
<div className={`mt-2 ${isDescExpanded ? '' : 'hidden'}`} id="description-section">
<div className="mb-4">
<textarea
id="rule-description"
className="form-textarea"
placeholder="请输入评查点的详细描述"
style={{ minHeight: '80px' }}
value={formData.description}
onChange={handleInputChange}
></textarea>
<div className="form-tip">详细描述有助于其他用户了解该评查点的用途</div>
</div>
<div className={`mt-2 ${isDescExpanded ? '' : 'hidden'}`} id="description-section">
{/* 引用法典输入区域 */}
<div className="mb-4">
<label className="form-label" htmlFor="law-section">引用法典</label>
<div className="mb-3" id="law-section">
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-name">法典名称</label>
<input
type="text"
className="form-input"
placeholder="例如：《中华人民共和国民法典》"
id="law-name"
value={formData.references_laws.name}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-articles">条款号 <span className="text-xs text-gray-400">(多个条款请用逗号分隔)</span></label>
<input
type="text"
className="form-input"
placeholder="例如：第五百八十五条,第五百八十六条"
id="law-articles"
value={lawArticlesInput}
onChange={(e) => handleLawArticlesChange(e.target.value)}
/>
<div className="form-tip">多个条款用逗号分隔，将自动转换为数组格式</div>
</div>
<div className="mb-4">
<textarea
id="rule-description"
className="form-textarea"
placeholder="请输入评查点的详细描述"
style={{ minHeight: '80px' }}
value={formData.description}
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-content">条款内容</label>
<textarea
className="form-textarea"
style={{ minHeight: '60px' }}
placeholder="例如：当事人应当按照约定全面履行自己的义务。"
id="law-content"
value={formData.references_laws.content}
onChange={handleInputChange}
></textarea>
<div className="form-tip">详细描述有助于其他用户了解该评查点的用途</div>
</div>
{/* 引用法典输入区域 */}
<div className="border-t border-gray-100 pt-4 mb-4">
<label className="form-label" htmlFor="law-section">引用法典</label>
<div className="mb-3" id="law-section">
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-name">法典名称</label>
<input
type="text"
className="form-input"
placeholder="例如：《中华人民共和国民法典》"
id="law-name"
value={formData.references_laws.name}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-articles">条款号 <span className="text-xs text-gray-400">(多个条款请用逗号分隔)</span></label>
<input
type="text"
className="form-input"
placeholder="例如：第五百八十五条,第五百八十六条"
id="law-articles"
value={lawArticlesInput}
onChange={(e) => handleLawArticlesChange(e.target.value)}
/>
<div className="form-tip">多个条款用逗号分隔，将自动转换为数组格式</div>
</div>
<div className="mb-3">
<label className="text-sm text-gray-600 mb-1 block" htmlFor="law-content">条款内容</label>
<textarea
className="form-textarea"
style={{ minHeight: '60px' }}
placeholder="例如：当事人应当按照约定全面履行自己的义务。"
id="law-content"
value={formData.references_laws.content}
onChange={handleInputChange}
></textarea>
</div>
<div className="p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700 mb-2">
<i className="ri-information-line mr-1"></i> 引用的法律条文将在评查结果中显示，帮助用户理解评查规则的法律依据
</div>
{/* 预览区域 */}
<div className="p-3 border border-gray-200 rounded-md bg-gray-50 mt-3">
<div className="text-sm font-medium mb-2">预览效果</div>
<div className="law-reference">
<div className="law-reference-title" id="preview-law-name">
{formData.references_laws.name || '《中华人民共和国民法典》'}
</div>
<div className="law-reference-articles" id="preview-law-articles">
{formData.references_laws.articles.length > 0 ?
formData.references_laws.articles.map((article, index) => (
<span key={index} className="law-article">{article}</span>
)) : (
<>
<span className="law-article">第五百八十五条</span>
<span className="law-article">第五百八十六条</span>
</>
)}
</div>
<div className="law-reference-content" id="preview-law-content">
{formData.references_laws.content || '当事人应当按照约定全面履行自己的义务。'}
</div>
<div className="p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700 mb-2">
<i className="ri-information-line mr-1"></i> 引用的法律条文将在评查结果中显示，帮助用户理解评查规则的法律依据
</div>
{/* 预览区域 */}
<div className="mt-3">
<div className="text-sm font-medium mb-2">预览效果</div>
<div className="law-reference">
<div className="law-reference-title" id="preview-law-name">
{formData.references_laws.name || '《中华人民共和国民法典》'}
</div>
<div className="law-reference-articles" id="preview-law-articles">
{formData.references_laws.articles.length > 0 ?
formData.references_laws.articles.map((article, index) => (
<span key={index} className="law-article">{article}</span>
)) : (
<>
<span className="law-article">第五百八十五条</span>
<span className="law-article">第五百八十六条</span>
</>
)}
</div>
<div className="law-reference-content" id="preview-law-content">
{formData.references_laws.content || '当事人应当按照约定全面履行自己的义务。'}
</div>
</div>
</div>
app/components/rules/new/ExtractionSettings.tsx
+83 -16
View File
@@ -1,12 +1,8 @@
import { useState, KeyboardEvent, FormEvent, useContext, useEffect } from 'react';
import { RuleContext } from './ReviewSettings';
interface ExtractionSettingsProps {
onChange?: (data: Record<string, unknown>) => void;
}
interface RegexField {
id: string;
id?: string;
fieldName: string;
regex: string;
}
@@ -18,7 +14,30 @@ interface PromptTemplate {
template_content: string;
}
export function ExtractionSettings({ onChange }: ExtractionSettingsProps) {
interface ExtractionSettingsProps {
onChange?: (data: Record<string, unknown>) => void;
initialData?: {
llm_ocr?: {
fields?: string[];
prompt_setting?: {
type?: string;
template?: string;
}
};
llm_vl?: {
fields?: string[];
prompt_setting?: {
type?: string;
template?: string;
}
};
ocr_regex?: {
fields?: RegexField[];
}
};
}
export function ExtractionSettings({ onChange, initialData }: ExtractionSettingsProps) {
// 使用RuleContext获取全局状态
const ruleContext = useContext(RuleContext);
@@ -50,9 +69,61 @@ export function ExtractionSettings({ onChange }: ExtractionSettingsProps) {
llm: ''
});
// 在组件初始化时，如果Context中已有字段数据，则使用Context数据初始化
// 加载初始数据
useEffect(() => {
if (ruleContext && ruleContext.extractionFields.length > 0) {
if (initialData) {
// 设置字段数据
const newFields = {
llm_ocr: initialData.llm_ocr?.fields || [],
llm: initialData.llm_vl?.fields || []
};
setFields(newFields);
// 设置提示词类型
setPromptType({
llm_ocr: initialData.llm_ocr?.prompt_setting?.type || 'system',
llm: initialData.llm_vl?.prompt_setting?.type || 'system'
});
// 设置提示词内容
setPromptContent({
llm_ocr: initialData.llm_ocr?.prompt_setting?.template || '',
llm: initialData.llm_vl?.prompt_setting?.template || ''
});
// 设置正则字段
if (initialData.ocr_regex && initialData.ocr_regex.fields && initialData.ocr_regex.fields.length > 0) {
const regexFieldsWithIds = initialData.ocr_regex.fields.map((field: RegexField, index: number) => ({
id: (index + 1).toString(),
fieldName: field.fieldName || '',
regex: field.regex || ''
}));
setRegexFields(regexFieldsWithIds);
}
// 更新全局字段列表
const allFields = [
...newFields.llm_ocr,
...newFields.llm,
...(initialData.ocr_regex?.fields || []).map((f: RegexField) => f.fieldName)
].filter(Boolean);
if (ruleContext && ruleContext.updateFields) {
ruleContext.updateFields(allFields);
}
}
}, [initialData, ruleContext?.updateFields]);
// 在组件首次加载时更新字段
useEffect(() => {
if (!initialData) {
updateAllFields();
}
}, []);
// 当组件首次加载时，如果Context中已有字段数据，则使用Context数据初始化
useEffect(() => {
if (!initialData && ruleContext && ruleContext.extractionFields.length > 0) {
// 将Context中的字段数据添加到当前激活的抽取方式中
setFields(prevFields => ({
...prevFields,
@@ -61,11 +132,6 @@ export function ExtractionSettings({ onChange }: ExtractionSettingsProps) {
}
}, []);
// 当组件首次加载时更新字段
useEffect(() => {
updateAllFields();
}, []);
// 获取所有可用字段（合并大模型、多模态和正则抽取的字段）
const getAllFields = (): string[] => {
// 从大模型OCR抽取中获取字段
@@ -169,10 +235,11 @@ export function ExtractionSettings({ onChange }: ExtractionSettingsProps) {
// 使用useEffect监听字段变化并更新Context
useEffect(() => {
// 立即更新字段列表
updateAllFields();
const debouncedUpdate = setTimeout(() => {
updateAllFields();
}, 300);
// eslint-disable-next-line react-hooks/exhaustive-deps
return () => clearTimeout(debouncedUpdate);
}, [fields.llm_ocr, fields.llm, regexFields]);
const handleTabChange = (tab: string) => {
app/components/rules/new/PageHeader.tsx
+1 -1
View File
@@ -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
+92 -25
View File
@@ -23,6 +23,17 @@ interface Condition {
interface ReviewSettingsProps {
onChange?: (data: Record<string, unknown>) => void;
initialData?: {
rules?: RuleType[];
combinationLogic?: string;
customLogic?: string;
pass_message?: string;
fail_message?: string;
suggestion_message?: string;
suggestion_message_type?: string;
post_action?: string;
action_config?: string;
};
}
// 创建全局上下文以便在不同组件间共享数据
@@ -37,7 +48,7 @@ export const RuleContext = createContext<RuleContextType>({
updateFields: () => {}
});
export function ReviewSettings({ onChange }: ReviewSettingsProps) {
export function ReviewSettings({ onChange, initialData }: ReviewSettingsProps) {
const [rules, setRules] = useState<RuleType[]>([
{ id: '1', type: '', config: {} }
]);
@@ -62,20 +73,77 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
// 保存最近一次可用的字段列表
const [availableFields, setAvailableFields] = useState<string[]>(extractionFields || []);
// 加载初始数据
useEffect(() => {
if (initialData) {
// 设置规则
if (initialData.rules && initialData.rules.length > 0) {
setRules(initialData.rules);
}
// 设置组合逻辑
if (initialData.combinationLogic) {
setCombinationLogic(initialData.combinationLogic);
if (initialData.combinationLogic === 'custom') {
setShowCustomLogic(true);
}
}
// 设置自定义逻辑
if (initialData.customLogic) {
setCustomLogic(initialData.customLogic);
}
// 设置通过/不通过消息
if (initialData.pass_message) {
setPassMessage(initialData.pass_message);
}
if (initialData.fail_message) {
setFailMessage(initialData.fail_message);
}
// 设置建议消息
if (initialData.suggestion_message) {
setSuggestMessage(initialData.suggestion_message);
}
if (initialData.suggestion_message_type) {
setSuggestionMessageType(initialData.suggestion_message_type);
}
// 设置后处理动作
if (initialData.post_action) {
setPostAction(initialData.post_action);
}
if (initialData.action_config) {
setActionConfig(initialData.action_config);
}
}
}, [initialData]);
// 监听extractionFields的变化
useEffect(() => {
if (extractionFields && extractionFields.length > 0) {
const newFields = [...extractionFields];
// 只在字段列表实际发生变化时更新
if (JSON.stringify(newFields) !== JSON.stringify(availableFields)) {
setAvailableFields(newFields);
}
}
}, [extractionFields]);
// 监听抽取设置中的字段变化
useEffect(() => {
// 当Context中的字段发生变化时，更新可用字段但保留已有配置
if (extractionFields.length > 0) {
console.log('extractionFields updated in ReviewSettings:', extractionFields);
// 检查是否有字段被删除
const deletedFields = availableFields.filter(field => !extractionFields.includes(field));
// 处理新增的字段
const newFields = extractionFields.filter((field: string) => !availableFields.includes(field));
console.log('New fields:', newFields);
console.log('Deleted fields:', deletedFields);
if (newFields.length > 0 || deletedFields.length > 0) {
// 设置最新的可用字段列表
setAvailableFields(extractionFields);
@@ -94,28 +162,27 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
const handleExtractionChange = (event: Event) => {
if (event instanceof CustomEvent && event.detail && Array.isArray(event.detail.fields)) {
const incomingFields = event.detail.fields;
console.log('Received extraction fields update:', incomingFields);
// 检查是否有字段被删除
const deletedFields = availableFields.filter(field => !incomingFields.includes(field));
// 识别新增的字段
const newFields = incomingFields.filter((field: string) => !availableFields.includes(field));
console.log('Deleted fields:', deletedFields);
console.log('New fields:', newFields);
if (newFields.length > 0 || deletedFields.length > 0) {
// 设置最新的可用字段列表
setAvailableFields(incomingFields);
// 检查是否有实际变化
if (JSON.stringify(incomingFields) !== JSON.stringify(availableFields)) {
// 检查是否有字段被删除
const deletedFields = availableFields.filter(field => !incomingFields.includes(field));
// 处理规则中已删除的字段
if (deletedFields.length > 0) {
handleDeletedFields(deletedFields);
// 识别新增的字段
const newFields = incomingFields.filter((field: string) => !availableFields.includes(field));
if (newFields.length > 0 || deletedFields.length > 0) {
// 设置最新的可用字段列表
setAvailableFields(incomingFields);
// 处理规则中已删除的字段
if (deletedFields.length > 0) {
handleDeletedFields(deletedFields);
}
// 使用最新的字段列表更新规则配置
updateRulesWithNewFields(incomingFields);
}
// 使用最新的字段列表更新规则配置
updateRulesWithNewFields(incomingFields);
}
}
};
@@ -127,7 +194,7 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
return () => {
document.removeEventListener('extraction-fields-updated', handleExtractionChange);
};
}, [extractionFields]);
}, [extractionFields, availableFields]);
// 检查并更新字段（仍然保留此函数供需要时手动触发）
// eslint-disable-next-line @typescript-eslint/no-unused-vars
app/routes/rules.new.tsx
+499 -295
View File
@@ -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.template = promptSettings.content || '';
updatedExtractionConfig.llm_ocr.prompt_setting.type = promptSettings.type as string || 'system';
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.template = promptSettings.content || '';
updatedExtractionConfig.llm_vl.prompt_setting.type = promptSettings.type as string || 'system';
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
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: 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: '' };
})
}
};
setIsLoading(true);
const evaluationPointData = formatDataForApi(formData);
console.log('提交的提取配置:', extractionConfig);
console.log('原始提取配置:', formData.extraction_config);
// 确定使用的HTTP方法和URL
let method = 'POST';
let endpoint = 'http://127.0.0.1:9000/admin/evaluation_points';
// 转换评查配置为符合数据库格式的JSON
const evaluationConfig = {
logicType: formData.evaluation_config.logicType || 'and',
customLogic: formData.evaluation_config.customLogic || '',
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
};
// 如果是编辑模式，使用PATCH更新现有记录
if (isEditMode && formData.id) {
method = 'PATCH';
endpoint = `http://127.0.0.1:9000/admin/evaluation_points?id=eq.${formData.id}`;
}
// 发送数据到API
const response = await fetch('/api/evaluation-points', {
method: 'POST',
const response = await fetch(endpoint, {
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();
console.log('保存成功:', result);
const responseData = await response.json() as ApiResponseType<unknown>;
// 保存成功后跳转到评查点列表页面
navigate('/rules');
if (responseData.code === 0) {
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
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: 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: '' };
})
}
};
setIsLoading(true);
const draftData = formatDataForApi(formData, true);
console.log('草稿提交的提取配置:', extractionConfig);
console.log('草稿原始提取配置:', formData.extraction_config);
// 确定使用的HTTP方法和URL
let method = 'POST';
let endpoint = 'http://127.0.0.1:9000/admin/evaluation_points';
// 转换评查配置为符合数据库格式的JSON
const evaluationConfig = {
logicType: formData.evaluation_config.logicType || 'and',
customLogic: formData.evaluation_config.customLogic || '',
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
};
// 如果是编辑模式，使用PATCH更新现有记录
if (isEditMode && formData.id) {
method = 'PATCH';
endpoint = `http://127.0.0.1:9000/admin/evaluation_points?id=eq.${formData.id}`;
}
// 发送数据到API
const response = await fetch('/api/evaluation-points/draft', {
method: 'POST',
const response = await fetch(endpoint, {
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();
console.log('保存草稿成功:', result);
const responseData = await response.json() as ApiResponseType<unknown>;
// 保存成功后跳转到评查点列表页面
navigate('/rules');
if (responseData.code === 0) {
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">
<BasicInfo onChange={handleBasicInfoChange} />
</div>
<div className="mb-8">
<RuleContext.Provider value={{ extractionFields, updateFields: updateExtractionFields }}>
<ExtractionSettings onChange={handleExtractionSettingsChange} />
</RuleContext.Provider>
</div>
<div className="mb-8">
<RuleContext.Provider value={{ extractionFields, updateFields: updateExtractionFields }}>
<ReviewSettings onChange={handleReviewSettingsChange} />
</RuleContext.Provider>
</div>
<ActionButtons
onSave={handleSave}
onSaveDraft={handleSaveDraft}
/>
{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} />
</div>
<div className="mb-8">
<RuleContext.Provider value={{ extractionFields, updateFields: updateExtractionFields }}>
<ExtractionSettings
onChange={handleExtractionSettingsChange}
initialData={{
llm_ocr: formData.extraction_config.llm_ocr,
llm_vl: formData.extraction_config.llm_vl,
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>
);
}