From dce19e166cf25dd02be406b23f95fa155f0bc1ca Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Sun, 17 Nov 2024 13:05:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90Nuxt=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/card/ArticleCard.vue         |  2 +-
 components/card/FullScreenIntroCard.vue |  9 ++++++---
 components/nav/NavBar.vue               |  5 ++++-
 composables/function.ts                 |  2 +-
 middleware/maintenance.global.ts        |  5 +++++
 nuxt.config.ts                          | 11 +++++++++++
 pages/blog.vue                          | 13 +++++++++++++
 pages/diary.vue                         | 13 +++++++++++++
 pages/error/maintenance.vue             | 13 +++++++++++++
 pages/soft.vue                          | 13 +++++++++++++
 pages/talk.vue                          | 13 +++++++++++++
 11 files changed, 93 insertions(+), 6 deletions(-)
 create mode 100644 middleware/maintenance.global.ts
 create mode 100644 pages/blog.vue
 create mode 100644 pages/diary.vue
 create mode 100644 pages/error/maintenance.vue
 create mode 100644 pages/soft.vue
 create mode 100644 pages/talk.vue

diff --git a/components/card/ArticleCard.vue b/components/card/ArticleCard.vue
index 2ea45b4..182b8a2 100644
--- a/components/card/ArticleCard.vue
+++ b/components/card/ArticleCard.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 const thumbUrl = computed(() => {
   // 如果文章缩略图为空，则从本地随机获取默认缩略图
   props.post.fields.thumb.value = props.post.fields.thumb.value ? props.post.fields.thumb.value : getAssetURL(
-      `/common/${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`
+      `common/${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`
   )
   return props.post.fields.thumb.value
 })
diff --git a/components/card/FullScreenIntroCard.vue b/components/card/FullScreenIntroCard.vue
index 9b16445..ce58cb9 100644
--- a/components/card/FullScreenIntroCard.vue
+++ b/components/card/FullScreenIntroCard.vue
@@ -4,6 +4,7 @@ import {computed, ref} from "vue";
 // 使用 ref 跟踪鼠标的 x 和 y 坐标
 const mouseX = ref(0)
 const mouseY = ref(0)
+const characterUrl = ref("")
 
 const typedString = ['Hello, Welcome to this site!^1000', '欢迎访问本网站！^1000']
 const littleWidget = [
@@ -29,8 +30,6 @@ const littleWidget = [
   }
 ]
 
-// const characterUrl = "~/assets/images/common/hoshino.png"
-
 // 监听鼠标移动
 const handleMouseMove = (event: MouseEvent) => {
   // 根据窗口大小计算鼠标相对于中心位置的偏移比例
@@ -44,6 +43,10 @@ const debouncedMouseMove = debounce(handleMouseMove, 5)
 const backgroundStyle = computed(() => ({
   backgroundPosition: `${mouseX.value}px ${mouseY.value}px`
 }))
+
+onMounted(() => {
+  characterUrl.value = getAssetURL('common/hoshino.png')
+})
 </script>
 
 <template>
@@ -89,7 +92,7 @@ const backgroundStyle = computed(() => ({
       <div class="invisible absolute top-0 -right-6 -bottom-6 opacity-0 transition-all
                   sm:visible sm:opacity-100 lg:-top-28 lg:-right-28 lg:-bottom-10"
       >
-        <img src="~/assets/images/common/hoshino.png" alt="" class="float-right h-full" draggable="false"/>
+        <img :src="characterUrl" alt="" class="float-right h-full" draggable="false"/>
       </div>
     </div>
     <!-- 下箭头 -->
diff --git a/components/nav/NavBar.vue b/components/nav/NavBar.vue
index 1f7d0cb..038108d 100644
--- a/components/nav/NavBar.vue
+++ b/components/nav/NavBar.vue
@@ -37,7 +37,7 @@ const entry = [
     title: '主页',
     icon: ['fas', 'home'],
     entry: [],
-    to: 'home'
+    to: 'index'
   },
   {
     title: '文章',
@@ -153,6 +153,9 @@ onUnmounted(() => {
       </div>
     </div>
   </nav>
+
+  <!-- 用于隔开元素 -->
+  <div class="h-16 w-full" v-if="alwaysBlueBackground"></div>
 </template>
 
 <style scoped>
diff --git a/composables/function.ts b/composables/function.ts
index 65b0bb7..952ea25 100644
--- a/composables/function.ts
+++ b/composables/function.ts
@@ -1,7 +1,7 @@
 export const getAssetURL = (image: string) => {
   // 参数一: 相对路径
   // 参数二: 当前路径的URL
-  return new URL(`~/assets/images/${image}`, import.meta.url).href
+  return new URL(`../assets/images/${image}`, import.meta.url).href
 }
 
 export const debounce = (fn: Function, delay: number) => {
diff --git a/middleware/maintenance.global.ts b/middleware/maintenance.global.ts
new file mode 100644
index 0000000..656748c
--- /dev/null
+++ b/middleware/maintenance.global.ts
@@ -0,0 +1,5 @@
+export default defineNuxtRouteMiddleware((to, from) =>{
+  if (to.meta.maintenance === true && !import.meta.env.DEV)
+    return navigateTo('/error/maintenance')
+  return true
+})
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 871ef1f..7c5abe2 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,6 +3,17 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
+  app: {
+    head: {
+      title: 'CANTYONION.SITE',
+      meta: [
+        {name: 'viewport', content: 'width=device-width, initial-scale=1'},
+        {name: 'charset', content: 'utf-8'},
+        {name: 'keywords', content: 'cantyonion, onion, 洋葱, 博客, 学习, 主页, index'},
+        {name: 'description', content: 'cantyonion的超级基地，进来看看吧！'},
+      ]
+    }
+  },
   components: true,
   css: [
     '@fortawesome/fontawesome-svg-core/styles.css',
diff --git a/pages/blog.vue b/pages/blog.vue
new file mode 100644
index 0000000..e44371f
--- /dev/null
+++ b/pages/blog.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  maintenance: true
+})
+</script>
+
+<template>
+  <NuxtWelcome/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/diary.vue b/pages/diary.vue
new file mode 100644
index 0000000..e44371f
--- /dev/null
+++ b/pages/diary.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  maintenance: true
+})
+</script>
+
+<template>
+  <NuxtWelcome/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/error/maintenance.vue b/pages/error/maintenance.vue
new file mode 100644
index 0000000..bb01b33
--- /dev/null
+++ b/pages/error/maintenance.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+onMounted(() => {
+  emitter.emit("startLoading", false)
+})
+</script>
+
+<template>
+<alert icon="🚧" title="建设中" message="此页面正在建设中，请稍后再来查看更新。"/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/soft.vue b/pages/soft.vue
new file mode 100644
index 0000000..e44371f
--- /dev/null
+++ b/pages/soft.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  maintenance: true
+})
+</script>
+
+<template>
+  <NuxtWelcome/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/talk.vue b/pages/talk.vue
new file mode 100644
index 0000000..e44371f
--- /dev/null
+++ b/pages/talk.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  maintenance: true
+})
+</script>
+
+<template>
+  <NuxtWelcome/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file