暂存

app/components/rules/new/CodeEditor.tsx

@@ -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>
+  );
+}