feat(frontend): 压缩状态监控历史图布局

收紧 CPU 和网络历史图的高度，减少标题区占用，
并同步调整 CPU 核心面板与卡片间距，避免侧栏内
出现多余留白。

.helloagents/CHANGELOG.md

@@ -101,6 +101,12 @@
   - 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/)
 
 ### 快速修改
+- **[frontend]**: 删除状态监控“进程管理”模块标题下的“默认概览 / 点击查看全部”副标题，只保留眉标与右侧操作区，收紧标题区纵向占用 — by yinjianm
+  - 类型: 快速修改（无方案包）
+  - 文件: packages/frontend/src/components/StatusMonitor.vue:222-228
+- **[frontend]**: 将 CPU 历史图的 `canvas` 高度继续收紧到 `70px`，并同步缩短上方历史图区块行高，避免外层保留多余留白 — by yinjianm
+  - 类型: 快速修改（无方案包）
+  - 文件: packages/frontend/src/components/StatusMonitor.vue, packages/frontend/src/components/StatusMonitorCpuHistoryChart.vue
 - **[frontend]**: 将 CPU 历史图卡片从随父容器拉伸改为固定紧凑高度约 `188px`，并同步压缩标题区与 canvas 高度，避免在窄侧栏下被撑到约 `278px` — by yinjianm
   - 类型: 快速修改（无方案包）
   - 文件: packages/frontend/src/components/StatusMonitorCpuHistoryChart.vue:185-245

packages/frontend/src/components/StatusMonitor.vue

@@ -69,22 +69,24 @@
         <div class="module-split module-split--cpu">
           <StatusMonitorCpuHistoryChart :cpu-history="currentCpuHistory" />
 
-          <div class="cpu-core-grid">
+          <div class="cpu-core-panel">
-            <article
+            <div class="cpu-core-grid">
-              v-for="item in cpuCoreItems"
+              <article
-              :key="item.key"
+                v-for="item in cpuCoreItems"
-              class="usage-lane usage-lane--cpu"
+                :key="item.key"
-            >
+                class="usage-lane usage-lane--cpu"
-              <div class="usage-lane__content">
+              >
-                <div class="usage-lane__meta">
+                <div class="usage-lane__content">
-                  <span class="usage-lane__label">{{ item.label }}</span>
+                  <div class="usage-lane__meta">
-                  <span class="usage-lane__value-inline">{{ item.value }}</span>
+                    <span class="usage-lane__label">{{ item.label }}</span>
+                    <span class="usage-lane__value-inline">{{ item.value }}</span>
+                  </div>
+                  <div class="usage-lane__track">
+                    <span class="usage-lane__fill" :style="{ width: `${item.percent}%` }"></span>
+                  </div>
                 </div>
-                <div class="usage-lane__track">
+              </article>
-                  <span class="usage-lane__fill" :style="{ width: `${item.percent}%` }"></span>
+            </div>
-                </div>
-              </div>
-            </article>
           </div>
         </div>
       </section>
@@ -221,7 +223,6 @@
           <div class="monitor-module__heading">
             <div>
               <span class="monitor-module__eyebrow">{{ t('statusMonitor.processManager.title') }}</span>
-              <h5 class="monitor-module__title">{{ t('statusMonitor.processManager.subtitle') }}</h5>
             </div>
             <div class="monitor-module__heading-actions">
               <div class="process-summary-pills">
@@ -851,6 +852,13 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
   min-height: clamp(188px, 62cqw, 220px);
 }
 
+.monitor-module--usage {
+  grid-template-rows: auto minmax(0, 1fr);
+  max-height: 320px;
+  gap: 8px;
+  overflow: hidden;
+}
+
 .monitor-module--process {
   min-height: clamp(340px, 116cqw, 420px);
 }
@@ -977,16 +985,50 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
   background: linear-gradient(90deg, #7dd3fc, #2563eb);
 }
 
+.usage-lane--cpu {
+  gap: 6px;
+  border-radius: 10px;
+  padding: 6px 8px;
+}
+
+.usage-lane--cpu .usage-lane__content {
+  gap: 6px;
+}
+
+.usage-lane--cpu .usage-lane__label {
+  font-size: 11px;
+}
+
+.usage-lane--cpu .usage-lane__value-inline {
+  font-size: 14px;
+}
+
+.usage-lane--cpu .usage-lane__track {
+  height: 6px;
+}
+
 .cpu-core-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
   align-content: start;
