actiontech · anny1021 · Feb 23, 2024 · Feb 22, 2024 · Feb 22, 2024 · Feb 22, 2024
diff --git a/packages/base/src/page/Nav/SideMenu/ProjectSelector/MockSelectItemOptions.tsx b/packages/base/src/page/Nav/SideMenu/ProjectSelector/MockSelectItemOptions.tsx
@@ -1,12 +1,14 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import classNames from 'classnames';
-import { ProjectSelectorLabelStyleWrapper } from './style';
+import {
+  MockSelectItemOptionsStyleWrapper,
+  ProjectSelectorLabelStyleWrapper
+} from './style';
 import {
   IconProjectArchived,
   IconProjectFlag
 } from '@actiontech/shared/lib/Icon/common';
-import { CustomSelectPopupMenuStyleWrapper } from '@actiontech/shared/lib/components/CustomSelect/style';
 import { IBindProject } from './index.type';
 
 const MockSelectItemOptions: React.FC<{
@@ -16,7 +18,7 @@ const MockSelectItemOptions: React.FC<{
   const navigate = useNavigate();
   const [activeId, setActiveId] = useState('');
   return (
-    <CustomSelectPopupMenuStyleWrapper>
+    <MockSelectItemOptionsStyleWrapper>
       {list.map((v) => {
         return (
           <div
@@ -47,7 +49,7 @@ const MockSelectItemOptions: React.FC<{
           </div>
         );
       })}
-    </CustomSelectPopupMenuStyleWrapper>
+    </MockSelectItemOptionsStyleWrapper>
   );
 };
 

diff --git a/packages/base/src/page/Nav/SideMenu/ProjectSelector/index.tsx b/packages/base/src/page/Nav/SideMenu/ProjectSelector/index.tsx
@@ -13,6 +13,7 @@
 import { CustomSelectPopupMenuStyleWrapper } from '@actiontech/shared/lib/components/CustomSelect/style';
 import MockSelectItemOptions from './MockSelectItemOptions';
 import { ProjectSelectorProps } from './index.type';
+import { fuzzySearchAndSortByWeight } from '@actiontech/shared/lib/utils/Tool';
 
 const ProjectSelector: React.FC<ProjectSelectorProps> = ({
   value,
@@ -31,10 +32,10 @@
   >();
 
   const renderDropdown: SelectProps['dropdownRender'] = (menu) => {
-    const filterBindProjects = (bindProjects ?? []).filter((v) =>
-      v.project_name
-        ?.toLocaleLowerCase()
-        .includes(searchValue.toLocaleLowerCase())
+    const filterBindProjects = fuzzySearchAndSortByWeight(
+      searchValue,
+      bindProjects ?? [],
+      'project_name'
     );
 
     return (
@@ -83,7 +84,7 @@
                   setOpen(false);
                   setSearchValue('');
                 }}
-                list={filterBindProjects?.slice(0, 3) ?? []}
+                list={filterBindProjects ?? []}
               />
             )}
           </EmptyBox>

diff --git a/packages/base/src/page/Nav/SideMenu/ProjectSelector/style.ts b/packages/base/src/page/Nav/SideMenu/ProjectSelector/style.ts
@@ -1,4 +1,5 @@
 import { CustomSelect } from '@actiontech/shared/lib/components/CustomSelect';
+import { CustomSelectPopupMenuStyleWrapper } from '@actiontech/shared/lib/components/CustomSelect/style';
 
 import { styled } from '@mui/material/styles';
 
@@ -99,3 +100,10 @@ export const ProjectSelectorPopupMenuStyleWrapper = styled('div')`
     }
   }
 `;
+
+export const MockSelectItemOptionsStyleWrapper = styled(
+  CustomSelectPopupMenuStyleWrapper
+)`
+  max-height: 120px;
+  overflow-y: auto;
+`;
diff --git a/.../page/Nav/SideMenu/ProjectSelector/test/__snapshots__/MockSelectItemOptions.test.tsx.snap b/.../page/Nav/SideMenu/ProjectSelector/test/__snapshots__/MockSelectItemOptions.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`base/page/Nav/SideMenu/MockSelectItemOptions should render snap when ha
 <body>
   <div>
     <div
-      class="css-15pnbqu"
+      class="css-11lv9el"
     >
       <div
         class="ant-select-item ant-select-item-option"
@@ -82,7 +82,7 @@ exports[`base/page/Nav/SideMenu/MockSelectItemOptions should render snap when ha
 <body>
   <div>
     <div
-      class="css-15pnbqu"
+      class="css-11lv9el"
     >
       <div
         class="ant-select-item ant-select-item-option"
@@ -160,7 +160,7 @@ exports[`base/page/Nav/SideMenu/MockSelectItemOptions should render snap when ha
 <body>
   <div>
     <div
-      class="css-15pnbqu"
+      class="css-11lv9el"
     >
       <div
         class="ant-select-item ant-select-item-option"
@@ -238,7 +238,7 @@ exports[`base/page/Nav/SideMenu/MockSelectItemOptions should render snap when li
 <body>
   <div>
     <div
-      class="css-15pnbqu"
+      class="css-11lv9el"
     />
   </div>
 </body>

diff --git a/packages/base/src/page/Nav/SideMenu/ProjectSelector/test/__snapshots__/index.test.tsx.snap b/packages/base/src/page/Nav/SideMenu/ProjectSelector/test/__snapshots__/index.test.tsx.snap
@@ -515,7 +515,7 @@ exports[`base/page/Nav/SideMenu/ProjectSelector render snap when has data 5`] =
             您所属的项目
           </div>
           <div
-            class="css-15pnbqu"
+            class="css-11lv9el"
           >
             <div
               class="ant-select-item ant-select-item-option"

diff --git a/packages/shared/lib/utils/Tool.ts b/packages/shared/lib/utils/Tool.ts
@@ -1,9 +1,9 @@
-export function formatParamsBySeparator(formatParams: string | number) {
-  const val = (
-    typeof formatParams === 'number' && !Number.isNaN(formatParams)
-      ? formatParams + ''
-      : formatParams
-  ) as string;
+export function formatParamsBySeparator(formatParams: string | number): string {
+  if (Number.isNaN(formatParams)) {
+    return 'NaN';
+  }
+  const val =
+    typeof formatParams === 'number' ? formatParams + '' : formatParams;
   const result = [];
   let group = '';
   const [integerStr, floatStr] = val.split('.');
@@ -16,3 +16,38 @@ export function formatParamsBySeparator(formatParams: string | number) {
   }
   return `${result.join(',')}${floatStr ? '.' + floatStr : ''}`;
 }
+
+export function fuzzySearchAndSortByWeight<T extends Record<string, any>>(
+  query: string,
+  data: Array<T>,
+  key: keyof T
+): Array<T> {
+  if (!query) {
+    return data;
+  }
+  const filterRegex = new RegExp(query, 'i');
+
+  const results: Array<{ item: T } & { weight: number }> = [];
+
+  data.forEach((item) => {
+    const value = item[key];
+    if (!value || typeof value !== 'string') {
+      return item;
+    }
+
+    if (filterRegex.test(value)) {
+      if (value.toLowerCase() === query.toLowerCase()) {
+        results.unshift({ item, weight: 1000 });
+      } else {
+        const matchLen = query.length;
+        const totalLen = value.length;
+        const ratio = matchLen / totalLen;
+        const weight = ratio * 1000;
+
+        results.push({ item, weight });
+      }
+    }
+  });
+
+  return results.sort((a, b) => b.weight - a.weight).map((res) => res.item);
+}
diff --git a/packages/shared/lib/utils/__tests__/Tool.test.ts b/packages/shared/lib/utils/__tests__/Tool.test.ts
@@ -0,0 +1,56 @@
+import { formatParamsBySeparator, fuzzySearchAndSortByWeight } from '../Tool';
+
+describe('test utils/Tool', () => {
+  it('test formatParamsBySeparator', () => {
+    expect(formatParamsBySeparator(NaN)).toBe('NaN');
+
+    expect(formatParamsBySeparator(0)).toBe('0');
+    expect(formatParamsBySeparator(33)).toBe('33');
+    expect(formatParamsBySeparator(333)).toBe('333');
+    expect(formatParamsBySeparator(333.22)).toBe('333.22');
+    expect(formatParamsBySeparator(3334.22)).toBe('3,334.22');
+    expect(formatParamsBySeparator(3332334.224343)).toBe('3,332,334.224343');
+
+    expect(formatParamsBySeparator('0')).toBe('0');
+    expect(formatParamsBySeparator('33')).toBe('33');
+    expect(formatParamsBySeparator('333')).toBe('333');
+    expect(formatParamsBySeparator('333.22')).toBe('333.22');
+    expect(formatParamsBySeparator('3334.228')).toBe('3,334.228');
+    expect(formatParamsBySeparator('3332334.224343')).toBe('3,332,334.224343');
+  });
+
+  it('test fuzzySearchAndSortByWeight', () => {
+    expect(fuzzySearchAndSortByWeight('', [], '')).toEqual([]);
+    expect(fuzzySearchAndSortByWeight('', [{ foo: 'bar' }], 'foo')).toEqual([
+      { foo: 'bar' }
+    ]);
+
+    const data = [
+      { a: 'bar' },
+      { a: 'foo' },
+      { a: 'test-1' },
+      { a: 'tes' },
+      { a: 'test1' }
+    ];
+    expect(fuzzySearchAndSortByWeight('b', data, 'a')).toEqual([{ a: 'bar' }]);
+    expect(fuzzySearchAndSortByWeight('te', data, 'a')).toEqual([
+      { a: 'tes' },
+      { a: 'test1' },
+      { a: 'test-1' }
+    ]);
+    expect(fuzzySearchAndSortByWeight('est', data, 'a')).toEqual([
+      { a: 'test1' },
+      { a: 'test-1' }
+    ]);
+    expect(fuzzySearchAndSortByWeight('tes', data, 'a')).toEqual([
+      { a: 'tes' },
+      { a: 'test1' },
+      { a: 'test-1' }
+    ]);
+    expect(fuzzySearchAndSortByWeight('test', data, 'a')).toEqual([
+      { a: 'test1' },
+      { a: 'test-1' }
+    ]);
+    expect(fuzzySearchAndSortByWeight('test', data, 'a1' as any)).toEqual([]);
+  });
+});