AIProd/components/SearchSelectInput.vue

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

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


<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;
		}
	},
	methods: {
		async handleSearch(value) {
			if (!value) {
				this.searched = false;
				this.searchResults = [];
				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.searched = false;
			this.searchResults = [];
			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 {
	padding: 30px 20px;
	margin-top: 10px;
	border-radius: 12px;
	max-height: 350px;
	overflow-y: auto;
	background: white;
	box-shadow: 0 10px 30px #0000000d;

	.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;
	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; // 改为自适应内容宽度

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