From 06f0215a2940bf2c7e3a55333e8335e43bd341b7 Mon Sep 17 00:00:00 2001
From: mayiming <1627832236@qq.com>
Date: Tue, 4 Nov 2025 11:51:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A1=B5=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/HomeContent.vue | 420 ++++++++++++++++++++++++++++------
 1 file changed, 347 insertions(+), 73 deletions(-)

diff --git a/web/src/views/HomeContent.vue b/web/src/views/HomeContent.vue
index 1592ae35..3eb42721 100644
--- a/web/src/views/HomeContent.vue
+++ b/web/src/views/HomeContent.vue
@@ -8,32 +8,30 @@
       arrow="always"
       v-if="carouselImages.length > 0"
     >
-      <!-- 动态循环生成轮播项 -->
       <el-carousel-item v-for="(item, index) in carouselImages" :key="item.id || index">
         <div class="carousel-item">
-          <!-- 绑定接口返回的图片URL -->
           <img :src="item.image_url" :alt="item.alt || `轮播图${index+1}`" class="carousel-img">
           <div class="carousel-caption">
-            <!-- 标题和描述可后续扩展为接口返回字段，当前先用默认值 -->
             <h3>{{ item.title || defaultTitles[index] }}</h3>
             <p>{{ item.desc || defaultDescs[index] }}</p>
           </div>
         </div>
       </el-carousel-item>
     </el-carousel>
+
     <!-- 新闻动态 -->
     <div class="news-section">
       <div class="section-header">
         <h2 style="font-family: 'Source Han Serif CN', '思源宋体 CN', serif; font-size: 55px; margin: 0; padding: 0;">
-  新闻动态<span class="en-title" style="font-family: 'Source Han Serif CN', '思源宋体 CN', serif;">News</span>
-</h2>
-        <el-link class="more-btn" :to="{ path: '/news-more' }">More</el-link>
+          新闻动态<span class="en-title" style="font-family: 'Source Han Serif CN', '思源宋体 CN', serif;">News</span>
+        </h2>
+        <router-link to="/news-more" class="more-btn">More</router-link>
       </div>
       <div class="news-cards">
         <el-card
           class="news-card"
-          v-for="(news, index) in newsList"
-          :key="index"
+          v-for="(news, index) in newsList.slice(0, 3)"
+          :key="news.id"
           shadow="hover"
           :body-style="{ padding: '0px' }"
         >
@@ -41,37 +39,63 @@
           <div class="card-content">
             <h3 class="card-title">{{ news.title }}</h3>
             <p class="card-desc">{{ news.desc }}</p>
-            <el-button type="text" class="detail-btn">
-              <el-icon><ArrowRight /></el-icon> 详情
-            </el-button>
+            <div class="detail-btn" @click="handleDetailClick(news, 'news')">
+              <span class="arrow-circle">
+                <el-icon><ArrowRight /></el-icon>
+              </span>
+              <span class="detail-text">详情</span>
+            </div>
           </div>
         </el-card>
       </div>
+      <div class="featured-news" v-if="featuredNews">
+        <div class="featured-img-container">
+          <img :src="featuredNews.imageUrl" :alt="featuredNews.title" class="featured-img">
+        </div>
+        <div class="featured-content">
+          <div class="featured-header">
+            <h3 class="featured-title">
+              <span class="prefix">最新成果：</span>
+              {{ featuredNews.title }}
+            </h3>
+            <el-link class="featured-more" @click="handleDetailClick(featuredNews, 'news')">More</el-link>
+          </div>
+          <div class="featured-date">{{ featuredNews.date }}</div>
+          <div class="featured-desc">{{ featuredNews.fullDesc }}</div>
+        </div>
+      </div>
     </div>
 
     <!-- 案例资源 -->
     <div class="news-section">
       <div class="section-header">
         <h2 style="font-family: 'Source Han Serif CN', '思源宋体 CN', serif; font-size: 55px; margin: 0; padding: 0;">
