From 7f0be98b92386f881251e4d940b0d9c48508f371 Mon Sep 17 00:00:00 2001
From: wuduoyi <wuduoyi@baidu.com>
Date: Fri, 21 Aug 2020 12:54:47 +0800
Subject: [PATCH] =?UTF-8?q?tweak:=20=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/components/App.tsx       |  7 ++++---
 examples/components/DocSearch.jsx | 24 +++++++++++++-----------
 examples/style.scss               | 10 +++++++++-
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/examples/components/App.tsx b/examples/components/App.tsx
index 7f8c5403..88e01e82 100644
--- a/examples/components/App.tsx
+++ b/examples/components/App.tsx
@@ -281,9 +281,10 @@ export class App extends React.PureComponent {
               }}
             />
           </div>
-        </div>
-        <div className={`${theme.ns}Layout-searchBar hidden-xs hidden-sm`}>
-          <DocSearch theme={this.state.theme.value} />
+
+          <div className="hidden-xs p-t pull-right">
+            <DocSearch theme={this.state.theme.value} />
+          </div>
         </div>
 
         <a
diff --git a/examples/components/DocSearch.jsx b/examples/components/DocSearch.jsx
index 00b93775..e9148255 100644
--- a/examples/components/DocSearch.jsx
+++ b/examples/components/DocSearch.jsx
@@ -68,18 +68,20 @@ export default class DocSearch extends React.Component {
   render() {
     const searchResults = this.state.searchResults;
     return (
-      <div className="p-l p-t">
+      <div className="p-r">
         <SearchBox onSearch={this.onSearch} onCancel={this.onSearchCancel} />
-        <div className="search-result">
-          {searchResults.map(item => {
-            return (
-              <a href={'/' + item.path} key={`list_${item.path}`}>
-                <h5>{item.title}</h5>
-                <p dangerouslySetInnerHTML={{__html: item.abstract}} />
-              </a>
-            );
-          })}
-        </div>
+        {searchResults.length > 0 ? (
+          <div className="search-result">
+            {searchResults.map(item => {
+              return (
+                <a href={'/' + item.path} key={`list_${item.path}`}>
+                  <h5>{item.title}</h5>
+                  <p dangerouslySetInnerHTML={{__html: item.abstract}} />
+                </a>
+              );
+            })}
+          </div>
+        ) : null}
       </div>
     );
   }
diff --git a/examples/style.scss b/examples/style.scss
index ed2200f1..872f642b 100644
--- a/examples/style.scss
+++ b/examples/style.scss
@@ -714,11 +714,19 @@ a {
 
 .search-result {
   background-color: #fff;
-  top: 45px;
+  top: 50px;
   bottom: 0;
   position: fixed;
   overflow-y: scroll;
   overflow-x: hidden;
+  box-shadow: 0px 2px 7px #888888;
+  a {
+    padding: 0 5px;
+    display: block;
+  }
+  a:hover {
+    background-color: $gray200;
+  }
 }
 
 .dark {