修复windows换行符

shhsfhsb · Jul 26, 2021 · 9dd286a · 9dd286a
1 parent 1b7d687
commit 9dd286a
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 41 deletions.
diff --git a/src/pages/config/index.tsx b/src/pages/config/index.tsx
@@ -3,7 +3,7 @@ import { Button, message, Modal, TreeSelect } from 'antd';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
-import Editor from "@monaco-editor/react";
+import Editor from '@monaco-editor/react';
 
 const Config = () => {
   const [width, setWidth] = useState('100%');
@@ -62,21 +62,22 @@ const Config = () => {
     getConfig('config.sh');
   }, []);
 
-  useEffect(()=>{
+  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{
+    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
@@ -116,12 +117,14 @@ const Config = () => {
         theme={theme}
         options={{
           fontSize: 12,
-          minimap: {enabled: width==='100%'},
+          minimap: { enabled: width === '100%' },
           lineNumbersMinChars: 3,
           folding: false,
-          glyphMargin: false
+          glyphMargin: false,
+        }}
+        onChange={(val) => {
+          setValue((val as string).replace(/\r\n/g, '\n'));
         }}
-        onChange={(val) => {setValue(val as string)}}
       />
     </PageContainer>
   );

diff --git a/src/pages/log/index.tsx b/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 Editor from "@monaco-editor/react";
+import Editor from '@monaco-editor/react';
 import { request } from '@/utils/http';
 import styles from './index.module.less';
 
@@ -120,21 +120,22 @@ const Log = () => {
     setHeight(treeDom.current.clientHeight);
   }, []);
 
-  useEffect(()=>{
+  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{
+    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
@@ -194,14 +195,16 @@ const Log = () => {
           options={{
             readOnly: true,
             fontSize: 12,
-            minimap: {enabled: width==='100%'},
+            minimap: { enabled: width === '100%' },
             lineNumbersMinChars: 3,
             fontFamily: 'Source Code Pro',
             folding: false,
             glyphMargin: false,
-            wordWrap: 'on'
+            wordWrap: 'on',
+          }}
+          onChange={(val, ev) => {
+            setValue((val as string).replace(/\r\n/g, '\n'));
           }}
-          onChange={(val, ev) => {setValue(val as string)}}
         />
       </div>
     </PageContainer>

diff --git a/src/pages/script/index.tsx b/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 Editor from "@monaco-editor/react";
+import Editor from '@monaco-editor/react';
 import { request } from '@/utils/http';
 import styles from './index.module.less';
 
@@ -23,6 +23,7 @@ const LangMap: any = {
   '.py': 'python',
   '.js': 'javascript',
   '.sh': 'shell',
+  '.ts': 'typescript',
 };
 
 const Script = () => {
@@ -95,21 +96,22 @@ const Script = () => {
     setHeight(treeDom.current.clientHeight);
   }, []);
 
-  useEffect(()=>{
+  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{
+    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
@@ -169,12 +171,15 @@ const Script = () => {
           options={{
             readOnly: true,
             fontSize: 12,
-            minimap: {enabled: width==='100%'},
+            minimap: { enabled: width === '100%' },
             lineNumbersMinChars: 3,
             folding: false,
             glyphMargin: false,
+            default
+          }}
+          onChange={(val) => {
+            setValue((val as string).replace(/\r\n/g, '\n'));
           }}
-          onChange={(val) => {setValue(val as string)}}
         />
       </div>
     </PageContainer>