AIProd/components/SearchSelectInput.vue

<template>
	<div class="search-select-container" ref="searchContainer">
		<!-- 使用现有的 SearchInput 组件 -->
		<SearchInput
			ref="searchInput"
			v-model="searchValue"
			:placeholder="placeholder"
			@search="handleSearch"
		/>

		<!-- 搜索结果展示区域 -->
		<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>
</template>


<script>
import SearchInput from './SearchInput.vue';

export default {
	name: 'SearchSelectInput',
	components: {
		SearchInput
	},
	data() {
		return {
			searchValue: '',
			searched: false,
			searchResults: [],
			loading: false,
			placeholder: 'Please enter the key words'
		};
	},
	computed: {
		hasResults() {
			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.clearSearchState();
				return;
			}

			this.loading = true;
			try {
				await this.searchTools(value);
				this.searched = true;
			} catch (error) {
				this.searchResults = [];
				this.searched = true;
			} finally {
				this.loading = false;
			}
		},

		selectItem(item) {
			this.clearSearchState();
			this.jumpToToolDetail(item);
		},

		// 搜索相关工具
		async searchTools(keywords) {
			const {data: res} = await this.$api.tool.searchToolByWord(keywords);
			const {code, data} = res;
			if (code === 0 && data.list) {
				this.searchResults = data.list;
			}
		},

		// 跳转对应工具详情
		jumpToToolDetail(item) {
			if (item.slug && item.category_slug) {
				this.$router.push('/detail?tool_slug=' + item.slug + '&category_slug=' + item.category_slug);
				this.recordToolClick(item);
			}
		},

		// 记录工具点击次数
		async recordToolClick(item) {
			if (item.id) {
				await this.$api.tool.recordToolClickNum(item.id);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.search-select-container {
	position: relative;
	width: 100%;
}

.results-list {
	position: absolute;
	padding: 30px 20px;
	margin-top: 10px;
	border-radius: 12px;
	max-height: 350px;
	overflow-y: auto;
	background: white;
	box-shadow: 0 10px 30px #0000000d;
	width: 100%;
	z-index: 999;

	.result-item {
		padding: 20px 30px;
		cursor: pointer;
		border-radius: 6px;
		gap: 12px;
		color: #1E293B;
		font-weight: 500;

		img {
			width: 28px;
			height: 28px;
		}

		&:hover {
			background-color: #F5F6F9;
			color: #7B61FF;
		}

		&:active {
			background-color: #F5F6F9;
			color: #7B61FF;
		}
	}
}

.no-results {
	gap: 30px;
	color: #1E293B;
	font-family: 'Poppins-SemiBold';
	width: 100%;
	cursor: pointer;
	padding: 20px 30px;

	&:hover {
		color: #7C62FF;
		background: #F5F6F9;
	}

	img {
		width: 24px;
		height: 24px;
	}
}
</style>