diff --git a/gym-manage-uniapp/App.vue b/gym-manage-uniapp/App.vue
index dabb9d5..7e8caf1 100644
--- a/gym-manage-uniapp/App.vue
+++ b/gym-manage-uniapp/App.vue
@@ -1,28 +1,82 @@
+<!-- App.vue -->
 <script>
-	export default {
-		onLaunch: function() {
-			console.log('App Launch')
-		},
-		onShow: function() {
-			console.log('App Show')
-		},
-		onHide: function() {
-			console.log('App Hide')
-		}
-	}
-	
+export default {
+  onLaunch: function() {
+    console.log('App Launch')
+    this.preloadTabData()
+  },
+  onShow: function() {
+    console.log('App Show')
+  },
+  onHide: function() {
+    console.log('App Hide')
+  },
+  methods: {
+    // 预加载所有 Tab 页面的核心数据
+    preloadTabData() {
+      // 延迟执行，不阻塞首屏
+      setTimeout(() => {
+        // 预加载课程数据
+        // #ifdef MP-WEIXIN
+        // 小程序端预请求数据
+        uni.request({
+          url: '/api/course/recommend',
+          method: 'GET',
+          success: (res) => {
+            uni.setStorageSync('course_cache', {
+              data: res.data,
+              time: Date.now()
+            })
+          }
+        })
+        // #endif
+        
+        // 预加载训练数据
+       
+      }, 1000)
+    }
+  }
+}
 </script>
 
