手机端使用codemirror

src/layouts/index.less

@@ -1,4 +1,5 @@
 @import '~@/styles/variable.less';
+@import '~codemirror/lib/codemirror.css';
 
 @font-face {
   font-family: 'Source Code Pro';
@@ -13,7 +14,7 @@ body {
   background-color: rgb(248, 248, 248);
 }
 
-.ant-modal {
+.log-modal .ant-modal {
   padding-bottom: 0 !important;
   width: 580px !important;
 }
@@ -21,22 +22,14 @@ body {
 .monaco-editor:not(.rename-box) {
   height: calc(100vh - 128px) !important;
   height: calc(100vh - var(--vh-offset, 0px) - 128px) !important;
-  .view-overlays .current-line{
+  .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  {
+.rename-box {
   height: 0;
-  .rename-input{
+  .rename-input {
     height: 0;
     padding: 0 !important;
   }
@@ -144,12 +137,17 @@ input:-webkit-autofill:active {
         height: calc(100vh - 184px);
         height: calc(100vh - var(--vh-offset, 0px) - 184px);
       }
-      .monaco-editor:not(.rename-box) {
+      .monaco-editor:not(.rename-box),
+      .CodeMirror {
         height: calc(100vh - 216px) !important;
         height: calc(100vh - var(--vh-offset, 0px) - 216px) !important;
       }
+      .CodeMirror {
+        width: calc(100vw - 80px);
+      }
     }
-    .monaco-editor:not(.rename-box) {
+    .monaco-editor:not(.rename-box),
+    .CodeMirror {
       height: calc(100vh - 176px) !important;
       height: calc(100vh - var(--vh-offset, 0px) - 176px) !important;
     }
@@ -166,3 +164,59 @@ input:-webkit-autofill:active {
     min-height: calc(100vh - var(--vh-offset, 0px) - 72px);
   }
 }
+
+.Resizer {
+  background: #000;
+  opacity: 0.2;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+}
+
+.Resizer:hover {
+  -webkit-transition: all 2s ease;
+  transition: all 2s ease;
+}
+
+.Resizer.horizontal {
+  height: 11px;
+  margin: -5px 0;
+  border-top: 5px solid rgba(255, 255, 255, 0);
+  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  cursor: row-resize;
+  width: 100%;
+}
+
+.Resizer.horizontal:hover {
+  border-top: 5px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+  border-left: 5px solid rgba(0, 0, 0, 0.5);
+  border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+  cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+  border-color: transparent;
+}
+
+.edit-modal {
+  .ant-drawer-body {
+    padding: 0;
+  }
+}

src/layouts/index.tsx

@@ -65,6 +65,8 @@ export default function (props: any) {
   const isSafari =
     navigator.userAgent.includes('Safari') &&
     !navigator.userAgent.includes('Chrome');
+  const isQQBrowser = navigator.userAgent.includes('QQBrowser');
+
   return (
     <ProLayout
       selectedKeys={[props.location.pathname]}
@@ -76,8 +78,9 @@ export default function (props: any) {
               style={{
                 fontSize: isFirefox ? 9 : 12,
                 color: '#666',
-                marginLeft: 5,
+                marginLeft: 2,
                 zoom: isSafari ? 0.66 : 0.8,
+                letterSpacing: isQQBrowser ? -2 : 0,
               }}
             >
               {version}