feat:"完成页面接口的对接"

前端/pages/user/favorites.uvue

@@ -0,0 +1,132 @@
+<template>
+	<view class="page">
+		<!-- 收藏列表 -->
+		<scroll-view 
+			class="list-scroll" 
+			scroll-y
+		>
+			<view class="case-list">
+				<case-card 
+					v-for="item in favoriteList" 
+					:key="item.id"
+					:caseData="item"
+					@click="goToDetail"
+				></case-card>
+			</view>
+			
+			<!-- 空状态 -->
+			<view class="empty-state" v-if="!loading && favoriteList.length == 0">
+				<text class="empty-icon">❤️</text>
+				<text class="empty-text">还没有收藏任何案例</text>
+				<view class="empty-btn" @click="goToCases">
+					<text class="empty-btn-text">去看看案例</text>
+				</view>
+			</view>
+			
+			<!-- 底部间距 -->
+			<view class="bottom-space"></view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { STORAGE_KEYS } from '@/utils/config.uts'
+	
+	// 案例类型
+	type CaseItem = {
+		id : string
+		title : string
+		category : string
+		categoryName : string
+		coverImage : string
+		material : string
+		duration : string
+		price : string
+		views : number
+		likes : number
+	}
+	
+	// 收藏列表
+	const favoriteList = ref<CaseItem[]>([])
+	
+	// 加载状态
+	const loading = ref(false)
+	
+	// 获取收藏列表
+	const fetchFavorites = () => {
+		loading.value = true
+		// 从本地存储获取收藏列表
+		const favorites = uni.getStorageSync(STORAGE_KEYS.FAVORITES) as string[] || []
+		
+		// TODO: 这里应该根据收藏的ID列表从后端获取案例详情
+		// 暂时使用空列表
+		favoriteList.value = []
+		
+		loading.value = false
+	}
+	
+	// 跳转详情
+	const goToDetail = (id : string) => {
+		uni.navigateTo({
+			url: `/pages/cases/detail?id=${id}`
+		})
+	}
+	
+	// 去案例列表
+	const goToCases = () => {
+		uni.navigateTo({
+			url: '/pages/cases/list'
+		})
+	}
+	
+	onLoad(() => {
+		fetchFavorites()
+	})
+</script>
+
+<style lang="scss">
+	.page {
+		flex: 1;
+		background-color: #f5f5f5;
+	}
+	
+	.list-scroll {
+		flex: 1;
+	}
+	
+	.case-list {
+		padding: 24rpx 32rpx;
+	}
+	
+	/* 空状态 */
+	.empty-state {
+		padding: 120rpx 32rpx;
+		align-items: center;
+	}
+	
+	.empty-icon {
+		font-size: 120rpx;
+		margin-bottom: 32rpx;
+	}
+	
+	.empty-text {
+		font-size: 28rpx;
+		color: #999999;
+		margin-bottom: 48rpx;
+	}
+	
+	.empty-btn {
+		padding: 16rpx 48rpx;
+		background-color: #D4A574;
+		border-radius: 48rpx;
+	}
+	
+	.empty-btn-text {
+		font-size: 28rpx;
+		color: #ffffff;
+	}
+	
+	.bottom-space {
+		height: 32rpx;
+	}
+</style>