mirror of
https://github.com/stardrophere/InsightRadar.git
synced 2026-06-06 00:39:21 +08:00
big update
This commit is contained in:
stardrophere
@@ -1,392 +1,149 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
|
||||
const themeStore = useThemeStore()
|
||||
const isAnimating = ref(false)
|
||||
|
||||
/**
|
||||
* 切换主题，使用 View Transitions API 实现高级扩散动画（如果浏览器支持）
|
||||
* 这种动画比之前像玩具一样的开关要高级得多，提供原生级的丝滑过渡
|
||||
*/
|
||||
function handleToggle(event: MouseEvent) {
|
||||
const root = document.documentElement
|
||||
root.style.setProperty('--theme-flash-x', `${event.clientX}px`)
|
||||
root.style.setProperty('--theme-flash-y', `${event.clientY}px`)
|
||||
// 检查浏览器是否支持 document.startViewTransition 并且用户没有开启减弱动画
|
||||
const isAppearanceTransition = typeof document !== 'undefined' &&
|
||||
'startViewTransition' in document &&
|
||||
!window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
||||
|
||||
isAnimating.value = true
|
||||
themeStore.toggleTheme()
|
||||
if (!isAppearanceTransition) {
|
||||
// 降级处理：直接切换
|
||||
themeStore.toggleTheme()
|
||||
return
|
||||
}
|
||||
|
||||
window.setTimeout(() => {
|
||||
isAnimating.value = false
|
||||
}, 520)
|
||||
const x = event.clientX
|
||||
const y = event.clientY
|
||||
const endRadius = Math.hypot(
|
||||
Math.max(x, innerWidth - x),
|
||||
Math.max(y, innerHeight - y)
|
||||
)
|
||||
|
||||
// @ts-ignore: TypeScript 类型可能较旧，忽略 startViewTransition 报错
|
||||
const transition = document.startViewTransition(() => {
|
||||
themeStore.toggleTheme()
|
||||
})
|
||||
|
||||
transition.ready.then(() => {
|
||||
const clipPath = [
|
||||
`circle(0px at ${x}px ${y}px)`,
|
||||
`circle(${endRadius}px at ${x}px ${y}px)`
|
||||
]
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: clipPath,
|
||||
},
|
||||
{
|
||||
duration: 500,
|
||||
easing: 'ease-in-out',
|
||||
pseudoElement: '::view-transition-new(root)',
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="theme-toggle"
|
||||
:class="{ 'is-dark': themeStore.isDark, 'is-animating': isAnimating }"
|
||||
type="button"
|
||||
class="theme-toggle-btn"
|
||||
:aria-label="themeStore.isDark ? '切换到浅色模式' : '切换到暗黑模式'"
|
||||
title="切换显示模式"
|
||||
@click="handleToggle"
|
||||
>
|
||||
<span class="toggle-track">
|
||||
<span class="track-glow"></span>
|
||||
<span class="track-stars"></span>
|
||||
<span class="spark-layer">
|
||||
<span class="spark"></span>
|
||||
<span class="spark"></span>
|
||||
<span class="spark"></span>
|
||||
</span>
|
||||
<span class="toggle-thumb">
|
||||
<svg class="icon icon-sun" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M12 5.25a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75ZM7.227 7.227a.75.75 0 0 1 1.06 0l1.06 1.06a.75.75 0 1 1-1.06 1.06l-1.06-1.06a.75.75 0 0 1 0-1.06Zm9.426 0a.75.75 0 0 1 1.06 1.06l-1.06 1.06a.75.75 0 1 1-1.06-1.06l1.06-1.06ZM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm-6.75 3a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75Zm11.25 0a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75Zm-8.213 3.653a.75.75 0 0 1 1.06 0l1.06 1.06a.75.75 0 0 1-1.06 1.06l-1.06-1.06a.75.75 0 0 1 0-1.06Zm7.426 0a.75.75 0 0 1 1.06 1.06l-1.06 1.06a.75.75 0 0 1-1.06-1.06l1.06-1.06ZM12 16.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 1 1-1.5 0v-1.5a.75.75 0 0 1 .75-.75Z"
|
||||
/>
|
||||
</svg>
|
||||
<svg class="icon icon-moon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M14.5 2.25a.75.75 0 0 1 .604 1.195 7.95 7.95 0 0 0 4.6 12.395.75.75 0 0 1 .194 1.387 10.5 10.5 0 1 1-6.592-15.052.75.75 0 0 1 .194 1.387 8.954 8.954 0 0 0-1.75 16.693 9.002 9.002 0 0 0 6.074-2.04 9.45 9.45 0 0 1-4.822-8.253 9.44 9.44 0 0 1 1.305-4.82.75.75 0 0 1 .194-1.202Z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="toggle-text">{{ themeStore.isDark ? '浅色模式' : '暗黑模式' }}</span>
|
||||
<div class="icon-container">
|
||||
<i class="fa-solid fa-sun sun-icon" :class="{ 'is-hidden': themeStore.isDark }"></i>
|
||||
<i class="fa-solid fa-moon moon-icon" :class="{ 'is-hidden': !themeStore.isDark }"></i>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.theme-toggle {
|
||||
border: 1px solid var(--surface-border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border-radius: 14px;
|
||||
padding: 6px 10px 6px 8px;
|
||||
display: inline-flex;
|
||||
/* ==========================================
|
||||
极简且高级的毛玻璃材质主题切换按钮
|
||||
========================================== */
|
||||
.theme-toggle-btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-surface);
|
||||
/* 使用轻微透明度与模糊实现毛玻璃质感 */
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 24%, transparent);
|
||||
.theme-toggle-btn:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-strong);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.theme-toggle:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
.theme-toggle-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.toggle-track {
|
||||
width: 58px;
|
||||
height: 32px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(120deg, #d4e4ff, #b2c6ff);
|
||||
border: 1px solid rgba(255, 255, 255, 0.45);
|
||||
padding: 3px;
|
||||
.icon-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: background 360ms ease;
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .toggle-track {
|
||||
background: linear-gradient(120deg, #0f1731, #1f2e62);
|
||||
}
|
||||
|
||||
.track-glow {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
left: 8px;
|
||||
top: 5px;
|
||||
background: rgba(255, 244, 170, 0.75);
|
||||
filter: blur(2px);
|
||||
opacity: 0.85;
|
||||
transition: left 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease, background 300ms ease;
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .track-glow {
|
||||
left: 30px;
|
||||
opacity: 0.4;
|
||||
background: rgba(166, 195, 255, 0.7);
|
||||
}
|
||||
|
||||
.track-stars {
|
||||
/* 图标动画：旋转加缩放的平滑过渡 */
|
||||
.sun-icon, .moon-icon {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 18px;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* 隐藏状态：优雅地旋出 */
|
||||
.sun-icon.is-hidden {
|
||||
opacity: 0;
|
||||
transition: opacity 260ms ease;
|
||||
transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
|
||||
}
|
||||
|
||||
.track-stars::before,
|
||||
.track-stars::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: rgba(226, 235, 255, 0.95);
|
||||
}
|
||||
|
||||
.track-stars::before {
|
||||
left: 16px;
|
||||
top: 9px;
|
||||
box-shadow: 16px 6px 0 rgba(226, 235, 255, 0.75), 22px -2px 0 rgba(226, 235, 255, 0.55);
|
||||
}
|
||||
|
||||
.track-stars::after {
|
||||
left: 28px;
|
||||
top: 18px;
|
||||
box-shadow: -12px 5px 0 rgba(226, 235, 255, 0.65), 8px -8px 0 rgba(226, 235, 255, 0.75);
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .track-stars {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spark-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spark {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
.moon-icon.is-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.spark:nth-child(1) {
|
||||
left: 22px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.spark:nth-child(2) {
|
||||
left: 30px;
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
.spark:nth-child(3) {
|
||||
left: 26px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating .spark:nth-child(1) {
|
||||
animation: spark-burst-1 480ms ease-out;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating .spark:nth-child(2) {
|
||||
animation: spark-burst-2 480ms ease-out;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating .spark:nth-child(3) {
|
||||
animation: spark-burst-3 480ms ease-out;
|
||||
}
|
||||
|
||||
.toggle-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(145deg, #ffffff, #f0f4ff);
|
||||
box-shadow: 0 3px 10px rgba(37, 49, 89, 0.26);
|
||||
position: relative;
|
||||
transform: translateX(0);
|
||||
transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .toggle-thumb {
|
||||
transform: translateX(26px);
|
||||
background: linear-gradient(145deg, #d5e0ff, #b7c9ff);
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
inset: 5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: #526ab0;
|
||||
transition: opacity 240ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.icon-sun {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
|
||||
.icon-moon {
|
||||
opacity: 0;
|
||||
transform: rotate(-40deg) scale(0.45);
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .icon-sun {
|
||||
opacity: 0;
|
||||
transform: rotate(70deg) scale(0.4);
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark .icon-moon {
|
||||
opacity: 1;
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.theme-toggle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--primary) 36%, transparent);
|
||||
left: 34px;
|
||||
top: 14px;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating::after {
|
||||
animation: click-ripple 520ms ease-out;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating .toggle-thumb {
|
||||
animation: thumb-pop 520ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.theme-toggle.is-dark.is-animating .toggle-thumb {
|
||||
animation-name: thumb-pop-dark;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating .toggle-track {
|
||||
animation: track-flare 520ms ease;
|
||||
}
|
||||
|
||||
@keyframes click-ripple {
|
||||
0% {
|
||||
transform: scale(0.2);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(4.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes thumb-pop {
|
||||
0% {
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(13px) scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(26px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes thumb-pop-dark {
|
||||
0% {
|
||||
transform: translateX(26px) scale(1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(13px) scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes track-flare {
|
||||
0% {
|
||||
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
45% {
|
||||
box-shadow: 0 0 16px rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spark-burst-1 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(0.3);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-12px, -8px) scale(1.1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spark-burst-2 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(0.3);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(10px, -10px) scale(1.15);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spark-burst-3 {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(0.3);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(2px, 12px) scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.toggle-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.theme-toggle,
|
||||
.toggle-track,
|
||||
.toggle-thumb,
|
||||
.track-glow,
|
||||
.icon {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.theme-toggle.is-animating::after,
|
||||
.theme-toggle.is-animating .toggle-thumb,
|
||||
.theme-toggle.is-dark.is-animating .toggle-thumb,
|
||||
.theme-toggle.is-animating .toggle-track,
|
||||
.theme-toggle.is-animating .spark {
|
||||
animation: none;
|
||||
}
|
||||
transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* ==========================================
|
||||
全局 View Transitions API 动画样式
|
||||
控制页面级别的黑白模式无缝扩散切换
|
||||
========================================== */
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
::view-transition-new(root) {
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user