feat: add not found page

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({

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,
+  },
+];

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 {

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>