feat: switch language by navigator.language

Author: ddiu8081

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@unocss/reset": "^0.44.5",
+    "@vueuse/core": "^8.9.4",
     "vue": "^3.2.37",
     "vue-i18n": "9"
   },

pnpm-lock.yaml

@@ -21,7 +21,7 @@ const locales = {
           back: "Back"
       }
   },
-  zh_cn: {
+  zh: {
       basic: {
           o: "奥",
           r: "利",
@@ -65,7 +65,7 @@ const locales = {
           back: "元に戻す"
       }
   },
-  de_de: {
+  de: {
       basic: {
           o: "O | o",
           r: "Re | re",

src/locales.ts

@@ -6,10 +6,13 @@ import '@unocss/reset/eric-meyer.css'
 import App from './App.vue'
 import messages from './locales'
 
+const localeKeyList = ['en', 'zh', 'ja', 'de']
+const currentLocale = localeKeyList.find(key => navigator.language.startsWith(key)) || 'en'
+
 const i18n = createI18n({
   legacy: false,
-  locale: 'zh_cn',
-  fallbackLocale: 'zh_cn',
+  locale: currentLocale,
+  fallbackLocale: 'zh',
   messages,
 })
 

src/main.ts

@@ -7,7 +7,7 @@ const emit = defineEmits<{
   (e: 'submit', value: OreoKey[]): void
 }>()
 
-const { t, locale } = useI18n()
+const { t } = useI18n()
 let oreoList = $ref<OreoKey[]>([])
 const oreoFormattedStr = $computed(() => formattedOreoStr(oreoList, t))
 
@@ -99,10 +99,4 @@ const generateRandomOreo = () => {
       {{ t('input.generate') }}
     </footer>
   </main>
-  <select v-model="locale" mt-3>
-    <option value="en">en</option>
-    <option value="zh_cn">zh</option>
-    <option value="ja">ja</option>
-    <option value="de_de">de</option>
-  </select>
 </template>