<template>
  <div id="app">
    <router-view></router-view>
    <div class="theme-switcher" @click="toggleTheme" :title="`切换到${theme === 'light' ? '深色' : '浅色'}主题`">
      <span v-if="theme === 'light'">🌙</span>
      <span v-else>☀️</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect } from 'vue';

const theme = ref('light');

const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
  localStorage.setItem('theme', theme.value);
};

onMounted(() => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    theme.value = savedTheme;
  } else {
    // 如果没有保存的主题，则根据系统设置初始化
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    theme.value = prefersDark ? 'dark' : 'light';
  }
});

watchEffect(() => {
  document.documentElement.className = theme.value === 'dark' ? 'dark-theme' : '';
});
</script>

<style>
.theme-switcher {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--bg-color-secondary);
  box-shadow: var(--box-shadow);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 24px;
  user-select: none;
  transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
  z-index: 1000;
}

.theme-switcher:hover {
  transform: scale(1.1);
  box-shadow: var(--box-shadow-dark);
}

.theme-switcher:active {
  transform: scale(0.95);
}
</style>