From 0f2306654517779bf341a886d2d82ed138f3978d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 30 Nov 2022 22:57:53 +0800
Subject: [PATCH] feat: add exception pages (halo-dev/console#735)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind feature
/milestone 2.0

#### What this PR does / why we need it:

完善 Console 端的 404/403 页面。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/2597

#### Screenshots:

<img width="1920" alt="image" src="https://user-images.githubusercontent.com/21301288/204723752-fa20d9c0-4cec-4d9f-8a8c-c4fa964e0e16.png">

#### Special notes for your reviewer:

None

#### Does this PR introduce a user-facing change?


```release-note
完善 Console 端的 404/403 页面。
```
---
 src/views/exceptions/Forbidden.vue            |  7 +++-
 src/views/exceptions/NotFound.vue             |  7 +++-
 src/views/exceptions/components/Exception.vue | 42 +++++++++++++++++++
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/views/exceptions/components/Exception.vue

diff --git a/src/views/exceptions/Forbidden.vue b/src/views/exceptions/Forbidden.vue
index 42dea41cc..542a6d078 100644
--- a/src/views/exceptions/Forbidden.vue
+++ b/src/views/exceptions/Forbidden.vue
@@ -1 +1,6 @@
-<template>403</template>
+<script setup lang="ts">
+import Exception from "./components/Exception.vue";
+</script>
+<template>
+  <Exception code="403" message="没有权限访问此页面" />
+</template>
diff --git a/src/views/exceptions/NotFound.vue b/src/views/exceptions/NotFound.vue
index 2300138bc..fd4fead90 100644
--- a/src/views/exceptions/NotFound.vue
+++ b/src/views/exceptions/NotFound.vue
@@ -1 +1,6 @@
-<template>404</template>
+<script setup lang="ts">
+import Exception from "./components/Exception.vue";
+</script>
+<template>
+  <Exception code="404" message="没有找到该页面" />
+</template>
diff --git a/src/views/exceptions/components/Exception.vue b/src/views/exceptions/components/Exception.vue
new file mode 100644
index 000000000..fe44ddc7b
--- /dev/null
+++ b/src/views/exceptions/components/Exception.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { VButton, VSpace } from "@halo-dev/components";
+import { useRouter } from "vue-router";
+withDefaults(
+  defineProps<{
+    code: number | string;
+    title?: string;
+    message?: string;
+  }>(),
+  {
+    title: undefined,
+    message: undefined,
+  }
+);
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="grid h-screen place-content-center bg-white px-4">
+    <div class="text-center">
+      <h1 class="text-8xl font-black text-gray-200">
+        {{ code }}
+      </h1>
+
+      <p class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+        {{ title }}
+      </p>
+
+      <p class="mt-4 text-gray-500">{{ message }}</p>
+
+      <div class="mt-4">
+        <VSpace>
+          <VButton @click="router.back()"> 返回 </VButton>
+          <VButton type="secondary" :route="{ name: 'Dashboard' }">
+            仪表盘
+          </VButton>
+        </VSpace>
+      </div>
+    </div>
+  </div>
+</template>