mcwl-pc/app/components/PlanetHeader.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const route = useRoute()

// import { useRoute } from 'vue-router'
// const menuStore = useMenuStore()

const router = useRouter()
const userStore = useUserStore()
const modalStore = useModalStore()

// const route = useRoute()
// const currentPath = ref('/planet/')
const currentPath = ref(route.path)
if (route.path === '/planet') {
  currentPath.value = '/planet/'
}
const searchQuery = ref('')
const tabList = ref([
  {
    name: '首页',
    path: '/planet/',
  },
  {
    name: '我的星球',
    path: '/my-planet',
  },
])

const showMessage = ref(false)

// 显示登录框
function handleLogin() {
  modalStore.showLoginModal()
}

async function handleLogout() {
  try {
    await request.post('/logout')
    userStore.logout()
    navigateTo('/model-square')
  }
  catch (error) {
    console.error('Logout failed:', error)
  }
}

function handleTabClick(path: string) {
  router.push(path)
  currentPath.value = path

  // menuStore.setActiveMenu(path)
  // if (path === '/my-planet') {
  //   navigateTo('/my-planet')
  // }
}

function openPersonalPage() {
  const url = `${window.location.origin}${router.resolve('/myPlanetDetail').href}`
  window.open(url, '_blank')
}

function openEarningsPage() {
  const url = `${window.location.origin}${router.resolve('/planet-earnings').href}`
  window.open(url, '_blank')
}

function handleShowMessage() {
  showMessage.value = true
}
</script>

<template>
  <header class="w-full h-16 bg-white border-b border-gray-100">
    <div class="max-w-[1920px] mx-auto">
      <div class="flex items-center h-16 px-10">
        <!-- Logo部分 -->
        <div class="flex items-center cursor-pointer" @click="handleTabClick('/')">
          <img
            src="@/assets/img/logo.png"
            alt="魔创未来"
            class="h-8 w-8"
          >
          <span class="text-[#328AFE] text-xl font-bold ml-2">魔创未来</span>
        </div>

        <!-- 导航链接 -->
        <nav class="flex items-center ml-20">
          <NuxtLink
            v-for="(item, index) in tabList"
            :key="index"
            to="/"
            class="text-xl font-bold px-5 transition-colors"
            :class="{ 'text-[#192029]': currentPath === item.path, 'text-[#878D95]': currentPath !== item.path }"
            @click="handleTabClick(item.path)"
          >
            {{ item.name }}
          </NuxtLink>
          <!-- <NuxtLink
            to="/"
            class="text-xl font-bold px-5 transition-colors text-[#878D95]"
          >
            魔创未来
          </NuxtLink> -->
        </nav>

        <!-- 右侧功能区 -->
        <div class="flex items-center ml-auto space-x-4">
          <!-- 搜索框 -->
          <div class="relative flex items-center w-[360px]">
            <input
              v-model="searchQuery"
              type="text"
              placeholder="搜索星球、用户或内容"
              class="w-full h-10 pl-4 pr-16 bg-[#F4F6F9] rounded-lg text-sm placeholder-[#878D95] outline-none"
            >
            <button class="absolute right-3 flex items-center space-x-1 text-[#4A5563]">
              <svg class="w-4 h-4" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.333 12.667A5.333 5.333 0 1 0 7.333 2a5.333 5.333 0 0 0 0 10.667zM14 14l-2.9-2.9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span class="text-sm font-bold">搜索</span>
            </button>
          </div>

          <!-- 通知铃铛 -->
          <button class="relative p-2 hover:bg-gray-50 rounded-lg" @click="handleShowMessage">
            <svg class="w-6 h-6 text-[#4A5563]" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z" fill="currentColor" />
            </svg>
          </button>

          <PlanetMessage v-if="showMessage" @close="showMessage = false" />

          <!-- 登录按钮 -->
          <client-only v-if="!userStore.token">
            <button class="h-10 px-8 rounded-lg bg-gradient-to-l from-[#3BEDFF] to-[#328AFE] text-white text-sm font-bold hover:opacity-90 transition-opacity" @click="handleLogin">
              登录
            </button>
          </client-only>
          <div v-else class="relative group">
            <NAvatar
              class="cursor-pointer w-10 h-10"
              round
              size="small"
              :src="userStore?.userInfo?.avatar"
            />
            <div class="p-2 absolute hidden group-hover:block z-50 top-11 right-0 bg-white border border-[#E5E5E5] rounded-lg w-60">
              <div class="flex items-center gap-2 bg-[rgba(50,138,254,0.05)] opacity-0.5 p-2 mb-2">
                <div class="w-10 h-10">
                  <img class="w-full h-full rounded-full" :src="userStore?.userInfo?.avatar" alt="">
                </div>
                <div class="flex flex-col justify-between">
                  <div class="text-base font-bold">
                    {{ userStore.userInfo.nickName }}
                  </div>
                  <div class="text-xs text-[#878D95]">
                    欢迎来到魔创星球
                  </div>
                </div>
              </div>

              <div class="flex justify-between text-sm text-[#4a5563]">
                <div class="flex-1 text-center py-2 cursor-pointer" @click="openPersonalPage">
                  个人主页
                </div>
                <div class="flex-1 text-center py-2 cursor-pointer" @click="openEarningsPage">
                  收益明细
                </div>
              </div>

              <div class="text-sm text-[#4a5563] flex justify-center items-center my-4 cursor-pointer" @click="handleLogout">
                推出登录
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<style scoped>
/* 如果需要自定义样式可以在这里添加 */
</style>