对接数据

pages/Home/components/ToolItemCard.vue

@@ -0,0 +1,113 @@
+<script>
+export default {
+	props: {
+		config: {
+			type: Object,
+			default: () => ({})
+		},
+		categorySlug: {
+			type: String,
+			default: '',
+		}
+	},
+	data() {
+		return {}
+	},
+	methods: {
+		goToToolDetail() {
+			if (this.config.slug && this.categorySlug) {
+				this.recordToolClick(this.config);
+				this.$router.push(`/detail?tool_slug=${this.config.slug}&category_slug=${this.categorySlug}`);
+			}
+		},
+		// 记录点击次数
+		async recordToolClick(item) {
+			if (item.id) {
+				await this.$api.tool.recordToolClickNum(item.id);
+			}
+		},
+		/**
+		 * 检测文本是否包含有效的HTML标签
+		 * @param {string} text - 要检测的文本
+		 * @returns {boolean} - 是否包含有效的HTML标签
+		 */
+		containsHtml(text) {
+			if (!text || typeof text !== 'string') {
+				return false;
+			}
+			// 简单检测常见HTML标签格式，实际项目中可能需要更复杂的验证
+			const htmlRegex = /<[^>]*>/;
+			return htmlRegex.test(text);
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="card-caontainer" @click="goToToolDetail">
+		<div class="title">
+			<img :src="config.iconUrl || '/'" alt="" />
+			<span style="font-size: 18px">
+				{{ config.name || '' }}
+			</span>
+		</div>
+		<!--<div class="text"-->
+		<!--	 v-if="config.memo && containsHtml(config.memo + '</p>')"-->
+		<!--	 v-html="config.memo"></div>-->
+		<div class="text">
+			{{ config.memo ? config.memo : '' }}
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.card-caontainer {
+	width: 100%;
+	height: 100%;
+	background: #FFFFFF;
+	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
+	border-radius: 8px;
+	padding: 16px;
+	border: 1px solid #E2E8F0;
+
+	&:hover {
+		cursor: pointer;
+		box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
+		@include gradient-border($linear-gradient-start, $linear-gradient-end);
+	}
+
+	&:active {
+		opacity: 0.8;
+		@include gradient-border($linear-gradient-start, $linear-gradient-end);
+	}
+
+	.title {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+
+		img {
+			width: 40px;
+			height: 40px;
+		}
+
+		span {
+			color: $main-font-color;
+			font-size: $big-font-size;
+			font-weight: 600;
+			font-family: 'Poppins-SemiBold', serif;
+		}
+	}
+
+	.text {
+		color: $grey-color;
+		font-family: 'Poppins-Regular', serif;
+		margin-top: 4px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+}
+</style>