样式调整

Former-commit-id: a752d74ebda60018646527bae76ebdbaad9dec41 [formerly a752d74ebda60018646527bae76ebdbaad9dec41 [formerly a752d74ebda60018646527bae76ebdbaad9dec41 [formerly a752d74ebda60018646527bae76ebdbaad9dec41 [formerly cf94b8efcddd1f134772021f541d80cac5228e48 [formerly 6a293276c5b8a2ae6390ed5a78802190ca67195f]]]]]
Former-commit-id: 63d86967d621c674d5ee7637e0814c58cc8fd682
Former-commit-id: 6fef6e69bd32e8f9b3257bca0ee608a7f733cdf1
Former-commit-id: ad21197e4afc4e1e130e7137308fd52f7c9b5fff [formerly 8c61f3a1c211b91a08a7a774f1d63e10c3c64f35]
Former-commit-id: 8b05c625708111db21ac272a83ec80e59674c526
Former-commit-id: 71fdc405ae790624298641aa240c98cf93977c99
Former-commit-id: d5250d59e0265365834666bc3599778577f0a4e2
Former-commit-id: cac30498acfbc49c188f2ca33f27216d2c679a64
Former-commit-id: 1b3a5e83c94a51e4f0478214fa41ce03a70439ce

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

@@ -44,6 +44,25 @@ export default {
     margin: 0px;
     &:hover {
       background-color: #F5F7FA;
+      .d2-panel-search-item__icon {
+        .d2-panel-search-item__icon-box {
+          i {
+            font-size: 24px;
+            color: $color-primary;
+          }
+        }
+      }
+      .d2-panel-search-item__info {
+        .d2-panel-search-item__info-title {
+          color: $color-text-main;
+        }
+        .d2-panel-search-item__info-fullTitle {
+          color: $color-text-normal;
+        }
+        .d2-panel-search-item__info-path {
+          color: $color-text-normal;
+        }
+      }
     }
   }
   .d2-panel-search-item__icon {

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

@@ -1,10 +1,13 @@
 <template>
   <div class="panel-search" flex="dir:top">
     <div class="panel-search__input-group" flex-box="0" flex="dir:top main:center cross:center">
+      <d2-icon-svg
+        class="panel-search__logo"
+        name="d2-admin-text"/>
       <el-autocomplete
         class="panel-search__input"
         ref="input"
-        v-model="input"
+        v-model="searchText"
         suffix-icon="el-icon-search"
         placeholder="搜索页面"
         :fetch-suggestions="querySearch"
@@ -27,13 +30,13 @@
       </div>
     </div>
     <div
-      v-if="results.length > 0"
+      v-if="resultsList.length > 0"
       class="panel-search__results-group"
       flex-box="1">
       <el-card>
         <div class="panel-search__results-group-inner">
           <d2-panel-search-item
-            v-for="(item, index) in results"
+            v-for="(item, index) in resultsList"
             :key="index"
             :item="item"
             :hover-mode="true"
@@ -56,7 +59,7 @@ export default {
   },
   data () {
     return {
-      input: '',
+      searchText: '',
       results: []
     }
   },
@@ -64,7 +67,14 @@ export default {
     ...mapState('d2admin/search', [
       'hotkey',
       'pool'
-    ])
+    ]),
+    // 这份数据是展示在搜索面板下面的
+    resultsList () {
+      return (this.results.length === 0 && this.searchText === '') ? this.pool.map(e => ({
+        value: e.fullTitle,
+        ...e
+      })) : this.results
+    }
   },
   methods: {
     /**
@@ -98,6 +108,9 @@ export default {
       this.input = ''
       setTimeout(() => {
         this.$refs.input.focus()
+        // 还原
+        this.searchText = ''
+        this.results = []
       }, 500)
     },
     /**
@@ -153,13 +166,19 @@ export default {
 .panel-search {
   margin: 20px;
   .panel-search__input-group {
-    height: 200px;
+    height: 240px;
+    .panel-search__logo {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 20px;
+    }
     .panel-search__input {
       width: 500px;
     }
     .panel-search__tip {
       @extend %unable-select;
       margin-top: 20px;
+      margin-bottom: 40px;
       font-size: 12px;
       color: $color-text-sub;
       .panel-search__key {