feat: add router-guards for site

4 files changed, 75 insertions, 55 deletions

diff --git a/site/src/App.vue b/site/src/App.vue
index c70a3fa..88a4d52 100644
--- a/site/src/App.vue
+++ b/site/src/App.vue
@@ -1,47 +1,7 @@
-<script setup lang="ts">
-import Left from './components/Left.vue'
-import TheWelcome from './components/Right.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/Hydroroll-small.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <Left msg="饼在画了！" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+    <router-view />
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
+<script lang="ts">
+export default {}
+</script>
\ No newline at end of file
diff --git a/site/src/router/index.ts b/site/src/router/index.ts
index 65353da..5b90a51 100644
--- a/site/src/router/index.ts
+++ b/site/src/router/index.ts
@@ -4,18 +4,13 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
   {
     path: '/',
-    component: () => import('@/layouts/default/Default.vue'),
-    children: [
-      {
-        path: '',
-        name: 'Home',
-        // route level code-splitting
-        // this generates a separate chunk (about.[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
-      },
-    ],
+    component: () => import('@/views/Welcome.vue'),
   },
+  {
+    path: '/:path(.*)',
+    name: '404',
+    component: () => import('@/views/404.vue'),
+  }
 ]
 
 const router = createRouter({
diff --git a/site/src/views/404.vue b/site/src/views/404.vue
new file mode 100644
index 0000000..7462697
--- /dev/null
+++ b/site/src/views/404.vue
@@ -0,0 +1,18 @@
+<template>
+    <div>404</div>
+</template>
+
+<script lang='ts'>
+export default {
+    setup() {
+        return {}
+    },
+    beforeCreate() {
+        location.href = '/'
+    }
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/site/src/views/Welcome.vue b/site/src/views/Welcome.vue
new file mode 100644
index 0000000..4a608ee
--- /dev/null
+++ b/site/src/views/Welcome.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Left from '@/components/Left.vue'
+import TheWelcome from '@/components/Right.vue'
+</script>
+
+<template>
+  <header>
+    <img alt="Vue logo" class="logo" src="@/assets/Hydroroll-small.svg" width="125" height="125" />
+
+    <div class="wrapper">
+      <Left msg="饼在画了！" />
+    </div>
+  </header>
+
+  <main>
+    <TheWelcome />
+  </main>
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>