thebet365/apps/player/src/components/desktop/DesktopTopNav.vue

<script setup lang="ts">
import { computed } from 'vue';
import { RouterLink, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '../../stores/auth';
import LocaleSwitcher from '../LocaleSwitcher.vue';
import CashBalanceChip from '../CashBalanceChip.vue';
import UserAvatarMenu from '../UserAvatarMenu.vue';

const { t } = useI18n();
const route = useRoute();
const auth = useAuthStore();

const activeTab = computed(() => {
  const p = route.path;
  if (p === '/') return 'home';
  if (p === '/bet' || p.startsWith('/match/') || p.startsWith('/outright/')) return 'sports';
  if (p === '/bets' || p.startsWith('/bets/')) return 'bet_history';
  if (p.startsWith('/wallet') || p.startsWith('/profile')) return 'my_wallet';
  if (p.startsWith('/messages')) return 'messages';
  return '';
});
</script>

<template>
  <div class="desktop-top-nav">
    <RouterLink to="/" class="logo-wrap">
      <img src="/logo.png" alt="TheBet365" class="logo" />
      <span class="site-name">TheBet365</span>
    </RouterLink>
    <nav class="nav-menu">
      <RouterLink
        to="/"
        class="nav-link"
        :class="{ active: activeTab === 'home' }"
      >
        {{ t('nav.home') }}
      </RouterLink>

      <RouterLink
        to="/bet"
        class="nav-link"
        :class="{ active: activeTab === 'sports' }"
      >
        {{ t('nav.sports') }}
      </RouterLink>

      <RouterLink
        to="/bets"
        class="nav-link"
        :class="{ active: activeTab === 'bet_history' }"
      >
        {{ t('nav.bet_history') }}
      </RouterLink>

      <RouterLink
        to="/wallet"
        class="nav-link"
        :class="{ active: activeTab === 'my_wallet' }"
      >
        {{ t('nav.my_wallet') }}
      </RouterLink>
    </nav>

    <div class="nav-right">
      <LocaleSwitcher />
      <template v-if="auth.user">
        <CashBalanceChip />
        <UserAvatarMenu />
      </template>
      <div v-else class="auth-buttons">
        <button
          type="button"
          class="login-btn"
          @click="auth.showLoginPrompt(route.fullPath)"
        >
          {{ t('auth.login') }}
        </button>
        <RouterLink to="/register" class="register-btn">
          {{ t('auth.register') || '注册' }}
        </RouterLink>
      </div>
    </div>
  </div>
</template>

<style scoped>
.desktop-top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 1;
}

.logo {
  height: 38px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 4px rgba(0, 102, 204, 0.2));
}

.site-name {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 8px rgba(0, 102, 204, 0.15);
  transition: opacity 0.2s;
}

.logo-wrap:hover .site-name {
  opacity: 0.85;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}

.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--text-muted);
  padding: 18px 4px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link:hover {
  color: var(--primary-light);
}

.nav-link.active {
  color: var(--primary-light);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -1px 8px rgba(0, 102, 204, 0.5);
}

.badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: flex-end;
}

.auth-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-btn {
  padding: 6px 18px;
  border-radius: 4px;
  border: 1px solid var(--border-active);
  background: rgba(0, 102, 204, 0.05);
  color: var(--primary-light);
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s;
}

.login-btn:hover {
  background: rgba(0, 102, 204, 0.12);
  border-color: var(--primary);
}

.register-btn {
  padding: 7px 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  transition: opacity 0.2s;
}

.register-btn:hover {
  opacity: 0.9;
}

/* Override locale switcher and other header action height */
:deep(.locale-switch:not(.compact)),
:deep(.cash-chip),
:deep(.avatar-btn) {
  height: 34px !important;
  box-sizing: border-box;
}
:deep(.avatar-btn) {
  width: 34px !important;
}
</style>