暂存
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>
|
||||
);
|
||||
}
|
||||
+15
-2
@@ -14,7 +14,7 @@ import { Layout } from "~/components/layout/Layout";
|
||||
import { ErrorBoundary as AppErrorBoundary } from "~/components/error/ErrorBoundary";
|
||||
import "remixicon/fonts/remixicon.css";
|
||||
// 导入样式
|
||||
import styles from "~/styles/main.css?url";
|
||||
import mainStyles from "~/styles/main.css?url";
|
||||
|
||||
// 添加客户端hydration错误处理
|
||||
// if (typeof window !== "undefined") {
|
||||
@@ -42,7 +42,7 @@ export const meta: MetaFunction = () => {
|
||||
// 使用links函数为应用加载CSS和其他资源
|
||||
export function links() {
|
||||
return [
|
||||
{ rel: "stylesheet", href: styles },
|
||||
{ rel: "stylesheet", href: mainStyles },
|
||||
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
|
||||
{ rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
|
||||
{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" }
|
||||
@@ -55,6 +55,19 @@ export default function App() {
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
:root {
|
||||
--color-primary: #00684a;
|
||||
--color-primary-hover: #005a3f;
|
||||
--color-primary-light: rgba(0, 104, 74, 0.1);
|
||||
--primary-color: #00684a;
|
||||
|
||||
/* 成功、警告、错误颜色 */
|
||||
--color-success: #52c41a;
|
||||
--color-warning: #faad14;
|
||||
--color-error: #f5222d;
|
||||
}
|
||||
` }} />
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
import { type MetaFunction, LinksFunction } from "@remix-run/node";
|
||||
import { useState } 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";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "新增评查点 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{
|
||||
name: "description",
|
||||
content: "创建新的评查点，设置规则参数"
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
export const links: LinksFunction = () => [
|
||||
{ rel: "stylesheet", href: rulesStyles }
|
||||
];
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: "新增评查点"
|
||||
};
|
||||
|
||||
export default function RuleNew() {
|
||||
// 用于保存抽取字段的状态，在抽取设置和评查设置组件之间共享
|
||||
const [extractionFields, setExtractionFields] = useState<string[]>([]);
|
||||
|
||||
const updateExtractionFields = (fields: string[]) => {
|
||||
setExtractionFields(fields);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
// 实现保存逻辑
|
||||
console.log('保存评查点');
|
||||
};
|
||||
|
||||
const handleSaveDraft = () => {
|
||||
// 实现保存草稿逻辑
|
||||
console.log('保存为草稿');
|
||||
};
|
||||
|
||||
const handleExtractionChange = (data: Record<string, unknown>) => {
|
||||
// 当抽取设置更新时，获取最新的字段列表
|
||||
if (data.fields) {
|
||||
const fieldData = data.fields as Record<string, string[]>;
|
||||
const currentMethod = data.extractionMethod as string;
|
||||
|
||||
// 提取当前抽取方法的字段
|
||||
if (fieldData[currentMethod]) {
|
||||
updateExtractionFields(fieldData[currentMethod]);
|
||||
}
|
||||
} else if (data.regexFields) {
|
||||
// 处理正则字段情况
|
||||
const regexFields = data.regexFields as { id: string; fieldName: string; regex: string }[];
|
||||
const fieldNames = regexFields
|
||||
.map(field => field.fieldName)
|
||||
.filter(name => name.trim() !== '');
|
||||
|
||||
updateExtractionFields(fieldNames);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<RuleContext.Provider value={{ extractionFields, updateExtractionFields }}>
|
||||
<div className="px-4 py-6 bg-white border-b border-gray-200 shadow-sm">
|
||||
<PageHeader
|
||||
title="新增评查点"
|
||||
onSave={handleSave}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container py-6">
|
||||
<div className="px-4">
|
||||
<BasicInfo />
|
||||
|
||||
<ExtractionSettings onChange={handleExtractionChange} />
|
||||
|
||||
<ReviewSettings />
|
||||
|
||||
<ActionButtons
|
||||
onSave={handleSave}
|
||||
onSaveDraft={handleSaveDraft}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</RuleContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { type MetaFunction } from "@remix-run/node";
|
||||
import { BasicInfo } from "~/components/rules/new/BasicInfo";
|
||||
import { ExtractionSettings } from "~/components/rules/new/ExtractionSettings";
|
||||
import { ReviewSettings } 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";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "新增评查点 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{
|
||||
name: "description",
|
||||
content: "创建新的评查点，设置规则参数"
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
export function links() {
|
||||
return [{ rel: "stylesheet", href: rulesStyles }];
|
||||
}
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: "新增评查点"
|
||||
};
|
||||
|
||||
export default function RuleNew() {
|
||||
const handleSave = () => {
|
||||
// 实现保存逻辑
|
||||
console.log('保存评查点');
|
||||
};
|
||||
|
||||
const handleSaveDraft = () => {
|
||||
// 实现保存草稿逻辑
|
||||
console.log('保存为草稿');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<PageHeader
|
||||
title="新增评查点"
|
||||
onSave={handleSave}
|
||||
/>
|
||||
|
||||
<BasicInfo />
|
||||
|
||||
<ExtractionSettings />
|
||||
|
||||
<ReviewSettings />
|
||||
|
||||
<ActionButtons
|
||||
onSave={handleSave}
|
||||
onSaveDraft={handleSaveDraft}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,412 @@
|
||||
/* 评查点页面样式 */
|
||||
|
||||
/* 卡片组件样式 */
|
||||
.ant-card {
|
||||
@apply bg-white border border-gray-200 rounded-md shadow-sm mb-4 overflow-hidden;
|
||||
}
|
||||
|
||||
.ant-card-header {
|
||||
@apply flex items-center justify-between p-4 border-b border-gray-100 bg-gray-50;
|
||||
}
|
||||
|
||||
.ant-card-header h3 {
|
||||
@apply text-base font-medium m-0;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
.form-label {
|
||||
@apply block text-sm font-medium text-gray-700 mb-1;
|
||||
}
|
||||
|
||||
.form-input, .form-select, .form-textarea {
|
||||
@apply w-full px-3 py-2 text-sm border border-gray-300 rounded-md shadow-sm
|
||||
focus:outline-none focus:ring-2 focus:ring-[rgba(0,104,74,0.2)] focus:border-[#00684a]
|
||||
transition-colors duration-200;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
@apply min-h-[80px] resize;
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
@apply mt-1 text-xs text-gray-500;
|
||||
}
|
||||
|
||||
.required-mark {
|
||||
@apply text-[#f5222d];
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.ant-btn {
|
||||
@apply inline-flex items-center px-4 py-2 text-sm font-medium rounded-md border
|
||||
shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2
|
||||
focus:ring-offset-2 justify-center cursor-pointer;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
@apply text-white bg-[#00684a] hover:bg-[#005a3f] border-transparent
|
||||
focus:ring-[#00684a] disabled:bg-[rgba(0,104,74,0.5)] disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.ant-btn-default {
|
||||
@apply text-gray-700 bg-white hover:bg-gray-50 border-gray-300
|
||||
focus:ring-[#00684a] disabled:bg-gray-100 disabled:text-gray-400
|
||||
disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
/* 抽取方法切换按钮样式 */
|
||||
#extraction-method-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-nav-item {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tab-nav-item:hover {
|
||||
color: #00684a;
|
||||
background-color: rgba(0, 104, 74, 0.05);
|
||||
}
|
||||
|
||||
.tab-nav-item.active {
|
||||
color: #00684a;
|
||||
border-bottom-color: #00684a;
|
||||
background-color: rgba(0, 104, 74, 0.1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.extraction-config {
|
||||
padding: 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 字段标签样式 */
|
||||
.field-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 4px 12px;
|
||||
margin: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.field-tag:hover {
|
||||
background-color: #e8f5e9;
|
||||
border-color: #a5d6a7;
|
||||
}
|
||||
|
||||
.field-tag.selected {
|
||||
background-color: var(--primary-color, #00684a);
|
||||
color: white;
|
||||
border-color: var(--primary-color, #00684a);
|
||||
}
|
||||
|
||||
/* 不可用但已选择的字段样式 */
|
||||
.field-tag.unavailable {
|
||||
border-style: dashed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.field-tag.unavailable:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.field-tags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.chips-container {
|
||||
padding: 6px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
background-color: #fafafa;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 3px 6px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chip .close-btn {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.chip .close-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.extraction-config .form-input,
|
||||
.extraction-config .form-select,
|
||||
.extraction-config button.ant-btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 变量标签样式 */
|
||||
.var-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
background-color: rgba(0, 104, 74, 0.1);
|
||||
color: #00684a;
|
||||
border: 1px solid rgba(0, 104, 74, 0.2);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.var-tag:hover {
|
||||
background-color: rgba(0, 104, 74, 0.2);
|
||||
border-color: rgba(0, 104, 74, 0.3);
|
||||
}
|
||||
|
||||
.var-tag::before {
|
||||
content: '{';
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.var-tag::after {
|
||||
content: '}';
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
/* 法典引用样式 */
|
||||
.law-reference {
|
||||
background-color: #f0f9ff;
|
||||
border: 1px solid #bae0ff;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.law-reference-title {
|
||||
color: #0958d9;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.law-reference-articles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.law-article {
|
||||
background-color: #e6f4ff;
|
||||
border: 1px solid #91caff;
|
||||
border-radius: 12px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
color: #0958d9;
|
||||
}
|
||||
|
||||
.law-reference-content {
|
||||
font-size: 13px;
|
||||
color: #434343;
|
||||
line-height: 1.6;
|
||||
border-left: 3px solid #bae0ff;
|
||||
padding-left: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.expanded .expand-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* 自定义宽度类 */
|
||||
.w-3\/10 {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.w-7\/10 {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
/* 正则表达式配置行样式优化 */
|
||||
.regex-field-row {
|
||||
padding: 6px !important;
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.regex-field-row input {
|
||||
padding: 3px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 隐藏单选按钮 */
|
||||
.severity-radio {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 单选表单组 */
|
||||
.form-radio-group {
|
||||
@apply flex flex-wrap gap-4;
|
||||
}
|
||||
|
||||
.form-radio-item {
|
||||
@apply flex items-center cursor-pointer mb-2;
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
@apply w-4 h-4 mr-2 text-[#00684a] focus:ring-[#00684a];
|
||||
}
|
||||
|
||||
/* 分隔线 */
|
||||
.divider {
|
||||
@apply h-px w-full bg-gray-200 my-6;
|
||||
}
|
||||
|
||||
/* 徽章 */
|
||||
.badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
/* 警告信息类型卡片 */
|
||||
.severity-option {
|
||||
@apply transition-all duration-200;
|
||||
}
|
||||
|
||||
.severity-option.selected-severity {
|
||||
@apply shadow-md;
|
||||
}
|
||||
|
||||
/* 提示信息 */
|
||||
.bg-blue-50 {
|
||||
@apply bg-[#e6f7ff];
|
||||
}
|
||||
|
||||
.border-blue-200 {
|
||||
@apply border-[#91d5ff];
|
||||
}
|
||||
|
||||
.text-blue-700 {
|
||||
@apply text-[#1890ff];
|
||||
}
|
||||
|
||||
/* 容器通用样式 */
|
||||
.container {
|
||||
@apply mx-auto px-4;
|
||||
}
|
||||
|
||||
/* 颜色变量 */
|
||||
:root {
|
||||
--primary-color: #00684a;
|
||||
--primary-color-light: rgba(0, 104, 74, 0.1);
|
||||
--primary-color-hover: rgba(0, 104, 74, 0.2);
|
||||
--primary-color-border: rgba(0, 104, 74, 0.3);
|
||||
}
|
||||
|
||||
/* 代码编辑器样式 */
|
||||
.code-editor-wrapper {
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background-color: #282c34;
|
||||
}
|
||||
|
||||
.code-editor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background-color: #21252b;
|
||||
border-bottom: 1px solid #444;
|
||||
color: #abb2bf;
|
||||
}
|
||||
|
||||
.code-editor-filename {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
color: #abb2bf;
|
||||
}
|
||||
|
||||
.code-editor-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.code-editor-actions button {
|
||||
cursor: pointer;
|
||||
color: #abb2bf;
|
||||
}
|
||||
|
||||
.code-editor-actions button:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.code-copy-success {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background-color: rgba(0, 104, 74, 0.9);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.code-copy-success.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
Reference in New Issue
Block a user