refactor: error page

src/views/error-page/403.vue

@@ -1,16 +1,10 @@
 <script lang="ts" setup>
+import ErrorPageLayout from "./components/ErrorPageLayout.vue"
 import Svg403 from "@/assets/error-page/403.svg?component" // vite-svg-loader 插件的功能
 </script>
 
 <template>
-  <div class="error-page">
-    <Svg403 class="error-page-svg" />
-    <router-link to="/">
-      <el-button type="primary">回到首页</el-button>
-    </router-link>
-  </div>
+  <ErrorPageLayout>
+    <Svg403 />
+  </ErrorPageLayout>
 </template>
-
-<style lang="scss" scoped>
-@import "./index.scss";
-</style>

src/views/error-page/404.vue

@@ -1,16 +1,10 @@
 <script lang="ts" setup>
+import ErrorPageLayout from "./components/ErrorPageLayout.vue"
 import Svg404 from "@/assets/error-page/404.svg?component" // vite-svg-loader 插件的功能
 </script>
 
 <template>
-  <div class="error-page">
-    <Svg404 class="error-page-svg" />
-    <router-link to="/">
-      <el-button type="primary">回到首页</el-button>
-    </router-link>
-  </div>
+  <ErrorPageLayout>
+    <Svg404 />
+  </ErrorPageLayout>
 </template>
-
-<style lang="scss" scoped>
-@import "./index.scss";
-</style>

src/views/error-page/components/ErrorPageLayout.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="error-page">
+    <div class="error-page-svg">
+      <slot />
+    </div>
+    <router-link to="/">
+      <el-button type="primary">回到首页</el-button>
+    </router-link>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.error-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &-svg {
+    width: 400px;
+    margin-bottom: 50px;
+  }
+}
+</style>

src/views/error-page/index.scss

@@ -1,11 +0,0 @@
-.error-page {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  &-svg {
-    width: 400px;
-    margin-bottom: 50px;
-  }
-}