diff --git a/gym-manage-uniapp/common/style/base.css b/gym-manage-uniapp/common/style/base.css
index b7ab5ca..730565e 100644
--- a/gym-manage-uniapp/common/style/base.css
+++ b/gym-manage-uniapp/common/style/base.css
@@ -8,11 +8,12 @@
  */
 
 :root {
-    /* ========== 主品牌色（清新浅蓝色系）========== */
-    --primary-dark: #0B2B4B;        /* 深蓝主色 - 用于重要文字、品牌标识，体现专业信赖感 */
-    --primary-deep: #1A4A6F;        /* 中深蓝色 - 用于hover状态、次级按钮、图标点缀，增加层次感 */
+    /* ========== 主品牌色（首页主题蓝绿色系）========== */
+    --primary-dark: #2D4A5A;         /* 深蓝绿主色 - 用于重要文字、品牌标识，体现专业信赖感 */
+    --primary-deep: #7AB5CC;         /* 蓝绿主色 - 用于按钮、图标、标签背景，首页核心主题色 */
+    --primary-light: #9CCFDF;        /* 浅蓝绿 - 用于hover状态、渐变辅助，增加层次感 */
     
-    /* 主页主题浅蓝渐变色系 */
+    /* 主页主题蓝绿渐变色系 */
     --primary-sky-100: #D6EEF8;     /* 最浅蓝 - 渐变起始色，清新自然 */
     --primary-sky-200: #E4F2FA;     /* 浅蓝 - 渐变第二层 */
     --primary-sky-300: #EEF6FB;     /* 淡蓝 - 渐变第三层 */
@@ -24,10 +25,13 @@
     --glow-blue-2: rgba(180, 220, 240, 0.3);   /* 浅蓝色光晕 */
     --glow-blue-3: rgba(170, 215, 238, 0.25);  /* 浅蓝绿色光晕 */
     
-    /* ========== 强调/行动色（活力橙）========== */
-    --accent-orange: #FF6B35;      /* 活力橙 - 主要CTA按钮、会员标识、高亮徽章、关键数据，刺激行动力 */
-    --accent-orange-light: #FF8C5A; /* 浅橙色 - hover轻量背景、渐变辅助，带来温暖运动感 */
-    --accent-orange-dark: #E55A2B;  /* 深橙色 - 按压状态或重要警告，保持色彩体系完整 */
+    /* ========== 强调/行动色（活力绿）========== */
+    --accent-green: rgba(130, 220, 130, 0.9);  /* 活力绿 - 主要CTA按钮、图标背景，首页核心行动色 */
+    --accent-green-light: rgba(150, 230, 150, 0.8); /* 浅绿 - hover轻量背景 */
+    --accent-green-dark: rgba(100, 200, 100, 1);    /* 深绿 - 按压状态 */
+    --accent-orange: #FF6B35;        /* 活力橙 - 辅助CTA按钮、会员标识、高亮徽章、关键数据 */
+    --accent-orange-light: #FF8C5A;  /* 浅橙色 - hover轻量背景、渐变辅助 */
+    --accent-orange-dark: #E55A2B;   /* 深橙色 - 按压状态或重要警告 */
     
     /* ========== 背景色系（主页主题）========== */
     --bg-gradient-primary: linear-gradient(180deg, #D6EEF8 0%, #E4F2FA 15%, #EEF6FB 30%, #F5FAFD 50%, #FAFCFE 70%, #FFFFFF 100%); /* 主页主渐变背景 */
@@ -52,19 +56,20 @@
     --info-blue: #3498DB;          /* 信息蓝 - 提示气泡、帮助文字 */
     
     /* ========== 渐变色 (提升活力感) ========== */
-    --gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);   /* 橙色渐变 - 会员按钮、重要徽章 */
-    --gradient-blue: linear-gradient(135deg, #0B2B4B 0%, #1A4A6F 100%);     /* 深蓝渐变 - 头部banner或特别卡片 */
+    --gradient-green: linear-gradient(135deg, rgba(130, 220, 130, 0.9) 0%, rgba(150, 230, 150, 0.8) 100%);   /* 绿色渐变 - 主要CTA按钮、图标背景 */
+    --gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);   /* 橙色渐变 - 辅助按钮、重要徽章 */
+    --gradient-blue: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);     /* 蓝绿渐变 - 头部banner或特别卡片，首页核心渐变 */
     --gradient-sky: linear-gradient(180deg, #D6EEF8 0%, #E4F2FA 15%, #EEF6FB 30%, #F5FAFD 50%, #FAFCFE 70%, #FFFFFF 100%); /* 主页天空渐变 - 全局背景 */
     --gradient-subtle: linear-gradient(120deg, #F9FAFE 0%, #FFFFFF 100%);    /* 微弱渐变 - 增加细节精致度 */
     
-    /* ========== TabBar 配色（清新蓝调风格）========== */
+    /* ========== TabBar 配色（清新蓝绿风格）========== */
     /* 引用位置：components/TabBar.vue */
     --tabbar-bg: rgba(200, 225, 238, 0.8);           /* TabBar背景色 - 半透明浅蓝色毛玻璃效果 */
     --tabbar-shadow: rgba(120, 185, 215, 0.2);        /* TabBar阴影色 - 蓝色系柔和阴影 */
     --tabbar-icon-inactive: gray;                       /* 未选中图标颜色 - 灰色 */
-    --tabbar-icon-active: #5A98B0;                     /* 选中图标颜色 - 蓝绿色 */
+    --tabbar-icon-active: #7AB5CC;                     /* 选中图标颜色 - 蓝绿色（首页主题色） */
     --tabbar-text-inactive: #8AABBB;                   /* 未选中文字颜色 - 浅灰蓝 */
-    --tabbar-text-active: #5A98B0;                     /* 选中文字颜色 - 蓝绿色（与图标一致） */
+    --tabbar-text-active: #7AB5CC;                     /* 选中文字颜色 - 蓝绿色（与图标一致，首页主题色） */
     
     /* ========== 通用蓝色系阴影（用于卡片、按钮等）========== */
     /* 引用位置：components/index/RecommendCourses.vue, QuickEntry.vue, TodayRecommend.vue */
diff --git a/gym-manage-uniapp/components/index/TodayRecommend.vue b/gym-manage-uniapp/components/index/TodayRecommend.vue
index b41f3d6..286c387 100644
--- a/gym-manage-uniapp/components/index/TodayRecommend.vue
+++ b/gym-manage-uniapp/components/index/TodayRecommend.vue
@@ -60,7 +60,7 @@ const recommends = [
     participants: '2784'
   },
   {
-    image: 'https://images.unsplash.com/photo-1581009146145-b5ef050c149a?w=300&q=80',
+    image: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=300&q=80',
     title: '全身力量塑形',
     tags: ['50分钟', '中级'],
     desc: '全身综合训练，塑造完美线条',
diff --git a/gym-manage-uniapp/manifest.json b/gym-manage-uniapp/manifest.json
index 70f4370..ecc7130 100644
--- a/gym-manage-uniapp/manifest.json
+++ b/gym-manage-uniapp/manifest.json
@@ -45,7 +45,39 @@
                 "dSYMs" : false
             },
             /* SDK配置 */
-            "sdkConfigs" : {}
+            "sdkConfigs" : {},
+            "icons" : {
+                "android" : {
+                    "hdpi" : "unpackage/res/icons/72x72.png",
+                    "xhdpi" : "unpackage/res/icons/96x96.png",
+                    "xxhdpi" : "unpackage/res/icons/144x144.png",
+                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+                },
+                "ios" : {
+                    "appstore" : "unpackage/res/icons/1024x1024.png",
+                    "ipad" : {
+                        "app" : "unpackage/res/icons/76x76.png",
+                        "app@2x" : "unpackage/res/icons/152x152.png",
+                        "notification" : "unpackage/res/icons/20x20.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "proapp@2x" : "unpackage/res/icons/167x167.png",
+                        "settings" : "unpackage/res/icons/29x29.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "spotlight" : "unpackage/res/icons/40x40.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                    },
+                    "iphone" : {
+                        "app@2x" : "unpackage/res/icons/120x120.png",
+                        "app@3x" : "unpackage/res/icons/180x180.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "notification@3x" : "unpackage/res/icons/60x60.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "settings@3x" : "unpackage/res/icons/87x87.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
+                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                    }
+                }
+            }
         }
     },
     /* 快应用特有相关 */
