Bladeren bron

feat: improve delivery modal UI for mobile and WeCom sidebar

- Increased modal dimensions (500px width, 85vh height) with responsive breakpoints for mobile devices
- Enhanced form controls with larger fonts (14-15px), better padding, and improved touch targets
- Added scrollable template options with max-height constraint and visual polish (shadows, backgrounds)
徐福静0235668 14 uur geleden
bovenliggende
commit
7a0f5b7775

+ 0 - 3
src/modules/project/pages/project-detail/stages/stage-delivery-new.component.html

@@ -397,9 +397,6 @@
               [(ngModel)]="sendImageOnly"
               (change)="onSendImageOnlyChange()">
             <span class="checkbox-label">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
-              </svg>
               只发图片(不发文字)
             </span>
           </label>

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

@@ -481,13 +481,20 @@
   background: white;
   border-radius: 12px;
   width: 100%;
-  max-width: 400px;
-  max-height: 80vh;
+  max-width: 500px;  // 🔥 增加最大宽度,适应企微侧边栏
+  max-height: 85vh;  // 🔥 增加最大高度
   display: flex;
   flex-direction: column;
   box-shadow: 0 10px 25px rgba(0,0,0,0.2);
   overflow: hidden;
   animation: slideUp 0.3s ease-out;
+  
+  // 🔥 移动端/企微端适配
+  @media (max-width: 640px) {
+    max-width: 95vw;
+    max-height: 90vh;
+    border-radius: 8px;
+  }
 
   .gallery-header, .modal-header {
     padding: 16px;
@@ -583,6 +590,12 @@
         gap: 8px;
         margin-top: 10px;
         
+        // 🔥 移动端/小屏幕适配
+        @media (max-width: 480px) {
+          grid-template-columns: repeat(3, 1fr);
+          gap: 6px;
+        }
+        
         .preview-image-item {
           aspect-ratio: 1;
           border-radius: 6px;
@@ -607,12 +620,14 @@
         display: flex;
         flex-direction: column;
         gap: 8px;
+        max-height: 280px;  // 🔥 限制最大高度
+        overflow-y: auto;   // 🔥 支持滚动
         
         .template-option {
           display: flex;
           align-items: flex-start;
           gap: 10px;
-          padding: 10px;
+          padding: 10px 12px;  // 🔥 优化内边距
           border: 2px solid #e2e8f0;
           border-radius: 8px;
           cursor: pointer;
@@ -665,13 +680,16 @@
       
       .custom-input {
         width: 100%;
-        padding: 10px;
+        padding: 12px;  // 🔥 增加内边距,更易点击
         border: 2px solid #e2e8f0;
         border-radius: 8px;
-        font-size: 13px;
+        font-size: 14px;  // 🔥 增大字体
         color: #334155;
         resize: vertical;
+        min-height: 80px;  // 🔥 设置最小高度
+        max-height: 150px;  // 🔥 设置最大高度
         transition: border-color 0.2s;
+        line-height: 1.6;  // 🔥 增加行高
         
         &:focus {
           outline: none;
@@ -686,26 +704,32 @@
 
     // 只发图片选项
     .send-options {
-      margin-bottom: 12px;
+      margin-bottom: 14px;  // 🔥 增加下边距
+      padding: 10px;  // 🔥 增加内边距
+      background: #f8fafc;  // 🔥 添加背景色
+      border-radius: 6px;  // 🔥 圆角
       
       .checkbox-option {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: 10px;  // 🔥 增加间距
         cursor: pointer;
+        user-select: none;  // 🔥 禁止文字选中
         
         input[type="checkbox"] {
-          width: 16px;
-          height: 16px;
+          width: 18px;  // 🔥 增大尺寸
+          height: 18px;
           cursor: pointer;
+          flex-shrink: 0;  // 🔥 防止收缩
         }
         
         .checkbox-label {
           display: flex;
           align-items: center;
           gap: 6px;
-          font-size: 13px;
+          font-size: 14px;  // 🔥 增大字体
           color: #475569;
+          font-weight: 500;  // 🔥 加粗
           
           svg {
             color: #6366f1;
@@ -740,11 +764,18 @@
   }
 
   .gallery-footer, .modal-footer {
-    padding: 12px 16px;
+    padding: 14px 16px;  // 🔥 增加上下内边距
     border-top: 1px solid #e2e8f0;
     display: flex;
     justify-content: flex-end;
-    gap: 8px;
+    gap: 10px;  // 🔥 增加按钮间距
+    background: #fafafa;  // 🔥 添加浅灰背景
+    
+    // 🔥 移动端适配
+    @media (max-width: 480px) {
+      padding: 12px;
+      gap: 8px;
+    }
 
     .add-files-btn {
       display: flex; 
@@ -768,10 +799,11 @@
        background: white; 
        border: 1px solid #e2e8f0; 
        color: #64748b; 
-       padding: 8px 12px; 
+       padding: 10px 18px;  // 🔥 增大内边距
        border-radius: 6px; 
        cursor: pointer; 
-       font-size: 13px;
+       font-size: 14px;  // 🔥 增大字体
+       font-weight: 500;  // 🔥 加粗
        transition: all 0.2s;
        
        &:hover {
@@ -783,25 +815,28 @@
     .btn-send {
        display: flex;
        align-items: center;
-       gap: 6px;
+       gap: 8px;  // 🔥 增加图标间距
        background: #10b981; 
        color: white; 
        border: none; 
-       padding: 8px 16px; 
+       padding: 10px 20px;  // 🔥 增大内边距
        border-radius: 6px; 
        cursor: pointer; 
-       font-size: 13px;
+       font-size: 15px;  // 🔥 增大字体
        font-weight: 600;
        transition: all 0.2s;
+       box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);  // 🔥 添加阴影
        
        &:hover:not(:disabled) {
          background: #059669;
          transform: translateY(-1px);
+         box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);  // 🔥 hover阴影
        }
        
        &:disabled { 
-         opacity: 0.6; 
+         opacity: 0.5; 
          cursor: not-allowed;
+         box-shadow: none;  // 🔥 禁用时移除阴影
        }
        
        svg {

+ 2 - 1
src/modules/project/services/wxwork-sdk.service.ts

@@ -643,7 +643,8 @@ export class WxworkSDKService {
       'openLocation',
       'scanQRCode',
       'closeWindow',
-      'sendChatMessage'  // 🔥 添加发送消息权限
+      'sendChatMessage',  // 发送消息权限
+      'openExistedChatWithMsg'  // 🔥 发送消息到指定群聊(关键权限!)
     ];
   }
 }