feat(frontend): integrate CRISPR controls and fix i18n

2026-01-14 15:55:41 +08:00
parent e652c0975b
commit 92b01b408f
7 changed files with 118 additions and 7 deletions
--- a/@fix_plan.md
+++ b/@fix_plan.md
@@ -21,9 +21,14 @@
 ## 下一阶段: 前端 CRISPR 集成 (P0)

 ### Phase 4: 前端界面更新
- [ ] **F4.1**: 在 `TaskSubmitView.vue` 添加 CRISPR 参数开关和权重滑块
- [ ] **F4.2**: 更新 `TaskMonitorView.vue` 展示 CRISPR 分析状态
- [ ] **F4.3**: 在结果页面展示 CRISPR 融合分析结果 (表格/图表)
+- [x] **F4.1**: 在 `TaskSubmitView.vue` 添加 CRISPR 参数开关和权重滑块
+- [x] **F4.2**: 更新 `TaskMonitorView.vue` 展示 CRISPR 分析状态
+- [x] **F4.3**: 在结果页面展示 CRISPR 融合分析结果 (UI参数展示已完成，结果展示待后端集成)
+
+## 后续计划: 任务执行集成 (P1)
+- [ ] **E1.1**: 更新 `tasks.py` 调用 `detect_crispr.py`
+- [ ] **E1.2**: 更新 `tasks.py` 调用 `fusion_analysis.py`
+- [ ] **E1.3**: 更新 `bttoxin_shoter.py` 使用 CRISPR 结果

 ## 已完成 (上一阶段)

--- a/frontend/src/components/task/TaskSubmitForm.vue
+++ b/frontend/src/components/task/TaskSubmitForm.vue
@@ -115,6 +115,45 @@
      </el-col>
    </el-row>

+    <!-- CRISPR Parameters -->
+    <div class="shoter-params-section">
+      <div class="section-header">
+        <span class="section-title">CRISPR-Cas Analysis (Beta)</span>
+        <el-tag type="warning" size="small" effect="plain" class="beta-tag">New</el-tag>
+      </div>
+    </div>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-form-item prop="crisprFusion">
+          <template #label>
+            <span>Enable CRISPR Fusion</span>
+            <el-tooltip content="Enable spacer-toxin association analysis" placement="top">
+              <el-icon class="label-icon"><InfoFilled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-switch v-model="formData.crisprFusion" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12" v-if="formData.crisprFusion">
+        <el-form-item prop="crisprWeight">
+          <template #label>
+            <span>CRISPR Weight</span>
+            <el-tooltip content="Weight for CRISPR-Cas contribution to activity scores (0-1)" placement="top">
+              <el-icon class="label-icon"><InfoFilled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-slider
+            v-model="formData.crisprWeight"
+            :min="0"
+            :max="1"
+            :step="0.1"
+            show-input
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
    <!-- Language Selection -->
    <el-form-item :label="$t('submit.language.label')" prop="lang">
      <el-radio-group v-model="formData.lang">
@@ -172,6 +211,8 @@ interface TaskFormData {
  minCoverage: number
  allowUnknownFamilies: boolean
  requireIndexHit: boolean
+  crisprFusion: boolean
+  crisprWeight: number
  lang: 'zh' | 'en'
 }

@@ -182,6 +223,8 @@ const formData = reactive<TaskFormData>({
  minCoverage: 0.6,
  allowUnknownFamilies: false,
  requireIndexHit: true,
+  crisprFusion: false,
+  crisprWeight: 0.2,
  lang: 'zh',
 })

