feat: 重构前端项目结构并添加新功能

重构项目目录结构，将组件和服务模块化
添加Element Plus UI库并集成到项目中
实现文章、留言和分类的类型定义
新增工具函数模块包括日期格式化和字符串处理
重写路由配置并添加全局路由守卫
优化页面布局和响应式设计
新增服务层封装API请求
完善文章详情页和相关文章推荐功能

src/views/aericle.vue

@@ -1,39 +1,94 @@
 <template>
   <div id="allstyle">
     <div class="header">
-      <h1>目录</h1>
+      <h1>文章目录</h1>
     </div>
-    <div class="post_content">
-      <div v-for="(items, index) in datas" style=" padding: 20px;">
-        <h2>{{ items[index] }}</h2>
-        <span class="badge badge-primary">共{{ contentsum(items) }}篇</span>
+    
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <el-skeleton :count="5" />
+    </div>
+    
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="error-container">
+      <el-alert :title="error" type="error" show-icon />
+      <el-button type="primary" @click="fetchCategories">重新加载</el-button>
+    </div>
+    
+    <!-- 分类列表 -->
+    <div v-else-if="categories.length > 0" class="post_content">
+      <div v-for="categoryGroup in categories" :key="categoryGroup.name" class="category-group">
+        <div class="category-header">
+          <h2>{{ categoryGroup.name }}</h2>
+          <span class="badge badge-primary">共{{ getCategorySum(categoryGroup.categories) }}篇</span>
+        </div>
+        
         <ul class="pcont_ul">
-          <li class="pcont_li" v-for="item in items">
-            <a class="btn" @click="btnonclick(item.typeid)"><kbd>{{ item.content }}</kbd></a> — —({{ item.sum }})
+          <li class="pcont_li" v-for="category in categoryGroup.categories" :key="category.typeid">
+            <button class="btn" @click="handleCategoryClick(category.typeid)">
+              <kbd>{{ category.content }}</kbd>
+            </button>
+            <span class="category-count">({{ category.sum }})</span>
           </li>
         </ul>
       </div>
     </div>
+    
+    <!-- 空状态 -->
+    <div v-else class="empty-container">
+      <el-empty description="暂无分类" />
+    </div>
   </div>
 </template>
-<script setup>
-import { useRouter } from 'vue-router'
-import { articleAPI } from '@/axios/api'
-import { ref, onMounted } from 'vue'
-const router = useRouter()
-const datas = ref([])
-console.log("获取文章列表")
-onMounted(() => {
-  articleAPI.getAllArticles().then(res => {
-    datas.value = res.data
-  }).catch(err => {
-    console.log(err)
-  }).finally(() => {
-    console.log("finally")
-  })
-})
 
-const btnonclick = (typeid) => {
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { ref, onMounted } from 'vue'
+import { articleService } from '@/services'
+import { ElMessage } from 'element-plus'
+import type { Category } from '@/types'
+
+const router = useRouter()
+
+// 响应式状态
+const categories = ref<any[]>([])
+const loading = ref(false)
+const error = ref('')
+
+/**
+ * 获取文章分类列表
+ */
+const fetchCategories = async () => {
+  try {
+    loading.value = true
+    error.value = ''
+    
+    // 获取所有文章数据，然后从中提取分类信息
+    const res = await articleService.getAllArticles()
+    
+    if (res.data && res.data.length > 0) {
+      // 假设数据结构是嵌套的分类组
+      categories.value = res.data
+    } else {
+      categories.value = []
+    }
+    
+    console.log('获取分类列表成功:', categories.value)
+  } catch (err) {
+    error.value = '获取分类列表失败，请稍后重试'
+    console.error('获取分类列表失败:', err)
+    ElMessage.error(error.value)
+  } finally {
+    loading.value = false
+    console.log('分类列表加载完成')
+  }
+}
+
+/**
+ * 处理分类点击事件
+ * @param {string} typeid - 分类ID
+ */
+const handleCategoryClick = (typeid: string) => {
   router.push({
     path: '/:type',
     query: {
@@ -41,25 +96,73 @@ const btnonclick = (typeid) => {
     }
   })
 }
-const contentsum = (items) => {
-  let nums = 0
-  for (let i = 0; i < items.length; i++) {
-    nums += items[i].sum
+
+/**
+ * 计算分类组中的文章总数
+ * @param {Array} categoryItems - 分类项数组
+ * @returns {number} 文章总数
+ */
+const getCategorySum = (categoryItems: any[]): number => {
+  if (!categoryItems || !Array.isArray(categoryItems)) {
+    return 0
   }
-  return nums
+  
+  return categoryItems.reduce((total, item) => {
+    return total + (item.sum || 0)
+  }, 0)
 }
+
+/**
+ * 组件挂载时获取分类列表
+ */
+onMounted(() => {
+  fetchCategories()
+})
 </script>
-<style>
+
+<style scoped>
 .header {
   text-align: center;
   padding: 20px;
+  margin-bottom: 20px;
+}
+
+.header h1 {
+  color: #2c3e50;
+  font-size: 1.8rem;
 }
 
 .post_content {
   padding: 20px;
 }
 
+.category-group {
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.category-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #ecf0f1;
+}
+
+.category-header h2 {
+  color: #34495e;
+  font-size: 1.4rem;
+  margin: 0;
+}
+
 .pcont_ul {
+  list-style: none;
+  padding: 0;
+  display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 15px;
   margin-top: 20px;
@@ -70,20 +173,30 @@ const contentsum = (items) => {
   align-items: center;
   padding: 10px 15px;
   border-radius: 12px;
+  background-color: rgba(245, 247, 250, 0.7);
   transition: transform 0.3s ease;
+  gap: 10px;
 }
 
+.pcont_li:hover {
+  transform: translateY(-2px);
+  background-color: rgba(236, 240, 241, 0.9);
+}
 
 .btn {
   position: relative;
   text-decoration: none;
-  color: black;
+  color: #34495e;
   padding: 10px 15px;
   border-radius: 8px;
   transition: all 0.3s ease;
   display: inline-block;
   z-index: 1;
   overflow: hidden;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1rem;
 }
 
 /* 透明方块效果 */
@@ -99,17 +212,22 @@ const contentsum = (items) => {
   transition: all 0.3s ease;
   transform: scale(0.95);
   opacity: 0.8;
+  background: rgba(255, 255, 255, 0.5);
 }
 
 /* 悬浮效果 */
 .btn:hover::before {
   transform: scale(1.1);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
   background: rgba(145, 196, 238, 0.85);
-  transform: translateY(-3px);
 }
 
-/* spa */
+.category-count {
+  color: #7f8c8d;
+  font-size: 0.9rem;
+}
+
+/* 标签样式 */
 .badge {
   text-transform: uppercase;
 }
@@ -131,4 +249,61 @@ const contentsum = (items) => {
   white-space: nowrap;
   border-radius: .25rem;
 }
+
+/* 加载状态 */
+.loading-container {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+/* 错误状态 */
+.error-container {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.error-container .el-button {
+  margin-top: 16px;
+}
+
+/* 空状态 */
+.empty-container {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .header {
+    padding: 15px;
+  }
+  
+  .header h1 {
+    font-size: 1.5rem;
+  }
+  
+  .post_content {
+    padding: 15px;
+  }
+  
+  .category-group {
+    padding: 15px;
+    margin-bottom: 15px;
+  }
+  
+  .category-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  
+  .pcont_ul {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  
+  .category-header h2 {
+    font-size: 1.2rem;
+  }
+}
 </style>