feat(page): added 404 page

src/pages/404.page.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="e404-wrapper">
+        <n-result
+            status="404"
+            title="404 Not Found"
+            description="Sorry, this page does not seem to extist"
+        >
+            <template #footer>
+                <router-link to="/" #="{ navigate, href }" custom>
+                    <n-button
+                        tag="a"
+                        :href="href"
+                        secondary
+                        @click="navigate"
+                        type="success"
+                    >Back home</n-button>
+                </router-link>
+            </template>
+        </n-result>
+    </div>
+</template>
+
+
+<style scoped>
+.e404-wrapper {
+    padding-top: 150px;
+}
+</style>

src/plugins/naive.plugin.ts

@@ -38,9 +38,11 @@ import {
   NMenu,
   NMessageProvider,
   NPageHeader,
+  NResult,
 } from 'naive-ui';
 
 const components = [
+  NResult,
   NPageHeader,
   NMessageProvider,
   NLayout,

src/router.ts

@@ -1,6 +1,7 @@
 import { layouts } from './layouts/index';
 import { createRouter, createWebHistory } from 'vue-router';
 import HomePage from './pages/Home.page.vue';
+import NotFound from './pages/404.page.vue';
 import { tools } from './tools';
 
 const router = createRouter({
@@ -12,6 +13,7 @@ const router = createRouter({
       component: HomePage,
     },
     ...tools.map(({ path, name, component, ...config }) => ({ path, name, component, meta: { isTool: true, layout: layouts.toolLayout, name, ...config } })),
+    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
   ],
 });