From 9f7beb934d2c1dd01512c558dbc89f09d6e31e13 Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Fri, 13 Oct 2023 23:44:28 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=97=A5=E5=BF=97=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E7=BD=AE=E9=A1=B6=E7=BD=AE=E5=BA=95=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/setting/index.tsx     | 19 ++---------
 src/pages/setting/systemLog.tsx | 58 +++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 17 deletions(-)
 create mode 100644 src/pages/setting/systemLog.tsx

diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx
index 03a8e035e09..9ba993d50c2 100644
--- a/src/pages/setting/index.tsx
+++ b/src/pages/setting/index.tsx
@@ -32,8 +32,8 @@ import About from './about';
 import { useOutletContext } from '@umijs/max';
 import { SharedContext } from '@/layouts';
 import './index.less';
-import CodeMirror from '@uiw/react-codemirror';
 import useResizeObserver from '@react-hook/resize-observer';
+import SystemLog from './systemLog';
 
 const { Text } = Typography;
 const isDemoEnv = window.__ENV__DeployEnv === 'demo';
@@ -347,22 +347,7 @@ const Setting = () => {
             {
               key: 'syslog',
               label: intl.get('系统日志'),
-              children: (
-                <CodeMirror
-                  maxHeight={`${height}px`}
-                  value={systemLogData}
-                  onCreateEditor={(view) => {
-                    setTimeout(() => {
-                      view.scrollDOM.scrollTo({
-                        top: view.scrollDOM.scrollHeight,
-                        behavior: 'smooth',
-                      });
-                    }, 300);
-                  }}
-                  readOnly={true}
-                  theme={theme.includes('dark') ? 'dark' : 'light'}
-                />
-              ),
+              children: <SystemLog data={systemLogData} height={height} theme={theme}/>,
             },
             {
               key: 'login',
diff --git a/src/pages/setting/systemLog.tsx b/src/pages/setting/systemLog.tsx
new file mode 100644
index 00000000000..575217578e9
--- /dev/null
+++ b/src/pages/setting/systemLog.tsx
@@ -0,0 +1,58 @@
+import React, { useRef } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
+import { Button } from 'antd';
+import {
+  VerticalAlignBottomOutlined,
+  VerticalAlignTopOutlined,
+} from '@ant-design/icons';
+
+const SystemLog = ({ data, height, theme }: any) => {
+  const editorRef = useRef<any>(null);
+
+  const scrollTo = (position: 'start' | 'end') => {
+    editorRef.current.scrollDOM.scrollTo({
+      top: position === 'start' ? 0 : editorRef.current.scrollDOM.scrollHeight,
+    });
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <CodeMirror
+        maxHeight={`${height}px`}
+        value={data}
+        onCreateEditor={(view) => {
+          editorRef.current = view;
+        }}
+        readOnly={true}
+        theme={theme.includes('dark') ? 'dark' : 'light'}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 20,
+          right: 20,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 10,
+        }}
+      >
+        <Button
+          size='small'
+          icon={<VerticalAlignTopOutlined />}
+          onClick={() => {
+            scrollTo('start');
+          }}
+        />
+        <Button
+          size='small'
+          icon={<VerticalAlignBottomOutlined />}
+          onClick={() => {
+            scrollTo('end');
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SystemLog;