From 547328ad44458a6b52ccb649760ee9c5aea42bb4 Mon Sep 17 00:00:00 2001
From: zly <644706215@qq.com>
Date: Tue, 13 Jan 2026 16:57:03 +0800
Subject: [PATCH] feat(frontend): add i18n support and navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 activate_backend.sh                           |   8 +-
 frontend/package.json                         |   1 +
 frontend/src/App.vue                          | 164 +++++++++++-
 .../src/components/task/TaskSubmitForm.vue    | 237 ++++++++++--------
 frontend/src/locales/en.json                  | 177 +++++++++++++
 frontend/src/locales/zh.json                  | 177 +++++++++++++
 frontend/src/main.ts                          |  23 ++
 frontend/src/router/index.ts                  |  27 +-
 frontend/src/types/task.ts                    |   5 +-
 frontend/src/views/AboutView.vue              | 173 +++++++++++++
 frontend/src/views/HomeView.vue               | 211 ++++++++++++++++
 frontend/src/views/TaskMonitorView.vue        | 216 ++++++++++------
 frontend/src/views/TaskSubmitView.vue         |  15 +-
 frontend/src/views/ToolInfoView.vue           | 206 +++++++++++++++
 14 files changed, 1436 insertions(+), 204 deletions(-)
 create mode 100644 frontend/src/locales/en.json
 create mode 100644 frontend/src/locales/zh.json
 create mode 100644 frontend/src/views/AboutView.vue
 create mode 100644 frontend/src/views/HomeView.vue
 create mode 100644 frontend/src/views/ToolInfoView.vue

diff --git a/activate_backend.sh b/activate_backend.sh
index 1a86a44..2d26968 100644
--- a/activate_backend.sh
+++ b/activate_backend.sh
@@ -1,12 +1,12 @@
 export PATH="/app/.pixi/envs/webbackend/bin:/root/.pixi/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"
 export CONDA_SHLVL=1
 export CONDA_PREFIX=/app/.pixi/envs/webbackend
-export PIXI_PROJECT_NAME=bttoxin-pipeline
-export PIXI_PROJECT_ROOT=/app
 export PIXI_PROJECT_VERSION=0.1.0
-export PIXI_PROJECT_MANIFEST=/app/pixi.toml
-export PIXI_EXE=/usr/local/bin/pixi
 export PIXI_IN_SHELL=1
+export PIXI_PROJECT_MANIFEST=/app/pixi.toml
+export PIXI_PROJECT_ROOT=/app
+export PIXI_EXE=/usr/local/bin/pixi
+export PIXI_PROJECT_NAME=bttoxin-pipeline
 export CONDA_DEFAULT_ENV=bttoxin-pipeline:webbackend
 export PIXI_ENVIRONMENT_NAME=webbackend
 export PIXI_ENVIRONMENT_PLATFORMS=linux-64
diff --git a/frontend/package.json b/frontend/package.json
index cb0a5b6..703a21a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "element-plus": "^2.13.0",
     "pinia": "^3.0.4",
     "vue": "^3.5.25",
