添加了许多页面

.env.development

@@ -1 +1,2 @@
-VITE_BASE_URL = "/api"
+VITE_BASE_URL = "/api"
+VITE_DEV = true

.env.production

@@ -1 +1,2 @@
-VITE_BASE_URL = "/"
+VITE_BASE_URL = "/"
+VITE_DEV = false

src/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {onMounted} from "vue";
 import emitter from "@/utils/mitt.ts";
+import NavBar from "@/components/nav/NavBar.vue";
 
 const loadingElement = document.getElementById("loading") as HTMLDivElement;
 
@@ -12,8 +13,27 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-blue-50">
+  <div class="min-h-screen bg-gray-100 relative">
+    <nav-bar/>
     <router-view/>
+    <footer class="mt-8 flex w-full items-end py-4 min-h-48">
+      <div class="container mx-auto">
+        <p class="text-center leading-8">&copy;2024 All rights reserved.</p>
+        <!--      <a class="flex items-center justify-center" href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral">-->
+        <!--        本网站由<img :src="getAssetURL('upyun.png')" alt="又拍云" class="h-8 w-auto">提供CDN加速/云储存服务-->
+        <!--      </a>-->
+        <div class="flex justify-center gap-4">
+          <a href="https://beian.miit.gov.cn/" target="_blank">
+            <img alt="苏ICP备2022016243号-1"
+                 src="https://img.shields.io/badge/%E8%8B%8FICP%E5%A4%87-2022016243%E5%8F%B7--1-green?style=for-the-badge">
+          </a>
+          <a href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641" rel="noreferrer" target="_blank">
+            <img alt="苏公网安备32050602011641"
+                 src="https://img.shields.io/badge/%E8%8B%8F%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87-32050602011641-blue?style=for-the-badge&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAFQklEQVRYw%2B3Wa1BUdRjH8SOpMeg4WhZGpDIxiaaTeUFgWrxE4AVRQJGlRRAVIV1JkbgMgQLi5AVBQSVLSp0xlEAUKBEEFZCrCstll8UV2AV2YbmoGCrYv31%2BR95UL5pmmtamZ%2Bbz6rz5nvOc%2F5zDcX9jGLs%2FiTxuyvIlWYkRFeTHA2HVRFtzfhthTG5KuH96%2FvUgNlC4mMgyw1NJit%2FaAXLKazYje9xtIMZ%2FOZz50gW%2B9hcNkvoLEemEPbnrSP47QYwxQ5Ifv54RqzcXwFFvSyjaOhfavN8F7Y5ZcC%2FHH9JOB4LNa9Zw5YA76OZV8vIGMdZtSp7cDrtOnOavYiQhTAiPwi1AMtIQaqyngsxpBtw2GAGDKfaQmpUAa6xc4Vfp4UtEdzAMycsT9JQ1Tyctl%2F2eEkuTlYysF%2FrCUNxMqDEzgTqzSXBnpgnIHCzgjvEEuD52DLBr3rA1MAaWmNtB582wdtIljZ9G9D%2BIPU6aTxIPBjHCcXvg3CEh9K2fDLWvjIH6D6fwTIyheuwEqLUyhzLOALq8pkN%2BbgRw3HY4FBsMzxojZxP9DequLjAlQwVrbpIjhyIY4UYGQ%2FbuhdBqPxlk3Gion2IMDQIz3kJe%2FZS34I7uHkmD7VSQVgYDNyIAwsNCgfXGXoOBPjP9DKrOCAogA2etGTmTHAMcFwFZye7wS5QlVHGjoEw4A2qPCUBZ6AzNcQ5Q%2FYYRdO%2BYB1U3dsDwypLio4FJ3ECryIzWz6Cm3NgTRHN8HiPF6eHAGSbAdh8feFZkB7krzaHE9h2o85sDsiAbkIsXQMN%2Be2CtGyF0kzdwXCgU5%2B%2BD%2FouLQFV4OEU%2Fg2Q%2FiNuIPNaKkQflAWBqexxGjhLDVUcL6IwSQN3SGVChe6FJg9dckCx6D1QBliDZLIAxo7eA8eyv4KE0BJqTrHkZvnL9DJKn%2BTwmt0NsGGHZy2Dn3kQYfsQ53Hh4%2Fr4RNGz8AIpdzKEuaAF0RC2E57MmQgE3ATjuM%2FCPiANW7AqSfQJQ5vk362eQKmd3JrmXsoSRocpNIMnbB9zbceDIWUPmuHFQNMkISqa9DpUvNK6YDpW2s8DfwBK48WFQnhMCgzUBoLy0BrRVe5P0NWjPLdKUsJiR1tR1wGp8IeZwMgx%2FSrgRvjxuAziNcwLvyathLOcJHLflhRDYGRYFrNET2rJ5yvPLoas0tOj%2FoL8UpC4JHyTSU%2B6MNCS4gvKoAB5WiKG%2BMAQSg0WwLXQ%2FZJ3xhao0FxB5hYCbUwAEfhEF3Td8QP2dAOQnPwFlxgrolUVq9TPoaX%2BZB2nLc2Gk6awj1MU78HZZwJMid2Byb550JQwVO0NfxlJgdz14vWKeRAiK6DlQF28PLZdcoLNcBIO92bb6GTQ8Q%2F13RURT6tlH2gvXMlITLYD6uI%2Bgp2ozdF0VQXumM6ivCqGvahM8kPiDItkeGo8tB025GFQ3xFrSr06zI3%2F4yde7oN7m0sWk5eKWDqK5JWJQvAHac9ygq3Adr9gTNNc3QG85rzPfHe5%2F7wDtPwuhp%2FZz6CjyhaZzwi6ivfetHdH%2FoP77%2B3PJQOsuRnqkQdCa4wWqyx6gyecpL64GTaEX7ycXUJz4GJp1B4O0X%2FHg0Xp1tFV%2B8Ei1k6c5coHofxBrrzQinbKYo0SVJ%2Bwn6iurGHlY5gY911aDJnMFaHXXiDp9GQyvtKfUA9QFTtBZ7gPdit0tpFd9OpwwFmlA9D%2Fo9yNLDpxIKmI8PMnNSNtviCLVpYTITzrXEGWaq4qos0WgOPdpCenIF%2BeRrurjB4k0PXopYZG6gMg%2FD%2FgNBUxhAbSAmKMAAAAASUVORK5CYII%3D">
+          </a>
+        </div>
+      </div>
+    </footer>
   </div>
 </template>
 

