refactor: optimize message modal UI for compact layout

- Reduced modal width from 420px to 400px and adjusted spacing throughout for tighter, more efficient use of space
- Decreased padding, margins, font sizes, and border radii across all modal components for a more compact appearance
- Standardized message sending to use link type format for both text and images, removing fallback logic and type assertions

src/app/pages/services/delivery-message.service.ts

@@ -237,19 +237,24 @@ export class DeliveryMessageService {
         throw new Error('群聊ID为空，无法发送消息');
       }
       
-      // 4️⃣ 发送文本消息
+      // 4️⃣ 发送文本消息（使用link类型，参考sendSurvey方法）
       if (text) {
         console.log('📝 [sendToWxwork] 发送文本消息...');
         console.log('  内容:', text);
         
+        // 🔥 参考project-detail.component.ts的sendSurvey方法
+        // 使用link类型发送消息，这是最可靠的方式
         await this.wxworkService.ww.openExistedChatWithMsg({
           chatId: chatId,
           msg: {
-            msgtype: 'text',
-            text: {
-              content: text
+            msgtype: 'link',
+            link: {
+              title: '交付进度通知',
+              desc: text,  // 🔥 文本内容作为描述
+              url: window.location.href,  // 🔥 链接到当前页面
+              imgUrl: `${document.baseURI}assets/logo.jpg`  // 🔥 使用默认logo
             }
-          } as any  // 🔥 使用类型断言绕过TypeScript类型检查
+          }
         });
         
         console.log('✅ 文本消息已发送');
@@ -260,50 +265,32 @@ export class DeliveryMessageService {
         }
       }
       
