【优化】优化前端刷新速度

snowy-admin-web/index.html

@@ -12,6 +12,7 @@
     .app-loading__logo {margin-bottom: 30px;}
     .app-loading__logo img {width: 90px;vertical-align: bottom;}
     .app-loading__title {font-size: 24px;color: #333;margin-top: 30px;}
+	.h-full { height: 100% }
     @keyframes loader {
       0% {
         transform: rotate(0deg);
@@ -28,15 +29,7 @@
   <strong>We're sorry but Snowy2.0 doesn't work properly without JavaScript
     enabled. Please enable it to continue.</strong>
 </noscript>
-<div id="app" class="admin-ui">
+<div id="app" class="h-full"></div>
-  <div class="app-loading">
-    <div class="app-loading__logo">
-      <img src="/img/logo.png"/>
-    </div>
-    <div><span class="dot dot-spin"><i></i><i></i><i></i><i></i></span></div>
-    <div class="app-loading__title">Snowy</div>
-  </div>
-</div>
 <script type="module" src="/src/main.js"></script>
 </body>
 </html>

snowy-admin-web/src/layout/index.vue

@@ -81,6 +81,7 @@
 	import ClassicalMenu from '@/layout/menu/classicalMenu.vue'
 	import DoubleRowMenu from '@/layout/menu/doubleRowMenu.vue'
 	import TopMenu from '@/layout/menu/topMenu.vue'
+	import { NextLoading } from '@/utils/loading'
 
 	const store = globalStore()
 	const kStore = keepAliveStore()
@@ -216,6 +217,8 @@
 	}
 	showThis()
 	onMounted(() => {
+		// 取消loading
+		NextLoading.done()
 		onLayoutResize()
 		window.addEventListener('resize', onLayoutResize)
 		window.addEventListener('resize', getNav)

snowy-admin-web/src/router/index.js

@@ -20,6 +20,7 @@ import tool from '@/utils/tool'
 import { cloneDeep } from 'lodash-es'
 const modules = import.meta.glob('/src/views/**/**.vue')
 import { globalStore, searchStore } from '@/store'
+import { NextLoading } from '@/utils/loading'
 
 // 进度条配置
 NProgress.configure({ showSpinner: false, speed: 500 })
@@ -72,6 +73,12 @@ router.beforeEach(async (to, from, next) => {
 	}
 
 	const token = tool.data.get('TOKEN')
+
+	// 页面刷新，加载loading
+	if (from.path === '/' && to.path !== '/login' && !window.nextLoading && token) {
+		NextLoading.start()
+	}
+
 	if (to.path === '/login') {
 		// 当用户输入了login路由，将其跳转首页即可
 		if (token) {
@@ -129,10 +136,12 @@ router.beforeEach(async (to, from, next) => {
 router.afterEach((to, from) => {
 	afterEach(to, from)
 	NProgress.done()
+	window.nextLoading && NextLoading.done()
 })
 
 router.onError((error) => {
 	NProgress.done()
+	window.nextLoading && NextLoading.done()
 	notification.error({
 		message: '路由错误',
 		description: error.message

snowy-admin-web/src/router/systemRouter.js

@@ -12,25 +12,29 @@ import config from '@/config'
 import tool from '@/utils/tool'
 import routerUtil from '@/utils/routerUtil'
 
+import Layout from '@/layout/index.vue'
+import Login from '@/views/auth/login/login.vue'
+import Findpwd from '@/views/auth/findPwd/index.vue'
+
 // 系统路由
 const routes = [
 	{
 		name: 'layout',
 		path: '/',
-		component: () => import('@/layout/index.vue'),
+		component: Layout,
 		redirect: tool.data.get('MENU') ? routerUtil.getIndexMenu(tool.data.get('MENU')).path : config.DASHBOARD_URL,
 		children: []
 	},
 	{
 		path: '/login',
-		component: () => import('@/views/auth/login/login.vue'),
+		component: Login,
 		meta: {
 			title: '登录'
 		}
 	},
 	{
 		path: '/findpwd',
-		component: () => import('@/views/auth/findPwd/index.vue'),
+		component: Findpwd,
 		meta: {
 			title: '找回密码'
 		}

snowy-admin-web/src/store/global.js

@@ -77,17 +77,14 @@ export const globalStore = defineStore('global', () => {
 	}
 	const setTheme = (key) => {
 		theme.value = key
-		const closeMessage = message.loading(`加载中...`)
+		changeColor(themeColor.value, key).then()
-		changeColor(themeColor.value, key).then(closeMessage)
 	}
 	const setThemeColor = (key) => {
 		themeColor.value = key
-		const closeMessage = message.loading(`加载中...`)
+		changeColor(key, theme.value).then()
-		changeColor(key, theme.value).then(closeMessage)
 	}
 	const initTheme = () => {
-		const closeMessage = message.loading(`加载中...`)
+		changeColor(themeColor.value, theme.value).then()
-		changeColor(themeColor.value, theme.value).then(closeMessage)
 	}
 	const toggleConfig = (key) => {
 		switch (key) {

snowy-admin-web/src/utils/loading.js

@@ -0,0 +1,38 @@
+import { nextTick } from 'vue'
+
+/**
+ * 页面全局 Loading
+ * @method start 创建 loading
+ * @method done 移除 loading
+ */
+export const NextLoading = {
+	// 创建 loading
+	start: () => {
+		const el = document.querySelector('.admin-ui')
+		if (el) return
+		const bodys = document.body
+		const div = document.createElement('div')
+		div.setAttribute('class', 'admin-ui')
+		const htmls = `
+			  <div class="app-loading">
+				<div class="app-loading__logo">
+				  <img src="/img/logo.png"/>
+				</div>
+				<div><span class="dot dot-spin"><i></i><i></i><i></i><i></i></span></div>
+				<div class="app-loading__title">Snowy</div>
+			</div>`
+		div.innerHTML = htmls
+		bodys.insertBefore(div, bodys.childNodes[0])
+		window.nextLoading = true
+	},
+	// 移除 loading
+	done: (time = 0) => {
+		nextTick(() => {
+			setTimeout(() => {
+				window.nextLoading = false
+				const el = document.querySelector('.admin-ui')
+				el?.parentNode?.removeChild(el)
+			}, time)
+		})
+	}
+}

snowy-admin-web/src/views/auth/login/login.vue

@@ -99,7 +99,7 @@
 </template>
 <script setup>
 	import loginApi from '@/api/auth/loginApi'
-	import PhoneLoginForm from './phoneLoginForm.vue'
+	const PhoneLoginForm = defineAsyncComponent(() => import('./phoneLoginForm.vue'))
 	import ThreeLogin from './threeLogin.vue'
 	import smCrypto from '@/utils/smCrypto'
 	import { required } from '@/utils/formRules'
@@ -239,8 +239,10 @@
 					const loginAfter = afterLogin(loginToken)
 				} catch (err) {
 					loading.value = false
+					if (captchaOpen.value === 'true') {
 						loginCaptcha()
 					}
+				}
 			})
 			.catch(() => {})
 	}