style(service-monitor): 移动端响应式深度优化-新增480px超小屏幕断点

9 个页面全面优化移动端响应式样式：
- base.html: 新增 480px 断点，顶栏/侧边栏/用户名紧凑化
- index.html: 480px 断点，卡片/按钮缩小，目标管理按钮全宽
- reports.html: 480px 断点，筛选框/报告行/批量栏紧凑化
- report.html: 480px 断点，汇总卡片/异常项/检测项紧凑化，
  模块标题 word-break 防溢出
- statistics.html: 修正 768px 筛选栏完全纵向堆叠（原 flex-wrap
  仍可溢出），趋势选择器纵向堆叠；新增 480px 断点
- schedule.html: 480px 断点，弹窗/星期按钮/时间选择器紧凑化
- targets.html: 480px 断点，表格行/操作按钮/弹窗紧凑化
- notification.html: 修正 768px 端口输入框固定宽度溢出问题，
  改为自适应；新增 480px 断点，开关/表单紧凑化
- run.html: 进度条高度响应式（12→10→8px），480px 断点巡检
  卡片紧凑化，完成横幅长文字 word-break

验证：218 个单元测试全绿，已部署到 5.60
Co-Authored-By: Claude <noreply@anthropic.com>

skill/code/web/templates/service_monitor/base.html

@@ -227,6 +227,20 @@
                 padding: 16px;
             }
         }
+        /* 超小屏幕适配（<480px） */
+        @media screen and (max-width: 480px) {
+            .topbar { padding: 0 10px; height: 52px; }
+            .main-content { padding: 64px 10px 20px; }
+            .topbar-user span { max-width: 70px; font-size: 12px; }
+            .btn-logout { padding: 5px 8px; font-size: 11px; }
+            .hamburger { padding: 6px 10px; font-size: 16px; }
+            .sidebar { width: 180px; }
+            .sidebar.open { transform: translateX(0); }
+            .nav-item { padding: 10px 14px; font-size: 12px; gap: 10px; }
+            .nav-icon { font-size: 14px; width: 18px; }
+            .sidebar-brand { font-size: 14px; padding: 14px; }
+            .section-title { font-size: 15px; }
+        }
     </style>
     {% block extra_css %}{% endblock %}
 </head>

skill/code/web/templates/service_monitor/index.html

@@ -79,6 +79,16 @@
         .section-title { font-size: 16px; }
         .btn-add { padding: 8px 14px; font-size: 13px; }
     }
+    @media screen and (max-width: 480px) {
+        .target-grid { gap: 10px; }
+        .target-card { padding: 14px; }
+        .target-icon { font-size: 20px; }
+        .target-name { font-size: 14px; }
+        .target-meta { font-size: 11px; }
+        .btn-suite { padding: 9px 0; font-size: 12px; }
+        .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
+        .btn-add { width: 100%; text-align: center; font-size: 12px; padding: 7px 12px; }
+    }
 </style>
 {% endblock %}
 

skill/code/web/templates/service_monitor/notification.html

@@ -42,6 +42,8 @@
         .section-body { padding: 14px; }
         .form-row { flex-direction: column; gap: 0; }
         .form-row .form-group { margin-bottom: 14px; }
+        /* 端口输入框自适应 */
+        .form-row .form-group[style*="flex: 0 0"] { flex: 1 1 auto !important; }
         .form-group input, .form-group select, .form-group textarea {
             padding: 8px 10px; font-size: 13px;
         }
@@ -52,6 +54,25 @@
         .actions { flex-direction: column; }
         .section-head { margin-bottom: 12px; }
     }
