GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-06 16:16:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 HTML 结构，调整 CSS 样式

Browse Source
This commit is contained in:
jxxghp
2025-08-25 13:03:45 +08:00
parent 262927e459
commit 4c64f7a2c3
6 changed files with 337 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+322 -383
View File
@@ -1,430 +1,369 @@
<!DOCTYPE html> <!DOCTYPE html>
<html <html lang="zh-CN" style="
lang="zh-CN"
style="
overflow: hidden auto; overflow: hidden auto;
min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom)); min-block-size: 100vh;
min-block-size: 100dvh;
--safe-area-inset-bottom: env(safe-area-inset-bottom); --safe-area-inset-bottom: env(safe-area-inset-bottom);
--safe-area-inset-top: env(safe-area-inset-top); --safe-area-inset-top: env(safe-area-inset-top);
background: var(--initial-loader-bg, #fff); 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"
/>
<!-- 防止缩放和选择，提供原生应用体验 --> <head>
<meta name="format-detection" content="telephone=no, date=no, email=no, address=no" /> <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" />
<!-- 基础信息 --> <!-- 防止缩放和选择，提供原生应用体验 -->
<meta name="description" content="MoviePilot - 智能影视媒体库管理工具" /> <meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
<meta name="author" content="MoviePilot" />
<meta name="keywords" content="MoviePilot,影视,媒体库,管理" />
<!-- 安全和隐私 --> <!-- 基础信息 -->
<meta name="Robots" content="noindex,nofollow,noarchive" /> <meta name="description" content="MoviePilot - 智能影视媒体库管理工具" />
<meta name="referrer" content="no-referrer" /> <meta name="author" content="MoviePilot" />
<meta name="keywords" content="MoviePilot,影视,媒体库,管理" />
<!-- PWA - 基础图标 --> <!-- 安全和隐私 -->
<link rel="icon" type="image/png" href="/favicon.ico" /> <meta name="Robots" content="noindex,nofollow,noarchive" />
<link rel="icon" type="image/png" href="/logo.png" sizes="any" /> <meta name="referrer" content="no-referrer" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<!-- iOS Safari PWA 优化 --> <!-- PWA - 基础图标 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="icon" type="image/png" href="/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" /> <link rel="icon" type="image/png" href="/logo.png" sizes="any" />
<link rel="apple-touch-startup-image" href="/splash/apple-splash.png" /> <link rel="icon" type="image/svg+xml" href="/logo.svg" />
<!-- iOS Safari 全屏模式 --> <!-- iOS Safari PWA 优化 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />
<meta name="apple-mobile-web-app-title" content="MoviePilot" /> <link rel="apple-touch-startup-image" href="/splash/apple-splash.png" />
<!-- iOS Safari 防止自动识别 --> <!-- iOS Safari 全屏模式 -->
<meta name="apple-mobile-web-app-orientations" content="portrait" /> <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" />
<!-- Android Chrome PWA 优化 --> <!-- iOS Safari 防止自动识别 -->
<meta name="mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-orientations" content="portrait" />
<meta name="mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="mobile-web-app-title" content="MoviePilot" />
<!-- Microsoft Windows PWA --> <!-- Android Chrome PWA 优化 -->
<meta name="msapplication-TileColor" content="#0E1116" /> <meta name="mobile-web-app-capable" content="yes" />
<meta name="msapplication-TileImage" content="/android-chrome-192x192.png" /> <meta name="mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="msapplication-config" content="none" /> <meta name="mobile-web-app-title" content="MoviePilot" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="msapplication-navbutton-color" content="#0E1116" />
<!-- 主题色彩 - 适配深色和浅色模式 --> <!-- Microsoft Windows PWA -->
<meta name="theme-color" content="#0E1116" media="(prefers-color-scheme: dark)" /> <meta name="msapplication-TileColor" content="#0E1116" />
<meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)" /> <meta name="msapplication-TileImage" content="/android-chrome-192x192.png" />
<meta name="color-scheme" content="dark light" /> <meta name="msapplication-config" content="none" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="msapplication-navbutton-color" content="#0E1116" />
<!-- 屏幕方向锁定 --> <!-- 主题色彩 - 适配深色和浅色模式 -->
<meta name="screen-orientation" content="portrait" /> <meta name="theme-color" content="#0E1116" media="(prefers-color-scheme: dark)" />
<meta name="x5-orientation" content="portrait" /> <meta name="theme-color" content="#F4F5FA" media="(prefers-color-scheme: light)" />
<meta name="x5-fullscreen" content="true" /> <meta name="color-scheme" content="dark light" />
<meta name="x5-page-mode" content="app" />
<!-- UC浏览器优化 --> <!-- 屏幕方向锁定 -->
<meta name="browsermode" content="application" /> <meta name="screen-orientation" content="portrait" />
<meta name="wap-font-scale" content="no" /> <meta name="x5-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="x5-page-mode" content="app" />
<!-- 360浏览器优化 --> <!-- UC浏览器优化 -->
<meta name="renderer" content="webkit" /> <meta name="browsermode" content="application" />
<meta name="wap-font-scale" content="no" />
<!-- 触摸优化 --> <!-- 360浏览器优化 -->
<meta name="HandheldFriendly" content="True" /> <meta name="renderer" content="webkit" />
<meta name="MobileOptimized" content="320" />
<!-- 缓存控制 --> <!-- 触摸优化 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta name="HandheldFriendly" content="True" />
<meta http-equiv="Pragma" content="no-cache" /> <meta name="MobileOptimized" content="320" />
<meta http-equiv="Expires" content="0" />
<!-- DNS预解析和预连接 --> <!-- 缓存控制 -->
<link rel="dns-prefetch" href="//fonts.googleapis.com" /> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<link rel="dns-prefetch" href="//cdn.jsdelivr.net" /> <meta http-equiv="Pragma" content="no-cache" />
<link rel="dns-prefetch" href="//image.tmdb.org" /> <meta http-equiv="Expires" content="0" />
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<!-- 预加载关键资源 --> <!-- DNS预解析和预连接 -->
<link rel="preload" href="/logo.png" as="image" /> <link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="modulepreload" href="/src/main.ts" /> <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 />
<!-- 内联关键CSS --> <!-- 预加载关键资源 -->
<style> <link rel="preload" href="/logo.png" as="image" />
/* 关键路径CSS - 从loader.css内联 */ <link rel="modulepreload" href="/src/main.ts" />
#loading-bg {
position: fixed; <!-- 内联关键CSS -->
z-index: 99999; <style>
display: block; /* 关键路径CSS - 从loader.css内联 */
background: var(--initial-loader-bg, #fff); #loading-bg {
block-size: 100vh; position: fixed;
inline-size: 100vw; z-index: 99999;
transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease; 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;
}
/* 添加logo完成动画 - 放大虚化效果 */
.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);
} }
.loading-logo { 100% {
position: absolute; transform: rotate(1turn);
inset-block-start: 35%; }
inset-inline-start: calc(50% - 5rem); }
transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
@keyframes rotate-opacity {
0% {
opacity: 0.1;
transform: rotate(0deg);
} }
/* 添加logo完成动画 - 放大虚化效果 */ 100% {
.loading-complete .loading-logo { opacity: 1;
filter: blur(10px); transform: rotate(1turn);
opacity: 0;
transform: scale(1.5);
} }
}
</style>
/* 添加加载背景消失动画 - 放大虚化效果 */ <!-- 初始化脚本 -->
.loading-complete { <script>
filter: blur(15px); // 检测系统主题是否为深色模式
opacity: 0; function checkPrefersColorSchemeIsDark() {
transform: scale(1.2); try {
return window.matchMedia('(prefers-color-scheme: dark)').matches
} catch (e) {
return false
} }
}
.loading { // 主题色彩初始化
position: absolute; let loaderColor = localStorage.getItem('materio-initial-loader-bg')
box-sizing: border-box; let primaryColor = localStorage.getItem('materio-initial-loader-color')
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 { const savedTheme = localStorage.getItem('theme')
opacity: 0; const isAutoTheme = savedTheme === 'auto'
}
.loading .effect-1, // 如果是自动主题或者没有保存的背景色，根据系统主题设置背景色
.loading .effect-2, if (isAutoTheme || !loaderColor) {
.loading .effect-3 { loaderColor = checkPrefersColorSchemeIsDark() ? '#0E1116' : '#FFFFFF'
position: absolute; }
box-sizing: border-box; if (!primaryColor) {
border: 3px solid transparent; primaryColor = '#9155FD'
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; document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
} document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
.loading .effect-2 { // 状态栏适配
animation: rotate-opacity 1s ease infinite 0.1s; if (window.navigator.standalone) {
} document.documentElement.style.setProperty('--status-bar-height', '20px')
}
.loading .effect-3 { // 安全区域适配
animation: rotate-opacity 1s ease infinite 0.2s; function updateSafeArea() {
} const safeAreaTop = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-top)')
const safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('env(safe-area-inset-bottom)',
)
.loading .effects { if (safeAreaTop) document.documentElement.style.setProperty('--safe-area-top', safeAreaTop)
transition: all 0.3s ease; if (safeAreaBottom) document.documentElement.style.setProperty('--safe-area-bottom', safeAreaBottom)
} }
@keyframes rotate { updateSafeArea()
0% { window.addEventListener('resize', updateSafeArea)
transform: rotate(0deg); window.addEventListener('orientationchange', updateSafeArea)
} </script>
</head>
100% { <body style="margin: 0; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch">
transform: rotate(1turn); <div id="loading-bg">
} <div class="loading-logo">
} <!-- Logo -->
<svg width="160px" height="160px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg"
@keyframes rotate-opacity { style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2">
0% { <g transform="matrix(1,0,0,1,-2606,-236)">
opacity: 0.1; <g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
transform: rotate(0deg); <rect x="0" y="0" width="192" height="192" style="fill: none" />
} <g transform="matrix(-0.800798,0.462341,-0.769972,-1.33363,1869.11,-896.718)">
<path
100% { d="M2241.27,-28.175C2238.86,-28.931 2236.64,-29.181 2234.48,-29.254L2159.78,-29.286L2165.01,-11.207C2167.16,-13.121 2169.64,-13.722 2172.26,-13.808L2222.12,-13.822C2223.52,-13.824 2225,-13.701 2226.78,-13.108L2241.27,-28.175Z"
opacity: 1; style="fill: url(#_Linear1)" />
transform: rotate(1turn); </g>
} <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
} <path
</style> d="M2205.67,331.428L2205.67,332.25L2205.67,352.835C2205.67,354.263 2204.91,355.583 2203.67,356.298C2202.43,357.012 2200.91,357.013 2199.67,356.3L2190.78,351.174C2189.73,350.595 2188.83,350.083 2188.03,349.59L2187.45,349.257C2186.66,348.725 2185.91,348.142 2185.21,347.461C2185.08,347.331 2184.95,347.198 2184.82,347.061C2184.26,346.457 2183.75,345.778 2183.3,344.995C2182.16,343.05 2181.69,341.024 2181.68,338.948L2181.67,268.923L2209.77,274.425C2207.5,275.639 2205.68,278.3 2205.67,281.429L2205.67,331.428Z"
style="fill: url(#_Linear2)" />
<!-- 初始化脚本 --> </g>
<script> <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
// 检测系统主题是否为深色模式 <path
function checkPrefersColorSchemeIsDark() { d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2295.93,363.064C2295.73,363.184 2295.53,363.301 2295.32,363.414L2295.93,363.064Z"
try { style="fill: rgb(141, 81, 249)" />
return window.matchMedia('(prefers-color-scheme: dark)').matches </g>
} catch (e) { <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
return false <path
} d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2299.79,360.238C2299.79,360.238 2320.03,348.464 2320.04,348.461C2323.1,346.372 2324.69,343.444 2325.17,339.877C2325.17,339.877 2325.17,269.846 2325.17,269.839C2325.06,267.482 2324.56,265.739 2323.61,264.133C2322.56,262.445 2321.26,261.005 2319.55,259.97L2304.42,251.217C2303.96,250.949 2303.39,250.948 2302.92,251.216C2302.46,251.484 2302.17,251.979 2302.17,252.515L2302.17,276.775L2302.17,277.879L2302.17,352.926C2302.17,352.933 2302.17,352.941 2302.17,352.948C2302.04,355.861 2301.23,358.279 2299.79,360.238Z"
} style="fill: url(#_Linear3)" />
</g>
// 主题色彩初始化 <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
let loaderColor = localStorage.getItem('materio-initial-loader-bg') <path
let primaryColor = localStorage.getItem('materio-initial-loader-color') d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256Z"
style="fill: rgb(165, 118, 255)" />
// 检查主题设置 </g>
const savedTheme = localStorage.getItem('theme') <g transform="matrix(1,0,0,1,-2157.67,-208.423)">
const isAutoTheme = savedTheme === 'auto' <path
d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256ZM2253.68,223.756C2251.6,223.789 2249.87,224.269 2248.47,224.996L2188.17,259.754C2184.35,261.992 2182.35,265.367 2182.18,269.874C2182.18,269.874 2182.17,292.759 2182.17,292.757C2183.25,290.047 2185.13,288.051 2187.62,286.607L2249.57,250.919C2249.58,250.917 2249.58,250.915 2249.59,250.913C2250.83,250.243 2252.17,249.839 2253.67,249.847C2255.21,249.841 2256.54,250.253 2257.76,250.914C2257.76,250.916 2257.76,250.917 2257.76,250.919L2274.92,260.807C2275.38,261.075 2275.95,261.074 2276.42,260.806C2276.88,260.538 2277.17,260.043 2277.17,259.508L2277.17,237.568C2277.17,236.317 2276.5,235.16 2275.42,234.535C2275.42,234.535 2258.88,225 2258.87,224.996C2256.87,224.049 2255.2,223.746 2253.68,223.756Z"
// 如果是自动主题或者没有保存的背景色，根据系统主题设置背景色 style="fill: url(#_Linear4)" />
if (isAutoTheme || !loaderColor) { </g>
loaderColor = checkPrefersColorSchemeIsDark() ? '#0E1116' : '#FFFFFF' <g transform="matrix(0.800798,0.462341,0.769972,-1.33363,-1677.22,-896.858)">
} <path
if (!primaryColor) { d="M2241.55,-28.184C2239.1,-28.989 2236.83,-29.204 2234.68,-29.295C2234.68,-29.295 2220.82,-29.3 2215.03,-29.303C2213.48,-29.303 2212.05,-28.808 2211.28,-28.004C2208.65,-25.275 2202.56,-18.936 2199.45,-15.709C2199.07,-15.306 2199.07,-14.809 2199.46,-14.406C2199.85,-14.004 2200.57,-13.758 2201.34,-13.761C2208.36,-13.788 2222.72,-13.845 2222.72,-13.845C2223.98,-13.851 2225.44,-13.657 2227.06,-13.117L2241.55,-28.184Z"
primaryColor = '#9155FD' style="fill: rgb(141, 81, 249)" />
} </g>
<g transform="matrix(-4.32309,0,0,12.4454,9610.35,-1450.35)">
// 应用主题色彩 <path
document.documentElement.style.setProperty('--initial-loader-bg', loaderColor) d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z"
document.documentElement.style.setProperty('--initial-loader-color', primaryColor) style="fill: rgb(104, 0, 197)" />
<clipPath id="_clip5">
// 状态栏适配
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)
</script>
</head>
<body style="margin: 0; overflow: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch">
<div id="loading-bg">
<div class="loading-logo">
<!-- Logo -->
<svg
width="160px"
height="160px"
viewBox="0 0 192 192"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2"
>
<g transform="matrix(1,0,0,1,-2606,-236)">
<g id="a2-c" transform="matrix(1,0,0,1,2606,236)">
<rect x="0" y="0" width="192" height="192" style="fill: none" />
<g transform="matrix(-0.800798,0.462341,-0.769972,-1.33363,1869.11,-896.718)">
<path <path
d="M2241.27,-28.175C2238.86,-28.931 2236.64,-29.181 2234.48,-29.254L2159.78,-29.286L2165.01,-11.207C2167.16,-13.121 2169.64,-13.722 2172.26,-13.808L2222.12,-13.822C2223.52,-13.824 2225,-13.701 2226.78,-13.108L2241.27,-28.175Z" d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z" />
style="fill: url(#_Linear1)" </clipPath>
/> <g clip-path="url(#_clip5)">
</g> <g transform="matrix(0.124502,0.074907,0.206623,-0.0414384,1997.62,-7.40235)">
<g transform="matrix(1,0,0,1,-2157.67,-208.423)">
<path
d="M2205.67,331.428L2205.67,332.25L2205.67,352.835C2205.67,354.263 2204.91,355.583 2203.67,356.298C2202.43,357.012 2200.91,357.013 2199.67,356.3L2190.78,351.174C2189.73,350.595 2188.83,350.083 2188.03,349.59L2187.45,349.257C2186.66,348.725 2185.91,348.142 2185.21,347.461C2185.08,347.331 2184.95,347.198 2184.82,347.061C2184.26,346.457 2183.75,345.778 2183.3,344.995C2182.16,343.05 2181.69,341.024 2181.68,338.948L2181.67,268.923L2209.77,274.425C2207.5,275.639 2205.68,278.3 2205.67,281.429L2205.67,331.428Z"
style="fill: url(#_Linear2)"
/>
</g>
<g transform="matrix(1,0,0,1,-2157.67,-208.423)">
<path
d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2295.93,363.064C2295.73,363.184 2295.53,363.301 2295.32,363.414L2295.93,363.064Z"
style="fill: rgb(141, 81, 249)"
/>
</g>
<g transform="matrix(1,0,0,1,-2157.67,-208.423)">
<path
d="M2295.93,363.064C2299.48,360.882 2301.46,357.55 2301.67,352.926L2301.67,277.879L2301.67,276.775L2301.67,252.515C2301.67,251.801 2302.05,251.14 2302.67,250.783C2303.29,250.426 2304.05,250.426 2304.67,250.784L2319.81,259.54C2321.59,260.617 2322.95,262.115 2324.04,263.875C2325.03,265.551 2325.56,267.37 2325.67,269.835L2325.67,339.91C2325.18,343.645 2323.51,346.705 2320.3,348.887L2295.93,363.064ZM2299.79,360.238C2299.79,360.238 2320.03,348.464 2320.04,348.461C2323.1,346.372 2324.69,343.444 2325.17,339.877C2325.17,339.877 2325.17,269.846 2325.17,269.839C2325.06,267.482 2324.56,265.739 2323.61,264.133C2322.56,262.445 2321.26,261.005 2319.55,259.97L2304.42,251.217C2303.96,250.949 2303.39,250.948 2302.92,251.216C2302.46,251.484 2302.17,251.979 2302.17,252.515L2302.17,276.775L2302.17,277.879L2302.17,352.926C2302.17,352.933 2302.17,352.941 2302.17,352.948C2302.04,355.861 2301.23,358.279 2299.79,360.238Z"
style="fill: url(#_Linear3)"
/>
</g>
<g transform="matrix(1,0,0,1,-2157.67,-208.423)">
<path
d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256Z"
style="fill: rgb(165, 118, 255)"
/>
</g>
<g transform="matrix(1,0,0,1,-2157.67,-208.423)">
<path
d="M2253.67,223.256C2255.26,223.245 2257.02,223.56 2259.11,224.557L2275.67,234.102C2276.91,234.816 2277.67,236.138 2277.67,237.568L2277.67,259.508C2277.67,260.222 2277.29,260.882 2276.67,261.239C2276.05,261.597 2275.29,261.597 2274.67,261.24L2257.52,251.353C2256.38,250.731 2255.12,250.341 2253.67,250.347C2252.26,250.339 2250.99,250.721 2249.82,251.353L2187.87,287.04C2184.23,289.147 2181.96,292.478 2181.67,297.57L2181.68,269.865C2181.85,265.167 2183.93,261.653 2187.92,259.322L2248.23,224.557C2249.69,223.796 2251.5,223.29 2253.67,223.256ZM2253.68,223.756C2251.6,223.789 2249.87,224.269 2248.47,224.996L2188.17,259.754C2184.35,261.992 2182.35,265.367 2182.18,269.874C2182.18,269.874 2182.17,292.759 2182.17,292.757C2183.25,290.047 2185.13,288.051 2187.62,286.607L2249.57,250.919C2249.58,250.917 2249.58,250.915 2249.59,250.913C2250.83,250.243 2252.17,249.839 2253.67,249.847C2255.21,249.841 2256.54,250.253 2257.76,250.914C2257.76,250.916 2257.76,250.917 2257.76,250.919L2274.92,260.807C2275.38,261.075 2275.95,261.074 2276.42,260.806C2276.88,260.538 2277.17,260.043 2277.17,259.508L2277.17,237.568C2277.17,236.317 2276.5,235.16 2275.42,234.535C2275.42,234.535 2258.88,225 2258.87,224.996C2256.87,224.049 2255.2,223.746 2253.68,223.756Z"
style="fill: url(#_Linear4)"
/>
</g>
<g transform="matrix(0.800798,0.462341,0.769972,-1.33363,-1677.22,-896.858)">
<path
d="M2241.55,-28.184C2239.1,-28.989 2236.83,-29.204 2234.68,-29.295C2234.68,-29.295 2220.82,-29.3 2215.03,-29.303C2213.48,-29.303 2212.05,-28.808 2211.28,-28.004C2208.65,-25.275 2202.56,-18.936 2199.45,-15.709C2199.07,-15.306 2199.07,-14.809 2199.46,-14.406C2199.85,-14.004 2200.57,-13.758 2201.34,-13.761C2208.36,-13.788 2222.72,-13.845 2222.72,-13.845C2223.98,-13.851 2225.44,-13.657 2227.06,-13.117L2241.55,-28.184Z"
style="fill: rgb(141, 81, 249)"
/>
</g>
<g transform="matrix(-4.32309,0,0,12.4454,9610.35,-1450.35)">
<path
d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z"
style="fill: rgb(104, 0, 197)"
/>
<clipPath id="_clip5">
<path <path
d="M2205.31,121.966C2205.31,121.88 2205.18,121.8 2204.96,121.757C2204.74,121.714 2204.48,121.714 2204.27,121.757C2201.75,122.263 2195.36,123.547 2192.85,124.052C2192.63,124.095 2192.5,124.174 2192.5,124.261C2192.5,124.347 2192.63,124.426 2192.85,124.469C2195.36,124.974 2201.75,126.255 2204.27,126.759C2204.48,126.802 2204.74,126.802 2204.96,126.759C2205.18,126.716 2205.31,126.636 2205.31,126.55C2205.31,125.541 2205.31,122.976 2205.31,121.966Z" d="M1726.17,-64.249L1708.16,-72.303L1708.05,-23.514L1721.88,-32.386C1722.96,-33.241 1723.09,-33.944 1723.15,-34.636L1723.15,-54.373C1723.19,-56.238 1724.96,-57.594 1726.87,-56.686L1726.17,-64.249Z"
/> style="fill: url(#_Linear6)" />
</clipPath> </g>
<g clip-path="url(#_clip5)"> <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
<g transform="matrix(0.124502,0.074907,0.206623,-0.0414384,1997.62,-7.40235)"> <path
<path d="M1726.17,-45.661L1704.47,-40.254C1706.28,-40.527 1708.14,-40.212 1708.16,-39.416L1708.16,-18.976L1726.17,-18.976L1726.17,-45.661Z"
d="M1726.17,-64.249L1708.16,-72.303L1708.05,-23.514L1721.88,-32.386C1722.96,-33.241 1723.09,-33.944 1723.15,-34.636L1723.15,-54.373C1723.19,-56.238 1724.96,-57.594 1726.87,-56.686L1726.17,-64.249Z" style="fill: rgb(141, 81, 249)" />
style="fill: url(#_Linear6)" </g>
/> <g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
</g> <path
<g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)"> d="M1726.17,-45.661L1726.17,-18.976L1708.16,-18.976L1708.16,-39.416C1707.79,-40.732 1704.5,-40.298 1702.68,-40.025L1726.17,-45.661ZM1705.49,-40.491C1706.2,-40.507 1706.87,-40.464 1707.4,-40.327C1708.01,-40.173 1708.48,-39.899 1708.62,-39.436C1708.62,-39.429 1708.62,-39.423 1708.62,-39.416L1708.62,-19.152C1708.62,-19.152 1725.72,-19.152 1725.72,-19.152L1725.72,-45.345L1705.49,-40.491Z"
<path style="fill: url(#_Radial7)" />
d="M1726.17,-45.661L1704.47,-40.254C1706.28,-40.527 1708.14,-40.212 1708.16,-39.416L1708.16,-18.976L1726.17,-18.976L1726.17,-45.661Z"
style="fill: rgb(141, 81, 249)"
/>
</g>
<g transform="matrix(-0.126036,0.0767377,0.569859,0.112933,2435.01,-3.09225)">
<path
d="M1726.17,-45.661L1726.17,-18.976L1708.16,-18.976L1708.16,-39.416C1707.79,-40.732 1704.5,-40.298 1702.68,-40.025L1726.17,-45.661ZM1705.49,-40.491C1706.2,-40.507 1706.87,-40.464 1707.4,-40.327C1708.01,-40.173 1708.48,-39.899 1708.62,-39.436C1708.62,-39.429 1708.62,-39.423 1708.62,-39.416L1708.62,-19.152C1708.62,-19.152 1725.72,-19.152 1725.72,-19.152L1725.72,-45.345L1705.49,-40.491Z"
style="fill: url(#_Radial7)"
/>
</g>
</g> </g>
</g> </g>
</g> </g>
</g> </g>
<defs> </g>
<linearGradient <defs>
id="_Linear1" <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
x1="0" gradientTransform="matrix(-70.0711,-0.927611,1.54482,-42.0752,2233.59,-20.1891)">
y1="0" <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
x2="1" <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
y2="0" </linearGradient>
gradientUnits="userSpaceOnUse" <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-70.0711,-0.927611,1.54482,-42.0752,2233.59,-20.1891)" gradientTransform="matrix(4.78193e-15,-78.0949,78.0949,4.78193e-15,2195.72,354.021)">
> <stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" />
<stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" /> <stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
<stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" /> </linearGradient>
</linearGradient> <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
<linearGradient gradientTransform="matrix(41.6089,41.5866,-41.5866,41.6089,2282.31,262.837)">
id="_Linear2" <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
x1="0" <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
y1="0" </linearGradient>
x2="1" <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
y2="0" gradientTransform="matrix(9.25616,16.7005,-16.7005,9.25616,2215,243.712)">
gradientUnits="userSpaceOnUse" <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
gradientTransform="matrix(4.78193e-15,-78.0949,78.0949,4.78193e-15,2195.72,354.021)" <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
> </linearGradient>
<stop offset="0" style="stop-color: rgb(141, 81, 249); stop-opacity: 1" /> <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse"
<stop offset="1" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" /> gradientTransform="matrix(-0.130164,-61.9937,59.4003,-0.135847,1711.63,-25.7957)">
</linearGradient> <stop offset="0" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
<linearGradient <stop offset="0.51" style="stop-color: rgb(110, 38, 217); stop-opacity: 1" />
id="_Linear3" <stop offset="1" style="stop-color: rgb(91, 0, 197); stop-opacity: 1" />
x1="0" </linearGradient>
y1="0" <radialGradient id="_Radial7" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
x2="1" gradientTransform="matrix(13.8659,4.71436,-12.1609,5.37534,1708.16,-32.287)">
y2="0" <stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
gradientUnits="userSpaceOnUse" <stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
gradientTransform="matrix(41.6089,41.5866,-41.5866,41.6089,2282.31,262.837)" </radialGradient>
> </defs>
<stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" /> </svg>
<stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
</linearGradient>
<linearGradient
id="_Linear4"
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(9.25616,16.7005,-16.7005,9.25616,2215,243.712)"
>
<stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
<stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
</linearGradient>
<linearGradient
id="_Linear6"
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-0.130164,-61.9937,59.4003,-0.135847,1711.63,-25.7957)"
>
<stop offset="0" style="stop-color: rgb(116, 50, 223); stop-opacity: 1" />
<stop offset="0.51" style="stop-color: rgb(110, 38, 217); stop-opacity: 1" />
<stop offset="1" style="stop-color: rgb(91, 0, 197); stop-opacity: 1" />
</linearGradient>
<radialGradient
id="_Radial7"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(13.8659,4.71436,-12.1609,5.37534,1708.16,-32.287)"
>
<stop offset="0" style="stop-color: rgb(211, 187, 255); stop-opacity: 1" />
<stop offset="1" style="stop-color: rgb(211, 187, 255); stop-opacity: 0" />
</radialGradient>
</defs>
</svg>
</div>
<div class="loading">
<div class="effect-1 effects"></div>
<div class="effect-2 effects"></div>
<div class="effect-3 effects"></div>
</div>
</div> </div>
<div id="app"></div> <div class="loading">
<script type="module" src="/src/main.ts"></script> <div class="effect-1 effects"></div>
</body> <div class="effect-2 effects"></div>
<div class="effect-3 effects"></div>
</div>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html> </html>
src/@core/scss/_default-layout-w-vertical-nav.scss
+1 -2
View File
@@ -48,8 +48,7 @@ $header: ".layout-navbar";
/* ℹ️ Ensure header styles are preserved when dialog is opened, /* ℹ️ Ensure header styles are preserved when dialog is opened,
but only if window was scrolled before dialog opened but only if window was scrolled before dialog opened
*/ */
html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed, html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed {
html.dialog-scroll-locked &.window-scrolled.layout-navbar-fixed {
#{$header} { #{$header} {
padding-inline: 1rem; padding-inline: 1rem;
src/@core/scss/_misc.scss
+1 -1
View File
@@ -45,7 +45,7 @@ code {
inset-block-start: 0; inset-block-start: 0;
inset-inline: 0; inset-inline: 0;
pointer-events: none; pointer-events: none;
transition: all 0.3s ease-in-out; transition: padding 0.3s ease-in-out;
.v-theme--light & { .v-theme--light & {
background: rgba(var(--v-theme-surface), 0.6); background: rgba(var(--v-theme-surface), 0.6);
src/@layouts/components/VerticalNavLayout.vue
+2 -4
View File
@@ -23,9 +23,7 @@ export default defineComponent({
// 监听弹窗状态变化 // 监听弹窗状态变化
const checkDialogState = () => { const checkDialogState = () => {
const wasDialogOpen = isDialogOpen.value const wasDialogOpen = isDialogOpen.value
isDialogOpen.value = isDialogOpen.value = document.documentElement.classList.contains('v-overlay-scroll-blocked')
document.documentElement.classList.contains('dialog-scroll-locked') ||
document.documentElement.classList.contains('v-overlay-scroll-blocked')
// 当弹窗刚打开时，记录当前的滚动状态 // 当弹窗刚打开时，记录当前的滚动状态
if (!wasDialogOpen && isDialogOpen.value) { if (!wasDialogOpen && isDialogOpen.value) {
@@ -121,7 +119,7 @@ export default defineComponent({
'layout-navbar-fixed', 'layout-navbar-fixed',
mdAndDown.value && 'layout-overlay-nav', mdAndDown.value && 'layout-overlay-nav',
route.meta.layoutWrapperClasses, route.meta.layoutWrapperClasses,
(scrollDistance.value > 0 || (isDialogOpen.value && wasScrolledBeforeDialog.value)) && 'window-scrolled', (scrollDistance.value > 5 || (isDialogOpen.value && wasScrolledBeforeDialog.value)) && 'window-scrolled',
], ],
}, },
[verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay], [verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay],
src/@layouts/styles/_default-layout.scss
+4 -3
View File
@@ -6,8 +6,9 @@
html { html {
background: rgb(var(--v-theme-background)); background: rgb(var(--v-theme-background));
min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom)); min-block-size: 100vh;
overflow-y: overlay; min-block-size: 100dvh;
overflow-y: hidden;
} }
body { body {
@@ -40,8 +41,8 @@ body,
// TODO: Use grid gutter variable here; // TODO: Use grid gutter variable here;
padding-block: 1.5rem; padding-block: 1.5rem;
padding-inline: 0.5rem;
padding-block-start: calc(env(safe-area-inset-top) + 4.5rem); padding-block-start: calc(env(safe-area-inset-top) + 4.5rem);
padding-inline: 0.5rem;
// display: flex;display // display: flex;display
src/styles/common.scss
+7 -7
View File
@@ -3,15 +3,15 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html.v-overlay-scroll-blocked {
@supports (-webkit-touch-callout: none) { position: static;
html.v-overlay-scroll-blocked {
position: inherit;
}
} }
body { html.v-overlay-scroll-blocked body {
overscroll-behavior: none; position: fixed;
overflow: hidden;
inset: 0;
inset-block-start: var(--v-body-scroll-y);
} }
@mixin hide-scrollbar { @mixin hide-scrollbar {