feat: 增加404页面

package.json

@@ -12,8 +12,8 @@
     "cypress": "cypress open",
     "lint:style": "stylelint packages/app/src *.*.css",
     "lint:js": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
-    "lint:style-fix": "pnpm run lint:style --fix",
-    "lint:js-fix": "pnpm run lint:js --fix",
+    "lint:style-fix": "npm run lint:style --fix",
+    "lint:js-fix": "npm run lint:js --fix",
     "prepare": "husky install",
     "postinstall": "husky install",
     "pre-commit": "lint-staged",
@@ -86,6 +86,7 @@
     "dayjs": "^1.11.7",
     "klona": "^2.0.6",
     "lodash-es": "^4.17.21",
+    "lottie-web": "^5.11.0",
     "naive-ui": "^2.34.3",
     "pinia": "^2.0.36",
     "sortablejs": "^1.15.0",

src/App.vue

@@ -12,8 +12,6 @@ import {
 } from 'naive-ui';
 import {computed} from 'vue';
 import {lightVariable} from '@utils';
-import {DndProvider} from 'vue3-dnd';
-import {HTML5Backend} from 'react-dnd-html5-backend';
 
 defineOptions({
   name: 'App',
@@ -67,11 +65,9 @@ const themeConfig: GlobalThemeOverrides = {
 </script>
 
 <template>
-  <DndProvider :backend="HTML5Backend">
-    <NConfigProvider v-bind="uiLocale" :themeOverrides="themeConfig">
-      <NMessageProvider>
-        <RouterView />
-      </NMessageProvider>
-    </NConfigProvider>
-  </DndProvider>
+  <NConfigProvider v-bind="uiLocale" :themeOverrides="themeConfig">
+    <NMessageProvider>
+      <RouterView />
+    </NMessageProvider>
+  </NConfigProvider>
 </template>

src/pages/not-found/index.vue

@@ -0,0 +1,52 @@
+<script setup lang='ts'>
+import Lottie from 'lottie-web';
+import animationData from '@assets/json/404.json';
+import {ref, onMounted} from 'vue';
+
+defineOptions({name: 'NotFound'});
+
+const containerRef = ref<HTMLDivElement>();
+
+onMounted(function() {
+  Lottie.loadAnimation({
+    container: containerRef.value!,
+    loop: true,
+    autoplay: true,
+    animationData,
+  });
+});
+</script>
+
+<template>
+  <main id="main">
+    <section>
+      <div class="container" ref="containerRef" />
+      <h1>page not found</h1>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+  main{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+  }
+
+  section{
+    transform: translateY(-100px);
+  }
+
+  .container{
+    width: 500px;
+  }
+
+  h1{
+    text-align: center;
+    margin-top: 10px;
+    font-size: var(--logo-font-size);
+    color: var(--subtitle-font-color);
+  }
+</style>

src/routes/index.ts

@@ -39,7 +39,7 @@ const routes: RouteRecordRaw[] = [
     name: REGISTER_NAME,
     component: () => import('@pages/register/index.vue'),
   },
-
+  {path: '/:pathMatch(.*)*', name: 'NOT_FOUND_PATH', component: () => import('@pages/not-found/index.vue')},
 ];
 
 export const router = createRouter({