bichangxiong/ruoyi-plus-vben5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: Improve the global loading display

Browse Source
This commit is contained in:
vben
2024-06-02 23:50:58 +08:00
parent e650a0b863
commit 77d40dc763
14 changed files with 111 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
internal/vite-config/src/plugins/inject-app-loading/index.ts
View File

@@ -14,14 +14,14 @@ async function viteInjectAppLoadingPlugin(
): Promise<PluginOption | undefined> {
const loadingHtml = await getLoadingRawByHtmlTemplate();
const envRaw = isBuild ? 'prod' : 'dev';
const cacheName = `'__${env.VITE_APP_NAMESPACE}-${envRaw}-theme__'`;
const cacheName = `'${env.VITE_APP_NAMESPACE}-${envRaw}-preferences-theme'`;
// 获取缓存的主题
// 保证黑暗主题下，刷新页面时，loading也是黑暗主题
const injectScript = `
<script>
<script data-app-loading="inject-js">
var theme = localStorage.getItem(${cacheName});
document.documentElement.classList.toggle('dark', theme === 'dark');
document.documentElement.classList.toggle('dark', /dark/.test(theme));
</script>
`;
@@ -34,11 +34,8 @@ async function viteInjectAppLoadingPlugin(
name: 'vite:inject-app-loading',
transformIndexHtml: {
handler(html) {
const re = /<div\s*id\s*=\s*"app"\s*>(\s*)<\/div>/;
html = html.replace(
re,
`<div id="app">${injectScript}${loadingHtml}</div>`,
);
const re = /<body\s*>/;
html = html.replace(re, `<body>${injectScript}${loadingHtml}`);
return html;
},
order: 'pre',

14
internal/vite-config/src/plugins/inject-app-loading/loading-antd.html
View File

@@ -1,4 +1,4 @@
<style>
<style data-app-loading="inject-css">
html {
/* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
line-height: 1.15;
@@ -13,6 +13,10 @@
}
.loading {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
@@ -22,6 +26,12 @@
background-color: #f4f7f9;
}
.loading.hidden {
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
}
.loading .dots {
display: flex;
align-items: center;
@@ -96,7 +106,7 @@
}
}
</style>
<div class="loading">
<div class="loading" id="__app-loading__">
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
<div class="title"><%= VITE_GLOB_APP_TITLE %></div>
</div>

13
internal/vite-config/src/plugins/inject-app-loading/loading.html
View File

@@ -1,4 +1,4 @@
<style>
<style data-app-loading="inject-css">
html {
/* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
line-height: 1.15;
@@ -8,6 +8,7 @@
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
@@ -15,6 +16,14 @@
width: 100%;
height: 100%;
background-color: #f4f7f9;
/* transition: all 0.8s ease-out; */
}
.loading.hidden {
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
}
.dark .loading {
@@ -96,7 +105,7 @@
}
}
</style>
<div class="loading">
<div class="loading" id="__app-loading__">
<div class="loader"></div>
<div class="title"><%= VITE_GLOB_APP_TITLE %></div>
</div>