feat:优化登录后打开小数时，等待白屏时间长，加入loading效果

src/views/Xiaoshu.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <LayoutExperience> -->
   <ContentContainer :containerStyle="containerStyle">
-    <template v-if="!is_mounted"></template>
+    <template v-if="!is_mounted"> </template>
 
     <WujieVue
       v-if="is_mounted"
@@ -21,7 +21,6 @@
 import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import WujieVue from 'wujie-vue3';
-import LayoutExperience from './layout/LayoutExperience.vue';
 import ContentContainer from './layout/ContentContainer.vue';
 
 import useLogout from './account/use-logout';
@@ -209,6 +208,52 @@ onMounted(() => {
     }
   `;
 
+  // 插入的loading样式
+  const insert_loading_style_str = `
+  .xiaoshu-loading-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(205, 230, 248, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+
+  .xiaoshu-loading-spinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+`;
+
+  // 插入的脚本，用于显示和隐藏 loading 效果
+  const insert_loading_script_before_str = `
+  // 显示 loading 层
+  document.body.insertAdjacentHTML('afterbegin', '<div class="xiaoshu-loading-container"><div class="xiaoshu-loading-spinner"></div></div>');
+`;
+
+  // 插入的脚本，用于隐藏 loading 效果
+  const insert_loading_script_after_str = `
+  // 页面加载完成后，移除 loading 层
+  window.addEventListener('load', function() {
+    const loadingContainer = document.querySelector('.xiaoshu-loading-container');
+    if (loadingContainer) {
+      loadingContainer.style.display = 'none';
+    }
+  });`;
+
   /**
    * 监听子系统的事件
    */
@@ -225,14 +270,13 @@ onMounted(() => {
   bus.$on('xiaoshuAsideLogout', function () {
     logout();
   });
-
   plugins.value = [
     {
       /**
        * 在子应用所有的js之前
        * @see https://wujie-micro.github.io/doc/guide/plugin.html#js-before-loaders
        */
-      jsBeforeLoaders: [{ content: insert_script_before_str }]
+      jsBeforeLoaders: [{ content: insert_script_before_str }, { content: insert_loading_script_before_str }]
     },
 
     {
@@ -240,12 +284,13 @@ onMounted(() => {
        * 在子应用所有的js之后
        * @see https://wujie-micro.github.io/doc/guide/plugin.html#js-after-loader
        */
-      jsAfterLoaders: [{ content: insert_script_after_str }]
+      jsAfterLoaders: [{ content: insert_script_after_str }, { content: insert_loading_script_after_str }]
     },
     {
       cssAfterLoaders: [
         //在加载html所有样式之后添加一个内联样式
-        { content: insert_style_str }
+        { content: insert_style_str },
+        { content: insert_loading_style_str }
       ]
     }
   ];