后期修改完善，上线版本

pages/Home/components/Toolbar.vue

@@ -3,7 +3,7 @@
 		<div class="bar-list">
 			<div class="top-box">
 				<div class="title-wrap">
-					<img :src="category_icon || ''" alt="" />
+					<img :src="tool.blueIcon || ''" alt="" />
 					<span class="title-text gradient-color">
 						{{tool.categoryName}}
 					</span>
@@ -15,14 +15,24 @@
 			<div v-if="tool.tagList && tool.tagList.length">
 				<ScrollList>
 					<div class="tags">
-						<div class="tag-item" v-for="(item,index) in tool.tagList" :key="index">
-							{{ item }}
+						<div class="tag-item" @click="handleTagClick(item)" :class="{active: item.categorySlug === activeCategorySlug}" v-for="(item,index) in tool.tagList" :key="index">
+							{{ item.categoryName }}
 						</div>
 					</div>
 				</ScrollList>
 				<div class="line"></div>
+				<div v-if="activeSubCategories.length">
+					<div class="more pointer" @click="tagGoToViewMore">
+						View more<i class="el-icon-arrow-right"></i>
+					</div>
+					<div class="item-card">
+						<div v-for="(item, index) in activeSubCategories" :key="index" class="item">
+							<ToolItemCard :config="item" :categorySlug="item.categorySlug || ''" />
+						</div>
+					</div>
+				</div>
 			</div>
-			<div>
+			<div v-else>
 				<div @click="goToViewMore" class="more pointer" v-if="tool.tagList && tool.tagList.length">
 					View more<i class="el-icon-arrow-right"></i>
 				</div>
@@ -57,23 +67,49 @@
 				type: String,
 				default: '',
 			},
-			category_icon: {
-				type: String,
-				default: '',
-			}
 		},
 		data() {
 			return {
+				activeCategorySlug: '',
+				activeCategoryName: '',
+				activeSubCategories: [],
 			}
 		},
 		methods: {
 			// 查看更多
 			goToViewMore() {
-				if (this.categorySlug) {
-					this.$router.push('/home/more?category_slug=' + this.categorySlug)
+				if (this.categorySlug && this.tool.categoryName) {
+					this.$router.push('/home/more?category_slug=' + this.categorySlug + '&tag_name=' + this.tool.categoryName);
 				}
+			},
+			handleTagClick(item) {
+				this.activeCategorySlug = item.categorySlug;
+				// 设置二级分类列表
+				this.activeSubCategories = item.tools || [];
+				this.activeCategoryName = item.categoryName;
+			},
+			tagGoToViewMore() {
+				if (this.activeCategorySlug && this.activeCategoryName) {
+					this.$router.push('/home/more?category_slug=' + this.activeCategorySlug + '&tag_name=' + this.activeCategoryName);
+				}
+			},
+		},
+		watch: {
+			tool: {
+				handler(newTool) {
+					// 检查 tool 中 tagList 是否存在且为数组长度不为0
+					if (newTool &&
+						newTool.tagList &&
+						Array.isArray(newTool.tagList) &&
+						newTool.tagList.length > 0) {
+						this.activeCategorySlug = newTool.tagList[0].categorySlug || '';
+						this.activeCategoryName = newTool.tagList[0].categoryName || '';
+						this.activeSubCategories = newTool.tagList[0].tools || [];
+					}
+				},
+				immediate: true // 立即执行，确保组件初始化时也会执行
 			}
-		}
+		},
 	}
 </script>
 
@@ -100,7 +136,7 @@
 		.title-text {
 			font-weight: 600;
 			font-size: $larg-font-size;
-			font-family: 'Poppins-SemiBold', serif;
+			font-family: 'Poppins-SemiBold';
 		}
 	}
 
@@ -120,10 +156,16 @@
 		padding: 10px;
 		@include gradient-border($linear-gradient-start, $linear-gradient-end);
 		/* 显示抓取手势 */
-		font-family: 'Poppins-SemiBold', sans-serif;
+		font-family: 'Poppins-SemiBold';
 		color: #64748B;
 		font-weight: 600;
+		cursor: pointer;
 
+		&.active {
+			color: #fff;
+			background: $header-backgroungd;
+			border: none;
+		}
 	}
 
 	.more {
@@ -131,7 +173,7 @@
 		text-align: right;
 		color: $grey-color;
 		font-size: $mid-font-size;
-		font-family: 'Poppins-Regular', serif;
+		font-family: 'Poppins-Regular';
 
 		&:active {
 			opacity: 0.8;