feat: 增加全局搜索以及自定义指令copy

src/directives/index.ts

@@ -1,3 +1,4 @@
+import { message } from 'ant-design-vue'
 import { Directive, onUnmounted, DirectiveBinding } from 'vue'
 
 export const keyboard: Directive = {
@@ -15,4 +16,23 @@ export const keyboard: Directive = {
       el.removeEventListener('keypress', handleKeyPress)
     })
   }
+
+}
+
+export const copy = {
+  mounted (el: HTMLElement, binding: DirectiveBinding) {
+    el.addEventListener('click', () => {
+      const inputValue = document.createElement('input')
+      document.body.appendChild(inputValue)
+      inputValue.value = el.innerHTML
+      inputValue.select()
+      document.execCommand('copy')
+      message.success('复制成功')
+      document.body.removeChild(inputValue)
+    })
+
+    onUnmounted(() => {
+      el.removeEventListener('click', () => {})
+    })
+  }
 }

src/layout/components/search/index.vue

@@ -0,0 +1,21 @@
+<template>
+
+    <a-input-search
+      v-model:value="searchValue"
+      placeholder="搜索点什么"
+      enter-button
+      @search="onSearch"
+    />
+
+</template>
+<script lang='ts' setup >
+import { ref } from 'vue'
+
+const searchValue = ref('')
+
+const onSearch = () => {}
+
+</script>
+<style lang='less' scoped >
+
+</style>

src/layout/navbar.vue

@@ -1,13 +1,16 @@
 <template>
    <a-layout-header class="header-mobile" v-if="isMobile" :style="{backgroundColor: headerBgColor}">
       <a-row>
-        <a-col :span="8" class="logo" >
+        <a-col :span="6" >
+          <search />
+        </a-col>
+        <a-col :span="6" class="logo" >
           <img :src="logoPng" alt="">
         </a-col>
-        <a-col :span="8" class="df-center">
+        <a-col :span="6" class="df-center">
           <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
         </a-col>
-        <a-col class="df-center" span="8" >
+        <a-col :span="6" class="df-center"  >
           <user />
         </a-col>
       </a-row>
@@ -30,7 +33,10 @@
         </a-menu>
         </a-col>
         <a-col :span="9" >
-          <a-row :gutter="[8, 8]" justify="end" >
+          <a-row :gutter="[8, 8]" justify="end"  >
+            <a-col :span="6" class="df-center" >
+              <search />
+            </a-col>
             <a-col class="df-center" >
               <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
             </a-col>
@@ -51,6 +57,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { IconTsx } from '@/components/MicroComponents/index'
 import { useDesignStore } from '@/store'
 import { useDeviceType } from '@/hooks'
+import search from './components/search/index.vue'
 
 const logoPng = require('@/assets/logo/logo-blue.png')