feat(router) add 404 to route fallback

src/composables/logConsoleMsg.ts

@@ -18,5 +18,5 @@ export function logHelloMessage() {
         "           ██████████\n" +
         "\n" +
         "Logo是什么意义？答：意义就是...没有意义。\n" +
-        "大概是一起去整点赛博薯条吧。-来自法国鸽子");
+        "大概是一起去整点赛博薯条吧。");
 }

src/router/index.ts

@@ -4,6 +4,7 @@ import Wifi from '@/views/Wifi.vue'
 import Feedback from '@/views/Feedback.vue'
 import About from '@/views/About.vue'
 import Uart from '@/views/Uart.vue'
+import Page404 from '@/views/404.vue'
 import {translate} from "@/locales";
 
 
@@ -14,7 +15,8 @@ const router = createRouter({
             path: '/',
             name: 'home',
             meta: {title: translate("page.home")},
-            component: Home
+            // component: Wifi
+            redirect: () => '/wifi',
         }, {
             path: '/home:ext(.*)',
             meta: {title: translate("page.home")},
@@ -36,6 +38,10 @@ const router = createRouter({
             meta: {title: translate('page.feedback')},
             name: 'feedback',
             component: Feedback,
+        },   {
+            path: '/:catchAll(.*)', // This will match all paths that aren't matched by above routes
+            name: 'NotFound',
+            component: Page404,
         },
     ]
 })

src/views/404.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="text-layout">
+    <h1 class="page-title">404</h1>
+    <h2 class="text-center">页面不存在</h2>
+    <RouterLink to="/">
+      <el-card class="text-center">返回首页</el-card>
+    </RouterLink>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/About.vue

@@ -6,34 +6,61 @@ const compileTime = import.meta.env.VITE_APP_LAST_COMMIT;
 <template>
   <div class="text-layout">
     <el-divider></el-divider>
-    <el-divider>关于网页版上位机</el-divider>
+    <el-divider>关于</el-divider>
     <el-divider></el-divider>
+    <el-collapse>
+      <el-collapse-item title="关于网页版上位机">
+        <el-descriptions border :column="1" class="mt-5 description-style">
+          <el-descriptions-item label="版本">{{ version }}</el-descriptions-item>
+          <el-descriptions-item label="发布时间">{{ compileTime }}</el-descriptions-item>
+          <el-descriptions-item label="许可证">MIT</el-descriptions-item>
+        </el-descriptions>
 
-    <el-descriptions border :column="1" class="mt-5 description-style">
+        <el-descriptions title="鸣谢" border :column="1" class="mt-5 description-style">
-      <el-descriptions-item label="版本">{{version}}</el-descriptions-item>
+          <el-descriptions-item label="vuejs"><a href="https://github.com/vuejs/vue/blob/main/LICENSE">MIT</a>
-      <el-descriptions-item label="发布时间">{{compileTime}}</el-descriptions-item>
+          </el-descriptions-item>
-      <el-descriptions-item label="许可证">MIT</el-descriptions-item>
+          <el-descriptions-item label="typescript"><a
-    </el-descriptions>
+              href="https://github.com/microsoft/TypeScript/blob/main/LICENSE.txt">Apache 2.0</a></el-descriptions-item>
+          <el-descriptions-item label="vite"><a href="https://github.com/vitejs/vite/blob/main/LICENSE">MIT</a>
+          </el-descriptions-item>
+          <el-descriptions-item label="tailwindcss"><a
+              href="https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE">MIT</a></el-descriptions-item>
+          <el-descriptions-item label="element-plus"><a
+              href="https://github.com/element-plus/element-plus/blob/dev/LICENSE">MIT</a></el-descriptions-item>
+          <el-descriptions-item label="pinia"><a href="https://github.com/vuejs/pinia/blob/v2/LICENSE">MIT</a>
+          </el-descriptions-item>
+          <el-descriptions-item label="mitt"><a href="https://github.com/developit/mitt/blob/main/LICENSE">MIT</a>
+          </el-descriptions-item>
+          <el-descriptions-item label="vue-router"><a
+              href="https://github.com/vuejs/vue-router/blob/dev/LICENSE">MIT</a></el-descriptions-item>
+          <el-descriptions-item label="vue-i18n"><a href="https://github.com/kazupon/vue-i18n?tab=MIT-1-ov-file#readme">MIT</a>
+          </el-descriptions-item>
+          <el-descriptions-item label="lightningcss"><a
+              href="https://github.com/parcel-bundler/lightningcss/blob/master/LICENSE">MPL-2.0 license</a>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+      <el-collapse-item title="关于下位机">
+        <el-descriptions border :column="1" class="mt-5 description-style">
+          <el-descriptions-item label="官网"><a href="https://yunsi.studio/wireless-proxy">允斯工作室</a></el-descriptions-item>
+          <el-descriptions-item label="版本">-</el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions title="鸣谢" border :column="1" class="mt-5 description-style">
+          <el-descriptions-item label="windowsair"><a href="https://github.com/windowsair/wireless-esp8266-dap">wireless-esp8266-dap</a>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+    </el-collapse>
 
