usePlatformInfo.ts
3.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { getPlatForm } from '/@/api/oem';
import lightThemeBgImage from '/@/assets/svg/login-bg.svg';
import darkThemeBgImage from '/@/assets/svg/login-bg-dark.svg';
import { createStorage } from '/@/utils/cache';
import { Platform } from '/@/api/oem/model';
import { PLATFORM_INFO_CACHE_KEY } from '/@/enums/cacheEnum';
import { useUserStore } from '/@/store/modules/user';
enum DefaultPlatform {
LOGO = '/resource/img/logo.png',
// TITLE = 'ThingsKit',
ICO = '/favicon.ico',
}
const storage = createStorage();
export const getPlatFormInfo = () => storage.get(PLATFORM_INFO_CACHE_KEY) as Platform;
export const setPlatFormInfo = (info: Recordable) => storage.set(PLATFORM_INFO_CACHE_KEY, info);
export const usePlatform = async () => {
const platformInfo = (await getPlatForm()) || {};
const userStore = useUserStore();
userStore.setPlatInfo(platformInfo);
setPlatFormInfo(platformInfo);
const createLoadingEffect = () => {
const wrap = document.createElement('div');
wrap.setAttribute('class', 'app-loading-wrap');
const img = document.createElement('img');
img.setAttribute('src', platformInfo.logo || DefaultPlatform.LOGO);
img.setAttribute('class', 'app-loading-logo');
img.setAttribute('alt', 'Logo');
const dots = document.createElement('div');
dots.setAttribute('class', 'app-loading-dots');
const dotWrap = document.createElement('span');
dotWrap.setAttribute('class', 'dot dot-spin');
for (let i = 0; i < 4; i++) {
dotWrap.appendChild(document.createElement('i'));
}
const title = document.createElement('div');
title.setAttribute('class', 'app-loading-title');
const textNode = document.createTextNode(
platformInfo.name || import.meta.env.VITE_GLOB_APP_TITLE
);
title.appendChild(textNode);
wrap.appendChild(img);
dots.appendChild(dotWrap);
wrap.appendChild(dots);
wrap.appendChild(title);
return wrap;
};
const replaceSiteIco = () => {
const linkEl = document.querySelectorAll('link[rel*="icon"]');
linkEl.forEach((item) => {
item.setAttribute('href', platformInfo.icon || DefaultPlatform.ICO);
});
};
const replaceLoadingEffect = () => {
const loadingWrapper = document.getElementById('first-screen-loading');
loadingWrapper!.innerHTML = '';
loadingWrapper?.appendChild(createLoadingEffect());
};
const setBackgroundImage = () => {
const { background } = platformInfo;
const styleEl = document.createElement('style');
styleEl.innerHTML = `
.vben-login::before{
background-image:url("${background || lightThemeBgImage}");
position:absolute;
background-size: ${background ? '100%' : 'auto'} 100% !important;
margin-left: ${background ? 0 : '-48%'} !important;
}
html[data-theme='dark'] .vben-login::before{
background-image:url("${background || darkThemeBgImage}");
position:absolute;
background-size: ${background ? '100%' : 'auto'} 100% !important;
margin-left: ${background ? 0 : '-48%'} !important;
}
`;
document.head.appendChild(styleEl);
};
const setTitle = () => {
if (!platformInfo.name) return;
document.title = platformInfo.name || '';
};
const bootstrap = () => {
replaceSiteIco();
replaceLoadingEffect();
setBackgroundImage();
setTitle();
};
bootstrap();
};