-  案例资源<span class="en-title" style="font-family: 'Source Han Serif CN', '思源宋体 CN', serif;">News</span>
-</h2>
-        <el-link class="more-btn" :to="{ path: '/resource-more' }">More</el-link>
+          案例资源<span class="en-title" style="font-family: 'Source Han Serif CN', '思源宋体 CN', serif;">Cases</span>
+        </h2>
+        <router-link to="/case-resources" class="more-btn">More</router-link>
       </div>
       <div class="news-cards">
         <el-card
           class="news-card"
           v-for="(resource, index) in resourceList"
-          :key="index"
+          :key="resource.id"
           shadow="hover"
           :body-style="{ padding: '0px' }"
         >
           <img :src="resource.imageUrl" alt="案例资源图片" class="card-img">
           <div class="card-content">
             <h3 class="card-title">{{ resource.title }}</h3>
-            <p class="card-desc">{{ resource.desc }}</p>
-            <el-button type="text" class="detail-btn">
-              <el-icon><ArrowRight /></el-icon> 详情
-            </el-button>
+            <p class="card-desc">
+
+              <br>
+              {{ resource.desc }}
+            </p>
+            <div class="detail-btn" @click="handleDetailClick(resource, 'case')">
+              <span class="arrow-circle">
+                <el-icon><ArrowRight /></el-icon>
+              </span>
+              <span class="detail-text">详情</span>
+            </div>
           </div>
         </el-card>
       </div>
@@ -81,25 +105,29 @@
     <div class="news-section">
       <div class="section-header">
         <h2 style="font-family: 'Source Han Serif CN', '思源宋体 CN', serif; font-size: 55px; margin: 0; padding: 0;">
-  社区服务<span class="en-title" style="font-family: 'Source Han Serif CN', '思源宋体 CN', serif;">News</span>
-</h2>
-        <el-link class="more-btn" :to="{ path: '/community-more' }">More</el-link>
+          社会服务<span class="en-title" style="font-family: 'Source Han Serif CN', '思源宋体 CN', serif;">Services</span>
+        </h2>
+        <router-link to="/social-service" class="more-btn">More</router-link>
       </div>
       <div class="news-cards">
         <el-card
           class="news-card"
           v-for="(service, index) in communityList"
-          :key="index"
+          :key="service.id"
           shadow="hover"
           :body-style="{ padding: '0px' }"
         >
           <img :src="service.imageUrl" alt="社区服务图片" class="card-img">
           <div class="card-content">
             <h3 class="card-title">{{ service.title }}</h3>
+            <p class="card-subtitle">{{ service.subtitle }}</p>
             <p class="card-desc">{{ service.desc }}</p>
-            <el-button type="text" class="detail-btn">
-              <el-icon><ArrowRight /></el-icon> 详情
-            </el-button>
+            <div class="detail-btn" @click="handleDetailClick(service, 'service')">
+              <span class="arrow-circle">
+                <el-icon><ArrowRight /></el-icon>
+              </span>
+              <span class="detail-text">详情</span>
+            </div>
           </div>
         </el-card>
       </div>
@@ -109,15 +137,21 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { ElCarousel, ElCarouselItem, ElLink, ElCard, ElButton, ElIcon } from 'element-plus';
+import { ElCarousel, ElCarouselItem, ElLink, ElCard, ElIcon, ElLoading, ElMessage } from 'element-plus';
 import { ArrowRight } from '@element-plus/icons-vue';
 import axios from 'axios';
