mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-05-31 17:39:35 +00:00
35efeb983e
Sets up vue-i18n on top of the panel's existing TOML translation files. The Go side stays the source of truth — translators continue to edit web/translation/*.toml; a sync script snapshots those files into per-locale JSON the Vue bundle imports. The login page is translated end-to-end as a worked example; remaining pages can be converted incrementally without infrastructure churn. What's in the box: - scripts/sync-locales.mjs: small TOML→JSON converter that walks web/translation/*.toml and writes frontend/src/locales/<code>.json. Handles the narrow subset of TOML the panel uses (flat key/value pairs + dotted [section.subsection] heads). Wired as a `prebuild` + `predev` script so production builds always include the latest strings without a manual step. - src/i18n/index.js: createI18n() in composition mode with all 13 locales emitted as their own Vite chunks. The active locale (read from the same `lang` cookie LanguageManager has always managed) plus the en-US fallback are eagerly loaded; the rest are dynamically importable via a loadLocale(code) helper. This keeps the per-page bundle the user actually downloads small — only ~30 KB of strings end up in the initial payload, vs ~220 KB if all 13 were eager. - All five page entries (index/login/settings/inbounds/xray) wire the i18n plugin into createApp via .use(i18n). - LoginPage.vue: t(...) replaces hardcoded English on the username / password / 2FA placeholders, the submit button label, and the Settings popover title. The Hello/Welcome headline cycle stays hardcoded — those are stylistic, not labels. The 'Hello'/'Welcome' cycle stays in English deliberately; the rest of the migration's components still ship hardcoded English and will be converted page by page in follow-up commits. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
18 lines
517 B
JavaScript
18 lines
517 B
JavaScript
import { createApp } from 'vue';
|
|
import Antd, { message } from 'ant-design-vue';
|
|
import 'ant-design-vue/dist/reset.css';
|
|
|
|
import { setupAxios } from '@/api/axios-init.js';
|
|
import '@/composables/useTheme.js';
|
|
import { i18n } from '@/i18n/index.js';
|
|
import XrayPage from '@/pages/xray/XrayPage.vue';
|
|
|
|
setupAxios();
|
|
|
|
const messageContainer = document.getElementById('message');
|
|
if (messageContainer) {
|
|
message.config({ getContainer: () => messageContainer });
|
|
}
|
|
|
|
createApp(XrayPage).use(Antd).use(i18n).mount('#app');
|