feat: add language selector and lazy-load i18n infrastructure

Updated i18n.ts with SUPPORTED_LOCALES, setLocale() lazy loading,
localStorage persistence. Added language selector in Settings.vue.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-14 05:41:33 +00:00
parent abb85d51a1
commit 01d1caa21b
2 changed files with 59 additions and 3 deletions

View File

@@ -453,6 +453,23 @@
</div>
</div>
<!-- Language Section -->
<div class="glass-card px-6 py-6 mb-6">
<h2 class="text-xl font-semibold text-white/96 mb-2">Language</h2>
<p class="text-sm text-white/60 mb-4">Choose your preferred language</p>
<div class="flex gap-3 flex-wrap">
<button
v-for="loc in supportedLocales"
:key="loc.code"
@click="changeLocale(loc.code)"
class="glass-button px-4 py-2 rounded-lg text-sm font-medium transition-all"
:class="currentLocale === loc.code ? 'ring-2 ring-orange-400/60 bg-white/10' : ''"
>
<span class="mr-2">{{ loc.flag }}</span>{{ loc.name }}
</button>
</div>
</div>
<!-- Claude Authentication Section -->
<div class="glass-card px-6 py-6 mb-6">
<h2 class="text-xl font-semibold text-white/96 mb-2">{{ t('settings.claudeAuth') }}</h2>
@@ -818,6 +835,7 @@
import { computed, ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { SUPPORTED_LOCALES, setLocale, type SupportedLocale } from '@/i18n'
import { useAppStore } from '../stores/app'
import { useUIModeStore } from '@/stores/uiMode'
import { useAIPermissionsStore, AI_PERMISSION_CATEGORIES } from '@/stores/aiPermissions'
@@ -827,8 +845,13 @@ import { useModalKeyboard } from '@/composables/useModalKeyboard'
import type { UIMode } from '@/types/api'
const router = useRouter()
const { t } = useI18n()
const { t, locale } = useI18n()
const store = useAppStore()
const supportedLocales = SUPPORTED_LOCALES
const currentLocale = computed(() => locale.value)
async function changeLocale(code: string) {
await setLocale(code as SupportedLocale)
}
const uiMode = useUIModeStore()
const aiPermissions = useAIPermissionsStore()
const aiCategoryGroups = computed(() => {