add 2 extra pages

src/AlertListScreen.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { ref, onMounted } from "vue";
+</script>
+
+<template>
+  <main class="alertlist-screen">
+    <h1 style="color: red">alert list</h1>
+  </main>
+</template>
+
+<style scoped>
+.alertlist-screen {
+  background: #e6e6e6;
+  height: 100vh;
+  width: 100vw;
+  display: inline-block;
+}
+</style>

src/App.vue

@@ -1,17 +1,20 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import MainPage from "./MainPage.vue";
+import MainScreen from "./MainScreen.vue";
+import AlertListScreen from "./AlertListScreen.vue";
 // import Slider from "./components/Slider.vue";
 import useWebsocket from "./utils/useWebsocket";
 import { useWsStore } from "./store";
 const store = useWsStore();
 
+const excludePaths = ["/alert-list", "/main-screen"];
 // use websocket
 let urlPath = ref(document.location.pathname);
 if (urlPath.value === "/") {
   urlPath.value = "/1-1";
 }
-useWebsocket(store, urlPath.value);
+useWebsocket(store, urlPath.value, excludePaths);
 
 // size setting
 // const size = ref(80);
@@ -33,8 +36,10 @@ useWebsocket(store, urlPath.value);
 
 <template>
   <div id="app-container">
-    <MainPage :path="urlPath" />
     <!-- <Slider :size="size" @size-change="setSize" /> -->
+    <MainPage v-if="!excludePaths.includes(urlPath)" :path="urlPath" />
+    <MainScreen v-if="urlPath == '/main-screen'" />
+    <AlertListScreen v-if="urlPath == '/alert-list'" />
   </div>
 </template>
 

src/MainScreen.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { ref, onMounted } from "vue";
+</script>
+
+<template>
+  <main class="main-screen">
+    <h1>main screen</h1>
+  </main>
+</template>
+
+<style scoped>
+.main-screen {
+  background: #e6e6e6;
+  height: 100vh;
+  width: 100vw;
+  display: inline-block;
+}
+</style>

src/utils/useWebsocket.js

@@ -1,6 +1,7 @@
 import Client from "./ws";
 
-export default function useWebsocket(store, path) {
+export default function useWebsocket(store, path, excludePaths = []) {
+  if (excludePaths.includes(path)) return;
   // connect0(store);
   connectPath(store, path);
 }