<template >

<div class="header">

<!-- 展示在页面最上方 -->
  <div>
  <!-- 跳转路由 图片点击跳转到首页 -->
    <RouterLink to="/home">
      <img src="./assets/img/index.png" alt="点击回到主页">
    </RouterLink>
  </div>
  
  <div>
    <!-- 跳转路由 跳转到登录 或者个人页面-->
    <RouterLink to="/personalSpace">
      <img :src="imgUrl" alt="点击登录">
    </RouterLink>
  </div>
  
</div>


<div>
<!-- 展示区 -->
<RouterView></RouterView>
</div>


</template>
  
<script lang="ts" setup name="App">
  import { RouterView,RouterLink } from 'vue-router';
  import { onMounted, ref } from 'vue';
  import { useLoginStore } from './stores/Login';
  // 导入图片
  import deLogin from './assets/img/deLogin.png'
  import Login from './assets/img/defaultAvatar.png'
  //定义登录路由Personal space & login
  const loginRoute = ref({path: '/login'});
  const loginStore = useLoginStore();
  const imgUrl = ref(deLogin)
  // 判断已经登录
 console.log('App.vue')
  console.log(loginStore.userInfo.avatarurl);
  onMounted(() => {
    if(loginStore.userInfo.token!=null&&loginStore.userInfo.token!=""){

    loginRoute.value = {path: '/personalSpace'}
    imgUrl.value = Login
    console.log('已经登录',imgUrl.value)
    }
    else{
      console.log('未登录')
    }
  });
</script>


<style scoped>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  
}

#app {
  height: 100%;
  position: relative; /* 确保子元素可以相对于此进行定位 */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(220, 221, 214, 0.8); /* 半透明背景色，以便文字可见 */
  color: white;
  padding: 10px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10; /* 确保头部在其他内容之上 */
}
img {
  width: 30px; /* 设置图片宽度 */
  height:30px; /* 设置图片高度 */
}
</style>