暂存

2025-03-28 14:45:54 +08:00
parent d9b9ce4676
commit 0079786b25
14 changed files with 3718 additions and 6 deletions
@@ -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>
+  );
+}