增加左侧日志筛选

src/layouts/index.less

@@ -1,3 +1,4 @@
+@import '~@/styles/variable.less';
 body {
   height: 100%;
   overflow-y: hidden;
@@ -11,7 +12,7 @@ body {
     position: absolute;
     height: calc(100vh - 128px);
     height: calc(100vh - var(--vh-offset, 0px) - 128px);
-    width: calc(100% - 32px);
+    width: calc(100% - 32px - @tree-width);
   }
 }
 

src/pages/log/index.module.less

@@ -0,0 +1,39 @@
+@import '~@/styles/variable.less';
+
+.left-tree {
+  &-container {
+    overflow: hidden;
+    position: relative;
+    // padding: 16px 0;
+    background-color: #fff;
+    height: calc(100vh - 128px);
+    height: calc(100vh - var(--vh-offset, 0px) - 128px);
+    width: @tree-width;
+    display: flex;
+    flex-direction: column;
+  }
+  &-scroller {
+    flex: 1;
+    overflow: auto;
+  }
+  &-search {
+    margin-bottom: 16px;
+    // position: absolute;
+    // top: 0;
+    // left: 0;
+    // padding-bottom: 16px;
+  }
+}
+
+.log-container {
+  display: flex;
+}
+
+:global {
+  .log-wrapper {
+    .ant-pro-grid-content.wide .ant-pro-page-container-children-content {
+      padding: 0;
+      background-color: #f8f8f8;
+    }
+  }
+}

src/pages/log/index.tsx

@@ -1,9 +1,40 @@
-import React, { PureComponent, Fragment, useState, useEffect } from 'react';
-import { Button, message, Modal, TreeSelect } from 'antd';
+import { useState, useEffect, useCallback, Key } from 'react';
+import { TreeSelect, Tree, Input } from 'antd';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Controlled as CodeMirror } from 'react-codemirror2';
 import { request } from '@/utils/http';
+import styles from './index.module.less';
+
+function getFilterData(keyword: string, data: any) {
+  const expandedKeys: string[] = [];
+  if (keyword) {
+    const tree: any = [];
+    data.forEach((item) => {
+      if (item.title.includes(keyword)) {
+        tree.push(item);
+        expandedKeys.push(...item.children.map((x) => x.key));
+      } else {
+        const children: any[] = [];
+        (item.children || []).forEach((subItem: any) => {
+          if (subItem.title.includes(keyword)) {
+            children.push(subItem);
+          }
+        });
+        if (children.length > 0) {
+          tree.push({
+            ...item,
+            children,
+          });
+          expandedKeys.push(...children.map((x) => x.key));
+        }
+      }
+    });
+    return { tree, expandedKeys };
+  }
+  return { tree: data, expandedKeys };
+}
+
 const Log = () => {
   const [width, setWdith] = useState('100%');
   const [marginLeft, setMarginLeft] = useState(0);
@@ -11,12 +42,15 @@ const Log = () => {
   const [title, setTitle] = useState('请选择日志文件');
   const [value, setValue] = useState('请选择日志文件');
   const [select, setSelect] = useState();
-  const [data, setData] = useState();
+  const [data, setData] = useState<any[]>([]);
+  const [filterData, setFilterData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
 
   const getConfig = () => {
     request.get(`${config.apiPrefix}logs`).then((data) => {
-      setData(formatData(data.dirs) as any);
+      const result = formatData(data.dirs) as any;
+      setData(result);
+      setFilterData(result);
     });
   };
 
@@ -25,10 +59,13 @@ const Log = () => {
       x.title = x.name;
       x.value = x.name;
       x.disabled = x.isDir;
+      x.key = x.name;
       x.children = x.files.map((y: string) => ({
         title: y,
         value: `${x.name}/${y}`,
+        key: `${x.name}/${y}`,
         parent: x.name,
+        isLeaf: true,
       }));
       return x;
     });
@@ -50,6 +87,19 @@ const Log = () => {
     getLog(node);
   };
 
+  const onTreeSelect = useCallback((keys: Key[], e: any) => {
+    onSelect(keys[0], e.node);
+  }, []);
+
+  const onSearch = useCallback(
+    (e) => {
+      const keyword = e.target.value;
+      const { tree, expandedKeys } = getFilterData(keyword, data);
+      setFilterData(tree);
+    },
+    [data, setFilterData],
+  );
+
   useEffect(() => {
     if (document.body.clientWidth < 768) {
       setWdith('auto');
@@ -92,21 +142,36 @@ const Log = () => {
         },
       }}
     >
-      <CodeMirror
-        value={value}
-        options={{
-          lineNumbers: true,
-          lineWrapping: true,
-          styleActiveLine: true,
-          matchBrackets: true,
-          mode: 'shell',
-          readOnly: true,
-        }}
-        onBeforeChange={(editor, data, value) => {
-          setValue(value);
-        }}
-        onChange={(editor, data, value) => {}}
-      />
+      <div className={styles['log-container']}>
+        <div className={styles['left-tree-container']}>
+          <Input.Search
+            className={styles['left-tree-search']}
+            onChange={onSearch}
+          ></Input.Search>
+          <div className={styles['left-tree-scroller']}>
+            <Tree
+              className={styles['left-tree']}
+              treeData={filterData}
+              onSelect={onTreeSelect}
+            ></Tree>
+          </div>
+        </div>
+        <CodeMirror
+          value={value}
+          options={{
+            lineNumbers: true,
+            lineWrapping: true,
+            styleActiveLine: true,
+            matchBrackets: true,
+            mode: 'shell',
+            readOnly: true,
+          }}
+          onBeforeChange={(editor, data, value) => {
+            setValue(value);
+          }}
+          onChange={(editor, data, value) => {}}
+        />
+      </div>
     </PageContainer>
   );
 };

src/styles/variable.less

@@ -0,0 +1 @@
+@tree-width: 300px;