From 9b388f614487dbd73585420474baa508212801e3 Mon Sep 17 00:00:00 2001
From: WmW <zhouzheng0646@qq.com>
Date: Fri, 26 Aug 2022 06:51:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A0=8F=20(#906,#781)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/src/components/Nav/index.module.less |  22 ++-
 website/src/components/Nav/index.tsx         | 137 ++++++++++++-------
 2 files changed, 106 insertions(+), 53 deletions(-)

diff --git a/website/src/components/Nav/index.module.less b/website/src/components/Nav/index.module.less
index d8d9af504e..2f59521d1b 100644
--- a/website/src/components/Nav/index.module.less
+++ b/website/src/components/Nav/index.module.less
@@ -1,28 +1,34 @@
 .logo {
-  width: 32px;
+  width: 'auto';
   padding: 25px 0 0 0;
   margin: 0 auto;
   z-index: 1;
   display: flex;
   justify-content: flex-start;
+
   span {
     display: none;
   }
+
   &.top {
     padding-top: 0;
+
     a {
       display: flex;
       align-items: center;
     }
+
     svg {
       height: 32px;
       margin-right: 10px;
     }
+
     span {
       display: inline-table;
       font-weight: bold;
       color: #fff;
       font-size: 16px;
+
       sup {
         font-weight: normal;
         padding-left: 5px;
@@ -34,27 +40,34 @@
 }
 
 .nav {
+  align-items: center;
   padding-top: 25px;
+  justify-content: space-between;
   flex: 1;
+
   svg {
     height: 18px;
     width: 18px;
     margin: 0 auto;
     margin-right: 6px;
+
     path {
       fill: currentColor;
     }
   }
+
   a {
     color: #9e9e9e;
     display: block;
     padding: 10px 0;
     text-align: center;
+
     &:global {
       &:hover svg.gitee path {
         fill: #c71d23 !important;
       }
     }
+
     &:global(.active) {
       color: #fff;
     }
@@ -67,13 +80,16 @@
   display: flex;
   justify-content: center;
   line-height: initial;
+
   a {
     padding: 0 10px;
     display: flex;
   }
+
   svg {
     display: flex;
   }
+
   // .logo {
   //   padding-top: 0;
   // }
@@ -84,11 +100,13 @@
   flex-direction: column;
   align-items: stretch;
   padding-bottom: 10px;
+
   a {
     display: block;
     padding: 10px 0;
     text-align: center;
   }
+
   button {
     background-color: transparent;
     border: 0;
@@ -100,9 +118,11 @@
   flex-direction: row;
   align-items: center;
   padding-bottom: 0;
+
   a {
     padding: 0;
   }
+
   svg {
     display: flex;
   }
diff --git a/website/src/components/Nav/index.tsx b/website/src/components/Nav/index.tsx
index eae7ae1c4f..113d0b579d 100644
--- a/website/src/components/Nav/index.tsx
+++ b/website/src/components/Nav/index.tsx
@@ -1,5 +1,5 @@
-import { Fragment, useContext, ChangeEvent } from 'react';
-import { Tooltip } from 'uiw';
+import { Fragment, useContext, ChangeEvent, useMemo, useState } from 'react';
+import { SearchSelect, Tooltip } from 'uiw';
 import { NavLink, Link } from 'react-router-dom';
 import styles from './index.module.less';
 import { ThemeContext } from '../../contexts';
@@ -13,13 +13,31 @@ import data from '../../menu.json';
 export default function Nav() {
   const { state, dispatch } = useContext(ThemeContext);
   const { t: trans, i18n } = useTranslation();
+  const [searchText, setSearchText] = useState('');
   // eslint-disable-next-line react-hooks/exhaustive-deps
   // const data = useMemo(() => JSON.parse(trans('menu')), [i18n.language]);
+  const menuSearchOption = useMemo(() => {
+    const components = data.find((m) => m.path === '/components')?.children || [];
+    const option = [];
+    for (let i = 0; i < components.length; i++) {
+      const com = components[i];
+      const label = com.name;
+      if (com.path && label.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())) {
+        const item = { label, value: com.path || '' };
+        option.push(item);
+      }
+    }
+    return option;
+  }, [searchText, i18n.language]);
 
   const changeLanguage = (e: ChangeEvent<HTMLSelectElement>) => {
     i18n.changeLanguage(e.target.value);
   };
 
+  const onSearchMenu = (searchText: string) => {
+    setSearchText(searchText);
+  };
+
   return (
     <Fragment>
       <div className={[styles.logo, state.layout === 'left' ? null : styles.top].filter(Boolean).join(' ').trim()}>
@@ -33,23 +51,53 @@ export default function Nav() {
         </Link>
       </div>
       <div className={[styles.nav, state.layout === 'left' ? null : styles.navTop].filter(Boolean).join(' ').trim()}>
-        {data.map(({ path, name, icon, translation }, idx: number) => {
-          if (Object.keys(nav).includes(icon)) {
-            icon = (nav as any)[icon];
-          }
-          let newName = translation ? trans(`menu.${translation}`) : trans(`menu.${path}`);
-          if (/^\//.test(path)) {
-            newName = trans(`menu.${path}`);
-          }
+        <div style={{ display: 'flex' }}>
+          {data.map(({ path, name, icon, translation }, idx: number) => {
+            if (Object.keys(nav).includes(icon)) {
+              icon = (nav as any)[icon];
+            }
+            let newName = translation ? trans(`menu.${translation}`) : trans(`menu.${path}`);
+            if (/^\//.test(path)) {
+              newName = trans(`menu.${path}`);
+            }
 
-          if (/^https?:(?:\/\/)?/.test(path)) {
+            if (/^https?:(?:\/\/)?/.test(path)) {
+              if (state.layout === 'top') {
+                return (
+                  <a key={idx} target="__blank" href={path} className={styles.outerUrl}>
+                    {icon} <span>{newName}</span>
+                  </a>
+                );
+              }
+              return (
+                <Tooltip
+                  usePortal={false}
+                  key={idx}
+                  placement={state.layout === 'left' ? 'right' : 'bottom'}
+                  content={<span style={{ whiteSpace: 'nowrap' }}>{newName}</span>}
+                >
+                  <a target="__blank" href={path} className={styles.outerUrl}>
+                    {icon}
+                  </a>
+                </Tooltip>
+              );
+            }
+            let activeStyle: React.CSSProperties = {
+              color: '#fff',
+            };
             if (state.layout === 'top') {
               return (
-                <a key={idx} target="__blank" href={path} className={styles.outerUrl}>
+                <NavLink
+                  to={path}
+                  key={idx}
+                  // @ts-ignore
+                  style={({ isActive }) => (isActive ? activeStyle : undefined)}
+                >
                   {icon} <span>{newName}</span>
-                </a>
+                </NavLink>
               );
             }
+
             return (
               <Tooltip
                 usePortal={false}
@@ -57,47 +105,32 @@ export default function Nav() {
                 placement={state.layout === 'left' ? 'right' : 'bottom'}
                 content={<span style={{ whiteSpace: 'nowrap' }}>{newName}</span>}
               >
-                <a target="__blank" href={path} className={styles.outerUrl}>
+                <NavLink
+                  to={path}
+                  // @ts-ignore
+                  style={({ isActive }) => (isActive ? activeStyle : undefined)}
+                >
                   {icon}
-                </a>
+                </NavLink>
               </Tooltip>
             );
-          }
-          let activeStyle: React.CSSProperties = {
-            color: '#fff',
-          };
-          if (state.layout === 'top') {
-            return (
-              <NavLink
-                to={path}
-                key={idx}
-                // @ts-ignore
-                style={({ isActive }) => (isActive ? activeStyle : undefined)}
-              >
-                {icon} <span>{newName}</span>
-              </NavLink>
-            );
-          }
-
-          return (
-            <Tooltip
-              usePortal={false}
-              key={idx}
-              placement={state.layout === 'left' ? 'right' : 'bottom'}
-              content={<span style={{ whiteSpace: 'nowrap' }}>{newName}</span>}
-            >
-              <NavLink
-                to={path}
-                // @ts-ignore
-                style={({ isActive }) => (isActive ? activeStyle : undefined)}
-              >
-                {icon}
-              </NavLink>
-            </Tooltip>
-          );
-        })}
+          })}
+        </div>
+        <SearchSelect
+          size="large"
+          style={{ width: 400, top: 30, display: 'flex', alignItems: 'center', marginLeft: 5 }}
+          placeholder="搜索组件"
+          showSearch={true}
+          onSearch={onSearchMenu}
+          value={searchText}
+          option={menuSearchOption}
+          onSelect={(value) => {
+            const isHttp = new RegExp(`^http`).test(value as string);
+            if (isHttp) window.open(value as string);
+            else window.location.href = `/#/components/${value}`;
+          }}
+        />
       </div>
-
       <div className={[styles.btn, state.layout === 'left' ? null : styles.btnTop].filter(Boolean).join(' ').trim()}>
         <select value={i18n.language} onChange={(e) => changeLanguage(e)}>
           <option value="zh-CN">简体中文</option>
@@ -109,9 +142,9 @@ export default function Nav() {
             {menu.china}
           </a>
         </Tooltip>
-        <button onClick={() => dispatch({ ...state, layout: state.layout === 'left' ? 'top' : 'left' })}>
+        {/* <button onClick={() => dispatch({ ...state, layout: state.layout === 'left' ? 'top' : 'left' })}>
           {state.layout === 'left' ? menu.menu : menu.menutop}
-        </button>
+        </button> */}
       </div>
     </Fragment>
   );