feat(i18n): create set locale component

Author: ikxin

app/components/common/set-locale.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+const { locales, setLocale } = useI18n()
+
+const getIcon = (code: string) => {
+  /**
+   * 根据中华人民共和国宪法
+   * 台湾是中华人民共和国的神圣领土的一部分
+   */
+  return {
+    'zh-cn': 'i-flag-cn-4x3',
+    'zh-tw': 'i-flag-tw-4x3',
+    'de': 'i-flag-de-4x3',
+    'en': 'i-flag-us-4x3',
+    'fr': 'i-flag-fr-4x3',
+    'ja': 'i-flag-jp-4x3',
+    'ko': 'i-flag-kr-4x3',
+    'nl': 'i-flag-nl-4x3',
+    'ru': 'i-flag-ru-4x3',
+  }?.[code]
+}
+
+const items = [
+  locales.value.map((locale) => {
+    return {
+      label: locale.name,
+      icon: getIcon(locale.code),
+      click: () => setLocale(locale.code),
+    }
+  }),
+]
+</script>
+
+<template>
+  <UDropdown
+    :items
+    :popper="{ placement: 'bottom' }"
+  >
+    <UButton>
+      <template #trailing>
+        <Icon name="mdi:translate" />
+      </template>
+    </UButton>
+  </UDropdown>
+</template>

app/locales/de.json

@@ -0,0 +1,11 @@
+{
+  "label": {
+    "create-client": "Client erstellen",
+    "host": "Hostname",
+    "port": "Port",
+    "username": "Benutzername",
+    "password": "Passwort",
+    "https": "HTTPS",
+    "entrance": "Eingangsadresse"
+  }
+}

app/locales/fr.json

@@ -0,0 +1,11 @@
+{
+  "label": {
+    "create-client": "Créer un client",
+    "host": "Nom d'hôte",
+    "port": "Port",
+    "username": "Nom d'utilisateur",
+    "password": "Mot de passe",
+    "https": "HTTPS",
+    "entrance": "Adresse d'entrée"
+  }
+}

app/locales/ja.json

@@ -0,0 +1,11 @@
+{
+  "label": {
+    "create-client": "クライアントを作成",
+    "host": "ホスト名",
+    "port": "ポート",
+    "username": "ユーザー名",
+    "password": "パスワード",
+    "https": "HTTPS",
+    "entrance": "入口アドレス"
+  }
+}

app/locales/ko.json

@@ -0,0 +1,11 @@
+{
+  "label": {
+    "create-client": "클라이언트 생성",
+    "host": "호스트 이름",
+    "port": "포트",
+    "username": "사용자 이름",
+    "password": "비밀번호",
+    "https": "HTTPS",
+    "entrance": "입구 주소"
+  }
+}

app/locales/nl.json

@@ -0,0 +1,11 @@
+{
+  "label": {
+    "create-client": "Klant maken",
+    "host": "Hostnaam",
+    "port": "Poort",
+    "username": "Gebruikersnaam",
+    "password": "Wachtwoord",
+    "https": "HTTPS",
+    "entrance": "Toegangsadres"
+  }
+}

app/locales/ru.json

@@ -0,0 +1,11 @@
+{
+  "label": {
+    "create-client": "Создать клиента",
+    "host": "Имя хоста",
+    "port": "Порт",
+    "username": "Имя пользователя",
+    "password": "Пароль",
+    "https": "HTTPS",
+    "entrance": "Адрес входа"
+  }
+}

app/locales/zh-tw.json

@@ -0,0 +1,11 @@
+{
+  "label": {
+    "create-client": "創建客戶端",
+    "host": "主機名",
+    "port": "端口",
+    "username": "用戶名",
+    "password": "密碼",
+    "https": "HTTPS",
+    "entrance": "入口地址"
+  }
+}

nuxt.config.ts

@@ -29,6 +29,9 @@ export default defineNuxtConfig({
       },
     },
   },
+  ui: {
+    icons: ['flag'],
+  },
   eslint: {
     config: {
       stylistic: {
@@ -39,11 +42,18 @@ export default defineNuxtConfig({
     },
   },
   i18n: {
-    defaultLocale: 'en',
+    defaultLocale: 'zh-cn',
     langDir: 'locales',
     locales: [
-      { code: 'en', file: 'en.json', name: 'English' },
       { code: 'zh-cn', file: 'zh-cn.json', name: '简体中文' },
+      { code: 'zh-tw', file: 'zh-tw.json', name: '繁體中文' },
+      { code: 'de', file: 'de.json', name: 'Deutsch' },
+      { code: 'en', file: 'en.json', name: 'English' },
+      { code: 'fr', file: 'fr.json', name: 'Français' },
+      { code: 'ja', file: 'ja.json', name: '日本語' },
+      { code: 'ko', file: 'ko.json', name: '한국어' },
+      { code: 'nl', file: 'nl.json', name: 'Nederlands' },
+      { code: 'ru', file: 'ru.json', name: 'Русский' },
     ],
     strategy: 'no_prefix',
   },

package.json

@@ -14,6 +14,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@iconify-json/flag": "^1.1.53",
     "@nuxt/eslint": "^0.3.13",
     "@nuxt/ui-pro": "^1.3.1",
     "@nuxtjs/i18n": "^8.3.1",