tanghaolin
2025-02-13 2ec3046812762fa7e5fc75867165625c3e4abc14
src/components/AppHeader.vue
@@ -30,9 +30,15 @@
               </el-input>
               <div class="flex items-center text-gray-600 text-sm text-nowrap">
                  <a href="#" class="hover:text-blue-500">注册</a>
                  <span class="mx-2">·</span>
                  <router-link to="/login" class="hover:text-blue-500">登录</router-link>
                  <template v-if="!userInfo">
                     <a href="#" class="hover:text-blue-500">注册</a>
                     <span class="mx-2">·</span>
                     <router-link to="/login" class="hover:text-blue-500">登录</router-link>
                  </template>
                  <template v-else>
                     <span class="text-blue-500 mr-2">{{ userInfo.username }}</span>
                     <a href="#" class="hover:text-blue-500" @click.prevent="handleLogout">退出</a>
                  </template>
               </div>
            </div>
         </div>
@@ -43,12 +49,29 @@
<script setup lang="ts">
import headerLogo from '@/assets/logo/header_logo.png';
import { Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const searchQuery = ref('');
const activeRoute = computed(() => route.path);
// 获取用户信息
const userInfo = computed(() => {
   const info = localStorage.getItem('userInfo');
   return info ? JSON.parse(info) : null;
});
// 处理登出
const handleLogout = () => {
   localStorage.removeItem('userInfo');
   ElMessage.success('已退出登录');
   router.push('/login');
};
const linkClick = (url) => {
   window.open(url, '_blank');
};