-    <el-descriptions title="鸣谢" border :column="1" class="mt-5 description-style">
-      <el-descriptions-item label="vuejs"><a href="https://github.com/vuejs/vue/blob/main/LICENSE">MIT</a></el-descriptions-item>
-      <el-descriptions-item label="typescript"><a
-          href="https://github.com/microsoft/TypeScript/blob/main/LICENSE.txt">Apache 2.0</a></el-descriptions-item>
-      <el-descriptions-item label="vite"><a href="https://github.com/vitejs/vite/blob/main/LICENSE">MIT</a></el-descriptions-item>
-      <el-descriptions-item label="tailwindcss"><a href="https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE">MIT</a></el-descriptions-item>
-      <el-descriptions-item label="element-plus"><a
-          href="https://github.com/element-plus/element-plus/blob/dev/LICENSE">MIT</a></el-descriptions-item>
-      <el-descriptions-item label="pinia"><a href="https://github.com/vuejs/pinia/blob/v2/LICENSE">MIT</a></el-descriptions-item>
-      <el-descriptions-item label="mitt"><a href="https://github.com/developit/mitt/blob/main/LICENSE">MIT</a></el-descriptions-item>
-      <el-descriptions-item label="vue-router"><a href="https://github.com/vuejs/vue-router/blob/dev/LICENSE">MIT</a></el-descriptions-item>
-      <el-descriptions-item label="vue-i18n"><a href="https://github.com/kazupon/vue-i18n?tab=MIT-1-ov-file#readme">MIT</a></el-descriptions-item>
-      <el-descriptions-item label="lightningcss"><a href="https://github.com/parcel-bundler/lightningcss/blob/master/LICENSE">MPL-2.0 license</a></el-descriptions-item>
-    </el-descriptions>
 
     <el-descriptions title="作者：空空(kerms)" border :column="1" class="mt-5 description-style">
-      <el-descriptions-item label="github"><a href="https://github.com/kerms">https://github.com/kerms</a></el-descriptions-item>
+      <el-descriptions-item label="官网"><a href="https://yunsi.studio/">允斯工作室（https://yunsi.studio/）</a></el-descriptions-item>
+      <el-descriptions-item label="github"><a href="https://github.com/kerms">https://github.com/kerms</a>
+      </el-descriptions-item>
       <el-descriptions-item label="邮箱">kerms@niazo.org</el-descriptions-item>
-      <el-descriptions-item label="BiliBili"><a href="https://space.bilibili.com/38669852">UID38669852</a></el-descriptions-item>
+      <el-descriptions-item label="BiliBili"><a href="https://space.bilibili.com/38669852">UID38669852</a>
+      </el-descriptions-item>
       <el-descriptions-item label="QQ群">642246000</el-descriptions-item>
       <el-descriptions-item label="备注">欢迎大家来打扰啊～</el-descriptions-item>
     </el-descriptions>

src/views/Home.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="text-layout">
       <h2 class="page-title">主页</h2>
-      <p>空空如也，暂不知道放什么。</p>
+
+        <router-link to="/wifi">
+          <el-card>
+            <p class="text-center">Wi-Fi设置</p>
+          </el-card>
+        </router-link>
+
   </div>
 </template>
 
 <script setup lang="ts">
 
 
-</script>
+import InlineSvg from "@/components/InlineSvg.vue";
-
+</script>
-<style scoped>
-
-</style>

src/views/navigation/NavBar.vue

@@ -28,7 +28,7 @@
 
     <!--  <a class="md:ml-auto md:mr-3"></a>-->
     <div class="flex">
-      <el-button @click="stateMenuOpen=true" :type="wsColor" size="large" class="transition duration-1000">
+      <el-button :type="wsColor" size="large" class="transition duration-1000">
         <InlineSvg v-show="wsColor!=='success'" name="link-off" class="mr-2" width="20"></InlineSvg>
         <InlineSvg v-show="wsColor==='success'" name="link" class="mr-2" width="20"></InlineSvg>
         {{ wsState }}
@@ -117,12 +117,17 @@ const wsState = computed(() => {
   return translate(wsStore.state);
 });
 
-const menuItems = ([
+type Item = {
-  {
+  name: string;
+  href: string;
+  class?: string;
+};
+
+const menuItems: Item[] = ([
+/*  {
     name: translate("page.home"),
     href: "/",
-
+  }, */{
-  }, {
     name: translate("page.wifi"),
     href: "/wifi",
   }, {
@@ -131,11 +136,11 @@ const menuItems = ([
   }, {
     name: translate("page.feedback"),
     href: "/feedback",
-  }, {
+  },/* {
     name: translate("page.uart"),
     href: "/uart",
     class: "todo-menu-item",
-  },
+  },*/
 ]);
 
 </script>
@@ -146,16 +151,20 @@ const menuItems = ([
   border: solid 1px;
 }*/
 
-/* drawer */
-.custom-drawer :deep(.el-drawer) {
-  transition: all 0.1s; /* Custom duration*/
-}
 
 /* drawer overlay */
-.custom-drawer.open :deep(.el-overlay) {
+.custom-drawer :deep(.el-overlay) {
   transition: all 0s; /* Custom duration*/
 }
 
+.custom-drawer :deep(.el-drawer) {
+  transition: all 0s; /* Custom duration*/
+}
+
+.custom-drawer.open :deep(.el-drawer) {
+  transition: all 0.05s; /* Custom duration*/
+}
+
 .custom-drawer :deep(.el-drawer__body) {
   padding: 0;
 }