测试monaco代替codemirror

src/pages/crontab/logModal.tsx

@@ -6,7 +6,7 @@ import {
   Loading3QuartersOutlined,
   CheckCircleOutlined,
 } from '@ant-design/icons';
-import { Controlled as CodeMirror } from 'react-codemirror2';
+import Editor from "@monaco-editor/react";
 
 enum CrontabStatus {
   'running',
@@ -28,6 +28,7 @@ const CronLogModal = ({
   const [loading, setLoading] = useState<any>(true);
   const [excuting, setExcuting] = useState<any>(true);
   const [isPhone, setIsPhone] = useState(false);
+  const [theme, setTheme] = useState<string>('');
 
   const getCronLog = (isFirst?: boolean) => {
     if (isFirst) {
@@ -91,40 +92,50 @@ const CronLogModal = ({
     setIsPhone(document.body.clientWidth < 768);
   }, []);
 
+  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 (
     <Modal
       title={titleElement()}
       visible={visible}
       centered
-      bodyStyle={{
-        overflowY: 'auto',
-        maxHeight: 'calc(80vh - var(--vh-offset, 0px))',
-      }}
+      // bodyStyle={{
+      //   overflowY: 'auto',
+      //   maxHeight: 'calc(80vh - var(--vh-offset, 0px))',
+      // }}
       forceRender
+      wrapClassName="log-modal"
       onOk={() => cancel()}
       onCancel={() => cancel()}
     >
       {!loading && value && (
-        <pre
-          style={
-            !isPhone
-              ? {
-                  whiteSpace: 'break-spaces',
-                  lineHeight: '17px',
-                  marginBottom: 0,
-                }
-              : {
-                  whiteSpace: 'break-spaces',
-                  lineHeight: '17px',
-                  marginBottom: 0,
-                  fontFamily: 'Source Code Pro',
-                  width: 375,
-                  zoom: 0.83,
-                }
-          }
-        >
-          {value}
-        </pre>
+        <Editor
+          defaultLanguage="shell"
+          value={value}
+          theme={theme}
+          options={{
+            fontSize: 12,
+            minimap: {enabled: false},
+            lineNumbersMinChars: 3,
+            folding: false,
+            fontFamily: 'Source Code Pro',
+            glyphMargin: false
+          }}
+        />
       )}
     </Modal>
   );