add error page

components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     CourseCard: typeof import('./src/components/pages/main/courseCard.vue')['default']
     Custom: typeof import('./src/components/pages/main/serach_modes/custom.vue')['default']
     Department: typeof import('./src/components/pages/main/serach_modes/department.vue')['default']
+    Error_box: typeof import('./src/components/common/error_box.vue')['default']
     Footer: typeof import('./src/components/layout/footer.vue')['default']
     InputArea: typeof import('./src/components/pages/main/inputArea.vue')['default']
     Intro: typeof import('./src/components/pages/home/intro.vue')['default']

src/components/common/error_box.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="p-12 bg-red-100 border-red-400 border">
+    <div
+      class="text-2xl py-3 my-3 items-center flex border-b border-red-600">
+      <ExclamationCircleOutlined />
+      <div class="px-3">錯誤</div>
+    </div>
+    <div class="text-md">
+      {{ message }}
+    </div>
+    <div class="flex my-3 justify-center">
+      <router-link
+        to="/"
+        class="bg-red-300 p-3 rounded-lg hover:bg-red-400 duration-200">
+        回首頁
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import { ref } from "vue";
+const props = defineProps({
+  error: String,
+});
+
+const message = ref(props.error);
+</script>

src/components/layout/footer.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-orange-200 py-3 w-full flex items-center select-none">
+    class="bg-orange-200 h-[4rem] py-3 w-full flex items-center select-none">
     <div class="font-mono text-center mx-auto">
       CCU Class 2021-2024
     </div>

src/components/layout/navbar.vue

@@ -5,7 +5,7 @@ const router = useRouter();
 
 <template>
   <div
-    class="z-10 bg-orange-200 px-3 py-3 flex md:flex-row flex-row-reverse items-center place-content-between select-none">
+    class="z-10 h-[4rem] bg-orange-200 px-3 py-3 flex md:flex-row flex-row-reverse items-center place-content-between select-none">
     <router-link to="/">
       <div
         class="font-bold text-2xl bg-gradient-to-br from-orange-300 to-red-700 text-transparent bg-clip-text">

src/router/index.ts

@@ -34,6 +34,11 @@ const routes = [
     name: "Tutorial",
     component: () => import("../views/page_tutorial.vue"),
   },
+  {
+    path: "/record/error",
+    name: "RecordError",
+    component: () => import("../views/page_record_error.vue"),
+  },
 ];
 
 const router = createRouter({

src/views/page_error.vue

@@ -1,13 +1,16 @@
 <script setup>
 import Navbar from "@components/layout/navbar.vue";
 import Foot from "@components/layout/footer.vue";
+import ErrorBox from "@components/common/error_box.vue";
 </script>
 
 <template>
   <div id="main">
     <Navbar />
-    <div style="margin-bottom: 14rem; margin-top: 14rem">
-      <div style="text-align: center">Something Went Wrong!!</div>
+    <div
+      style="height: calc(100vh - 8rem)"
+      class="flex items-center justify-center">
+      <ErrorBox error="Something Went Wrong!!"></ErrorBox>
     </div>
     <Foot />
   </div>

src/views/page_record_error.vue

@@ -0,0 +1,19 @@
+<script setup>
+import Navbar from "@components/layout/navbar.vue";
+import Foot from "@components/layout/footer.vue";
+import ErrorBox from "@components/common/error_box.vue";
+</script>
+
+<template>
+  <div id="main">
+    <Navbar />
+    <div
+      style="height: calc(100vh - 8rem)"
+      class="flex items-center justify-center">
+      <ErrorBox
+        error="本分享連結已過期，請聯絡擁有者重新產生。"></ErrorBox>
+    </div>
+    <Foot />
+  </div>
+</template>
+>