src/components/alert/UnderMaintenance.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="flex items-center justify-center min-h-screen bg-gray-100">
+    <div class="text-center p-6 max-w-md w-full bg-white shadow-lg rounded-lg">
+      <h1 class="text-4xl font-bold text-gray-800 mb-4">建设中 🚧</h1>
+      <p class="text-gray-600 text-lg">
+        此页面正在建设中，请稍后再来查看更新。
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/card/FullScreenIntroCard.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+
+import UnderMaintenance from "@/components/alert/UnderMaintenance.vue";
+</script>
+
+<template>
+  <div class="h-screen w-full bg-blue-400">
+    <under-maintenance/>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/nav/NavBar.vue

@@ -37,6 +37,7 @@ const entry = [
     title: '主页',
     icon: ['fas', 'home'],
     entry: [],
+    to: 'home'
   },
   {
     title: '文章',
@@ -50,7 +51,7 @@ const entry = [
       {
         title: '日记',
         url: false,
-        to: 'log'
+        to: 'diary'
       },
     ],
   },
@@ -66,14 +67,15 @@ const entry = [
       {
         title: '仓库',
         url: true,
-        to: 'https://cantyonion.site/git'
+        to: 'https://cantyonion.site/git/'
       },
     ],
   },
   {
     title: '杂谈',
     icon: ['fas', 'chess-rook'],
-    entry: []
+    entry: [],
+    to: 'talk'
   }
 ]
 
