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> |
||
|---|---|---|
| .. | ||
| scripts | ||
| src | ||
| .gitignore | ||
| inbounds.html | ||
| index.html | ||
| login.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| settings.html | ||
| vite.config.js | ||
| xray.html | ||
3x-ui frontend
Vue 3 + Ant Design Vue 4 + Vite. Builds into ../web/dist/, which the
Go binary will embed via embed.FS once the migration reaches the page
handlers (Phase 4+).
This directory exists alongside the legacy web/html/ Vue 2 templates
during the migration. Pages will move over one at a time on the
vue3-migration branch.
Dev
cd frontend
npm install
npm run dev
The dev server runs on http://localhost:5173/ and proxies API calls to
the Go panel at http://localhost:2053/ — start the Go panel first
(go run main.go), then start Vite.
Production build
npm run build
Outputs to ../web/dist/. The Go binary picks it up at compile time via
embed.FS.
Where things live
src/main.js— app entrypoint (createApp, install Antd, mount)src/App.vue— root component (currently a smoke-test placeholder)vite.config.js— build + dev-server configindex.html— Vite HTML template
Adding new pages
For each legacy page being migrated, add an entry to
vite.config.js rollupOptions.input. Each entry produces its own
HTML file in web/dist/, which the Go panel route handler will serve.