-  gap: 8px;
+  gap: 6px;
-  max-height: 208px;
+  min-height: 0;
+  height: 100%;
   overflow-y: auto;
   padding-right: 2px;
 }
 
+.cpu-core-panel {
+  min-height: 0;
+  border-radius: 16px;
+  border: 1px solid rgba(148, 163, 184, 0.08);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02)),
+    radial-gradient(circle at top left, rgba(59, 130, 246, 0.04), transparent 60%);
+  padding: 8px 10px;
+  overflow: hidden;
+}
+
 .module-split {
   display: grid;
   gap: 12px;
@@ -998,8 +1040,12 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
 }
 
 .module-split--cpu {
-  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  grid-template-columns: 1fr;
-  align-items: stretch;
+  grid-template-rows: minmax(0, 126px) minmax(0, 112px);
+  min-height: 0;
+  align-content: start;
+  gap: 8px;
+  overflow: hidden;
 }
 
 .module-split--network {

packages/frontend/src/components/StatusMonitorCpuHistoryChart.vue

@@ -2,7 +2,6 @@
   <div ref="chartHostRef" class="cpu-history-chart">
     <div class="cpu-history-chart__header">
       <div>
-        <p class="cpu-history-chart__subtitle">{{ t('statusMonitor.cpuHistoryRecentPoints', { count: displayPointCount }) }}</p>
         <h6 class="cpu-history-chart__title">{{ t('statusMonitor.cpuUsageTitle') }}</h6>
       </div>
       <span class="cpu-history-chart__latest">{{ t('statusMonitor.latestCpuValue', { value: latestCpuValue }) }}</span>
@@ -184,23 +183,25 @@ onBeforeUnmount(() => {
 <style scoped>
 .cpu-history-chart {
   display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 8px;
   min-width: 0;
-  height: 188px;
+  min-height: 0;
-  align-self: start;
+  height: 100%;
   border-radius: 16px;
   border: 1px solid rgba(148, 163, 184, 0.08);
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02)),
     radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 62%);
   padding: 10px;
+  overflow: hidden;
 }
 
 .cpu-history-chart__header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
+  gap: 8px;
 }
 
 .cpu-history-chart__subtitle {
@@ -213,22 +214,22 @@ onBeforeUnmount(() => {
 }
 
 .cpu-history-chart__title {
-  margin: 4px 0 0;
+  margin: 6px 0 0;
   color: #f8fbff;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 800;
   line-height: 1.2;
 }
 
 .cpu-history-chart__latest {
   display: inline-flex;
-  min-height: 24px;
+  min-height: 22px;
   align-items: center;
   justify-content: center;
   border-radius: 999px;
   border: 1px solid rgba(96, 165, 250, 0.22);
   background: rgba(37, 99, 235, 0.18);
-  padding: 0 9px;
+  padding: 0 8px;
   color: #dbeafe;
   font-size: 11px;
   font-weight: 800;
@@ -237,8 +238,9 @@ onBeforeUnmount(() => {
 
 .cpu-history-chart__canvas {
   min-width: 0;
+  min-height: 0;
   width: 100%;
-  height: 112px;
+  height: 70px;
   overflow: hidden;
 }
 

packages/frontend/src/components/StatusMonitorNetworkHistoryChart.vue

@@ -2,7 +2,6 @@
   <div ref="chartHostRef" class="network-history-chart">
     <div class="network-history-chart__header">
       <div>
-        <p class="network-history-chart__subtitle">{{ t('statusMonitor.networkHistoryRecentPoints', { count: displayPointCount }) }}</p>
         <h6 class="network-history-chart__title">
           {{ t('statusMonitor.networkSpeedTitleUnit', { unit: networkRateUnitIsMB ? 'MB/s' : 'KB/s' }) }}
         </h6>
@@ -331,7 +330,7 @@ onBeforeUnmount(() => {
   min-width: 0;
   min-height: 0;
   width: 100%;
-  height: 88px;
+  height: 60px;
   overflow: hidden;
 }