加载

index.html

@@ -81,5 +81,69 @@
             </div>
         </div>
         <script type="module" src="/src/main.ts"></script>
+
+        <div id="splash-screen">
+            <img src="/img1.png" class="img1" alt="" />
+            <img src="/img2.png" class="img2" alt="" />
+            <!-- <img src="/img-logo.png" class="img-logo" alt="" /> -->
+        </div>
+        <style>
+            #splash-screen {
+                position: fixed;
+                width: 100vw;
+                height: 100vh;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 9999;
+                object-fit: cover;
+                opacity: 1;
+                transition: opacity 0.8s ease-in-out;
+                background-color: #090a20;
+            }
+
+            #splash-screen .img1 {
+                width: 100%;
+                height: auto;
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 999;
+            }
+
+            #splash-screen .img2 {
+                width: 100%;
+                height: auto;
+                display: block;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 999;
+            }
+            #splash-screen .img-logo {
+                width: 110px;
+                height: 20px;
+                position: absolute;
+                bottom: 40px;
+                left: 50%;
+                transform: translateX(-50%);
+                z-index: 999;
+            }
+        </style>
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.11.0/lottie.min.js"
+            type="text/javascript"
+        ></script>
+        <script>
+            var animation = bodymovin.loadAnimation({
+                container: document.getElementById('splash-screen'),
+                renderer: 'svg',
+                loop: true,
+                autoplay: true,
+                path: (window.location.origin === 'https://gpt.izouma.com' ? '/ui' : '') + '/splash.json'
+            })
+        </script>
     </body>
 </html>

src/main.ts

@@ -40,6 +40,32 @@ if (isWechat) {
     }
 }
 
+const loadSplash = (onload?: any, onerror?: any) =>
+    new Promise((resolve, reject) => {
+        let isHide = false
+        function hideSplash() {
+            if (isHide) return
+            isHide = true
+            if (splash && !splash.hasAttribute('isHold')) {
+                splash.style.opacity = '0'
+                setTimeout(() => {
+                    if (!splash.hasAttribute('isHold')) {
+                        splash.style.display = 'none'
+                    }
+                }, 800)
+            }
+            resolve('')
+        }
+        const splash = document.getElementById('splash-screen')
+        if (splash) {
+            splash.style.opacity = '1'
+            splash.style.display = 'block'
+        }
+        setTimeout(() => {
+            hideSplash()
+        }, 1000)
+    })
+
 async function bootstrap() {
     const app = createApp(App)
     setupAssets()
@@ -51,6 +77,7 @@ async function bootstrap() {
     setupI18n(app)
 
     await setupRouter(app)
+    await loadSplash()
 
     app.mount('#app')
 }