From deb2d3da13ff20bc938fca0c4caa5400b1b4969c Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Wed, 12 Oct 2022 17:29:38 +0800
Subject: [PATCH] refactor: error page

---
 src/views/error-page/403.vue                  | 14 ++++-------
 src/views/error-page/404.vue                  | 14 ++++-------
 .../error-page/components/ErrorPageLayout.vue | 24 +++++++++++++++++++
 src/views/error-page/index.scss               | 11 ---------
 4 files changed, 32 insertions(+), 31 deletions(-)
 create mode 100644 src/views/error-page/components/ErrorPageLayout.vue
 delete mode 100644 src/views/error-page/index.scss

diff --git a/src/views/error-page/403.vue b/src/views/error-page/403.vue
index 2d5670f..d3e2d3f 100644
--- a/src/views/error-page/403.vue
+++ b/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>
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index 46dff0e..a3703f8 100644
--- a/src/views/error-page/404.vue
+++ b/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>
diff --git a/src/views/error-page/components/ErrorPageLayout.vue b/src/views/error-page/components/ErrorPageLayout.vue
new file mode 100644
index 0000000..315e570
--- /dev/null
+++ b/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>
diff --git a/src/views/error-page/index.scss b/src/views/error-page/index.scss
deleted file mode 100644
index bee1a20..0000000
--- a/src/views/error-page/index.scss
+++ /dev/null
@@ -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;
-  }
-}