mcwl-pc/app/components/Header.vue

<script setup lang="ts">
import defaultAvatar from '@/assets/img/default-avatar.png'
import {
  Bell,
  CirclePlus,
  GraduationCap,
  HardDriveUpload,
  Image,
  Monitor,
  Workflow,
} from 'lucide-vue-next'
// import { AtCircle } from '@vicons/ionicons5'
import { NIcon } from 'naive-ui'

import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

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

// 输入框搜索
const searchText = ref('')
function onSearch(value: any) {
  console.log('搜索:', value)
  // 执行搜索逻辑
}

// 用户下拉选项
const notificationOptions = [
  {
    label: '系统通知',
    key: 'system',
  },
  {
    label: '互动消息',
    key: 'interaction',
  },
]
function renderIcon(icon: Component) {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    })
  }
}
// 发布下拉选项
const publishOptions = [
  {
    label: '模型',
    key: 'publish-model',
    icon: renderIcon(HardDriveUpload),
  },
  {
    label: '图片',
    key: 'picture',
    icon: renderIcon(Image),
  },
  {
    label: '工作流',
    key: 'publish-workflow',
    icon: renderIcon(Workflow),
  },
]
const userOptions = ref([
  {
    label: '我的模型',
    key: 'model',
  },
  {
    label: '我的作品',
    key: 'project',
  },
  {
    label: '我的点赞',
    key: 'like',
  },
  {
    label: '账号设置',
    key: 'userSettings',
  },
  {
    label: '退出登录',
    key: 'logout',
  },
])

// 用户下拉选项
async function handleUserSelect(key: string) {
  if (key === 'logout') {
    try {
      await request.post('/logout')
      userStore.logout()
      navigateTo('/model-square')
    }
    catch (error) {
      console.error('Logout failed:', error)
    }
  }
}
// 发布下拉选项
async function handlePublishSelect(key: string) {
  if (key === 'picture') {
    debugger
  }
  else {
    router.push({
      path: `/${key}`,
    })
  }
}

function handleLogin() {
  modalStore.showLoginModal()
}
onMounted(() => {
})
</script>

<template>
  <div>
    <header
      class="sticky top-0 z-50 flex h-12 items-center justify-between border-b border-gray-100 bg-white/80 px-6 backdrop-blur dark:border-dark-700 dark:bg-dark-800/80"
    >
      <div class="flex items-center gap-6">
        <!-- Logo 区域调整 -->
        <div class="flex min-w-[130px] items-center gap-3 pr-4">
          <div class="flex items-center gap-2">
            <NuxtLink to="/" class="text-xl font-semibold tracking-tight no-underline">
              <!-- <img src="/vite.png" alt="Logo" class="h-9 w-9" /> -->
              魔创未来
            </NuxtLink>
            <!-- <span class="text-xl font-semibold tracking-tight">魔创未来</span> -->
          </div>
        </div>

        <!-- <HeaderSearchInput /> -->
        <HeaderSearchInput
          v-model="searchText"
          @search="onSearch"
        />
        <!-- Search -->
        <!-- <n-input class="w-[580px]" size="large" placeholder="搜索模型/图片/创作者寻找灵感" round  /> -->
        <!-- <NInput
          round
          clearable
          placeholder="搜索模型/图片/创作者寻找灵感"
          class="w-[580px]"
        >
          <template #prefix>
            <Search class="h-4 w-4 text-gray-400" />
          </template>
        </NInput> -->
      </div>

      <!-- Right Actions -->
      <NSpace align="center" :size="24">
        <!-- PC Client -->
        <NButton text class="header-btn-primary">
          <Monitor class="h-4 w-4 mr-1" />
          <span>PC客户端</span>
        </NButton>

        <!-- Tutorials -->
        <NButton text class="header-btn">
          <GraduationCap class="h-4 w-4 mr-1" />
          <span>教程专区</span>
        </NButton>

        <NDropdown
          :options="publishOptions"
          trigger="hover"
          :on-select="handlePublishSelect"
        >
          <NButton text class="header-btn">
            <CirclePlus class="h-4 w-4 mr-1" />
            <span>发布</span>
          </NButton>
        </NDropdown>

        <!-- Notifications -->
        <NDropdown :options="notificationOptions" trigger="click">
          <NBadge :value="5" :max="99" processing>
            <NButton text circle>
              <Bell class="h-5 w-5 mr-1" />
            </NButton>
          </NBadge>
        </NDropdown>

        <!-- User -->
        <div class="min-w-10">
          <client-only>
            <NDropdown
              v-if="userStore.token"
              :options="userOptions"
              :on-select="handleUserSelect"
              trigger="hover"
            >
              <NAvatar
                class="cursor-pointer w-10 h-10"
                round
                size="small"
                :src="
                  userStore.userInfo && userStore.userInfo.avatar
                    ? userStore.userInfo.avatar
                    : defaultAvatar
                "
              />
            </NDropdown>
            <div
              v-if="!userStore.token"
              class="flex text-white bg-[#197dff] rounded-[4px] px-4 py-2 text-xs cursor-pointer hover:bg-[#1a6eff]"
              @click="handleLogin"
            >
              登录/注册
            </div>
          </client-only>
        </div>
      </NSpace>
    </header>
  </div>
</template>

<style scoped>
  .header-btn-primary {
  @apply border border-solid border-[#3162ff] px-1 py-1 text-[#3162ff] rounded-md  hover:text-[#3162ff];
}
.header-btn {
  @apply bg-[#f1f1f7] font-bold px-2 py-2 rounded flex items-center hover:text-black hover:bg-[#f1f1f7];
}
</style>