视图修改、接口修改

schoolNewsWeb/src/views/user/home/HomeView.vue

@@ -2,7 +2,15 @@
   <div class="home-view">
     <!-- 轮播横幅区域 -->
     <div class="banner-section">
+      <!-- 加载状态 -->
+      <div v-if="loading" class="banner-loading">
+        <div class="loading-spinner"></div>
+        <p>加载中...</p>
+      </div>
+      
+      <!-- 轮播图 -->
       <Carousel 
+        v-else-if="banners.length > 0"
         :items="banners" 
         :interval="5000"
         :active-icon="dangIcon"
@@ -12,6 +20,11 @@
           <BannerCard :banner="item" />
         </template>
       </Carousel>
+      
+      <!-- 空状态 -->
+      <div v-else class="banner-empty">
+        <p>暂无轮播内容</p>
+      </div>
     </div>
 
     <!-- 热门资源推荐 -->
@@ -57,18 +70,44 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { BannerCard, LearningProgress } from '@/views/public/';
 import { HotArticleCard, IdeologicalArticleCard } from '@/views/public/article';
 import { Carousel } from '@/components/base';
 import { ArrowRight } from '@element-plus/icons-vue';
+import { bannerApi } from '@/apis/resource/banner';
+import { ElMessage } from 'element-plus';
+import type { Banner } from '@/types';
 import dangIcon from '@/assets/imgs/dang.svg';
 
-// 模拟轮播数据，实际应该从接口获取
-const banners = ref([
-  { id: 1, imageUrl: '', linkType: 1, linkID: '', linkUrl: '' },
-  { id: 2, imageUrl: '', linkType: 1, linkID: '', linkUrl: '' },
-]);
+// 轮播数据
+const banners = ref<Banner[]>([]);
+const loading = ref(false);
+
+// 加载轮播图数据
+async function loadBanners() {
+  try {
+    loading.value = true;
+    const result = await bannerApi.getHomeBannerList();
+    
+    if (result.code === 200 && result.dataList) {
+      // 只显示启用状态的banner，按排序号排序
+      banners.value = result.dataList
+        .filter((banner: Banner) => banner.status === 1)
+        .sort((a: Banner, b: Banner) => (a.orderNum || 0) - (b.orderNum || 0));
+    }
+  } catch (error) {
+    console.error('加载轮播图失败:', error);
+    ElMessage.error('加载轮播图失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadBanners();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -81,6 +120,37 @@ const banners = ref([
 .banner-section {
   width: 100%;
   height: 30vh;
+  position: relative;
+}
+
+.banner-loading,
+.banner-empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #f5f7fa;
+  
+  p {
+    margin-top: 16px;
+    color: #909399;
+    font-size: 14px;
+  }
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #e4e7ed;
+  border-top-color: #E7000B;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
 .section {