style: 完成进度条加载

2025-07-20 15:15:05 +08:00
parent 5d7217b775
commit 3d53d0bcd6
2 changed files with 226 additions and 15 deletions
--- a/Yi.Ai.Vue3/index.html
+++ b/Yi.Ai.Vue3/index.html
@@ -2,24 +2,211 @@
 <html lang="en">

 <head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="baidu-site-verification" content="codeva-mkVpSFmYJm" />
-  <meta name="description" content="意心AI：一站式多模型 AI 平台，提供 GPT-4o、DeepSeek 等服务" />
-  <meta name="description" content="各大主流AI无限制使用，直连，AI，claude ,DeepSeek,open-ai" />
-  <meta name="keywords" content="意心AI, GPT-4.5, 多模型AI, AI工具" />
-  <meta name="keywords" content="橙子，chengzi,橙子老哥，ccnetcore，意社区" />
-  <meta name="author" content="橙子，chengzi,橙子老哥，ccnetcore" />
-  <meta name="version" content="%VITE_APP_VERSION%" />
-  <meta name="version" content="%VITE_WEB_TITLE%" />
+  <meta charset="UTF-8"/>
+  <link rel="icon" href="/favicon.ico"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta name="baidu-site-verification" content="codeva-mkVpSFmYJm"/>
+  <meta name="description" content="意心AI：一站式多模型 AI 平台，提供 GPT-4o、DeepSeek 等服务"/>
+  <meta name="description" content="各大主流AI无限制使用，直连，AI，claude ,DeepSeek,open-ai"/>
+  <meta name="keywords" content="意心AI, GPT-4.5, 多模型AI, AI工具"/>
+  <meta name="keywords" content="橙子，chengzi,橙子老哥，ccnetcore，意社区"/>
+  <meta name="author" content="橙子，chengzi,橙子老哥，ccnetcore"/>
+  <meta name="version" content="%VITE_APP_VERSION%"/>
+  <meta name="version" content="%VITE_WEB_TITLE%"/>
  <title>%VITE_WEB_TITLE%</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+
+
+
 </head>

 <body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
+<!-- 加载动画容器 -->
+<div id="loader" class="loader-container">
+  <div class="loader-title">意心Ai</div>
+  <div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒</div>
+  <div class="loader-logo">
+    <div class="pulse-box"></div>
+  </div>
+  <div class="loader-text" id="progress-text">0%</div>
+  <div class="loader-progress-bar">
+    <div id="progress-bar" class="loader-progress"></div>
+  </div>
+</div>
+
+<div id="app"></div>
+
+
+<style>
+  /* 全局样式 */
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* 加载动画样式 */
+  .loader-container {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    z-index: 1000;
+    transition: opacity 0.5s ease;
+  }
+
+  .loader-title {
+    font-size: clamp(1.5rem, 3vw, 2.5rem);
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.02em;
+  }
+
+  .loader-subtitle {
+    font-size: 0.875rem;
+    color: #555;
+    margin-bottom: 1.5rem;
+  }
+
+  .loader-logo {
+    font-size: 3rem;
+    margin-bottom: 1.5rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  .pulse-box {
+    width: 32px;
+    height: 32px;
+    background: #000;
+    display: inline-block;
+    transform-origin: center;
+    animation: pulse 1.2s infinite ease-in-out;
+  }
+
+  @keyframes pulse {
+    0% {
+      transform: scale(1) rotate(0deg);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.2) rotate(45deg);
+      opacity: 0.8;
+    }
+    100% {
+      transform: scale(1) rotate(90deg);
+      opacity: 1;
+    }
+  }
+
+  .loader-text {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+  }
+
+  .loader-progress-bar {
+    width: 90%;
+    max-width: 400px;
+    height: 8px;
+    background: #f0f0f0;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .loader-progress {
+    height: 100%;
+    width: 0%;
+    background: #000;
+    transition: width 0.3s ease-out;
+  }
+</style>
+<script>
+  // 加载动画逻辑
+  // document.addEventListener('DOMContentLoaded', function () {
+    const loader = document.getElementById('loader');
+    const progressBar = document.getElementById('progress-bar');
+    const progressText = document.getElementById('progress-text');
+
+    let progress = 0;
+    let loadingInterval = null;
+    let isVueReady = false;
+
+    // 注册全局事件监听器，用于接收Vue的加载完成信号（生产环境没有用，所以放到app.vue处理）
+    window.addEventListener('vue-ready', function () {
+      isVueReady = true;
+      completeLoading();
+    });
+
+    // 开始模拟加载
+    function startLoading() {
+      const targetProgress = 95;
+      const intervalTime = 50; // 50毫秒更新一次
+
+      // 计算每次递增的进度值，使用更快的初始速度
+      let increment = calculateIncrement();
+
+
+      // 开始加载动画
+      loadingInterval = setInterval(() => {
+        if (progress>=targetProgress)
+        {
+          increment=0;
+        }
+        progress += increment;
+
+        // 如果进度达到95%或者Vue已经准备好
+        if (isVueReady) {
+          // progress = 100;
+          clearInterval(loadingInterval);
+          completeLoading();
+        }
+
+        // updateProgress(progress);
+      }, intervalTime);
+    }
+
+    // 计算动态递增速率，初始较快，后期较慢
+    function calculateIncrement() {
+      // 如果已经检测到Vue正在加载，加快进度
+      if (window.Vue) {
+        return 3;
+      }
+
+      // 首次访问海外地址可能较慢
+      return 1;
+    }
+
+    // 更新进度条和文本
+    function updateProgress(value) {
+      progressBar.style.width = `${value}%`;
+      progressText.textContent = `${Math.round(value)}%`;
+    }
+
+    // 完成加载并隐藏动画
+    function completeLoading() {
+      // 确保进度是100%
+      // updateProgress(100);
+
+      // 淡出加载动画
+      setTimeout(() => {
+        loader.style.opacity = '0';
+        setTimeout(() => {
+          loader.style.display = 'none';
+        }, 500);
+      }, 300);
+    }
+
+    // 启动加载动画
+    startLoading();
+  // });
+</script>
+
+<script async type="module" src="/src/main.ts"></script>
 </body>

 </html>
--- a/Yi.Ai.Vue3/src/App.vue
+++ b/Yi.Ai.Vue3/src/App.vue
@@ -1,4 +1,28 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+onMounted(() => {
+  // completeLoading();
+  // const event = new Event('vue-ready');
+  // window.dispatchEvent(event);
+  completeLoading();
+});
+
+// 完成加载并隐藏动画
+function completeLoading() {
+  const loader = document.getElementById('loader');
+  const progressBar = document.getElementById('progress-bar');
+  const progressText = document.getElementById('progress-text');
+  // 确保进度是100%
+  progressBar!.style.width = `${100}%`;
+  progressText!.textContent = `${Math.round(100)}%`;
+  // 淡出加载动画
+  setTimeout(() => {
+    //loader!.style.opacity = '100';
+    setTimeout(() => {
+      loader!.style.display = 'none';
+    }, 500);
+  }, 300);
+}
+</script>

 <template>
  <router-view />