修复查看脚本高亮

.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',
   ],
 });

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

src/pages/config/index.tsx

@@ -65,6 +65,7 @@ const Config = () => {
     <PageContainer
       className="ql-container-wrapper config-wrapper"
       title={title}
+      loading={loading}
       extra={[
         <TreeSelect
           className="config-select"

src/pages/log/index.tsx

@@ -170,7 +170,6 @@ const Log = () => {
             lineWrapping: true,
             styleActiveLine: true,
             matchBrackets: true,
-            mode: 'shell',
             readOnly: true,
           }}
           onBeforeChange={(editor, data, value) => {

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<any[]>([]);
   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 = () => {
     <PageContainer
       className="ql-container-wrapper log-wrapper"
       title={title}
+      loading={loading}
       extra={
         isPhone && [
           <TreeSelect
@@ -136,7 +146,7 @@ const Script = () => {
             lineWrapping: true,
             styleActiveLine: true,
             matchBrackets: true,
-            mode: 'shell',
+            mode,
             readOnly: true,
           }}
           onBeforeChange={(editor, data, value) => {