对接数据

2025-10-24 15:45:38 +08:00
parent 672a2f4c90
commit d3375a347f
138 changed files with 16904 additions and 1026 deletions
--- a/components/SearchSelectInput.vue
+++ b/components/SearchSelectInput.vue
@ -0,0 +1,163 @@
+<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;
+
+		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>