From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化

---
 app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx |   67 +++++++++++++++++++++++----------
 1 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index 1fac467..db04289 100644
--- a/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -3,29 +3,26 @@
 import Editor, { loader } from '@monaco-editor/react'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import Base from '../base'
-import { WEB_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import {
   getFilesInLogs,
 } from '@/app/components/base/file-uploader/utils'
-import { Theme } from '@/types/app'
-import useTheme from '@/hooks/use-theme'
+
 import './style.css'
-import { noop } from 'lodash-es'
 
 // load file from local instead of cdn https://github.com/suren-atoyan/monaco-react/issues/482
-loader.config({ paths: { vs: `${WEB_PREFIX}/vs` } })
+loader.config({ paths: { vs: '/vs' } })
 
 const CODE_EDITOR_LINE_HEIGHT = 18
 
 export type Props = {
   value?: string | object
-  placeholder?: React.JSX.Element | string
+  placeholder?: JSX.Element | string
   onChange?: (value: string) => void
-  title?: React.JSX.Element
+  title?: JSX.Element
   language: CodeLanguage
-  headerRight?: React.JSX.Element
+  headerRight?: JSX.Element
   readOnly?: boolean
   isJSONStringifyBeauty?: boolean
   height?: number
@@ -37,7 +34,7 @@
   onGenerated?: (value: string) => void
   showCodeGenerator?: boolean
   className?: string
-  tip?: React.JSX.Element
+  tip?: JSX.Element
 }
 
 export const languageMap = {
@@ -46,10 +43,19 @@
   [CodeLanguage.json]: 'json',
 }
 
+const DEFAULT_THEME = {
+  base: 'vs',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#F2F4F7', // #00000000 transparent. But it will has a blue border
+  },
+}
+
 const CodeEditor: FC<Props> = ({
   value = '',
   placeholder = '',
-  onChange = noop,
+  onChange = () => { },
   title = '',
   headerRight,
   language,
@@ -70,7 +76,7 @@
   const [isMounted, setIsMounted] = React.useState(false)
   const minHeight = height || 200
   const [editorContentHeight, setEditorContentHeight] = useState(56)
-  const { theme: appTheme } = useTheme()
+
   const valueRef = useRef(value)
   useEffect(() => {
     valueRef.current = value
@@ -108,7 +114,27 @@
       setIsFocus(false)
     })
 
-    monaco.editor.setTheme(appTheme === Theme.light ? 'light' : 'vs-dark') // Fix: sometimes not load the default theme
+    monaco.editor.defineTheme('default-theme', DEFAULT_THEME)
+
+    monaco.editor.defineTheme('blur-theme', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#F2F4F7',
+      },
+    })
+
+    monaco.editor.defineTheme('focus-theme', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#ffffff',
+      },
+    })
+
+    monaco.editor.setTheme('default-theme') // Fix: sometimes not load the default theme
 
     onMount?.(editor, monaco)
     setIsMounted(true)
@@ -120,16 +146,17 @@
     try {
       return JSON.stringify(value as object, null, 2)
     }
-    catch {
+    catch (e) {
       return value as string
     }
   })()
 
-  const theme = useMemo(() => {
-    if (appTheme === Theme.light)
-      return 'light'
-    return 'vs-dark'
-  }, [appTheme])
+  const theme = (() => {
+    if (noWrapper)
+      return 'default-theme'
+
+    return isFocus ? 'focus-theme' : 'blur-theme'
+  })()
 
   const main = (
     <>
@@ -159,14 +186,14 @@
         }}
         onMount={handleEditorDidMount}
       />
-      {!outPutValue && !isFocus && <div className='pointer-events-none absolute left-[36px] top-0 text-[13px] font-normal leading-[18px] text-gray-300'>{placeholder}</div>}
+      {!outPutValue && !isFocus && <div className='pointer-events-none absolute left-[36px] top-0 leading-[18px] text-[13px] font-normal text-gray-300'>{placeholder}</div>}
     </>
   )
 
   return (
     <div className={cn(isExpand && 'h-full', className)}>
       {noWrapper
-        ? <div className='no-wrapper relative' style={{
+        ? <div className='relative no-wrapper' style={{
           height: isExpand ? '100%' : (editorContentHeight) / 2 + CODE_EDITOR_LINE_HEIGHT, // In IDE, the last line can always be in lop line. So there is some blank space in the bottom.
           minHeight: CODE_EDITOR_LINE_HEIGHT,
         }}>

--
Gitblit v1.8.0