no data found pages

src/pages/[...all].vue

@@ -1,68 +1,20 @@
 <script setup lang="ts">
-import misc404 from '@images/pages/404.png'
-import miscMaskDark from '@images/pages/misc-mask-dark.png'
-import miscMaskLight from '@images/pages/misc-mask-light.png'
-import tree from '@images/pages/tree.png'
-import { useTheme } from 'vuetify'
-
-const vuetifyTheme = useTheme()
-
-const authThemeMask = computed(() => {
-  return vuetifyTheme.global.name.value === 'light' ? miscMaskLight : miscMaskDark
-})
+import NoDataFound from '@/components/NoDataFound.vue';
 </script>
 
 <template>
-  <div class="misc-wrapper">
-    <ErrorHeader
-      error-code="404"
-      error-title="页面不存在 ⚠️"
-      error-description="您想要访问的页面不存在，请检查地址是否正确."
-    />
-
-    <!-- 👉 Image -->
-    <div class="misc-avatar w-100 text-center">
-      <VImg
-        :src="misc404"
-        alt="Coming Soon"
-        :max-width="800"
-        class="mx-auto"
-      />
+  <NoDataFound
+    errorCode="404"
+    errorTitle="页面不存在 ⚠️"
+    errorDescription="您想要访问的页面不存在，请检查地址是否正确。"
+  >
+    <template #button>
       <VBtn
         to="/"
         class="mt-10"
       >
         返回
       </VBtn>
-    </div>
-
-    <!-- 👉 Footer -->
-    <VImg
-      :src="tree"
-      class="misc-footer-tree d-none d-md-block"
-    />
-
-    <VImg
-      :src="authThemeMask"
-      class="misc-footer-img d-none d-md-block"
-    />
-  </div>
+    </template>
+  </NoDataFound>
 </template>
-
-<style lang="scss">
-@use "@core/scss/pages/misc.scss";
-
-.misc-wrapper .misc-footer-tree {
-  position: absolute;
-  z-index: 1;
-  inline-size: 15.625rem;
-  inset-block-end: 3.5rem;
-  inset-inline-start: 0.375rem;
-}
-
-.misc-wrapper .misc-footer-img {
-  position: absolute;
-  inline-size: 100%;
-  inset-block-end: 0;
-}
-</style>