From ea94a26216dd6038be7aba035e04ced2a4612dc3 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Tue, 6 Jan 2026 23:11:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=8C=E6=AD=A5=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E6=89=80=E6=9C=89tab=E7=9A=84=E4=BB=BB=E5=8A=A1=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F=E5=92=8C=E9=A2=84=E8=A7=88=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/TaskHall.vue | 117 ++++++++++++++++++++------------
 1 file changed, 72 insertions(+), 45 deletions(-)

diff --git a/frontend/src/views/TaskHall.vue b/frontend/src/views/TaskHall.vue
index 4435ed8..cc3888e 100644
--- a/frontend/src/views/TaskHall.vue
+++ b/frontend/src/views/TaskHall.vue
@@ -1165,22 +1165,31 @@
                 </div>
 
                 <!-- 任务信息 -->
-                <div class="task-info">
-                  <div class="info-item">
-                    <span class="label">任务编号</span>
-                    <span class="value">{{ task.taskNo }}</span>
+                <div class="task-info-wrapper">
+                  <div class="task-info">
+                    <div class="info-item">
+                      <span class="label">任务编号</span>
+                      <span class="value">{{ task.taskNo }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">任务类型</span>
+                      <span class="value">{{ getTaskTypeName(task.taskTypeId) }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">获得积分</span>
+                      <span class="value text-brand">{{ task.score }} 分</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">数量</span>
+                      <span class="value">{{ task.quantity || '--' }} 个</span>
+                    </div>
                   </div>
-                  <div class="info-item">
-                    <span class="label">任务类型</span>
-                    <span class="value">{{ getTaskTypeName(task.taskTypeId) }}</span>
-                  </div>
-                  <div class="info-item">
-                    <span class="label">获得积分</span>
-                    <span class="value text-brand">{{ task.score }} 分</span>
-                  </div>
-                  <div class="info-item">
-                    <span class="label">数量</span>
-                    <span class="value">{{ task.quantity || '--' }} 个</span>
+                  <!-- 预览图 -->
+                  <div v-if="task.previewImage" class="preview-thumbnail">
+                    <img :src="task.previewImage" alt="预览图" class="thumbnail-img" />
+                    <div class="preview-popup">
+                      <img :src="task.previewImage" alt="预览图" />
+                    </div>
                   </div>
                 </div>
 
@@ -1499,22 +1508,31 @@
                 </div>
 
                 <!-- 任务信息 -->
-                <div class="task-info">
-                  <div class="info-item">
-                    <span class="label">任务编号</span>
-                    <span class="value">{{ task.taskNo }}</span>
+                <div class="task-info-wrapper">
+                  <div class="task-info">
+                    <div class="info-item">
+                      <span class="label">任务编号</span>
+                      <span class="value">{{ task.taskNo }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">任务类型</span>
+                      <span class="value">{{ getTaskTypeName(task.taskTypeId) }}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">积分</span>
+                      <span class="value text-brand">{{ task.score }} 分</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">数量</span>
+                      <span class="value">{{ task.quantity || '--' }} 个</span>
+                    </div>
                   </div>
-                  <div class="info-item">
-                    <span class="label">任务类型</span>
-                    <span class="value">{{ getTaskTypeName(task.taskTypeId) }}</span>
-                  </div>
-                  <div class="info-item">
-                    <span class="label">积分</span>
-                    <span class="value text-brand">{{ task.score }} 分</span>
-                  </div>
-                  <div class="info-item">
-                    <span class="label">数量</span>
-                    <span class="value">{{ task.quantity || '--' }} 个</span>
+                  <!-- 预览图 -->
+                  <div v-if="task.previewImage" class="preview-thumbnail">
+                    <img :src="task.previewImage" alt="预览图" class="thumbnail-img" />
+                    <div class="preview-popup">
+                      <img :src="task.previewImage" alt="预览图" />
+                    </div>
                   </div>
                 </div>
 
@@ -1710,22 +1728,31 @@
                 </div>
 
                 <!-- 任务信息 -->
-                <div class="task-info">
-                  <div v-if="item.type === 'task'" class="info-item">
-                    <span class="label">任务类型</span>
-                    <span class="value">{{ getTaskTypeName(item.data.taskTypeId) }}</span>
+                <div class="task-info-wrapper">
+                  <div class="task-info">
+                    <div v-if="item.type === 'task'" class="info-item">
+                      <span class="label">任务类型</span>
+                      <span class="value">{{ getTaskTypeName(item.data.taskTypeId) }}</span>
+                    </div>
+                    <div v-if="item.type === 'taskGroup'" class="info-item">
+                      <span class="label">子任务数量</span>
+                      <span class="value">{{ item.data.items?.length || 0 }} 个</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="label">预估积分</span>
+                      <span class="value text-brand">{{ item.score }} 分</span>
+                    </div>
+                    <div v-if="item.type === 'task'" class="info-item">
+                      <span class="label">数量</span>
+                      <span class="value">{{ item.data.quantity || '--' }} 个</span>
+                    </div>
                   </div>
-                  <div v-if="item.type === 'taskGroup'" class="info-item">
-                    <span class="label">子任务数量</span>
-                    <span class="value">{{ item.data.items?.length || 0 }} 个</span>
-                  </div>
-                  <div class="info-item">
-                    <span class="label">预估积分</span>
-                    <span class="value text-brand">{{ item.score }} 分</span>
-                  </div>
-                  <div v-if="item.type === 'task'" class="info-item">
-                    <span class="label">数量</span>
-                    <span class="value">{{ item.data.quantity || '--' }} 个</span>
+                  <!-- 预览图 -->
+                  <div v-if="item.data?.previewImage" class="preview-thumbnail">
+                    <img :src="item.data.previewImage" alt="预览图" class="thumbnail-img" />
+                    <div class="preview-popup">
+                      <img :src="item.data.previewImage" alt="预览图" />
+                    </div>
                   </div>
                 </div>