From 9c777ee429146cb35ec6ce7cc703612b1943aaf1 Mon Sep 17 00:00:00 2001
From: JiaoTianBo <jtb200411@qq.com>
Date: Tue, 31 Mar 2026 17:14:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor(gantt):=20=E4=BC=98=E5=8C=96=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E6=95=B0=E6=8D=AE=E8=BD=AC=E6=8D=A2=E5=8F=8A=E7=94=98?=
 =?UTF-8?q?=E7=89=B9=E5=9B=BE=E6=97=A5=E6=9C=9F=E8=8C=83=E5=9B=B4=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整任务标签显示逻辑，左侧标签加入负责人括号显示
- 任务条标签独立显示任务名，保持界面简洁
- 计算甘特图日期范围时，优先使用任务实际日期动态计算
- 对日期范围添加了前后7天的边距，提高展示灵活性
- 兼容无项目结束日期情况，默认显示30天跨度
- 保持代码结构清晰，增强日期计算的鲁棒性
---
 src/views/project/detail.vue | 85 ++++++++++++++++++++++++++----------
 1 file changed, 61 insertions(+), 24 deletions(-)

diff --git a/src/views/project/detail.vue b/src/views/project/detail.vue
index c38025b..9721c8f 100644
--- a/src/views/project/detail.vue
+++ b/src/views/project/detail.vue
@@ -301,24 +301,29 @@ function getMaterialStatusType(
 
 // 将任务数据转换为 vue-ganttastic 格式
 const ganttTasks = computed(() => {
-  return taskList.value.map(task => ({
-    id: task.id,
-    label: task.taskName,
-    startDate: task.planStartDate || "",
-    endDate: task.planEndDate || "",
-    progress: task.progress || 0,
-    assignee: task.assigneeName || "未分配",
-    status: task.status || "pending",
-    ganttBarConfig: {
+  return taskList.value.map(task => {
+    const assigneeText = task.assigneeName ? `【${task.assigneeName}】` : "";
+    return {
       id: task.id,
-      label: `${task.taskName} ${task.assigneeName ? "负责人：" + task.assigneeName : ""}`,
-      hasHandles: false,
-      style: {
-        backgroundColor: getTaskColor(task.status, task.progress),
-        color: "#fff"
+      // 左侧标签显示：任务名 + 负责人
+      label: `${task.taskName} ${assigneeText}`,
+      startDate: task.planStartDate || "",
+      endDate: task.planEndDate || "",
+      progress: task.progress || 0,
+      assignee: task.assigneeName || "未分配",
+      status: task.status || "pending",
+      ganttBarConfig: {
+        id: task.id,
+        // 任务条上显示任务名
+        label: task.taskName,
+        hasHandles: false,
+        style: {
+          backgroundColor: getTaskColor(task.status, task.progress),
+          color: "#fff"
+        }
       }
-    }
-  }));
+    };
+  });
 });
 
 // 获取任务颜色
@@ -422,15 +427,47 @@ const sortedMilestones = computed(() => {
   });
 });
 
-// 计算甘特图日期范围
+// 计算甘特图日期范围（根据任务实际日期动态计算）
 const ganttDateRange = computed(() => {
-  const start = projectInfo.value.startDate || dayjs().format("YYYY-MM-DD");
-  const end =
-    projectInfo.value.endDate || dayjs().add(6, "month").format("YYYY-MM-DD");
-  return {
-    start: dayjs(start).format("YYYY-MM-DD"),
-    end: dayjs(end).format("YYYY-MM-DD")
-  };
+  // 1. 优先从任务列表获取日期范围
+  if (taskList.value.length > 0) {
+    const taskDates = taskList.value
+      .filter(t => t.planStartDate || t.planEndDate)
+      .flatMap(t => [t.planStartDate, t.planEndDate].filter(d => d));
+
+    if (taskDates.length > 0) {
+      const validDates = taskDates.filter(d => d);
+      const minDate = validDates.reduce(
+        (min, d) => (d < min ? d : min),
+        validDates[0]
+      );
+      const maxDate = validDates.reduce(
+        (max, d) => (d > max ? d : max),
+        validDates[0]
+      );
+
+      // 添加前后边距（各7天）
+      const start = dayjs(minDate).subtract(7, "day").format("YYYY-MM-DD");
+      const end = dayjs(maxDate).add(7, "day").format("YYYY-MM-DD");
+      return { start, end };
+    }
+  }
+
+  // 2. 使用项目日期（添加前后边距）
+  const projectStart =
+    projectInfo.value.startDate || dayjs().format("YYYY-MM-DD");
+  const projectEnd = projectInfo.value.endDate;
+
+  if (projectEnd) {
+    const start = dayjs(projectStart).subtract(7, "day").format("YYYY-MM-DD");
+    const end = dayjs(projectEnd).add(7, "day").format("YYYY-MM-DD");
+    return { start, end };
+  }
+
+  // 3. 无结束日期时，默认显示30天
+  const start = dayjs(projectStart).subtract(7, "day").format("YYYY-MM-DD");
+  const end = dayjs(projectStart).add(23, "day").format("YYYY-MM-DD");
+  return { start, end };
 });
 
 // 计算项目时间跨度（天数）