✨ add loading

Author: eonova

apps/web/.eslintrc-auto-import.json

@@ -313,6 +313,10 @@
     "defineLoader": true,
     "definePage": true,
     "useI18n": true,
-    "preferredDark": true
+    "preferredDark": true,
+    "eventListener": true,
+    "user": true,
+    "ElMessage": true,
+    "loader": true
   }
 }

apps/web/package.json

@@ -39,7 +39,8 @@
     "unocss-preset-grid": "^1.4.2",
     "vue": "^3.4.14",
     "vue-i18n": "^9.8.0",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-starport": "^0.4.0"
   },
   "devDependencies": {
     "@alova/adapter-axios": "^1.2.2",
@@ -57,8 +58,8 @@
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue-macros/volar": "^0.18.10",
     "@vue/test-utils": "^2.4.3",
-    "critters": "^0.0.20",
     "commitizen": "^4.3.0",
+    "critters": "^0.0.20",
     "cypress": "^13.6.2",
     "cypress-vite": "^1.5.0",
     "cz-emoji": "1.3.2-canary.2",

apps/web/src/App.vue

@@ -1,3 +1,25 @@
+<script setup>
+import { StarportCarrier } from 'vue-starport'
+
+const { PageIn, PageOut, checkLoading } = useStore('loader')
+
+// 全局加载动画
+const router = useRouter()
+
+onMounted(() => {
+  checkLoading();
+  router.beforeEach((to, from, next) => {
+    PageIn(next);
+  });
+  router.afterEach((to, from) => {
+    PageOut();
+  });
+})
+</script>
+
 <template>
-  <RouterView />
+    <Loading/>
+    <StarportCarrier>
+      <RouterView />
+    </StarportCarrier>
 </template>

apps/web/src/api/methods/user.ts

@@ -0,0 +1,24 @@
+// 案例学习：https://alova.js.org/zh-CN/tutorial/best-practice/method-manage
+import http from '..'
+
+interface LoginParams {
+  username: string;
+  password: string;
+}
+
+export default {
+  register: (username: string, password: string, confirmPassword: string) => {
+    return http.post('/user/register', {
+      username,
+      password,
+      confirmPassword,
+    })
+  },
+
+  Login: ({ username, password}: LoginParams) => {
+    return http.post('/user/login', {
+      username,
+      password,
+    })
+  },
+}

apps/web/src/api/methods/userApi.ts

@@ -17,7 +17,7 @@ import LogoJSON from '@/assets/lottie/logo.json'
       <h2 my-2 mt-8 font-bold text-5 color-green-500 text-center>
         <slot name="header"></slot>
       </h2>
-      <div h-50>
+      <div h-60 pb-5>
         <slot name="content"></slot>
       </div>
     </div>

apps/web/src/components/AuthBox.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="loading">
+      <svg viewBox='0 0 50 50'>
+          <circle r='25' cx='25' cy='25'></circle>
+      </svg>
+      <p>LOADING</p>
+  </div>
+</template>
+
+<script>
+export default {
+  // JIEJOE produce
+  // b站主页：https://space.bilibili.com/3546390319860710
+  name: "loading",
+  methods: {
+      in(next) {
+          let conainer = document.getElementById("loading");
+          conainer.classList.remove("loading_out");
+          setTimeout(() => {
+              next();
+              this.$parent.check_loading();
+          }, 1000);
+      },
+      out() {
+          let conainer = document.getElementById("loading");
+          conainer.classList.add("loading_out");
+      },
+  },
+};
+</script>
+
+
+<style>
+#loading {
+  position: fixed;
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: #f7f7f7;
+  z-index: 100000000;
+  transition: 1s ease;
+}
+
+#loading svg {
+  width: 5rem;
+  margin-bottom: 2rem;
+  overflow: visible;
+  transition: 0.3s ease;
+}
+
+#loading svg circle {
+  fill: none;
+  stroke: #171717;
+  stroke-width: 12;
+  stroke-dasharray: 160;
+  stroke-dashoffset: 160;
+  transform-origin: center;
+  animation: circle_rotate 3s ease-in infinite;
+}
+
+@keyframes circle_rotate {
+  0% {
+      transform: rotate(0deg);
+      stroke-dashoffset: 160;
+  }
+
+  100% {
+      transform: rotate(360deg);
+      stroke-dashoffset: -160;
+  }
+}
+
+#loading p {
+  font-family: sans-serif;
+  font-size: 2rem;
+  color: #171717;
+  font-weight: 900;
+  transition: 0.3s ease;
+}
+
+.loading_out {
+  transform: translateY(100%);
+}
+
+.loading_out svg,
+.loading_out p {
+  opacity: 0;
+}
+</style>