新增首页骨架屏并优化页面体验

gym-manage-uniapp/pages/index/index.vue

@@ -1,31 +1,47 @@
 <template>
-<view class="home-page">
-    <!-- Banner轮播 -->
-    <BannerSwiper />
+  <view class="home-page">
+    <!-- 骨架屏 -->
+    <HomeSkeleton v-if="loading" />
+    
+    <!-- 实际内容 -->
+    <template v-else>
+      <!-- Banner轮播 -->
+      <BannerSwiper />
 
-    <!-- 功能入口 -->
-    <QuickEntry />
+      <!-- 功能入口 -->
+      <QuickEntry />
 
-    <!-- 推荐课程 -->
-    <RecommendCourses />
+      <!-- 推荐课程 -->
+      <RecommendCourses />
 
-    <!-- 今日推荐 -->
-    <TodayRecommend />
+      <!-- 今日推荐 -->
+      <TodayRecommend />
 
-    <!-- 底部占位 -->
-    <view class="bottom-placeholder"></view>
+      <!-- 底部占位 -->
+      <view class="bottom-placeholder"></view>
 
-    <!-- TabBar -->
-    <TabBar />
+      <!-- TabBar -->
+      <TabBar />
+    </template>
   </view>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
 import BannerSwiper from '@/components/index/BannerSwiper.vue'
 import QuickEntry from '@/components/index/QuickEntry.vue'
 import RecommendCourses from '@/components/index/RecommendCourses.vue'
 import TodayRecommend from '@/components/index/TodayRecommend.vue'
 import TabBar from '@/components/TabBar.vue'
+import HomeSkeleton from '@/components/Skeleton/HomeSkeleton.vue'
+
+const loading = ref(true)
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 1500)
+})
 </script>
 
 <style lang="scss" scoped>