1

src/views/system/jdorder/components/TencentDocPushMonitor.vue

@@ -2,10 +2,12 @@
   <el-dialog
     title="腾讯文档推送监控"
     :visible.sync="visible"
-    width="1200px"
+    :width="isMobile ? '100%' : '1200px'"
     :close-on-click-modal="false"
     @close="handleClose"
-    top="5vh"
+    :top="isMobile ? '0' : '5vh'"
+    :fullscreen="isMobile"
+    :custom-class="isMobile ? 'mobile-push-monitor-dialog' : ''"
   >
     <div class="push-monitor">
       <!-- 倒计时和状态卡片 -->
@@ -57,6 +59,7 @@
               type="primary" 
               icon="el-icon-upload2" 
               :loading="pushing"
+              :size="isMobile ? 'small' : 'default'"
               @click="handleTriggerPushNow"
             >
               立即推送
@@ -65,12 +68,14 @@
               type="warning" 
               icon="el-icon-close" 
               :disabled="!pushStatus.isScheduled"
+              :size="isMobile ? 'small' : 'default'"
               @click="handleCancelPush"
             >
               取消推送
             </el-button>
             <el-button 
               icon="el-icon-refresh" 
+              :size="isMobile ? 'small' : 'default'"
               @click="loadPushStatus"
             >
               刷新状态
@@ -232,6 +237,17 @@ export default {
       refreshTimer: null
     }
   },
+  computed: {
+    isMobile() {
+      if (this.$store?.getters?.device === 'mobile') {
+        return true
+      }
+      if (typeof window !== 'undefined' && window.innerWidth < 768) {
+        return true
+      }
+      return false
+    }
+  },
   watch: {
     value(val) {
       this.visible = val
@@ -809,5 +825,141 @@ export default {
 .no-logs i {
   font-size: 18px;
 }
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .push-monitor {
+    gap: 12px;
+  }
+
+  .countdown-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px;
+  }
+
+  .countdown-header .header-left {
+    font-size: 16px;
+  }
+
+  .countdown-header .header-left i {
+    font-size: 20px;
+  }
+
+  .countdown-content {
+    padding: 20px 12px 12px;
+    gap: 15px;
+  }
+
+  .countdown-display {
+    font-size: 32px;
+    gap: 10px;
+  }
+
+  .time-box {
+    min-width: 60px;
+    padding: 8px 12px;
+  }
+
+  .time-value {
+    font-size: 32px;
+  }
+
+  .time-separator {
+    font-size: 24px;
+  }
+
+  .countdown-info {
+    gap: 8px;
+  }
+
+  .info-item {
+    font-size: 12px;
+    padding: 6px 12px;
+    flex-wrap: wrap;
+  }
+
+  .countdown-actions {
+    flex-direction: column;
+    width: 100%;
+    gap: 8px;
+  }
+
+  .countdown-actions .el-button {
+    width: 100%;
+    margin: 0;
+  }
+
+  .records-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .records-header .header-left {
+    font-size: 14px;
+  }
+
+  .record-summary {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .summary-left,
+  .summary-right {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .record-stats {
+    font-size: 12px;
+  }
+
+  .trigger-source,
+  .record-range,
+  .record-duration {
+    font-size: 12px;
+  }
+}
+
+/* 移动端全屏弹窗样式 */
+::v-deep .mobile-push-monitor-dialog {
+  margin: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+}
+
+::v-deep .mobile-push-monitor-dialog .el-dialog {
+  margin: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  border-radius: 0 !important;
+  display: flex;
+  flex-direction: column;
+}
+
+::v-deep .mobile-push-monitor-dialog .el-dialog__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  -webkit-overflow-scrolling: touch;
+}
+
+::v-deep .mobile-push-monitor-dialog .el-dialog__header {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e4e7ed;
+  flex-shrink: 0;
+}
+
+::v-deep .mobile-push-monitor-dialog .el-dialog__title {
+  font-size: 16px;
+}
 </style>