暂存
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
|
||||
interface ActionButtonsProps {
|
||||
onSave?: () => void;
|
||||
onSaveDraft?: () => void;
|
||||
}
|
||||
|
||||
export function ActionButtons({ onSave, onSaveDraft }: ActionButtonsProps) {
|
||||
return (
|
||||
<div className="flex justify-center space-x-4 mt-8 mb-4">
|
||||
<button
|
||||
type="button"
|
||||
className="ant-btn ant-btn-primary min-w-[120px]"
|
||||
onClick={onSave}
|
||||
>
|
||||
<i className="ri-save-line mr-1"></i> 保存
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="ant-btn ant-btn-default min-w-[120px]"
|
||||
onClick={onSaveDraft}
|
||||
>
|
||||
<i className="ri-draft-line mr-1"></i> 保存草稿
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="ant-btn ant-btn-default min-w-[120px]"
|
||||
onClick={() => window.history.back()}
|
||||
>
|
||||
<i className="ri-arrow-left-line mr-1"></i> 返回
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
interface BasicInfoProps {
|
||||
onChange?: (data: Record<string, unknown>) => void;
|
||||
}
|
||||
|
||||
export function BasicInfo({ onChange }: BasicInfoProps) {
|
||||
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
code: '',
|
||||
riskLevel: 'medium',
|
||||
type: '',
|
||||
group: 'contract-base',
|
||||
enabled: true,
|
||||
description: '',
|
||||
lawName: '',
|
||||
lawArticles: '',
|
||||
lawContent: ''
|
||||
});
|
||||
|
||||
const toggleDescription = () => {
|
||||
setIsDescriptionExpanded(!isDescriptionExpanded);
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
const { id, value } = e.target;
|
||||
let fieldName = id;
|
||||
|
||||
// 映射id到表单字段名
|
||||
switch(id) {
|
||||
case 'checkpoint-name': fieldName = 'name'; break;
|
||||
case 'checkpoint-code': fieldName = 'code'; break;
|
||||
case 'risk-level': fieldName = 'riskLevel'; break;
|
||||
case 'checkpointType': fieldName = 'type'; break;
|
||||
case 'rule-group': fieldName = 'group'; break;
|
||||
case 'is-enabled': fieldName = 'enabled'; break;
|
||||
case 'checkpoint-description': fieldName = 'description'; break;
|
||||
case 'law-name': fieldName = 'lawName'; break;
|
||||
case 'law-articles': fieldName = 'lawArticles'; break;
|
||||
case 'law-content': fieldName = 'lawContent'; break;
|
||||
}
|
||||
|
||||
const newData = {
|
||||
...formData,
|
||||
[fieldName]: id === 'is-enabled' ? value === 'true' : value
|
||||
};
|
||||
|
||||
setFormData(newData);
|
||||
|
||||
if (onChange) {
|
||||
onChange(newData);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ant-card">
|
||||
<div className="ant-card-header">
|
||||
<h3>基本信息</h3>
|
||||
</div>
|
||||
<div className="ant-card-body">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label className="form-label" htmlFor="checkpoint-name">
|
||||
评查点名称 <span className="required-mark">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="checkpoint-name"
|
||||
type="text"
|
||||
className="form-input"
|
||||
placeholder="请输入评查点名称"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<div className="form-tip">请使用简洁明了的名称，不超过30个字符</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="checkpoint-code">
|
||||
评查点编码 <span className="required-mark">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="checkpoint-code"
|
||||
type="text"
|
||||
className="form-input"
|
||||
placeholder="请输入评查点编码"
|
||||
value={formData.code}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<div className="form-tip">用于系统标识的唯一编码</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="risk-level">
|
||||
风险等级： <span className="required-mark">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="risk-level"
|
||||
className="form-select"
|
||||
value={formData.riskLevel}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="high">高风险</option>
|
||||
<option value="medium">中风险</option>
|
||||
<option value="low">低风险</option>
|
||||
</select>
|
||||
<div className="form-tip">请定义评查点的风险等级</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="checkpointType">
|
||||
评查点类型 <span className="required-mark">*</span>
|
||||
</label>
|
||||
<select
|
||||
className="form-select"
|
||||
id="checkpointType"
|
||||
value={formData.type}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="">请选择评查点类型</option>
|
||||
<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="rule-group">所属规则组</label>
|
||||
<select
|
||||
id="rule-group"
|
||||
className="form-select"
|
||||
value={formData.group}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="contract-base">合同基本要素检查</option>
|
||||
<option value="contract-sales">销售合同专项检查</option>
|
||||
<option value="contract-purchase">采购合同专项检查</option>
|
||||
<option value="license">专卖许可证审核规则</option>
|
||||
<option value="punishment">行政处罚规范性检查</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="form-label" htmlFor="is-enabled">是否启用</label>
|
||||
<select
|
||||
id="is-enabled"
|
||||
className="form-select"
|
||||
value={formData.enabled ? 'true' : 'false'}
|
||||
onChange={handleInputChange}
|
||||
>
|
||||
<option value="true">是</option>
|
||||
<option value="false">否</option>
|
||||
</select>
|
||||
<div className="form-tip">创建后是否立即启用此评查点</div>
|
||||
</div>
|
||||
<div className="col-span-1 md:col-span-3">
|
||||
<div
|
||||
className={`flex justify-between items-center cursor-pointer ${isDescriptionExpanded ? 'expanded' : ''}`}
|
||||
onClick={toggleDescription}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
toggleDescription();
|
||||
}
|
||||
}}
|
||||
aria-expanded={isDescriptionExpanded}
|
||||
aria-controls="description-section"
|
||||
>
|
||||
<h4 className="form-label mb-0">评查点描述与法律依据</h4>
|
||||
<i className="ri-arrow-down-s-line text-lg expand-icon"></i>
|
||||
</div>
|
||||
|
||||
<div id="description-section" className={`mt-2 ${isDescriptionExpanded ? '' : 'hidden'}`}>
|
||||
<div className="mb-4">
|
||||
<label className="form-label" htmlFor="checkpoint-description">评查点描述</label>
|
||||
<textarea
|
||||
id="checkpoint-description"
|
||||
className="form-textarea"
|
||||
style={{ minHeight: '80px' }}
|
||||
placeholder="请输入评查点描述，包括适用场景、评查目的等"
|
||||
value={formData.description}
|
||||
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.lawName}
|
||||
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={formData.lawArticles}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
<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.lawContent}
|
||||
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.lawName || '《中华人民共和国民法典》'}
|
||||
</div>
|
||||
<div className="law-reference-articles" id="preview-law-articles">
|
||||
{formData.lawArticles ? formData.lawArticles.split(',').map((article, index) => (
|
||||
<span key={index} className="law-article">{article.trim()}</span>
|
||||
)) : (
|
||||
<>
|
||||
<span className="law-article">第五百八十五条</span>
|
||||
<span className="law-article">第五百八十六条</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="law-reference-content" id="preview-law-content">
|
||||
{formData.lawContent || '当事人应当按照约定全面履行自己的义务。'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import CodeMirror from '@uiw/react-codemirror';
|
||||
import { javascript } from '@codemirror/lang-javascript';
|
||||
import { oneDark } from '@codemirror/theme-one-dark';
|
||||
|
||||
interface CodeEditorProps {
|
||||
id: string;
|
||||
initialValue?: string;
|
||||
language?: 'javascript' | 'python';
|
||||
onChange?: (value: string) => void;
|
||||
}
|
||||
|
||||
export function CodeEditor({
|
||||
id,
|
||||
initialValue = '',
|
||||
language = 'javascript',
|
||||
onChange
|
||||
}: CodeEditorProps) {
|
||||
const [code, setCode] = useState(initialValue);
|
||||
const [copySuccess, setCopySuccess] = useState(false);
|
||||
|
||||
// 当语言变化时更新编辑器
|
||||
const extensions = [language === 'javascript' ? javascript() : javascript()];
|
||||
|
||||
// 处理代码变化
|
||||
const handleChange = (value: string) => {
|
||||
setCode(value);
|
||||
if (onChange) {
|
||||
onChange(value);
|
||||
}
|
||||
};
|
||||
|
||||
// 复制代码到剪贴板
|
||||
const copyToClipboard = () => {
|
||||
navigator.clipboard.writeText(code).then(() => {
|
||||
setCopySuccess(true);
|
||||
setTimeout(() => setCopySuccess(false), 2000);
|
||||
});
|
||||
};
|
||||
|
||||
// 初始示例代码
|
||||
const getDefaultCode = (lang: string) => {
|
||||
if (lang === 'javascript') {
|
||||
return `// 示例代码
|
||||
function checkRule(data) {
|
||||
// data 包含抽取的字段
|
||||
try {
|
||||
// 在此编写检查逻辑
|
||||
if (data.fieldName && condition) {
|
||||
return {
|
||||
pass: true,
|
||||
message: "检查通过"
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
pass: false,
|
||||
message: "检查不通过，原因：..."
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
pass: false,
|
||||
message: "执行出错：" + error.message
|
||||
};
|
||||
}
|
||||
}`;
|
||||
} else {
|
||||
return `# 示例代码
|
||||
def check_rule(data):
|
||||
# data 包含抽取的字段
|
||||
try:
|
||||
# 在此编写检查逻辑
|
||||
if 'field_name' in data and condition:
|
||||
return {
|
||||
'pass': True,
|
||||
'message': "检查通过"
|
||||
}
|
||||
else:
|
||||
return {
|
||||
'pass': False,
|
||||
'message': "检查不通过，原因：..."
|
||||
}
|
||||
except Exception as error:
|
||||
return {
|
||||
'pass': False,
|
||||
'message': f"执行出错：{str(error)}"
|
||||
}`;
|
||||
}
|
||||
};
|
||||
|
||||
// 如果初始值为空，则使用默认示例代码
|
||||
useEffect(() => {
|
||||
if (!initialValue) {
|
||||
setCode(getDefaultCode(language));
|
||||
}
|
||||
}, [language, initialValue]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="code-editor-wrapper">
|
||||
<div className="code-editor-header">
|
||||
<div className="code-editor-filename">{language === 'javascript' ? 'script.js' : 'script.py'}</div>
|
||||
<div className="code-editor-actions">
|
||||
<i
|
||||
className="ri-file-copy-line"
|
||||
title="复制代码"
|
||||
onClick={copyToClipboard}
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<CodeMirror
|
||||
id={id}
|
||||
value={code}
|
||||
height="400px"
|
||||
theme={oneDark}
|
||||
extensions={extensions}
|
||||
onChange={handleChange}
|
||||
style={{ fontSize: '14px' }}
|
||||
/>
|
||||
</div>
|
||||
{copySuccess && (
|
||||
<div className="code-copy-success show">
|
||||
代码已复制到剪贴板
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { Link } from '@remix-run/react';
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: string;
|
||||
onSave?: () => void;
|
||||
}
|
||||
|
||||
export function PageHeader({ title, onSave }: PageHeaderProps) {
|
||||
return (
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-xl font-medium text-gray-800">{title}</h1>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="ant-btn ant-btn-primary"
|
||||
onClick={onSave}
|
||||
>
|
||||
<i className="ri-save-line mr-1"></i> 保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,145 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
interface SimpleCodeEditorProps {
|
||||
id: string;
|
||||
initialValue?: string;
|
||||
language?: 'javascript' | 'python';
|
||||
onChange?: (value: string) => void;
|
||||
}
|
||||
|
||||
export function SimpleCodeEditor({
|
||||
id,
|
||||
initialValue = '',
|
||||
language = 'javascript',
|
||||
onChange
|
||||
}: SimpleCodeEditorProps) {
|
||||
const [code, setCode] = useState(initialValue || getDefaultCode(language));
|
||||
const [copySuccess, setCopySuccess] = useState(false);
|
||||
|
||||
// 复制代码到剪贴板
|
||||
const copyToClipboard = () => {
|
||||
navigator.clipboard.writeText(code).then(() => {
|
||||
setCopySuccess(true);
|
||||
setTimeout(() => setCopySuccess(false), 2000);
|
||||
});
|
||||
};
|
||||
|
||||
// 处理代码变化
|
||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = e.target.value;
|
||||
setCode(value);
|
||||
if (onChange) {
|
||||
onChange(value);
|
||||
}
|
||||
};
|
||||
|
||||
// 初始示例代码
|
||||
function getDefaultCode(lang: string) {
|
||||
if (lang === 'javascript') {
|
||||
return `// 示例代码
|
||||
function checkRule(data) {
|
||||
// data 包含抽取的字段
|
||||
try {
|
||||
// 在此编写检查逻辑
|
||||
if (data.fieldName && condition) {
|
||||
return {
|
||||
pass: true,
|
||||
message: "检查通过"
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
pass: false,
|
||||
message: "检查不通过，原因：..."
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
pass: false,
|
||||
message: "执行出错：" + error.message
|
||||
};
|
||||
}
|
||||
}`;
|
||||
} else {
|
||||
return `# 示例代码
|
||||
def check_rule(data):
|
||||
# data 包含抽取的字段
|
||||
try:
|
||||
# 在此编写检查逻辑
|
||||
if 'field_name' in data and condition:
|
||||
return {
|
||||
'pass': True,
|
||||
'message': "检查通过"
|
||||
}
|
||||
else:
|
||||
return {
|
||||
'pass': False,
|
||||
'message': "检查不通过，原因：..."
|
||||
}
|
||||
except Exception as error:
|
||||
return {
|
||||
'pass': False,
|
||||
'message': f"执行出错：{str(error)}"
|
||||
}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 当语言变化时更新代码
|
||||
useEffect(() => {
|
||||
if (!initialValue) {
|
||||
setCode(getDefaultCode(language));
|
||||
}
|
||||
}, [language, initialValue]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="code-editor-wrapper">
|
||||
<div className="code-editor-header">
|
||||
<div className="code-editor-filename">{language === 'javascript' ? 'script.js' : 'script.py'}</div>
|
||||
<div className="code-editor-actions">
|
||||
<button
|
||||
className="bg-transparent border-0 p-0 cursor-pointer"
|
||||
title="复制代码"
|
||||
onClick={copyToClipboard}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
copyToClipboard();
|
||||
}
|
||||
}}
|
||||
aria-label="复制代码"
|
||||
tabIndex={0}
|
||||
>
|
||||
<i className="ri-file-copy-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="code-editor-container">
|
||||
<textarea
|
||||
id={id}
|
||||
className="code-editor-textarea"
|
||||
value={code}
|
||||
onChange={handleChange}
|
||||
placeholder="请输入自定义代码"
|
||||
style={{
|
||||
fontFamily: 'Consolas, Monaco, Courier New, monospace',
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.5',
|
||||
padding: '12px',
|
||||
width: '100%',
|
||||
height: '400px',
|
||||
backgroundColor: '#272822',
|
||||
color: '#f8f8f2',
|
||||
border: 'none',
|
||||
resize: 'vertical',
|
||||
tabSize: '4'
|
||||
}}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{copySuccess && (
|
||||
<div className="code-copy-success show">
|
||||
代码已复制到剪贴板
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user