chore: rename some layout components; 🐶

src/layouts/header/HeaderSearch.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="header-search">
+    <a-icon type="search" class="search-icon" @click="enterSearchMode"/>
+    <a-auto-complete
+      ref="input"
+      :dataSource="dataSource"
+      :class="['search-input', searchMode ? 'enter' : 'leave']"
+      placeholder="站内搜索"
+      @blur="leaveSearchMode"
+    >
+    </a-auto-complete>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HeaderSearch',
+  data () {
+    return {
+      dataSource: ['选项一', '选项二'],
+      searchMode: false
+    }
+  },
+  methods: {
+    enterSearchMode () {
+      this.searchMode = true
+      setTimeout(() => this.$refs.input.focus(), 300)
+    },
+    leaveSearchMode () {
+      this.searchMode = false
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .header-search{
+    .search-icon{
+      font-size: 16px;
+      cursor: pointer;
+    }
+    .search-input{
+      border: 0;
+      border-bottom: 1px rgba(3, 5, 6, 0.23) solid;
+      transition: width 0.3s ease-in-out;
+      input{
+        border: 0;
+        box-shadow: 0 0 0 0;
+      }
+      &.leave{
+        width: 0px;
+        input{
+          display: none;
+        }
+      }
+      &.enter{
+        width: 200px;
+        input:focus{
+          box-shadow: 0 0 0 0;
+        }
+      }
+    }
+  }
+</style>