changeTheme.ts
1.98 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
import { Notification } from '@arco-design/web-vue';
import {useThemeStore} from "@/store";
const themeStore = useThemeStore()
/**
* 修改主题包
* @param data 主题参数
*/
export const updateLinkTag = function (data: any): Promise<boolean> {
const cssUrl = `${data.unpkgHost}${data.packageName}/css/arco.css`;
return new Promise((resolve, reject) => {
// 删除旧的 link 标签
let oldLinkTag = document.getElementById('pro-custom-theme') as HTMLLinkElement | null;
if (oldLinkTag) {
oldLinkTag.parentNode?.removeChild(oldLinkTag);
}
// 创建新的 link 标签
const linkTag = document.createElement('link');
linkTag.rel = 'stylesheet';
linkTag.id = 'pro-custom-theme';
linkTag.type = 'text/css';
linkTag.href = data.unpkgHost ? cssUrl : "";
// 监测下载完成
linkTag.onload = () => {
themeStore.updateThemePackage(data);
resolve(true);
};
// 监测下载失败
linkTag.onerror = () => {
console.log('下载失败');
reject(false);
};
// 将新的 link 标签添加到 body 标签中
document.body.appendChild(linkTag);
});
}
/**
* 切换主题包
* @param themesData 主题参数
*/
export const changeTheme = async function (themesData: any): Promise<boolean> {
// 显示切换主题的通知
Notification.info({
title: '正在切换主题',
content: '',
id: 'your_id',
});
try {
const result = await updateLinkTag(themesData);
Notification.success({
id: 'your_id',
title: '安装主题',
content: '主题安装成功',
});
return result;
} catch (error) {
Notification.error({
id: 'your_id',
title: '安装主题',
content: '主题安装失败,请稍候重试',
});
return false;
}
};
export const resetTheme = function () {
const localTheme = themeStore.themePackage;
if (localTheme) {
let oldLinkTag = document.getElementById('pro-custom-theme') as HTMLLinkElement | null;
if (oldLinkTag) {
oldLinkTag.parentNode?.removeChild(oldLinkTag);
themeStore.resetThemePackage();
}
}
}