系统日志增加置顶置底按钮

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: (
+              children: <SystemLog data={systemLogData} height={height} theme={theme}/>,
-                <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'}
-                />
-              ),
             },
             {
               key: 'login',

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;