后期修改完善，上线版本

pages/Home/components/ToolList.vue

@@ -1,83 +1,47 @@
 <template>
 	<div class="list">
-		<div v-for="item in list" class="tools" @click="checkTool(item)">
-			<span class="tool-card" :class="item.active?'checkedBg':''">
-				<span class="content">
-					<img :src="item.icon || ''" alt="" />
-					<span>{{ item.name || '' }}</span>
-				</span>
-			</span>
+		<div v-for="(item, index) in list" class="tools">
+			<ToolItem :item="item" @tool-selected="handleToolSelected" />
 		</div>
 	</div>
 </template>
 
 <script>
-	export default {
-		props: ['list'],
-		data() {
-			return {
-				ischeck: 'check',
-			}
-		},
-		created() {
+import ToolItem from './ToolItem.vue'
+export default {
+	props: ['list'],
+	components: {
+		ToolItem
+	},
+	created() {
+		this.list.forEach(item => {
+			this.$set(item, 'active', false)
+		})
+	},
+	methods: {
+		handleToolSelected(selectedItem) {
+			// 重置所有项
 			this.list.forEach(item => {
-				this.$set(item, 'active', false)
-			})
-		},
-		methods: {
-			checkTool(item) {
-				if (item.active) {
+				if (item !== selectedItem) {
 					this.$set(item, 'active', false);
-				} else {
-					// 否则，先重置所有项，再激活当前项
-					this.list.forEach(i => this.$set(i, 'active', false));
-					this.$set(item, 'active', true);
-					this.$emit('tool-selected', item.name);
 				}
-			}
+			});
+			// 激活当前选中项
+			this.$set(selectedItem, 'active', true);
+			this.$emit('tool-selected', selectedItem.name);
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.list {
-		display: grid;
-		grid-template-columns: repeat(4, 1fr); // 4列布局
-		gap: 20px; // 网格间距
+.list {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr); // 4列布局
+	gap: 20px; // 网格间距
 
-		.tools {
-			max-width: 300px;
-		}
-
-		.tool-card {
-			background: #FFFFFF;
-			box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
-			border-radius: 12px;
-			padding: 10px 16px;
-			display: inline-block;
-			font-weight: 600;
-			font-family: 'Poppins-SemiBold', serif;
-			cursor: pointer;
-			&:hover {
-				color: $white;
-				background: linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%);
-			}
-
-			.content {
-				@include display-flex;
-
-				img {
-					margin-right: 5px;
-					width: 24px;
-					height: 24px;
-				}
-			}
-
-		}
-
-		.tools .checkedBg {
-			color: $white;
-			background: linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%);
-		}
+	.tools {
+		display: inline-block;
 	}
+}
 </style>