feat(i18n): set up vue-i18n with dynamic locale loading

frontend/src/i18n/index.js

@@ -0,0 +1,27 @@
+import { createI18n } from 'vue-i18n'
+import languages from '../../../locales/languages.json'
+
+const localeFiles = import.meta.glob('../../../locales/!(languages).json', { eager: true })
+
+const messages = {}
+const availableLocales = []
+
+for (const path in localeFiles) {
+  const key = path.match(/\/([^/]+)\.json$/)[1]
+  if (languages[key]) {
+    messages[key] = localeFiles[path].default
+    availableLocales.push({ key, label: languages[key].label })
+  }
+}
+
+const savedLocale = localStorage.getItem('locale') || 'zh'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: savedLocale,
+  fallbackLocale: 'zh',
+  messages
+})
+
+export { availableLocales }
+export default i18n

frontend/src/main.js

@@ -1,9 +1,11 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import i18n from './i18n'
 
 const app = createApp(App)
 
 app.use(router)
+app.use(i18n)
 
 app.mount('#app')