From d03570e30dcd757b6b06d714122e0b7d2614ea34 Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Mon, 26 Jan 2026 14:57:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/svg/search2.svg      |   1 +
 src/components/HeaderSearch/index.vue | 119 +++++++++++++++++---------
 2 files changed, 78 insertions(+), 42 deletions(-)
 create mode 100644 src/assets/icons/svg/search2.svg

diff --git a/src/assets/icons/svg/search2.svg b/src/assets/icons/svg/search2.svg
new file mode 100644
index 00000000..384a5254
--- /dev/null
+++ b/src/assets/icons/svg/search2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769408646770" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7350" id="mx_n_1769408646771" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M995.555556 950.044444l-335.644445-335.644444c56.888889-62.577778 85.333333-147.911111 85.333333-238.933333C750.933333 170.666667 585.955556 0 375.466667 0S0 170.666667 0 375.466667s170.666667 375.466667 375.466667 375.466666c91.022222 0 176.355556-34.133333 238.933333-85.333333l335.644444 335.644444c5.688889 5.688889 17.066667 11.377778 22.755556 11.377778 11.377778 0 17.066667 0 22.755556-11.377778 17.066667-17.066667 17.066667-39.822222 0-51.2zM68.266667 375.466667c0-170.666667 136.533333-307.2 307.2-307.2 170.666667 0 307.2 136.533333 307.2 307.2 0 170.666667-136.533333 307.2-307.2 307.2-164.977778 0-307.2-136.533333-307.2-307.2z" fill="#ffffff" p-id="7351"></path></svg>
\ No newline at end of file
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index e25a8164..961afa93 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -1,22 +1,28 @@
 <template>
-  <div :class="{'show':show}" class="header-search">
-    <!-- <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" /> -->
-    <el-select
-      ref="headerSearchSelect"
-      v-model="search"
-      :remote-method="querySearch"
-      filterable
-      default-first-option
-      remote
-      placeholder="全局搜索"
-      class="header-search-select"
-      @change="change"
-    >
-      <template #prefix>
-        <img src="@/assets/images/search.png" style="width: 18px; height: 18px; margin-top: 17px" />
-      </template>
-      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
-    </el-select>
+  <div :class="{ show: show }" class="header-search">
+    <div class="header-search-wrapper">
+      <svg-icon icon-class="search2" class="search-icon" />
+
+      <el-select
+        ref="headerSearchSelect"
+        v-model="search"
+        :remote-method="querySearch"
+        filterable
+        default-first-option
+        remote
+        placeholder="全局搜索"
+        class="header-search-select"
+        @change="change"
+        style="width: 150px"
+      >
+        <el-option
+          v-for="option in options"
+          :key="option.item.path"
+          :value="option.item"
+          :label="option.item.title.join(' > ')"
+        />
+      </el-select>
+    </div>
   </div>
 </template>
 
@@ -34,13 +40,13 @@ export default {
       options: [],
       searchPool: [],
       show: false,
-      fuse: undefined
+      fuse: undefined,
     }
   },
   computed: {
     routes() {
       return this.$store.getters.permission_routes
-    }
+    },
   },
   watch: {
     routes() {
@@ -55,7 +61,7 @@ export default {
       } else {
         document.body.removeEventListener('click', this.close)
       }
-    }
+    },
   },
   mounted() {
     this.searchPool = this.generateRoutes(this.routes)
@@ -73,15 +79,15 @@ export default {
       this.show = false
     },
     change(val) {
-      const path = val.path;
-      const query = val.query;
-      if(this.ishttp(val.path)) {
+      const path = val.path
+      const query = val.query
+      if (this.ishttp(val.path)) {
         // http(s):// 路径新窗口打开
-        const pindex = path.indexOf("http");
-        window.open(path.substr(pindex, path.length), "_blank");
+        const pindex = path.indexOf('http')
+        window.open(path.substr(pindex, path.length), '_blank')
       } else {
         if (query) {
-          this.$router.push({ path: path, query: JSON.parse(query) });
+          this.$router.push({ path: path, query: JSON.parse(query) })
         } else {
           this.$router.push(path)
         }
@@ -99,13 +105,16 @@ export default {
         location: 0,
         distance: 100,
         minMatchCharLength: 1,
-        keys: [{
-          name: 'title',
-          weight: 0.7
-        }, {
-          name: 'path',
-          weight: 0.3
-        }]
+        keys: [
+          {
+            name: 'title',
+            weight: 0.7,
+          },
+          {
+            name: 'path',
+            weight: 0.3,
+          },
+        ],
       })
     },
     // Filter out the routes that can be displayed in the sidebar
@@ -115,11 +124,13 @@ export default {
 
       for (const router of routes) {
         // skip hidden router
-        if (router.hidden) { continue }
+        if (router.hidden) {
+          continue
+        }
 
         const data = {
           path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,
-          title: [...prefixTitle]
+          title: [...prefixTitle],
         }
 
         if (router.meta && router.meta.title) {
@@ -155,8 +166,8 @@ export default {
     },
     ishttp(url) {
       return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -166,7 +177,7 @@ export default {
 
   .search-icon {
     cursor: pointer;
-    font-size: 18px;
+    font-size: 14px;
     vertical-align: middle;
   }
 
@@ -189,15 +200,19 @@ export default {
       // border-bottom: 1px solid #d9d9d9;
       // vertical-align: middle;
       border: none;
-      background: rgba(255,255,255,0.2);
+      background: rgba(255, 255, 255, 0.2);
       border-radius: 4px 4px 4px 4px;
       font-family: Microsoft YaHei, Microsoft YaHei;
       font-weight: 400;
-      font-size: 12px;
-      color: #EBEBEB;
+      font-size: 14px;
+      color: #ebebeb;
       text-align: left;
       font-style: normal;
       text-transform: none;
+      padding-left: 30px;
+    }
+    ::v-deep .el-input__inner::placeholder {
+      color: #C9E7F7;
     }
   }
 
@@ -208,4 +223,24 @@ export default {
     }
   }
 }
+
+.header-search-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* 放大镜图标 */
+.search-icon {
+  position: absolute;
+  left: 8px;
+  top: 46%;
+  transform: translateY(-50%);
+  z-index: 3;
+  pointer-events: none; /* 不挡点击 */
+}
+
+/* 给输入框让出图标位置 */
+:deep(.header-search-select .el-input__inner) {
+  padding-left: 32px !important;
+}
 </style>