diff --git a/index.html b/index.html index be0f0d683..6b2492160 100644 --- a/index.html +++ b/index.html @@ -3,25 +3,12 @@ - <%= appName %>
-
- -
-
-
-
-
-
-
-
-
<%= appTitle %>
-
- +
diff --git a/public/resource/loading.css b/public/resource/loading.css deleted file mode 100644 index 4f2a1bdb1..000000000 --- a/public/resource/loading.css +++ /dev/null @@ -1,91 +0,0 @@ -.loading-container { - position: fixed; - left: 0; - top: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; -} - -.loading-svg { - width: 128px; - height: 128px; - color: var(--primary-color); -} - -.loading-spin__container { - width: 56px; - height: 56px; - margin: 36px 0; -} - -.loading-spin { - position: relative; - height: 100%; - animation: loadingSpin 1s linear infinite; -} - -.left-0 { - left: 0; -} -.right-0 { - right: 0; -} -.top-0 { - top: 0; -} -.bottom-0 { - bottom: 0; -} - -.loading-spin-item { - position: absolute; - height: 16px; - width: 16px; - background-color: var(--primary-color); - border-radius: 8px; - -webkit-animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; - animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -@keyframes loadingSpin { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes loadingPulse { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: .5; - } -} - -.loading-delay-500 { - -webkit-animation-delay: 500ms; - animation-delay: 500ms; -} -.loading-delay-1000 { - -webkit-animation-delay: 1000ms; - animation-delay: 1000ms; -} -.loading-delay-1500 { - -webkit-animation-delay: 1500ms; - animation-delay: 1500ms; -} - -.loading-title { - font-size: 28px; - font-weight: 500; - color: #646464; -} diff --git a/public/resource/loading.js b/public/resource/loading.js deleted file mode 100644 index f9aa943d9..000000000 --- a/public/resource/loading.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * 初始化加载效果的svg格式logo - * @param {string} id - 元素id - */ -function initSvgLogo(id) { - const svgStr = ` - - - - - - `; - const appEl = document.querySelector(id); - const div = document.createElement('div'); - div.innerHTML = svgStr; - if (appEl) { - appEl.appendChild(div); - } -} - -function addThemeColorCssVars() { - const key = '__THEME_COLOR__'; - const defaultColor = '#1890ff'; - const themeColor = window.localStorage.getItem(key) || defaultColor; - const cssVars = `--primary-color: ${themeColor}`; - document.documentElement.style.cssText = cssVars; -} - -addThemeColorCssVars(); - -initSvgLogo('#loadingLogo'); diff --git a/src/components/common/AppLoading.vue b/src/components/common/AppLoading.vue new file mode 100644 index 000000000..836dcb796 --- /dev/null +++ b/src/components/common/AppLoading.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index 6a81dfb80..61517e215 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,6 @@ import { createApp } from 'vue'; import App from './App.vue'; +import AppLoading from './components/common/AppLoading.vue'; import { setupDirectives } from './directives'; import { setupRouter } from './router'; import { setupAssets } from './plugins'; @@ -10,6 +11,11 @@ async function setupApp() { // import assets: js、css setupAssets(); + // app loading + const appLoading = createApp(AppLoading); + + appLoading.mount('#appLoading'); + const app = createApp(App); // store plugin: pinia