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

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>
   );
 };