优化弹窗布局：改进颜色分析弹窗和图片分析面板的对齐关系

src/app/shared/components/global-prompt/global-prompt.component.scss

@@ -1,48 +1,89 @@
 // 全局提示组件样式
 .gp-container {
-  // 基础层级定义
+  // 基础层级定义 - 统一管理z-index层级
   $z-index-backdrop: 10000;
   $z-index-modal: 10001;
   $z-index-toast: 10002;
 
-  // 全屏模式背景遮罩
+  // 全屏模式背景遮罩 - 优化position:fixed布局
   .gp-backdrop {
     position: fixed;
     top: 0;
     left: 0;
-    right: 0;
-    bottom: 0;
+    width: 100vw;
+    height: 100vh;
     z-index: $z-index-backdrop;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 1rem; // 确保在所有设备上都有适当的边距
     transition: all 0.3s ease;
     
+    // 强制所有设备都使用相同的居中布局
+    @media (max-width: 640px) {
+      padding: 1rem;
+      align-items: center; // 确保移动端也完全居中
+    }
+    
+    @media (min-width: 641px) and (max-width: 1024px) {
+      padding: 1.5rem;
+      align-items: center; // 确保平板端也完全居中
+    }
+    
+    @media (min-width: 1025px) {
+      padding: 2rem;
+      align-items: center; // 确保桌面端也完全居中
+    }
+    
     &.gp-backdrop-visible {
       background: rgba(0, 0, 0, 0.5);
       backdrop-filter: blur(4px);
     }
   }
 
-  // 模态框背景遮罩
+  // 模态框背景遮罩 - 增强视觉效果
   .gp-modal-backdrop {
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(2px);
   }
 
-  // 全屏模式模态框
+  // 全屏模式模态框 - 优化居中布局和响应式设计
   .gp-modal {
     position: relative;
     background: white;
     border-radius: 12px;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     max-width: 90vw;
-    max-height: 90vh;
+    max-height: 80vh; // 限制最大高度，避免内容溢出
     overflow: hidden;
     animation: modalSlideIn 0.3s ease-out;
+    margin: 0; // 移除所有边距，完全依赖flex居中
+    transform-origin: center; // 确保动画从中心开始
     
     &.gp-modal-dialog {
       min-width: 320px;
+      width: 100%;
+      max-width: 500px; // 设置合理的最大宽度
+    }
+
+    // 响应式调整 - 确保在所有设备上都能正确显示
+    @media (max-width: 640px) {
+      max-width: calc(100vw - 2rem); // 保持左右边距
+      max-height: 75vh; // 移动端稍微降低高度
+      border-radius: 12px;
+      margin: 0; // 确保无边距
+    }
+    
+    @media (min-width: 641px) and (max-width: 1024px) {
+      max-width: 85vw;
+      max-height: 78vh;
+      margin: 0; // 确保无边距
+    }
+    
+    @media (min-width: 1025px) {
+      max-width: 600px;
+      max-height: 80vh;
+      margin: 0; // 确保无边距
     }
 
     .gp-header {
@@ -57,6 +98,10 @@
         font-size: 18px;
         font-weight: 600;
         color: #1e293b;
+        
+        @media (max-width: 640px) {
+          font-size: 16px;
+        }
       }
 
       .gp-close-btn {
@@ -67,6 +112,7 @@
         color: #64748b;
         border-radius: 4px;
         transition: all 0.2s ease;
+        flex-shrink: 0; // 防止按钮被压缩
 
         &:hover {
           background: #f1f5f9;
@@ -78,6 +124,26 @@
     .gp-content {
       padding: 20px 24px;
       text-align: center;
+      overflow-y: auto; // 允许内容滚动
+      max-height: calc(80vh - 140px); // 确保内容区域不会溢出
+      
+      // 自定义滚动条样式
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 3px;
+        
+        &:hover {
+          background: rgba(0, 0, 0, 0.3);
+        }
+      }
 
       &.gp-modal-content {
         text-align: left;
@@ -98,6 +164,10 @@
         line-height: 1.5;
         color: #475569;
         margin: 0;
+        
+        @media (max-width: 640px) {
+          font-size: 14px;
+        }
       }
     }
 
@@ -106,6 +176,12 @@
       display: flex;
       gap: 12px;
       justify-content: flex-end;
+      flex-shrink: 0; // 防止按钮区域被压缩
+      
+      @media (max-width: 640px) {
+        flex-direction: column-reverse; // 移动端垂直排列按钮
+        gap: 8px;
+      }
 
       .gp-action-btn {
         padding: 10px 20px;
@@ -115,6 +191,11 @@
         cursor: pointer;
         transition: all 0.2s ease;
         border: 1px solid transparent;
+        
+        @media (max-width: 640px) {
+          width: 100%; // 移动端按钮全宽
+          justify-content: center;
+        }
 
         &.gp-btn-primary {
           background: #3b82f6;
@@ -139,7 +220,7 @@
     }
   }
 
-  // 角落提示模式
+  // 角落提示模式 - 优化position:fixed定位
   .gp-toast {
     position: fixed;
     z-index: $z-index-toast;
@@ -220,9 +301,7 @@
     }
   }
 
-  .gp-size-medium {
-    // 默认尺寸，已在上面定义
-  }
+  // .gp-size-medium 使用默认尺寸，无需额外样式定义
 
   .gp-size-large {
     &.gp-modal {
@@ -239,7 +318,7 @@
     }
   }
 
-  // 位置变体
+  // 位置变体 - 优化fixed定位
   .gp-position-top-right {
     top: 20px;
     right: 20px;
@@ -260,11 +339,11 @@
     left: 20px;
   }
 
-  // 响应式调整
+  // 响应式调整 - 优化移动端体验
   @media (max-width: 640px) {
     .gp-modal {
-      margin: 16px;
-      max-width: calc(100vw - 32px);
+      margin: 0; // 移除边距，完全依赖backdrop的padding
+      max-width: calc(100vw - 2rem);
       
       .gp-header, .gp-content, .gp-actions {
         padding-left: 20px;
@@ -291,7 +370,7 @@
   }
 }
 
-// 动画定义
+// 动画定义 - 优化动画效果
 @keyframes modalSlideIn {
   from {
     opacity: 0;

src/app/shared/components/requirements-confirm-card/requirements-confirm-card.scss

@@ -64,10 +64,17 @@
   gap: 1rem;
   position: relative;
   z-index: 1; // 确保在正常文档流中
+  margin-bottom: $ios-spacing-lg;
   
   // 移动端响应式
   @media (max-width: 768px) {
     grid-template-columns: 1fr;
+    gap: $ios-spacing-sm;
+  }
+  
+  // 平板端响应式
+  @media (min-width: 769px) and (max-width: 1024px) {
+    gap: $ios-spacing-md;
   }
   
   // 当弹窗出现时保持布局稳定
@@ -84,9 +91,53 @@
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
     
-    // 确保在弹窗出现时不会被遮挡或错位
+    // 确保在弹窗出现时不会被遮挡或错位，优化层级管理
     &.image-item, &.cad-item {
       z-index: 2;
+      
+      // 当有弹窗显示时，降低交互优先级
+      &.modal-active {
+        pointer-events: none;
+        opacity: 0.8;
+      }
+    }
+    
+    h5 {
+      margin: 0 0 $ios-spacing-sm 0;
+      font-size: $ios-font-size-xs;
+      font-weight: $ios-font-weight-semibold;
+      color: $ios-text-primary;
+    }
+    
+    .file-upload-zone {
+      border: 2px dashed $ios-border;
+      border-radius: 8px;
+      padding: $ios-spacing-lg;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        border-color: $ios-primary;
+        background: rgba(0, 122, 255, 0.02);
+      }
+      
+      svg {
+        color: $ios-text-secondary;
+        margin-bottom: $ios-spacing-sm;
+      }
+      
+      p {
+        margin: 0 0 $ios-spacing-xs 0;
+        font-size: $ios-font-size-xs;
+        color: $ios-text-primary;
+        font-weight: $ios-font-weight-medium;
+      }
+      
+      .hint {
+        font-size: $ios-font-size-xs;
+        color: $ios-text-secondary;
+      }
     }
   }
 }
@@ -503,6 +554,16 @@
         grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
         gap: $ios-spacing-sm;
         
+        // 响应式布局优化
+        @media (max-width: 768px) {
+          grid-template-columns: 1fr;
+          gap: $ios-spacing-xs;
+        }
+        
+        @media (min-width: 769px) and (max-width: 1024px) {
+          grid-template-columns: repeat(2, 1fr);
+        }
+        
         .material-card {
           border: 1px solid $ios-border;
           border-radius: 6px;
@@ -511,10 +572,11 @@
           position: relative;
           transition: transform 0.2s ease, box-shadow 0.2s ease;
           
-          // 防止弹窗出现时布局错乱
+          // 防止弹窗出现时布局错乱，优化对齐
           &:hover {
             transform: translateY(-1px);
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            z-index: 4; // 悬停时提升层级
           }
           
           &.material-text {

src/app/shared/components/upload-success-modal/upload-success-modal.component.scss

@@ -13,6 +13,7 @@ $animation-duration-normal: 0.3s;
 $animation-duration-slow: 0.5s;
 $animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
 
+// 弹窗背景遮罩 - 优化全屏居中布局
 .modal-backdrop {
   position: fixed;
   top: 0;
@@ -21,7 +22,7 @@ $animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
   height: 100vh;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
-  z-index: 10000; // 统一z-index层级管理
+  z-index: 10000; // 统一z-index层级管理，确保在所有内容之上
   display: flex;
   align-items: center;
   justify-content: center;
@@ -30,14 +31,21 @@ $animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
   // 强制所有设备都使用相同的居中布局
   @media (max-width: $mobile-breakpoint) {
     padding: 1rem;
+    align-items: center; // 确保移动端也居中显示
   }
   
   @media (min-width: $mobile-breakpoint) and (max-width: $tablet-breakpoint) {
     padding: 1rem;
+    align-items: center; // 确保平板端也居中显示
+  }
+  
+  @media (min-width: $tablet-breakpoint) {
+    padding: 2rem;
+    align-items: center; // 确保桌面端也居中显示
   }
 }
 
-// 弹窗主容器
+// 弹窗主容器 - 优化布局稳定性
 .modal-container {
   background: white;
   border-radius: 16px;
@@ -52,21 +60,24 @@ $animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
   flex-direction: column;
   margin: 0; // 移除所有边距，完全依赖flex居中
   
-  // 响应式调整 - 统一居中显示
+  // 响应式调整 - 统一居中显示，避免布局冲突
   @media (max-width: $mobile-breakpoint) {
     max-width: calc(100% - 2rem); // 保持左右边距
     border-radius: 16px;
     max-height: 75vh;
+    margin: 0; // 确保无边距
   }
   
   @media (min-width: $mobile-breakpoint) and (max-width: $tablet-breakpoint) {
     max-width: 90%;
     max-height: 78vh;
+    margin: 0; // 确保无边距
   }
   
   @media (min-width: $tablet-breakpoint) {
     max-width: 600px;
     max-height: 80vh;
+    margin: 0; // 确保无边距
   }
   
   // 深色模式适配
@@ -483,6 +494,7 @@ $animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
     padding: 24px;
     background: #f9f9f9;
     border-radius: 12px;
+    position: relative; // 确保相对定位
     
     .loading-spinner {
       width: 32px;
@@ -512,6 +524,8 @@ $animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
   
   // 分析结果
   .analysis-result {
+    position: relative; // 确保相对定位
+    
     .result-header {
       display: flex;
       align-items: center;
@@ -529,7 +543,7 @@ $animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
         }
       }
       
-      .result-badge {
+      .result-count {
         background: #34c759;
         color: white;
         font-size: 11px;
@@ -561,6 +575,7 @@ $animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
         border: 1px solid #e5e5ea;
         border-radius: 12px;
         transition: all 0.2s ease;
+        position: relative; // 确保相对定位
         
         @media (max-width: $mobile-breakpoint) {
           padding: 10px;
@@ -638,6 +653,7 @@ $animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
         cursor: pointer;
         transition: all 0.2s ease;
         min-width: 140px;
+        position: relative; // 确保相对定位
         
         @media (max-width: $mobile-breakpoint) {
           padding: 10px 16px;
@@ -665,218 +681,6 @@ $animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
         }
       }
     }
-    
-    // 颜色描述区域
-    .color-description {
-      margin-top: 24px;
-      padding: 24px;
-      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-      border: 1px solid #e5e5ea;
-      border-radius: 16px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-      
-      .description-header {
-        margin-bottom: 16px;
-        
-        h6 {
-          margin: 0 0 4px 0;
-          font-size: 18px;
-          font-weight: 700;
-          color: #1d1d1f;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          
-          &::before {
-            content: '🎨';
-            font-size: 20px;
-          }
-        }
-        
-        p {
-          margin: 0;
-          font-size: 14px;
-          color: #8e8e93;
-          font-weight: 400;
-        }
-      }
-      
-      .description-content {
-        background: #ffffff;
-        border: 2px solid #f0f0f0;
-        border-radius: 12px;
-        padding: 20px;
-        margin-bottom: 16px;
-        font-size: 15px;
-        line-height: 1.7;
-        color: #333333;
-        white-space: pre-line;
-        word-break: break-word;
-        max-height: 180px;
-        overflow-y: auto;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        transition: all 0.2s ease;
-        
-        &:hover {
-          border-color: #007aff;
-          box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
-        }
-        
-        &::-webkit-scrollbar {
-          width: 4px;
-        }
-        
-        &::-webkit-scrollbar-track {
-          background: transparent;
-        }
-        
-        &::-webkit-scrollbar-thumb {
-          background: rgba(0, 122, 255, 0.3);
-          border-radius: 2px;
-          
-          &:hover {
-            background: rgba(0, 122, 255, 0.5);
-          }
-        }
-        
-        &.empty {
-          color: #8e8e93;
-          font-style: italic;
-          text-align: center;
-          padding: 32px 20px;
-          background: #fafafa;
-          border-style: dashed;
-        }
-      }
-      
-      .description-actions {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16px;
-        
-        @media (max-width: $mobile-breakpoint) {
-          flex-direction: column;
-          align-items: stretch;
-        }
-        
-        .copy-btn {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          gap: 8px;
-          padding: 12px 20px;
-          background: linear-gradient(135deg, #007aff 0%, #0056cc 100%);
-          color: #ffffff;
-          border: none;
-          border-radius: 10px;
-          font-size: 14px;
-          font-weight: 600;
-          cursor: pointer;
-          transition: all 0.3s ease;
-          min-width: 100px;
-          box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
-          
-          &:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
-            background: linear-gradient(135deg, #0056cc 0%, #003d99 100%);
-          }
-          
-          &:active {
-            transform: translateY(0);
-            box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
-          }
-          
-          &.copied {
-            background: linear-gradient(135deg, #34c759 0%, #28a745 100%);
-            box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
-            
-            &:hover {
-              background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
-              box-shadow: 0 6px 20px rgba(52, 199, 89, 0.4);
-            }
-          }
-          
-          svg {
-            width: 14px;
-            height: 14px;
-          }
-        }
-        
-        .description-tip {
-          font-size: 12px;
-          color: #8e8e93;
-          flex: 1;
-          
-          @media (max-width: $mobile-breakpoint) {
-            text-align: center;
-            margin-top: 8px;
-          }
-        }
-      }
-    }
-  }
-  
-  // 分析错误
-  .analysis-error {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px;
-    background: #fff2f2;
-    border: 1px solid #fecaca;
-    border-radius: 8px;
-    
-    .error-icon {
-      width: 32px;
-      height: 32px;
-      background: #ef4444;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      
-      svg {
-        color: white;
-        width: 16px;
-        height: 16px;
-      }
-    }
-    
-    .error-text {
-      flex: 1;
-      
-      h5 {
-        margin: 0 0 4px 0;
-        font-size: 14px;
-        font-weight: 600;
-        color: #dc2626;
-      }
-      
-      p {
-        margin: 0;
-        font-size: 12px;
-        color: #991b1b;
-      }
-    }
-    
-    .retry-btn {
-      padding: 6px 12px;
-      background: #ef4444;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      font-size: 12px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        background: #dc2626;
-      }
-    }
   }
 }