测试monaco代替codemirror

src/layouts/index.less

@@ -13,15 +13,32 @@ body {
   background-color: rgb(248, 248, 248);
 }
 
-@import '~codemirror/lib/codemirror.css';
-@import '~codemirror/addon/dialog/dialog.css';
+.ant-modal {
+  padding-bottom: 0 !important;
+  width: 580px !important;
+}
 
-.ql-container-wrapper {
-  .CodeMirror {
-    position: absolute;
-    height: calc(100vh - 128px);
-    height: calc(100vh - var(--vh-offset, 0px) - 128px);
-    width: calc(100% - 32px);
+.monaco-editor:not(.rename-box) {
+  height: calc(100vh - 128px) !important;
+  height: calc(100vh - var(--vh-offset, 0px) - 128px) !important;
+  .view-overlays .current-line{
+    border-width: 0;
+  }
+}
+
+.log-modal {
+  .monaco-editor:not(.rename-box) {
+    height: calc(100vh - 176px) !important;
+    height: calc(100vh - var(--vh-offset, 0px) - 176px) !important;
+    background-color: transparent !important;
+  }
+}
+
+.rename-box  {
+  height: 0;
+  .rename-input{
+    height: 0;
+    padding: 0 !important;
   }
 }
 
@@ -29,7 +46,7 @@ body {
   max-width: unset !important;
   overflow: auto;
   .ant-pro-page-container-children-content {
-    overflow: auto;
+    overflow: visible;
     height: calc(100vh - 96px);
     height: calc(100vh - var(--vh-offset, 0px) - 96px);
     background-color: #fff;
@@ -127,15 +144,14 @@ input:-webkit-autofill:active {
         height: calc(100vh - 184px);
         height: calc(100vh - var(--vh-offset, 0px) - 184px);
       }
-      .CodeMirror {
-        height: calc(100vh - 216px);
-        height: calc(100vh - var(--vh-offset, 0px) - 216px);
-        width: calc(100vw - 80px);
+      .monaco-editor:not(.rename-box) {
+        height: calc(100vh - 216px) !important;
+        height: calc(100vh - var(--vh-offset, 0px) - 216px) !important;
       }
     }
-    .CodeMirror {
-      height: calc(100vh - 176px);
-      height: calc(100vh - var(--vh-offset, 0px) - 176px);
+    .monaco-editor:not(.rename-box) {
+      height: calc(100vh - 176px) !important;
+      height: calc(100vh - var(--vh-offset, 0px) - 176px) !important;
     }
   }
 

src/pages/config/index.tsx

@@ -2,8 +2,8 @@ import React, { PureComponent, Fragment, useState, useEffect } from 'react';
 import { Button, message, Modal, TreeSelect } from 'antd';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Controlled as CodeMirror } from 'react-codemirror2';
 import { request } from '@/utils/http';
+import Editor from "@monaco-editor/react";
 
 const Config = () => {
   const [width, setWidth] = useState('100%');
@@ -14,6 +14,7 @@ const Config = () => {
   const [title, setTitle] = useState('config.sh');
   const [select, setSelect] = useState('config.sh');
   const [data, setData] = useState<any[]>([]);
+  const [theme, setTheme] = useState<string>('');
 
   const getConfig = (name: string) => {
     request.get(`${config.apiPrefix}configs/${name}`).then((data: any) => {
@@ -61,6 +62,22 @@ const Config = () => {
     getConfig('config.sh');
   }, []);
 
+  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 config-wrapper"
@@ -93,18 +110,18 @@ const Config = () => {
         },
       }}
     >
-      <CodeMirror
+      <Editor
+        defaultLanguage="shell"
         value={value}
+        theme={theme}
         options={{
-          lineNumbers: true,
-          styleActiveLine: true,
-          matchBrackets: true,
-          mode: 'shell',
+          fontSize: 12,
+          minimap: {enabled: width==='100%'},
+          lineNumbersMinChars: 3,
+          folding: false,
+          glyphMargin: false
         }}
-        onBeforeChange={(editor, data, value) => {
-          setValue(value);
-        }}
-        onChange={(editor, data, value) => {}}
+        onChange={(val) => {setValue(val as string)}}
       />
     </PageContainer>
   );

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>
   );

src/pages/diff/index.tsx

@@ -5,6 +5,7 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
 import ReactDiffViewer from 'react-diff-viewer';
 import './index.less';
+import { DiffEditor } from "@monaco-editor/react";
 
 const Crontab = () => {
   const [width, setWidth] = useState('100%');
@@ -13,6 +14,7 @@ const Crontab = () => {
   const [value, setValue] = useState('');
   const [sample, setSample] = useState('');
   const [loading, setLoading] = useState(true);
+  const [theme, setTheme] = useState<string>('');
 
   const getConfig = () => {
     request.get(`${config.apiPrefix}configs/config.sh`).then((data) => {
@@ -44,6 +46,22 @@ const Crontab = () => {
     getSample();
   }, []);
 
+  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"
@@ -62,37 +80,21 @@ const Crontab = () => {
         },
       }}
     >
-      <ReactDiffViewer
-        styles={{
-          diffContainer: {
-            overflowX: 'auto',
-            minWidth: 768,
-          },
-          diffRemoved: {
-            overflowX: 'auto',
-            maxWidth: 300,
-          },
-          diffAdded: {
-            overflowX: 'auto',
-            maxWidth: 300,
-          },
-          line: {
-            wordBreak: 'break-word',
-          },
+      <DiffEditor
+        language={"shell"}
+        original={sample}
+        modified={value}
+        options={{
+          readOnly: true,
+          fontSize: 12,
+          minimap: {enabled: width==='100%'},
+          lineNumbersMinChars: 3,
+          folding: false,
+          glyphMargin: false,
+          renderSideBySide: width==='100%'
         }}
-        oldValue={value}
-        newValue={sample}
-        splitView={true}
-        leftTitle="config.sh"
-        rightTitle="config.sample.sh"
-        disableWordDiff={true}
+        theme={theme}
       />
-      {/* <CodeDiff
-        style={{ height: 'calc(100vh - 72px)', overflowY: 'auto' }}
-        outputFormat="side-by-side"
-        oldStr={value}
-        newStr={sample}
-      /> */}
     </PageContainer>
   );
 };

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>

src/pages/script/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/script/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';
 
@@ -39,6 +39,7 @@ const Script = () => {
   const [mode, setMode] = useState('');
   const [height, setHeight] = useState<number>();
   const treeDom = useRef<any>();
+  const [theme, setTheme] = useState<string>('');
 
   const getScripts = () => {
     setLoading(true);
@@ -94,6 +95,22 @@ const Script = () => {
     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"
@@ -145,20 +162,19 @@ const Script = () => {
             </div>
           </div>
         )}
-        <CodeMirror
+        <Editor
+          language={mode}
           value={value}
+          theme={theme}
           options={{
-            lineNumbers: true,
-            lineWrapping: true,
-            styleActiveLine: true,
-            matchBrackets: true,
-            mode,
             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) => {setValue(val as string)}}
         />
       </div>
     </PageContainer>