@@ -84,7 +86,7 @@ const menuExpanded = () => {
 </script>
 
 <template>
-  <nav class="fixed z-20 h-16 w-full bg-white bg-opacity-70 text-gray-600 shadow backdrop-blur-md">
+  <nav class="sticky top-0 z-20 h-16 w-full bg-white bg-opacity-70 text-gray-600 shadow backdrop-blur-md">
     <div class="container mx-auto flex h-16 w-full items-center justify-between px-4 md:px-0 xl:max-w-screen-xl">
       <!-- 下拉菜单按钮 -->
       <div class="flex h-8 w-10 items-center justify-center rounded-md border-gray-600 md:hidden"
@@ -111,7 +113,7 @@ const menuExpanded = () => {
       >
         <nav-bar-entry-item v-for="item in entry" :key="item.title"
                             :entry="item.entry" :icon="item.icon"
-                            :title="item.title"/>
+                            :title="item.title" :to="item.to"/>
       </div>
 
       <!--  快速跳转小组件  -->
@@ -125,7 +127,7 @@ const menuExpanded = () => {
     </div>
   </nav>
   <!-- 用于隔开元素的 -->
-  <div class="mb-4 h-16 w-full"></div>
+  <!--  <div class="mb-4 h-16 w-full"></div>-->
 </template>
 
 <style scoped>

src/components/nav/NavBarEntryItem.vue

@@ -1,22 +1,37 @@
 <script lang="ts" setup>
+import router from "@/router";
+
 type Entry = {
   title: string,
   url: boolean,
   to: string,
 }
+
 defineProps<{
   title: string
   icon: string[]
+  to?: string
   entry: Entry[]
 }>()
+
+const onClick = (to: string | undefined, url: boolean) => {
+  if (to === undefined)
+    return
+
+  if (url)
+    window.open(to)
+  router.push({name: to})
+}
 </script>
 
 <template>
-  <div class="container relative w-full max-w-max flex-auto shrink-0 cursor-pointer group md:w-16 md:hover:w-full">
+  <div class="container relative w-full max-w-max flex-auto shrink-0 cursor-pointer group md:w-16 md:hover:w-full"
+       @click="onClick(to, false)"
+  >
     <div class="my-1 flex h-14 w-screen items-center rounded-md pr-4 pl-2 md:w-auto md:group-hover:bg-gray-200">
-      <font-awesome-icon :icon="icon" class="mx-2 md:h-8 md:w-8"/>
+      <font-awesome-icon :icon="icon" class="mx-2 h-5 w-5 md:h-8 md:w-8"/>
-      <span class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap
+      <span class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap font-bold
-                   md:w-0 md:text-xl md:group-hover:w-full"
+                   md:font-normal md:w-0 md:text-xl md:group-hover:w-full"
       >
         {{ title }}
       </span>
@@ -29,7 +44,9 @@ defineProps<{
                 md:group-hover:visible md:group-hover:-translate-x-1/2 md:group-hover:opacity-100"
     >
       <div v-for="item in entry" :key="item.title"
-           class="px-10 py-2 text-gray-500 text-md md:px-0 md:text-center md:text-lg md:hover:bg-gray-100">
+           class="px-11 py-2 text-gray-500 text-md md:px-0 md:text-center md:text-lg md:hover:bg-gray-100"
+           @click="onClick(item.to, item.url)"
+      >
         {{ item.title }}
       </div>
 

src/router/index.ts

@@ -5,9 +5,65 @@ const router = createRouter({
   routes: [
     {
       path: "/",
-      component: () => import('@/views/home/HomeView.vue')
+      component: () => import('@/views/home/HomeView.vue'),
+      name: 'home',
+      meta: {
+        maintenance: false
+      }
     },
+    {
+      path: "/article",
+      children: [
+        {
+          path: "/blog",
+          component: () => import('@/views/article/BlogView.vue'),
+          name: 'blog',
+          meta: {
+            maintenance: true
+          },
+        },
+        {
+          path: "/diary",
+          component: () => import('@/views/article/DiaryView.vue'),
+          name: 'diary',
+          meta: {
+            maintenance: true
+          }
+        }
+      ]
+    },
+    {
+      path: "/work",
+      children: [
+        {
+          path: "/soft",
+          component: () => import('@/views/article/DiaryView.vue'),
+          name: 'soft',
+          meta: {
+            maintenance: true
+          }
+        }
+      ]
+    },
+    {
+      path: "/talk",
+      component: () => import('@/views/talk/TalkView.vue'),
+      name: 'talk',
+      meta: {
+        maintenance: true
+      }
+    },
+    {
+      path: "/maintenance",
+      component: () => import('@/views/error/MaintenanceView.vue'),
+      name: 'maintenance'
+    }
   ]
 });
 
+router.beforeEach((to, _, next) => {
+  if (to.meta.maintenance === true && !import.meta.env.DEV) next({name: 'maintenance'})
+  else next()
+})
+
 export default router;

src/views/article/BlogView.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/views/article/DiaryView.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/views/error/MaintenanceView.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+
+import UnderMaintenance from "@/components/alert/UnderMaintenance.vue";
+</script>
+
+<template>
+  <under-maintenance/>
+</template>
+
+<style scoped>
+
+</style>

src/views/home/HomeView.vue

@@ -2,13 +2,14 @@
 import {computed, onMounted, ref} from "vue";
 import ArticleCard from "@/components/card/ArticleCard.vue";
 import {getBlogRecentPost} from "@/api/blog.ts";
-import NavBar from "@/components/nav/NavBar.vue";
+// import NavBar from "@/components/nav/NavBar.vue";
 import IntroCard from "@/components/card/IntroCard.vue";
 import CardTitle from "@/components/card/CardTitle.vue";
 import SectionCard from "@/components/card/SectionCard.vue";
 import {getActivity} from "@/api/git.ts";
 import GitCard from "@/components/card/GitCard.vue";
 import emitter from "@/utils/mitt.ts";
+// import FullScreenIntroCard from "@/components/card/FullScreenIntroCard.vue";
 // import {getAssetURL} from "@/utils/function.ts";
 
 const recentPosts = ref<IPost[] | null>(null);
@@ -44,7 +45,6 @@ const activitiesData = computed((): IActivity<IContent>[] => {
   }).filter(item => item !== null)
 })
 
-
 const reloadPosts = async () => {
   try {
     isLoading.value.blog = true
@@ -77,7 +77,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <nav-bar/>
+  <!--  <nav-bar/>-->
+
+  <!--  <full-screen-intro-card/>-->
 
   <div class="container mx-auto xl:max-w-screen-xl">
     <!--  个人介绍  -->
@@ -112,26 +114,6 @@ onMounted(async () => {
       </section-card>
     </section>
   </div>
-
-
-  <footer class="mt-8 flex w-full items-end bg-gradient-to-t from-white py-4 min-h-48">
-    <div class="container mx-auto">
-      <p class="text-center leading-8">&copy;2024 All rights reserved.</p>
-      <!--      <a class="flex items-center justify-center" href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral">-->
-      <!--        本网站由<img :src="getAssetURL('upyun.png')" alt="又拍云" class="h-8 w-auto">提供CDN加速/云储存服务-->
-      <!--      </a>-->
-      <div class="flex justify-center gap-4">
-        <a href="https://beian.miit.gov.cn/" target="_blank">
-          <img alt="苏ICP备2022016243号-1"
-               src="https://img.shields.io/badge/%E8%8B%8FICP%E5%A4%87-2022016243%E5%8F%B7--1-green?style=for-the-badge">
-        </a>
-        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=32050602011641" rel="noreferrer" target="_blank">
-          <img alt="苏公网安备32050602011641"
-               src="https://img.shields.io/badge/%E8%8B%8F%E5%85%AC%E7%BD%91%E5%AE%89%E5%A4%87-32050602011641-blue?style=for-the-badge&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAFQklEQVRYw%2B3Wa1BUdRjH8SOpMeg4WhZGpDIxiaaTeUFgWrxE4AVRQJGlRRAVIV1JkbgMgQLi5AVBQSVLSp0xlEAUKBEEFZCrCstll8UV2AV2YbmoGCrYv31%2BR95UL5pmmtamZ%2Bbz6rz5nvOc%2F5zDcX9jGLs%2FiTxuyvIlWYkRFeTHA2HVRFtzfhthTG5KuH96%2FvUgNlC4mMgyw1NJit%2FaAXLKazYje9xtIMZ%2FOZz50gW%2B9hcNkvoLEemEPbnrSP47QYwxQ5Ifv54RqzcXwFFvSyjaOhfavN8F7Y5ZcC%2FHH9JOB4LNa9Zw5YA76OZV8vIGMdZtSp7cDrtOnOavYiQhTAiPwi1AMtIQaqyngsxpBtw2GAGDKfaQmpUAa6xc4Vfp4UtEdzAMycsT9JQ1Tyctl%2F2eEkuTlYysF%2FrCUNxMqDEzgTqzSXBnpgnIHCzgjvEEuD52DLBr3rA1MAaWmNtB582wdtIljZ9G9D%2BIPU6aTxIPBjHCcXvg3CEh9K2fDLWvjIH6D6fwTIyheuwEqLUyhzLOALq8pkN%2BbgRw3HY4FBsMzxojZxP9DequLjAlQwVrbpIjhyIY4UYGQ%2FbuhdBqPxlk3Gion2IMDQIz3kJe%2FZS34I7uHkmD7VSQVgYDNyIAwsNCgfXGXoOBPjP9DKrOCAogA2etGTmTHAMcFwFZye7wS5QlVHGjoEw4A2qPCUBZ6AzNcQ5Q%2FYYRdO%2BYB1U3dsDwypLio4FJ3ECryIzWz6Cm3NgTRHN8HiPF6eHAGSbAdh8feFZkB7krzaHE9h2o85sDsiAbkIsXQMN%2Be2CtGyF0kzdwXCgU5%2B%2BD%2FouLQFV4OEU%2Fg2Q%2FiNuIPNaKkQflAWBqexxGjhLDVUcL6IwSQN3SGVChe6FJg9dckCx6D1QBliDZLIAxo7eA8eyv4KE0BJqTrHkZvnL9DJKn%2BTwmt0NsGGHZy2Dn3kQYfsQ53Hh4%2Fr4RNGz8AIpdzKEuaAF0RC2E57MmQgE3ATjuM%2FCPiANW7AqSfQJQ5vk362eQKmd3JrmXsoSRocpNIMnbB9zbceDIWUPmuHFQNMkISqa9DpUvNK6YDpW2s8DfwBK48WFQnhMCgzUBoLy0BrRVe5P0NWjPLdKUsJiR1tR1wGp8IeZwMgx%2FSrgRvjxuAziNcwLvyathLOcJHLflhRDYGRYFrNET2rJ5yvPLoas0tOj%2FoL8UpC4JHyTSU%2B6MNCS4gvKoAB5WiKG%2BMAQSg0WwLXQ%2FZJ3xhao0FxB5hYCbUwAEfhEF3Td8QP2dAOQnPwFlxgrolUVq9TPoaX%2BZB2nLc2Gk6awj1MU78HZZwJMid2Byb550JQwVO0NfxlJgdz14vWKeRAiK6DlQF28PLZdcoLNcBIO92bb6GTQ8Q%2F13RURT6tlH2gvXMlITLYD6uI%2Bgp2ozdF0VQXumM6ivCqGvahM8kPiDItkeGo8tB025GFQ3xFrSr06zI3%2F4yde7oN7m0sWk5eKWDqK5JWJQvAHac9ygq3Adr9gTNNc3QG85rzPfHe5%2F7wDtPwuhp%2FZz6CjyhaZzwi6ivfetHdH%2FoP77%2B3PJQOsuRnqkQdCa4wWqyx6gyecpL64GTaEX7ycXUJz4GJp1B4O0X%2FHg0Xp1tFV%2B8Ei1k6c5coHofxBrrzQinbKYo0SVJ%2Bwn6iurGHlY5gY911aDJnMFaHXXiDp9GQyvtKfUA9QFTtBZ7gPdit0tpFd9OpwwFmlA9D%2Fo9yNLDpxIKmI8PMnNSNtviCLVpYTITzrXEGWaq4qos0WgOPdpCenIF%2BeRrurjB4k0PXopYZG6gMg%2FD%2FgNBUxhAbSAmKMAAAAASUVORK5CYII%3D">
-        </a>
-      </div>
-    </div>
-  </footer>
 </template>
 
 <style scoped>

src/views/talk/TalkView.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>