diff --git a/src/views/project/detail.vue b/src/views/project/detail.vue
index 5a07f04..7031329 100644
--- a/src/views/project/detail.vue
+++ b/src/views/project/detail.vue
@@ -243,6 +243,7 @@ function getTaskColor(status?: string, progress?: number): string {
   if (status === "pending") return "#e6a23c"; // 待开始 - 橙色
   if (status === "delayed") return "#f56c6c"; // 延期 - 红色
   if (status === "paused") return "#909399"; // 暂停 - 灰色
+  if (status === "cancelled") return "#909399"; // 已取消 - 灰色
   return "#409eff"; // 默认 - 蓝色
 }
 
@@ -609,14 +610,26 @@ onMounted(() => {
           </template>
           <div v-loading="ganttLoading" class="gantt-container">
             <!-- 图例 -->
-            <div class="flex gap-4 mb-4 text-sm">
+            <div class="flex flex-wrap gap-4 mb-4 text-sm">
               <div class="flex items-center gap-1">
-                <div class="w-4 h-3 bg-blue-400 rounded-sm" />
-                <span>计划进度</span>
+                <div class="w-4 h-3 bg-[#409eff] rounded-sm" />
+                <span>进行中</span>
               </div>
               <div class="flex items-center gap-1">
-                <div class="w-4 h-3 bg-green-400 rounded-sm" />
-                <span>实际进度</span>
+                <div class="w-4 h-3 bg-[#67c23a] rounded-sm" />
+                <span>已完成</span>
+              </div>
+              <div class="flex items-center gap-1">
+                <div class="w-4 h-3 bg-[#e6a23c] rounded-sm" />
+                <span>待开始</span>
+              </div>
+              <div class="flex items-center gap-1">
+                <div class="w-4 h-3 bg-[#f56c6c] rounded-sm" />
+                <span>延期</span>
+              </div>
+              <div class="flex items-center gap-1">
+                <div class="w-4 h-3 bg-[#909399] rounded-sm" />
+                <span>已取消</span>
               </div>
             </div>