57 lines
1.6 KiB
HTML
57 lines
1.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<title>%VITE_APP_TITLE%</title>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<meta name="description" content="Vue3 + Vite + TypeScript + Element-Plus 的后台管理模板" />
|
||
|
|
<meta
|
||
|
|
name="keywords"
|
||
|
|
content="vue,element-plus,typescript,vue-element-admin,vue3-element-admin"
|
||
|
|
/>
|
||
|
|
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* 防止 Vue 加载前出现白屏：背景色与主题初始 class 同步 */
|
||
|
|
html {
|
||
|
|
background-color: #fafbfc;
|
||
|
|
}
|
||
|
|
|
||
|
|
html.dark {
|
||
|
|
background-color: #070707;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
/**
|
||
|
|
* 在 Vue 挂载前同步主题 class。
|
||
|
|
*
|
||
|
|
* Vue 初始化后 useTheme 会接管主题管理，
|
||
|
|
* 但在此之前若用户之前选择了暗色主题，html 缺少 "dark" class 会导致闪烁。
|
||
|
|
* 此处直接从 localStorage 读取主题偏好并提前设置 class。
|
||
|
|
*
|
||
|
|
* key "sys-theme" 须与 StorageConfig.THEME_KEY 保持一致。
|
||
|
|
*/
|
||
|
|
(function () {
|
||
|
|
try {
|
||
|
|
if (typeof Storage === "undefined" || !window.localStorage) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const themeType = localStorage.getItem("sys-theme");
|
||
|
|
if (themeType === "dark") {
|
||
|
|
document.documentElement.classList.add("dark");
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
console.warn("Failed to apply initial theme:", e);
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="app"></div>
|
||
|
|
<script type="module" src="/src/main.ts"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|