系统日志增加时间筛选和清空

src/layouts/index.less

@@ -462,3 +462,8 @@ body[data-dark='true'] {
     --antd-arrow-background-color: rgb(24, 26, 27);
   }
 }
+
+.ant-tabs-content-holder {
+  flex: 1;
+  overflow-y: auto;
+}

src/pages/setting/index.tsx

@@ -124,15 +124,14 @@ 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 containergRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number>(0);
 
   useResizeObserver(containergRef, (entry) => {
     const _height = entry.target.parentElement?.parentElement?.offsetHeight;
-    if (_height && height !== _height - 66) {
-      setHeight(_height - 66);
+    if (_height && height !== _height - 110) {
+      setHeight(_height - 110);
     }
   });
 
@@ -253,19 +252,6 @@ 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') {
@@ -274,8 +260,6 @@ const Setting = () => {
       getLoginLog();
     } else if (activeKey === 'notification') {
       getNotification();
-    } else if (activeKey === 'syslog') {
-      getSystemLog();
     }
   };
 
@@ -315,12 +299,14 @@ const Setting = () => {
           : []
       }
     >
-      <div ref={containergRef}>
+      <div ref={containergRef} style={{ height: '100%' }}>
         <Tabs
+          style={{ height: '100%' }}
           defaultActiveKey="security"
           size="small"
           tabPosition="top"
           onChange={tabChange}
+          destroyInactiveTabPane
           items={[
             ...(!isDemoEnv
               ? [
@@ -356,9 +342,7 @@ const Setting = () => {
             {
               key: 'syslog',
               label: intl.get('系统日志'),
-              children: (
-                <SystemLog data={systemLogData} height={height} theme={theme} />
-              ),
+              children: <SystemLog height={height} theme={theme} />,
             },
             {
               key: 'login',
@@ -383,7 +367,7 @@ const Setting = () => {
               children: <About systemInfo={systemInfo} />,
             },
           ]}
-        ></Tabs>
+        />
       </div>
       <AppModal
         visible={isModalVisible}

src/pages/setting/systemLog.tsx

@@ -1,13 +1,39 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
-import { Button } from 'antd';
+import { Button, DatePicker, Empty, message, Spin } from 'antd';
 import {
   VerticalAlignBottomOutlined,
   VerticalAlignTopOutlined,
 } from '@ant-design/icons';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+import { useRequest } from 'ahooks';
+import moment from 'moment';
 
-const SystemLog = ({ data, height, theme }: any) => {
+const { RangePicker } = DatePicker;
+
+const SystemLog = ({ height, theme }: any) => {
   const editorRef = useRef<any>(null);
+  const panelVisiableRef = useRef<[string, string] | false>();
+  const [range, setRange] = useState<string[]>(['', '']);
+  const [systemLogData, setSystemLogData] = useState<string>('');
+
+  const { loading, refresh } = useRequest(
+    () => {
+      return request.get<Blob>(
+        `${config.apiPrefix}system/log?startTime=${range[0]}&endTime=${range[1]}`,
+        {
+          responseType: 'blob',
+        },
+      );
+    },
+    {
+      refreshDeps: [range],
+      async onSuccess(res) {
+        setSystemLogData(await res.text());
+      },
+    },
+  );
 
   const scrollTo = (position: 'start' | 'end') => {
     editorRef.current.scrollDOM.scrollTo({
@@ -15,42 +41,93 @@ const SystemLog = ({ data, height, theme }: any) => {
     });
   };
 
+  const deleteLog = () => {
+    request.delete(`${config.apiPrefix}system/log`).then((x) => {
+      message.success('删除成功');
+      refresh();
+    });
+  };
+
   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');
+      <div>
+        <RangePicker
+          style={{ marginBottom: 12, marginRight: 12 }}
+          disabledDate={(date) =>
+            date > moment() || date < moment().subtract(7, 'days')
+          }
+          defaultValue={[moment(), moment()]}
+          onOpenChange={(v) => {
+            panelVisiableRef.current = v ? ['', ''] : false;
+          }}
+          onCalendarChange={(_, dates, { range }) => {
+            if (
+              !panelVisiableRef.current ||
+              typeof panelVisiableRef.current === 'boolean'
+            ) {
+              return;
+            }
+            if (range === 'start') {
+              panelVisiableRef.current[0] = dates[0];
+            }
+            if (range === 'end') {
+              panelVisiableRef.current[1] = dates[1];
+            }
+            if (panelVisiableRef.current[0] && panelVisiableRef.current[1]) {
+              setRange(dates);
+            }
           }}
         />
         <Button
-          size='small'
-          icon={<VerticalAlignBottomOutlined />}
           onClick={() => {
-            scrollTo('end');
+            deleteLog();
           }}
-        />
+        >
+          清空日志
+        </Button>
       </div>
+      {systemLogData ? (
+        <>
+          <CodeMirror
+            maxHeight={`${height}px`}
+            value={systemLogData}
+            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>
+        </>
+      ) : loading ? (
+        <Spin />
+      ) : (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      )}
     </div>
   );
 };