🐛 搜索面板优化

Former-commit-id: 954c685d9c6a7928a9f6b8c8f36879d6e8210e5a

src/layout/header-aside/components/panel-search/index.vue

@@ -122,7 +122,9 @@ export default {
     focus () {
       this.input = ''
       setTimeout(() => {
-        this.$refs.input.focus()
+        if (this.$refs.input) {
+          this.$refs.input.focus()
+        }
         // 还原
         this.searchText = ''
         this.results = []
@@ -185,6 +187,7 @@ export default {
 <style lang="scss" scoped>
 .panel-search {
   margin: 20px;
+  width: 100%;
   .panel-search__input-group {
     height: 240px;
     .panel-search__logo {
@@ -212,6 +215,7 @@ export default {
   }
   .panel-search__results-group {
     overflow: auto;
+    margin-bottom: -20px;
     .panel-search__results-group-inner {
       margin: -20px;
     }

src/layout/header-aside/layout.vue

@@ -51,7 +51,7 @@
         <div class="d2-theme-container-main" flex-box="1" flex>
           <!-- 搜索 -->
           <transition name="fade-scale">
-            <div v-show="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+            <div v-if="searchActive" class="d2-theme-container-main-layer" flex>
               <d2-panel-search
                 ref="panelSearch"
                 @close="searchPanelClose"/>
@@ -59,7 +59,7 @@
           </transition>
           <!-- 内容 -->
           <transition name="fade-scale">
-            <div v-show="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+            <div v-if="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
               <!-- tab -->
               <div class="d2-theme-container-main-header" flex-box="0">
                 <d2-tabs/>

src/layout/header-aside/mixins/search.js

@@ -39,13 +39,21 @@ export default {
     handleSearchClick () {
       this.searchToggle()
       if (this.searchActive) {
-        this.$refs.panelSearch.focus()
+        setTimeout(() => {
+          if (this.$refs.panelSearch) {
+            this.$refs.panelSearch.focus()
+          }
+        }, 500)
       }
     },
     searchPanelOpen () {
       if (!this.searchActive) {
         this.searchSet(true)
-        this.$refs.panelSearch.focus()
+        setTimeout(() => {
+          if (this.$refs.panelSearch) {
+            this.$refs.panelSearch.focus()
+          }
+        }, 500)
       }
     },
     // 关闭搜索面板