front/src/components/LanguageSwitcher.vue

<template>
  <div class="lang-switcher" role="group" :aria-label="t('nav.langZh')">
    <button
      v-for="item in SUPPORTED_LOCALES"
      :key="item.value"
      type="button"
      class="lang-btn"
      :class="{ 'lang-btn--active': locale === item.value }"
      @click="switchLocale(item.value)"
    >
      {{ t(item.labelKey) }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { setAppLocale, SUPPORTED_LOCALES, type AppLocale } from '../i18n'

const { t, locale: i18nLocale } = useI18n()
const locale = computed(() => i18nLocale.value as AppLocale)

const switchLocale = (next: AppLocale) => {
  if (next === locale.value) return
  setAppLocale(next)
}
</script>

<style scoped>
.lang-switcher {
  display: inline-flex;
  border: 1px solid var(--ramex-border);
  border-radius: var(--ramex-radius);
  overflow: hidden;
}

.lang-btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ramex-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-btn:hover {
  color: var(--ramex-text);
  background: var(--ramex-bg-subtle);
}

.lang-btn--active {
  color: var(--ramex-text);
  font-weight: 600;
  background: var(--ramex-bg-subtle);
}
</style>