<script setup>
import { RouterView } from "vue-router";
import { onMounted } from 'vue'
import { useSettingsStore } from '@/store/settings'; 
import { setTheme } from '@/styles/theme';

const settingsStore = useSettingsStore();

onMounted(() => {
  // 应用启动时，根据 store 中持久化的主题设置样式
  setTheme(settingsStore.theme);
});
</script>

<template>
  <router-view></router-view>
</template>

<style lang="scss">
html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
  height: 6px; /* 滚动条高度，主要用于水平滚动条 */
}

::-webkit-scrollbar-track {
  background: transparent; /* 滚动条轨道背景 */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(144, 147, 153, 0.3); /* 滚动条滑块颜色 */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(144, 147, 153, 0.5); /* 悬停时滑块颜色 */
}

// 全局动画控制
body.no-animations {
  * {
    transition: none !important;
    animation: none !important;
  }
}
</style>