Optimize:Optimized tree structure search

shanhexi · shanhexi · commit 0f4863888e6a · 2023-12-15T14:42:18.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## 3.1.12
+
+`2023-12-15`
+
+**Changelog**
+
+- ⚡️【Optimize】Optimized tree structure search
+- ⚡️【Optimize】Tree structure search box resident
+
 ## 3.1.11
 
 `2023-12-13`
diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -1,3 +1,12 @@
+## 3.1.12
+
+`2023-12-15`
+
+**更新日志**
+
+- ⚡️【优化】优化树结构搜索
+- ⚡️【优化】树结构搜索框常驻
+
 ## 3.1.11
 
 `2023-12-13`
diff --git a/chat2db-client/src/blocks/Tree/index.tsx b/chat2db-client/src/blocks/Tree/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useState, createContext, useContext, useRef } from 'react';
+import React, { memo, useEffect, useMemo, useState, createContext, useContext } from 'react';
 import styles from './index.less';
 import classnames from 'classnames';
 import Iconfont from '@/components/Iconfont';
@@ -48,6 +48,40 @@ const smoothTree = (treeData: ITreeNode[], result: ITreeNode[] = [], parentNode?
   return result;
 };
 
+// 判断是否匹配
+const isMatch = (target: string, searchValue: string) => {
+  const reg = new RegExp(searchValue, 'i');
+  return reg.test(target || '');
+};
+
+// 树结构搜索
+function searchTree(treeData: ITreeNode[], searchValue: string): ITreeNode[] {
+  let result: ITreeNode[] = [];
+  function dfs(node: ITreeNode, path: ITreeNode[] = []) {
+    if (isMatch(node.name, searchValue)) {
+      result = [...path, node];
+      return true;
+    }
+    if (!node.children) return false;
+    for (const child of node.children) {
+      if (dfs(child, [...path, node])) return true;
+    }
+    return false;
+  }
+
+  treeData.some((node) => dfs(node));
+
+  result.forEach((item) => {
+    if(!isMatch(item.name, searchValue)){
+      item.children = null;
+    }
+  });
+
+  const smoothTreeList: ITreeNode[] = []
+  smoothTree(result, smoothTreeList);
+  return smoothTreeList;
+}
+
 const itemHeight = 26; // 每个 item 的高度
 const paddingCount = 2;
 
@@ -89,17 +123,13 @@ const Tree = (props: IProps) => {
   }, [smoothTreeData, searchTreeData, startIdx]);
 
   useEffect(() => {
-    if (searchValue) {
-      const ls = smoothTreeData.filter((item) => {
-        const reg = new RegExp(searchValue, 'i');
-        return reg.test(item.name || '');
-      });
-      setSearchTreeData(ls);
+    if (searchValue && treeData) {
+      setSearchTreeData(searchTree(cloneDeep(treeData), searchValue));
     } else {
       setSearchTreeData(null);
     }
     setScrollTop(0);
-  }, [searchValue]);
+  }, [searchValue, smoothTreeData]);
 
   return (
     <LoadingContent isLoading={!treeData} className={classnames(className)}>
diff --git a/chat2db-client/src/pages/main/workspace/components/OperationLine/index.less b/chat2db-client/src/pages/main/workspace/components/OperationLine/index.less
@@ -18,6 +18,6 @@
 
 .searchBox{
   flex-shrink: 0;
-  padding: 2px 4px;
+  padding: 4px;
   border-top: 1px solid var(--color-border-secondary);
 }
diff --git a/chat2db-client/src/pages/main/workspace/components/OperationLine/index.tsx b/chat2db-client/src/pages/main/workspace/components/OperationLine/index.tsx
@@ -74,7 +74,7 @@ const OperationLine = (props: IProps) => {
             boxSize={20}
             size={14}
           />
-          {searchIng ? (
+          {/* {searchIng ? (
             <Iconfont
               onClick={() => {
                 setSearchIng(false);
@@ -94,22 +94,22 @@ const OperationLine = (props: IProps) => {
               boxSize={20}
               size={14}
             />
-          )}
+          )} */}
         </div>
         {/* <div>1</div> */}
       </div>
-      {searchIng && (
-        <div className={styles.searchBox}>
-          <Input
-            size="small"
-            prefix={<Iconfont code="&#xe888;" />}
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-            allowClear
-            placeholder={i18n('workspace.tree.search.placeholder')}
-          />
-        </div>
-      )}
+      {/* {searchIng && ( */}
+      <div className={styles.searchBox}>
+        <Input
+          size="small"
+          prefix={<Iconfont code="&#xe888;" />}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          allowClear
+          placeholder={i18n('workspace.tree.search.placeholder')}
+        />
+      </div>
+      {/* )} */}
     </>
   );
 };

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,6 @@`
`18`	`18`
`19`	`19`	`.searchBox{`
`20`	`20`	`flex-shrink: 0;`
`21`		`- padding: 2px 4px;`
	`21`	`+ padding: 4px;`
`22`	`22`	`border-top: 1px solid var(--color-border-secondary);`
`23`	`23`	`}`