From 93251665b5ae339ffcbb15a3c0086909d88ea277 Mon Sep 17 00:00:00 2001
From: Andy Hsu <i@nn.ci>
Date: Fri, 1 Dec 2023 22:28:56 +0800
Subject: [PATCH] feat: add not-found view

---
 demo/src/router/index.ts    |  5 ++++
 demo/src/views/NotFound.vue | 58 +++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 demo/src/views/NotFound.vue

diff --git a/demo/src/router/index.ts b/demo/src/router/index.ts
index e21fb9f3..9a13799f 100644
--- a/demo/src/router/index.ts
+++ b/demo/src/router/index.ts
@@ -29,6 +29,11 @@ const router = createRouter({
     compModelRoute,
     developRoutes,
     designRoutes,
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: () => import('@/views/NotFound.vue'),
+    },
   ],
 });
 
diff --git a/demo/src/views/NotFound.vue b/demo/src/views/NotFound.vue
new file mode 100644
index 00000000..11860f6a
--- /dev/null
+++ b/demo/src/views/NotFound.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const goPage = (path: string) => router.push({ path })
+</script>
+
+<template>
+  <div class="main">
+    <!-- 404 -->
+    <div class="not-found">
+      <h1 class="slogan">当前页面不存在</h1>
+    </div>
+
+    <!-- back to home -->
+    <yk-button size="l" @click="goPage('/')">回到主页</yk-button>
+  </div>
+
+  <div class="footer">
+    <IconYike1Outline class="sign" />
+    <img src="@/assets/svgs/bg-round.svg" draggable="false" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 220px;
+
+  .sign {
+    position: absolute;
+    bottom: 60px;
+    left: 50%;
+    width: 52px;
+    height: 52px;
+    transform: translateX(-50%);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    vertical-align: bottom;
+    user-select: none;
+  }
+}
+</style>