feat(i18n): Add English language support with vue-i18n

frontend/package.json

@@ -12,6 +12,7 @@
     "axios": "1.13.2",
     "d3": "^7.9.0",
     "vue": "^3.5.24",
+    "vue-i18n": "^9.14.5",
     "vue-router": "^4.6.3"
   },
   "devDependencies": {

frontend/src/components/HistoryDatabase.vue

@@ -10,10 +10,10 @@
       <div class="gradient-overlay"></div>
     </div>
 
-    <!-- 标题区域 -->
+    <!-- Title Section -->
     <div class="section-header">
       <div class="section-line"></div>
-      <span class="section-title">推演记录</span>
+      <span class="section-title">{{ t('components.history.title') }}</span>
       <div class="section-line"></div>
     </div>
 
@@ -33,20 +33,20 @@
         <div class="card-header">
           <span class="card-id">{{ formatSimulationId(project.simulation_id) }}</span>
           <div class="card-status-icons">
-            <span 
-              class="status-icon" 
-              :class="{ available: project.project_id, unavailable: !project.project_id }"
-              title="图谱构建"
-            >◇</span>
-            <span 
-              class="status-icon available" 
-              title="环境搭建"
-            >◈</span>
-            <span 
-              class="status-icon" 
-              :class="{ available: project.report_id, unavailable: !project.report_id }"
-              title="分析报告"
-            >◆</span>
+             <span
+               class="status-icon"
+               :class="{ available: project.project_id, unavailable: !project.project_id }"
+               :title="t('components.step1.title')"
+             >◇</span>
+             <span
+               class="status-icon available"
+               :title="t('components.step2.title')"
+             >◈</span>
+             <span
+               class="status-icon"
+               :class="{ available: project.report_id, unavailable: !project.report_id }"
+               :title="t('components.step4.title')"
+             >◆</span>
           </div>
         </div>
 
@@ -99,10 +99,10 @@
       </div>
     </div>
 
-    <!-- 加载状态 -->
+    <!-- Loading State -->
     <div v-if="loading" class="loading-state">
       <span class="loading-spinner"></span>
-      <span class="loading-text">加载中...</span>
+      <span class="loading-text">{{ t('common.loading') }}</span>
     </div>
 
     <!-- 历史回放详情弹窗 -->
@@ -193,10 +193,12 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, onActivated, watch, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { getSimulationHistory } from '../api/simulation'
 
 const router = useRouter()
 const route = useRoute()
+const { t } = useI18n()
 
 // 状态
 const projects = ref([])

frontend/src/components/LanguageSwitcher.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="language-switcher">
+    <button
+      v-for="lang in languages"
+      :key="lang.code"
+      class="lang-btn"
+      :class="{ active: currentLocale === lang.code }"
+      @click="changeLanguage(lang.code)"
+      :title="lang.name"
+    >
+      {{ lang.code.toUpperCase() }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { locale } = useI18n()
+
+const currentLocale = computed(() => locale.value)
+
+const languages = [
+  { code: 'zh', name: '简体中文' },
+  { code: 'en', name: 'English' }
+]
+
+const changeLanguage = (langCode) => {
+  locale.value = langCode
+  localStorage.setItem('mirofish-locale', langCode)
+}
+
+// Load saved language preference on mount
+const savedLocale = localStorage.getItem('mirofish-locale')
+if (savedLocale) {
+  locale.value = savedLocale
+}
+</script>
+
+<style scoped>
+.language-switcher {
+  display: flex;
+  gap: 4px;
+  background: #F5F5F5;
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.lang-btn {
+  border: none;
+  background: transparent;
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #666;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.lang-btn:hover {
+  background: #E0E0E0;
+}
+
+.lang-btn.active {
+  background: #FFF;
+  color: #000;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+</style>

frontend/src/i18n.js

@@ -0,0 +1,15 @@
+import { createI18n } from 'vue-i18n'
+import en from './locales/en'
+import zh from './locales/zh'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'zh', // Default to Chinese (original language)
+  fallbackLocale: 'zh',
+  messages: {
+    en,
+    zh
+  }
+})
+
+export default i18n