From 6cbce344f84157de8cb8a277f4eef053e24cb901 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 24 Jan 2024 15:25:14 +0800
Subject: [PATCH] feat: add not found page

---
 src/router/index.ts    |  2 ++
 src/router/notFound.ts | 26 ++++++++++++++++++++++++++
 src/styles/theme.scss  |  1 +
 src/views/NotFound.vue | 26 ++++++++++++++++++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 src/router/notFound.ts
 create mode 100644 src/views/NotFound.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 2cfd6c9d..819539e7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -21,6 +21,7 @@ import { routesMarketplace } from "./marketplace";
 import { routesAlarm } from "./alarm";
 import routesLayers from "./layer";
 import { routesSettings } from "./settings";
+import { routesNotFound } from "./notFound";
 
 const routes: RouteRecordRaw[] = [
   ...routesMarketplace,
@@ -28,6 +29,7 @@ const routes: RouteRecordRaw[] = [
   ...routesAlarm,
   ...routesDashboard,
   ...routesSettings,
+  ...routesNotFound,
 ];
 
 const router = createRouter({
diff --git a/src/router/notFound.ts b/src/router/notFound.ts
new file mode 100644
index 00000000..8efe0da0
--- /dev/null
+++ b/src/router/notFound.ts
@@ -0,0 +1,26 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { RouteRecordRaw } from "vue-router";
+import NotFound from "@/views/NotFound.vue";
+
+export const routesNotFound: Array<RouteRecordRaw> = [
+  {
+    path: "/:pathMatch(.*)*",
+    name: "NotFound",
+    component: NotFound,
+  },
+];
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index c6296300..f7113778 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -28,6 +28,7 @@
   --sw-green: #70c877;
   --sw-orange: #e6a23c;
   --sw-topo-animation: topo-dash 0.3s linear infinite;
+  --font-size-bigger: 18px;
 }
 
 html {
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 00000000..8289f935
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,26 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="not-found flex-h"> Page Not Found </div>
+</template>
+<style lang="scss" scoped>
+  .not-found {
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font-size-bigger);
+  }
+</style>