mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-07-20 03:51:46 +08:00
优化 ThemeSwitcher 组件,移除主题切换动画并在更新主题时刷新页面,以提升用户体验。同时,更新 Footer 组件的样式,添加指示器以增强导航效果。调整 UserProfile 组件的链接,更新为系统设定。对应用中心页面进行重构,按分组展示应用,提升可用性和视觉效果。
This commit is contained in:
@@ -36,76 +36,16 @@ const customCSS = ref('')
|
||||
// 编辑器主题
|
||||
const editorTheme = computed(() => (currentThemeName.value === 'light' ? 'github' : 'monokai'))
|
||||
|
||||
// 主题切换动画
|
||||
function themeTransition() {
|
||||
const x = performance.now()
|
||||
for (let i = 0; i++ < 1e7; (i << 9) & ((9 % 9) * 9 + 9));
|
||||
const cost = performance.now() - x
|
||||
if (cost > 10) return
|
||||
|
||||
const el: HTMLElement = document.querySelector('[data-v-app]')!
|
||||
const children = el.querySelectorAll('*') as NodeListOf<HTMLElement>
|
||||
|
||||
children.forEach(el => {
|
||||
if (hasScrollbar(el)) {
|
||||
el.dataset.scrollX = String(el.scrollLeft)
|
||||
el.dataset.scrollY = String(el.scrollTop)
|
||||
}
|
||||
})
|
||||
|
||||
const copy = el.cloneNode(true) as HTMLElement
|
||||
copy.classList.add('app-copy')
|
||||
const rect = el.getBoundingClientRect()
|
||||
copy.style.top = `${rect.top}px`
|
||||
copy.style.left = `${rect.left}px`
|
||||
copy.style.width = `${rect.width}px`
|
||||
copy.style.height = `${rect.height}px`
|
||||
|
||||
const targetEl = document.activeElement as HTMLElement
|
||||
const targetRect = targetEl.getBoundingClientRect()
|
||||
const left = targetRect.left + targetRect.width / 2 + window.scrollX
|
||||
const top = targetRect.top + targetRect.height / 2 + window.scrollY
|
||||
el.style.setProperty('--clip-pos', `${left}px ${top}px`)
|
||||
el.style.removeProperty('--clip-size')
|
||||
|
||||
nextTick(() => {
|
||||
el.classList.add('app-transition')
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
el.style.setProperty('--clip-size', `${Math.hypot(window.innerWidth, window.innerHeight)}px`)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
document.body.append(copy)
|
||||
;(copy.querySelectorAll('[data-scroll-x], [data-scroll-y]') as NodeListOf<HTMLElement>).forEach(el => {
|
||||
el.scrollLeft = +el.dataset.scrollX!
|
||||
el.scrollTop = +el.dataset.scrollY!
|
||||
})
|
||||
|
||||
function onTransitionend(e: TransitionEvent) {
|
||||
if (e.target === e.currentTarget) {
|
||||
copy.remove()
|
||||
el.removeEventListener('transitionend', onTransitionend)
|
||||
el.removeEventListener('transitioncancel', onTransitionend)
|
||||
el.classList.remove('app-transition')
|
||||
el.style.removeProperty('--clip-size')
|
||||
el.style.removeProperty('--clip-pos')
|
||||
}
|
||||
}
|
||||
el.addEventListener('transitionend', onTransitionend)
|
||||
el.addEventListener('transitioncancel', onTransitionend)
|
||||
}
|
||||
|
||||
// 更新主题
|
||||
function updateTheme() {
|
||||
const autoTheme = checkPrefersColorSchemeIsDark() ? 'dark' : 'light'
|
||||
const theme = currentThemeName.value === 'auto' ? autoTheme : currentThemeName.value
|
||||
globalTheme.name.value = theme
|
||||
savedTheme.value = theme
|
||||
themeTransition()
|
||||
// 保存主题到本地
|
||||
saveLocalTheme(theme, globalTheme)
|
||||
// 刷新页面
|
||||
location.reload()
|
||||
}
|
||||
|
||||
// 切换主题
|
||||
|
||||
Reference in New Issue
Block a user