+    @media screen and (max-width: 480px) {
+        .config-section { border-radius: 8px; }
+        .section-header { padding: 10px 12px; }
+        .section-title { font-size: 13px; }
+        .section-body { padding: 12px; }
+        .form-group input, .form-group select, .form-group textarea {
+            padding: 7px 8px; font-size: 12px;
+        }
+        .form-group label { font-size: 12px; }
+        .form-hint { font-size: 11px; }
+        .toggle-switch { width: 44px; height: 24px; }
+        .toggle-slider:before { height: 18px; width: 18px; }
+        .toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }
+        .toggle-label { font-size: 12px; }
+        .btn-test { padding: 5px 10px; font-size: 11px; }
+        .btn-save { padding: 7px 14px; font-size: 12px; }
+        .section-head { margin-bottom: 10px; }
+        .section-title { font-size: 15px; }
+    }
 </style>
 {% endblock %}
 

skill/code/web/templates/service_monitor/report.html

@@ -120,7 +120,7 @@
         .abnormal-row .ab-threshold, .abnormal-row .ab-module, .abnormal-row .btn-fix { display: none; }
         .ab-name { font-size: 13px; }
         .module-header { padding: 12px 14px; }
-        .module-title { font-size: 14px; }
+        .module-title { font-size: 14px; word-break: break-word; }
         .module-mini { font-size: 12px; }
         .item-row { grid-template-columns: 1fr auto; gap: 4px; padding: 8px 14px; font-size: 13px; }
         .item-threshold { display: none; }
@@ -130,6 +130,23 @@
         .process-table .cmd-cell { max-width: 120px; }
         .guest-banner { flex-direction: column; text-align: center; gap: 8px; padding: 12px; }
     }
+    @media screen and (max-width: 480px) {
+        .report-meta h2 { font-size: 14px; }
+        .report-meta .sub { font-size: 12px; }
+        .summary-cards { gap: 6px; }
+        .sum-card { padding: 10px; }
+        .sum-card .num { font-size: 18px; }
+        .sum-card .label { font-size: 11px; }
+        .abnormal-row { padding: 8px 10px; font-size: 12px; gap: 4px; }
+        .module-header { padding: 10px 12px; }
+        .module-title { font-size: 13px; }
+        .item-row { padding: 7px 12px; font-size: 12px; }
+        .item-value { word-break: break-word; font-size: 12px; }
+        .process-table { font-size: 10px; }
+        .process-table .cmd-cell { max-width: 90px; }
+        .guest-banner { padding: 10px; font-size: 13px; }
+        .btn-login-link { padding: 5px 10px; font-size: 12px; }
+    }
 </style>
 {% endblock %}
 

skill/code/web/templates/service_monitor/reports.html

@@ -119,6 +119,17 @@
         .btn-batch-del { margin-left: 0; }
         .section-head { margin-bottom: 12px; }
     }
+    @media screen and (max-width: 480px) {
+        .filter-bar select { padding: 7px 8px; font-size: 12px; }
+        .report-row { padding: 10px 12px; gap: 6px; }
+        .report-checkbox input { width: 14px; height: 14px; }
+        .report-target { font-size: 13px; }
+        .report-suite { font-size: 11px; }
+        .batch-bar { padding: 10px 12px; gap: 8px; }
+        .batch-count { font-size: 13px; }
+        .btn-batch-del { padding: 6px 12px; font-size: 12px; }
+        .section-title { font-size: 15px; }
+    }
 </style>
 {% endblock %}
 

skill/code/web/templates/service_monitor/run.html

@@ -50,6 +50,21 @@
         .module-name { font-size: 13px; }
         .module-info { font-size: 11px; }
         .btn-report { padding: 8px 18px; font-size: 13px; }
+        .progress-bar { height: 10px; }
+    }
+    @media screen and (max-width: 480px) {
+        .run-card { padding: 14px; border-radius: 10px; }
+        .run-title { font-size: 14px; }
+        .run-title .suite-tag { font-size: 11px; padding: 2px 6px; margin-left: 6px; }
+        .progress-bar { height: 8px; }
+        .progress-text { font-size: 11px; }
+        .module-item { gap: 6px; padding: 8px 0; }
+        .module-status { font-size: 14px; width: 18px; }
+        .module-name { font-size: 12px; }
+        .module-info { font-size: 10px; }
+        .btn-report { padding: 7px 16px; font-size: 12px; }
+        .done-banner { padding: 16px; font-size: 13px; }
+        #done-text { word-break: break-word; }
     }
 </style>
 {% endblock %}

