feat(frontend): add i18n support and navigation

- Install vue-i18n and configure locales (zh/en)
- Add complete navigation bar with 5 items: Home, About, Submit, Status, Tool Guide
- Add language switcher (中文/EN) with localStorage persistence
- Create HomeView with hero section, features, and quick links
- Create AboutView with features and usage guide
- Create ToolInfoView explaining BtToxin_Shoter principles (no formulas, no Digger)
- Update TaskSubmitForm: single file upload, genome/protein toggle, tooltips
- Update TaskMonitorView: i18n, queue status display
- Add queue_position field to TaskStatusResponse type

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/App.vue

@@ -1,31 +1,101 @@
 <script setup lang="ts">
-/**
- * App.vue - Main application layout
- * Simplified for polling-based implementation
- */
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Monitor, Globe } from '@element-plus/icons-vue'
+import { useRouter, useRoute } from 'vue-router'
 
-// Header icon component
-import { Monitor } from '@element-plus/icons-vue'
+const { t, locale } = useI18n()
+const router = useRouter()
+const route = useRoute()
+
+// Navigation items
+const navItems = [
+  { name: 'nav.home', path: '/' },
+  { name: 'nav.about', path: '/about' },
+  { name: 'nav.submit', path: '/submit' },
+  { name: 'nav.status', path: '/status' },
+  { name: 'nav.toolInfo', path: '/tool-info' }
+]
+
+// Current active route
+const activeRoute = computed(() => route.path)
+
+// Language toggle
+const currentLang = computed(() => locale.value)
+const langOptions = [
+  { value: 'zh', label: '中文' },
+  { value: 'en', label: 'English' }
+]
+
+function handleLanguageChange(val: string) {
+  locale.value = val
+  localStorage.setItem('locale', val)
+}
+
+function navigateTo(path: string) {
+  router.push(path)
+}
 </script>
 
 <template>
   <el-container class="app-container">
     <el-header class="app-header">
       <div class="header-content">
-        <div class="logo">
+        <!-- Logo -->
+        <div class="logo" @click="navigateTo('/')">
           <el-icon :size="24"><Monitor /></el-icon>
           <span class="title">BtToxin Pipeline</span>
         </div>
-        <div class="header-tag">
-          <el-tag type="success" effect="light" size="small">
-            基因组毒素分析系统
-          </el-tag>
+
+        <!-- Navigation -->
+        <el-menu
+          mode="horizontal"
+          :ellipsis="false"
+          class="nav-menu"
+          :default-active="activeRoute"
+        >
+          <el-menu-item
+            v-for="item in navItems"
+            :key="item.path"
+            :index="item.path"
+            @click="navigateTo(item.path)"
+          >
+            {{ t(item.name) }}
+          </el-menu-item>
+        </el-menu>
+
+        <!-- Language Switcher -->
+        <div class="lang-switcher">
+          <el-dropdown @command="handleLanguageChange">
+            <div class="lang-button">
+              <el-icon><Globe /></el-icon>
+              <span>{{ currentLang === 'zh' ? '中文' : 'EN' }}</span>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  v-for="opt in langOptions"
+                  :key="opt.value"
+                  :command="opt.value"
+                  :disabled="currentLang === opt.value"
+                >
+                  {{ opt.label }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
       </div>
     </el-header>
+
     <el-main class="app-main">
       <router-view />
     </el-main>
+
+    <!-- Footer -->
+    <el-footer class="app-footer">
+      <p>BtToxin Pipeline &copy; {{ new Date().getFullYear() }}</p>
+    </el-footer>
   </el-container>
 </template>
 
@@ -39,6 +109,7 @@ import { Monitor } from '@element-plus/icons-vue'
   background-color: var(--el-bg-color);
   border-bottom: 1px solid var(--el-border-color-light);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  padding: 0;
 }
 
 .header-content {
@@ -56,6 +127,12 @@ import { Monitor } from '@element-plus/icons-vue'
   align-items: center;
   gap: 8px;
   color: var(--el-color-primary);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.logo:hover {
+  opacity: 0.8;
 }
 
 .title {
@@ -63,11 +140,46 @@ import { Monitor } from '@element-plus/icons-vue'
   font-weight: 600;
 }
 
-.header-tag {
+.nav-menu {
+  flex: 1;
+  justify-content: center;
+  border-bottom: none;
+  background: transparent;
+}
+
+.nav-menu :deep(.el-menu-item) {
+  font-size: 14px;
+  height: 56px;
+  line-height: 56px;
+}
+
+.nav-menu :deep(.el-menu-item:hover),
+.nav-menu :deep(.el-menu-item.is-active) {
+  background-color: transparent;
+  color: var(--el-color-primary);
+  border-bottom-color: var(--el-color-primary);
+}
+
+.lang-switcher {
   display: flex;
   align-items: center;
 }
 
+.lang-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-size: 14px;
+}
+
+.lang-button:hover {
+  background-color: var(--el-fill-color-light);
+}
+
 .app-main {
   padding: 20px;
   max-width: 1200px;
@@ -75,4 +187,32 @@ import { Monitor } from '@element-plus/icons-vue'
   width: 100%;
   box-sizing: border-box;
 }
+
+.app-footer {
+  text-align: center;
+  padding: 20px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+  border-top: 1px solid var(--el-border-color-lighter);
+  margin-top: auto;
+}
+
+@media (max-width: 768px) {
+  .header-content {
+    flex-wrap: wrap;
+    padding: 10px 20px;
+  }
+
+  .nav-menu {
+    order: 3;
+    width: 100%;
+    justify-content: flex-start;
+    margin-top: 10px;
+  }
+
+  .nav-menu :deep(.el-menu-item) {
+    padding: 0 12px;
+    font-size: 13px;
+  }
+}
 </style>