diff --git a/gym-manage-uniapp/pages.json b/gym-manage-uniapp/pages.json
index 45c07e7..378467d 100644
--- a/gym-manage-uniapp/pages.json
+++ b/gym-manage-uniapp/pages.json
@@ -237,6 +237,7 @@
 		{
 			"path": "pages/checkIn/checkIn",
 			"style": {
+				
 				"navigationBarTitleText": "会员签到"
 			}
 		},
diff --git a/gym-manage-uniapp/pages/checkIn/checkIn.vue b/gym-manage-uniapp/pages/checkIn/checkIn.vue
index 09ec852..58d8569 100644
--- a/gym-manage-uniapp/pages/checkIn/checkIn.vue
+++ b/gym-manage-uniapp/pages/checkIn/checkIn.vue
@@ -81,19 +81,12 @@
 			</view>
 		</view>
 
-		<!-- 底部按钮（z-index永久置顶） -->
+		<!-- 底部按钮（仅保留刷新二维码，隐藏签到和清除缓存按钮） -->
 		<view class="bottom-actions">
-			<button @tap="handleLongPress">签到</button>
 			<button class="btn-refresh" @tap="refreshQR">
 				<uni-icons type="refresh" size="36rpx" color="#5E6F8D"></uni-icons>
 				<text>刷新二维码</text>
 			</button>
-
-			<!-- 测试用：手动清除缓存按钮 -->
-			<button class="btn-clear-cache" @tap="handleClearCache">
-				<uni-icons type="trash" size="36rpx" color="#ef4444"></uni-icons>
-				<text>清除缓存</text>
-			</button>
 		</view>
 	</view>
 </template>
@@ -103,9 +96,10 @@ import { ref } from 'vue';
 import { onLoad, onUnload } from '@dcloudio/uni-app'
 // 引入状态组件（路径与你保持一致）
 import QrStatus from '@/components/QRCode/StatusCard.vue'
-// 引入API封装
-import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 
+	// 测试模式配置
+	const TEST_MODE = true // 开启测试模式
+	
 	let image = ref("")
 	let width = ref(0)
 	let height = ref(0)
@@ -279,6 +273,13 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 		    mask: true
 		})
 		
+		// 测试模式：直接生成假二维码，内容为"欢迎来到活氧舱"
+		if (TEST_MODE) {
+			console.log("测试模式：生成假二维码")
+			generateTestQRCode()
+			return
+		}
+		
 		// 读取签到状态缓存（自动检查过期）
 		// isCheckIn 代表签到状态，从缓存读取
 		const cachedIsCheckIn = getCacheData("isCheckIn")
@@ -313,6 +314,49 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 		getStorage(null)
 	})
 	
