From 51264aef06cde66708c9549dc128583b6a79748e Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Wed, 14 Jan 2026 10:33:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E5=AD=90=E4=BB=BB=E5=8A=A1=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E9=83=A8=E5=88=86=E6=B7=BB=E5=8A=A0=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E6=88=AA=E6=AD=A2=E6=97=A5=E6=9C=9F=E6=98=BE=E7=A4=BA=EF=BC=88?=
 =?UTF-8?q?=E4=BB=8E=E6=8E=A5=E5=8D=95=E5=BC=80=E5=A7=8B=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?+=E9=A2=84=E8=AE=A1=E5=AE=8C=E6=88=90=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TaskCard.vue | 25 +++++++++++++++++++++++++
 frontend/src/views/TaskHall.vue      | 26 ++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/frontend/src/components/TaskCard.vue b/frontend/src/components/TaskCard.vue
index 4741b28..86eafec 100644
--- a/frontend/src/components/TaskCard.vue
+++ b/frontend/src/components/TaskCard.vue
@@ -67,6 +67,9 @@
         <div v-for="(subTask, index) in task.subTasks" :key="subTask.id || index" class="subtask-item">
           <span class="subtask-label">{{ subTask.itemNo || `子任务${index + 1}` }}:</span>
           <span class="subtask-receiver">{{ subTask.receiverName || '待接单' }}</span>
+          <span v-if="getSubTaskDeadline(subTask)" class="subtask-deadline">
+            完成截止日期: {{ getSubTaskDeadline(subTask) }}
+          </span>
           <span :class="['subtask-status', getSubTaskStatusClass(subTask.status)]">
             {{ getSubTaskStatusText(subTask.status) }}
           </span>
@@ -162,6 +165,8 @@ interface TaskItem {
   itemNo?: string
   receiverName?: string
   status: string
+  createTime?: string
+  estimatedHours?: number
 }
 
 interface Task {
@@ -334,6 +339,17 @@ const getSubTaskStatusClass = (status: string) => {
   }
   return classMap[status] || ''
 }
+
+// 计算子任务完成截止日期（从接单开始计算+预计完成需要的时间）
+const getSubTaskDeadline = (subTask: TaskItem) => {
+  if (!subTask.createTime || !subTask.estimatedHours) return null
+  // 从创建时间（接单时间）开始计算
+  const startTime = dayjs(subTask.createTime)
+  // 计算截止时间：创建时间 + 预计工时
+  const deadline = startTime.add(subTask.estimatedHours, 'hour')
+  // 格式化为"XX月XX日XX时"
+  return deadline.format('MM月DD日HH时')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -485,6 +501,7 @@ const getSubTaskStatusClass = (status: string) => {
       .subtask-item {
         display: flex;
         align-items: center;
+        flex-wrap: wrap;
         gap: $space-xs;
         font-size: 12px;
         padding: 4px 0;
@@ -499,6 +516,13 @@ const getSubTaskStatusClass = (status: string) => {
         .subtask-receiver {
           color: $text-primary;
           flex: 1;
+          min-width: 60px;
+        }
+
+        .subtask-deadline {
+          color: #31f08b;
+          font-size: 11px;
+          margin-left: $space-xs;
         }
 
         .subtask-status {
@@ -506,6 +530,7 @@ const getSubTaskStatusClass = (status: string) => {
           border-radius: $radius-sm;
           font-size: 11px;
           font-weight: 500;
+          margin-left: auto;
 
           &.status-completed {
             background: rgba(49, 240, 139, 0.2);
diff --git a/frontend/src/views/TaskHall.vue b/frontend/src/views/TaskHall.vue
index 0c360c2..39ec017 100644
--- a/frontend/src/views/TaskHall.vue
+++ b/frontend/src/views/TaskHall.vue
@@ -1013,6 +1013,9 @@
                     <div v-for="(subTask, index) in task.subTasks" :key="subTask.id || index" class="subtask-item">
                       <span class="subtask-label">{{ getSubTaskLabel(subTask, index) }}:</span>
                       <span class="subtask-receiver">{{ subTask.receiverName || '待接单' }}</span>
+                      <span v-if="getSubTaskDeadline(subTask)" class="subtask-deadline">
+                        完成截止日期: {{ getSubTaskDeadline(subTask) }}
+                      </span>
                       <span :class="['subtask-status', getSubTaskStatusClass(subTask.status)]">
                         {{ getSubTaskStatusText(subTask.status) }}
                       </span>
@@ -1763,6 +1766,9 @@
                     <div v-for="(subTask, index) in task.subTasks" :key="subTask.id || index" class="subtask-item">
                       <span class="subtask-label">{{ getSubTaskLabel(subTask, index) }}:</span>
                       <span class="subtask-receiver">{{ subTask.receiverName || '待接单' }}</span>
+                      <span v-if="getSubTaskDeadline(subTask)" class="subtask-deadline">
+                        完成截止日期: {{ getSubTaskDeadline(subTask) }}
+                      </span>
                       <span :class="['subtask-status', getSubTaskStatusClass(subTask.status)]">
                         {{ getSubTaskStatusText(subTask.status) }}
                       </span>
@@ -2903,6 +2909,17 @@ const getSubTaskStatusText = (status: string | undefined) => {
   return statusMap[status || ''] || status || '未知'
 }
 
+// 计算子任务完成截止日期（从接单开始计算+预计完成需要的时间）
+const getSubTaskDeadline = (subTask: any) => {
+  if (!subTask.createTime || !subTask.estimatedHours) return null
+  // 从创建时间（接单时间）开始计算
+  const startTime = dayjs(subTask.createTime)
+  // 计算截止时间：创建时间 + 预计工时
+  const deadline = startTime.add(subTask.estimatedHours, 'hour')
+  // 格式化为"XX月XX日XX时"
+  return deadline.format('MM月DD日HH时')
+}
+
 // 展开/折叠任务子任务详情
 const expandedTaskSubtasks = ref<Record<number, boolean>>({})
 const toggleTaskSubtasks = (taskId: number) => {
@@ -6719,6 +6736,7 @@ onUnmounted(() => {
     .subtask-item {
       display: flex;
       align-items: center;
+      flex-wrap: wrap;
       gap: $space-sm;
       font-size: 12px;
       padding: 4px 0;
@@ -6733,6 +6751,13 @@ onUnmounted(() => {
       .subtask-receiver {
         color: $text-primary;
         flex: 1;
+        min-width: 60px;
+      }
+
+      .subtask-deadline {
+        color: #31f08b;
+        font-size: 11px;
+        margin-left: $space-xs;
       }
 
       .subtask-status {
@@ -6740,6 +6765,7 @@ onUnmounted(() => {
         border-radius: $radius-sm;
         font-size: 11px;
         font-weight: 500;
+        margin-left: auto;
 
         &.status-completed {
           background: rgba(49, 240, 139, 0.2);