145 lines
3.8 KiB
TypeScript
145 lines
3.8 KiB
TypeScript
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>
|
|
);
|
|
}
|