zmAI/demo/frontend/src/components/CreationHeader.vue

<template>
  <!-- 顶部导航栏 -->
  <header class="creation-header">
    <div class="header-left">
      <button class="back-btn" @click="goBack">
        ← {{ t('common.home') }}
      </button>
    </div>
    <div class="header-right">
      <div class="points-display">
        <div class="points-icon">
          <StarOutlined />
        </div>
        <span class="points-number">{{ userStore.availablePoints }}</span>
      </div>
      <LanguageSwitcher />
      <div class="user-avatar" @click="toggleUserMenu" ref="userAvatarRef">
        <img src="/images/backgrounds/avatar-default.svg" alt="Avatar" />
      </div>
    </div>
  </header>

  <!-- 用户菜单下拉 -->
  <Teleport to="body">
    <div v-if="showUserMenu" class="creation-user-menu" :style="menuStyle">
      <!-- 管理员功能 -->
      <template v-if="userStore.isAdmin">
        <div class="menu-item" @click.stop="navigateTo('/admin/dashboard')">
          <UserOutlined />
          <span>{{ t('profile.dashboard') }}</span>
        </div>
        <div class="menu-item" @click.stop="navigateTo('/admin/orders')">
          <FileOutlined />
          <span>{{ t('profile.orderManagement') }}</span>
        </div>
        <div class="menu-item" @click.stop="navigateTo('/member-management')">
          <UserOutlined />
          <span>{{ t('profile.memberManagement') }}</span>
        </div>
        <div class="menu-item" @click.stop="navigateTo('/system-settings')">
          <SettingOutlined />
          <span>{{ t('profile.systemSettings') }}</span>
        </div>
        <div class="menu-item" @click.stop="navigateTo('/admin/error-statistics')">
          <WarningOutlined />
          <span>{{ t('nav.errorStats') }}</span>
        </div>
        <div class="menu-item" @click.stop="navigateTo('/api-management')">
          <FileOutlined />
          <span>{{ t('nav.apiManagement') }}</span>
        </div>
        <div class="menu-item" @click.stop="navigateTo('/generate-task-record')">
          <FileOutlined />
          <span>{{ t('nav.tasks') }}</span>
        </div>
      </template>
      <!-- 修改密码 -->
      <div class="menu-item" @click.stop="navigateTo('/change-password')" style="cursor: pointer;">
        <LockOutlined />
        <span>{{ t('profile.changePassword') }}</span>
      </div>
      <!-- 退出登录 -->
      <div class="menu-item" @click.stop="handleLogout">
        <PoweroffOutlined />
        <span>{{ t('common.logout') }}</span>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { StarOutlined, UserOutlined, SettingOutlined, PoweroffOutlined, LockOutlined, FileOutlined, WarningOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '@/stores/user'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'

const router = useRouter()
const userStore = useUserStore()
const { t } = useI18n()

const showUserMenu = ref(false)
const userAvatarRef = ref(null)

const menuStyle = computed(() => {
  if (!userAvatarRef.value || !showUserMenu.value) return {}
  const rect = userAvatarRef.value.getBoundingClientRect()
  return {
    position: 'fixed',
    top: `${rect.bottom + 8}px`,
    right: `${window.innerWidth - rect.right}px`,
    zIndex: 99999
  }
})

const goBack = () => {
  router.push('/')
}

const toggleUserMenu = () => {
  if (!userStore.isAuthenticated) {
    router.push('/login')
    return
  }
  showUserMenu.value = !showUserMenu.value
}

const navigateTo = (path) => {
  showUserMenu.value = false
  router.push(path)
}

const handleLogout = async () => {
  showUserMenu.value = false
  await userStore.logoutUser()
  router.push('/login')
}
</script>

<style scoped>
.creation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 60px;
  flex-shrink: 0;
}

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

.back-btn {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: var(--text-base);
  cursor: pointer;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  transition: var(--transition-all);
  font-weight: var(--font-medium);
}

.back-btn:hover {
  background: var(--bg-surface);
  transform: translateX(-2px);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.points-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(64, 158, 255, 0.3);
}

.points-icon {
  width: 20px;
  height: 20px;
  background: var(--primary-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: var(--text-xs);
}

.points-number {
  color: var(--primary-500);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-default);
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar:hover {
  transform: scale(1.05);
}

/* 用户菜单 */
.creation-user-menu {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  overflow: hidden;
  z-index: 99999;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-default);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.menu-item:hover {
  background: var(--bg-hover);
}

.menu-item .anticon {
  margin-right: 8px;
  font-size: var(--text-base);
}

.menu-item:not(:last-child) {
  border-bottom: 1px solid var(--border-default);
}
</style>