first commit

src/views/default/error/403.vue

@@ -0,0 +1,11 @@
+<template>
+  <ErrorPage :code="403" />
+</template>
+
+<script setup lang="ts">
+import ErrorPage from './components/ErrorPage.vue'
+
+defineOptions({ name: 'Error403' })
+</script>
+
+<style lang="scss" scoped></style>

src/views/default/error/404.vue

@@ -0,0 +1,11 @@
+<template>
+  <ErrorPage :code="404" />
+</template>
+
+<script setup lang="ts">
+import ErrorPage from './components/ErrorPage.vue'
+
+defineOptions({ name: 'Error404' })
+</script>
+
+<style lang="scss" scoped></style>

src/views/default/error/500.vue

@@ -0,0 +1,11 @@
+<template>
+  <ErrorPage :code="500" />
+</template>
+
+<script setup lang="ts">
+import ErrorPage from './components/ErrorPage.vue'
+
+defineOptions({ name: 'Error500' })
+</script>
+
+<style lang="scss" scoped></style>

src/views/default/error/components/ErrorPage.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="error-page">
+    <section class="error__container">
+      <div class="error__img">
+        <component class="error__icon" :is="IconMap[props.code]"></component>
+      </div>
+
+      <div class="error__tip">
+        <div class="error__tip--a">抱歉!</div>
+        <div class="error__tip--b">当前页面不存在...</div>
+        <div class="error__tip--c">请检查您输入的网址是否正确，或点击下面的按钮返回首页</div>
+        <a-button type="primary" shape="round" size="large" @click="back">返回首页</a-button>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import Icon403 from '@/components/icons/Icon403.vue'
+import Icon404 from '@/components/icons/Icon404.vue'
+import Icon500 from '@/components/icons/Icon500.vue'
+
+defineOptions({ name: 'ErrorPage' })
+
+interface Props {
+  code: number
+}
+const props = withDefaults(defineProps<Props>(), {
+  code: 403
+})
+
+const IconMap: Record<number, Component> = {
+  403: Icon403,
+  404: Icon404,
+  500: Icon500
+}
+
+const router = useRouter()
+// 返回首页
+const back = () => {
+  router.replace({ path: '/' })
+}
+</script>
+
+<style lang="scss" scoped>
+.error-page {
+  width: 100%;
+  height: 100%;
+  background: var(--color-bg-1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.error {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  &__img {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  &__icon {
+    max-width: 90%;
+    height: 50vh;
+  }
+  &__tip {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &--a {
+      margin-bottom: 20px;
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: rgb(var(--primary-6));
+      opacity: 0;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &--b {
+      margin-bottom: 10px;
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 24px;
+      color: var(--color-text-1);
+      opacity: 0;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &--c {
+      padding: 0 30px;
+      margin-bottom: 20px;
+      font-size: 13px;
+      text-align: center;
+      line-height: 20px;
+      color: var(--color-text-2);
+      opacity: 0;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+  }
+}
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(60px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

src/views/default/redirect/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const router = useRouter()
+
+const { params, query } = route
+const { path } = params
+
+router.replace({ path: '/' + path, query })
+</script>