officialWebsite/src/App.vue

<script setup>
import { ref } from "vue";

import { useI18n } from "vue-i18n";
import { NConfigProvider, NDropdown } from "naive-ui";
const { locale } = useI18n();
const primaryColor = ref("#2B69A1");
const themeOverrides = ref({
  common: {
    primaryColorPressed: primaryColor,
    primaryHover: primaryColor,
    primaryDefault: primaryColor,
    primaryActive: primaryColor,
    primarySuppl: primaryColor,
    primaryColor: primaryColor,
    primaryColorHover: primaryColor,
  },
});

const languageOptions = [
  {
    label: "简体中文",
    key: "zh",
  },
  {
    label: "繁體中文",
    key: "zh-TW",
  },
  {
    label: "English",
    key: "en",
  },
  {
    label: "日本語",
    key: "ja",
  },
];

const handleLanguageChange = (key) => {
  locale.value = key;
  localStorage.setItem("language", key);
};
</script>

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <!-- <n-dropdown
      trigger="hover"
      :options="languageOptions"
      @select="handleLanguageChange"
      class="lang-switch"
    >
      <div class="lang-text">
        {{ languageOptions.find(opt => opt.key === locale)?.label }}
      </div>
    </n-dropdown> -->
    <router-view />
  </n-config-provider>
</template>

<style>
.lang-text {
  padding: 5px 10px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
</style>