From 836dbd452aa58ec9b44c56e5a939f7aa699bb87d Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Wed, 29 Aug 2018 14:20:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/assets/svg-icons/icons/d2-admin-text.svg  | 19 ++++++++++++
 .../components/panel-search-item/index.vue    | 19 ++++++++++++
 .../components/panel-search/index.vue         | 31 +++++++++++++++----
 3 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/svg-icons/icons/d2-admin-text.svg

diff --git a/src/assets/svg-icons/icons/d2-admin-text.svg b/src/assets/svg-icons/icons/d2-admin-text.svg
new file mode 100644
index 00000000..abdcf0b8
--- /dev/null
+++ b/src/assets/svg-icons/icons/d2-admin-text.svg
@@ -0,0 +1,19 @@
+
+<svg viewBox="0 0 88 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tablet" transform="translate(-1077.000000, -135.000000)">
+            <g id="Group" transform="translate(1077.000000, 132.000000)">
+                <path d="M0.74,85.8 L0.74,71.44 L3.72,71.44 C5.7600102,71.44 7.2566619,71.5899985 8.21,71.89 C9.1633381,72.1900015 9.9866632,72.6633301 10.68,73.31 C11.3733368,73.9566699 11.9066648,74.746662 12.28,75.68 C12.6533352,76.613338 12.84,77.7033271 12.84,78.95 C12.84,80.1966729 12.5500029,81.3699945 11.97,82.47 C11.3899971,83.5700055 10.6033383,84.3999972 9.61,84.96 C8.6166617,85.5200028 7.186676,85.8 5.32,85.8 L0.74,85.8 Z M2.12,84.44 L3.78,84.44 C5.513342,84.44 6.7699961,84.3533342 7.55,84.18 C8.3300039,84.0066658 9.0133304,83.6633359 9.6,83.15 C10.1866696,82.6366641 10.6333318,82.013337 10.94,81.28 C11.2466682,80.546663 11.4,79.7066714 11.4,78.76 C11.4,77.8133286 11.2233351,76.940004 10.87,76.14 C10.5166649,75.339996 10.0133366,74.6800026 9.36,74.16 C8.7066634,73.6399974 7.9366711,73.2900009 7.05,73.11 C6.1633289,72.9299991 4.8600086,72.84 3.14,72.84 L2.12,72.84 L2.12,84.44 Z M16.2,75.94 L14.82,75.94 C14.886667,74.473326 15.3733288,73.2966711 16.28,72.41 C17.1866712,71.5233289 18.2833269,71.08 19.57,71.08 C20.8566731,71.08 21.9233291,71.4966625 22.77,72.33 C23.6166709,73.1633375 24.04,74.179994 24.04,75.38 C24.04,76.2733378 23.8033357,77.0999962 23.33,77.86 C22.8566643,78.6200038 22.1400048,79.5199948 21.18,80.56 L17.6,84.42 L24.24,84.42 L24.24,85.8 L14.48,85.8 L19.96,79.88 C20.9200048,78.8399948 21.6066646,78.020003 22.02,77.42 C22.4333354,76.819997 22.64,76.1333372 22.64,75.36 C22.64,74.5866628 22.3366697,73.9066696 21.73,73.32 C21.1233303,72.7333304 20.3700045,72.44 19.47,72.44 C18.5699955,72.44 17.8233363,72.7433303 17.23,73.35 C16.6366637,73.9566697 16.2933338,74.8199944 16.2,75.94 Z M32.58,70.86 L39.28,85.8 L37.74,85.8 L35.48,80.9 L29.28,80.9 L27.04,85.8 L25.44,85.8 L32.22,70.86 L32.58,70.86 Z M32.4,74.04 L29.94,79.44 L34.84,79.44 L32.4,74.04 Z M51.88,71.08 L51.88,85.8 L50.54,85.8 L50.54,83.98 C49.3266606,85.4333406 47.9366745,86.16 46.37,86.16 C44.8033255,86.16 43.486672,85.6066722 42.42,84.5 C41.353328,83.3933278 40.82,82.0666744 40.82,80.52 C40.82,78.9733256 41.3599946,77.6500055 42.44,76.55 C43.5200054,75.4499945 44.8133258,74.9 46.32,74.9 C48.053342,74.9 49.4599946,75.6399926 50.54,77.12 L50.54,71.08 L51.88,71.08 Z M50.62,80.56 C50.62,79.3466606 50.220004,78.3200042 49.42,77.48 C48.619996,76.6399958 47.620006,76.22 46.42,76.22 C45.219994,76.22 44.2166707,76.6499957 43.41,77.51 C42.6033293,78.3700043 42.2,79.3833275 42.2,80.55 C42.2,81.7166725 42.6133292,82.733329 43.44,83.6 C44.2666708,84.466671 45.2433277,84.9 46.37,84.9 C47.4966723,84.9 48.4866624,84.4900041 49.34,83.67 C50.1933376,82.8499959 50.62,81.8133396 50.62,80.56 Z M54.98,75.18 L56.34,75.18 L56.34,77.02 C57.2866714,75.6066596 58.4999926,74.9 59.98,74.9 C60.7666706,74.9 61.4699969,75.1233311 62.09,75.57 C62.7100031,76.0166689 63.1266656,76.6466626 63.34,77.46 C63.7800022,76.6333292 64.3399966,76.0000022 65.02,75.56 C65.7000034,75.1199978 66.4833289,74.9 67.37,74.9 C68.2566711,74.9 69.0599964,75.2433299 69.78,75.93 C70.5000036,76.6166701 70.86,77.9733232 70.86,80 L70.86,85.8 L69.46,85.8 L69.46,80 C69.46,79.0266618 69.4000006,78.3100023 69.28,77.85 C69.1599994,77.3899977 68.900002,77.0033349 68.5,76.69 C68.099998,76.3766651 67.5700033,76.22 66.91,76.22 C66.2499967,76.22 65.6333362,76.4399978 65.06,76.88 C64.4866638,77.3200022 64.0933344,77.8799966 63.88,78.56 C63.6666656,79.2400034 63.56,80.2666598 63.56,81.64 L63.56,85.8 L62.22,85.8 L62.22,80.36 C62.22,79.226661 62.1600006,78.4166691 62.04,77.93 C61.9199994,77.4433309 61.6533354,77.0366683 61.24,76.71 C60.8266646,76.3833317 60.320003,76.22 59.72,76.22 C59.119997,76.22 58.5566693,76.3966649 58.03,76.75 C57.5033307,77.1033351 57.0900015,77.5866636 56.79,78.2 C56.4899985,78.8133364 56.34,79.8466594 56.34,81.3 L56.34,85.8 L54.98,85.8 L54.98,75.18 Z M73.1,72.22 C73.1,71.9133318 73.2099989,71.6466678 73.43,71.42 C73.6500011,71.1933322 73.9166651,71.08 74.23,71.08 C74.5433349,71.08 74.8099989,71.1899989 75.03,71.41 C75.2500011,71.6300011 75.36,71.8966651 75.36,72.21 C75.36,72.5233349 75.2500011,72.7899989 75.03,73.01 C74.8099989,73.2300011 74.5433349,73.34 74.23,73.34 C73.9166651,73.34 73.6500011,73.2266678 73.43,73 C73.2099989,72.7733322 73.1,72.5133348 73.1,72.22 Z M73.54,75.18 L74.92,75.18 L74.92,85.8 L73.54,85.8 L73.54,75.18 Z M77.74,75.18 L79.12,75.18 L79.12,77.08 C80.2133388,75.6266594 81.5399922,74.9 83.1,74.9 C83.900004,74.9 84.6199968,75.1166645 85.26,75.55 C85.9000032,75.9833355 86.353332,76.5499965 86.62,77.25 C86.886668,77.9500035 87.02,78.9799932 87.02,80.34 L87.02,85.8 L85.66,85.8 L85.66,80.74 C85.66,79.4999938 85.6033339,78.6600022 85.49,78.22 C85.3766661,77.7799978 85.2033345,77.4066682 84.97,77.1 C84.7366655,76.7933318 84.4400018,76.5600008 84.08,76.4 C83.7199982,76.2399992 83.2833359,76.16 82.77,76.16 C82.2566641,76.16 81.7533358,76.2866654 81.26,76.54 C80.7666642,76.7933346 80.3466684,77.1466644 80,77.6 C79.6533316,78.0533356 79.4200006,78.5199976 79.3,79 C79.1799994,79.4800024 79.12,80.4466594 79.12,81.9 L79.12,85.8 L77.74,85.8 L77.74,75.18 Z" id="D2Admin" fill="#409EFF"></path>
+                <g id="logo-no-shadow" transform="translate(11.000000, 0.000000)">
+                    <path d="M44.2833805,33.4299717 L6.05798302,56.3652102 C4.16366196,57.5018028 1.70662094,56.8875426 0.570028297,54.9932215 C0.197031333,54.3715599 8.87839274e-17,53.6602143 0,52.9352385 L-4.4408921e-16,7.06476152 C-7.1463071e-16,4.85562252 1.790861,3.06476152 4,3.06476152 C4.72497578,3.06476152 5.43632142,3.26179285 6.05798302,3.63478981 L44.2833805,26.5700283 C46.1777016,27.7066209 46.7919618,30.163662 45.6553692,32.057983 C45.3175701,32.6209814 44.8463789,33.0921727 44.2833805,33.4299717 Z" id="Triangle-Copy" fill="#35495E" transform="translate(25.000000, 30.000000) rotate(-180.000000) translate(-25.000000, -30.000000) "></path>
+                    <path d="M60.2833805,33.4299717 L22.057983,56.3652102 C20.163662,57.5018028 17.7066209,56.8875426 16.5700283,54.9932215 C16.1970313,54.3715599 16,53.6602143 16,52.9352385 L16,7.06476152 C16,4.85562252 17.790861,3.06476152 20,3.06476152 C20.7249758,3.06476152 21.4363214,3.26179285 22.057983,3.63478981 L60.2833805,26.5700283 C62.1777016,27.7066209 62.7919618,30.163662 61.6553692,32.057983 C61.3175701,32.6209814 60.8463789,33.0921727 60.2833805,33.4299717 Z" id="Triangle" fill="#409EFF"></path>
+                    <path d="M42.4688663,31.7973091 L24.0289915,42.8612339 C23.081831,43.4295303 21.8533105,43.1224001 21.2850141,42.1752396 C21.0985157,41.8644088 21,41.508736 21,41.1462481 L21,19.0183984 C21,17.9138289 21.8954305,17.0183984 23,17.0183984 C23.3624879,17.0183984 23.7181607,17.116914 24.0289915,17.3034125 L42.4688663,28.3673374 C43.4160268,28.9356337 43.7231569,30.1641542 43.1548606,31.1113147 C42.9859611,31.3928139 42.7503655,31.6284096 42.4688663,31.7973091 Z" id="Triangle-Copy" fill="#FFFFFF" transform="translate(31.000000, 30.082670) rotate(-180.000000) translate(-31.000000, -30.082670) "></path>
+                    <path d="M37.5708451,30.8574929 L30.5144958,35.0913025 C30.0409155,35.3754507 29.4266552,35.2218856 29.1425071,34.7483054 C29.0492578,34.59289 29,34.4150536 29,34.2338096 L29,25.7661904 C29,25.2139056 29.4477153,24.7661904 30,24.7661904 C30.1812439,24.7661904 30.3590804,24.8154482 30.5144958,24.9086975 L37.5708451,29.1425071 C38.0444254,29.4266552 38.1979905,30.0409155 37.9138423,30.5144958 C37.8293925,30.6552454 37.7115947,30.7730432 37.5708451,30.8574929 Z" id="Triangle" fill="#409EFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue b/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
index 0d81c176..73a6f843 100644
--- a/src/layout/header-aside/components/panel-search/components/panel-search-item/index.vue
+++ b/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 {
diff --git a/src/layout/header-aside/components/panel-search/index.vue b/src/layout/header-aside/components/panel-search/index.vue
index 2e51a0a2..751d03d3 100644
--- a/src/layout/header-aside/components/panel-search/index.vue
+++ b/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 {