后期修改完善，上线版本

components/SearchSelectInput.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="search-select-container">
+	<div class="search-select-container" ref="searchContainer">
 		<!-- 使用现有的 SearchInput 组件 -->
 		<SearchInput
 			ref="searchInput"
@@ -9,22 +9,23 @@
 		/>
 
 		<!-- 搜索结果展示区域 -->
-		<div v-if="searched && hasResults" class="results-list">
-			<div
-				v-for="(item, index) in searchResults"
-				:key="index"
-				class="result-item flex items-center"
-				@click="selectItem(item)"
-			>
-				<img alt="" :src="item.icon_url || ''" />
-				<div>{{ item.name || '' }}</div>
+		<div v-if="searched" class="results-list">
+			<div v-if="hasResults">
+				<div
+					v-for="(item, index) in searchResults"
+					:key="index"
+					class="result-item flex items-center"
+					@click="selectItem(item)"
+				>
+					<img alt="" :src="item.icon_url || ''" />
+					<div>{{ item.name || '' }}</div>
+				</div>
+			</div>
+			<!-- 无结果提示 -->
+			<div v-else class="no-results flex items-center">
+				<img src="/search/icon_alarm.png" alt="" />
+				<div>No relevant content was found</div>
 			</div>
-		</div>
-
-		<!-- 无结果提示 -->
-		<div v-else-if="searched && !hasResults" class="no-results flex items-center">
-			<img src="/search/icon_alarm.png" alt="" />
-			<div>No relevant content was found</div>
 		</div>
 	</div>
 </template>
@@ -52,11 +53,32 @@ export default {
 			return this.searchResults && this.searchResults.length > 0;
 		}
 	},
+	mounted() {
+		// 添加点击事件监听
+		document.addEventListener('click', this.handleDocumentClick);
+	},
+	beforeDestroy() {
+		// 移除事件监听，避免内存泄漏
+		document.removeEventListener('click', this.handleDocumentClick);
+	},
 	methods: {
+		handleDocumentClick(event) {
+			// 判断点击是否在搜索容器内部
+			const searchContainer = this.$refs.searchContainer;
+			if (searchContainer && !searchContainer.contains(event.target)) {
+				// 点击在搜索容器外部，清空搜索状态
+				this.clearSearchState();
+			}
+		},
+
+		clearSearchState() {
+			this.searched = false;
+			this.searchResults = [];
+		},
+
 		async handleSearch(value) {
 			if (!value) {
-				this.searched = false;
-				this.searchResults = [];
+				this.clearSearchState();
 				return;
 			}
 
@@ -73,8 +95,7 @@ export default {
 		},
 
 		selectItem(item) {
-			this.searched = false;
-			this.searchResults = [];
+			this.clearSearchState();
 			this.jumpToToolDetail(item);
 		},
 
@@ -112,6 +133,7 @@ export default {
 }
 
 .results-list {
+	position: absolute;
 	padding: 30px 20px;
 	margin-top: 10px;
 	border-radius: 12px;
@@ -119,6 +141,8 @@ export default {
 	overflow-y: auto;
 	background: white;
 	box-shadow: 0 10px 30px #0000000d;
+	width: 100%;
+	z-index: 999;
 
 	.result-item {
 		padding: 20px 30px;
@@ -147,14 +171,16 @@ export default {
 
 .no-results {
 	gap: 30px;
-	padding: 10px 16px;
-	text-align: center;
-	border-radius: 8px;
-	margin: 16px auto 0;
 	color: #1E293B;
-	font-family: 'Poppins-SemiBold', serif;
-	@include gradient-border($linear-gradient-start, $linear-gradient-end);
-	width: fit-content; // 改为自适应内容宽度
+	font-family: 'Poppins-SemiBold';
+	width: 100%;
+	cursor: pointer;
+	padding: 20px 30px;
+
+	&:hover {
+		color: #7C62FF;
+		background: #F5F6F9;
+	}
 
 	img {
 		width: 24px;