AIProd/pages/Home/components/Toolbar.vue

<template>
	<div :id="id">
		<div class="bar-list">
			<div class="top-box">
				<div class="title-wrap">
					<img :src="tool.blueIcon || ''" alt="" />
					<span class="title-text gradient-color">
						{{tool.categoryName}}
					</span>
				</div>
				<div @click="goToViewMore" class="more pointer" v-if="!tool.tagList">
					View more<i class="el-icon-arrow-right"></i>
				</div>
			</div>
			<div v-if="tool.tagList && tool.tagList.length">
				<ScrollList>
					<div class="tags">
						<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 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>
				<div class="item-card" v-if="tool.tools && tool.tools.length">
					<div v-for="(item, index) in tool.tools" :key="index" class="item">
						<ToolItemCard :config="item" :categorySlug="categorySlug" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import ScrollList from "~/pages/Home/components/ScrollList.vue";
	import ToolItemCard from "~/pages/Home/components/ToolItemCard.vue";

	export default {
		components: {ToolItemCard, ScrollList},
		props: {
			tool: {
				type: Object,
				default: () => {
					return {}
				}
			},
			id: {
				type: String,
				default: '',
			},
			categorySlug: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				activeCategorySlug: '',
				activeCategoryName: '',
				activeSubCategories: [],
			}
		},
		methods: {
			// 查看更多
			goToViewMore() {
				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>

<style lang="scss" scoped>
	.title-wrap {
		display: flex;
		align-items: center;
		gap: 6px;

		img {
			width: 24px;
			height: 24px;
		}
	}

	.bar-list {
		margin: 50px 0;
	}

	.top-box {
		@include display-flex;
		justify-content: space-between;

		.title-text {
			font-weight: 600;
			font-size: $larg-font-size;
			font-family: 'Poppins-SemiBold';
		}
	}

	.tags {
		margin-top: 27px;
		display: flex;
		overflow-x: auto;
		gap: 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		user-select: none;
		width: max-content;
	}

	.tag-item {
		flex-shrink: 0;
		padding: 10px;
		@include gradient-border($linear-gradient-start, $linear-gradient-end);
		/* 显示抓取手势 */
		font-family: 'Poppins-SemiBold';
		color: #64748B;
		font-weight: 600;
		cursor: pointer;

		&.active {
			color: #fff;
			background: $header-backgroungd;
			border: none;
		}
	}

	.more {
		display: block;
		text-align: right;
		color: $grey-color;
		font-size: $mid-font-size;
		font-family: 'Poppins-Regular';

		&:active {
			opacity: 0.8;
		}
	}

	.item-card {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(4, 1fr);
		margin-top: 30px;
		.item {
			min-height: 110px;
			width: 100%;
			overflow: hidden;
		}
	}
</style>