skill/code/web/templates/service_monitor/schedule.html

@@ -106,6 +106,22 @@
         .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
         .btn-add { width: 100%; text-align: center; }
     }
+    @media screen and (max-width: 480px) {
+        .table-row { padding: 12px; gap: 4px; }
+        .table-row .name { font-size: 14px; }
+        .schedule-desc { font-size: 11px; }
+        .actions { gap: 3px; }
+        .btn-sm { padding: 3px 6px; font-size: 10px; }
+        .modal { padding: 14px; }
+        .modal h3 { font-size: 15px; }
+        .form-group input, .form-group select { padding: 7px 10px; font-size: 13px; }
+        .repeat-btn { padding: 7px 0; font-size: 12px; }
+        .weekday-btn { width: 36px; height: 30px; font-size: 11px; }
+        .time-picker select { width: 60px; padding: 6px 4px; font-size: 12px; }
+        .btn-cancel, .btn-save { padding: 7px 14px; font-size: 13px; }
+        .section-title { font-size: 15px; }
+        .btn-add { font-size: 12px; padding: 7px 12px; }
+    }
 </style>
 {% endblock %}
 

skill/code/web/templates/service_monitor/statistics.html

@@ -60,11 +60,11 @@
     }
 
     @media screen and (max-width: 768px) {
-        .filter-bar { gap: 10px; padding: 12px; }
-        .filter-group { flex: 1; min-width: 140px; }
+        .filter-bar { gap: 10px; padding: 12px; flex-direction: column; align-items: stretch; }
+        .filter-group { width: 100%; }
         .filter-label { font-size: 13px; }
-        .filter-select, .filter-date { padding: 6px 10px; font-size: 13px; }
-        .btn-query { padding: 6px 14px; font-size: 13px; }
+        .filter-select, .filter-date { padding: 6px 10px; font-size: 13px; width: 100%; }
+        .btn-query { padding: 6px 14px; font-size: 13px; width: 100%; }
         .overview-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
         .ov-card { padding: 12px; }
         .ov-card .value { font-size: 22px; }
@@ -75,6 +75,20 @@
         .chart-container { min-height: 250px; }
         .item-selector { max-width: 100%; font-size: 13px; }
         .trend-filters { flex-direction: column; gap: 10px; }
+        .trend-filters .filter-group { width: 100%; }
+        .trend-filters .filter-select { width: 100%; min-width: 0; }
+    }
+    @media screen and (max-width: 480px) {
+        .filter-bar { padding: 10px; gap: 8px; }
+        .filter-select, .filter-date { padding: 5px 8px; font-size: 12px; }
+        .btn-query { padding: 5px 12px; font-size: 12px; }
+        .overview-cards { grid-template-columns: 1fr 1fr; gap: 6px; }
+        .ov-card { padding: 10px; }
+        .ov-card .value { font-size: 18px; }
+        .ov-card .label { font-size: 11px; }
+        .chart-section { padding: 10px; }
+        .chart-container { min-height: 200px; }
+        .chart-title { font-size: 13px; }
     }
 </style>
 {% endblock %}

skill/code/web/templates/service_monitor/targets.html

@@ -51,6 +51,18 @@
         .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
         .btn-add { width: 100%; text-align: center; }
     }
+    @media screen and (max-width: 480px) {
+        .table-row { padding: 12px; gap: 4px; }
+        .table-row .name { font-size: 14px; }
+        .actions { gap: 3px; }
+        .btn-sm { padding: 3px 6px; font-size: 10px; }
+        .modal { padding: 14px; }
+        .modal h3 { font-size: 15px; }
+        .form-group input { padding: 7px 10px; font-size: 13px; }
+        .btn-cancel, .btn-save { padding: 7px 14px; font-size: 13px; }
+        .section-title { font-size: 15px; }
+        .btn-add { font-size: 12px; padding: 7px 12px; }
+    }
 </style>
 {% endblock %}