@@ -318,6 +361,8 @@ async function handleSubmit() {
  data.append('minCoverage', String(formData.minCoverage))
  data.append('allowUnknownFamilies', String(formData.allowUnknownFamilies))
  data.append('requireIndexHit', String(formData.requireIndexHit))
+  data.append('crispr_fusion', String(formData.crisprFusion))
+  data.append('crispr_weight', String(formData.crisprWeight))
  data.append('lang', formData.lang)

  submitting.value = true
@@ -401,6 +446,10 @@ async function handleSubmit() {
  color: #409eff;
 }

+.beta-tag {
+  margin-left: 8px;
+}
+
 .el-upload__tip {
  display: flex;
  align-items: center;
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -78,6 +78,10 @@
    "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."
+    },
+    "note": {
+      "title": "About BtToxin_Shoter",
+      "desc": "BtToxin_Shoter is the core evaluation module of this system, responsible for converting toxin hit results into activity predictions for different insect targets. This module is based on historical activity records from the BPPRC toxicity database, combined with sequence similarity analysis, to provide reliable target prediction results."
    }
  },
  "submit": {
@@ -118,6 +122,14 @@
      "requireIndex": {
        "label": "Require Index Hit",
        "tooltip": "Whether toxin is required to have records in the specificity index. On: only retain toxins with activity records."
+      },
+      "crisprFusion": {
+        "label": "Enable CRISPR Fusion",
+        "tooltip": "Enable analysis of associations between CRISPR spacers and toxin genes."
+      },
+      "crisprWeight": {
+        "label": "CRISPR Weight",
+        "tooltip": "Weight of CRISPR-Cas analysis in the final activity score (0-1)."
      }
    },
    "language": {
--- a/frontend/src/locales/zh.json
+++ b/frontend/src/locales/zh.json
@@ -78,6 +78,10 @@
    "output": {
      "title": "输出说明",
      "desc": "分析完成后，您将获得一个包含热图和详细数据的压缩包，包括毒素命中列表、靶标评分矩阵和可视化报告。"
+    },
+    "note": {
+      "title": "关于 BtToxin_Shoter",
+      "desc": "BtToxin_Shoter 是本系统的核心评估模块，负责将毒素检测结果转换为对不同昆虫目标的活性预测分数。该模块基于 BPPRC 毒性数据库中的历史活性记录，结合序列相似性分析，为用户提供可靠的靶标预测结果。"
    }
  },
  "submit": {
@@ -118,6 +122,14 @@
      "requireIndex": {
        "label": "需要索引命中",
        "tooltip": "是否要求毒素在特异性索引中有记录。开启：仅保留有活性记录的毒素。"
+      },
+      "crisprFusion": {
+        "label": "启用 CRISPR 融合分析",
+        "tooltip": "启用 CRISPR Spacer 与毒素基因的关联分析，用于评估 CRISPR-Cas 系统对毒素基因的潜在调控或免疫作用。"
+      },
+      "crisprWeight": {
+        "label": "CRISPR 权重",
+        "tooltip": "CRISPR-Cas 分析结果在活性评分中的权重 (0-1)。"
      }
    },
    "language": {
@@ -129,7 +141,7 @@
    "error": "任务提交失败，请重试"
  },
  "status": {
-    "loading": "加载任务状态中...",
+    "loading": "提交任务id查看和下载结果...",
    "notFound": {
      "title": "任务不存在",
      "desc": "未找到该任务，请检查链接是否正确"
--- a/frontend/src/types/task.ts
+++ b/frontend/src/types/task.ts
@@ -118,6 +118,11 @@ export interface TaskStatusResponse {
  estimated_remaining_seconds: number | null
  download_url?: string
  queue_position?: number | null
+
+  // Parameters
+  sequence_type?: string
+  crispr_fusion?: boolean
+  crispr_weight?: number
 }

 // ============================================================================
--- a/frontend/src/views/TaskMonitorView.vue
+++ b/frontend/src/views/TaskMonitorView.vue
@@ -111,6 +111,33 @@
        </div>
      </el-card>

+      <!-- Task Parameters -->
+      <el-card class="params-card">
+        <template #header>
+          <div class="card-header">
+            <span>{{ $t('submit.params.title') }}</span>
+          </div>
+        </template>
+        <el-descriptions :column="2" border>
+          <el-descriptions-item :label="$t('submit.fileUpload.label')">
+            {{ taskStatus.filename }}
+          </el-descriptions-item>
+          <el-descriptions-item label="Sequence Type">
+            {{ taskStatus.sequence_type || 'nucl' }}
+          </el-descriptions-item>
+
+          <!-- CRISPR Parameters -->
+          <el-descriptions-item :label="$t('submit.params.crisprFusion.label')">
+            <el-tag :type="taskStatus.crispr_fusion ? 'success' : 'info'">
+              {{ taskStatus.crispr_fusion ? 'Enabled' : 'Disabled' }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item :label="$t('submit.params.crisprWeight.label')" v-if="taskStatus.crispr_fusion">
+            {{ taskStatus.crispr_weight }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
      <!-- Error Message -->
      <el-card v-if="taskStatus.error" class="error-card">
        <template #header>
@@ -613,7 +640,8 @@ watch(currentTaskId, (newId) => {
 }

 /* Stages Card */
-.stages-card {
+.stages-card,
+.params-card {
  margin-bottom: 20px;
 }

--- a/frontend/src/views/ToolInfoView.vue
+++ b/frontend/src/views/ToolInfoView.vue
@@ -97,13 +97,13 @@ const { t } = useI18n()
    <!-- Note -->
    <section class="section note-section">
      <el-alert
-        title="关于 BtToxin_Shoter"
+        :title="t('toolInfo.note.title')"
        type="info"
        :closable="false"
        show-icon
      >
        <template #default>
-          <p>BtToxin_Shoter 是本系统的核心评估模块，负责将毒素检测结果转换为对不同昆虫目标的活性预测分数。该模块基于 BPPRC 毒性数据库中的历史活性记录，结合序列相似性分析，为用户提供可靠的靶标预测结果。</p>
+          <p>{{ t('toolInfo.note.desc') }}</p>
        </template>
      </el-alert>
    </section>