From 6549eeaf103e94533c8e78bc417fdcd5eb9793da Mon Sep 17 00:00:00 2001 From: zt8989 <251027705@qq.com> Date: Sun, 6 Jun 2021 15:28:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B7=A6=E4=BE=A7=E6=97=A5?= =?UTF-8?q?=E5=BF=97=E7=AD=9B=E9=80=89=20(#241)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 增加左侧日志筛选 Co-authored-by: 周腾 --- src/layouts/index.less | 4 + src/pages/log/index.less | 0 src/pages/log/index.module.less | 38 +++++++++ src/pages/log/index.tsx | 134 ++++++++++++++++++++++++-------- src/styles/variable.less | 1 + 5 files changed, 146 insertions(+), 31 deletions(-) delete mode 100644 src/pages/log/index.less create mode 100644 src/pages/log/index.module.less create mode 100644 src/styles/variable.less diff --git a/src/layouts/index.less b/src/layouts/index.less index 01730bfa..1fd3fb67 100644 --- a/src/layouts/index.less +++ b/src/layouts/index.less @@ -1,3 +1,4 @@ +@import '~@/styles/variable.less'; body { height: 100%; overflow-y: hidden; @@ -55,10 +56,13 @@ body { .ant-pro-grid-content.wide .ant-pro-page-container-children-content { height: calc(100vh - 184px); height: calc(100vh - var(--vh-offset, 0px) - 184px); + margin-left: 0; + margin-right: 0; } .CodeMirror { height: calc(100vh - 216px); height: calc(100vh - var(--vh-offset, 0px) - 216px); + width: calc(100vw - 32px); } } .CodeMirror { diff --git a/src/pages/log/index.less b/src/pages/log/index.less deleted file mode 100644 index e69de29b..00000000 diff --git a/src/pages/log/index.module.less b/src/pages/log/index.module.less new file mode 100644 index 00000000..6eed1ad4 --- /dev/null +++ b/src/pages/log/index.module.less @@ -0,0 +1,38 @@ +@import '~@/styles/variable.less'; + +.left-tree { + &-container { + overflow: hidden; + position: relative; + 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; + } +} + +.log-container { + display: flex; +} + +:global { + .log-wrapper { + .ant-pro-grid-content.wide .ant-pro-page-container-children-content { + padding: 0; + background-color: #f8f8f8; + } + + .CodeMirror { + width: calc(100% - 32px - @tree-width); + } + } +} diff --git a/src/pages/log/index.tsx b/src/pages/log/index.tsx index efa2f9da..a18840d8 100644 --- a/src/pages/log/index.tsx +++ b/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: any) => { + if (item.title.includes(keyword)) { + tree.push(item); + expandedKeys.push(...item.children.map((x: any) => 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,16 @@ const Log = () => { const [title, setTitle] = useState('请选择日志文件'); const [value, setValue] = useState('请选择日志文件'); const [select, setSelect] = useState(); - const [data, setData] = useState(); + const [data, setData] = useState([]); + const [filterData, setFilterData] = useState([]); const [loading, setLoading] = useState(false); + const [isPhone, setIsPhone] = 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 +60,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,15 +88,30 @@ 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 } = getFilterData(keyword, data); + setFilterData(tree); + }, + [data, setFilterData], + ); + useEffect(() => { if (document.body.clientWidth < 768) { setWdith('auto'); setMarginLeft(0); setMarginTop(0); + setIsPhone(true); } else { setWdith('100%'); setMarginLeft(0); setMarginTop(-72); + setIsPhone(false); } getConfig(); }, []); @@ -67,18 +120,20 @@ const Log = () => { , - ]} + extra={ + isPhone && [ + , + ] + } header={{ style: { padding: '4px 16px 4px 15px', @@ -92,21 +147,38 @@ const Log = () => { }, }} > - { - setValue(value); - }} - onChange={(editor, data, value) => {}} - /> +
+ {!isPhone && ( +
+ +
+ +
+
+ )} + { + setValue(value); + }} + onChange={(editor, data, value) => {}} + /> +
); }; diff --git a/src/styles/variable.less b/src/styles/variable.less new file mode 100644 index 00000000..4362a4ae --- /dev/null +++ b/src/styles/variable.less @@ -0,0 +1 @@ +@tree-width: 300px;