From cbe93b9f7ee977f6d9cea1978b8fa205e068d4db Mon Sep 17 00:00:00 2001
From: ccnetcore <cc2016cc>
Date: Sun, 20 Jul 2025 15:15:05 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=AE=8C=E6=88=90=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E6=9D=A1=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Ai.Vue3/index.html  | 210 ++++++++++++++++++++++++++++++++++++++---
 Yi.Ai.Vue3/src/main.ts |   4 +
 2 files changed, 199 insertions(+), 15 deletions(-)
diff --git a/Yi.Ai.Vue3/index.html b/Yi.Ai.Vue3/index.html
index 599d0b94..bb9bd8aa 100644
--- a/Yi.Ai.Vue3/index.html
+++ b/Yi.Ai.Vue3/index.html
@@ -2,24 +2,204 @@
 <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>
-</body>
+<!-- 加载动画容器 -->
+<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>
+<script type="module" src="/src/main.ts"></script>
+</body>
+<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的加载完成信号
+    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>
 </html>
diff --git a/Yi.Ai.Vue3/src/main.ts b/Yi.Ai.Vue3/src/main.ts
index 245d4308..e4823c41 100644
--- a/Yi.Ai.Vue3/src/main.ts
+++ b/Yi.Ai.Vue3/src/main.ts
@@ -12,6 +12,10 @@ import 'element-plus/dist/index.css';
 // SVG插件配置
 import 'virtual:svg-icons-register';
 
+// 去除加载动画
+const event = new Event('vue-ready');
+window.dispatchEvent(event);
+
 const app = createApp(App);
 
 app.use(router);
