添加页面过渡效果，更新路由元信息以设置页面标题，优化页脚内容和样式

package-lock.json

@@ -14,6 +14,7 @@
         "github-calendar": "^2.3.4",
         "js-yaml": "^4.1.0",
         "vue": "^3.5.13",
+        "vue-page-transition": "^0.2.2",
         "vue-router": "^4.5.0",
         "yaml": "^2.7.0"
       },
@@ -1909,6 +1910,12 @@
         }
       }
     },
+    "node_modules/vue-page-transition": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/vue-page-transition/-/vue-page-transition-0.2.2.tgz",
+      "integrity": "sha512-qOx+llJ28XX0VwJNJ4GVaeNBPRmPMZac2QQgrIHVUhpXyJx2CQ2XvoQOpGD1ge7QMY3PjZ6fwTbdBwZkA3I9qA==",
+      "license": "MIT"
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "github-calendar": "^2.3.4",
     "js-yaml": "^4.1.0",
     "vue": "^3.5.13",
+    "vue-page-transition": "^0.2.2",
     "vue-router": "^4.5.0",
     "yaml": "^2.7.0"
   },

src/App.vue

@@ -6,8 +6,10 @@ import AppFooter from "./components/AppFooter.vue";
 <template>
   <div>
     <NavBar />
-    <router-view />
+    <transition name="fade" mode="out-in">
-    <AppFooter />
+      <router-view />
+    </transition>
+    <AppFooter v-if="!$route.meta.hideFooter" />
   </div>
 </template>
 
@@ -27,4 +29,14 @@ html, body {
 .main-content {
   flex: 1; /* 占据剩余空间 */
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

src/components/AppFooter.vue

@@ -2,6 +2,7 @@
   <el-footer>
     <div class="footer-content">
       <div class="footer-text">
+        <p><a href="https://icp.gov.moe/?keyword=20251453" target="_blank">萌ICP备20251453号</a></p>
         <p>
           &copy; 2025 By
           <a

src/router/index.js

@@ -1,21 +1,31 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
 
 const routes = [
   {
-    path: '/',
+    path: "/",
-    name: 'home',
+    name: "home",
-    component: () => import('@/views/HomeView.vue')
+    component: () => import("@/views/HomeView.vue"),
+    meta: { hideFooter: true, title: "主页" },
   },
   {
-    path: '/links',
+    path: "/links",
-    name: 'links',
+    name: "links",
-    component: () => import('@/views/LinksView.vue')
+    component: () => import("@/views/LinksView.vue"),
-  }
+    meta: { title: "友链" },
-]
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(),
-  routes
+  routes,
-})
+});
 
-export default router
+router.beforeEach((to, from, next) => {
+  const title = to.meta.title; // 获取路由元信息中的标题
+  if (title) {
+    document.title = "Kisechan | " + title; // 设置页面标题
+  }
+  next();
+});
+
+export default router;

src/views/HomeView.vue

@@ -45,6 +45,26 @@
               <i class="fa-solid fa-envelope"></i>
             </a>
           </div>
+          <div class="footer-content">
+            <p>
+              <a href="https://icp.gov.moe/?keyword=20251453" target="_blank"
+                >萌ICP备20251453号</a
+              >
+            </p>
+            <p>
+              &copy; 2025 By
+              <a
+                href="https://github.com/Kisechan"
+                target="_blank"
+                rel="nofollow noopener"
+                ><strong>Kisechan</strong></a
+              >
+            </p>
+            <p style="font-size: 0.75em">
+              Made With <a href="https://cn.vuejs.org/">Vue3</a> &
+              <a href="https://element-plus.org/zh-CN/">Element Plus</a>
+            </p>
+          </div>
         </el-col>
       </el-row>
     </el-main>
@@ -120,4 +140,9 @@ onMounted(() => {
   flex-direction: column;
   gap: 24px; /* 设置 author-info 和 social-icons 之间的间隔 */
 }
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+}
 </style>