Merge remote-tracking branch 'soybeanjs/main' into ruoyi

# Conflicts:
#	CHANGELOG.md
#	README.md
#	build/config/proxy.ts
#	build/plugins/index.ts
#	package.json
#	src/plugins/loading.ts
#	src/service/request/index.ts
#	src/store/modules/auth/index.ts
#	src/store/modules/route/index.ts
#	src/typings/vite-env.d.ts
#	src/views/_builtin/login/modules/pwd-login.vue

src/plugins/loading.ts

@@ -1,21 +1,43 @@
 // @unocss-include
 import { getRgb } from '@sa/color';
-import { $t } from '@/locales';
+import { DARK_CLASS } from '@/constants/app';
 import { localStg } from '@/utils/storage';
-import SystemLogo from '@/assets/imgs/logo.png';
+import { toggleHtmlClass } from '@/utils/common';
+import systemLogo from '@/assets/imgs/logo.png';
+import { $t } from '@/locales';
 
 export function setupLoading() {
   const themeColor = localStg.get('themeColor') || '#2080f0';
-
+  const darkMode = localStg.get('darkMode') || false;
   const { r, g, b } = getRgb(themeColor);
 
   const primaryColor = `--primary-color: ${r} ${g} ${b}`;
 
+  if (darkMode) {
+    toggleHtmlClass(DARK_CLASS).add();
+  }
+
+  const loadingClasses = [
+    'left-0 top-0',
+    'left-0 bottom-0 animate-delay-500',
+    'right-0 top-0 animate-delay-1000',
+    'right-0 bottom-0 animate-delay-1500'
+  ];
+
+  const logoWithClass = systemLogo.replace('<svg', `<svg class="size-128px text-primary"`);
+
+  const dot = loadingClasses
+    .map(item => {
+      return `<div class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse ${item}"></div>`;
+    })
+    .join('\n');
+
   const loading = `
-<div class="fixed-center flex-col" style="${primaryColor}">
+<div class="fixed-center flex-col bg-layout" style="${primaryColor}">
+  ${logoWithClass}
   <div class="w-120px h-120px my-36px">
     <div class="relative h-full animate-spin">
-      <img src="${SystemLogo}" width="120" />
+      ${dot}
     </div>
   </div>
   <h2 class="text-28px font-500 text-#646464">${$t('system.title')}</h2>