+import { useRouter } from 'vue-router';
 
 // 数据结构
 interface NewsItem {
+  id?: number;
   imageUrl: string;
   title: string;
-  desc: string;
+  subtitle?: string;
+  desc: string; // 必需属性
+  fullDesc?: string;
+  date?: string;
+  tutorName?: string;
 }
 
 interface Article {
@@ -125,12 +159,66 @@ interface Article {
   title: string;
   cover: string;
   excerpt: string;
+  publish_date?: string;
+  content?: string;
+}
+
+interface TeachingCase {
+  id: number;
+  title: string;
+  tutor_name: string;
+  tutor_title: string;
+  student_names: string;
+  content: string;
+  cover_url: string;
+  create_time: string;
+}
+
+interface CaseResponse {
+  total: number;
+  list: TeachingCase[];
+}
+
+interface SocialServiceItem {
+  id: number;
+  title: string;
+  subtitle: string;
+  cover_url: string;
+  intro: string;
+  content: string;
+  publish_time: string;
+}
+
+interface SocialServiceResponse {
+  code: number;
+  message: string;
+  data: {
+    total: number;
+    list: SocialServiceItem[];
+  };
 }
 
 // 响应式数据
 const newsList = ref<NewsItem[]>([]);
 const resourceList = ref<NewsItem[]>([]);
 const communityList = ref<NewsItem[]>([]);
+const featuredNews = ref<NewsItem | null>(null);
+const router = useRouter();
+
+// 详情点击事件（新增type参数区分内容类型）
+const handleDetailClick = (item: NewsItem, type: 'news' | 'case' | 'service') => {
+  if (item.id) {
+    router.push({
+      path: '/detail',
+      query: {
+        id: item.id,
+        type: type
+      }
+    });
+  } else {
+    ElMessage.warning('该内容暂无详情');
+  }
+};
 
 // HTML转纯文本工具函数
 function stripHtml(htmlStr: string): string {
@@ -139,48 +227,123 @@ function stripHtml(htmlStr: string): string {
   return doc.body.textContent || "";
 }
 
-// 通用请求函数
+// 格式化日期
+function formatDate(dateStr?: string): string {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+}
+
+// 新闻数据请求
 const fetchArticlesByTopic = async (topic: string): Promise<NewsItem[]> => {
+  const loading = ElLoading.service({ text: '加载中...' });
   try {
     const response = await fetch('http://localhost:8080/api/articles/getarticle', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ page: 1, size: 3, topic })
+      body: JSON.stringify({ page: 1, size: 4, topic })
     });
 
     if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
     const data = await response.json();
 
     if (data && Array.isArray(data.Article_list)) {
-      return data.Article_list.map((article: Article) => {
-        const plainTextDesc = stripHtml(article.excerpt);
-        const truncatedDesc = plainTextDesc.length > 100 ? `${plainTextDesc.substring(0, 100)}...` : plainTextDesc;
-        return {
-          imageUrl: article.cover,
-          title: article.title,
-          desc: truncatedDesc,
-        };
-      });
+      return data.Article_list.map((article: Article) => ({
+        id: article.id,
+        imageUrl: article.cover,
+        title: article.title,
+        desc: stripHtml(article.excerpt).slice(0, 100) + '...',
+        fullDesc: stripHtml(article.content || ''),
+        date: article.publish_date ? formatDate(article.publish_date) : ''
+      }));
     }
     return [];
   } catch (error) {
     console.error(`Failed to fetch ${topic}:`, error);
+    ElMessage.error('新闻数据加载失败');
     return [];
+  } finally {
+    loading.close();
+  }
+};
+
+// 案例资源请求
+const fetchTeachingCases = async (): Promise<NewsItem[]> => {
+  const loading = ElLoading.service({ text: '加载中...' });
+  try {
+    const response = await axios.post<CaseResponse>(
+      'http://localhost:8080/api/teaching-cases/list',
+      { page: 1, size: 20, keyword: "", sort: 0 }
+    );
+
+    return response.data.list
+      .sort((a, b) => new Date(b.create_time).getTime() - new Date(a.create_time).getTime())
+      .slice(0, 3)
+      .map(caseItem => ({
+        id: caseItem.id,
+        imageUrl: caseItem.cover_url,
+        title: caseItem.title,
+        desc: stripHtml(caseItem.content).slice(0, 80) + '...',
+        tutorName: caseItem.tutor_name
+      }));
+  } catch (error) {
+    console.error('获取案例资源失败：', error);
+    ElMessage.error('案例资源加载失败');
+    return [];
+  } finally {
+    loading.close();
+  }
+};
+
+// 社区服务请求
+const fetchSocialServices = async (): Promise<NewsItem[]> => {
+  const loading = ElLoading.service({ text: '加载中...' });
+  try {
+    const response = await axios.post<SocialServiceResponse>(
+      'http://localhost:8080/api/social-service/list',
+      { page: 1, page_size: 20 }
+    );
+
+    if (response.data.code !== 0) throw new Error(response.data.message);
+
+    return response.data.data.list
+      .sort((a, b) => new Date(b.publish_time).getTime() - new Date(a.publish_time).getTime())
+      .slice(0, 3)
+      .map(service => ({
+        id: service.id,
+        imageUrl: service.cover_url,
+        title: service.title,
+        subtitle: service.subtitle,
+        desc: (service.intro || stripHtml(service.content)).slice(0, 100) + '...'
+      }));
+  } catch (error) {
+    console.error('获取社区服务失败：', error);
+    ElMessage.error('社区服务加载失败');
+    return [];
+  } finally {
+    loading.close();
   }
 };
 
 // 挂载时请求数据
 onMounted(async () => {
-  const [newsData, resourceData, communityData] = await Promise.all([
-    fetchArticlesByTopic('新闻'),
-    fetchArticlesByTopic('案例资源'),
-    fetchArticlesByTopic('社区服务')
-  ]);
-  newsList.value = newsData;
-  resourceList.value = resourceData;
-  communityList.value = communityData;
+  const newsData = await fetchArticlesByTopic('新闻');
+  newsList.value = newsData.slice(0, 3);
+  // 修复：补充必需的 desc 属性，与 NewsItem 接口一致
+  featuredNews.value = newsData[3] || {
+    id: 4,
+    imageUrl: 'https://p11-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/5d52aa74480f44788c82993e586cb6e7.png~tplv-a9rns2rl98-resize-jpeg-v1.png',
+    title: '"中国网谷杯"乡村文创案例',
+    desc: '8月22日，2025年武汉轻工大学创新创业大赛乡村文创赛道决赛落幕...', // 新增必需属性
+    fullDesc: '8月22日，2025年武汉轻工大学创新创业大赛乡村文创赛道决赛落幕，我校"中国网谷杯"乡村文创案例凭借创新设计理念和实用价值荣获金奖，相关成果将应用于乡村振兴实践项目。',
+    date: '2025年8月22日'
+  };
+
+  resourceList.value = await fetchTeachingCases();
+  communityList.value = await fetchSocialServices();
 });
 
