style(designer): 优化项目详情页调试样式以适应不同屏幕尺寸

调整上传区域和阶段卡片的样式，确保在并排显示时内容清晰可读
添加针对不同屏幕尺寸的响应式布局处理

src/app/pages/designer/project-detail/debug-styles.scss

@@ -42,6 +42,99 @@
   margin: 0 !important;
 }
 
+/* 上传区域样式优化 - 确保在并排显示时内容清晰可读 */
+.upload-section {
+  /* 基础样式保持不变 */
+  margin-bottom: 16px !important;
+  
+  /* 针对四个卡片并排时的特殊优化 */
+  .stage-progress-container:has(.vertical-stage-block:nth-child(4):last-child) & {
+    /* 笔记本端和PC端的上传区域优化 */
+    @media (min-width: 1366px) {
+      margin-bottom: 12px !important;
+      
+      .upload-dropzone {
+        min-height: 120px !important;
+        padding: 12px !important;
+        
+        .upload-text {
+          font-size: 12px !important;
+          line-height: 1.4 !important;
+        }
+        
+        .upload-hint {
+          font-size: 11px !important;
+          margin-top: 4px !important;
+        }
+      }
+    }
+    
+    /* 24寸PC端的上传区域优化 */
+    @media (min-width: 1920px) {
+      margin-bottom: 16px !important;
+      
+      .upload-dropzone {
+        min-height: 140px !important;
+        padding: 16px !important;
+        
+        .upload-text {
+          font-size: 13px !important;
+          line-height: 1.4 !important;
+        }
+        
+        .upload-hint {
+          font-size: 12px !important;
+          margin-top: 6px !important;
+        }
+      }
+    }
+    
+    /* 较小屏幕时保持紧凑布局 */
+    @media (max-width: 1365px) {
+      margin-bottom: 10px !important;
+      
+      .upload-dropzone {
+        min-height: 100px !important;
+        padding: 10px !important;
+        
+        .upload-text {
+          font-size: 11px !important;
+          line-height: 1.3 !important;
+        }
+        
+        .upload-hint {
+          font-size: 10px !important;
+          margin-top: 3px !important;
+        }
+      }
+    }
+  }
+}
+
+/* 阶段标题样式优化 */
+.vertical-stage-header {
+  /* 针对四个卡片并排时的标题优化 */
+  .stage-progress-container:has(.vertical-stage-block:nth-child(4):last-child) & {
+    margin-bottom: 12px !important;
+    
+    h4 {
+      font-size: 14px !important;
+      line-height: 1.3 !important;
+      margin: 0 !important;
+      
+      /* 笔记本端和PC端的标题优化 */
+      @media (min-width: 1366px) {
+        font-size: 15px !important;
+      }
+      
+      /* 24寸PC端的标题优化 */
+      @media (min-width: 1920px) {
+        font-size: 16px !important;
+      }
+    }
+  }
+}
+
 /* 强制覆盖主内容布局样式 - 使用最高优先级 */
 .progress-tab-content > .main-content-layout {
   display: flex !important;
@@ -49,7 +142,7 @@
   gap: 20px !important;
   margin-top: 20px !important;
   width: 100% !important;
-  background-color: transparent !important; // 去除调试底色
+  background-color: transparent !important; /* 去除调试底色 */
   padding: 20px !important;
   border-radius: 8px !important;
 }
@@ -360,9 +453,37 @@
 /* 阶段卡片横向排列（按板块的阶段数量自适应列数） */
 .stage-progress-container {
   display: grid !important;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
   gap: 12px !important;
   align-items: stretch !important; // 保证同一行的卡片等高
+  
+  /* 针对交付执行阶段的四个卡片进行特殊处理 */
+  &:has(.vertical-stage-block:nth-child(4):last-child) {
+    /* 当有且仅有4个卡片时，强制并排显示 */
+    grid-template-columns: repeat(4, 1fr) !important;
+    
+    /* 笔记本端适配（1366px及以上） */
+    @media (min-width: 1366px) {
+      grid-template-columns: repeat(4, 1fr) !important;
+      gap: 16px !important;
+    }
+    
+    /* 24寸PC端适配（1920px及以上） */
+    @media (min-width: 1920px) {
+      grid-template-columns: repeat(4, 1fr) !important;
+      gap: 20px !important;
+    }
+    
+    /* 较小屏幕的降级处理（小于1366px） */
+    @media (max-width: 1365px) {
+      grid-template-columns: repeat(2, 1fr) !important;
+      gap: 12px !important;
+    }
+  }
+  
+  /* 其他情况保持原有的自适应布局 */
+  &:not(:has(.vertical-stage-block:nth-child(4):last-child)) {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
+  }
 }
 
 .vertical-stage-block {
@@ -374,6 +495,30 @@
   border-radius: 8px !important;
   border: 1px solid #e9ecef !important;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
+  
+  /* 确保卡片内容在并排显示时保持可读性 */
+  min-width: 0 !important; /* 防止内容溢出 */
+  
+  /* 针对四个卡片并排时的特殊样式 */
+  .stage-progress-container:has(.vertical-stage-block:nth-child(4):last-child) & {
+    /* 笔记本端和PC端的内容优化 */
+    @media (min-width: 1366px) {
+      padding: 16px !important;
+      min-height: 300px !important; /* 确保卡片有足够高度 */
+    }
+    
+    /* 24寸PC端的内容优化 */
+    @media (min-width: 1920px) {
+      padding: 20px !important;
+      min-height: 320px !important;
+    }
+    
+    /* 较小屏幕时保持紧凑布局 */
+    @media (max-width: 1365px) {
+      padding: 12px !important;
+      min-height: 280px !important;
+    }
+  }
 }
 
 .vertical-stage-header {