diff --git a/.umirc.ts b/.umirc.ts index 94e49782..976e87d6 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -34,8 +34,10 @@ export default defineConfig({ scripts: [ 'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.production.min.js', 'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.production.min.js', - 'https://cdn.jsdelivr.net/npm/codemirror@5.60.0/lib/codemirror.min.js', + 'https://cdn.jsdelivr.net/npm/codemirror@5.62.0/lib/codemirror.min.js', 'https://cdn.jsdelivr.net/npm/darkreader@4.9.27/darkreader.min.js', - 'https://cdn.jsdelivr.net/npm/codemirror@5.60.0/mode/shell/shell.js', + 'https://cdn.jsdelivr.net/npm/codemirror@5.62.0/mode/shell/shell.js', + 'https://cdn.jsdelivr.net/npm/codemirror@5.62.0/mode/python/python.js', + 'https://cdn.jsdelivr.net/npm/codemirror@5.62.0/mode/javascript/javascript.js', ], }); diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 116cea28..1717dbd2 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -10,7 +10,6 @@ import defaultProps from './defaultProps'; import { Link, history } from 'umi'; import { LogoutOutlined } from '@ant-design/icons'; import config from '@/utils/config'; -import 'codemirror/mode/shell/shell.js'; import { request } from '@/utils/http'; import './index.less'; import vhCheck from 'vh-check'; diff --git a/src/pages/config/index.tsx b/src/pages/config/index.tsx index 438438da..34fb9215 100644 --- a/src/pages/config/index.tsx +++ b/src/pages/config/index.tsx @@ -65,6 +65,7 @@ const Config = () => { { lineWrapping: true, styleActiveLine: true, matchBrackets: true, - mode: 'shell', readOnly: true, }} onBeforeChange={(editor, data, value) => { diff --git a/src/pages/script/index.tsx b/src/pages/script/index.tsx index 8d84a0a4..ca419f83 100644 --- a/src/pages/script/index.tsx +++ b/src/pages/script/index.tsx @@ -19,6 +19,12 @@ function getFilterData(keyword: string, data: any) { return { tree: data }; } +const LangMap: any = { + '.py': 'python', + '.js': 'javascript', + '.sh': 'shell', +}; + const Script = () => { const [width, setWidth] = useState('100%'); const [marginLeft, setMarginLeft] = useState(0); @@ -30,25 +36,28 @@ const Script = () => { const [filterData, setFilterData] = useState([]); const [loading, setLoading] = useState(false); const [isPhone, setIsPhone] = useState(false); + const [mode, setMode] = useState(''); const getScripts = () => { - request.get(`${config.apiPrefix}scripts/files`).then((data) => { - setData(data.data); - setFilterData(data.data); - }); - }; - - const getDetail = (node: any) => { setLoading(true); request - .get(`${config.apiPrefix}scripts/${node.value}`) + .get(`${config.apiPrefix}scripts/files`) .then((data) => { - setValue(data.data); + setData(data.data); + setFilterData(data.data); }) .finally(() => setLoading(false)); }; + const getDetail = (node: any) => { + request.get(`${config.apiPrefix}scripts/${node.value}`).then((data) => { + setValue(data.data); + }); + }; + const onSelect = (value: any, node: any) => { + const newMode = LangMap[value.slice(-3)] || ''; + setMode(newMode); setSelect(value); setTitle(node.parent || node.value); getDetail(node); @@ -86,6 +95,7 @@ const Script = () => { { lineWrapping: true, styleActiveLine: true, matchBrackets: true, - mode: 'shell', + mode, readOnly: true, }} onBeforeChange={(editor, data, value) => {