+// 轮播图数据
 const defaultTitles = [
   '健康生活环境设计研究成果展',
   '2025健康设计国际学术研讨会',
@@ -192,39 +355,27 @@ const defaultDescs = [
   '以设计赋能社区，提升居民生活品质'
 ];
 
-
 interface CarouselImage {
-  id?: number; // 可选，数据库返回的ID
-  image_url: string; // 图片URL（必选）
-  sort?: number; // 可选，排序字段
-  // 其他可选字段（如title、desc等）
+  id?: number;
+  image_url: string;
+  sort?: number;
   title?: string;
   desc?: string;
   alt?: string;
 }
 
-// 2. 显式指定泛型类型为 CarouselImage[]
 const carouselImages = ref<CarouselImage[]>([]);
 onMounted(async () => {
   try {
-    // 发送 POST 请求，JSON 体传参
     const response = await axios.post(
       'http://localhost:8080/api/page-image/get',
-      { page: 'home' } // JSON 格式传递 page 参数
+      { page: 'home' }
     );
-    console.log("首页图片查询成功",response.data.images);
-    // 检查响应是否成功
     if (response.data.message === '查询成功') {
-
-
-      // 按 sort 排序（处理可能的 undefined）
-      carouselImages.value = response.data.images
-
-      console.log("赋值后:",carouselImages.value);
+      carouselImages.value = response.data.images;
     }
   } catch (error) {
-    console.error('查询失败：', error);
-    // 兜底数据
+    console.error('查询轮播图失败：', error);
     carouselImages.value = [
       { image_url: 'https://picsum.photos/1920/400?random=1' },
       { image_url: 'https://picsum.photos/1920/400?random=2' },
@@ -232,8 +383,6 @@ onMounted(async () => {
     ];
   }
 });
-
-
 </script>
 
 <style scoped>
@@ -271,7 +420,7 @@ onMounted(async () => {
   font-size: 18px;
 }
 
-/* 新闻列表样式 */
+/* 公共区块样式 */
 .news-section {
   max-width: 1200px;
   margin: 50px auto;
@@ -299,23 +448,26 @@ onMounted(async () => {
 .more-btn {
   color: #999;
   font-size: 14px;
+  cursor: pointer;
 }
 .more-btn:hover {
   color: #b50009;
 }
 
-/* 卡片样式 */
+/* 卡片通用样式 */
 .news-cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
+  margin-bottom: 30px;
 }
 .news-card {
   border: 1px solid #e0e0e0;
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
-  height:   458px;
+  height: 480px;
+  cursor: pointer;
 }
 .news-card:hover {
   transform: translateY(-5px);
@@ -339,6 +491,13 @@ onMounted(async () => {
   font-weight: 500;
   color: #333;
 }
+.card-subtitle {
+  font-size: 14px;
+  color: #666;
+  margin: 0 0 10px 0;
+  font-style: italic;
+  line-height: 1.5;
+}
 .card-desc {
   font-family: 'Source Han Sans CN', '思源黑体 CN', sans-serif;
   font-size: 14px;
@@ -347,14 +506,114 @@ onMounted(async () => {
   flex-grow: 1;
   margin-bottom: 15px;
   font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
 }
+
+/* 详情按钮样式 */
 .detail-btn {
-  color: #b50009 !important;
   display: flex;
   align-items: center;
-  gap: 5px;
-  padding: 0 !important;
+  gap: 8px;
+  cursor: pointer;
   align-self: flex-start;
+  transition: all 0.2s ease;
+  padding: 5px 0;
+}
+.detail-btn:hover {
+  opacity: 0.9;
+  transform: translateX(3px);
+}
+.arrow-circle {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #b50009;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+.detail-text {
+  color: #333;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* 特色新闻样式 */
+.featured-news {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  border: 1px solid #e0e0e0;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+.featured-news:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+.featured-img-container {
+  height: 100%;
+  min-height: 280px;
+}
+.featured-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.featured-content {
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.featured-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 15px;
+}
+.featured-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
+  margin: 0;
+}
+.featured-title .prefix {
+  color: #666;
+  font-weight: 400;
+}
+.featured-more {
+  color: #b50009;
+  font-size: 14px;
+  align-self: flex-start;
+  margin-top: 5px;
+  cursor: pointer;
+}
+.featured-date {
+  color: #999;
+  font-size: 14px;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px dashed #e0e0e0;
+}
+.featured-desc {
+  font-size: 15px;
+  color: #666;
+  line-height: 1.8;
+  margin: 0;
+}
+
+/* 案例资源导师信息样式 */
+.tutor-info {
+  font-weight: 500;
 }
 
 /* 响应式调整 */
@@ -362,6 +621,12 @@ onMounted(async () => {
   .news-cards {
     grid-template-columns: repeat(2, 1fr);
   }
+  .featured-news {
+    grid-template-columns: 1fr;
+  }
+  .featured-img-container {
+    min-height: 220px;
+  }
 }
 @media (max-width: 768px) {
   .carousel-caption h3 {
@@ -373,5 +638,14 @@ onMounted(async () => {
   .news-cards {
     grid-template-columns: 1fr;
   }
+  .card-title {
+    font-size: 22px;
+  }
+  .featured-content {
+    padding: 20px;
+  }
+  .featured-title {
+    font-size: 20px;
+  }
 }
 </style>