feat(admin): align desktop report to compact module layout

admin-frontend/src/pages/ReportPage.vue

@@ -38,6 +38,7 @@ const dockerStats = ref(null)
 const browserPoolStats = ref(null)
 const systemConfig = ref(null)
 const queueTab = ref('running')
+const detailPanels = ref([])
 
 function recordUpdatedAt() {
   try {
@@ -460,7 +461,12 @@ onUnmounted(() => {
       </el-card>
     </section>
 
-    <div class="desktop-report">
+    <el-collapse v-model="detailPanels" class="detail-collapse">
+      <el-collapse-item name="detail">
+        <template #title>
+          <span class="detail-collapse-title">查看详细数据（队列明细 / 线程池明细 / 系统资源明细）</span>
+        </template>
+        <div class="desktop-report">
     <el-row :gutter="12">
       <el-col :xs="24" :lg="12">
         <el-card shadow="never" class="panel" :body-style="{ padding: '16px' }">
@@ -789,7 +795,9 @@ onUnmounted(() => {
         </el-card>
       </el-col>
     </el-row>
-    </div>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
   </div>
 </template>
 
@@ -851,7 +859,9 @@ onUnmounted(() => {
 }
 
 .mobile-report {
-  display: none;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .mobile-module-card {
@@ -946,6 +956,39 @@ onUnmounted(() => {
   word-break: break-word;
 }
 
+.hero-overview-grid {
+  display: none;
+}
+
+.detail-collapse {
+  border: 1px solid rgba(17, 24, 39, 0.08);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.72);
+  overflow: hidden;
+}
+
+.detail-collapse :deep(.el-collapse-item__header) {
+  padding: 0 14px;
+  min-height: 42px;
+  font-size: 13px;
+  font-weight: 800;
+  background: rgba(248, 250, 252, 0.92);
+  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
+}
+
+.detail-collapse :deep(.el-collapse-item__wrap) {
+  border: none;
+  background: transparent;
+}
+
+.detail-collapse :deep(.el-collapse-item__content) {
+  padding: 14px;
+}
+
+.detail-collapse-title {
+  color: #0f172a;
+}
+
 .panel {
   border-radius: 18px;
   border: 1px solid rgba(17, 24, 39, 0.1);
@@ -1145,14 +1188,20 @@ onUnmounted(() => {
   background: rgba(246, 247, 251, 0.8);
 }
 
+@media (max-width: 1200px) {
+  .mobile-report {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (max-width: 768px) {
-  .desktop-report {
-    display: none;
+  .mobile-report {
+    grid-template-columns: 1fr;
+    gap: 10px;
   }
 
-  .mobile-report {
-    display: grid;
-    gap: 10px;
+  .detail-collapse {
+    display: none;
   }
 
   .report-hero {
@@ -1170,10 +1219,6 @@ onUnmounted(() => {
     font-size: 11px;
   }
 
-  .hero-overview-grid {
-    display: none;
-  }
-
   .resource-grid {
     grid-template-columns: 1fr;
   }