refactor: get locales from i18n config

components/nav/SelectLanguage.vue

@@ -1,24 +1,12 @@
 <script lang="ts" setup>
+import type { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables'
+import type { ComputedRef } from 'vue'
 import { STORAGE_KEY_LANG } from '~/constants'
 
 const { locale, t } = useI18n()
 useLocalStorage(STORAGE_KEY_LANG, locale)
 
-// TODO: read from $i18n https://i18n.nuxtjs.org/lang-switcher
+const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
-const languageList = [
-  {
-    value: 'en-US',
-    label: 'English',
-  },
-  {
-    value: 'de-DE',
-    label: 'Deutsch',
-  },
-  {
-    value: 'zh-CN',
-    label: '简体中文',
-  },
-]
 </script>
 
 <template>
@@ -30,12 +18,12 @@ const languageList = [
 
       <template #popper>
         <CommonDropdownItem
-          v-for="item in languageList"
+          v-for="item in locales"
-          :key="item.value"
+          :key="item.code"
-          :checked="item.value === locale"
+          :checked="item.code === locale"
-          @click="locale = item.value"
+          @click="locale = item.code"
         >
-          {{ item.label }}
+          {{ item.name }}
         </CommonDropdownItem>
       </template>
     </CommonDropdown>