添加 404 页面及自动跳转功能，优化用户体验

src/router/index.js

@@ -19,6 +19,16 @@ const routes = [
     component: () => import("@/views/ToolsView.vue"),
     meta: { title: "工具" },
   },
+  {
+    path: "/404",
+    name: "404",
+    component: () => import("@/views/404.vue"),
+    meta: { title: "寄了" },
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    redirect: "/404",
+  },
 ];
 
 const router = createRouter({

src/views/404.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="not-found">
+      <h1>您访问的页面寄了</h1>
+      <img src="/404.png" class="not-found-img" />
+      <p>将在 {{ countdown }} 秒后自动跳转到首页...</p>
+      <el-button type="primary" @click="goHome">立即返回首页</el-button>
+      <!-- 优化后的进度条 -->
+      <el-progress
+        :percentage="(5 - countdown) * 20"
+        :show-text="false"
+        stroke-width="8"
+        :color="colors"
+        class="custom-progress"
+      ></el-progress>
+    </div>
+  </template>
+  
+  <script>
+  import { ref, onMounted, computed } from "vue";
+  import { useRouter } from "vue-router";
+  
+  export default {
+    name: "NotFound",
+    setup() {
+      const router = useRouter();
+      const countdown = ref(5); // 倒计时 5 秒
+  
+      // 自动跳转逻辑
+      onMounted(() => {
+        const timer = setInterval(() => {
+          countdown.value--;
+          if (countdown.value === 0) {
+            clearInterval(timer);
+            router.push("/"); // 跳转到首页
+          }
+        }, 1000);
+      });
+  
+      // 手动跳转逻辑
+      const goHome = () => {
+        router.push("/");
+      };
+  
+      // 动态计算进度条颜色
+      const colors = [
+        { color: "#f56c6c", percentage: 20 },
+        { color: "#e6a23c", percentage: 40 },
+        { color: "#5cb87a", percentage: 60 },
+        { color: "#1989fa", percentage: 80 },
+        { color: "#6f7ad3", percentage: 100 },
+      ];
+  
+      return {
+        countdown,
+        goHome,
+        colors,
+      };
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .not-found {
+    text-align: center;
+    padding: 50px;
+  }
+  
+  h1 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+  }
+  
+  p {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+  }
+  
+  /* 图片样式优化 */
+  .not-found-img {
+    max-width: 300px; /* 设置图片最大宽度 */
+    max-height: 300px; /* 设置图片最大高度 */
+    width: auto; /* 保持图片比例 */
+    height: auto; /* 保持图片比例 */
+    border-radius: 15px; /* 添加圆角 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
+    margin: 20px auto; /* 居中显示 */
+    display: block; /* 确保图片居中 */
+    animation: fadeIn 1s ease-in-out; /* 添加淡入动画 */
+  }
+  
+  /* 淡入动画 */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  
+  /* 自定义进度条样式 */
+  .custom-progress {
+    width: 40%; /* 设置进度条宽度 */
+    margin: 20px auto; /* 居中显示 */
+    transition: width 0.3s ease; /* 添加过渡动画 */
+  }
+  
+  /* 进度条颜色渐变 */
+  .el-progress-bar__inner {
+    transition: all 0.3s ease; /* 添加颜色过渡动画 */
+  }
+  </style>