添加加载动画

2025-10-21 17:53:10 +00:00 · 2025-10-06 19:49:53 +08:00 · 2025-10-06 19:49:53 +08:00 · 0dceb0c278
commit 0dceb0c278
parent 779ca2b278
2 changed files with 83 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -9,9 +9,74 @@
    <link rel="apple-touch-icon" href="/image/apple-touch-icon.png" sizes="180x180" />
    <link rel="mask-icon" href="/image/mask-icon.svg" color="#212121" />
    <meta name="theme-color" content="#212121" />
+    <style>
+      /* Material 3 风格：纯 CSS 加载覆盖层 */
+      :root {
+        color-scheme: light dark;
+        /* 作为主色的近似值，后续由应用接管主题 */
+        --md3-primary: #6750A4; /* light primary */
+        --md3-primary-dark: #D0BCFF; /* dark primary */
+        --loader-bg: #ffffff;
+        --loader-fg: var(--md3-primary);
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --loader-bg: #121212;
+          --loader-fg: var(--md3-primary-dark);
+        }
+      }
+      #app-loader {
+        position: fixed;
+        inset: 0;
+        z-index: 2147483647; /* 确保在最上层 */
+        display: grid;
+        place-items: center;
+        background: var(--loader-bg);
+        transition: opacity .2s ease;
+      }
+      #app-loader .md3-loader {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 14px;
+        color: var(--loader-fg);
+      }
+      /* 圆形不确定进度条（近似 M3） */
+      #app-loader .spinner {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        /* 通过 conic-gradient 形成 90° 弧，并旋转实现不确定动画 */
+        background:
+          conic-gradient(from 0deg, currentColor 0 90deg, transparent 90deg 360deg);
+        /* 用 mask 形成环形厚度（4px） */
+        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
+                mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
+        animation: md3-spin 1s linear infinite;
+      }
+      @keyframes md3-spin {
+        to { transform: rotate(360deg); }
+      }
+      #app-loader .label {
+        font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
+        color: var(--loader-fg);
+        letter-spacing: .2px;
+        opacity: .85;
+        -webkit-user-select: none;
+                user-select: none;
+      }
+      /* 当被移除或隐藏时可渐隐（由应用控制） */
+      body.app-loaded #app-loader { opacity: 0; pointer-events: none; }
+    </style>
    <script defer src="https://umami.wuyuan.dev/script.js" data-website-id="e3f8ed7a-4db4-4081-aaf4-45396b1f479c"></script>
  </head>
  <body>
+    <!-- 应用加载前显示的覆盖层：纯 CSS，无脚本依赖 -->
+    <div id="app-loader" aria-live="polite" aria-busy="true">
+      <div class="md3-loader">
+        <div class="spinner" role="progressbar" aria-label="正在加载"></div>
+      </div>
+    </div>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" style="display: none;">浙ICP备2024068645号-4</a>
--- a/src/main.js
+++ b/src/main.js
@ -28,3 +28,21 @@ app.use(messageService);
 app.component('GlobalMessage', GlobalMessage)

 app.mount('#app')
+
+// 移除首屏 CSS 加载覆盖层（在 Vue 挂载完成后）
+try {
+	const removeLoader = () => {
+		document.body.classList.add('app-loaded');
+		const el = document.getElementById('app-loader');
+		if (!el) return;
+		// 与 CSS 过渡对齐，稍等再移除节点，避免闪烁
+		setTimeout(() => el.remove(), 220);
+	};
+	if (document.readyState === 'complete' || document.readyState === 'interactive') {
+		removeLoader();
+	} else {
+		window.addEventListener('DOMContentLoaded', removeLoader, { once: true });
+	}
+} catch {
+	// 安全失败：即便移除失败也不影响应用
+}