+	// 测试模式：生成假二维码（内容为"欢迎来到活氧舱"）
+	const generateTestQRCode = () => {
+		// 使用 canvas 生成简单的二维码图案（模拟）
+		// 由于无法直接生成真正的二维码图片，使用一个静态图片或占位图
+		// 在实际测试环境中，可以使用第三方库生成二维码
+		
+		// 模拟网络延迟
+		setTimeout(() => {
+			// 使用一个在线二维码生成服务生成内容为"欢迎来到活氧舱"的二维码
+			const qrContent = "欢迎来到活氧舱"
+			qrcode.value = qrContent
+			
+			// 使用在线API生成二维码图片
+			// 注意：实际使用时应该考虑离线方案
+			const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(qrContent)}`
+			
+			// 将在线图片下载为base64（在uniapp中）
+			uni.request({
+				url: qrUrl,
+				method: 'GET',
+				responseType: 'arraybuffer',
+				success: (res) => {
+					const base64 = uni.arrayBufferToBase64(res.data)
+					image.value = `data:image/png;base64,${base64}`
+					width.value = 500
+					height.value = 500
+					status.value = 'waiting'
+					QRStatus.value = '请出示二维码签到'
+					uni.hideLoading()
+				},
+				fail: () => {
+					// 如果无法获取在线二维码，使用默认占位图
+					image.value = ''
+					width.value = 500
+					height.value = 500
+					status.value = 'waiting'
+					QRStatus.value = '测试模式 - 欢迎来到活氧舱'
+					uni.hideLoading()
+				}
+			})
+		}, 1000)
+	}
+	
 	// 页面卸载时关闭WebSocket连接（不清除缓存，让缓存自然过期）
 	onUnload(() => {
 		closeWebSocket()
@@ -590,13 +634,13 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 	left: 0;
 	right: 0;
 	z-index: 99998; /* 低于底部按钮，确保底部按钮永远最上层 */
-	background: linear-gradient(135deg, #0B2B4B 0%, #1A4A6F 100%);
+	background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
 	padding: 64rpx 48rpx 48rpx;
 	text-align: center;
 	color: #FFFFFF;
 	border-bottom-left-radius: 56rpx;
 	border-bottom-right-radius: 56rpx;
-	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+	box-shadow: 0 4rpx 20rpx rgba(120, 185, 215, 0.3);
 	
 	.header-title {
 		font-size: 45rpx;
@@ -632,7 +676,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 		height: 120rpx;
 		border-radius: 999px;
 		overflow: hidden;
-		border: 4rpx solid #FF6B35;
+		border: 4rpx solid #7AB5CC;
 		flex-shrink: 0;
 		
 		image {
@@ -664,7 +708,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 			flex-wrap: wrap;
 			
 			.level-badge {
-				background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
+				background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
 				color: white;
 				padding: 4rpx 16rpx;
 				border-radius: 24rpx;
@@ -691,7 +735,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 		.points-value {
 			font-size: 38rpx;
 			font-weight: 700;
-			color: #FF6B35;
+			color: #7AB5CC;
 		}
 		
 		.points-label {
@@ -763,7 +807,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 				width: 80rpx;
 				height: 80rpx;
 				border: 6rpx solid #E9EDF2;
-				border-top-color: #FF6B35;
+				border-top-color: #7AB5CC;
 				border-radius: 50%;
 				animation: spin 1s linear infinite;
 			}
@@ -788,7 +832,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 			position: absolute;
 			width: 48rpx;
 			height: 48rpx;
-			border: 6rpx solid #FF6B35;
+			border: 6rpx solid #7AB5CC;
 			
 			&.top-left {
 				top: 0;
@@ -855,7 +899,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 			.tip-dot {
 				width: 12rpx;
 				height: 12rpx;
-				background: #FF6B35;
+				background: #7AB5CC;
 				border-radius: 50%;
 				margin-top: 12rpx;
 				flex-shrink: 0;
@@ -934,7 +978,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 	}
 	
 	.header {
-		background: linear-gradient(135deg, #123A5E 0%, #1A4A6F 100%);
+		background: linear-gradient(135deg, #5A98B0 0%, #7AB5CC 100%);
 		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
 	}
 	
diff --git a/gym-manage-uniapp/pages/searchCourse/searchCourse.vue b/gym-manage-uniapp/pages/searchCourse/searchCourse.vue
index 4c594da..70ffa51 100644
--- a/gym-manage-uniapp/pages/searchCourse/searchCourse.vue
+++ b/gym-manage-uniapp/pages/searchCourse/searchCourse.vue
@@ -172,27 +172,40 @@
           </view>
         </view>
         
-        <!-- 骨架屏项（渐进式显示，数据回来后逐渐替换） -->
+        <!-- 骨架屏项 -->
         <view
           v-for="i in skeletonCount" 
           :key="'skeleton-' + i"
-          class="skeleton-course-item"
+          class="course-card skeleton-course"
         >
-          <view class="skeleton-card-image-wrapper">
+          <view class="card-image-wrapper">
             <view class="skeleton-card-image"></view>
           </view>
-          <view class="skeleton-card-content">
+          <view class="card-content">
             <view class="skeleton-card-tag"></view>
             <view class="skeleton-card-title"></view>
-            <view class="skeleton-card-meta">
+            <view class="course-meta">
               <view class="skeleton-meta-item duration"></view>
               <view class="skeleton-meta-item level"></view>
-              <view class="skeleton-meta-item participants"></view>
+              <view class="skeleton-meta-item course-type"></view>
+            </view>
+            <view class="course-footer">
+              <view class="skeleton-footer"></view>
             </view>
           </view>
         </view>
-      <!-- 空状态（加载完成后且无数据时显示） -->
-      <view class="empty-state" v-if="courses.length === 0 && skeletonCount === 0 && !loading">
+      </view>
+      
+      <!-- 加载更多指示器 -->
+      <view class="loading-more-state" v-if="loadingMore">
+        <view class="loading-spinner small">
+          <view class="spinner"></view>
+        </view>
+        <text class="loading-text">加载更多...</text>
+      </view>
+
+      <!-- 空状态 -->
+      <view class="empty-state" v-if="courses.length === 0 && skeletonCount === 0 && !loading && !loadingMore">
         <view class="empty-icon">
           <uni-icons type="search" size="80" color="#cbd5e1"></uni-icons>
         </view>
@@ -202,21 +215,19 @@
       </view>
 
       <!-- 已经到底啦 -->
-      <view class="no-more" v-if="!hasMore && courses.length > 0">
+      <view class="no-more" v-if="!hasMore && courses.length > 0 && !loadingMore">
         <text>已经到底啦~</text>
       </view>
-	  </view>
     </scroll-view>
   </view>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { getGroupCoursePage } from '@/api/main.js'
 import { onPullDownRefresh } from '@dcloudio/uni-app'
 
-// 测试模式：true 使用假数据，false 使用网络请求
-const TEST_MODE = false
+// 测试模式
+const TEST_MODE = true
 
 // 搜索关键词
 const keyword = ref('')
@@ -232,45 +243,24 @@ const loadingMore = ref(false)
 const activeFilter = ref('all')
 // 课程列表
 const courses = ref([])
-// 骨架屏数量（用于渐进式显示）
-const skeletonCount = ref(5)
-// 加载状态（控制加载提示）
+// 骨架屏数量
+const skeletonCount = ref(pageSize)
+// 加载状态
 const loading = ref(false)
-// 是否已加载过默认数据
-const loadedDefaultData = ref(false)
 // 搜索框焦点状态
 const isFocus = ref(false)
 // 是否显示高级筛选
 const showAdvancedFilter = ref(false)
 // 是否正在下拉刷新
 const isRefreshing = ref(false)
-
-// 是否正在滚动（用于节流收起操作）
+// 是否正在滚动
 const isScrolling = ref(false)
-
 // 滚动节流定时器
 let scrollTimer = null
+// 当前筛选参数的签名
+let currentFilterSignature = ''
 
-// 处理滚动事件
-const handleScroll = (e) => {
-  // 如果高级筛选展开，自动收起
-  if (showAdvancedFilter.value && !isScrolling.value) {
-    isScrolling.value = true
-    showAdvancedFilter.value = false
-    
-    // 清除之前的定时器
-    if (scrollTimer) {
-      clearTimeout(scrollTimer)
-    }
-    
-    // 300ms 后重置滚动状态
-    scrollTimer = setTimeout(() => {
-      isScrolling.value = false
-    }, 300)
-  }
-}
-
-// 高级筛选选项（使用简单变量名方便模板绑定）
+// 高级筛选选项
 const selectedLevelValue = ref('')
 const selectedDurationValue = ref('')
 const selectedSortValue = ref('id')
@@ -307,19 +297,56 @@ const sortOptions = [
   { label: '时长最短', value: 'duration' }
 ]
 
-// 切换课程级别筛选（选择后立即搜索）
+// 处理滚动事件
+const handleScroll = (e) => {
+  if (showAdvancedFilter.value && !isScrolling.value) {
+    isScrolling.value = true
+    showAdvancedFilter.value = false
+    
+    if (scrollTimer) {
+      clearTimeout(scrollTimer)
+    }
+    
+    scrollTimer = setTimeout(() => {
+      isScrolling.value = false
+    }, 300)
+  }
+}
+
+// 获取当前筛选参数签名
+const getFilterSignature = () => {
+  return JSON.stringify({
+    keyword: keyword.value,
+    filter: activeFilter.value,
+    level: selectedLevelValue.value,
+    duration: selectedDurationValue.value,
+    sort: selectedSortValue.value
+  })
+}
+
+// 检查筛选条件是否变化
+const hasFilterChanged = () => {
+  const newSignature = getFilterSignature()
+  if (newSignature !== currentFilterSignature) {
+    currentFilterSignature = newSignature
+    return true
+  }
+  return false
+}
+
+// 切换课程级别筛选
 const toggleLevel = (level) => {
   selectedLevelValue.value = selectedLevelValue.value === level ? '' : level
   handleSearch()
 }
 
-// 切换课程时长筛选（选择后立即搜索）
+// 切换课程时长筛选
 const toggleDuration = (duration) => {
   selectedDurationValue.value = selectedDurationValue.value === duration ? '' : duration
   handleSearch()
 }
 
-// 设置排序方式（选择后立即搜索）
+// 设置排序方式
 const setSort = (sort) => {
   selectedSortValue.value = sort
   handleSearch()
@@ -331,160 +358,24 @@ const onRefresh = () => {
   
   isRefreshing.value = true
   currentPage.value = 0
-  loadedDefaultData.value = false
+  hasMore.value = true
   
-  // 重新获取数据
   fetchCourses(keyword.value, activeFilter.value, 0, pageSize, false)
     .finally(() => {
       isRefreshing.value = false
-      // 停止下拉刷新动画
       uni.stopPullDownRefresh()
     })
 }
 
-// 监听下拉刷新（页面级别）
+// 监听下拉刷新
 onPullDownRefresh(() => {
   onRefresh()
 })
 
-// 获取课程列表
-const fetchCourses = async (searchKeyword = '', filter = 'all', page = 0, size = 10, append = false) => {
-  if (loading.value) return
-  
-  loading.value = true
-  
-  // 首次加载或搜索时显示骨架屏（数量与每页条数一致）
-  if (page === 0 && !append) {
-    skeletonCount.value = pageSize
-    courses.value = []
-  } else if (append && hasMore.value) {
-    // 上拉加载时也添加骨架屏（数量与每页条数一致）
-    skeletonCount.value += pageSize
-  }
-  
-  try {
-    let res
-    
-    // 仅使用假数据，不请求后端
-    // 模拟网络延迟：骨架屏显示3秒后再显示数据
-    await new Promise(resolve => setTimeout(resolve, 3000))
-    
-    // 生成假数据（传递所有筛选参数）
-    console.log('筛选参数:', { keyword: searchKeyword, filter, level: selectedLevelValue.value, duration: selectedDurationValue.value, sort: selectedSortValue.value })
-    res = generateMockData(page, size, filter, selectedLevelValue.value, selectedDurationValue.value, selectedSortValue.value, searchKeyword)
-    
-    if (res && res.content) {
-      let filteredCourses = res.content
-      
-      // 0. 过滤已结束和人满的团课
-      filteredCourses = filteredCourses.filter(course => {
-        if (course.status === '2') return false
-        if (course.currentMembers && course.maxMembers && course.currentMembers >= course.maxMembers) return false
-        return true
-      })
-      
-      // 1. 应用关键词搜索
-      if (searchKeyword && searchKeyword.trim()) {
-        const keyword = searchKeyword.trim().toLowerCase()
-        filteredCourses = filteredCourses.filter(course => {
-          const courseName = (course.courseName || '').toLowerCase()
-          return courseName.includes(keyword)
-        })
-      }
-      
-      // 应用快捷筛选
-      if (filter !== 'all') {
-        filteredCourses = filteredCourses.filter(course => {
-          const courseName = course.courseName || ''
-          switch (filter) {
-            case 'yoga': return courseName.includes('瑜伽') || course.courseType === '1'
-            case 'strength': return courseName.includes('力量') || courseName.includes('器械') || course.courseType === '3'
-            case 'cardio': return courseName.includes('有氧') || courseName.includes('动感') || course.courseType === '2'
-            case 'dance': return courseName.includes('舞蹈') || course.courseType === '4'
-            case 'pilates': return courseName.includes('普拉提') || course.courseType === '5'
-            default: return true
-          }
-        })
-      }
-      
-      // 应用课程级别筛选
-      if (selectedLevelValue.value) {
-        filteredCourses = filteredCourses.filter(course => course.level === selectedLevelValue.value)
-      }
-      
-      // 应用时长筛选
-      if (selectedDurationValue.value) {
-        filteredCourses = filteredCourses.filter(course => {
-          const duration = course.duration || 60
-          switch (selectedDurationValue.value) {
-            case 'short': return duration <= 30
-            case 'medium': return duration > 30 && duration <= 60
-            case 'long': return duration > 60
-            default: return true
-          }
-        })
-      }
-      
-      // 转换数据格式
-      const formattedCourses = filteredCourses.map(course => ({
-        id: course.id,
-        image: course.coverImage || 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
-        tag: getTag(course),
-        tagType: getTagType(course),
-        courseType: getCourseTypeName(course),
-        name: course.courseName || '未知课程',
-        duration: course.duration ? `${course.duration}分钟` : '60分钟',
-        level: getLevel(course),
-        participants: course.currentMembers || 0,
-        rawData: course
-      }))
-      
-      // 渐进式替换骨架屏：逐个添加数据，同时减少骨架屏数量
-      for (let i = 0; i < formattedCourses.length; i++) {
-        // 使用微任务而非宏任务，避免阻塞滚动
-        await Promise.resolve()
-        courses.value.push(formattedCourses[i])
-        skeletonCount.value = Math.max(0, skeletonCount.value - 1)
-      }
-      
-      // 判断是否还有更多数据（支持无限滚动，最多100页）
-      hasMore.value = res.content.length >= size && page < 99
-      
-      // 如果到达底部，清空骨架屏
-      if (!hasMore.value) {
-        skeletonCount.value = 0
-      }
-    } else {
-      // 没有数据时清空骨架屏
-      skeletonCount.value = 0
-    }
-  } catch (err) {
-    console.error('获取课程失败:', err)
-    skeletonCount.value = 0
-    if (!append) {
-      useDefaultData()
-    }
-  } finally {
-    loading.value = false
-  }
-}
-
-// 获取课程标签
-const getTag = (course) => {
-  if (course.status === '2') {
-    return '已结束'
-  }
-  if (course.currentMembers && course.maxMembers && course.currentMembers >= course.maxMembers * 0.8) {
-    return '热门'
-  }
-  if (course.isNew) {
-    return '新课'
-  }
-  return '推荐'
-}
-
-// 获取课程类型名称
-const getCourseTypeName = (course) => {
+/**
+ * 获取课程类型名称
+ */
+const getCourseTypeName = (courseType) => {
   const typeMap = {
     '1': '瑜伽',
     '2': '有氧',
@@ -492,514 +383,336 @@ const getCourseTypeName = (course) => {
     '4': '舞蹈',
     '5': '普拉提'
   }
-  return typeMap[course.courseType] || '其他'
+  return typeMap[courseType] || '其他'
 }
 
-// 获取标签类型
+/**
+ * 获取课程标签
+ */
+const getTag = (course) => {
+  if (course.status === '2') return '已结束'
+  if (course.currentMembers >= course.maxMembers * 0.8) return '热门'
+  if (course.isNew) return '新课'
+  return '推荐'
+}
+
+/**
+ * 获取标签类型
+ */
 const getTagType = (course) => {
-  if (course.status === '2') {
-    return 'disabled'
-  }
-  if (course.currentMembers && course.maxMembers && course.currentMembers >= course.maxMembers * 0.8) {
-    return 'hot'
-  }
-  if (course.isNew) {
-    return 'new'
-  }
+  if (course.status === '2') return 'disabled'
+  if (course.currentMembers >= course.maxMembers * 0.8) return 'hot'
+  if (course.isNew) return 'new'
   return 'default'
 }
 
-// 获取课程级别
-const getLevel = (course) => {
-  const level = course.level || '初级'
-  return level
-}
-
-// 生成测试假数据（支持无限滚动）
-const generateMockData = (page, size, filter, level = '', duration = '', sort = 'id', keyword = '') => {
-  // 基础课程数据
-  const baseCourses = [
-    {
-      courseName: 'HIIT高强度燃脂',
-      coverImage: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
-      duration: 30,
-      level: '中级',
-      currentMembers: 4587,
-      maxMembers: 5000,
-      courseType: '2',
-      status: '1',
-      isNew: false
-    },
-    {
-      courseName: '力量进阶训练',
-      coverImage: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&q=80',
-      duration: 45,
-      level: '高级',
-      currentMembers: 6231,
-      maxMembers: 8000,
-      courseType: '3',
-      status: '1',
-      isNew: false
-    },
-    {
-      courseName: '瑜伽·身心平衡',
-      coverImage: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&q=80',
-      duration: 60,
-      level: '初级',
-      currentMembers: 3210,
-      maxMembers: 4000,
-      courseType: '1',
-      status: '1',
-      isNew: true
-    },
-    {
-      courseName: '动感单车',
-      coverImage: 'https://images.unsplash.com/photo-1549880338-65ddcdfd017b?w=400&q=80',
-      duration: 45,
-      level: '中级',
-      currentMembers: 2156,
-      maxMembers: 3000,
-      courseType: '2',
-      status: '1',
-      isNew: false
-    },
-    {
-      courseName: '普拉提核心',
-      coverImage: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&q=80',
-      duration: 50,
-      level: '中级',
-      currentMembers: 1876,
-      maxMembers: 2500,
-      courseType: '5',
-      status: '1',
-      isNew: true
-    },
-    {
-      courseName: '有氧舞蹈',
-      coverImage: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400&q=80',
-      duration: 40,
-      level: '初级',
-      currentMembers: 2987,
-      maxMembers: 3500,
-      courseType: '4',
-      status: '1',
-      isNew: false
-    },
-    {
-      courseName: '核心训练',
-      coverImage: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
-      duration: 25,
-      level: '高级',
-      currentMembers: 3567,
-      maxMembers: 4000,
-      courseType: '3',
-      status: '1',
-      isNew: false
-    },
-    {
-      courseName: '冥想放松',
-      coverImage: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&q=80',
-      duration: 60,
-      level: '初级',
-      currentMembers: 987,
-      maxMembers: 1500,
-      courseType: '1',
-      status: '1',
-      isNew: true
-    },
-    {
-      courseName: '搏击操',
-      coverImage: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&q=80',
-      duration: 45,
-      level: '中级',
-      currentMembers: 1890,
-      maxMembers: 2500,
-      courseType: '4',
-      status: '1',
-      isNew: false
-    },
-    {
-      courseName: '柔韧性训练',
-      coverImage: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&q=80',
-      duration: 40,
-      level: '初级',
-      currentMembers: 1567,
-      maxMembers: 2000,
-      courseType: '1',
-      status: '1',
-      isNew: false
-    },
-    {
-      courseName: '高强度间歇',
-      coverImage: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
-      duration: 30,
-      level: '高级',
-      currentMembers: 4234,
-      maxMembers: 5000,
-      courseType: '2',
-      status: '1',
-      isNew: false
-    },
-    {
-      courseName: '器械力量',
-      coverImage: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&q=80',
-      duration: 55,
-      level: '高级',
-      currentMembers: 2765,
-      maxMembers: 3500,
-      courseType: '3',
-      status: '1',
-      isNew: true
-    },
-    {
-      courseName: '流瑜伽',
-      coverImage: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&q=80',
-      duration: 70,
-      level: '中级',
-      currentMembers: 2345,
-      maxMembers: 3000,
-      courseType: '1',
-      status: '1',
-      isNew: false
-    },
-    {
-      courseName: '拉丁舞',
-      coverImage: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400&q=80',
-      duration: 50,
-      level: '初级',
-      currentMembers: 1876,
-      maxMembers: 2500,
-      courseType: '4',
-      status: '1',
-      isNew: false
-    },
-    {
-      courseName: '普拉提进阶',
-      coverImage: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&q=80',
-      duration: 60,
-      level: '高级',
-      currentMembers: 1432,
-      maxMembers: 2000,
-      courseType: '5',
-      status: '1',
-      isNew: true
-    }
+/**
+ * 生成单条课程数据
+ */
+const generateSingleCourse = (seed, filterParams) => {
+  // 使用确定性随机函数
+  const random = (n) => {
+    const x = Math.sin(seed + n) * 10000
+    return x - Math.floor(x)
+  }
+  
+  const prefixes = [
+    '燃脂', '塑形', '增肌', '柔韧', '平衡', '协调', '爆发', '耐力', '核心', '康复',
+    '晨练', '午间', '晚训', '周末', '精品', '强化', '入门', '进阶', '突破', '蜕变',
+    '活力', '轻盈', '力量', '身心', '自由', '挑战', '超越', '燃烧', '唤醒', '放松',
+    '瑜伽', '普拉提', '舞蹈', '搏击', '骑行', '拉伸', '冥想'
   ]
+  const suffixes = [
+    'HIIT训练', '力量训练', '有氧操', '瑜伽课', '普拉提', '舞蹈课', '搏击操',
+    '动感单车', '杠铃课', '私教课', '团课', '课程', '训练营', '特训班', '体验课',
+    '拉伸课', '冥想课', '综合课', '专项课', '公开课'
+  ]
+  const levels = ['初级', '中级', '高级']
+  const courseTypes = ['1', '2', '3', '4', '5']
+  const durations = [20, 25, 30, 35, 40, 45, 50, 55, 60, 70, 80, 90]
   
-  // 生成无限数据：通过复制基础数据并添加页码后缀来模拟无限滚动
-  // 支持最多100页，每页10条，总共1000条假数据
-  const maxPages = 5
-  const pageOffset = page * size
-  const allCourses = []
+  // 根据筛选条件调整数据生成
+  let levelValue = levels[Math.floor(random(1) * levels.length)]
+  let courseType = courseTypes[Math.floor(random(2) * courseTypes.length)]
+  let durationValue = durations[Math.floor(random(3) * durations.length)]
+  let prefix = prefixes[Math.floor(random(4) * prefixes.length)]
+  let suffix = suffixes[Math.floor(random(5) * suffixes.length)]
   
-  for (let i = 0; i < maxPages * size; i++) {
-    const baseIndex = i % baseCourses.length
-    const pageNum = Math.floor(i / baseCourses.length)
-    const baseCourse = baseCourses[baseIndex]
-    
-    allCourses.push({
-      ...baseCourse,
-      id: i + 1,
-      courseName: `${baseCourse.courseName} ${pageNum + 1}` // 添加页码后缀区分不同页的数据
-    })
+  // 如果筛选了级别，强制匹配
+  if (filterParams.level) {
+    levelValue = filterParams.level
   }
   
-  // 根据筛选条件过滤
-  let filteredCourses = allCourses
-  
-  // 0. 过滤已结束和人满的团课
-  filteredCourses = filteredCourses.filter(course => {
-    // 过滤已结束的课程
-    if (course.status === '2') {
-      return false
+  // 如果筛选了时长，强制匹配
+  if (filterParams.duration) {
+    switch (filterParams.duration) {
+      case 'short':
+        durationValue = Math.floor(random(6) * 11) + 20 // 20-30分钟
+        break
+      case 'medium':
+        durationValue = Math.floor(random(7) * 31) + 31 // 31-60分钟
+        break
+      case 'long':
+        durationValue = Math.floor(random(8) * 41) + 61 // 61-100分钟
+        break
     }
-    // 过滤人满的课程（报名人数 >= 最大人数）
-    if (course.currentMembers && course.maxMembers && course.currentMembers >= course.maxMembers) {
-      return false
+  }
+  
+  // 如果筛选了快捷类型，调整课程名称和类型
+  if (filterParams.filter && filterParams.filter !== 'all') {
+    switch (filterParams.filter) {
+      case 'yoga':
+        prefix = '瑜伽'
+        suffix = '冥想课'
+        courseType = '1'
+        break
+      case 'strength':
+        prefix = '力量'
+        suffix = '训练课'
+        courseType = '3'
+        break
+      case 'cardio':
+        prefix = '有氧'
+        suffix = '燃脂课'
+        courseType = '2'
+        break
+      case 'dance':
+        prefix = '舞蹈'
+        suffix = '律动课'
+        courseType = '4'
+        break
+      case 'pilates':
+        prefix = '普拉提'
+        suffix = '核心课'
+        courseType = '5'
+        break
     }
-    return true
-  })
-  
-  // 1. 关键词搜索
-  if (keyword && keyword.trim()) {
-    const searchKeyword = keyword.trim().toLowerCase()
-    filteredCourses = filteredCourses.filter(course => {
-      const courseName = (course.courseName || '').toLowerCase()
-      return courseName.includes(searchKeyword)
-    })
   }
   
-  // 2. 快捷筛选（课程类型）
-  if (filter !== 'all') {
-    filteredCourses = filteredCourses.filter(course => {
-      const courseName = course.courseName || ''
-      switch (filter) {
-        case 'yoga':
-          return courseName.includes('瑜伽') || course.courseType === '1'
-        case 'strength':
-          return courseName.includes('力量') || courseName.includes('器械') || course.courseType === '3'
-        case 'cardio':
-          return courseName.includes('有氧') || courseName.includes('动感') || course.courseType === '2'
-        case 'dance':
-          return courseName.includes('舞蹈') || courseName.includes('拉丁') || course.courseType === '4'
-        case 'pilates':
-          return courseName.includes('普拉提') || course.courseType === '5'
-        default:
-          return true
-      }
-    })
-  }
-  
-  // 2. 课程级别过滤
-  if (level) {
-    filteredCourses = filteredCourses.filter(course => {
-      return course.level === level
-    })
-  }
-  
-  // 3. 课程时长过滤
-  if (duration) {
-    filteredCourses = filteredCourses.filter(course => {
-      const courseDuration = course.duration || 0
-      switch (duration) {
-        case 'short':
-          return courseDuration <= 30
-        case 'medium':
-          return courseDuration > 30 && courseDuration <= 60
-        case 'long':
-          return courseDuration > 60
-        default:
-          return true
-      }
-    })
-  }
-  
-  // 4. 排序处理
-  filteredCourses.sort((a, b) => {
-    switch (sort) {
-      case 'participants':
-        // 最热门（按参与人数降序）
-        return b.currentMembers - a.currentMembers
-      case 'startTime':
-        // 最新开课（按id降序模拟）
-        return b.id - a.id
-      case 'duration':
-        // 时长最短（按时长升序）
-        return a.duration - b.duration
-      case 'id':
-      default:
-        // 默认排序（按id升序）
-        return a.id - b.id
+  // 如果有关键词搜索，调整名称
+  let courseName = `${prefix}${suffix}`
+  if (filterParams.keyword && filterParams.keyword.trim()) {
+    if (courseName.includes(filterParams.keyword) || Math.random() > 0.5) {
+      courseName = `${filterParams.keyword}${courseName}`
     }
-  })
+  }
   
-  // 分页处理
-  const start = page * size
-  const end = start + size
-  const paginatedCourses = filteredCourses.slice(start, end)
+  const maxMembers = Math.floor(random(9) * 30) + 10
+  const currentMembers = Math.floor(random(10) * maxMembers)
+  const isNew = random(11) > 0.7
   
-  // 模拟分页响应结构
   return {
-    content: paginatedCourses,
-    totalPages: Math.ceil(filteredCourses.length / size),
-    totalElements: filteredCourses.length,
-    currentPage: page,
-    pageSize: size,
-    first: page === 0,
-    last: end >= filteredCourses.length
+    id: Math.floor(seed),
+    courseName: courseName,
+    coverImage: `https://picsum.photos/id/${Math.floor(random(12) * 100) + 1}/400/300`,
+    duration: durationValue,
+    level: levelValue,
+    currentMembers: currentMembers,
+    maxMembers: maxMembers,
+    courseType: courseType,
+    status: '1',
+    isNew: isNew
   }
 }
 
