mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-07 05:02:45 +08:00
362 lines
12 KiB
HTML
362 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" style="
|
|
overflow: hidden auto;
|
|
min-block-size: 100vh;
|
|
min-block-size: 100dvh;
|
|
--safe-area-inset-bottom: env(safe-area-inset-bottom);
|
|
--safe-area-inset-top: env(safe-area-inset-top);
|
|
background: var(--initial-loader-bg, #fff);
|
|
">
|
|
|
|
<head>
|
|
<title>MoviePilot</title>
|
|
<meta charset="UTF-8" />
|
|
<!-- 核心viewport设置 - 针对PWA优化 -->
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover, shrink-to-fit=no, interactive-widget=resizes-content" />
|
|
|
|
<!-- 防止缩放和选择，提供原生应用体验 -->
|
|
<meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
|
|
|
|
<!-- 基础信息 -->
|
|
<meta name="description" content="MoviePilot - 智能影视媒体库管理工具" />
|
|
<meta name="author" content="MoviePilot" />
|
|
<meta name="keywords" content="MoviePilot,影视,媒体库,管理" />
|
|
|
|
<!-- 安全和隐私 -->
|
|
<meta name="Robots" content="noindex,nofollow,noarchive" />
|
|
<meta name="referrer" content="no-referrer" />
|
|
|
|
<!-- PWA - 基础图标 -->
|
|
<link rel="icon" type="image/png" href="/favicon.ico" />
|
|
<link rel="icon" type="image/png" href="/logo.png" sizes="any" />
|
|
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
|
|
|
<!-- iOS Safari PWA 优化 -->
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
|
|
<link rel="apple-touch-startup-image" href="/splash/apple-splash.png" />
|
|
|
|
<!-- iOS Safari 全屏模式 -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="apple-mobile-web-app-title" content="MoviePilot" />
|
|
|
|
<!-- iOS Safari 防止自动识别 -->
|
|
<meta name="apple-mobile-web-app-orientations" content="portrait" />
|
|
|
|
<!-- Android Chrome PWA 优化 -->
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="mobile-web-app-title" content="MoviePilot" />
|
|
|
|
<!-- Microsoft Windows PWA -->
|
|
<meta name="msapplication-TileColor" content="#0E1116" />
|
|
<meta name="msapplication-TileImage" content="/android-chrome-192x192.png" />
|
|
<meta name="msapplication-config" content="none" />
|
|
<meta name="msapplication-tap-highlight" content="no" />
|
|
<meta name="msapplication-navbutton-color" content="#0E1116" />
|
|
|
|
<!-- 主题色彩 - 适配深色和浅色模式 -->
|
|
<meta name="theme-color" content="#0E1116" media="(prefers-color-scheme: dark)" />
|
|
<meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)" />
|
|
<meta name="color-scheme" content="dark light" />
|
|
|
|
<!-- 屏幕方向锁定 -->
|
|
<meta name="screen-orientation" content="portrait" />
|
|
<meta name="x5-orientation" content="portrait" />
|
|
<meta name="x5-fullscreen" content="true" />
|
|
<meta name="x5-page-mode" content="app" />
|
|
|
|
<!-- UC浏览器优化 -->
|
|
<meta name="browsermode" content="application" />
|
|
<meta name="wap-font-scale" content="no" />
|
|
|
|
<!-- 360浏览器优化 -->
|
|
<meta name="renderer" content="webkit" />
|
|
|
|
<!-- 触摸优化 -->
|
|
<meta name="HandheldFriendly" content="True" />
|
|
<meta name="MobileOptimized" content="320" />
|
|
|
|
<!-- 缓存控制 -->
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
|
|
<!-- DNS预解析和预连接 -->
|
|
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
|
|
<link rel="dns-prefetch" href="//cdn.jsdelivr.net" />
|
|
<link rel="dns-prefetch" href="//image.tmdb.org" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
|
|
|
<style>
|
|
#app {
|
|
min-block-size: 100%;
|
|
-webkit-overflow-scrolling: touch;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
#loading-bg {
|
|
position: fixed;
|
|
z-index: 99999;
|
|
display: block;
|
|
background: var(--initial-loader-bg, #fff);
|
|
block-size: 100vh;
|
|
inline-size: 100vw;
|
|
transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
|
|
}
|
|
|
|
.loading-logo {
|
|
position: absolute;
|
|
inset-block-start: 35%;
|
|
inset-inline-start: calc(50% - 5rem);
|
|
transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
|
|
}
|
|
|
|
.loading-complete .loading-logo {
|
|
filter: blur(10px);
|
|
opacity: 0;
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
.loading-complete {
|
|
filter: blur(15px);
|
|
opacity: 0;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.loading {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
border: 3px solid transparent;
|
|
border-radius: 50%;
|
|
block-size: 55px;
|
|
inline-size: 55px;
|
|
inset-block-start: 80%;
|
|
inset-inline-start: calc(50% - 27.5px);
|
|
transition: opacity 0.6s ease;
|
|
}
|
|
|
|
.loading-complete .loading {
|
|
opacity: 0;
|
|
}
|
|
|
|
.loading .effect-1,
|
|
.loading .effect-2,
|
|
.loading .effect-3 {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
border: 3px solid transparent;
|
|
border-radius: 50%;
|
|
block-size: 100%;
|
|
border-inline-start: 3px solid var(--initial-loader-color, #eee);
|
|
inline-size: 100%;
|
|
}
|
|
|
|
.loading .effect-1 {
|
|
animation: rotate 1s ease infinite;
|
|
}
|
|
|
|
.loading .effect-2 {
|
|
animation: rotate-opacity 1s ease infinite 0.1s;
|
|
}
|
|
|
|
.loading .effect-3 {
|
|
animation: rotate-opacity 1s ease infinite 0.2s;
|
|
}
|
|
|
|
.loading .effects {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-opacity {
|
|
0% {
|
|
opacity: 0.1;
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
|
|
/* 超时通知样式 */
|
|
#loading-timeout {
|
|
position: absolute;
|
|
z-index: 2500;
|
|
display: none;
|
|
inset-block-end: 20px;
|
|
inset-inline-start: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 0, 0, 0.8);
|
|
color: #fff;
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
font-family: sans-serif;
|
|
text-align: center;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
white-space: nowrap;
|
|
backdrop-filter: blur(4px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
#timeout-btn {
|
|
color: var(--initial-loader-color, #9155FD);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
margin-inline-start: 8px;
|
|
border-bottom: 1px solid var(--initial-loader-color, #9155FD);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// 检测系统主题是否为深色模式
|
|
function checkPrefersColorSchemeIsDark() {
|
|
try {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
} catch (e) {
|
|
return false
|
|
}
|
|
}
|
|
|
|
// 主题色彩初始化
|
|
let loaderColor = localStorage.getItem('materio-initial-loader-bg')
|
|
let primaryColor = localStorage.getItem('materio-initial-loader-color')
|
|
|
|
// 检查主题设置
|
|
const savedTheme = localStorage.getItem('theme') || 'auto'
|
|
const isAutoTheme = savedTheme === 'auto'
|
|
|
|
// 如果是自动主题或者没有保存的背景色，根据系统主题设置背景色
|
|
if (isAutoTheme || !loaderColor) {
|
|
loaderColor = checkPrefersColorSchemeIsDark() ? '#0E1116' : '#FFFFFF'
|
|
}
|
|
if (!primaryColor) {
|
|
primaryColor = '#9155FD'
|
|
}
|
|
|
|
// 应用主题色彩
|
|
document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
|
|
document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
|
|
|
|
// 状态栏适配
|
|
if (window.navigator.standalone) {
|
|
document.documentElement.style.setProperty('--status-bar-height', '20px')
|
|
}
|
|
|
|
// 安全区域适配
|
|
function updateSafeArea() {
|
|
const safeAreaTop = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')
|
|
const safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)',
|
|
)
|
|
|
|
if (safeAreaTop) document.documentElement.style.setProperty('--safe-area-top', safeAreaTop)
|
|
if (safeAreaBottom) document.documentElement.style.setProperty('--safe-area-bottom', safeAreaBottom)
|
|
}
|
|
|
|
updateSafeArea()
|
|
window.addEventListener('resize', updateSafeArea)
|
|
window.addEventListener('orientationchange', updateSafeArea)
|
|
|
|
// 清除缓存处理逻辑
|
|
window.clearAndReload = async function() {
|
|
try {
|
|
// 1. 清除所有缓存
|
|
if ('caches' in window) {
|
|
const cacheNames = await caches.keys()
|
|
await Promise.all(cacheNames.map(name => caches.delete(name)))
|
|
console.log('[VersionChecker] 已清除所有缓存')
|
|
}
|
|
// 2. 注销 Service Worker
|
|
if ('serviceWorker' in navigator) {
|
|
const registrations = await navigator.serviceWorker.getRegistrations()
|
|
await Promise.all(registrations.map(registration => registration.unregister()))
|
|
console.log('[VersionChecker] 已注销所有 Service Worker')
|
|
}
|
|
} catch (e) {
|
|
console.error('[VersionChecker] 清除缓存时出错:', e)
|
|
} finally {
|
|
// 3. 重载页面
|
|
const url = new URL(window.location.href)
|
|
url.searchParams.set('_t', Date.now().toString())
|
|
window.location.replace(url.pathname + url.search + url.hash)
|
|
}
|
|
};
|
|
|
|
setTimeout(function() {
|
|
const timeoutEl = document.getElementById('loading-timeout');
|
|
if (timeoutEl) {
|
|
// 适配多语言
|
|
const lang = navigator.language || 'zh-CN';
|
|
const messages = {
|
|
'zh-CN': {
|
|
text: '页面加载似乎遇到了阻碍，请尝试',
|
|
btn: '清除缓存'
|
|
},
|
|
'zh-TW': {
|
|
text: '頁面載入似乎遇到了阻礙，請嘗試',
|
|
btn: '清除快取'
|
|
},
|
|
'en-US': {
|
|
text: 'Page loading seems to be blocked, please try',
|
|
btn: 'Clear Cache'
|
|
}
|
|
};
|
|
|
|
// 默认匹配前缀，如 en-GB 匹配 en-US 的逻辑
|
|
let msg = messages['zh-CN'];
|
|
if (lang.startsWith('zh-TW') || lang.startsWith('zh-HK')) {
|
|
msg = messages['zh-TW'];
|
|
} else if (lang.startsWith('en')) {
|
|
msg = messages['en-US'];
|
|
}
|
|
|
|
const textNode = document.createTextNode(msg.text + ' ');
|
|
const btnLink = document.createElement('a');
|
|
btnLink.href = 'javascript:void(0)';
|
|
btnLink.id = 'timeout-btn';
|
|
btnLink.onclick = window.clearAndReload;
|
|
btnLink.textContent = msg.btn;
|
|
|
|
timeoutEl.innerHTML = '';
|
|
timeoutEl.appendChild(textNode);
|
|
timeoutEl.appendChild(btnLink);
|
|
timeoutEl.style.display = 'block';
|
|
}
|
|
}, 15000); // 15秒后显示超时提示
|
|
</script>
|
|
</head>
|
|
|
|
<body style="margin: 0; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch">
|
|
<div id="loading-bg">
|
|
<div class="loading-logo">
|
|
<!-- Logo -->
|
|
<img src="/logo.svg" alt="MoviePilot" width="160px" height="160px" />
|
|
</div>
|
|
<div class="loading">
|
|
<div class="effect-1 effects"></div>
|
|
<div class="effect-2 effects"></div>
|
|
<div class="effect-3 effects"></div>
|
|
</div>
|
|
<!-- 超时提示 - 默认隐藏 -->
|
|
<div id="loading-timeout"></div>
|
|
</div>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
|
|
</html> |