feat: 创建全局搜索

src/layout/components/search/index.vue

@@ -1,21 +1,63 @@
 <template>
 
-    <a-input-search
-      v-model:value="searchValue"
-      placeholder="搜索点什么"
-      enter-button
-      @search="onSearch"
-    />
+    <div class="search" >
+      <a-input
+          style="width: 150px;"
+          v-model:value="searchValue"
+          placeholder="搜索点什么"
+          enter-button
+          @search="onSearch"
+      >
+        <template #prefix>
+          <search-outlined />
+        </template>
+      </a-input>
+
+      <div class="search-card">
+        <!-- <a-empty /> -->
+      </div>
+
+    </div>
 
 </template>
 <script lang='ts' setup >
-import { ref } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { SearchOutlined } from '@ant-design/icons-vue'
 
 const searchValue = ref('')
 
 const onSearch = () => {}
 
+const data = new Map([
+  ['rts', []]
+])
+
+const searchKey = ['rts', '物联网', 'iot', '数据中台', 'schedule']
+
+const list = computed(() => data.get(searchKey.find(item => item.includes(searchValue.value))!))
+
+watch(
+  () => searchValue.value,
+  () => {
+    console.log(list.value)
+  }
+)
+
 </script>
 <style lang='less' scoped >
-
+.search {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 12;
+  .search-card {
+    width: 200px;
+    height: 200px;
+    position: absolute;
+    left: 0;
+    top: 32px;
+    background-color: #fff;
+  }
+}
 </style>

src/layout/navbar.vue

@@ -34,7 +34,7 @@
         </a-col>
         <a-col :span="9" >
           <a-row :gutter="[8, 8]" justify="end"  >
-            <a-col :span="6" class="df-center" >
+            <a-col  class="df-center" >
               <search />
             </a-col>
             <a-col class="df-center" >