-      // 5️⃣ 发送图片消息（使用link类型，可以显示图片预览）
+      // 5️⃣ 发送图片消息（使用link类型，参考sendSurvey方法）
       for (let i = 0; i < imageUrls.length; i++) {
         const imageUrl = imageUrls[i];
         console.log(`📸 [sendToWxwork] 发送图片 ${i + 1}/${imageUrls.length}...`);
         console.log('  URL:', imageUrl);
         
-        try {
-          // 🔥 使用link类型发送图文消息，可以在群聊中显示图片预览
-          await this.wxworkService.ww.openExistedChatWithMsg({
-            chatId: chatId,
-            msg: {
-              msgtype: 'link',
-              link: {
-                title: `图片 ${i + 1}/${imageUrls.length}`,
-                desc: '点击查看大图',
-                url: imageUrl,
-                imgUrl: imageUrl
-              }
+        // 🔥 参考project-detail.component.ts的sendSurvey方法
+        // 使用link类型发送图片，url和imgUrl都指向图片地址
+        await this.wxworkService.ww.openExistedChatWithMsg({
+          chatId: chatId,
+          msg: {
+            msgtype: 'link',
+            link: {
+              title: `交付物 ${i + 1}/${imageUrls.length}`,
+              desc: '点击查看大图',
+              url: imageUrl,  // 🔥 点击链接打开图片
+              imgUrl: imageUrl  // 🔥 显示图片预览
             }
-          });
-          
-          console.log(`✅ 图片 ${i + 1}/${imageUrls.length} 已发送`);
-          
-          // 避免发送过快，加入延迟
-          if (i < imageUrls.length - 1) {
-            await new Promise(resolve => setTimeout(resolve, 500));
-          }
-        } catch (imgError) {
-          console.error(`❌ 图片 ${i + 1} 发送失败:`, imgError);
-          // 降级：尝试以文本方式发送图片链接
-          try {
-            await this.wxworkService.ww.openExistedChatWithMsg({
-              chatId: chatId,
-              msg: {
-                msgtype: 'text',
-                text: {
-                  content: `📷 图片 ${i + 1}/${imageUrls.length}\n${imageUrl}`
-                }
-              } as any  // 🔥 使用类型断言绕过TypeScript类型检查
-            });
-            console.log(`✅ 已改用文本方式发送图片链接`);
-          } catch (textError) {
-            console.error(`❌ 文本方式也失败:`, textError);
           }
+        });
+        
+        console.log(`✅ 图片 ${i + 1}/${imageUrls.length} 已发送`);
+        
+        // 避免发送过快，加入延迟
+        if (i < imageUrls.length - 1) {
+          await new Promise(resolve => setTimeout(resolve, 500));
         }
       }
       

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

@@ -479,15 +479,15 @@
 
 .stage-gallery-modal, .message-modal-box {
   background: white;
-  border-radius: 12px;
+  border-radius: 10px;  // 🔥 减小圆角
   width: 100%;
-  max-width: 420px;  // 🔥 调整为420px，完美适配企微侧边栏（约450px宽）
-  max-height: 88vh;  // 🔥 调整最大高度
+  max-width: 400px;  // 🔥 进一步减小到400px，紧凑型布局
+  max-height: 90vh;  // 🔥 调整最大高度
   display: flex;
   flex-direction: column;
-  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.15);  // 🔥 减小阴影
   overflow: hidden;
-  animation: slideUp 0.3s ease-out;
+  animation: slideUp 0.25s ease-out;  // 🔥 加快动画
   margin: 0 auto;  // 🔥 居中显示
   
   // 🔥 移动端/企微端适配
@@ -498,25 +498,26 @@
   }
 
   .gallery-header, .modal-header {
-    padding: 14px 16px;  // 🔥 优化内边距
+    padding: 12px 14px;  // 🔥 紧凑型内边距
     border-bottom: 1px solid #e2e8f0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;  // 🔥 防止压缩
+    background: linear-gradient(to bottom, #fafafa, #ffffff);  // 🔥 添加渐变
 
     .modal-title {
       flex: 1;
       h4 { 
         margin: 0; 
-        font-size: 16px; 
+        font-size: 15px;  // 
         font-weight: 700; 
         color: #1e293b;
       }
       .modal-subtitle { 
-        margin: 4px 0 0; 
-        font-size: 12px; 
-        color: #64748b; 
+        font-size: 11px;  // 
+        color: #94a3b8; 
+        margin-top: 2px;
       }
     }
 
@@ -537,7 +538,7 @@
   .gallery-content, .modal-body {
     flex: 1;
     overflow-y: auto;
-    padding: 14px 16px;  // 🔥 优化内边距
+    padding: 12px 14px;  // 🔥 紧凑型内边距
     overflow-x: hidden;  // 🔥 隐藏横向滚动条
 
     // Gallery Grid
@@ -571,27 +572,29 @@
     .section-label {
       display: flex;
       align-items: center;
-      gap: 6px;
-      font-size: 13px;
+      gap: 5px;  // 🔥 减小间距
+      font-size: 12px;  // 🔥 减小字体
       font-weight: 600;
       color: #475569;
-      margin-bottom: 10px;
+      margin-bottom: 8px;  // 🔥 减小下边距
       
       svg {
         flex-shrink: 0;
         color: #6366f1;
+        width: 16px;  // 🔥 减小图标
+        height: 16px;
       }
     }
 
     // 图片预览区域
     .images-preview-section {
-      margin-bottom: 14px;  // 🔥 减小下边距
+      margin-bottom: 12px;  // 🔥 进一步减小下边距
       
       .images-preview-grid {
         display: grid;
-        grid-template-columns: repeat(4, 1fr);  // 🔥 4列布局，每列约100px
-        gap: 6px;  // 🔥 减小间距
-        margin-top: 8px;  // 🔥 减小上边距
+        grid-template-columns: repeat(4, 1fr);  // 🔥 4列布局
+        gap: 5px;  // 🔥 进一步减小间距
+        margin-top: 6px;  // 🔥 进一步减小上边距
         
         // 🔥 移动端/小屏幕适配
         @media (max-width: 480px) {
@@ -601,9 +604,9 @@
         
         .preview-image-item {
           aspect-ratio: 1;
-          border-radius: 6px;
+          border-radius: 4px;  // 🔥 减小圆角
           overflow: hidden;
-          border: 2px solid #e2e8f0;
+          border: 1.5px solid #e2e8f0;  // 🔥 减小边框
           background: #f8fafc;
           
           img {
@@ -617,22 +620,22 @@
 
     // 预设话术选择
     .templates-section {
-      margin-bottom: 14px;  // 🔥 减小下边距
+      margin-bottom: 12px;  // 🔥 进一步减小下边距
       
       .template-options {
         display: flex;
         flex-direction: column;
-        gap: 8px;
-        max-height: 240px;  // 🔥 减小最大高度，适应小屏幕
+        gap: 6px;  // 🔥 减小间距
+        max-height: 200px;  // 🔥 进一步减小最大高度
         overflow-y: auto;   // 🔥 支持滚动
         
         .template-option {
           display: flex;
           align-items: flex-start;
-          gap: 10px;
-          padding: 10px 12px;  // 🔥 优化内边距
-          border: 2px solid #e2e8f0;
-          border-radius: 8px;
+          gap: 8px;  // 🔥 减小间距
+          padding: 8px 10px;  // 🔥 紧凑型内边距
+          border: 1.5px solid #e2e8f0;  // 🔥 减小边框
+          border-radius: 6px;  // 🔥 减小圆角
           cursor: pointer;
           transition: all 0.2s;
           background: white;
@@ -669,9 +672,9 @@
           
           .template-text {
             flex: 1;
-            font-size: 13px;
+            font-size: 12px;  // 🔥 减小字体
             color: #334155;
-            line-height: 1.5;
+            line-height: 1.4;  // 🔥 减小行高
           }
         }
       }
@@ -679,20 +682,20 @@
 
     // 自定义消息输入
     .custom-message-section {
-      margin-bottom: 14px;  // 🔥 减小下边距
+      margin-bottom: 10px;  // 🔥 进一步减小下边距
       
       .custom-input {
         width: 100%;
-        padding: 10px 12px;  // 🔥 优化内边距
-        border: 2px solid #e2e8f0;
-        border-radius: 8px;
-        font-size: 13px;  // 🔥 调整字体大小
+        padding: 8px 10px;  // 🔥 紧凑型内边距
+        border: 1.5px solid #e2e8f0;  // 🔥 减小边框
+        border-radius: 6px;  // 🔥 减小圆角
+        font-size: 12px;  // 🔥 减小字体
         color: #334155;
         resize: vertical;
-        min-height: 70px;  // 🔥 减小最小高度
-        max-height: 120px;  // 🔥 减小最大高度
+        min-height: 60px;  // 🔥 进一步减小最小高度
+        max-height: 100px;  // 🔥 进一步减小最大高度
         transition: border-color 0.2s;
-        line-height: 1.5;  // 🔥 调整行高
+        line-height: 1.4;  // 🔥 减小行高
         
         &:focus {
           outline: none;
@@ -707,36 +710,38 @@
 
     // 只发图片选项
     .send-options {
-      margin-bottom: 12px;  // 🔥 减小下边距
-      padding: 10px 12px;  // 🔥 优化内边距
-      background: #f8fafc;  // 🔥 添加背景色
-      border-radius: 6px;  // 🔥 圆角
+      margin-bottom: 10px;
+      padding: 8px 10px;
+      background: #f8fafc;
+      border-radius: 5px;
       
       .checkbox-option {
         display: flex;
         align-items: center;
-        gap: 10px;  // 🔥 增加间距
+        gap: 8px;
         cursor: pointer;
-        user-select: none;  // 🔥 禁止文字选中
+        user-select: none;
         
         input[type="checkbox"] {
-          width: 18px;  // 🔥 增大尺寸
-          height: 18px;
+          width: 16px;
+          height: 16px;
           cursor: pointer;
-          flex-shrink: 0;  // 🔥 防止收缩
+          flex-shrink: 0;
         }
         
         .checkbox-label {
           display: flex;
           align-items: center;
-          gap: 6px;
-          font-size: 13px;  // 🔥 调整字体大小
+          gap: 5px;
+          font-size: 12px;
           color: #475569;
-          font-weight: 500;  // 🔥 加粗
-          white-space: nowrap;  // 🔥 防止换行
+          font-weight: 500;
+          white-space: nowrap;
           
           svg {
             color: #6366f1;
+            width: 14px;
+            height: 14px;
           }
         }
       }
@@ -768,7 +773,7 @@
   }
 
   .gallery-footer, .modal-footer {
-    padding: 12px 16px;  // 🔥 优化内边距
+    padding: 10px 14px;  // 🔥 紧凑型内边距
     border-top: 1px solid #e2e8f0;
     display: flex;
     justify-content: flex-end;
@@ -778,7 +783,7 @@
     
     // 🔥 移动端适配
     @media (max-width: 480px) {
-      padding: 10px 12px;
+      padding: 8px 10px;
       gap: 6px;
     }
 
@@ -804,10 +809,10 @@
        background: white; 
        border: 1px solid #e2e8f0; 
        color: #64748b; 
-       padding: 9px 16px;  // 🔥 优化内边距
-       border-radius: 6px; 
+       padding: 8px 14px;  // 🔥 紧凑型内边距
+       border-radius: 5px;  // 🔥 减小圆角
        cursor: pointer; 
-       font-size: 13px;  // 🔥 调整字体
+       font-size: 12px;  // 🔥 减小字体
        font-weight: 500;  // 🔥 加粗
        transition: all 0.2s;
        
@@ -820,14 +825,14 @@
     .btn-send {
        display: flex;
        align-items: center;
-       gap: 6px;  // 🔥 调整图标间距
+       gap: 5px;  // 🔥 减小间距
        background: #10b981; 
        color: white; 
        border: none; 
-       padding: 9px 18px;  // 🔥 优化内边距
-       border-radius: 6px; 
+       padding: 8px 16px;  // 🔥 紧凑型内边距
+       border-radius: 5px;  // 🔥 减小圆角
        cursor: pointer; 
-       font-size: 14px;  // 🔥 调整字体
+       font-size: 13px;  // 🔥 减小字体
        font-weight: 600;
        transition: all 0.2s;
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);  // 🔥 添加阴影