edu/pc/layouts/components/header/index.vue

<template>
    <header class="layout-header text-white bg-primary">
        <div class="header-contain">
            <!-- 移动端菜单按钮 -->
            <button
                v-if="isMobile"
                @click="showMobileMenu = !showMobileMenu"
                class="md:hidden mr-2 p-2 rounded-lg hover:bg-primary-dark transition-colors"
            >
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                        v-if="!showMobileMenu"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M4 6h16M4 12h16M4 18h16"
                    />
                    <path
                        v-else
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M6 18L18 6M6 6l12 12"
                    />
                </svg>
            </button>

            <Logo class="flex-none mr-4" :class="{'mr-2': isMobile}" />

            <!-- 桌面端导航栏 -->
            <Navbar v-if="!isMobile" class="w-[600px]" />

            <div class="flex-1"></div>

            <!-- 搜索框 - 移动端显示图标，点击展开 -->
            <div class="relative">
                <!-- 移动端搜索图标 -->
                <button
                    v-if="isMobile && !showSearch"
                    @click="showSearch = true"
                    class="md:hidden mr-4 p-2 rounded-lg hover:bg-primary-dark transition-colors"
                >
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </button>

                <!-- 移动端搜索框 -->
                <div
                    v-if="isMobile && showSearch"
                    class="md:hidden absolute right-0 top-0 z-10 bg-primary p-2 rounded-lg shadow-lg"
                >
                    <Search class="w-[200px]" />
                    <button
                        @click="showSearch = false"
                        class="absolute -top-1 -right-1 p-1 bg-white text-primary rounded-full"
                    >
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                <!-- 桌面端搜索框 -->
                <Search v-if="!isMobile" class="mr-[40px] flex-none" />
            </div>

            <User class="flex-none" />
        </div>

        <!-- 移动端导航菜单 -->
        <div
            v-if="isMobile && showMobileMenu"
            class="md:hidden absolute top-full left-0 right-0 bg-primary shadow-lg z-50"
        >
            <Navbar
                class="w-full"
                mode="vertical"
                @item-click="showMobileMenu = false"
            />
        </div>
    </header>
</template>

<script lang="ts" setup>
import User from './user.vue'
import Search from './search.vue'
import Logo from './logo.vue'
import Navbar from './navbar.vue'
import { ref, onMounted, onUnmounted } from 'vue'

// 响应式判断
const isMobile = ref(false)
const showMobileMenu = ref(false)
const showSearch = ref(false)

const checkMobile = () => {
    isMobile.value = window.outerWidth < 768 // Tailwind md断点
}

onMounted(() => {
    checkMobile()
    window.addEventListener('resize', checkMobile)
    // 点击外部关闭移动菜单和搜索
    window.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
    window.removeEventListener('resize', checkMobile)
    window.removeEventListener('click', handleClickOutside)
})

// 点击外部关闭移动菜单和搜索
const handleClickOutside = (event: MouseEvent) => {
    const header = document.querySelector('.layout-header')
    if (header && !header.contains(event.target as Node)) {
        showMobileMenu.value = false
        showSearch.value = false
    }
}

// 路由变化时关闭移动菜单
const route = useRoute()
watch(() => route.path, () => {
    showMobileMenu.value = false
    showSearch.value = false
})
</script>

<style lang="scss" scoped>
.layout-header {
    height: var(--header-height);
    border-bottom: 1px solid var(--el-border-color-extra-light);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1999;

    .header-contain {
        height: 100%;
        display: flex;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;

        @media (min-width: 768px) {
            padding: 0;
        }

        .navbar {
            --el-menu-item-font-size: var(--el-font-size-large);
            --el-menu-bg-color: var(--el-color-primary);
            --el-menu-active-color: var(--color-white);
            --el-menu-text-color: var(--color-white);
            --el-menu-item-hover-fill: var(--el-color-primary);
            --el-menu-hover-text-color: var(--color-white);
            --el-menu-hover-bg-color: var(--el-color-primary);
        }
    }
}
</style>