App.vue

<script setup lang="ts">
import { ref } from 'vue'
import LoginPage from './components/LoginPage.vue'
import DesktopMain from './components/DesktopMain.vue'

// 登录状态管理
const isLoggedIn = ref(localStorage.getItem('pcUserInfo')?true:false)
const currentUser = ref<{ username: string; role: 'admin' | 'viewer' } | null>(null)

// 登录处理
const handleLogin = (username: string, role: 'admin' | 'viewer') => {
  currentUser.value = { username, role }
  isLoggedIn.value = true
}

if(isLoggedIn){
  let name = JSON.parse(localStorage.getItem('pcUserInfo')).nickname||''
  handleLogin( name,  'admin')
}

// 登出处理
const handleLogout = () => {
  localStorage.removeItem('pcUserInfo')
  currentUser.value = null
  isLoggedIn.value = false
}
</script>

<template>
  <div class="size-full bg-background">
    <!-- 登录页面 -->
    <LoginPage 
      v-if="!isLoggedIn"
      :on-login="handleLogin" 
    />
    
    <!-- 主应用界面 -->
    <DesktopMain 
      v-else 
      :current-user="currentUser" 
      @logout="handleLogout" 
    />
  </div>
</template>

<style scoped>
/* 全局样式已在 main.css 中定义 */
</style>