From 105c0f802fda7306ad1b7e552b7b96fb16ca4647 Mon Sep 17 00:00:00 2001 From: hanhh <18330117883@163.com> Date: Mon, 26 Jul 2021 22:57:59 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dwindows=E6=8D=A2=E8=A1=8C?= =?UTF-8?q?=E7=AC=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/config/index.tsx | 31 +++++++++++++++++-------------- src/pages/log/index.tsx | 31 +++++++++++++++++-------------- src/pages/script/index.tsx | 31 ++++++++++++++++++------------- 3 files changed, 52 insertions(+), 41 deletions(-) diff --git a/src/pages/config/index.tsx b/src/pages/config/index.tsx index bcfc70b2..031cce9e 100644 --- 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 ( { 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)}} /> ); diff --git a/src/pages/log/index.tsx b/src/pages/log/index.tsx index f2a1cea0..d91f044d 100644 --- 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 ( { 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)}} /> diff --git a/src/pages/script/index.tsx b/src/pages/script/index.tsx index 35ad05de..098ba082 100644 --- 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 ( { 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)}} />