One-KVM/web/src/App.vue

<script setup lang="ts">
import { KeepAlive, onMounted, watch } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useSystemStore } from '@/stores/system'

const router = useRouter()
const authStore = useAuthStore()
const systemStore = useSystemStore()

// Check for dark mode preference
function initTheme() {
  const stored = localStorage.getItem('theme')
  if (stored === 'dark' || (!stored && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark')
  }
}

// Initialize on mount
onMounted(async () => {
  initTheme()

  // Check setup status
  try {
    await authStore.checkSetupStatus()
    if (authStore.needsSetup) {
      router.push('/setup')
      return
    }
  } catch {
    // Continue anyway
  }

  // Check auth status
  try {
    await authStore.checkAuth()
    if (authStore.isAuthenticated) {
      // Fetch system info
      await systemStore.fetchSystemInfo()
    }
  } catch {
    // Not authenticated
  }
})

// Listen for dark mode changes
watch(
  () => window.matchMedia('(prefers-color-scheme: dark)').matches,
  (dark) => {
    const stored = localStorage.getItem('theme')
    if (!stored) {
      document.documentElement.classList.toggle('dark', dark)
    }
  }
)
</script>

<template>
  <RouterView v-slot="{ Component, route }">
    <KeepAlive v-if="authStore.isAuthenticated">
      <component :is="Component" v-if="route.name === 'Console'" />
    </KeepAlive>
    <component :is="Component" v-if="route.name !== 'Console' || !authStore.isAuthenticated" />
  </RouterView>
</template>