测试monaco代替codemirror

src/pages/log/index.module.less

@@ -14,9 +14,7 @@
   &-scroller {
     flex: 1;
     overflow: auto;
-  }
-  &-search {
-    margin-bottom: 8px;
+    border-right: 1px dashed #f0f0f0;
   }
 }
 
@@ -29,9 +27,5 @@
     .ant-pro-grid-content.wide .ant-pro-page-container-children-content {
       background-color: #f8f8f8;
     }
-
-    .CodeMirror {
-      width: calc(100% - 32px - @tree-width);
-    }
   }
 }

src/pages/log/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, Key, useRef } from 'react';
 import { TreeSelect, Tree, Input } from 'antd';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Controlled as CodeMirror } from 'react-codemirror2';
+import Editor from "@monaco-editor/react";
 import { request } from '@/utils/http';
 import styles from './index.module.less';
 
@@ -48,6 +48,7 @@ const Log = () => {
   const [isPhone, setIsPhone] = useState(false);
   const [height, setHeight] = useState<number>();
   const treeDom = useRef<any>();
+  const [theme, setTheme] = useState<string>('');
 
   const getLogs = () => {
     setLoading(true);
@@ -119,6 +120,22 @@ const Log = () => {
     setHeight(treeDom.current.clientHeight);
   }, []);
 
+  useEffect(()=>{
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const storageTheme = localStorage.getItem('qinglong_dark_theme');
+    const isDark = (media.matches && storageTheme !== 'light') || storageTheme === 'dark';
+    setTheme(isDark?'vs-dark':'vs');
+    media.addEventListener('change',(e)=>{
+      if(storageTheme === 'auto' || !storageTheme){
+        if(e.matches){
+          setTheme('vs-dark')
+        }else{
+          setTheme('vs');
+        }
+      }
+    })
+  },[])
+
   return (
     <PageContainer
       className="ql-container-wrapper log-wrapper"
@@ -170,19 +187,19 @@ const Log = () => {
             </div>
           </div>
         )}
-        <CodeMirror
+        <Editor
+          language="shell"
+          theme={theme}
           value={value}
           options={{
-            lineNumbers: true,
-            lineWrapping: true,
-            styleActiveLine: true,
-            matchBrackets: true,
             readOnly: true,
+            fontSize: 12,
+            minimap: {enabled: width==='100%'},
+            lineNumbersMinChars: 3,
+            folding: false,
+            glyphMargin: false
           }}
-          onBeforeChange={(editor, data, value) => {
-            setValue(value);
-          }}
-          onChange={(editor, data, value) => {}}
+          onChange={(val, ev) => {setValue(val as string)}}
         />
       </div>
     </PageContainer>