refactor: optimize modal spacing and dimensions for WeChat Work sidebar

- Adjusted modal max-width to 420px for better fit in WeChat Work sidebar (450px)
- Reduced padding and margins throughout to maximize content space on smaller screens
- Fine-tuned font sizes, gaps, and heights for more compact layout

src/modules/project/pages/project-detail/stages/stage-delivery-new.component.scss

@@ -481,27 +481,29 @@
   background: white;
   border-radius: 12px;
   width: 100%;
-  max-width: 500px;  // 🔥 增加最大宽度，适应企微侧边栏
-  max-height: 85vh;  // 🔥 增加最大高度
+  max-width: 420px;  // 🔥 调整为420px，完美适配企微侧边栏（约450px宽）
+  max-height: 88vh;  // 🔥 调整最大高度
   display: flex;
   flex-direction: column;
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   overflow: hidden;
   animation: slideUp 0.3s ease-out;
+  margin: 0 auto;  // 🔥 居中显示
   
   // 🔥 移动端/企微端适配
   @media (max-width: 640px) {
-    max-width: 95vw;
-    max-height: 90vh;
+    max-width: 96vw;  // 🔥 留出4%边距
+    max-height: 92vh;
     border-radius: 8px;
   }
 
   .gallery-header, .modal-header {
-    padding: 16px;
+    padding: 14px 16px;  // 🔥 优化内边距
     border-bottom: 1px solid #e2e8f0;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-shrink: 0;  // 🔥 防止压缩
 
     .modal-title {
       flex: 1;
@@ -535,7 +537,8 @@
   .gallery-content, .modal-body {
     flex: 1;
     overflow-y: auto;
-    padding: 16px;
+    padding: 14px 16px;  // 🔥 优化内边距
+    overflow-x: hidden;  // 🔥 隐藏横向滚动条
 
     // Gallery Grid
     .images-grid {
@@ -582,13 +585,13 @@
 
     // 图片预览区域
     .images-preview-section {
-      margin-bottom: 16px;
+      margin-bottom: 14px;  // 🔥 减小下边距
       
       .images-preview-grid {
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 8px;
-        margin-top: 10px;
+        grid-template-columns: repeat(4, 1fr);  // 🔥 4列布局，每列约100px
+        gap: 6px;  // 🔥 减小间距
+        margin-top: 8px;  // 🔥 减小上边距
         
         // 🔥 移动端/小屏幕适配
         @media (max-width: 480px) {
@@ -614,13 +617,13 @@
 
     // 预设话术选择
     .templates-section {
-      margin-bottom: 16px;
+      margin-bottom: 14px;  // 🔥 减小下边距
       
       .template-options {
         display: flex;
         flex-direction: column;
         gap: 8px;
-        max-height: 280px;  // 🔥 限制最大高度
+        max-height: 240px;  // 🔥 减小最大高度，适应小屏幕
         overflow-y: auto;   // 🔥 支持滚动
         
         .template-option {
@@ -676,20 +679,20 @@
 
     // 自定义消息输入
     .custom-message-section {
-      margin-bottom: 16px;
+      margin-bottom: 14px;  // 🔥 减小下边距
       
       .custom-input {
         width: 100%;
-        padding: 12px;  // 🔥 增加内边距，更易点击
+        padding: 10px 12px;  // 🔥 优化内边距
         border: 2px solid #e2e8f0;
         border-radius: 8px;
-        font-size: 14px;  // 🔥 增大字体
+        font-size: 13px;  // 🔥 调整字体大小
         color: #334155;
         resize: vertical;
-        min-height: 80px;  // 🔥 设置最小高度
-        max-height: 150px;  // 🔥 设置最大高度
+        min-height: 70px;  // 🔥 减小最小高度
+        max-height: 120px;  // 🔥 减小最大高度
         transition: border-color 0.2s;
-        line-height: 1.6;  // 🔥 增加行高
+        line-height: 1.5;  // 🔥 调整行高
         
         &:focus {
           outline: none;
@@ -704,8 +707,8 @@
 
     // 只发图片选项
     .send-options {
-      margin-bottom: 14px;  // 🔥 增加下边距
-      padding: 10px;  // 🔥 增加内边距
+      margin-bottom: 12px;  // 🔥 减小下边距
+      padding: 10px 12px;  // 🔥 优化内边距
       background: #f8fafc;  // 🔥 添加背景色
       border-radius: 6px;  // 🔥 圆角
       
@@ -727,9 +730,10 @@
           display: flex;
           align-items: center;
           gap: 6px;
-          font-size: 14px;  // 🔥 增大字体
+          font-size: 13px;  // 🔥 调整字体大小
           color: #475569;
           font-weight: 500;  // 🔥 加粗
+          white-space: nowrap;  // 🔥 防止换行
           
           svg {
             color: #6366f1;
@@ -764,17 +768,18 @@
   }
 
   .gallery-footer, .modal-footer {
-    padding: 14px 16px;  // 🔥 增加上下内边距
+    padding: 12px 16px;  // 🔥 优化内边距
     border-top: 1px solid #e2e8f0;
     display: flex;
     justify-content: flex-end;
-    gap: 10px;  // 🔥 增加按钮间距
+    gap: 8px;  // 🔥 调整按钮间距
     background: #fafafa;  // 🔥 添加浅灰背景
+    flex-shrink: 0;  // 🔥 防止压缩
     
     // 🔥 移动端适配
     @media (max-width: 480px) {
-      padding: 12px;
-      gap: 8px;
+      padding: 10px 12px;
+      gap: 6px;
     }
 
     .add-files-btn {
@@ -799,10 +804,10 @@
        background: white; 
        border: 1px solid #e2e8f0; 
        color: #64748b; 
-       padding: 10px 18px;  // 🔥 增大内边距
+       padding: 9px 16px;  // 🔥 优化内边距
        border-radius: 6px; 
        cursor: pointer; 
-       font-size: 14px;  // 🔥 增大字体
+       font-size: 13px;  // 🔥 调整字体
        font-weight: 500;  // 🔥 加粗
        transition: all 0.2s;
        
@@ -815,14 +820,14 @@
     .btn-send {
        display: flex;
        align-items: center;
-       gap: 8px;  // 🔥 增加图标间距
+       gap: 6px;  // 🔥 调整图标间距
        background: #10b981; 
        color: white; 
        border: none; 
-       padding: 10px 20px;  // 🔥 增大内边距
+       padding: 9px 18px;  // 🔥 优化内边距
        border-radius: 6px; 
        cursor: pointer; 
-       font-size: 15px;  // 🔥 增大字体
+       font-size: 14px;  // 🔥 调整字体
        font-weight: 600;
        transition: all 0.2s;
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);  // 🔥 添加阴影