-<style lang="scss" scoped>
-	@import 'common/style/base.css';
-	/*每个页面公共css */
-	.app-container {
-	  width: 100%;
-	  min-height: 100vh;
-	  max-width: 430px;
-	  margin: 0 auto;
-	  background-color: var(--bg-light);
-	  position: relative;
-	  overflow-x: hidden;
-	}
-</style>
+<style lang="scss">
+@import 'common/style/base.css';
+
+/* 全局骨架屏样式 */
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* 页面切换动画 */
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateX(30rpx);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateX(-30rpx);
+}
+
+.app-container {
+  width: 100%;
+  min-height: 100vh;
+  max-width: 430px;
+  margin: 0 auto;
+  background-color: var(--bg-light);
+  position: relative;
+  overflow-x: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/gym-manage-uniapp/api/main.js b/gym-manage-uniapp/api/main.js
new file mode 100644
index 0000000..eb59c09
--- /dev/null
+++ b/gym-manage-uniapp/api/main.js
@@ -0,0 +1,50 @@
+import request from "@/utils/request.js"
+
+export function login(params) {
+  return request.post('/member/auth/miniapp/login', params)
+}
+
+export function logout() {
+  return request.post('/member/auth/logout')
+}
+
+export function getQRCode(options = { cache: true, cacheTime: 5 * 60 * 1000 }) {
+  return request.get('/checkIn/qrcode', {}, options)
+}
+
+export function checkIn(params) {
+  return request.post('/checkIn/scan', params)
+}
+
+export function getUserInfo(options = { cache: true, cacheTime: 30 * 60 * 1000 }) {
+  return request.get('/member/info', {}, options)
+}
+
+export function updateUserInfo(params) {
+  return request.put('/member/info', params)
+}
+
+export function getRecommendCourses(options = { cache: true, cacheTime: 10 * 60 * 1000 }) {
+  return request.get('/course/recommend', {}, options)
+}
+
+export function getCourseDetail(id, options = { cache: true, cacheTime: 15 * 60 * 1000 }) {
+  return request.get(`/course/${id}`, {}, options)
+}
+
+export function getGroupCoursePage(params = {}, options = { cache: true, cacheTime: 5 * 60 * 1000 }) {
+  const { page = 0, size = 10, sort = 'id', order = 'asc', keyword } = params
+  return request.post('/groupCourse/page', { page, size, sort, order, keyword }, options)
+}
+
+export default {
+  login,
+  logout,
+  getQRCode,
+  checkIn,
+  getUserInfo,
+  updateUserInfo,
+  getRecommendCourses,
+  getCourseDetail,
+  getGroupCoursePage
+}
diff --git a/gym-manage-uniapp/common/constants/routes.js b/gym-manage-uniapp/common/constants/routes.js
index e824abc..dada154 100644
--- a/gym-manage-uniapp/common/constants/routes.js
+++ b/gym-manage-uniapp/common/constants/routes.js
@@ -1,7 +1,7 @@
 /** 与 pages.json 保持一致 */
 export const PAGE = {
     INDEX: '/pages/index/index',
-    COURSE: '/pages/groupCourse/list',
+    COURSE: '/pages/course/index',
     TRAIN: '/pages/train/index',
     DISCOVER: '/pages/discover/index',
     MEMBER: '/pages/memberInfo/memberInfo',
diff --git a/gym-manage-uniapp/components/TabBar.vue b/gym-manage-uniapp/components/TabBar.vue
index 8ad3aee..4922c27 100644
--- a/gym-manage-uniapp/components/TabBar.vue
+++ b/gym-manage-uniapp/components/TabBar.vue
@@ -1,14 +1,15 @@
+<!-- components/TabBar.vue -->
 <template>
   <view class="tab-bar">
     <view
       v-for="(tab, index) in tabs"
       :key="tab.path"
-      :class="['tab-item', { active: currentIndex === index }]"
+      :class="['tab-item', { active: currentActiveIndex === index }]"
       hover-class="tab-item--hover"
       @tap.stop="onTabTap(index)"
     >
       <image
-        :src="currentIndex === index ? tab.iconActive : tab.icon"
+        :src="currentActiveIndex === index ? tab.iconActive : tab.icon"
         mode="aspectFit"
         class="tab-icon"
       />
@@ -18,7 +19,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import {
   PAGE,
   TAB_ROUTES,
@@ -31,6 +32,76 @@ const props = defineProps({
   activeTab: { type: Number, default: -1 }
 })
 
+const emit = defineEmits(['update:active', 'tab-change'])
+
+// 当前激活的索引 - 默认从路由获取
+const currentActiveIndex = ref(-1)
+
+// 从路由获取当前激活的 tab
+function getActiveIndexFromRoute() {
+  const routePath = getCurrentRoutePath()
+  const index = getTabIndexByRoute(routePath)
+  console.log('从路由获取索引:', routePath, '->', index)
+  return index >= 0 ? index : 0
+}
+
+// 同步激活状态（高优先级：路由 > props）
+function syncActiveState() {
+  // 优先从路由获取（最准确）
+  const routeIndex = getActiveIndexFromRoute()
+  if (routeIndex >= 0) {
+    currentActiveIndex.value = routeIndex
+    return
+  }
+  
+  // 其次使用 props
+  if (props.active >= 0) {
+    currentActiveIndex.value = props.active
+  } else if (props.activeTab >= 0) {
+    currentActiveIndex.value = props.activeTab
+  } else {
+    currentActiveIndex.value = 0
+  }
+}
+
+// 监听路由变化（页面切换时自动同步）
+let routeWatcher = null
+
+onMounted(() => {
+  // 初始同步
+  syncActiveState()
+  
+  // 监听路由变化（App 端）
+  // #ifdef APP-PLUS
+  routeWatcher = plus.globalEvent.addEventListener('newintent', () => {
+    setTimeout(syncActiveState, 50)
+  })
+  // #endif
+  
+  // 监听页面显示（跨端通用）
+  uni.onAppRoute ? uni.onAppRoute(() => {
+    setTimeout(syncActiveState, 50)
+  }) : null
+})
+
+onBeforeUnmount(() => {
+  // 清理监听
+  // #ifdef APP-PLUS
+  if (routeWatcher) {
+    plus.globalEvent.removeEventListener('newintent', routeWatcher)
+  }
+  // #endif
+})
+
+// 监听 props 变化
+watch(() => props.active, () => {
+  // 只有当 props 主动变化且不是来自路由同步时才更新
+  const routeIndex = getActiveIndexFromRoute()
+  if (routeIndex !== currentActiveIndex.value) {
+    syncActiveState()
+  }
+})
+
 const tabs = [
   {
     path: PAGE.INDEX,
@@ -64,19 +135,51 @@ const tabs = [
   }
 ]
 
-const currentIndex = computed(() => {
-  if (props.active >= 0) return props.active
-  if (props.activeTab >= 0) return props.activeTab
-  return getTabIndexByRoute(getCurrentRoutePath())
-})
+let isSwitching = false
 
 function onTabTap(index) {
-  if (index === currentIndex.value) return
-  const path = TAB_ROUTES[index]
-  uni.reLaunch({
-    url: path,
-    fail: () => {
-      uni.showToast({ title: '页面跳转失败', icon: 'none' })
+  if (isSwitching) return
+  
+  const targetPath = TAB_ROUTES[index]
+  const currentPath = TAB_ROUTES[currentActiveIndex.value]
+  
+  if (targetPath === currentPath) return
+  
+  console.log('Tab 点击:', index, targetPath)
+  
+  // 1. 立即更新 UI 高亮
+  currentActiveIndex.value = index
+  
+  // 2. 通知父组件
+  emit('update:active', index)
+  emit('tab-change', index)
+  
+  // 3. 显示 loading（可选）
+  let timer = setTimeout(() => {
+    uni.showLoading({ title: '加载中...', mask: true })
+  }, 50)
+  
+  isSwitching = true
+  
+  // 4. 执行跳转
+  uni.switchTab({
+    url: targetPath,
+    success: () => {
+      console.log('switchTab 成功:', targetPath)
+    },
+    fail: (err) => {
+      console.error('switchTab 失败:', err)
+      // 降级
+      uni.reLaunch({ url: targetPath })
+    },
+    complete: () => {
+      clearTimeout(timer)
+      uni.hideLoading()
+      setTimeout(() => {
+        isSwitching = false
+        // 跳转完成后，再次同步确保高亮正确
+        syncActiveState()
+      }, 100)
     }
   })
 }
@@ -106,6 +209,11 @@ function onTabTap(index) {
   align-items: center;
   gap: 8rpx;
   padding: 12rpx 24rpx;
+  transition: all 0.1s ease;
+}
+
+.tab-item:active {
+  transform: scale(0.95);
 }
 
 .tab-icon {
@@ -122,4 +230,4 @@ function onTabTap(index) {
   color: #f97316;
   font-weight: 600;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/gym-manage-uniapp/components/index/QuickEntry.vue b/gym-manage-uniapp/components/index/QuickEntry.vue
index dad233c..02a4581 100644
--- a/gym-manage-uniapp/components/index/QuickEntry.vue
+++ b/gym-manage-uniapp/components/index/QuickEntry.vue
@@ -23,9 +23,9 @@
 
 <script setup>
 
-const QEClick = () => {
+const QEClick = path => {
 	uni.navigateTo({
-		url:"/pages/checkIn/checkIn"
+		url:path
 	})
 }
 // 快捷入口数据列表
@@ -34,7 +34,8 @@ const entries = [
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
 		   title: '找课程',
 		   desc: '精品课程',
-		   accent: false
+		   accent: false,
+		   path: "/pages/searchCourse/searchCourse"
 	   },
 	  { 
 		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
diff --git a/gym-manage-uniapp/components/index/RecommendCourses.vue b/gym-manage-uniapp/components/index/RecommendCourses.vue
index 2d50868..e3d26bc 100644
--- a/gym-manage-uniapp/components/index/RecommendCourses.vue
+++ b/gym-manage-uniapp/components/index/RecommendCourses.vue
@@ -21,7 +21,7 @@
         <!-- 课程卡片 -->
         <view
           v-for="(course, index) in courses"
-          :key="index"
+          :key="course.id || index"
           class="course-card"
         >
           <!-- 课程图片区域 -->
@@ -65,7 +65,7 @@
               <text>{{ course.participants }}人参与</text>
             </view>
             <!-- 去参与按钮 -->
-            <view class="join-btn">
+            <view class="join-btn" @click="handleJoinCourse(course)">
               <text>去参与</text>
             </view>
           </view>
@@ -76,36 +76,231 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+import { getGroupCoursePage } from '@/api/main.js'
+
 // 推荐课程数据列表
-const courses = [
-  {
-    image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
-    tag: '限时免费',
-    tagType: 'free',
-    name: 'HIIT高强度燃脂',
-    duration: '30分钟',
-    level: '中级',
-    participants: '4587'
-  },
-  {
-    image: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&q=80',
-    tag: '人气TOP',
-    tagType: 'hot',
-    name: '力量进阶训练',
-    duration: '45分钟',
-    level: '高级',
-    participants: '6231'
-  },
-  {
-    image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&q=80',
-    tag: '新课上线',
-    tagType: 'new',
-    name: '瑜伽·身心平衡',
-    duration: '60分钟',
-    level: '初级',
-    participants: '3210'
+const courses = ref([])
+
+// 课程类型映射（用于显示标签）
+const getCourseTypeName = (type) => {
+  const typeMap = {
+    '1': '瑜伽',
+    '2': '搏击',
+    '3': '塑形'
   }
-]
+  return typeMap[type] || '课程'
+}
+
+// 根据课程信息获取标签文本
+const getTag = (course) => {
+  // 满员标签
+  if (course.currentMembers >= course.maxMembers) {
+    return '已满员'
+  }
+  // 已结束的课程
+  if (course.status === '2') {
+    return '已结束'
+  }
+  // 高人气标签（参与人数超过最大人数的80%）
+  if (course.currentMembers / course.maxMembers >= 0.8) {
+    return '热门'
+  }
+  // 课程类型标签
+  return getCourseTypeName(course.courseType)
+}
+
+// 根据课程信息获取标签样式类型
+const getTagType = (course) => {
+  // 满员标签样式
+  if (course.currentMembers >= course.maxMembers) {
+    return 'full'
+  }
+  // 已结束标签样式
+  if (course.status === '2') {
+    return 'ended'
+  }
+  // 热门标签样式
+  if (course.currentMembers / course.maxMembers >= 0.8) {
+    return 'hot'
+  }
+  // 默认样式
+  return 'default'
+}
+
+// 计算课程时长（从startTime和endTime计算）
+const calculateDuration = (startTime, endTime) => {
+  if (!startTime || !endTime) return '60分钟'
+  const start = new Date(startTime)
+  const end = new Date(endTime)
+  const durationMinutes = Math.floor((end - start) / (1000 * 60))
+  return `${durationMinutes}分钟`
+}
+
+// 获取课程难度（基于课程类型和描述简单判断）
+const getCourseLevel = (course) => {
+  // 可以根据实际需求调整逻辑
+  if (course.courseType === '2') return '中级'
+  if (course.courseType === '3') return '高级'
+  if (course.courseType === '1') return '初级'
+  return '初级'
+}
+
+// 处理图片URL
+const getImageUrl = (coverImage) => {
+  if (!coverImage) {
+    return 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80'
+  }
+  // 如果已经是完整URL直接返回，否则拼接基础路径
+  if (coverImage.startsWith('http')) {
+    return coverImage
+  }
+  // 这里需要根据您的实际图片基础路径配置
+  return `https://your-domain.com${coverImage}`
+}
+
+// 获取推荐课程（按最火排序，返回5条）
+const fetchRecommendCourses = async () => {
+  try {
+    const res = await getGroupCoursePage({
+      page: 0,
+      size: 5,
+      sort: 'current_members', // 按参与人数排序
+      order: 'desc' // 降序，即最火的在前
+    }, { cache: true, cacheTime: 5 * 60 * 1000 })
+    
+    if (res && res.content && Array.isArray(res.content)) {
+      // 将后端数据转换为组件所需格式
+      courses.value = res.content.map(course => ({
+        id: course.id,
+        image: getImageUrl(course.coverImage),
+        tag: getTag(course),
+        tagType: getTagType(course),
+        name: course.courseName || '未知课程',
+        duration: calculateDuration(course.startTime, course.endTime),
+        level: getCourseLevel(course),
+        participants: course.currentMembers || 0,
+        // 保存原始数据供点击事件使用
+        rawData: course
+      }))
+    } else {
+      // 如果没有数据，使用提供的示例数据作为fallback
+      useFallbackData()
+    }
+  } catch (err) {
+    // console.error('获取推荐课程失败:', err)
+    // 使用提供的示例数据作为fallback
+    useFallbackData()
+  }
+}
+
+// 使用提供的响应数据作为默认数据
+const useFallbackData = () => {
+  const fallbackContent = [
+    {
+      id: "3",
+      courseName: "燃脂搏击",
+      courseType: "2",
+      startTime: "2026-06-10T18:30:00",
+      endTime: "2026-06-10T19:30:00",
+      maxMembers: 20,
+      currentMembers: 20,
+      status: "0",
+      coverImage: "/images/kickboxing.jpg",
+      description: "高强度间歇训练，配合音乐快速燃脂，释放压力。名额已满，无法预约。"
+    },
+    {
+      id: "2",
+      courseName: "清晨流瑜伽",
+      courseType: "1",
+      startTime: "2026-06-12T09:00:00",
+      endTime: "2026-06-12T10:30:00",
+      maxMembers: 15,
+      currentMembers: 5,
+      status: "0",
+      coverImage: "/images/yoga_flow.jpg",
+      description: "适合有一定基础的学员，通过流畅的体式连接呼吸，唤醒身体能量。"
+    },
+    {
+      id: "4",
+      courseName: "哈他瑜伽",
+      courseType: "1",
+      startTime: "2026-06-01T15:20:00",
+      endTime: "2026-06-01T16:50:00",
+      maxMembers: 12,
+      currentMembers: 3,
+      status: "0",
+      coverImage: "/images/hatha_yoga.jpg",
+      description: "基础哈他瑜伽，适合所有级别。距开始不足30分钟，已停止预约。"
+    },
+    {
+      id: "6",
+      courseName: "蜜桃臀塑造",
+      courseType: "3",
+      startTime: "2026-05-30T19:00:00",
+      endTime: "2026-05-30T20:00:00",
+      maxMembers: 10,
+      currentMembers: 8,
+      status: "2",
+      coverImage: "/images/glute.jpg",
+      description: "针对性训练臀部肌肉群，课程已于5月30日结束，无法预约。"
+    },
+    {
+      id: "7",
+      courseName: "午间冥想放松",
+      courseType: "1",
+      startTime: "2026-05-31T12:00:00",
+      endTime: "2026-05-31T13:00:00",
+      maxMembers: 15,
+      currentMembers: 6,
+      status: "2",
+      coverImage: "/images/meditation_noon.jpg",
+      description: "午间冥想课程，已于5月31日结束。"
+    }
+  ]
+
+  courses.value = fallbackContent.map(course => ({
+    id: course.id,
+    image: getImageUrl(course.coverImage),
+    tag: getTag(course),
+    tagType: getTagType(course),
+    name: course.courseName || '未知课程',
+    duration: calculateDuration(course.startTime, course.endTime),
+    level: getCourseLevel(course),
+    participants: course.currentMembers || 0,
+    rawData: course
+  }))
+}
+
+// 处理参与课程点击
+const handleJoinCourse = (course) => {
+  // 根据课程状态判断是否可以参与
+  if (course.rawData.status === '2') {
+    uni.showToast({
+      title: '课程已结束',
+      icon: 'none'
+    })
+    return
+  }
+  
+  if (course.rawData.currentMembers >= course.rawData.maxMembers) {
+    uni.showToast({
+      title: '课程已满员',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // 跳转到课程详情页
+  uni.navigateTo({
+    url: `/pages/course/detail?id=${course.id}`
+  })
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchRecommendCourses()
+})
 </script>
 
 <style lang="scss">
@@ -206,6 +401,37 @@ const courses = [
   font-weight: 600;
   color: #ffffff;
   background: #f97316;
+  z-index: 2;
+  
+  /* 热门标签 */
+  &.hot {
+    background: #ef4444;
+  }
+  
+  /* 新课标签 */
+  &.new {
+    background: #10b981;
+  }
+  
+  /* 免费标签 */
+  &.free {
+    background: #3b82f6;
+  }
+  
+  /* 满员标签 */
+  &.full {
+    background: #64748b;
+  }
+  
+  /* 已结束标签 */
+  &.ended {
+    background: #94a3b8;
+  }
+  
+  /* 默认标签 */
+  &.default {
+    background: #f97316;
+  }
 }
 
 /* 课程信息区域样式 */
@@ -244,10 +470,10 @@ const courses = [
   font-size: 20rpx;
   image{
   	display: flex;
-  align-items: center;
-  	  width: 25rpx;
-  	  height: 25rpx;
-    }
+    align-items: center;
+  	width: 25rpx;
+  	height: 25rpx;
+  }
 }
 
 /* 课程底部区域样式 */
@@ -272,9 +498,9 @@ const courses = [
   font-size: 24rpx;
   image{
 	display: flex;
-align-items: center;
-	  width: 30rpx;
-	  height: 30rpx;
+    align-items: center;
+	width: 30rpx;
+	height: 30rpx;
   }
 }
 
@@ -288,4 +514,4 @@ align-items: center;
   font-weight: 600;
   color: #f97316;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/gym-manage-uniapp/pages.json b/gym-manage-uniapp/pages.json
index da2f516..b22206c 100644
--- a/gym-manage-uniapp/pages.json
+++ b/gym-manage-uniapp/pages.json
@@ -3,32 +3,52 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "健身房"
+				"navigationBarTitleText": "健身房",
+        "app-plus": {
+          "animationType": "fade-in",
+          "animationDuration": 200
+        }
 			}
 		},
 		{
 			"path": "pages/course/index",
 			"style": {
-				"navigationBarTitleText": "课程"
+				"navigationBarTitleText": "课程",
+        "app-plus": {
+          "animationType": "fade-in",
+          "animationDuration": 200
+        }
 			}
 		},
 		{
 			"path": "pages/train/index",
 			"style": {
-				"navigationBarTitleText": "训练"
+				"navigationBarTitleText": "训练",
+        "app-plus": {
+          "animationType": "fade-in",
+          "animationDuration": 200
+        }
 			}
 		},
 		{
 			"path": "pages/discover/index",
 			"style": {
-				"navigationBarTitleText": "发现"
+				"navigationBarTitleText": "发现",
+        "app-plus": {
+          "animationType": "fade-in",
+          "animationDuration": 200
+        }
 			}
 		},
 		{
 			"path": "pages/memberInfo/memberInfo",
 			"style": {
 				"navigationStyle": "custom",
-				"navigationBarTitleText": "我的"
+				"navigationBarTitleText": "我的",
+        "app-plus": {
+          "animationType": "fade-in",
+          "animationDuration": 200
+        }
 			}
 		},
 		{
@@ -231,13 +251,39 @@
 				"navigationBarTitleText": "课程详情",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/LoadingOverlay/LoadingOverlay",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
+		{
+			"path": "pages/searchCourse/searchCourse",
+			"style": {
+				"navigationBarTitleText": "搜索课程"
+			}
 		}
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "健身房",
 		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"backgroundColor": "#F8F8F8",
+		"app-plus": {
+		      "animationType": "pop-in",
+		      "animationDuration": 200
+		    }
 	},
-	"uniIdRouter": {}
+	"uniIdRouter": {},
+	"tabBar": {
+	    "custom": true,  // 启用自定义 tabBar
+	    "list": [
+	        { "pagePath": "pages/index/index", "text": "首页" },
+	        { "pagePath": "pages/course/index", "text": "课程" },
+	        { "pagePath": "pages/train/index", "text": "训练" },
+	        { "pagePath": "pages/discover/index", "text": "发现" },
+	        { "pagePath": "pages/memberInfo/memberInfo", "text": "我的" }
+	      ]
+	  }
 }
\ No newline at end of file
diff --git a/gym-manage-uniapp/pages/LoadingOverlay/LoadingOverlay.vue b/gym-manage-uniapp/pages/LoadingOverlay/LoadingOverlay.vue
new file mode 100644
index 0000000..045d1b1
--- /dev/null
+++ b/gym-manage-uniapp/pages/LoadingOverlay/LoadingOverlay.vue
@@ -0,0 +1,74 @@
+<!-- components/LoadingOverlay.vue -->
+<template>
+  <view v-if="visible" class="loading-overlay">
+    <view class="loading-content">
+      <view class="loading-spinner"></view>
+      <text class="loading-text">{{ text }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  text: { type: String, default: '加载中...' },
+  delay: { type: Number, default: 200 }
+})
+
+const visible = ref(false)
+let timer = null
+
+onMounted(() => {
+  timer = setTimeout(() => {
+    visible.value = true
+  }, props.delay)
+})
+
+onUnmounted(() => {
+  if (timer) clearTimeout(timer)
+})
+</script>
+
+<style lang="scss" scoped>
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.loading-content {
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 16rpx;
+  padding: 32rpx 48rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.loading-spinner {
+  width: 48rpx;
+  height: 48rpx;
+  border: 4rpx solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-text {
+  color: #fff;
+  font-size: 24rpx;
+}
+</style>
\ No newline at end of file
diff --git a/gym-manage-uniapp/pages/checkIn/checkIn.vue b/gym-manage-uniapp/pages/checkIn/checkIn.vue
index 2fbbb26..09ec852 100644
--- a/gym-manage-uniapp/pages/checkIn/checkIn.vue
+++ b/gym-manage-uniapp/pages/checkIn/checkIn.vue
@@ -104,7 +104,7 @@ import { onLoad, onUnload } from '@dcloudio/uni-app'
 // 引入状态组件（路径与你保持一致）
 import QrStatus from '@/components/QRCode/StatusCard.vue'
 // 引入API封装
-import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
+import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
 
 	let image = ref("")
 	let width = ref(0)
@@ -115,6 +115,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	const QRStatus = ref("生成中...")
 	const STQRC = ref(false)//是否扫码
 	const isCheckIn = ref(false)
+	const webSoketURL = "ws://localhost:8084/webSocket/checkIn"
 	
 	const qrcode = ref("")
 	
@@ -209,22 +210,31 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	}
 
 	/**
-	 * 清除所有QR_开头的缓存（用于测试阶段）
+	 * 清除所有与签到相关的缓存（用于测试阶段）
 	 */
 	const clearQRCache = () => {
 		try {
 			const keys = uni.getStorageInfoSync().keys || []
 			let clearedCount = 0
 			for (const key of keys) {
+				// 清除 QR_ 开头的缓存（页面内部缓存）
 				if (key.startsWith(CACHE_PREFIX)) {
 					uni.removeStorageSync(key)
 					clearedCount++
 				}
+				// 清除 API_CACHE_ 开头的缓存（通过 utils/cache.js 缓存的接口数据）
+				if (key.startsWith('API_CACHE_')) {
+					// 只清除与签到相关的 API 缓存
+					if (key.includes('checkIn') || key.includes('qrcode')) {
+						uni.removeStorageSync(key)
+						clearedCount++
+					}
+				}
 			}
-			console.log(`已清除 ${clearedCount} 个QR_开头的缓存`)
+			console.log(`已清除 ${clearedCount} 个签到相关缓存`)
 			return clearedCount
 		} catch (e) {
-			console.error('清除QR缓存失败:', e)
+			console.error('清除 QR 缓存失败:', e)
 			return 0
 		}
 	}
@@ -256,10 +266,8 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 						duration: 2000
 					})
 					
-					// 重新请求二维码
-					setTimeout(() => {
-						getStorage(null)
-					}, 500)
+					// 重置页面状态后不再自动请求二维码
+					uni.hideLoading()
 				}
 			}
 		})
@@ -319,7 +327,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	    errorText.value = '' // 重置错误文本
 	    image.value = ""
 	    
-	    getQRCode(true).then(res => {
+	    getQRCode({ cache: true, cacheTime: 5 * 60 * 1000 }).then(res => {
 	        console.log(res)
 	        // 保存到本地缓存（用于签到状态判断）
 	        setCacheData("QRInfo", res)
@@ -403,7 +411,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	// 手动签到接口
 	const checkIn = (qrContent) => {
 		console.log(qrContent)
-		apiCheckIn(qrContent).then(res => {
+		apiCheckIn({ qrContent }).then(res => {
 			closeWebSocket()
 			console.log(res)
 			status.value = 'scanned'
@@ -422,17 +430,20 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 			console.error('签到请求失败:', err)
 			status.value = 'error'
 			errorText.value = err.message || '签到失败，请重试' // 对应错误文案
+			uni.showToast({
+			    title: err.message,
+			    icon: 'none'
+			})
 		})
 	}
 	
 	// 建立WebSocket连接
 	const connectWebSocket = (qrContent) => {
-	    const wsUrl = `ws://192.168.43.89:8084/webSocket/checkIn`
 	    
-	    console.log('WebSocket 连接地址:', wsUrl)
+	    console.log('WebSocket 连接地址:', webSoketURL)
 	    
 	    socketTask = uni.connectSocket({
-	        url: wsUrl,
+	        url: webSoketURL,
 	        success: () => {
 	            console.log('WebSocket 连接中...')
 	        },
@@ -477,17 +488,27 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	    socketTask.onMessage((res) => {
 	        console.log('收到 WebSocket 消息:', res.data)
 	        const message = res.data
-	        
+
 	        if (message === '正在进行签到') {
+				// 显示遮罩，防止用户重复扫码
 				QRStatus.value = "正在进行签到..."
 				STQRC.value = true
-	   //          status.value = 'scanned'
-				// errorText.value = '' // 成功重置错误文本
-	   //          uni.showToast({
-	   //              title: '签到成功！',
-	   //              icon: 'success',
-	   //              duration: 2000
-	   //          })
+	        } else if (message === '签到成功' || message.includes('签到成功')) {
+				// 签到成功，更新状态
+				status.value = 'scanned'
+				errorText.value = ''
+				isCheckIn.value = true
+				QRStatus.value = "签到成功"
+				// 缓存签到状态
+				setCacheData("isCheckIn", true)
+				setCacheData("checkInTime", "签到成功")
+				uni.showToast({
+				    title: '签到成功！',
+				    icon: 'success',
+				    duration: 2000
+				})
+				// 关闭WebSocket连接
+				closeWebSocket()
 	        } else if (message.startsWith('二维码无效')) {
 	            uni.showToast({
 	                title: message,
@@ -495,18 +516,32 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	                duration: 2000
 	            })
 	            status.value = 'error'
-	            errorText.value = '二维码无效，请刷新' // 对应错误文案
+	            errorText.value = '二维码无效，请刷新'
+				// 隐藏遮罩，允许用户重新操作
+				STQRC.value = false
+				QRStatus.value = "生成中..."
 	            setTimeout(() => {
 	                closeWebSocket()
 	            }, 3000)
 	        } else if (message === '消息格式错误') {
-	            uni.showToast({
-	                title: '消息格式错误',
-	                icon: 'none'
-	            })
 	            status.value = 'error'
-	            errorText.value = '消息格式错误' // 对应错误文案
-	        } else {
+	            errorText.value = '消息格式错误'
+				// 隐藏遮罩，允许用户重新操作
+				STQRC.value = false
+				QRStatus.value = "生成中..."
+	        } else if (message.includes('失败') || message.includes('错误')) {
+				// 其他失败情况
+				uni.showToast({
+				    title: message,
+				    icon: 'none',
+				    duration: 2000
+				})
+				status.value = 'error'
+				errorText.value = message
+				// 隐藏遮罩，允许用户重新操作
+				STQRC.value = false
+				QRStatus.value = "生成中..."
+			} else {
 	            console.log('未知消息:', message)
 	        }
 	    })
@@ -523,10 +558,6 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
 	        console.error('WebSocket 错误:', err)
 	        status.value = 'error'
 	        errorText.value = '连接失败，请重试' // 对应错误文案
-	        uni.showToast({
-	            title: '连接失败',
-	            icon: 'none'
-	        })
 	    })
 	}
 	
diff --git a/gym-manage-uniapp/pages/course/index.vue b/gym-manage-uniapp/pages/course/index.vue
index dc11910..82113d6 100644
--- a/gym-manage-uniapp/pages/course/index.vue
+++ b/gym-manage-uniapp/pages/course/index.vue
@@ -1,3 +1,4 @@
+<!-- pages/course/index.vue -->
 <template>
   <view class="tab-page">
     <view class="tab-page__header">
@@ -5,27 +6,114 @@
       <text class="tab-page__subtitle">精品团课 · 私教 · 线上课</text>
     </view>
 
-    <RecommendCourses />
-
-    <view class="tab-page__actions">
-      <view class="tab-page__btn" hover-class="tab-page__btn--hover" @tap="goCourseList">
-        <text class="tab-page__btn-text">预约课程</text>
-      </view>
-      <view class="tab-page__btn tab-page__btn--ghost" hover-class="tab-page__btn--hover" @tap="goMyCourses">
-        <text class="tab-page__btn-text tab-page__btn-text--ghost">我的课程</text>
+    <!-- 骨架屏 -->
+    <view v-if="loading" class="skeleton-container">
+      <view class="skeleton-item" v-for="i in 3" :key="i">
+        <view class="skeleton-img"></view>
+        <view class="skeleton-text"></view>
       </view>
     </view>
 
+    <!-- 真实内容 -->
+    <template v-else>
+      <RecommendCourses :data="courseData" />
+      
+      <view class="tab-page__actions">
+        <view class="tab-page__btn" hover-class="tab-page__btn--hover" @tap="goCourseList">
+          <text class="tab-page__btn-text">预约课程</text>
+        </view>
+        <view class="tab-page__btn tab-page__btn--ghost" hover-class="tab-page__btn--hover" @tap="goMyCourses">
+          <text class="tab-page__btn-text tab-page__btn-text--ghost">我的课程</text>
+        </view>
+      </view>
+    </template>
+
     <view class="bottom-placeholder"></view>
-    <TabBar :active="1" />
+    <TabBar @update:active="handleTabActive" />
   </view>
 </template>
 
 <script setup>
+	import { ref } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
 import RecommendCourses from '@/components/index/RecommendCourses.vue'
 import TabBar from '@/components/TabBar.vue'
 import { PAGE, navigateToPage } from '@/common/constants/routes.js'
 
+const loading = ref(true)
+const courseData = ref(null)
+
+// 从缓存加载数据
+function loadFromCache() {
+  try {
+    const cached = uni.getStorageSync('course_cache')
+    if (cached && Date.now() - cached.time < 5 * 60 * 1000) {
+      courseData.value = cached.data
+      loading.value = false
+      return true
+    }
+  } catch (e) {
+    console.error('读取缓存失败', e)
+  }
+  return false
+}
+
+// 从网络加载数据
+async function loadFromNetwork() {
+  loading.value = true
+  
+  try {
+    // 模拟 API 请求
+    const res = await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({ code: 0, data: { list: [] } })
+      }, 500)
+    })
+    
+    if (res.code === 0) {
+      courseData.value = res.data
+      // 更新缓存
+      uni.setStorageSync('course_cache', {
+        data: res.data,
+        time: Date.now()
+      })
+    }
+  } catch (err) {
+    console.error('加载失败', err)
+    uni.showToast({ title: '加载失败', icon: 'none' })
+  } finally {
+    loading.value = false
+  }
+}
+
+// 页面激活时刷新数据（可选）
+function handleTabActive(index) {
+  // Tab 切换时后台刷新数据
+  if (index === 1 && !loading.value) {
+    loadFromNetwork()
+  }
+}
+
+onLoad(() => {
+  // 优先显示缓存
+  const hasCache = loadFromCache()
+  if (!hasCache) {
+    loadFromNetwork()
+  } else {
+    // 后台静默更新
+    setTimeout(() => {
+      loadFromNetwork()
+    }, 100)
+  }
+})
+
+onShow(() => {
+  // 每次显示时确保加载完成
+  if (loading.value && !courseData.value) {
+    loadFromNetwork()
+  }
+})
+
 function goCourseList() {
   navigateToPage(PAGE.COURSE_LIST)
 }
@@ -94,4 +182,39 @@ function goMyCourses() {
 .bottom-placeholder {
   height: 40rpx;
 }
-</style>
+
+/* 骨架屏样式 */
+.skeleton-container {
+  padding: 24rpx 32rpx;
+}
+
+.skeleton-item {
+  margin-bottom: 24rpx;
+  padding: 20rpx;
+  background: #fff;
+  border-radius: 20rpx;
+}
+
+.skeleton-img {
+  width: 100%;
+  height: 200rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: 16rpx;
+}
+
+.skeleton-text {
+  height: 32rpx;
+  margin-top: 16rpx;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: 8rpx;
+}
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>
\ No newline at end of file
diff --git a/gym-manage-uniapp/pages/index/index.vue b/gym-manage-uniapp/pages/index/index.vue
index 0850155..5fc1f70 100644
--- a/gym-manage-uniapp/pages/index/index.vue
+++ b/gym-manage-uniapp/pages/index/index.vue
@@ -15,8 +15,8 @@
     <!-- 底部占位 -->
     <view class="bottom-placeholder"></view>
 
-    <!-- 底部导航 -->
-    <TabBar :active="0" />
+    <!-- TabBar -->
+    <TabBar />
   </view>
 </template>
 
@@ -38,4 +38,5 @@ import TabBar from '@/components/TabBar.vue'
 .bottom-placeholder {
   height: 40rpx;
 }
-</style>
\ No newline at end of file
+
+</style>
diff --git a/gym-manage-uniapp/pages/searchCourse/searchCourse.vue b/gym-manage-uniapp/pages/searchCourse/searchCourse.vue
new file mode 100644
index 0000000..2fdbf3d
--- /dev/null
+++ b/gym-manage-uniapp/pages/searchCourse/searchCourse.vue
@@ -0,0 +1,1621 @@
+<template>
+  <view class="search-page-container">
+    <!-- 固定头部容器 -->
+    <view class="fixed-header">
+      <!-- 搜索栏 -->
+      <view class="search-bar-wrapper">
+        <view class="search-bar">
+          <uni-icons type="search" size="28" color="#94a3b8"></uni-icons>
+          <input 
+            class="search-input" 
+            type="text" 
+            placeholder="搜索课程名称..." 
+            v-model="keyword"
+            @confirm="handleSearch"
+            :focus="isFocus"
+            @focus="isFocus = true"
+            @blur="isFocus = false"
+          />
+          <view class="search-actions">
+            <view class="clear-btn" v-if="keyword" @tap="clearKeyword">
+              <uni-icons type="clear" size="24" color="#94a3b8"></uni-icons>
+            </view>
+            <text class="search-btn" @tap="handleSearch">搜索</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 筛选容器 -->
+      <view class="filter-container">
+        <!-- 快捷筛选标签（默认显示） -->
+        <scroll-view scroll-x class="filter-scroll" :show-scrollbar="false">
+          <view class="filter-tags">
+            <view 
+              v-for="tag in filterTags" 
+              :key="tag.value"
+              :class="['filter-tag', { active: activeFilter === tag.value }]"
+              @tap="activeFilter = tag.value; handleSearch()"
+            >
+              {{ tag.label }}
+            </view>
+          </view>
+        </scroll-view>
+        
+        <!-- 下拉展开箭头 -->
+        <view class="filter-expand" @tap="toggleExpand">
+          <view class="expand-content">
+            <text class="expand-text">{{ showAdvancedFilter ? '收起筛选' : '展开筛选' }}</text>
+            <uni-icons 
+              type="chevron-down" 
+              size="24" 
+              color="#f97316"
+              :class="{ expanded: showAdvancedFilter }"
+            ></uni-icons>
+          </view>
+        </view>
+        
+        <!-- 高级筛选内容（可折叠） -->
+        <view class="advanced-content" :class="{ expanded: showAdvancedFilter }">
+          <!-- 课程级别 -->
+          <view class="filter-group">
+            <text class="filter-label">课程级别</text>
+            <view class="filter-options">
+              <view 
+                v-for="level in levelOptions" 
+                :key="level.value"
+                :class="['filter-option', { active: selectedLevelValue === level.value }]"
+                @tap="toggleLevel(level.value)"
+              >
+                {{ level.label }}
+              </view>
+            </view>
+          </view>
+
+          <!-- 课程时长 -->
+          <view class="filter-group">
+            <text class="filter-label">课程时长</text>
+            <view class="filter-options">
+              <view 
+                v-for="duration in durationOptions" 
+                :key="duration.value"
+                :class="['filter-option', { active: selectedDurationValue === duration.value }]"
+                @tap="toggleDuration(duration.value)"
+              >
+                {{ duration.label }}
+              </view>
+            </view>
+          </view>
+
+          <!-- 排序方式 -->
+          <view class="filter-group">
+            <text class="filter-label">排序方式</text>
+            <view class="filter-options">
+              <view 
+                v-for="sort in sortOptions" 
+                :key="sort.value"
+                :class="['filter-option', { active: selectedSortValue === sort.value }]"
+                @tap="setSort(sort.value)"
+              >
+                {{ sort.label }}
+              </view>
+            </view>
+          </view>
+
+          <!-- 筛选操作按钮 -->
+          <view class="filter-actions">
+            <view class="btn-reset" @tap="resetFilters">重置</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 搜索结果列表 -->
+    <scroll-view 
+      scroll-y 
+      class="course-scroll"
+      :scroll-with-animation="true"
+      @scroll="handleScroll"
+      @scrolltolower="loadMore"
+    >
+      <!-- 刷新状态提示 -->
+      <view class="refresh-hint" v-if="isRefreshing">
+        <view class="refresh-content">
+          <view class="refresh-spinner">
+            <view class="spinner"></view>
+          </view>
+          <text class="refresh-text">刷新中...</text>
+        </view>
+      </view>
+      
+      <view class="course-list">
+        <view 
+          class="course-card" 
+          v-for="course in courses" 
+          :key="course.id" 
+          @tap="handleCourseClick(course)"
+        >
+          <view class="card-image-wrapper">
+            <image 
+              class="card-image" 
+              :src="course.image" 
+              mode="aspectFill"
+              lazy-load
+            ></image>
+            <view class="image-overlay"></view>
+            <view :class="['course-tag', course.tagType]">{{ course.tag }}</view>
+          </view>
+          <view class="card-content">
+            <text class="course-name">{{ course.name }}</text>
+            <view class="course-meta">
+              <view class="meta-item duration">
+                <uni-icons type="clock" size="20" color="#64748b"></uni-icons>
+                <text>{{ course.duration }}</text>
+              </view>
+              <view class="meta-item level">
+                <text>{{ course.level }}</text>
+              </view>
+              <view class="meta-item course-type">
+                <text>{{ course.courseType }}</text>
+              </view>
+            </view>
+            <view class="course-footer">
+              <view class="participants">
+                <uni-icons type="users" size="20" color="#94a3b8"></uni-icons>
+                <text class="count">{{ course.participants }}</text>
+                <text class="label">人已报名</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 空状态 -->
+      <view class="empty-state" v-if="courses.length === 0 && !loading">
+        <view class="empty-icon">
+          <uni-icons type="search" size="80" color="#cbd5e1"></uni-icons>
+        </view>
+        <text class="empty-title">未找到相关课程</text>
+        <text class="empty-desc">试试其他关键词或筛选条件</text>
+        <view class="empty-action" @tap="resetSearch">重新搜索</view>
+      </view>
+
+      <!-- 加载状态 -->
+      <view class="loading-state" v-if="loading">
+        <view class="loading-spinner">
+          <view class="spinner"></view>
+        </view>
+        <text class="loading-text">加载中...</text>
+      </view>
+
+      <!-- 加载更多 -->
+      <view class="load-more" v-if="hasMore && !loading && !loadingMore">
+        <text>上拉加载更多</text>
+      </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="no-more" v-if="!hasMore && !loading && !loadingMore">
+        <text>- 已加载全部课程 -</text>
+      </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 keyword = ref('')
+// 当前页
+const currentPage = ref(0)
+// 每页数量
+const pageSize = 10
+// 是否有更多数据
+const hasMore = ref(true)
+// 是否正在加载更多
+const loadingMore = ref(false)
+// 活动筛选标签
+const activeFilter = ref('all')
+// 课程列表
+const courses = ref([])
+// 加载状态
+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
+
+// 处理滚动事件
+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')
+
+// 快捷筛选标签
+const filterTags = [
+  { label: '全部', value: 'all' },
+  { label: '瑜伽', value: 'yoga' },
+  { label: '力量', value: 'strength' },
+  { label: '有氧', value: 'cardio' },
+  { label: '舞蹈', value: 'dance' },
+  { label: '普拉提', value: 'pilates' }
+]
+
+// 课程级别选项
+const levelOptions = [
+  { label: '初级', value: '初级' },
+  { label: '中级', value: '中级' },
+  { label: '高级', value: '高级' }
+]
+
+// 课程时长选项
+const durationOptions = [
+  { label: '30分钟内', value: 'short' },
+  { label: '30-60分钟', value: 'medium' },
+  { label: '60分钟以上', value: 'long' }
+]
+
+// 排序选项
+const sortOptions = [
+  { label: '默认', value: 'id' },
+  { label: '最热门', value: 'participants' },
+  { label: '最新开课', value: 'startTime' },
+  { label: '时长最短', value: 'duration' }
+]
+
+// 切换课程级别筛选（选择后立即搜索）
+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()
+}
+
+// 下拉刷新处理
+const onRefresh = () => {
+  if (isRefreshing.value) return
+  
+  isRefreshing.value = true
+  currentPage.value = 0
+  loadedDefaultData.value = false
+  
+  // 重新获取数据
+  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
+  
+  try {
+    let res
+    
+    // 测试模式：使用假数据
+    if (TEST_MODE) {
+      // 模拟网络延迟
+      await new Promise(resolve => setTimeout(resolve, 500))
+      
+      // 生成假数据（传递所有筛选参数）
+      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)
+    } else {
+      // 正常模式：使用网络请求
+      const params = {
+        page: page,
+        size: size,
+        sort: selectedSortValue.value,
+        order: selectedSortValue.value === 'duration' ? 'asc' : 'desc'
+      }
+      
+      // 添加关键词搜索参数
+      if (searchKeyword && searchKeyword.trim()) {
+        params.keyword = searchKeyword.trim()
+      }
+      
+      res = await getGroupCoursePage(params, { cache: true, cacheTime: 5 * 60 * 1000 })
+    }
+    
+    if (res && res.content) {
+      let filteredCourses = res.content
+      
+      // 非测试模式下，在客户端应用筛选条件（测试模式下假数据已过滤）
+      if (!TEST_MODE) {
+        // 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
+      }))
+      
+      if (append) {
+        courses.value = [...courses.value, ...formattedCourses]
+      } else {
+        courses.value = formattedCourses
+      }
+      
+      // 判断是否还有更多数据
+      hasMore.value = res.content.length >= size
+    }
+  } catch (err) {
+    console.error('获取课程失败:', err)
+    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 typeMap = {
+    '1': '瑜伽',
+    '2': '有氧',
+    '3': '力量',
+    '4': '舞蹈',
+    '5': '普拉提'
+  }
+  return typeMap[course.courseType] || '其他'
+}
+
+// 获取标签类型
+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'
+  }
+  return 'default'
+}
+
+// 获取课程级别
+const getLevel = (course) => {
+  const level = course.level || '初级'
+  return level
+}
+
+// 生成测试假数据
+const generateMockData = (page, size, filter, level = '', duration = '', sort = 'id', keyword = '') => {
+  const allCourses = [
+    {
+      id: 1,
+      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
+    },
+    {
+      id: 2,
+      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
+    },
+    {
+      id: 3,
+      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
+    },
+    {
+      id: 4,
+      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
+    },
+    {
+      id: 5,
+      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
+    },
+    {
+      id: 6,
+      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
+    },
+    {
+      id: 7,
+      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
+    },
+    {
+      id: 8,
+      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
+    },
+    {
+      id: 9,
+      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
+    },
+    {
+      id: 10,
+      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
+    },
+    {
+      id: 11,
+      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
+    },
+    {
+      id: 12,
+      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
+    },
+    {
+      id: 13,
+      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
+    },
+    {
+      id: 14,
+      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
+    },
+    {
+      id: 15,
+      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
+    }
+  ]
+  
+  // 根据筛选条件过滤
+  let filteredCourses = allCourses
+  
+  // 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 (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
+    }
+  })
+  
+  // 分页处理
+  const start = page * size
+  const end = start + size
+  const paginatedCourses = filteredCourses.slice(start, end)
+  
+  // 模拟分页响应结构
+  return {
+    content: paginatedCourses,
+    totalPages: Math.ceil(filteredCourses.length / size),
+    totalElements: filteredCourses.length,
+    currentPage: page,
+    pageSize: size,
+    first: page === 0,
+    last: end >= filteredCourses.length
+  }
+}
+
+// 使用默认数据
+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 handleSearch = () => {
+  currentPage.value = 0
+  hasMore.value = true
+  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)]
+  }
+  
+  // 如果添加了默认数据，标记为没有更多
+  hasMore.value = false
+}
+
+// 清除关键词
+const clearKeyword = () => {
+  keyword.value = ''
+  handleSearch()
+}
+
+// 重置所有筛选
+const resetSearch = () => {
+  keyword.value = ''
+  activeFilter.value = 'all'
+  showAdvancedFilter.value = false
+  resetFilters()
+}
+
+// 重置高级筛选
+const resetFilters = () => {
+  selectedLevelValue.value = ''
+  selectedDurationValue.value = ''
+  selectedSortValue.value = 'id'
+  handleSearch()
+}
+
+// 切换展开/收起
+const toggleExpand = () => {
+  showAdvancedFilter.value = !showAdvancedFilter.value
+}
+
+// 课程点击
+const handleCourseClick = (course) => {
+  uni.navigateTo({
+    url: `/pages/course/detail?id=${course.id}`
+  })
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchCourses()
+})
+</script>
+
+<style lang="scss">
+/* 页面容器 - 禁止整体滚动 */
+.search-page-container {
+  height: 100vh;
+  background-color: #f0f4f8;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  /* 阻止默认触摸滚动 */
+  touch-action: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 固定头部容器 */
+.fixed-header {
+  flex-shrink: 0;
+  background: #ffffff;
+  /* 阻止触摸滚动穿透 */
+  touch-action: none;
+}
+
+/* 搜索栏区域 */
+.search-bar-wrapper {
+  padding: 24rpx;
+  background: #ffffff;
+}
+
+/* 筛选容器 */
+.filter-container {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 0;
+  overflow: hidden;
+}
+
+/* 搜索栏 */
+.search-bar {
+  display: flex;
+  align-items: center;
+  background: #f8fafc;
+  border-radius: 40rpx;
+  padding: 0 24rpx;
+  height: 80rpx;
+  border: 2rpx solid #e2e8f0;
+  
+  &:active, &:focus-within {
+    border-color: #f97316;
+    box-shadow: 0 0 0 4rpx rgba(249, 115, 22, 0.1);
+  }
+  
+  .search-input {
+    flex: 1;
+    height: 100%;
+    font-size: 28rpx;
+    color: #1a202c;
+    background: transparent;
+    margin-left: 16rpx;
+  }
+  
+  .search-actions {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    margin-left: 16rpx;
+  }
+  
+  .clear-btn {
+    width: 40rpx;
+    height: 40rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .search-btn {
+    font-size: 28rpx;
+    color: #f97316;
+    font-weight: 600;
+    padding: 8rpx 20rpx;
+  }
+}
+
+/* 下拉刷新提示（列表顶部） */
+.refresh-hint {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30rpx 0;
+}
+
+/* 下拉刷新内容 */
+.refresh-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+}
+
+/* 刷新旋转动画 */
+.refresh-spinner {
+  width: 40rpx;
+  height: 40rpx;
+  
+  .spinner {
+    width: 100%;
+    height: 100%;
+    border: 4rpx solid #f3f3f3;
+    border-top: 4rpx solid #f97316;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+}
+
+/* 刷新文字 */
+.refresh-text {
+  font-size: 24rpx;
+  color: #94a3b8;
+}
+
+/* 快捷筛选滚动区域 */
+.filter-scroll {
+  white-space: nowrap;
+  padding: 20rpx 0;
+  
+  .filter-tags {
+    display: inline-flex;
+    gap: 16rpx;
+    padding: 0 24rpx;
+  }
+  
+  .filter-tag {
+    display: inline-block;
+    padding: 16rpx 32rpx;
+    background: #f8fafc;
+    border-radius: 40rpx;
+    font-size: 26rpx;
+    color: #64748b;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &.active {
+      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
+      color: #ffffff;
+      font-weight: 600;
+      box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.3);
+    }
+    
+    &:active {
+      transform: scale(0.96);
+    }
+  }
+}
+
+/* 下拉展开按钮 */
+.filter-expand {
+  padding: 16rpx 24rpx;
+  border-top: 1rpx solid #e2e8f0;
+  
+  .expand-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    
+    .expand-text {
+      font-size: 26rpx;
+      color: #64748b;
+    }
+    
+    uni-icons {
+      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+      
+      &.expanded {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  
+  &:active {
+    background: #f8fafc;
+  }
+}
+
+/* 高级筛选内容 */
+.advanced-content {
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: height 0.25s ease-out, opacity 0.15s ease-out;
+  background: #ffffff;
+  will-change: height, opacity;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  
+  &.expanded {
+    height: 520rpx;
+    opacity: 1;
+  }
+  
+  /* 筛选组 */
+  .filter-group {
+    padding: 0 24rpx;
+    margin-top: 20rpx;
+    
+    .filter-label {
+      font-size: 26rpx;
+      color: #64748b;
+      margin-bottom: 12rpx;
+      display: block;
+    }
+    
+    .filter-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12rpx;
+    }
+    
+    .filter-option {
+      padding: 12rpx 24rpx;
+      background: #f8fafc;
+      border-radius: 24rpx;
+      font-size: 24rpx;
+      color: #64748b;
+      border: 2rpx solid transparent;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      
+      &.active {
+        background: #fff7ed;
+        color: #f97316;
+        border-color: #f97316;
+      }
+      
+      &:active {
+        transform: scale(0.96);
+      }
+    }
+  }
+  
+  /* 筛选操作按钮 */
+  .filter-actions {
+    display: flex;
+    gap: 24rpx;
+    padding: 0 24rpx;
+    margin-top: 24rpx;
+    
+    .btn-reset, .btn-confirm {
+      flex: 1;
+      padding: 20rpx;
+      border-radius: 24rpx;
+      text-align: center;
+      font-size: 28rpx;
+      font-weight: 600;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    .btn-reset {
+      background: #f8fafc;
+      color: #64748b;
+      
+      &:active {
+        background: #f1f5f9;
+      }
+    }
+    
+    .btn-confirm {
+      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
+      color: #ffffff;
+      
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+  }
+}
+
+/* 课程滚动区域 */
+.course-scroll {
+  flex: 1;
+  height: 0;
+  /* 确保可以滚动 */
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 课程列表 */
+.course-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 24rpx;
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 课程卡片 */
+.course-card {
+  width: calc(50% - 13rpx);
+  margin-right: 24rpx;
+  margin-bottom: 24rpx;
+  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);
+  
+  &:active {
+    transform: scale(0.97);
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
+  }
+  
+  .card-image-wrapper {
+    position: relative;
+    width: 100%;
+    padding-top: 70%;
+    overflow: hidden;
+  }
+  
+  .card-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    .course-card:active & {
+      transform: scale(1.03);
+    }
+  }
+  
+  .image-overlay {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
+  }
+  
+  .course-tag {
+    position: absolute;
+    top: 16rpx;
+    right: 16rpx;
+    padding: 8rpx 16rpx;
+    border-radius: 12rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    color: #ffffff;
+    z-index: 2;
+    
+    &.default {
+      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
+    }
+    
+    &.hot {
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    }
+    
+    &.new {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    }
+    
+    &.disabled {
+      background: #94a3b8;
+    }
+  }
+  
+  .card-content {
+    padding: 20rpx;
+    
+    .course-name {
+      font-size: 30rpx;
+      font-weight: 700;
+      color: #1a202c;
+      margin-bottom: 12rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+    }
+    
+    .course-meta {
+      display: flex;
+      gap: 16rpx;
+      margin-bottom: 16rpx;
+      
+      .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        padding: 6rpx 12rpx;
+        border-radius: 8rpx;
+        
+        &.duration {
+          background: #f1f5f9;
+          font-size: 22rpx;
+          color: #64748b;
+        }
+        
+        &.level {
+          background: #fff7ed;
+          font-size: 22rpx;
+          color: #f97316;
+          font-weight: 600;
+        }
+        
+        &.course-type {
+          background: #ecfdf5;
+          font-size: 22rpx;
+          color: #059669;
+          font-weight: 500;
+        }
+      }
+    }
+    
+    .course-footer {
+      .participants {
+        display: flex;
+        align-items: center;
+        gap: 8rpx;
+        
+        .count {
+          font-size: 26rpx;
+          font-weight: 600;
+          color: #f97316;
+        }
+        
+        .label {
+          font-size: 22rpx;
+          color: #94a3b8;
+        }
+      }
+    }
+  }
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 48rpx;
+  
+  .empty-icon {
+    width: 160rpx;
+    height: 160rpx;
+    background: #f1f5f9;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 24rpx;
+  }
+  
+  .empty-title {
+    font-size: 32rpx;
+    color: #64748b;
+    font-weight: 600;
+    margin-bottom: 12rpx;
+  }
+  
+  .empty-desc {
+    font-size: 26rpx;
+    color: #94a3b8;
+    margin-bottom: 32rpx;
+  }
+  
+  .empty-action {
+    padding: 20rpx 48rpx;
+    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
+    color: #ffffff;
+    font-size: 28rpx;
+    font-weight: 600;
+    border-radius: 40rpx;
+    
+    &:active {
+      transform: scale(0.96);
+    }
+  }
+}
+
+/* 加载状态 */
+.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;
+  
+  .loading-spinner {
+    &.small {
+      width: 32rpx;
+      height: 32rpx;
+      
+      .spinner {
+        width: 100%;
+        height: 100%;
+        border: 3rpx solid #f3f3f3;
+        border-top: 3rpx solid #f97316;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+  
+  .loading-text {
+    font-size: 24rpx;
+    color: #94a3b8;
+    margin-top: 12rpx;
+  }
+}
+
+/* 没有更多数据 */
+.no-more {
+  padding: 32rpx;
+  text-align: center;
+  font-size: 24rpx;
+  color: #cbd5e1;
+}
+
+/* 旋转动画 */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
\ No newline at end of file
diff --git a/gym-manage-uniapp/static/tabBar/home.png b/gym-manage-uniapp/static/tabBar/home.png
new file mode 100644
index 0000000..c4220cc
Binary files /dev/null and b/gym-manage-uniapp/static/tabBar/home.png differ
diff --git a/gym-manage-uniapp/utils/cache.js b/gym-manage-uniapp/utils/cache.js
new file mode 100644
index 0000000..5c196ab
--- /dev/null
+++ b/gym-manage-uniapp/utils/cache.js
@@ -0,0 +1,89 @@
+// 缓存相关常量
+const CACHE_PREFIX = 'API_CACHE_'
+const CACHE_EXPIRE_TIME = 5 * 60 * 1000 // 默认缓存时间5分钟
+
+/**
+ * 获取缓存数据
+ * @param {string} key - 缓存键名
+ * @returns {any} 缓存数据（过期返回null）
+ */
+export const getCache = (key) => {
+  try {
+    const cacheData = uni.getStorageSync(CACHE_PREFIX + key)
+    if (cacheData && cacheData.expireTime && Date.now() < cacheData.expireTime) {
+      return cacheData.data
+    }
+    // 缓存过期，清除
+    uni.removeStorageSync(CACHE_PREFIX + key)
+    return null
+  } catch (e) {
+    console.error('获取缓存失败:', e)
+    return null
+  }
+}
+
+/**
+ * 设置缓存数据
+ * @param {string} key - 缓存键名
+ * @param {any} data - 要缓存的数据
+ * @param {number} expireTime - 过期时间（毫秒），默认5分钟
+ */
+export const setCache = (key, data, expireTime = CACHE_EXPIRE_TIME) => {
+  try {
+    const cacheData = {
+      data: data,
+      expireTime: Date.now() + expireTime
+    }
+    uni.setStorageSync(CACHE_PREFIX + key, cacheData)
+  } catch (e) {
+    console.error('设置缓存失败:', e)
+  }
+}
+
+/**
+ * 清除指定缓存
+ * @param {string} key - 缓存键名
+ */
+export const clearCache = (key) => {
+  try {
+    uni.removeStorageSync(CACHE_PREFIX + key)
+  } catch (e) {
+    console.error('清除缓存失败:', e)
+  }
+}
+
+/**
+ * 清除所有API缓存
+ */
+export const clearAllCache = () => {
+  try {
+    const keys = uni.getStorageInfoSync().keys || []
+    for (const key of keys) {
+      if (key.startsWith(CACHE_PREFIX)) {
+        uni.removeStorageSync(key)
+      }
+    }
+  } catch (e) {
+    console.error('清除所有缓存失败:', e)
+  }
+}
+
+/**
+ * 生成请求缓存键名
+ * @param {string} url - 请求URL
+ * @param {object} data - 请求参数
+ * @param {string} method - 请求方法
+ * @returns {string} 缓存键名
+ */
+export const generateCacheKey = (url, data, method) => {
+  const params = JSON.stringify(data || {})
+  return `${method}_${url}_${params}`
+}
+
+export default {
+  getCache,
+  setCache,
+  clearCache,
+  clearAllCache,
+  generateCacheKey
+}
\ No newline at end of file
diff --git a/gym-manage-uniapp/utils/request.js b/gym-manage-uniapp/utils/request.js
index e7a1898..ccffb07 100644
--- a/gym-manage-uniapp/utils/request.js
+++ b/gym-manage-uniapp/utils/request.js
@@ -1,4 +1,4 @@
-const BASE_URL = 'http://192.168.5.15:8084/api'
+const BASE_URL = '/api'
 
 // 缓存相关常量
 const CACHE_PREFIX = 'API_CACHE_'
@@ -212,4 +212,21 @@ export const requestUtils = {
   clearAllCache
 }
 
+// 添加便捷方法
+request.get = (url, data = {}, options = {}) => {
+  return request({ url, method: 'GET', data, ...options })
+}
+
+request.post = (url, data = {}, options = {}) => {
+  return request({ url, method: 'POST', data, ...options })
+}
+
+request.put = (url, data = {}, options = {}) => {
+  return request({ url, method: 'PUT', data, ...options })
+}
+
+request.delete = (url, data = {}, options = {}) => {
+  return request({ url, method: 'DELETE', data, ...options })
+}
+
 export default request
diff --git a/gym-manage-uniapp/vite.config.js b/gym-manage-uniapp/vite.config.js
index 879e01c..400a2ca 100644
--- a/gym-manage-uniapp/vite.config.js
+++ b/gym-manage-uniapp/vite.config.js
@@ -7,17 +7,22 @@ export default defineConfig({
   plugins: [uni()],
   resolve: {
 	alias: {
-	  '@': path.resolve(__dirname, 'src')
+	  '@': path.resolve(__dirname, '.')
 	},
   },
   server: {
     proxy: {
-      // 匹配所有 /api 开头的请求
+      // 匹配所有 /api/ 开头的请求（排除静态文件）
       '/api': {
         target: 'http://192.168.5.15:8084', // 你的后端SpringBoot地址
         changeOrigin: true, // 开启跨域伪装
-        // rewrite: (path) => path.replace(/^\/areyouok/, '') 
-        // 举例：前端请求 /api/login  → 代理成  http://localhost:8088/login
+        // 只代理真正的后端API请求，排除 .js .vue 等静态文件
+        bypass: function(req, res, proxyOptions) {
+          if (req.url.indexOf('.js') !== -1 || req.url.indexOf('.vue') !== -1 || 
+              req.url.indexOf('.css') !== -1 || req.url.indexOf('.json') !== -1) {
+            return req.url
+          }
+        }
       }
     }
   }