tyapi-frontend/src/components/layout/AppHeader.vue

<template>
  <el-header class="app-header">
    <div class="header-container">
      <!-- 左侧Logo和菜单按钮 -->
      <div class="header-left">
        <el-button
          @click="appStore.toggleSidebar"
          :icon="Menu"
          circle
          text
          class="menu-button"
        />

        <div class="header-title">
          <h1 class="title-text">{{ title }}</h1>
          <el-tag v-if="badge" :type="badgeType" size="small" class="badge-tag">
            {{ badge }}
          </el-tag>
        </div>
      </div>

      <!-- 右侧用户信息和通知 -->
      <div class="header-right">
        <!-- 通知按钮 -->
        <!-- <el-button
          @click="showNotifications = !showNotifications"
          :icon="Bell"
          circle
          text
          class="notification-button"
        >
          <el-badge
            v-if="appStore.notifications.length > 0"
            :value="appStore.notifications.length"
            :type="theme === 'admin' ? 'danger' : 'primary'"
            class="notification-badge"
          />
        </el-button> -->

        <!-- 用户下拉菜单 -->
        <el-dropdown @command="handleUserCommand" trigger="click" class="user-dropdown">
          <div class="user-info">
            <el-avatar :size="32" :src="userStore.user?.avatar" class="user-avatar">
              {{ userStore.user?.name?.charAt(0) || (theme === 'admin' ? 'A' : 'U') }}
            </el-avatar>
            <div class="user-details">
              <p class="user-name">
                {{ userStore.user?.name || (theme === 'admin' ? '管理员' : '用户') }}
              </p>
              <p class="user-phone">{{ userStore.user?.phone || '' }}</p>
            </div>
            <el-icon class="dropdown-icon">
              <ArrowDown />
            </el-icon>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <el-icon class="dropdown-item-icon">
                  <User />
                </el-icon>
                个人中心
              </el-dropdown-item>
              <el-dropdown-item command="home">
                <el-icon class="dropdown-item-icon">
                  <Home />
                </el-icon>
                返回官网
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon class="dropdown-item-icon">
                  <Switch />
                </el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>

<script setup>
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import {
  ChevronDownIcon as ArrowDown,
  HomeIcon as Home,
  Bars3Icon as Menu,
  ArrowRightOnRectangleIcon as Switch,
  UserIcon as User
} from '@heroicons/vue/24/outline'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  badge: {
    type: String,
    default: ''
  },
  badgeType: {
    type: String,
    default: 'primary'
  },
  theme: {
    type: String,
    default: 'user', // 'user' | 'admin'
    validator: (value) => ['user', 'admin'].includes(value)
  }
})

const emit = defineEmits(['user-command'])

const router = useRouter()
const userStore = useUserStore()
const appStore = useAppStore()

const showNotifications = ref(false)

// 处理用户菜单命令
const handleUserCommand = async (command) => {
  // switch (command) {
  //   case 'profile':
  //     router.push('/profile')
  //     break
  //   case 'settings':
  //     router.push(props.theme === 'admin' ? '/admin/system' : '/profile/settings')
  //     break
  //   case 'switchToUser':
  //     router.push('/products')
  //     break
  //   case 'logout':
  //     try {
  //       await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
  //         confirmButtonText: '确定',
  //         cancelButtonText: '取消',
  //         type: 'warning'
  //       })
  //       userStore.logout()
  //       router.push('/auth/login')
  //     } catch {
  //       // 用户取消
  //     }
  //     break
  // }

  emit('user-command', command)
}
</script>

<style scoped>
.app-header {
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 0;
  height: 60px;
  line-height: 60px;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-button {
  color: #606266;
  font-size: 18px;
}

.menu-button:hover {
  color: #409eff;
  background-color: #f5f7fa;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-text {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  line-height: 1;
}

.badge-tag {
  margin-left: 8px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notification-button {
  position: relative;
  color: #606266;
  font-size: 18px;
}

.notification-button:hover {
  color: #409eff;
  background-color: #f5f7fa;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
}

.user-dropdown {
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.user-avatar {
  flex-shrink: 0;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin: 0;
  line-height: 1;
}

.user-phone {
  font-size: 12px;
  color: #909399;
  margin: 0;
  line-height: 1;
}

.dropdown-icon {
  color: #c0c4cc;
  font-size: 12px;
  transition: transform 0.2s;
}

.user-dropdown:hover .dropdown-icon {
  transform: rotate(180deg);
}

.dropdown-item-icon {
  margin-right: 8px;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-container {
    padding: 0 16px;
  }

  .header-left {
    gap: 12px;
  }

  .title-text {
    font-size: 16px;
  }

  .user-details {
    display: none;
  }

  .user-info {
    padding: 6px 8px;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 0 12px;
  }

  .header-left {
    gap: 8px;
  }

  .title-text {
    font-size: 14px;
  }

  .badge-tag {
    display: none;
  }

  .header-right {
    gap: 12px;
  }
}
</style>