系统设置增加系统运行日志

src/layouts/index.less

@@ -1,6 +1,5 @@
 @import '~antd/es/style/themes/default.less';
 @import '~@/styles/variable.less';
-@import '~codemirror/lib/codemirror.css';
 
 @font-face {
   font-family: 'Source Code Pro';

src/layouts/index.tsx

@@ -32,9 +32,6 @@ import {
 import SockJS from 'sockjs-client';
 import * as Sentry from '@sentry/react';
 import { init } from '../utils/init';
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/python/python';
-import 'codemirror/mode/shell/shell';
 
 export interface SharedContext {
   headerStyle: React.CSSProperties;

src/locales/en-US.json

@@ -448,5 +448,7 @@
   "编辑订阅": "Edit Subscription",
   "Subscription表达式格式有误": "Incorrect Subscription Expression Format",
   "一对多推送的“群组编码”（一对多推送下面->您的群组(如无则新建)->群组编码，如果您是创建群组人。也需点击“查看二维码”扫描绑定，否则不能接受群组消息推送）": "The 'Group Code' for One-to-Many Push (Below One-to-Many Push->Your Group (if not, create one)->Group Code, if you are the creator of the group, you also need to click 'View QR Code' to scan and bind, otherwise you cannot receive group messages)",
-  "登录已过期，请重新登录": "Login session has expired, please log in again"
+  "登录已过期，请重新登录": "Login session has expired, please log in again",
+  "系统日志": "System Logs",
+  "主题": "Theme"
 }

src/locales/zh-CN.json

@@ -448,5 +448,7 @@
   "编辑订阅": "编辑订阅",
   "Subscription表达式格式有误": "Subscription表达式格式有误",
   "一对多推送的“群组编码”（一对多推送下面->您的群组(如无则新建)->群组编码，如果您是创建群组人。也需点击“查看二维码”扫描绑定，否则不能接受群组消息推送）": "一对多推送的“群组编码”（一对多推送下面->您的群组(如无则新建)->群组编码，如果您是创建群组人。也需点击“查看二维码”扫描绑定，否则不能接受群组消息推送）",
-  "登录已过期，请重新登录": "登录已过期，请重新登录"
+  "登录已过期，请重新登录": "登录已过期，请重新登录",
+  "系统日志": "系统日志",
+  "主题": "主题"
 }

src/pages/config/index.tsx

@@ -11,9 +11,10 @@ import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
 import Editor from '@monaco-editor/react';
-import { Controlled as CodeMirror } from 'react-codemirror2';
+import CodeMirror from '@uiw/react-codemirror';
 import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
+import { langs } from '@uiw/codemirror-extensions-langs';
 
 const Config = () => {
   const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
@@ -104,16 +105,11 @@ const Config = () => {
       {isPhone ? (
         <CodeMirror
           value={value}
-          options={{
-            lineNumbers: true,
-            styleActiveLine: true,
-            matchBrackets: true,
-            mode: 'shell',
-          }}
-          onBeforeChange={(editor, data, value) => {
+          theme={theme.includes('dark') ? 'dark' : 'light'}
+          extensions={[langs.shell()]}
+          onChange={(value) => {
             setValue(value);
           }}
-          onChange={(editor, data, value) => {}}
         />
       ) : (
         <Editor

src/pages/log/index.tsx

@@ -16,7 +16,7 @@ import { PageContainer } from '@ant-design/pro-layout';
 import Editor from '@monaco-editor/react';
 import { request } from '@/utils/http';
 import styles from './index.module.less';
-import { Controlled as CodeMirror } from 'react-codemirror2';
+import CodeMirror from '@uiw/react-codemirror';
 import SplitPane from 'react-split-pane';
 import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
@@ -278,17 +278,11 @@ const Log = () => {
         {isPhone && (
           <CodeMirror
             value={value}
-            options={{
-              lineNumbers: true,
-              lineWrapping: true,
-              styleActiveLine: true,
-              matchBrackets: true,
-              readOnly: true,
-            }}
-            onBeforeChange={(editor, data, value) => {
+            readOnly={true}
+            theme={theme.includes('dark') ? 'dark' : 'light'}
+            onChange={(value, viewUpdate) => {
               setValue(value);
             }}
-            onChange={(editor, data, value) => {}}
           />
         )}
       </div>

src/pages/script/index.tsx

@@ -20,7 +20,7 @@ import Editor from '@monaco-editor/react';
 import { request } from '@/utils/http';
 import styles from './index.module.less';
 import EditModal from './editModal';
-import { Controlled as CodeMirror } from 'react-codemirror2';
+import CodeMirror from '@uiw/react-codemirror';
 import SplitPane from 'react-split-pane';
 import {
   DeleteOutlined,
@@ -43,6 +43,7 @@ import useFilterTreeData from '@/hooks/useFilterTreeData';
 import uniq from 'lodash/uniq';
 import IconFont from '@/components/iconfont';
 import RenameModal from './renameModal';
+import { langs } from '@uiw/codemirror-extensions-langs';
 
 const { Text } = Typography;
 
@@ -580,18 +581,14 @@ const Script = () => {
         {isPhone && (
           <CodeMirror
             value={value}
-            options={{
-              lineNumbers: true,
-              lineWrapping: true,
-              styleActiveLine: true,
-              matchBrackets: true,
-              mode,
-              readOnly: !isEditing,
-            }}
-            onBeforeChange={(editor, data, value) => {
+            extensions={
+              mode ? [langs[mode as keyof typeof langs]()] : undefined
+            }
+            theme={theme.includes('dark') ? 'dark' : 'light'}
+            readOnly={!isEditing}
+            onChange={(value) => {
               setValue(value);
             }}
-            onChange={(editor, data, value) => {}}
           />
         )}
         <EditModal

src/pages/setting/index.tsx

@@ -1,5 +1,5 @@
 import intl from 'react-intl-universal';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Button,
   InputNumber,
@@ -32,6 +32,7 @@ import About from './about';
 import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
 import './index.less';
+import CodeMirror from '@uiw/react-codemirror';
 
 const { Text } = Typography;
 const isDemoEnv = window.__ENV__DeployEnv === 'demo';
@@ -41,6 +42,7 @@ const Setting = () => {
     headerStyle,
     isPhone,
     user,
+    theme,
     reloadUser,
     reloadTheme,
     socketMessage,
@@ -113,7 +115,9 @@ const Setting = () => {
   const [editedApp, setEditedApp] = useState<any>();
   const [tabActiveKey, setTabActiveKey] = useState('security');
   const [loginLogData, setLoginLogData] = useState<any[]>([]);
+  const [systemLogData, setSystemLogData] = useState<string>('');
   const [notificationInfo, setNotificationInfo] = useState<any>();
+  const systemLogRef = useRef<any>();
 
   const getApps = () => {
     setLoading(true);
@@ -232,6 +236,19 @@ const Setting = () => {
       });
   };
 
+  const getSystemLog = () => {
+    request
+      .get<Blob>(`${config.apiPrefix}system/log`, {
+        responseType: 'blob',
+      })
+      .then(async (res) => {
+        setSystemLogData(await res.text());
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  };
+
   const tabChange = (activeKey: string) => {
     setTabActiveKey(activeKey);
     if (activeKey === 'app') {
@@ -240,6 +257,8 @@ const Setting = () => {
       getLoginLog();
     } else if (activeKey === 'notification') {
       getNotification();
+    } else if (activeKey === 'syslog') {
+      getSystemLog();
     }
   };
 
@@ -332,6 +351,30 @@ const Setting = () => {
               />
             ),
           },
+          {
+            key: 'syslog',
+            label: intl.get('系统日志'),
+            children: (
+              <CodeMirror
+                ref={systemLogRef}
+                maxHeight={`calc(100vh - ${
+                  systemLogRef.current?.editor?.getBoundingClientRect()?.top +
+                  16
+                }px)`}
+                value={systemLogData}
+                onCreateEditor={(view) => {
+                  setTimeout(() => {
+                    view.scrollDOM.scrollTo({
+                      top: view.scrollDOM.scrollHeight,
+                      behavior: 'smooth',
+                    });
+                  }, 300);
+                }}
+                readOnly={true}
+                theme={theme.includes('dark') ? 'dark' : 'light'}
+              />
+            ),
+          },
           {
             key: 'about',
             label: intl.get('关于'),

src/pages/setting/loginLog.tsx

@@ -19,7 +19,7 @@ enum LoginStatusColor {
 const columns = [
   {
     title: intl.get('序号'),
-    width: 40,
+    width: 50,
     render: (text: string, record: any, index: number) => {
       return index + 1;
     },
@@ -75,7 +75,7 @@ const LoginLog = ({ data }: any) => {
         dataSource={data}
         rowKey="id"
         size="middle"
-        scroll={{ x: 768 }}
+        scroll={{ x: 1000 }}
         sticky
       />
     </>