diff --git a/loading.html b/loading.html
new file mode 100644
index 0000000..d919032
--- /dev/null
+++ b/loading.html
@@ -0,0 +1,197 @@
+
+
+
+
+
%VITE_APP_TITLE%
+
载入中
+
diff --git a/public/loading.css b/public/loading.css
deleted file mode 100755
index f9a8a12..0000000
--- a/public/loading.css
+++ /dev/null
@@ -1,92 +0,0 @@
-#app {
- height: 100%;
-}
-
-.fantastic-admin-home {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 10000;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- color: #736477;
- user-select: none;
- background-color: snow;
-}
-
-.fantastic-admin-home .loading {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- width: 40px;
- height: 40px;
-}
-
-.fantastic-admin-home .loading .square {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 20px;
- height: 20px;
-}
-
-.fantastic-admin-home .loading .square::before {
- width: 10px;
- height: 10px;
- content: "";
- border: 3px solid #8c858f;
- border-radius: 15%;
- animation: square-to-dot-animation 2s linear infinite;
-}
-
-.fantastic-admin-home .loading .square:nth-child(1)::before {
- animation-delay: calc(150ms * 1);
-}
-
-.fantastic-admin-home .loading .square:nth-child(2)::before {
- animation-delay: calc(150ms * 2);
-}
-
-.fantastic-admin-home .loading .square:nth-child(3)::before {
- animation-delay: calc(150ms * 3);
-}
-
-.fantastic-admin-home .loading .square:nth-child(4)::before {
- animation-delay: calc(150ms * 4);
-}
-
-@keyframes square-to-dot-animation {
- 15%,
- 25% {
- width: 0;
- height: 0;
- margin: 5px;
- border-width: 5px;
- border-radius: 100%;
- }
-
- 40% {
- width: 10px;
- height: 10px;
- margin: initial;
- border-width: 3px;
- border-radius: 15%;
- }
-}
-
-.fantastic-admin-home .text {
- position: relative;
- margin-top: 20px;
- font-size: 24px;
-}
-
-.fantastic-admin-home .text::after {
- position: absolute;
- padding-left: 5px;
- content: "…";
-}
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index add36b2..af2b39e 100755
--- a/src/assets/styles/globals.css
+++ b/src/assets/styles/globals.css
@@ -91,6 +91,10 @@ body {
box-sizing: inherit;
}
+#app {
+ height: 100%;
+}
+
/* 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width] */
[data-fixed-calc-width] {
position: fixed;
diff --git a/vite/plugins.ts b/vite/plugins.ts
index 7941683..48f3f06 100644
--- a/vite/plugins.ts
+++ b/vite/plugins.ts
@@ -124,6 +124,35 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
}
})(),
+ {
+ name: 'vite-plugin-loading',
+ enforce: 'pre',
+ transformIndexHtml: {
+ handler: async html => html.replace(/<\/body>/, `${
+ `
${await fs.readFileSync(path.resolve(process.cwd(), 'loading.html'), 'utf8')}
`
+ }`),
+ order: 'pre',
+ },
+ transform: (code, id) => {
+ if (/src\/main.ts$/.test(id)) {
+ code = code.concat(`
+ const loadingEl = document.querySelector('[data-app-loading]')
+ if (loadingEl) {
+ loadingEl.style['pointer-events'] = 'none'
+ loadingEl.style.visibility = 'hidden'
+ loadingEl.style.opacity = 0
+ loadingEl.style.transition = 'all 0.5s ease-out'
+ loadingEl.addEventListener('transitionend', () => loadingEl.remove(), { once: true })
+ }
+ `)
+ return {
+ code,
+ map: null,
+ }
+ }
+ },
+ },
+
// https://github.com/unplugin/unplugin-turbo-console
TurboConsole(),
@@ -138,6 +167,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
{
name: 'vite-plugin-debug-plugin',
+ enforce: 'pre',
transform: (code, id) => {
if (/src\/main.ts$/.test(id)) {
if (viteEnv.VITE_APP_DEBUG_TOOL === 'eruda') {
@@ -162,6 +192,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
{
name: 'vite-plugin-disable-devtool',
+ enforce: 'pre',
transform: (code, id) => {
if (/src\/main.ts$/.test(id)) {
if (viteEnv.VITE_APP_DISABLE_DEVTOOL === 'true') {