initHeader

frontend/src/components/ErrorMessage/403.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/403.png" class="not-img" alt="403" />
+    <div class="not-detail">
+      <h2>403</h2>
+      <h4>抱歉，您无权访问该页面~🙅‍♂️🙅‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="403">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

frontend/src/components/ErrorMessage/404.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/404.png" class="not-img" alt="404" />
+    <div class="not-detail">
+      <h2>404</h2>
+      <h4>抱歉，您访问的页面不存在~🤷‍♂️🤷‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="404">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

frontend/src/components/ErrorMessage/500.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/500.png" class="not-img" alt="500" />
+    <div class="not-detail">
+      <h2>500</h2>
+      <h4>抱歉，您的网络不见了~🤦‍♂️🤦‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="500">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

frontend/src/components/ErrorMessage/index.scss

@@ -0,0 +1,32 @@
+.not-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .not-img {
+    margin-right: 120px;
+  }
+  .not-detail {
+    display: flex;
+    flex-direction: column;
+    h2,
+    h4 {
+      padding: 0;
+      margin: 0;
+    }
+    h2 {
+      font-size: 60px;
+      color: var(--el-text-color-primary);
+    }
+    h4 {
+      margin: 30px 0 20px;
+      font-size: 19px;
+      font-weight: normal;
+      color: var(--el-text-color-regular);
+    }
+    .el-button {
+      width: 100px;
+    }
+  }
+}

frontend/src/components/Loading/fullScreen.ts

@@ -0,0 +1,45 @@
+import { ElLoading } from "element-plus";
+
+/* 全局请求 loading */
+let loadingInstance: ReturnType<typeof ElLoading.service>;
+
+/**
+ * @description 开启 Loading
+ * */
+const startLoading = () => {
+  loadingInstance = ElLoading.service({
+    fullscreen: true,
+    lock: true,
+    text: "Loading",
+    background: "rgba(0, 0, 0, 0.7)"
+  });
+};
+
+/**
+ * @description 结束 Loading
+ * */
+const endLoading = () => {
+  loadingInstance.close();
+};
+
+/**
+ * @description 显示全屏加载
+ * */
+let needLoadingRequestCount = 0;
+export const showFullScreenLoading = () => {
+  if (needLoadingRequestCount === 0) {
+    startLoading();
+  }
+  needLoadingRequestCount++;
+};
+
+/**
+ * @description 隐藏全屏加载
+ * */
+export const tryHideFullScreenLoading = () => {
+  if (needLoadingRequestCount <= 0) return;
+  needLoadingRequestCount--;
+  if (needLoadingRequestCount === 0) {
+    endLoading();
+  }
+};

frontend/src/components/Loading/index.scss

@@ -0,0 +1,67 @@
+.loading-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .loading-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 98px;
+  }
+}
+.dot {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+  transform: rotate(45deg);
+  animation: ant-rotate 1.2s infinite linear;
+}
+.dot i {
+  position: absolute;
+  display: block;
+  width: 14px;
+  height: 14px;
+  background-color: var(--el-color-primary);
+  border-radius: 100%;
+  opacity: 0.3;
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  animation: ant-spin-move 1s infinite linear alternate;
+}
+.dot i:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.dot i:nth-child(2) {
+  top: 0;
+  right: 0;
+  animation-delay: 0.4s;
+}
+.dot i:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  animation-delay: 0.8s;
+}
+.dot i:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  animation-delay: 1.2s;
+}
+
+@keyframes ant-rotate {
+  to {
+    transform: rotate(405deg);
+  }
+}
+
+@keyframes ant-spin-move {
+  to {
+    opacity: 1;
+  }
+}

frontend/src/components/Loading/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="loading-box">
+    <div class="loading-wrap">
+      <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Loading"></script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

frontend/src/components/SwitchDark/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <el-switch v-model="globalStore.isDark" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" @change="switchDark" />
+</template>
+
+<script setup lang="ts" name="SwitchDark">
+import { useTheme } from "@/hooks/useTheme";
+import { useGlobalStore } from "@/stores/modules/global";
+import { Sunny, Moon } from "@element-plus/icons-vue";
+
+const { switchDark } = useTheme();
+const globalStore = useGlobalStore();
+</script>