+    "vue-i18n": "^9.14.2",
     "vue-router": "^4.6.3"
   },
   "devDependencies": {
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3aea9ef..b36e480 100644
--- a/frontend/src/App.vue
+++ b/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>
diff --git a/frontend/src/components/task/TaskSubmitForm.vue b/frontend/src/components/task/TaskSubmitForm.vue
index 6cdd0e7..1b0de2e 100644
--- a/frontend/src/components/task/TaskSubmitForm.vue
+++ b/frontend/src/components/task/TaskSubmitForm.vue
@@ -6,60 +6,57 @@
     label-position="top"
     class="task-submit-form"
   >
+    <!-- File Type Selection -->
+    <el-form-item :label="$t('submit.fileUpload.label')" prop="fileType">
+      <el-radio-group v-model="formData.fileType" @change="handleFileTypeChange">
+        <el-radio value="genome">{{ $t('submit.fileUpload.genomeLabel') }}</el-radio>
+        <el-radio value="protein">{{ $t('submit.fileUpload.proteinLabel') }}</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
     <!-- File Upload Area -->
-    <el-form-item label="上传 .fna 文件" prop="files">
+    <el-form-item :label="fileTypeLabel" prop="files">
       <el-upload
         ref="uploadRef"
         v-model:file-list="fileList"
         drag
-        multiple
         :auto-upload="false"
-        :accept="'.fna'"
+        :accept="acceptExtensions"
         :before-upload="handleBeforeUpload"
         :on-change="handleFileChange"
         :on-remove="handleFileRemove"
+        :limit="1"
         class="upload-area"
       >
         <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-        <div class="el-upload__text">
-          拖拽文件到此处，或 <em>点击上传</em>
-        </div>
+        <div class="el-upload__text" v-html="$t('submit.fileUpload.dragText')"></div>
         <template #tip>
           <div class="el-upload__tip">
-            仅支持 .fna 格式文件
+            {{ $t('submit.fileUpload.hint') }}
+            <el-tooltip :content="fileTooltip" placement="top">
+              <el-icon class="info-icon"><InfoFilled /></el-icon>
+            </el-tooltip>
           </div>
         </template>
       </el-upload>
     </el-form-item>
 
-    <!-- Shoter Parameter Inputs -->
+    <!-- Shoter Parameters -->
     <div class="shoter-params-section">
       <div class="section-header">
-        <span class="section-title">Shoter 评分参数</span>
-        <el-tooltip placement="top">
-          <template #content>
-            以下参数用于 Shoter 评分工具，用于过滤和评估 Digger 检测到的毒素命中结果，<br/>
-            计算菌株对不同昆虫目的潜在活性得分。
-          </template>
+        <span class="section-title">{{ $t('submit.params.title') }}</span>
+        <el-tooltip :content="$t('submit.params.desc')" placement="top">
           <el-icon class="info-icon"><InfoFilled /></el-icon>
         </el-tooltip>
       </div>
-      <p class="section-desc">
-        以下参数用于 <strong>Shoter</strong> 评分工具，对 Digger 检测结果进行过滤和活性评估。
-      </p>
     </div>
 
     <el-row :gutter="20">
       <el-col :span="12">
         <el-form-item prop="minIdentity">
           <template #label>
-            <span>最小相似度 (minIdentity)</span>
-            <el-tooltip placement="top">
-              <template #content>
-                序列比对的最小相似度阈值 (0-1)。<br/>
-                低于此阈值的毒素命中将被过滤掉。<br/>
-                建议值：0.45-0.78，较高值表示更严格的匹配。
-              </template>
+            <span>{{ $t('submit.params.minIdentity.label') }}</span>
+            <el-tooltip :content="$t('submit.params.minIdentity.tooltip')" placement="top">
               <el-icon class="label-icon"><InfoFilled /></el-icon>
             </el-tooltip>
           </template>
@@ -76,13 +73,8 @@
       <el-col :span="12">
         <el-form-item prop="minCoverage">
           <template #label>
-            <span>最小覆盖度 (minCoverage)</span>
-            <el-tooltip placement="top">
-              <template #content>
-                序列比对的最小覆盖度阈值 (0-1)。<br/>
-                覆盖度 = 比对长度 / 参考序列长度。<br/>
-                低于此阈值的命中将被过滤。建议值：0.6-0.8。
-              </template>
+            <span>{{ $t('submit.params.minCoverage.label') }}</span>
+            <el-tooltip :content="$t('submit.params.minCoverage.tooltip')" placement="top">
               <el-icon class="label-icon"><InfoFilled /></el-icon>
             </el-tooltip>
           </template>
@@ -102,13 +94,8 @@
       <el-col :span="12">
         <el-form-item prop="allowUnknownFamilies">
           <template #label>
-            <span>允许未知家族</span>
-            <el-tooltip placement="top">
-              <template #content>
-                是否保留无法识别家族的毒素命中。<br/>
-                开启：保留所有命中，未知家族归入 "unknown" 类别。<br/>
-                关闭：过滤掉无法解析家族前缀的命中。
-              </template>
+            <span>{{ $t('submit.params.allowUnknown.label') }}</span>
+            <el-tooltip :content="$t('submit.params.allowUnknown.tooltip')" placement="top">
               <el-icon class="label-icon"><InfoFilled /></el-icon>
             </el-tooltip>
           </template>
@@ -118,13 +105,8 @@
       <el-col :span="12">
         <el-form-item prop="requireIndexHit">
           <template #label>
-            <span>需要索引命中</span>
-            <el-tooltip placement="top">
-              <template #content>
-                是否要求毒素命中在特异性索引中有记录。<br/>
-                开启：仅保留在 BPPRC 毒性数据库中有活性记录的毒素。<br/>
-                关闭：保留所有命中，无索引记录的归入 "other" 类别。
-              </template>
+            <span>{{ $t('submit.params.requireIndex.label') }}</span>
+            <el-tooltip :content="$t('submit.params.requireIndex.tooltip')" placement="top">
               <el-icon class="label-icon"><InfoFilled /></el-icon>
             </el-tooltip>
           </template>
@@ -133,7 +115,8 @@
       </el-col>
     </el-row>
 
-    <el-form-item label="语言" prop="lang">
+    <!-- Language Selection -->
+    <el-form-item :label="$t('submit.language.label')" prop="lang">
       <el-radio-group v-model="formData.lang">
         <el-radio value="zh">中文</el-radio>
         <el-radio value="en">English</el-radio>
@@ -148,44 +131,42 @@
         :disabled="fileList.length === 0"
         @click="handleSubmit"
       >
-        {{ submitting ? '提交中...' : '提交任务' }}
+        {{ submitting ? $t('submit.submitting') : $t('submit.submitBtn') }}
       </el-button>
     </el-form-item>
   </el-form>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { UploadFilled, InfoFilled } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
-import type { FormInstance, FormRules, UploadInstance, UploadFile, UploadFiles, UploadRawFile, UploadUserFile } from 'element-plus'
+import type { FormInstance, FormRules, UploadInstance, UploadFile, UploadRawFile } from 'element-plus'
 import { createTask } from '@/api/task'
 
-/**
- * Validate .fna file extension
- */
-function validateFnaFile(filename: string): boolean {
-  const ext = filename.toLowerCase().split('.').pop()
-  return ['fna', 'fa', 'fasta'].includes(ext || '')
-}
+const { t } = useI18n()
+const router = useRouter()
 
 // Emits
 const emit = defineEmits<{
   (e: 'submitted', sessionId: string): void
 }>()
 
-// Router
-const router = useRouter()
-
 // Refs
 const formRef = ref<FormInstance>()
 const uploadRef = ref<UploadInstance>()
 const fileList = ref<UploadFile[]>([])
 const submitting = ref(false)
 
+// File type definitions
+const genomeExtensions = '.fna,.fa,.fasta'
+const proteinExtensions = '.faa,.fasta'
+
 // Form data
 interface TaskFormData {
+  fileType: 'genome' | 'protein'
   files: File[]
   minIdentity: number
   minCoverage: number
@@ -195,6 +176,7 @@ interface TaskFormData {
 }
 
 const formData = reactive<TaskFormData>({
+  fileType: 'genome',
   files: [],
   minIdentity: 0.8,
   minCoverage: 0.6,
@@ -203,10 +185,27 @@ const formData = reactive<TaskFormData>({
   lang: 'zh',
 })
 
+// Computed
+const acceptExtensions = computed(() => {
+  return formData.fileType === 'genome' ? genomeExtensions : proteinExtensions
+})
+
+const fileTypeLabel = computed(() => {
+  return formData.fileType === 'genome'
+    ? t('submit.fileUpload.genomeLabel')
+    : t('submit.fileUpload.proteinLabel')
+})
+
+const fileTooltip = computed(() => {
+  return formData.fileType === 'genome'
+    ? t('submit.fileUpload.tooltip.genome')
+    : t('submit.fileUpload.tooltip.protein')
+})
+
 // Validation rules
 const validateFiles = (_rule: unknown, _value: unknown, callback: (error?: Error) => void) => {
   if (fileList.value.length === 0) {
-    callback(new Error('请至少上传一个 .fna 文件'))
+    callback(new Error(t('submit.fileUpload.error.noFile')))
   } else {
     callback()
   }
@@ -216,47 +215,75 @@ const formRules: FormRules = {
   files: [{ validator: validateFiles, trigger: 'change' }],
 }
 
-/**
- * Validates file before upload
- * Requirements: 1.2
- */
+// File validation
+function isValidExtension(filename: string, fileType: string): boolean {
+  const ext = filename.toLowerCase().split('.').pop() || ''
+  if (fileType === 'genome') {
+    return ['fna', 'fa', 'fasta'].includes(ext)
+  } else {
+    return ['faa', 'fasta'].includes(ext)
+  }
+}
+
+function validateFile(file: UploadRawFile): { valid: boolean; message: string } {
+  // Check extension
+  if (!isValidExtension(file.name, formData.fileType)) {
+    return { valid: false, message: t('submit.fileUpload.error.invalidType') }
+  }
+  // Check size (100MB limit)
+  const maxSize = 100 * 1024 * 1024
+  if (file.size > maxSize) {
+    return { valid: false, message: t('submit.fileUpload.error.sizeExceeded') }
+  }
+  return { valid: true, message: '' }
+}
+
+// Watch for file type changes to clear file list
+function handleFileTypeChange() {
+  fileList.value = []
+  formData.files = []
+  if (uploadRef.value) {
+    uploadRef.value.clearFiles()
+  }
+}
+
 function handleBeforeUpload(file: UploadRawFile): boolean {
-  const isValidExtension = validateFnaFile(file.name)
-  if (!isValidExtension) {
-    ElMessage.error(`文件 "${file.name}" 格式不正确，仅支持 .fna 文件`)
+  const result = validateFile(file)
+  if (!result.valid) {
+    ElMessage.error(result.message)
+    return false
+  }
+  // Check if trying to upload multiple files
+  if (fileList.value.length >= 1) {
+    ElMessage.error(t('submit.fileUpload.error.multipleFiles'))
     return false
   }
   return true
 }
 
-/**
- * Handles file list change
- */
-function handleFileChange(_file: UploadFile, files: UploadFiles) {
-  // Filter to only valid .fna files
-  fileList.value = files.filter((f) => validateFnaFile(f.name))
-  // Update formData.files with raw File objects
-  formData.files = fileList.value
+function handleFileChange(file: UploadFile, files: UploadFile[]) {
+  // Filter to only valid files and limit to 1
+  const validFiles = files
+    .filter((f) => {
+      if (!f.raw) return false
+      return isValidExtension(f.name, formData.fileType)
+    })
+    .slice(0, 1) // Limit to 1 file
+
+  fileList.value = validFiles
+  formData.files = validFiles
     .map((f) => f.raw)
-    .filter((raw): raw is UploadRawFile => raw !== undefined) as File[]
+    .filter((raw): raw is UploadRawFile => raw !== undefined)
 }
 
-/**
- * Handles file removal
- */
-function handleFileRemove(_file: UploadFile, files: UploadFiles) {
+function handleFileRemove(_file: UploadFile, files: UploadFile[]) {
   fileList.value = files
   formData.files = files
     .map((f) => f.raw)
-    .filter((raw): raw is UploadRawFile => raw !== undefined) as File[]
+    .filter((raw): raw is UploadRawFile => raw !== undefined)
 }
 
-/**
- * Handles form submission
- * Requirements: 1.3, 1.4, 1.5, 6.2
- */
 async function handleSubmit() {
-  // Validate form
   if (!formRef.value) return
 
   try {
@@ -265,20 +292,27 @@ async function handleSubmit() {
     return
   }
 
-  // Check files again (Requirements: 1.6)
   if (fileList.value.length === 0) {
-    ElMessage.error('请至少上传一个 .fna 文件')
+    ElMessage.error(t('submit.fileUpload.error.noFile'))
+    return
+  }
+
+  if (fileList.value.length > 1) {
+    ElMessage.error(t('submit.fileUpload.error.multipleFiles'))
     return
   }
 
   // Build FormData
   const data = new FormData()
 
-  // Add file (note: backend expects 'file', not 'files')
+  // Add file
   for (const file of formData.files) {
     data.append('file', file)
   }
 
+  // Add file type
+  data.append('file_type', formData.fileType)
+
   // Add parameters
   data.append('minIdentity', String(formData.minIdentity))
   data.append('minCoverage', String(formData.minCoverage))
@@ -289,23 +323,14 @@ async function handleSubmit() {
   submitting.value = true
 
   try {
-    // Call POST /api/tasks API
     const response = await createTask(data)
-
-    // Emit success event
     emit('submitted', response.task_id)
-
-    // Navigate to task monitoring page
     router.push(`/${response.task_id}`)
-
-    ElMessage.success('任务提交成功')
+    ElMessage.success(t('submit.success'))
   } catch (error) {
-    // Handle error (Requirements: 6.2)
-    let message = '任务提交失败，请重试'
-    if (error && typeof error === 'object') {
-      if ('message' in error && typeof error.message === 'string') {
-        message = error.message
-      }
+    let message = t('submit.error')
+    if (error && typeof error === 'object' && 'message' in error) {
+      message = String((error as { message: unknown }).message)
     }
     ElMessage.error(message)
   } finally {
@@ -375,4 +400,10 @@ async function handleSubmit() {
 .label-icon:hover {
   color: #409eff;
 }
-</style>
\ No newline at end of file
+
+.el-upload__tip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+</style>
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
new file mode 100644
index 0000000..d904d22
--- /dev/null
+++ b/frontend/src/locales/en.json
@@ -0,0 +1,177 @@
+{
+  "nav": {
+    "home": "Home",
+    "about": "About",
+    "submit": "Submit Task",
+    "status": "Task Status",
+    "toolInfo": "Tool Guide"
+  },
+  "home": {
+    "title": "BtToxin Pipeline",
+    "subtitle": "Bt Toxin Mining & Activity Prediction System",
+    "description": "Mining insecticidal toxin genes from bacterial genomes and predicting their potential activity against insects.",
+    "startAnalysis": "Start Analysis",
+    "viewDemo": "View Demo"
+  },
+  "about": {
+    "title": "About BtToxin Pipeline",
+    "description": "BtToxin Pipeline is an automated analysis platform designed to identify and evaluate insecticidal toxin genes from Bacillus thuringiensis and related bacterial genomes.",
+    "features": {
+      "title": "Key Features",
+      "toxinMining": {
+        "name": "Toxin Mining",
+        "desc": "Automatically identify potential Bt toxin gene sequences from genomes"
+      },
+      "targetPrediction": {
+        "name": "Target Prediction",
+        "desc": "Predict potential target insects based on known toxin activity data"
+      },
+      "reportGeneration": {
+        "name": "Report Generation",
+        "desc": "Generate heatmaps and detailed analysis reports for easy interpretation"
+      }
+    },
+    "usage": {
+      "title": "How to Use",
+      "step1": "Upload genome file (.fna) or protein sequence file (.fasta/.faa)",
+      "step2": "Configure analysis parameters (identity threshold, coverage threshold, etc.)",
+      "step3": "Submit task and wait for analysis completion",
+      "step4": "Download analysis results"
+    },
+    "limitations": {
+      "title": "Limitations",
+      "fileSize": "Single file size limit: 100MB",
+      "fileType": "Supported formats: .fna, .fa, .fasta, .faa",
+      "retention": "Result retention period: 30 days",
+      "concurrency": "Maximum concurrent tasks: 16"
+    }
+  },
+  "toolInfo": {
+    "title": "BtToxin_Shoter Evaluation Principles",
+    "intro": "BtToxin_Shoter is the core evaluation module of this system, responsible for converting toxin hit results into activity predictions for different insect targets.",
+    "process": {
+      "title": "Evaluation Process",
+      "step1": {
+        "title": "Sequence Similarity Analysis",
+        "desc": "Compare detected toxin sequences against the known Bt toxin database to calculate sequence similarity (Identity) and Coverage. Higher similarity indicates closer relationship to known toxins."
+      },
+      "step2": {
+        "title": "Activity Data Integration",
+        "desc": "Extract activity records of known toxins against various insect targets from the BPPRC toxicity database to build a toxin-target association index."
+      },
+      "step3": {
+        "title": "Comprehensive Scoring",
+        "desc": "Combine sequence similarity with historical activity data to calculate potential activity scores for each insect order using a probabilistic model."
+      }
+    },
+    "threshold": {
+      "title": "Threshold Settings",
+      "identity": {
+        "label": "Identity Threshold (0.45 - 0.78)",
+        "desc": "Based on Bt toxin naming conventions,比对 results below 0.45 are considered too distant and excluded."
+      },
+      "coverage": {
+        "label": "Coverage Threshold (default 0.6)",
+        "desc": "Filters out比对 results covering only a small fragment of the domain to ensure analysis quality."
+      }
+    },
+    "output": {
+      "title": "Output Description",
+      "desc": "After analysis, you will receive a compressed package containing heatmaps and detailed data, including toxin hit lists, target score matrices, and visualization reports."
+    }
+  },
+  "submit": {
+    "title": "BtToxin Analysis Task Submission",
+    "description": "Upload genome file or protein sequence file for analysis",
+    "fileUpload": {
+      "label": "Upload File",
+      "genomeLabel": "Genome file (.fna / .fa / .fasta)",
+      "proteinLabel": "Protein sequence file (.faa / .fasta)",
+      "hint": "Only single file upload supported. Genome and protein files cannot be uploaded together.",
+      "tooltip": {
+        "genome": "Supports .fna, .fa, .fasta genome files. File size limit: 100MB.",
+        "protein": "Supports .faa, .fasta protein sequence files. File size limit: 100MB."
+      },
+      "dragText": "Drag file here or <em>click to upload</em>",
+      "error": {
+        "noFile": "Please upload at least one file",
+        "multipleFiles": "Only one file can be uploaded at a time",
+        "invalidType": "File format not supported",
+        "sizeExceeded": "File size exceeds 100MB limit"
+      }
+    },
+    "params": {
+      "title": "Shoter Scoring Parameters",
+      "desc": "The following parameters are used for Shoter scoring to filter and evaluate detection results.",
+      "minIdentity": {
+        "label": "Minimum Identity",
+        "tooltip": "Minimum sequence identity threshold (0-1). Toxin hits below this threshold will be filtered. Recommended: 0.45-0.78."
+      },
+      "minCoverage": {
+        "label": "Minimum Coverage",
+        "tooltip": "Minimum sequence coverage threshold (0-1). Coverage = Alignment length / Reference length. Hits below this threshold will be filtered."
+      },
+      "allowUnknown": {
+        "label": "Allow Unknown Families",
+        "tooltip": "Whether to retain toxin hits with unrecognized families. On: retain all hits, categorized as 'unknown'."
+      },
+      "requireIndex": {
+        "label": "Require Index Hit",
+        "tooltip": "Whether toxin is required to have records in the specificity index. On: only retain toxins with activity records."
+      }
+    },
+    "language": {
+      "label": "Report Language"
+    },
+    "submitBtn": "Submit Task",
+    "submitting": "Submitting...",
+    "success": "Task submitted successfully",
+    "error": "Task submission failed, please try again"
+  },
+  "status": {
+    "loading": "Loading task status...",
+    "notFound": {
+      "title": "Task Not Found",
+      "desc": "Task not found, please check the link"
+    },
+    "running": {
+      "title": "Task In Progress",
+      "queue": "In queue: Position {position}",
+      "queueHint": "System is busy, please wait patiently",
+      "progress": "Progress: {percent}%",
+      "remaining": "Estimated remaining time: {time}"
+    },
+    "completed": {
+      "title": "Analysis Complete",
+      "desc": "Your analysis results are ready"
+    },
+    "failed": {
+      "title": "Task Failed",
+      "desc": "Please check the error message and retry"
+    },
+    "submittedAt": "Submitted at: {time}",
+    "completedAt": "Completed at: {time}",
+    "downloadBtn": "Download Results",
+    "downloadHint": "Results will expire on {date}",
+    "retryBtn": "Submit Again",
+    "newTaskBtn": "New Task",
+    "retentionNotice": "Results are retained for 30 days and will be automatically deleted"
+  },
+  "pipeline": {
+    "digger": "Toxin Mining",
+    "diggerDesc": "Identify Bt toxin genes from genome",
+    "shoter": "Activity Assessment",
+    "shoterDesc": "Evaluate toxin activity against insect orders",
+    "plots": "Visualization",
+    "plotsDesc": "Generate heatmaps and reports",
+    "bundle": "Bundling",
+    "bundleDesc": "Summarize analysis results"
+  },
+  "common": {
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "retry": "Retry",
+    "back": "Back",
+    "home": "Back to Home"
+  }
+}
diff --git a/frontend/src/locales/zh.json b/frontend/src/locales/zh.json
new file mode 100644
index 0000000..d16ce93
--- /dev/null
+++ b/frontend/src/locales/zh.json
@@ -0,0 +1,177 @@
+{
+  "nav": {
+    "home": "首页",
+    "about": "关于",
+    "submit": "提交任务",
+    "status": "任务状态",
+    "toolInfo": "工具说明"
+  },
+  "home": {
+    "title": "BtToxin Pipeline",
+    "subtitle": "Bt 毒素挖掘与活性预测系统",
+    "description": "从细菌基因组中挖掘杀虫毒素基因，预测其对昆虫的潜在活性。",
+    "startAnalysis": "开始分析",
+    "viewDemo": "查看示例"
+  },
+  "about": {
+    "title": "关于 BtToxin Pipeline",
+    "description": "BtToxin Pipeline 是一个自动化分析平台，专门用于从苏云金芽孢杆菌（Bacillus thuringiensis）及其相关菌株的基因组中识别和评估杀虫毒素基因。",
+    "features": {
+      "title": "主要功能",
+      "toxinMining": {
+        "name": "毒素挖掘",
+        "desc": "从基因组中自动识别潜在的 Bt 毒素基因序列"
+      },
+      "targetPrediction": {
+        "name": "靶标预测",
+        "desc": "基于已知毒素活性数据，预测新毒素的可能靶标昆虫"
+      },
+      "reportGeneration": {
+        "name": "报告生成",
+        "desc": "生成热图和详细分析报告，便于结果解读"
+      }
+    },
+    "usage": {
+      "title": "使用方法",
+      "step1": "上传基因组文件（.fna 格式）或蛋白序列文件（.fasta/.faa 格式）",
+      "step2": "配置分析参数（相似度阈值、覆盖度阈值等）",
+      "step3": "提交任务并等待分析完成",
+      "step4": "下载分析结果报告"
+    },
+    "limitations": {
+      "title": "使用限制",
+      "fileSize": "单个文件大小限制：100MB",
+      "fileType": "支持格式：.fna, .fa, .fasta, .faa",
+      "retention": "结果文件保留期限：30 天",
+      "concurrency": "系统最大并发任务数：16"
+    }
+  },
+  "toolInfo": {
+    "title": "BtToxin_Shoter 评估原理",
+    "intro": "BtToxin_Shoter 是本系统的核心评估模块，负责将毒素命中结果转换为对不同昆虫目标的活性预测分数。",
+    "process": {
+      "title": "评估流程",
+      "step1": {
+        "title": "序列相似性分析",
+        "desc": "将检测到的毒素序列与已知 Bt 毒素数据库进行比对，计算序列相似度（Identity）和覆盖度（Coverage）。相似度越高，表示新发现的毒素与已知毒素的亲缘关系越近。"
+      },
+      "step2": {
+        "title": "活性数据整合",
+        "desc": "从 BPPRC 毒性数据库中提取已知毒素对各昆虫目标的活性记录，建立毒素-靶标关联索引。"
+      },
+      "step3": {
+        "title": "综合评分计算",
+        "desc": "结合序列相似度和历史活性数据，使用概率模型计算该菌株对每个昆虫目的潜在活性分数。"
+      }
+    },
+    "threshold": {
+      "title": "阈值设定依据",
+      "identity": {
+        "label": "相似度阈值 (0.45 - 0.78)",
+        "desc": "参考 Bt 毒素命名规范，低于 0.45 的比对结果被认为序列过于遥远，不纳入考虑。"
+      },
+      "coverage": {
+        "label": "覆盖度阈值 (默认 0.6)",
+        "desc": "过滤掉仅覆盖一小段结构域的比对结果，确保分析质量。"
+      }
+    },
+    "output": {
+      "title": "输出说明",
+      "desc": "分析完成后，您将获得一个包含热图和详细数据的压缩包，包括毒素命中列表、靶标评分矩阵和可视化报告。"
+    }
+  },
+  "submit": {
+    "title": "BtToxin 分析任务提交",
+    "description": "上传基因组文件或蛋白序列文件进行分析",
+    "fileUpload": {
+      "label": "上传文件",
+      "genomeLabel": "基因组文件（.fna / .fa / .fasta）",
+      "proteinLabel": "蛋白序列文件（.faa / .fasta）",
+      "hint": "仅支持单个文件上传，基因组文件和蛋白序列文件不能同时上传",
+      "tooltip": {
+        "genome": "支持 .fna、.fa、.fasta 格式的基因组文件。文件大小限制：100MB。",
+        "protein": "支持 .faa、.fasta 格式的蛋白序列文件。文件大小限制：100MB。"
+      },
+      "dragText": "拖拽文件到此处，或 <em>点击上传</em>",
+      "error": {
+        "noFile": "请至少上传一个文件",
+        "multipleFiles": "每次只能上传一个文件",
+        "invalidType": "文件格式不支持",
+        "sizeExceeded": "文件大小超过 100MB 限制"
+      }
+    },
+    "params": {
+      "title": "Shoter 评分参数",
+      "desc": "以下参数用于 Shoter 评分工具，对检测结果进行过滤和活性评估。",
+      "minIdentity": {
+        "label": "最小相似度",
+        "tooltip": "序列比对的最小相似度阈值 (0-1)。低于此阈值的毒素命中将被过滤。建议值：0.45-0.78。"
+      },
+      "minCoverage": {
+        "label": "最小覆盖度",
+        "tooltip": "序列比对的最小覆盖度阈值 (0-1)。覆盖度 = 比对长度 / 参考序列长度。低于此阈值的命中将被过滤。"
+      },
+      "allowUnknown": {
+        "label": "允许未知家族",
+        "tooltip": "是否保留无法识别家族的毒素命中。开启：保留所有命中，归入 'unknown' 类别。"
+      },
+      "requireIndex": {
+        "label": "需要索引命中",
+        "tooltip": "是否要求毒素在特异性索引中有记录。开启：仅保留有活性记录的毒素。"
+      }
+    },
+    "language": {
+      "label": "报告语言"
+    },
+    "submitBtn": "提交任务",
+    "submitting": "提交中...",
+    "success": "任务提交成功",
+    "error": "任务提交失败，请重试"
+  },
+  "status": {
+    "loading": "加载任务状态中...",
+    "notFound": {
+      "title": "任务不存在",
+      "desc": "未找到该任务，请检查链接是否正确"
+    },
+    "running": {
+      "title": "任务执行中",
+      "queue": "排队中：第 {position} 位",
+      "queueHint": "当前系统繁忙，请耐心等待",
+      "progress": "进度：{percent}%",
+      "remaining": "预计剩余时间：{time}"
+    },
+    "completed": {
+      "title": "分析完成",
+      "desc": "您的分析结果已准备就绪"
+    },
+    "failed": {
+      "title": "任务执行失败",
+      "desc": "请检查错误信息后重试"
+    },
+    "submittedAt": "提交时间：{time}",
+    "completedAt": "完成时间：{time}",
+    "downloadBtn": "下载分析结果",
+    "downloadHint": "结果文件将在 {date} 后过期",
+    "retryBtn": "重新提交",
+    "newTaskBtn": "提交新任务",
+    "retentionNotice": "结果文件将保留 30 天，过期后自动删除"
+  },
+  "pipeline": {
+    "digger": "毒素挖掘",
+    "diggerDesc": "从基因组中识别 Bt 毒素基因",
+    "shoter": "活性评估",
+    "shoterDesc": "评估毒素对各昆虫目的的潜在活性",
+    "plots": "可视化",
+    "plotsDesc": "生成热图和报告",
+    "bundle": "打包",
+    "bundleDesc": "汇总分析结果"
+  },
+  "common": {
+    "cancel": "取消",
+    "confirm": "确认",
+    "retry": "重试",
+    "back": "返回",
+    "home": "返回首页"
+  }
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index fda1e6e..8591750 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,12 +1,35 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { createI18n } from 'vue-i18n'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 import App from './App.vue'
 import router from './router'
 
+// Import translation files
+import zh from './locales/zh.json'
+import en from './locales/en.json'
+
+// Create i18n instance
+const i18n = createI18n({
+  legacy: false, // Use Composition API
+  locale: localStorage.getItem('locale') || 'zh', // Get from localStorage or default to Chinese
+  fallbackLocale: 'zh',
+  messages: {
+    zh,
+    en
+  }
+})
+
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(i18n)
+app.use(ElementPlus)
+
+// Make i18n available globally
+app.config.globalProperties.$t = i18n.global.t
 
 app.mount('#app')
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 4482a7c..04fc565 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,21 +1,44 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import TaskSubmitView from '@/views/TaskSubmitView.vue'
 import TaskMonitorView from '@/views/TaskMonitorView.vue'
+import HomeView from '@/views/HomeView.vue'
+import AboutView from '@/views/AboutView.vue'
+import ToolInfoView from '@/views/ToolInfoView.vue'
 
 /**
  * Vue Router configuration
- * Requirements: 1.5, 2.1, 2.8
  */
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
+      name: 'Home',
+      component: HomeView,
+    },
+    {
+      path: '/about',
+      name: 'About',
+      component: AboutView,
+    },
+    {
+      path: '/submit',
       name: 'TaskSubmit',
       component: TaskSubmitView,
     },
     {
-      path: '/:sessionId',
+      path: '/status',
+      name: 'TaskStatusList',
+      component: TaskMonitorView,
+      props: { isList: true },
+    },
+    {
+      path: '/tool-info',
+      name: 'ToolInfo',
+      component: ToolInfoView,
+    },
+    {
+      path: '/:taskId',
       name: 'TaskMonitor',
       component: TaskMonitorView,
       props: true,
diff --git a/frontend/src/types/task.ts b/frontend/src/types/task.ts
index 5fcaafc..5222d8d 100644
--- a/frontend/src/types/task.ts
+++ b/frontend/src/types/task.ts
@@ -10,7 +10,7 @@
 /**
  * Overall status of a task
  */
-export type TaskStatusType = 'pending' | 'running' | 'completed' | 'failed'
+export type TaskStatusType = 'pending' | 'queued' | 'running' | 'completed' | 'failed'
 
 /**
  * Status of an individual step within a task
@@ -117,6 +117,7 @@ export interface TaskStatusResponse {
   error: string | null
   estimated_remaining_seconds: number | null
   download_url?: string
+  queue_position?: number | null
 }
 
 // ============================================================================
@@ -160,6 +161,8 @@ export function getStatusText(status: TaskStatusType): string {
   switch (status) {
     case 'pending':
       return '等待执行'
+    case 'queued':
+      return '排队中'
     case 'running':
       return '执行中'
     case 'completed':
diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
new file mode 100644
index 0000000..04b9005
--- /dev/null
+++ b/frontend/src/views/AboutView.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { Document, DataAnalysis, Report } from '@element-plus/icons-vue'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="about-view">
+    <div class="page-header">
+      <h1>{{ t('about.title') }}</h1>
+      <p class="description">{{ t('about.description') }}</p>
+    </div>
+
+    <!-- Features -->
+    <section class="section">
+      <h2>{{ t('about.features.title') }}</h2>
+      <el-row :gutter="24">
+        <el-col :xs="24" :sm="8">
+          <el-card class="feature-card" shadow="hover">
+            <template #header>
+              <div class="feature-header">
+                <el-icon><Document /></el-icon>
+                <span>{{ t('about.features.toxinMining.name') }}</span>
+              </div>
+            </template>
+            <p>{{ t('about.features.toxinMining.desc') }}</p>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :sm="8">
+          <el-card class="feature-card" shadow="hover">
+            <template #header>
+              <div class="feature-header">
+                <el-icon><DataAnalysis /></el-icon>
+                <span>{{ t('about.features.targetPrediction.name') }}</span>
+              </div>
+            </template>
+            <p>{{ t('about.features.targetPrediction.desc') }}</p>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :sm="8">
+          <el-card class="feature-card" shadow="hover">
+            <template #header>
+              <div class="feature-header">
+                <el-icon><Report /></el-icon>
+                <span>{{ t('about.features.reportGeneration.name') }}</span>
+              </div>
+            </template>
+            <p>{{ t('about.features.reportGeneration.desc') }}</p>
+          </el-card>
+        </el-col>
+      </el-row>
+    </section>
+
+    <!-- Usage -->
+    <section class="section">
+      <h2>{{ t('about.usage.title') }}</h2>
+      <el-timeline>
+        <el-timeline-item timestamp="Step 1" placement="top">
+          <el-card>
+            <h4>{{ t('about.usage.step1') }}</h4>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="Step 2" placement="top">
+          <el-card>
+            <h4>{{ t('about.usage.step2') }}</h4>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="Step 3" placement="top">
+          <el-card>
+            <h4>{{ t('about.usage.step3') }}</h4>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="Step 4" placement="top">
+          <el-card>
+            <h4>{{ t('about.usage.step4') }}</h4>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </section>
+
+    <!-- Limitations -->
+    <section class="section">
+      <h2>{{ t('about.limitations.title') }}</h2>
+      <el-descriptions :column="1" border>
+        <el-descriptions-item :label="t('about.limitations.fileSize')">
+          <el-tag type="info" size="small">{{ t('about.limitations.fileSize') }}</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('about.limitations.fileType')">
+          <el-tag type="info" size="small">.fna, .fa, .fasta, .faa</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('about.limitations.retention')">
+          <el-tag type="info" size="small">{{ t('about.limitations.retention') }}</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item :label="t('about.limitations.concurrency')">
+          <el-tag type="info" size="small">{{ t('about.limitations.concurrency') }}</el-tag>
+        </el-descriptions-item>
+      </el-descriptions>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.about-view {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.page-header h1 {
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  margin-bottom: 16px;
+}
+
+.description {
+  font-size: 16px;
+  color: var(--el-text-color-secondary);
+  max-width: 700px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.section {
+  margin-bottom: 48px;
+}
+
+.section h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  margin-bottom: 24px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid var(--el-color-primary-light-7);
+}
+
+.feature-card {
+  height: 100%;
+}
+
+.feature-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+}
+
+.feature-header .el-icon {
+  color: var(--el-color-primary);
+}
+
+.feature-card p {
+  color: var(--el-text-color-secondary);
+  margin: 0;
+  line-height: 1.6;
+}
+
+.el-timeline {
+  margin-top: 16px;
+}
+
+.el-timeline-item h4 {
+  margin: 0;
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+}
+</style>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644
index 0000000..7317a3a
--- /dev/null
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { ArrowRight, Document, Chart } from '@element-plus/icons-vue'
+
+const { t } = useI18n()
+const router = useRouter()
+
+function goToSubmit() {
+  router.push('/submit')
+}
+
+function goToToolInfo() {
+  router.push('/tool-info')
+}
+</script>
+
+<template>
+  <div class="home-view">
+    <!-- Hero Section -->
+    <section class="hero-section">
+      <h1 class="hero-title">{{ t('home.title') }}</h1>
+      <p class="hero-subtitle">{{ t('home.subtitle') }}</p>
+      <p class="hero-description">{{ t('home.description') }}</p>
+      <div class="hero-actions">
+        <el-button type="primary" size="large" @click="goToSubmit">
+          {{ t('home.startAnalysis') }}
+          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
+        </el-button>
+        <el-button size="large" @click="goToToolInfo">
+          <el-icon class="el-icon--left"><Document /></el-icon>
+          {{ t('nav.toolInfo') }}
+        </el-button>
+      </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="features-section">
+      <el-row :gutter="24">
+        <el-col :xs="24" :sm="8">
+          <el-card class="feature-card" shadow="hover">
+            <el-icon :size="48" class="feature-icon"><Document /></el-icon>
+            <h3>{{ t('about.features.toxinMining.name') }}</h3>
+            <p>{{ t('about.features.toxinMining.desc') }}</p>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :sm="8">
+          <el-card class="feature-card" shadow="hover">
+            <el-icon :size="48" class="feature-icon"><Chart /></el-icon>
+            <h3>{{ t('about.features.targetPrediction.name') }}</h3>
+            <p>{{ t('about.features.targetPrediction.desc') }}</p>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :sm="8">
+          <el-card class="feature-card" shadow="hover">
+            <el-icon :size="48" class="feature-icon"><ArrowRight /></el-icon>
+            <h3>{{ t('about.features.reportGeneration.name') }}</h3>
+            <p>{{ t('about.features.reportGeneration.desc') }}</p>
+          </el-card>
+        </el-col>
+      </el-row>
+    </section>
+
+    <!-- Quick Links -->
+    <section class="quick-links-section">
+      <el-card>
+        <template #header>
+          <span>{{ t('about.usage.title') }}</span>
+        </template>
+        <el-steps :active="4" align-center finish-status="success">
+          <el-step :title="t('about.usage.step1')" />
+          <el-step :title="t('about.usage.step2')" />
+          <el-step :title="t('about.usage.step3')" />
+          <el-step :title="t('about.usage.step4')" />
+        </el-steps>
+      </el-card>
+    </section>
+
+    <!-- Limitations -->
+    <section class="limitations-section">
+      <el-alert
+        :title="t('about.limitations.title')"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template #default>
+          <ul class="limitations-list">
+            <li>{{ t('about.limitations.fileSize') }}</li>
+            <li>{{ t('about.limitations.fileType') }}</li>
+            <li>{{ t('about.limitations.retention') }}</li>
+            <li>{{ t('about.limitations.concurrency') }}</li>
+          </ul>
+        </template>
+      </el-alert>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.home-view {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.hero-section {
+  text-align: center;
+  padding: 60px 20px;
+  margin-bottom: 60px;
+}
+
+.hero-title {
+  font-size: 42px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, var(--el-color-primary), #667eea);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-subtitle {
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--el-text-color-secondary);
+  margin-bottom: 16px;
+}
+
+.hero-description {
+  font-size: 16px;
+  color: var(--el-text-color-secondary);
+  max-width: 600px;
+  margin: 0 auto 32px;
+  line-height: 1.6;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.features-section {
+  margin-bottom: 60px;
+}
+
+.feature-card {
+  text-align: center;
+  height: 100%;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.feature-icon {
+  color: var(--el-color-primary);
+  margin-bottom: 16px;
+}
+
+.feature-card h3 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--el-text-color-primary);
+}
+
+.feature-card p {
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.quick-links-section {
+  margin-bottom: 40px;
+}
+
+.limitations-section {
+  margin-bottom: 40px;
+}
+
+.limitations-list {
+  margin: 8px 0 0;
+  padding-left: 20px;
+}
+
+.limitations-list li {
+  margin: 4px 0;
+  font-size: 14px;
+}
+
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 32px;
+  }
+
+  .hero-subtitle {
+    font-size: 18px;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>
diff --git a/frontend/src/views/TaskMonitorView.vue b/frontend/src/views/TaskMonitorView.vue
index 0de9270..e67d09c 100644
--- a/frontend/src/views/TaskMonitorView.vue
+++ b/frontend/src/views/TaskMonitorView.vue
@@ -3,19 +3,19 @@
     <!-- Loading State -->
     <div v-if="loading && !taskStatus" class="loading-container">
       <el-icon class="loading-icon"><Loading /></el-icon>
-      <p>加载任务状态中...</p>
+      <p>{{ $t('status.loading') }}</p>
     </div>
 
     <!-- Error State -->
     <div v-else-if="error" class="error-container">
       <el-result
         icon="error"
-        title="加载失败"
+        :title="$t('status.notFound.title')"
         :sub-title="error"
       >
         <template #extra>
-          <el-button type="primary" @click="refreshStatus">重试</el-button>
-          <el-button @click="goHome">返回首页</el-button>
+          <el-button type="primary" @click="refreshStatus">{{ $t('common.retry') }}</el-button>
+          <el-button @click="goHome">{{ $t('common.home') }}</el-button>
         </template>
       </el-result>
     </div>
@@ -24,11 +24,11 @@
     <div v-else-if="taskStatus === null" class="not-found-container">
       <el-result
         icon="warning"
-        title="任务不存在"
-        sub-title="未找到该任务，请检查链接是否正确"
+        :title="$t('status.notFound.title')"
+        :sub-title="$t('status.notFound.desc')"
       >
         <template #extra>
-          <el-button type="primary" @click="goHome">返回首页</el-button>
+          <el-button type="primary" @click="goHome">{{ $t('common.home') }}</el-button>
         </template>
       </el-result>
     </div>
@@ -37,58 +37,58 @@
     <template v-else>
       <!-- Page Header -->
       <div class="page-header">
-        <h1>任务执行中</h1>
-        <p class="task-id">任务 ID: {{ taskId }}</p>
-        <p class="filename">文件: {{ taskStatus.filename }}</p>
+        <h1>{{ getStatusTitle() }}</h1>
+        <p class="task-id">Task ID: {{ taskId }}</p>
+        <p class="filename">{{ $t('status.submittedAt', { time: formatTime(taskStatus.submission_time) }) }}</p>
+
+        <!-- Queue Info -->
+        <div v-if="taskStatus.status === 'queued'" class="queue-info">
+          <el-icon><Clock /></el-icon>
+          <span>{{ $t('status.running.queue', { position: taskStatus.queue_position || '?' }) }}</span>
+        </div>
       </div>
 
       <!-- Progress Card -->
       <el-card class="progress-card">
         <!-- Status Banner -->
         <div class="status-banner" :class="taskStatus.status">
-          <el-icon v-if="taskStatus.status === 'pending'"><Clock /></el-icon>
+          <el-icon v-if="taskStatus.status === 'pending' || taskStatus.status === 'queued'"><Clock /></el-icon>
           <el-icon v-else-if="taskStatus.status === 'running'" class="spinning"><Loading /></el-icon>
           <el-icon v-else-if="taskStatus.status === 'completed'"><CircleCheck /></el-icon>
           <el-icon v-else-if="taskStatus.status === 'failed'"><CircleClose /></el-icon>
           <span class="status-text">{{ getStatusText(taskStatus.status) }}</span>
         </div>
 
-        <!-- Progress Bar -->
-        <div class="progress-section">
+        <!-- Progress Bar (only for running) -->
+        <div v-if="taskStatus.status === 'running'" class="progress-section">
           <el-progress
             :percentage="taskStatus.progress"
             :status="getProgressStatus(taskStatus.status)"
             :stroke-width="20"
             :show-text="false"
           />
-          <span class="progress-text">{{ taskStatus.progress }}%</span>
+          <span class="progress-text">{{ $t('status.running.progress', { percent: taskStatus.progress }) }}</span>
         </div>
 
-        <!-- Estimated Time -->
+        <!-- Estimated Time (only for running) -->
         <div v-if="taskStatus.status === 'running' && taskStatus.estimated_remaining_seconds" class="time-info">
           <el-icon><Timer /></el-icon>
-          <span>预计剩余时间: {{ formatDuration(taskStatus.estimated_remaining_seconds) }}</span>
-        </div>
-
-        <!-- Submission Time -->
-        <div class="time-info">
-          <el-icon><Calendar /></el-icon>
-          <span>提交时间: {{ formatTime(taskStatus.submission_time) }}</span>
+          <span>{{ $t('status.running.remaining', { time: formatDuration(taskStatus.estimated_remaining_seconds) }) }}</span>
         </div>
 
         <!-- Completion Time -->
         <div v-if="taskStatus.completion_time" class="time-info">
           <el-icon><Finished /></el-icon>
-          <span>完成时间: {{ formatTime(taskStatus.completion_time) }}</span>
+          <span>{{ $t('status.completedAt', { time: formatTime(taskStatus.completion_time) }) }}</span>
         </div>
       </el-card>
 
       <!-- Pipeline Stages Overview -->
-      <el-card class="stages-card">
+      <el-card v-if="taskStatus.status === 'running'" class="stages-card">
         <template #header>
           <div class="card-header">
-            <span>执行阶段</span>
-            <el-tag type="info" size="small">自动刷新</el-tag>
+            <span>{{ $t('pipeline.digger') }}</span>
+            <el-tag type="info" size="small">Auto-refresh</el-tag>
           </div>
         </template>
         <div class="stages-list">
@@ -104,8 +104,8 @@
               <span v-else>{{ index + 1 }}</span>
             </div>
             <div class="stage-content">
-              <span class="stage-name">{{ stage.name }}</span>
-              <span class="stage-desc">{{ stage.description }}</span>
+              <span class="stage-name">{{ $t(`pipeline.${stage.id}`) }}</span>
+              <span class="stage-desc">{{ $t(`pipeline.${stage.id}Desc`) }}</span>
             </div>
           </div>
         </div>
@@ -114,7 +114,7 @@
       <!-- Error Message -->
       <el-card v-if="taskStatus.error" class="error-card">
         <template #header>
-          <span class="error-header">执行错误</span>
+          <span class="error-header">{{ $t('status.failed.title') }}</span>
         </template>
         <pre class="error-content">{{ taskStatus.error }}</pre>
       </el-card>
@@ -124,8 +124,8 @@
         <div class="download-content">
           <el-result
             icon="success"
-            title="分析完成"
-            sub-title="您的分析结果已准备就绪"
+            :title="$t('status.completed.title')"
+            :sub-title="$t('status.completed.desc')"
           >
             <template #extra>
               <el-button
@@ -135,12 +135,12 @@
                 @click="handleDownload"
               >
                 <el-icon><Download /></el-icon>
-                下载分析结果
+                {{ $t('status.downloadBtn') }}
               </el-button>
               <p class="download-hint">
-                结果文件将在 {{ formattedExpiresAt }} 后过期
+                {{ $t('status.downloadHint', { date: formattedExpiresAt }) }}
               </p>
-              <el-button @click="goHome">提交新任务</el-button>
+              <el-button @click="goHome">{{ $t('status.newTaskBtn') }}</el-button>
             </template>
           </el-result>
         </div>
@@ -150,12 +150,12 @@
       <el-card v-if="taskStatus.status === 'failed'" class="failed-card">
         <el-result
           icon="error"
-          title="任务执行失败"
-          sub-title="请检查错误信息后重试"
+          :title="$t('status.failed.title')"
+          :sub-title="$t('status.failed.desc')"
         >
           <template #extra>
-            <el-button type="primary" @click="retryTask">重新提交</el-button>
-            <el-button @click="goHome">返回首页</el-button>
+            <el-button type="primary" @click="retryTask">{{ $t('status.retryBtn') }}</el-button>
+            <el-button @click="goHome">{{ $t('common.home') }}</el-button>
           </template>
         </el-result>
       </el-card>
@@ -163,7 +163,7 @@
       <!-- Retention Notice -->
       <div class="retention-notice">
         <el-icon><InfoFilled /></el-icon>
-        <span>结果文件将保留 30 天，过期后自动删除</span>
+        <span>{{ $t('status.retentionNotice') }}</span>
       </div>
     </template>
   </div>
@@ -171,13 +171,13 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import {
   Loading,
   Clock,
   CircleCheck,
   CircleClose,
-  ArrowRight,
   Timer,
   Calendar,
   Finished,
@@ -186,20 +186,30 @@ import {
 } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { getTaskStatus, downloadResult } from '@/api/task'
-import type { TaskStatusResponse } from '@/types/task'
-import { PIPELINE_STAGES, formatDuration, getStatusText } from '@/types/task'
-
-/**
- * TaskMonitorView - Task monitoring page
- * Uses polling instead of real-time streams
- * Requirements: 2.1, 2.8, 9.1, 11.2
- */
+import type { TaskStatusResponse, PipelineStage } from '@/types/task'
 
+const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 
-// Get taskId from route params
-const taskId = computed(() => route.params.taskId as string)
+// Props
+interface Props {
+  taskId?: string
+  isList?: boolean
+}
+
+const props = defineProps<Props>()
+
+// Get taskId from route params or props
+const currentTaskId = computed(() => props.taskId || (route.params.taskId as string))
+
+// Pipeline stages (i18n compatible)
+const PIPELINE_STAGES: PipelineStage[] = [
+  { id: 'digger', name: 'Toxin Mining', description: 'Identify Bt toxin genes' },
+  { id: 'shoter', name: 'Activity Assessment', description: 'Evaluate toxin activity' },
+  { id: 'plots', name: 'Visualization', description: 'Generate heatmaps' },
+  { id: 'bundle', name: 'Bundling', description: 'Package results' },
+]
 
 // State
 const taskStatus = ref<TaskStatusResponse | null>(null)
@@ -211,12 +221,54 @@ const pollTimer = ref<number | null>(null)
 // Polling interval (ms)
 const POLL_INTERVAL = 3000 // 3 seconds
 
+/**
+ * Get status display title
+ */
+function getStatusTitle(): string {
+  if (!taskStatus.value) return ''
+  switch (taskStatus.value.status) {
+    case 'pending':
+    case 'queued':
+      return t('status.running.title')
+    case 'running':
+      return t('status.running.title')
+    case 'completed':
+      return t('status.completed.title')
+    case 'failed':
+      return t('status.failed.title')
+    default:
+      return ''
+  }
+}
+
+/**
+ * Get status display text
+ */
+function getStatusText(status: string): string {
+  switch (status) {
+    case 'pending':
+      return t('status.running.title')
+    case 'queued':
+      return t('status.running.title')
+    case 'running':
+      return t('status.running.title')
+    case 'completed':
+      return t('status.completed.title')
+    case 'failed':
+      return t('status.failed.title')
+    default:
+      return status
+  }
+}
+
 /**
  * Fetch task status from API
  */
 async function fetchStatus() {
+  if (!currentTaskId.value) return
+
   try {
-    const status = await getTaskStatus(taskId.value)
+    const status = await getTaskStatus(currentTaskId.value)
     taskStatus.value = status
     error.value = null
 
@@ -237,7 +289,7 @@ async function fetchStatus() {
  * Start polling for status updates
  */
 function startPolling() {
-  if (pollTimer.value) return
+  if (pollTimer.value || !currentTaskId.value) return
 
   // Initial fetch
   fetchStatus()
@@ -270,26 +322,25 @@ function refreshStatus() {
  * Download result file
  */
 async function handleDownload() {
-  if (!taskId.value) return
+  if (!currentTaskId.value) return
 
   downloading.value = true
   try {
-    const blob = await downloadResult(taskId.value)
+    const blob = await downloadResult(currentTaskId.value)
 
     // Create download link
     const url = window.URL.createObjectURL(blob)
     const link = document.createElement('a')
     link.href = url
-    link.download = `pipeline_results_${taskId.value}.tar.gz`
+    link.download = `pipeline_results_${currentTaskId.value}.tar.gz`
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
     window.URL.revokeObjectURL(url)
 
-    ElMessage.success('下载已开始')
-  } catch (err) {
-    console.error('Download failed:', err)
-    ElMessage.error('下载失败，请稍后重试')
+    ElMessage.success('Download started')
+  } catch {
+    ElMessage.error('Download failed, please try again')
   } finally {
     downloading.value = false
   }
@@ -324,6 +375,22 @@ function formatTime(isoString: string): string {
   })
 }
 
+/**
+ * Format duration in seconds to readable string
+ */
+function formatDuration(seconds: number): string {
+  if (seconds < 60) {
+    return `${seconds}s`
+  } else if (seconds < 3600) {
+    const mins = Math.floor(seconds / 60)
+    return `${mins}m`
+  } else {
+    const hours = Math.floor(seconds / 3600)
+    const mins = Math.floor((seconds % 3600) / 60)
+    return `${hours}h ${mins}m`
+  }
+}
+
 /**
  * Get progress status for Element Plus progress bar
  */
@@ -338,14 +405,6 @@ function getProgressStatus(status: string): 'success' | 'exception' | '' {
   }
 }
 
-/**
- * Get stage name by ID
- */
-function getStageName(stageId: string): string {
-  const stage = PIPELINE_STAGES.find(s => s.id === stageId)
-  return stage?.name || stageId
-}
-
 /**
  * Check if a stage is currently active
  */
@@ -381,7 +440,6 @@ function isStageCompleted(stageId: string): boolean {
  */
 const formattedExpiresAt = computed(() => {
   if (!taskStatus.value) return ''
-  // Calculate expiration (30 days from now for display)
   const date = new Date()
   date.setDate(date.getDate() + 30)
   return date.toLocaleDateString('zh-CN', {
@@ -393,7 +451,7 @@ const formattedExpiresAt = computed(() => {
 
 // Lifecycle
 onMounted(() => {
-  if (taskId.value) {
+  if (currentTaskId.value) {
     startPolling()
   }
 })
@@ -403,7 +461,7 @@ onUnmounted(() => {
 })
 
 // Watch for route changes
-watch(taskId, (newId) => {
+watch(currentTaskId, (newId) => {
   if (newId) {
     loading.value = true
     error.value = null
@@ -472,6 +530,19 @@ watch(taskId, (newId) => {
   margin: 4px 0;
 }
 
+/* Queue Info */
+.queue-info {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+  padding: 12px 20px;
+  background-color: var(--el-color-warning-light-9);
+  border-radius: 8px;
+  color: var(--el-color-warning);
+  font-weight: 500;
+}
+
 /* Progress Card */
 .progress-card {
   margin-bottom: 20px;
@@ -488,7 +559,8 @@ watch(taskId, (newId) => {
   font-weight: 500;
 }
 
-.status-banner.pending {
+.status-banner.pending,
+.status-banner.queued {
   background-color: var(--el-color-info-light-9);
   color: var(--el-color-info);
 }
@@ -522,7 +594,7 @@ watch(taskId, (newId) => {
 .progress-text {
   font-size: 16px;
   font-weight: 600;
-  min-width: 50px;
+  min-width: 100px;
 }
 
 .stage-info,
diff --git a/frontend/src/views/TaskSubmitView.vue b/frontend/src/views/TaskSubmitView.vue
index ab05369..3feabd2 100644
--- a/frontend/src/views/TaskSubmitView.vue
+++ b/frontend/src/views/TaskSubmitView.vue
@@ -1,25 +1,20 @@
 <template>
   <div class="task-submit-view">
     <div class="page-header">
-      <h1>BtToxin 分析任务提交</h1>
-      <p class="description">上传 .fna 基因组文件，系统将在后台执行毒素挖掘分析，完成后返回任务页面</p>
+      <h1>{{ $t('submit.title') }}</h1>
+      <p class="description">{{ $t('submit.description') }}</p>
     </div>
     <TaskSubmitForm @submitted="handleSubmitted" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import TaskSubmitForm from '@/components/task/TaskSubmitForm.vue'
 
-/**
- * Handles successful task submission
- * The TaskSubmitForm already handles navigation to /:sessionId
- * This handler is for any additional logic needed at the view level
- * Requirements: 1.1, 1.5
- */
+const { t } = useI18n()
+
 function handleSubmitted(sessionId: string) {
-  // Navigation is already handled by TaskSubmitForm
-  // This callback can be used for additional view-level logic if needed
   console.log(`Task submitted successfully: ${sessionId}`)
 }
 </script>
diff --git a/frontend/src/views/ToolInfoView.vue b/frontend/src/views/ToolInfoView.vue
new file mode 100644
index 0000000..579d488
--- /dev/null
+++ b/frontend/src/views/ToolInfoView.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { InfoFilled, Connection, DataAnalysis, TrendCharts } from '@element-plus/icons-vue'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="tool-info-view">
+    <div class="page-header">
+      <h1>{{ t('toolInfo.title') }}</h1>
+      <p class="intro">{{ t('toolInfo.intro') }}</p>
+    </div>
+
+    <!-- Process Section -->
+    <section class="section">
+      <h2>{{ t('toolInfo.process.title') }}</h2>
+
+      <el-timeline>
+        <el-timeline-item timestamp="Step 1" placement="top" type="primary">
+          <el-card>
+            <div class="step-header">
+              <el-icon :size="24"><Connection /></el-icon>
+              <h3>{{ t('toolInfo.process.step1.title') }}</h3>
+            </div>
+            <p>{{ t('toolInfo.process.step1.desc') }}</p>
+          </el-card>
+        </el-timeline-item>
+
+        <el-timeline-item timestamp="Step 2" placement="top" type="primary">
+          <el-card>
+            <div class="step-header">
+              <el-icon :size="24"><DataAnalysis /></el-icon>
+              <h3>{{ t('toolInfo.process.step2.title') }}</h3>
+            </div>
+            <p>{{ t('toolInfo.process.step2.desc') }}</p>
+          </el-card>
+        </el-timeline-item>
+
+        <el-timeline-item timestamp="Step 3" placement="top" type="primary">
+          <el-card>
+            <div class="step-header">
+              <el-icon :size="24"><TrendCharts /></el-icon>
+              <h3>{{ t('toolInfo.process.step3.title') }}</h3>
+            </div>
+            <p>{{ t('toolInfo.process.step3.desc') }}</p>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </section>
+
+    <!-- Threshold Section -->
+    <section class="section">
+      <h2>{{ t('toolInfo.threshold.title') }}</h2>
+
+      <el-row :gutter="24">
+        <el-col :xs="24" :sm="12">
+          <el-card class="threshold-card">
+            <template #header>
+              <div class="threshold-header">
+                <el-icon><InfoFilled /></el-icon>
+                <span>{{ t('toolInfo.threshold.identity.label') }}</span>
+              </div>
+            </template>
+            <p>{{ t('toolInfo.threshold.identity.desc') }}</p>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :sm="12">
+          <el-card class="threshold-card">
+            <template #header>
+              <div class="threshold-header">
+                <el-icon><InfoFilled /></el-icon>
+                <span>{{ t('toolInfo.threshold.coverage.label') }}</span>
+              </div>
+            </template>
+            <p>{{ t('toolInfo.threshold.coverage.desc') }}</p>
+          </el-card>
+        </el-col>
+      </el-row>
+    </section>
+
+    <!-- Output Section -->
+    <section class="section">
+      <h2>{{ t('toolInfo.output.title') }}</h2>
+      <el-alert
+        :title="t('toolInfo.output.title')"
+        type="success"
+        :closable="false"
+        show-icon
+      >
+        <template #default>
+          <p>{{ t('toolInfo.output.desc') }}</p>
+        </template>
+      </el-alert>
+    </section>
+
+    <!-- Note -->
+    <section class="section note-section">
+      <el-alert
+        title="关于 BtToxin_Shoter"
+        type="info"
+        :closable="false"
+        show-icon
+      >
+        <template #default>
+          <p>BtToxin_Shoter 是本系统的核心评估模块，负责将毒素检测结果转换为对不同昆虫目标的活性预测分数。该模块基于 BPPRC 毒性数据库中的历史活性记录，结合序列相似性分析，为用户提供可靠的靶标预测结果。</p>
+        </template>
+      </el-alert>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.tool-info-view {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.page-header h1 {
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  margin-bottom: 16px;
+}
+
+.intro {
+  font-size: 16px;
+  color: var(--el-text-color-secondary);
+  max-width: 700px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.section {
+  margin-bottom: 48px;
+}
+
+.section h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  margin-bottom: 24px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid var(--el-color-primary-light-7);
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.step-header .el-icon {
+  color: var(--el-color-primary);
+}
+
+.step-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.step-header ~ p {
+  color: var(--el-text-color-secondary);
+  margin: 0;
+  line-height: 1.6;
+}
+
+.threshold-card {
+  height: 100%;
+}
+
+.threshold-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+}
+
+.threshold-header .el-icon {
+  color: var(--el-color-primary);
+}
+
+.threshold-card p {
+  color: var(--el-text-color-secondary);
+  margin: 0;
+  line-height: 1.6;
+}
+
+.note-section {
+  margin-top: 48px;
+}
+
+.note-section p {
+  margin: 8px 0 0;
+  line-height: 1.6;
+}
+</style>