refactor(前端): 重构前端代码结构并优化功能

重构路由配置和API调用逻辑，统一分页处理方式
优化分类和标签模块的交互，提取蒙版组件到主布局
调整样式和布局，增强响应式设计
更新接口字段名以保持前后端一致性
添加网站运行时间显示功能

src/views/home.vue

@@ -9,7 +9,7 @@
 
     <!-- 文章列表 -->
     <transition-group name="article-item" tag="div"  class="article-list-content"  v-else>
-      <div class="article-card" v-for="article in displayedArticles" :key="article.articleId"
+      <div class="article-card" v-for="article in articleList" :key="article.articleId"
         @click="handleArticleClick(article)">
         <h6 class="article-title">{{ article.title }}</h6>
         <div v-if="article.marked" class="article-special-tag">标记文章</div>
@@ -28,7 +28,7 @@
         </div>
       </div>
         <!-- 分页区域 -->
-        <PaginationComponent class="pagination-container" :list="articleList" :pageSize="10" @changePage="handleCurrentDataUpdate" :key="'pagination'" />
+         <el-pagination size="medium" background :layout="pageLayout" v-model:current-page="pageNum" hide-on-single-page="true"  @current-change="changePage"  :page-size="pageSize"  :page-count="totalPages" class="mt-4" />
     </transition-group>
     <!-- 空状态 -->
     <div v-if="!loading && articleList.length === 0" class="empty-state-container">
@@ -55,22 +55,24 @@ const globalStore = useGlobalStore()
 // 路由相关
 const router = useRouter()
 const route = useRoute()
+// 分页属性
+const pageNum = ref(1) // 当前页码
+const pageSize = ref(10) // 每页数量
+const totalPages = ref(0) // 总页数
+const pageLayout = ref('pager, next')// 分页布局
 
 // 响应式状态
 const articleList = ref([])
-const displayedArticles = ref([])
 const loading = ref(false)
 
+
+
 // ========== 分页数据处理 ==========
 
 /**
  * 处理分页组件的数据更新
  * @param {Array} data - 分页组件传递的当前页数据
  */
-const handleCurrentDataUpdate = (data) => {
-  displayedArticles.value = data
-  // console.log('更新后的当前页数据：', data)
-}
 
 // ========== 文章数据获取模块 ==========
 
@@ -84,22 +86,27 @@ const getArticlesByRoute = async () => {
   // console.log('当前路由分段:', pathSegment)
   
   switch (pathSegment) {
-    case 'aericletype':
+    case 'aericleattribute':
       // 按属性类型获取文章
       const attributeData = globalStore.getValue('attribute')
-      return await articleService.getArticlesByAttributeId(attributeData?.id)
+      return await articleService.getPagedArticles({attributeid: attributeData?.id}, pageNum.value, pageSize.value)
+    case 'aericlecategory':
+      // 按分类类型获取文章
+      const categoryData = globalStore.getValue('category')
+      return await articleService.getPagedArticles({categoryid: categoryData?.id}, pageNum.value, pageSize.value)
     case 'aericletitle':
       // 按标题搜索文章
       const titleData = globalStore.getValue('articleserarch')
-      return await articleService.getArticlesByTitle(titleData?.name)
+      console.log('按标题搜索文章:', titleData.name)
+      return await articleService.getPagedArticles({title: titleData?.name}, pageNum.value, pageSize.value)
     case 'aericlestatus':
       // 按状态获取文章
       const statusData = globalStore.getValue('articlestatus')
-      return await articleService.getArticlesByStatus(statusData?.status)
+      return await articleService.getPagedArticles({status: statusData?.status}, pageNum.value, pageSize.value)
     default:
       // 默认获取所有文章
       // console.log('获取所有文章列表')
-      return await articleService.getAllArticles()
+      return await articleService.getPagedArticles({status: 1}, pageNum.value, pageSize.value)
   }
 }
 
@@ -148,14 +155,6 @@ const enrichArticlesWithExtraInfo = async (articles) => {
   return enrichedArticles
 }
 
-/**
- * 初始化显示文章列表
- * @param {Array} articles - 完整文章列表
- */
-const initializeDisplayedArticles = (articles) => {
-  // 初始显示前3条数据
-  displayedArticles.value = articles.slice(0, 3)
-}
 
 /**
  * 获取文章列表主函数
@@ -168,28 +167,23 @@ const fetchArticles = async () => {
     
     // 1. 根据路由获取文章列表
     response = await getArticlesByRoute()
+    // console.log('更新后的文章列表:', response)
     
     // 2. 确保数据存在
-    if (!response.data || !Array.isArray(response.data)) {
+    if (!response.data.content || !Array.isArray(response.data.content)) {
       articleList.value = []
-      displayedArticles.value = []
       return
     }
     
     // 3. 为文章列表补充额外信息
-    const enrichedArticles = await enrichArticlesWithExtraInfo(response.data)
+    const enrichedArticles = await enrichArticlesWithExtraInfo(response.data.content)
     
     // 4. 更新文章列表
     articleList.value = enrichedArticles
-    
-    // 5. 初始化显示的文章
-    initializeDisplayedArticles(enrichedArticles)
-    
   } catch (error) {
     console.error('获取文章列表失败:', error)
     ElMessage.error('获取文章列表失败，请稍后重试')
   } finally {
-    // console.log('最终文章列表数据:', articleList.value)
     loading.value = false
   }
 }
@@ -222,7 +216,24 @@ const handleArticleClick = (article) => {
     ElMessage.error('操作失败，请稍后重试')
   }
 }
-
+/**
+ * 处理分页变化事件
+ * @param {number} newPage - 新的页码
+ */
+const changePage = (newPage) => {
+  fetchArticles()
+  // 根据当前页码优化分页布局
+    if (page === 1) {
+        // 第一页只显示页码和下一页按钮
+        pageLayout.value = 'pager, next'
+    } else if (page === totalPages.value) {
+        // 最后一页只显示上一页按钮和页码
+        pageLayout.value = 'prev, pager'
+    } else {
+        // 中间页显示完整的上一页、页码、下一页
+        pageLayout.value = 'prev, pager, next'
+    }
+}
 // ========== 生命周期和监听器 ==========
 
 /**
@@ -237,11 +248,6 @@ const handleRouteChange = () => {
  * 处理文章列表变化的回调函数
  * @param {Array} newList - 新的文章列表
  */
-const handleArticleListChange = (newList) => {
-  if (newList && newList.length > 0) {
-    displayedArticles.value = newList.slice(0, 3)
-  }
-}
 
 // 组件挂载时获取数据
 onMounted(() => {
@@ -260,7 +266,6 @@ watch(
 // 监听原始文章列表变化，确保初始数据正确显示
 watch(
   () => articleList.value,
-  handleArticleListChange,
   { deep: true }
 )
 </script>