Skip to content

feat(i18n): Add Chinese/English language toggle with vue-i18n#244

Open
pjhoberman wants to merge 2 commits into666ghj:mainfrom
pjhoberman:feat/i18n-en
Open

feat(i18n): Add Chinese/English language toggle with vue-i18n#244
pjhoberman wants to merge 2 commits into666ghj:mainfrom
pjhoberman:feat/i18n-en

Conversation

@pjhoberman
Copy link
Copy Markdown

@pjhoberman pjhoberman commented Mar 18, 2026

Summary

  • Adds full internationalization support using vue-i18n with Chinese (zh-CN) as default and English (en) as alternative
  • Language toggle button in every page header — persists preference in localStorage
  • 262 translation keys covering all user-facing text across 14 components and 7 views
  • Chinese regex patterns that parse backend LLM responses are preserved unchanged
  • Fixes API base URL to use window.location.hostname instead of hardcoded localhost
image image

Implementation

  • vue-i18n with Composition API mode (legacy: false)
  • Locale files: frontend/src/i18n/locales/zh-CN.js and en.js with nested keys by area (home.*, step1.*, header.*, common.*, etc.)
  • useLocaleToggle composable for shared toggle logic across views
  • Vite @ alias configured for clean imports

What's NOT translated (intentionally)

  • Chinese regex patterns in Step4Report.vue parsing backend LLM report output
  • Chinese stage name matchers in Step2EnvSetup.vue matching backend status values
  • console.log/console.error messages (developer-facing)

Files changed (23)

Type Files
New i18n/index.js, i18n/locales/zh-CN.js, i18n/locales/en.js, i18n/useLocaleToggle.js
Config package.json, vite.config.js, main.js
Views (7) Home, MainView, Process, SimulationView, SimulationRunView, ReportView, InteractionView
Components (7) GraphPanel, HistoryDatabase, Step1-5
API api/index.js (baseURL fix)

Test plan

  • npm run dev starts without errors
  • UI loads in Chinese by default
  • Language toggle switches all visible text to English
  • Language preference persists across page refresh
  • Backend API communication still works (regex patterns preserved)
  • Remote access works via non-localhost hostname

Closes #117
Closes #182

🤖 Generated with Claude Code

Add internationalization support to the MiroFish frontend with
Chinese (zh-CN) as the default language and English (en) as an
alternative, switchable via a toggle button in the header.

Changes:
- Install vue-i18n and configure with Composition API mode
- Create zh-CN and en locale files with ~262 translation keys
- Add useLocaleToggle composable for shared language toggle logic
- Replace hardcoded Chinese strings with $t() calls across all
  14 Vue components and 7 views
- Add language toggle button to all page headers
- Persist language preference in localStorage
- Configure Vite @ path alias for clean imports

Chinese regex patterns that parse backend LLM responses are
intentionally preserved unchanged (Step4Report.vue, Step2EnvSetup.vue).

Also fixes API base URL to use window.location.hostname instead of
hardcoded localhost, enabling remote access.

Closes 666ghj#117
Closes 666ghj#182

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@dosubot dosubot Bot added the size:XXL This PR changes 1000+ lines, ignoring generated files. label Mar 18, 2026
@pjhoberman pjhoberman marked this pull request as draft March 18, 2026 19:54
@dosubot dosubot Bot added the enhancement New feature or request label Mar 18, 2026
@pjhoberman pjhoberman marked this pull request as ready for review March 18, 2026 19:59
The Home page navbar is transparent (not dark as assumed), so the
white-on-transparent button was invisible. Use explicit light gray
background with dark text for guaranteed visibility on any background.
Also increase button size across all views for better discoverability.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request size:XXL This PR changes 1000+ lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature Request: Add Internationalization (i18n) Support ### Feature Request: English Language Support

1 participant