-// 使用默认数据
-const useDefaultData = () => {
-  courses.value = [
-    {
-      id: 1,
-      image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
-      tag: '热门',
-      tagType: 'hot',
-      name: 'HIIT高强度燃脂',
-      duration: '30分钟',
-      level: '中级',
-      participants: 4587
-    },
-    {
-      id: 2,
-      image: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&q=80',
-      tag: '推荐',
-      tagType: 'default',
-      name: '力量进阶训练',
-      duration: '45分钟',
-      level: '高级',
-      participants: 6231
-    },
-    {
-      id: 3,
-      image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&q=80',
-      tag: '新课',
-      tagType: 'new',
-      name: '瑜伽·身心平衡',
-      duration: '60分钟',
-      level: '初级',
-      participants: 3210
-    },
-    {
-      id: 4,
-      image: 'https://images.unsplash.com/photo-1549880338-65ddcdfd017b?w=400&q=80',
-      tag: '推荐',
-      tagType: 'default',
-      name: '动感单车',
-      duration: '45分钟',
-      level: '中级',
-      participants: 2156
-    },
-    {
-      id: 5,
-      image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&q=80',
-      tag: '推荐',
-      tagType: 'default',
-      name: '普拉提核心',
-      duration: '50分钟',
-      level: '初级',
-      participants: 1890
-    },
-    {
-      id: 6,
-      image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
-      tag: '热门',
-      tagType: 'hot',
-      name: '搏击训练',
-      duration: '60分钟',
-      level: '高级',
-      participants: 3456
-    },
-    {
-      id: 7,
-      image: 'https://images.unsplash.com/photo-1501426026826-31c667bdf23d?w=400&q=80',
-      tag: '新课',
-      tagType: 'new',
-      name: '爵士舞基础',
-      duration: '55分钟',
-      level: '初级',
-      participants: 1234
-    },
-    {
-      id: 8,
-      image: 'https://images.unsplash.com/photo-1544025162-d76694265947?w=400&q=80',
-      tag: '推荐',
-      tagType: 'default',
-      name: '核心力量训练',
-      duration: '40分钟',
-      level: '中级',
-      participants: 2890
+/**
+ * 生成随机课程数据（保证每页都有数据）
+ */
+const generateMockDataForPage = (page, size, filterParams) => {
+  console.log(`[生成数据] 第 ${page} 页，每页 ${size} 条，筛选条件:`, filterParams)
+  
+  const coursesData = []
+  const baseSeed = page * size * 10007 + Date.now()
+  
+  // 生成指定数量的课程（确保每页都有数据）
+  for (let i = 0; i < size; i++) {
+    const seed = baseSeed + i * 12345
+    const course = generateSingleCourse(seed, filterParams)
+    coursesData.push(course)
+  }
+  
+  // 应用关键词搜索（在已生成数据中过滤）
+  let filteredCourses = [...coursesData]
+  
+  if (filterParams.keyword && filterParams.keyword.trim()) {
+    const kw = filterParams.keyword.trim().toLowerCase()
+    filteredCourses = filteredCourses.filter(c => 
+      (c.courseName || '').toLowerCase().includes(kw)
+    )
+  }
+  
+  // 如果关键词过滤后没有数据，生成一些匹配关键词的数据
+  if (filteredCourses.length === 0 && filterParams.keyword && filterParams.keyword.trim()) {
+    console.log(`关键词 "${filterParams.keyword}" 无匹配数据，生成匹配数据`)
+    for (let i = 0; i < size; i++) {
+      filteredCourses.push({
+        id: Math.floor(Math.random() * 100000) + page * size + i,
+        courseName: `${filterParams.keyword}课程${i + 1}`,
+        coverImage: `https://picsum.photos/id/${(i % 50) + 1}/400/300`,
+        duration: filterParams.duration === 'short' ? 25 : (filterParams.duration === 'medium' ? 45 : 60),
+        level: filterParams.level || (i % 3 === 0 ? '初级' : (i % 3 === 1 ? '中级' : '高级')),
+        currentMembers: Math.floor(Math.random() * 30) + 1,
+        maxMembers: 30,
+        courseType: '1',
+        status: '1',
+        isNew: true
+      })
     }
-  ]
+  }
+  
+  // 排序
+  filteredCourses.sort((a, b) => {
+    switch (filterParams.sort) {
+      case 'participants': return b.currentMembers - a.currentMembers
+      case 'startTime': return b.id - a.id
+      case 'duration': return a.duration - b.duration
+      default: return a.id - b.id
+    }
+  })
+  
+  // 转换为显示格式
+  const formattedCourses = filteredCourses.map(c => ({
+    id: c.id,
+    image: c.coverImage,
+    tag: getTag(c),
+    tagType: getTagType(c),
+    courseType: getCourseTypeName(c.courseType),
+    name: c.courseName,
+    duration: `${c.duration}分钟`,
+    level: c.level,
+    participants: c.currentMembers,
+    rawData: c
+  }))
+  
+  // 永远返回 true，实现真正的无限滚动
+  const hasMoreData = true
+  
+  console.log(`[生成数据完成] 第 ${page} 页生成了 ${formattedCourses.length} 条数据, hasMore=${hasMoreData}`)
+  
+  return {
+    content: formattedCourses,
+    hasMore: hasMoreData
+  }
+}
+
+// 获取课程列表
+const fetchCourses = async (searchKeyword = '', filter = 'all', page = 0, size = 10, append = false) => {
+  // 防止重复请求
+  if (loading.value) return
+  
+  loading.value = true
+  
+  // 处理骨架屏
+  if (!append && page === 0) {
+    skeletonCount.value = size
+    courses.value = []
+  }
+  
+  try {
+    let result
+    
+    // 构建筛选参数对象
+    const filterParams = {
+      keyword: searchKeyword,
+      filter: filter,
+      level: selectedLevelValue.value,
+      duration: selectedDurationValue.value,
+      sort: selectedSortValue.value
+    }
+    
+    if (TEST_MODE) {
+      // 模拟网络延迟
+      const delay = 500 + Math.random() * 500
+      await new Promise(resolve => setTimeout(resolve, delay))
+      
+      result = generateMockDataForPage(page, size, filterParams)
+    } else {
+      // TODO: 替换为真实API调用
+      await new Promise(resolve => setTimeout(resolve, 500))
+      result = generateMockDataForPage(page, size, filterParams)
+    }
+    
+    if (result && result.content && result.content.length > 0) {
+      if (append) {
+        // 追加模式：逐个添加数据，同时移除骨架屏
+        for (let i = 0; i < result.content.length; i++) {
+          await Promise.resolve()
+          courses.value.push(result.content[i])
+          if (skeletonCount.value > 0) {
+            skeletonCount.value--
+          }
+        }
+      } else {
+        // 重置模式：直接替换
+        courses.value = result.content
+        skeletonCount.value = 0
+      }
+      
+      // 更新是否有更多数据
+      hasMore.value = result.hasMore !== false
+    } else {
+      // 没有数据时，确保不显示骨架屏
+      skeletonCount.value = 0
+      if (!append && courses.value.length === 0) {
+        // 没有数据时，确保显示空状态，但 hasMore 设为 false 防止无限加载
+        hasMore.value = false
+      }
+    }
+  } catch (err) {
+    console.error('获取课程失败:', err)
+    skeletonCount.value = 0
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
 }
 
 // 搜索处理
 const handleSearch = () => {
+  // 重置分页
   currentPage.value = 0
   hasMore.value = true
+  loadingMore.value = false
+  
+  // 更新筛选签名
+  currentFilterSignature = getFilterSignature()
+  
   fetchCourses(keyword.value, activeFilter.value, 0, pageSize, false)
 }
 
 // 加载更多
 const loadMore = () => {
-  if (hasMore.value && !loading.value && !loadingMore.value) {
-    loadingMore.value = true
-    currentPage.value++
-    fetchCourses(keyword.value, activeFilter.value, currentPage.value, pageSize, true)
-      .catch(() => {
-        // 加载失败时添加默认数据
-        if (!loadedDefaultData.value) {
-          appendDefaultData()
-        }
-      })
-      .finally(() => {
-        loadingMore.value = false
-      })
-  }
-}
-
-// 追加默认数据（当后端数据不足时使用）
-const appendDefaultData = () => {
-  if (loadedDefaultData.value) return
-  
-  loadedDefaultData.value = true
-  
-  const defaultCourses = [
-    {
-      id: 1001,
-      image: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&q=80',
-      tag: '推荐',
-      tagType: 'default',
-      name: '搏击操',
-      duration: '45分钟',
-      level: '中级',
-      participants: 1890
-    },
-    {
-      id: 1002,
-      image: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=400&q=80',
-      tag: '新课',
-      tagType: 'new',
-      name: '核心训练',
-      duration: '30分钟',
-      level: '初级',
-      participants: 1245
-    },
-    {
-      id: 1003,
-      image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
-      tag: '热门',
-      tagType: 'hot',
-      name: 'HIIT全身燃脂',
-      duration: '25分钟',
-      level: '高级',
-      participants: 3567
-    },
-    {
-      id: 1004,
-      image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&q=80',
-      tag: '推荐',
-      tagType: 'default',
-      name: '冥想放松',
-      duration: '60分钟',
-      level: '初级',
-      participants: 987
-    },
-    {
-      id: 1005,
-      image: 'https://images.unsplash.com/photo-1549880338-65ddcdfd017b?w=400&q=80',
-      tag: '热门',
-      tagType: 'hot',
-      name: '有氧舞蹈',
-      duration: '50分钟',
-      level: '中级',
-      participants: 2876
-    },
-    {
-      id: 1006,
-      image: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&q=80',
-      tag: '推荐',
-      tagType: 'default',
-      name: '柔韧性训练',
-      duration: '40分钟',
-      level: '初级',
-      participants: 1567
-    }
-  ]
-  
-  // 根据当前课程数量决定添加多少默认数据
-  const neededCount = pageSize - (courses.value.length % pageSize)
-  const addCount = Math.min(neededCount, defaultCourses.length)
-  
-  if (addCount > 0) {
-    courses.value = [...courses.value, ...defaultCourses.slice(0, addCount)]
+  // 检查是否可以加载更多
+  if (!hasMore.value) {
+    console.log('没有更多数据了')
+    return
   }
   
-  // 如果添加了默认数据，标记为没有更多
-  hasMore.value = false
+  if (loading.value) {
+    console.log('正在加载中，跳过')
+    return
+  }
+  
+  if (loadingMore.value) {
+    console.log('正在加载更多中，跳过')
+    return
+  }
+  
+  console.log('触发加载更多，当前页:', currentPage.value, '已有课程数:', courses.value.length)
+  
+  loadingMore.value = true
+  const nextPage = currentPage.value + 1
+  currentPage.value = nextPage
+  
+  // 加载更多时添加骨架屏
+  skeletonCount.value += pageSize
+  
+  fetchCourses(keyword.value, activeFilter.value, nextPage, pageSize, true)
+    .catch((err) => {
+      console.error('加载更多失败:', err)
+      loadingMore.value = false
+      skeletonCount.value = Math.max(0, skeletonCount.value - pageSize)
+    })
 }
 
 // 清除关键词
@@ -1012,8 +725,11 @@ const clearKeyword = () => {
 const resetSearch = () => {
   keyword.value = ''
   activeFilter.value = 'all'
+  selectedLevelValue.value = ''
+  selectedDurationValue.value = ''
+  selectedSortValue.value = 'id'
   showAdvancedFilter.value = false
-  resetFilters()
+  handleSearch()
 }
 
 // 重置高级筛选
@@ -1038,6 +754,7 @@ const handleCourseClick = (course) => {
 
 // 组件挂载时获取数据
 onMounted(() => {
+  currentFilterSignature = getFilterSignature()
   fetchCourses()
 })
 </script>
@@ -1057,7 +774,6 @@ onMounted(() => {
 .fixed-header {
   flex-shrink: 0;
   background: #ffffff;
-  /* 阻止触摸滚动穿透 */
   touch-action: none;
 }
 
@@ -1122,7 +838,7 @@ onMounted(() => {
   }
 }
 
-/* 下拉刷新提示（列表顶部） */
+/* 下拉刷新提示 */
 .refresh-hint {
   display: flex;
   justify-content: center;
@@ -1130,7 +846,6 @@ onMounted(() => {
   padding: 30rpx 0;
 }
 
-/* 下拉刷新内容 */
 .refresh-content {
   display: flex;
   flex-direction: column;
@@ -1138,7 +853,6 @@ onMounted(() => {
   gap: 12rpx;
 }
 
-/* 刷新旋转动画 */
 .refresh-spinner {
   width: 40rpx;
   height: 40rpx;
@@ -1153,7 +867,6 @@ onMounted(() => {
   }
 }
 
-/* 刷新文字 */
 .refresh-text {
   font-size: 24rpx;
   color: #94a3b8;
@@ -1238,7 +951,6 @@ onMounted(() => {
     opacity: 1;
   }
   
-  /* 筛选组 */
   .filter-group {
     padding: 0 24rpx;
     margin-top: 20rpx;
@@ -1277,14 +989,13 @@ onMounted(() => {
     }
   }
   
-  /* 筛选操作按钮 */
   .filter-actions {
     display: flex;
     gap: 24rpx;
     padding: 0 24rpx;
     margin-top: 24rpx;
     
-    .btn-reset, .btn-confirm {
+    .btn-reset {
       flex: 1;
       padding: 20rpx;
       border-radius: 24rpx;
@@ -1292,9 +1003,6 @@ onMounted(() => {
       font-size: 28rpx;
       font-weight: 600;
       transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    
-    .btn-reset {
       background: #f8fafc;
       color: #64748b;
       
@@ -1302,15 +1010,6 @@ onMounted(() => {
         background: #f1f5f9;
       }
     }
-    
-    .btn-confirm {
-      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
-      color: #ffffff;
-      
-      &:active {
-        transform: scale(0.98);
-      }
-    }
   }
 }
 
@@ -1318,125 +1017,25 @@ onMounted(() => {
 .course-scroll {
   flex: 1;
   height: 0;
-  /* 确保可以滚动 */
   touch-action: pan-y;
   -webkit-overflow-scrolling: touch;
 }
 
-/* 课程列表 */
+/* 课程列表 - Grid布局 */
 .course-list {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24rpx;
   padding: 24rpx;
-  margin: 0;
-  width: 100%;
   box-sizing: border-box;
-  min-height: 120%; /* 确保骨架屏显示时可以滚动 */
-}
-
-/* 骨架屏课程项 - 与真实卡片样式一致 */
-.skeleton-course-item {
-  width: calc(50% - 13rpx);
-  margin-right: 24rpx;
-  margin-bottom: 24rpx;
-  background: #ffffff;
-  border-radius: 24rpx;
-  overflow: hidden;
-  box-sizing: border-box;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
-  
-  &:nth-child(2n) {
-    margin-right: 0;
-  }
-  
-  .skeleton-card-image-wrapper {
-    position: relative;
-    width: 100%;
-    padding-top: 70%;
-    overflow: hidden;
-    
-    .skeleton-card-image {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
-      background-size: 200% 100%;
-      animation: shimmer 1.5s infinite;
-    }
-  }
-  
-  .skeleton-card-content {
-    padding: 20rpx;
-    
-    .skeleton-card-tag {
-      display: inline-block;
-      padding: 6rpx 16rpx;
-      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
-      background-size: 200% 100%;
-      animation: shimmer 1.5s infinite;
-      border-radius: 8rpx;
-      margin-bottom: 16rpx;
-    }
-    
-    .skeleton-card-title {
-      height: 36rpx;
-      width: 90%;
-      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
-      background-size: 200% 100%;
-      animation: shimmer 1.5s infinite;
-      border-radius: 8rpx;
-      margin-bottom: 16rpx;
-    }
-    
-    .skeleton-card-meta {
-      display: flex;
-      align-items: center;
-      gap: 24rpx;
-      
-      .skeleton-meta-item {
-        height: 28rpx;
-        background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
-        background-size: 200% 100%;
-        animation: shimmer 1.5s infinite;
-        border-radius: 8rpx;
-        
-        &.duration {
-          width: 100rpx;
-        }
-        
-        &.level {
-          width: 80rpx;
-        }
-        
-        &.participants {
-          width: 120rpx;
-        }
-      }
-    }
-  }
-}
-
-@keyframes shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
 }
 
 /* 课程卡片 */
 .course-card {
-  width: calc(50% - 13rpx);
-  margin-right: 24rpx;
-  margin-bottom: 24rpx;
+  width: 100%;
   background: #ffffff;
   border-radius: 24rpx;
   overflow: hidden;
-  box-sizing: border-box;
-  
-  /* 偶数个卡片移除右边距 */
-  &:nth-child(2n) {
-    margin-right: 0;
-  }
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   
@@ -1518,8 +1117,9 @@ onMounted(() => {
     
     .course-meta {
       display: flex;
-      gap: 16rpx;
+      gap: 12rpx;
       margin-bottom: 16rpx;
+      flex-wrap: wrap;
       
       .meta-item {
         display: flex;
@@ -1571,6 +1171,79 @@ onMounted(() => {
   }
 }
 
+/* 骨架屏样式 */
+.skeleton-course {
+  .card-image-wrapper {
+    .skeleton-card-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+    }
+  }
+  
+  .card-content {
+    .skeleton-card-tag {
+      display: inline-block;
+      width: 80rpx;
+      height: 32rpx;
+      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+      border-radius: 8rpx;
+      margin-bottom: 16rpx;
+    }
+    
+    .skeleton-card-title {
+      height: 36rpx;
+      width: 90%;
+      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+      border-radius: 8rpx;
+      margin-bottom: 16rpx;
+    }
+    
+    .skeleton-meta-item {
+      height: 32rpx;
+      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+      border-radius: 8rpx;
+      
+      &.duration {
+        width: 80rpx;
+      }
+      
+      &.level {
+        width: 60rpx;
+      }
+      
+      &.course-type {
+        width: 60rpx;
+      }
+    }
+    
+    .skeleton-footer {
+      height: 28rpx;
+      width: 120rpx;
+      background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+      border-radius: 8rpx;
+    }
+  }
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
 /* 空状态 */
 .empty-state {
   display: flex;
@@ -1617,61 +1290,24 @@ onMounted(() => {
   }
 }
 
-/* 加载状态 */
-.loading-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40rpx;
-  
-  .loading-spinner {
-    width: 48rpx;
-    height: 48rpx;
-    
-    .spinner {
-      width: 100%;
-      height: 100%;
-      border: 4rpx solid #f3f3f3;
-      border-top: 4rpx solid #f97316;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-  }
-  
-  .loading-text {
-    font-size: 26rpx;
-    color: #94a3b8;
-    margin-top: 16rpx;
-  }
-}
-
-/* 加载更多 */
-.load-more {
-  padding: 32rpx;
-  text-align: center;
-  font-size: 26rpx;
-  color: #94a3b8;
-}
-
-/* 加载更多中 */
+/* 加载更多状态 */
 .loading-more-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 24rpx;
+  padding: 32rpx;
   
   .loading-spinner {
     &.small {
-      width: 32rpx;
-      height: 32rpx;
+      width: 40rpx;
+      height: 40rpx;
       
       .spinner {
         width: 100%;
         height: 100%;
-        border: 3rpx solid #f3f3f3;
-        border-top: 3rpx solid #f97316;
+        border: 4rpx solid #f3f3f3;
+        border-top: 4rpx solid #f97316;
         border-radius: 50%;
         animation: spin 1s linear infinite;
       }
@@ -1691,10 +1327,8 @@ onMounted(() => {
   text-align: center;
   font-size: 24rpx;
   color: #cbd5e1;
-  margin: auto;
 }
 
-/* 旋转动画 */
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }