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

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

src/router/Router.js

@@ -1,54 +1,93 @@
 import { createWebHistory, createRouter } from 'vue-router'
-import Aericle from '../views/aericle.vue'
-import home from '../views/home.vue'
-import nonsense from '../views/nonsense.vue'
-import messageboard from '../views/messageboard.vue'
-import about from '../views/aboutme.vue'
-import articlecontents from '../views/articlecontents.vue'
+// 导入视图组件
+import ArticleList from '../views/aericle.vue'
+import HomePage from '../views/home.vue'
+import NonsensePage from '../views/nonsense.vue'
+import MessageBoardPage from '../views/messageboard.vue'
+import AboutMePage from '../views/aboutme.vue'
+import ArticleContentPage from '../views/articlecontents.vue'
+
+/**
+ * 路由配置数组
+ * 定义了应用的所有路由路径和对应的组件
+ */
 const routes = [
   {
     path: '/',
-    redirect: '/:type' // 默认跳转到首页
+    redirect: '/all' // 默认跳转到首页，显示所有文章
   },
   {
     path: '/:type',
-    // 如果type为空则是所有不为空查询相对应属性的文章
-    name: '/home',
-    component: home
+    name: 'home',
+    component: HomePage,
+    meta: {
+      title: '首页'
+    }
   },
   {
-    path: '/aericle',
-    name: 'Aericle',
-    component: Aericle
+    path: '/article-list',
+    name: 'articleList',
+    component: ArticleList,
+    meta: {
+      title: '文章目录'
+    }
   },
   {
     path: '/nonsense',
     name: 'nonsense',
-    component: nonsense
-
+    component: NonsensePage,
+    meta: {
+      title: '随笔'
+    }
   },
   {
     path: '/message',
-    name: 'messageboard',
-    component: messageboard
-
+    name: 'messageBoard',
+    component: MessageBoardPage,
+    meta: {
+      title: '留言板'
+    }
   },
   {
     path: '/about',
-    name: 'about',
-    component: about
-
+    name: 'aboutMe',
+    component: AboutMePage,
+    meta: {
+      title: '关于我'
+    }
   },
   {
-    path: '/articlecontents/:url',
-    name: 'articlecontents',
-    component: articlecontents
+    path: '/article/:url',
+    name: 'articleContent',
+    component: ArticleContentPage,
+    meta: {
+      title: '文章详情'
+    }
   }
 ]
 
+/**
+ * 创建路由实例
+ */
 const router = createRouter({
   history: createWebHistory(),
   routes,
+  scrollBehavior() {
+    // 路由切换时滚动到页面顶部
+    return { top: 0 }
+  }
+})
+
+/**
+ * 全局路由守卫 - 处理页面标题
+ */
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title + ' - 个人博客'
+  } else {
+    document.title = '个人博客'
+  }
+  next()
 })
 
 export default router;