mirror of
https://github.com/stardrophere/InsightRadar.git
synced 2026-06-06 01:57:51 +08:00
login+ai cluster
This commit is contained in:
stardrophere
@@ -0,0 +1,392 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
|
||||
const themeStore = useThemeStore()
|
||||
const isAnimating = ref(false)
|
||||
|
||||
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`)
|
||||
|
||||
isAnimating.value = true
|
||||
themeStore.toggleTheme()
|
||||
|
||||
window.setTimeout(() => {
|
||||
isAnimating.value = false
|
||||
}, 520)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="theme-toggle"
|
||||
:class="{ 'is-dark': themeStore.isDark, 'is-animating': isAnimating }"
|
||||
type="button"
|
||||
:aria-label="themeStore.isDark ? '切换到浅色模式' : '切换到暗黑模式'"
|
||||
@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>
|
||||
</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;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
|
||||
}
|
||||
|
||||
.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:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
.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;
|
||||
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 {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 260ms ease;
|
||||
}
|
||||
|
||||
.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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user