feat: 更新资源指标显示，增加 CPU、内存和交换区的详细信息

frontend/index.html

@@ -263,32 +263,37 @@
                     <span id="session-subtitle">选择目标并连接</span>
                   </div>
                 </div>
+                <div class="resource-metrics" aria-label="系统资源" data-i18n-aria-label-zh="系统资源" data-i18n-aria-label-en="System resources">
+                  <div class="resource-metric resource-cpu">
+                    <div class="resource-metric-line">
+                      <span data-i18n-zh="CPU" data-i18n-en="CPU">CPU</span>
+                      <strong id="resource-cpu-value" class="resource-percentage">--</strong>
+                      <strong id="resource-cpu-load" class="resource-detail">-- / -- / --</strong>
+                    </div>
+                    <progress id="resource-cpu-progress" max="100" value="0" aria-label="CPU 使用率" data-i18n-aria-label-zh="CPU 使用率" data-i18n-aria-label-en="CPU usage"></progress>
+                  </div>
+                  <div class="resource-metric resource-memory">
+                    <div class="resource-metric-line">
+                      <span data-i18n-zh="内存" data-i18n-en="MEM">内存</span>
+                      <strong id="resource-memory-value" class="resource-percentage">--</strong>
+                      <strong id="resource-memory-amount" class="resource-detail">--/--</strong>
+                    </div>
+                    <progress id="resource-memory-progress" max="100" value="0" aria-label="内存使用率" data-i18n-aria-label-zh="内存使用率" data-i18n-aria-label-en="Memory usage"></progress>
+                  </div>
+                  <div class="resource-metric resource-swap">
+                    <div class="resource-metric-line">
+                      <span data-i18n-zh="Swap" data-i18n-en="SWAP">Swap</span>
+                      <strong id="resource-swap-value" class="resource-percentage">--</strong>
+                      <strong id="resource-swap-amount" class="resource-detail">--/--</strong>
+                    </div>
+                    <progress id="resource-swap-progress" max="100" value="0" aria-label="Swap 使用率" data-i18n-aria-label-zh="Swap 使用率" data-i18n-aria-label-en="Swap usage"></progress>
+                  </div>
+                </div>
                 <div class="session-metrics">
                   <div><span data-i18n-zh="延迟" data-i18n-en="RTT">延迟</span><strong id="metric-rtt">--</strong></div>
                   <div><span data-i18n-zh="时长" data-i18n-en="UPTIME">时长</span><strong id="metric-uptime">00:00</strong></div>
                   <div><span data-i18n-zh="主机密钥" data-i18n-en="HOST KEY">主机密钥</span><strong id="metric-host-key">--</strong></div>
                 </div>
-                <div class="resource-metrics" aria-label="系统资源" data-i18n-aria-label-zh="系统资源" data-i18n-aria-label-en="System resources">
-                  <div class="resource-metric resource-cpu">
-                    <span data-i18n-zh="CPU" data-i18n-en="CPU">CPU</span>
-                    <strong id="resource-cpu-value">--</strong>
-                    <progress id="resource-cpu-progress" max="100" value="0" aria-label="CPU 使用率" data-i18n-aria-label-zh="CPU 使用率" data-i18n-aria-label-en="CPU usage"></progress>
-                  </div>
-                  <div class="resource-metric resource-load">
-                    <span data-i18n-zh="负载" data-i18n-en="LOAD">负载</span>
-                    <strong id="resource-load-value">--</strong>
-                  </div>
-                  <div class="resource-metric resource-memory">
-                    <span data-i18n-zh="内存" data-i18n-en="MEM">内存</span>
-                    <strong id="resource-memory-value">--</strong>
-                    <progress id="resource-memory-progress" max="100" value="0" aria-label="内存使用率" data-i18n-aria-label-zh="内存使用率" data-i18n-aria-label-en="Memory usage"></progress>
-                  </div>
-                  <div class="resource-metric resource-swap">
-                    <span data-i18n-zh="Swap" data-i18n-en="SWAP">Swap</span>
-                    <strong id="resource-swap-value">--</strong>
-                    <progress id="resource-swap-progress" max="100" value="0" aria-label="Swap 使用率" data-i18n-aria-label-zh="Swap 使用率" data-i18n-aria-label-en="Swap usage"></progress>
-                  </div>
-                </div>
                 <div class="terminal-actions">
                   <button id="clear-terminal" class="toolbar-button" type="button" aria-label="清屏" data-i18n-aria-label-zh="清屏" data-i18n-aria-label-en="Clear">
                     <svg class="toolbar-button-icon" viewBox="0 0 24 24" aria-hidden="true">

frontend/src/process-manager.ts

@@ -7,10 +7,12 @@ export interface ProcessManagerElements {
   updated: HTMLElement;
   cpuValue: HTMLElement;
   cpuProgress: HTMLProgressElement;
-  loadValue: HTMLElement;
+  cpuLoad: HTMLElement;
   memoryValue: HTMLElement;
+  memoryAmount: HTMLElement;
   memoryProgress: HTMLProgressElement;
   swapValue: HTMLElement;
+  swapAmount: HTMLElement;
   swapProgress: HTMLProgressElement;
 }
 
@@ -108,6 +110,24 @@ function formatBytes(bytes: number | null): string {
   return `${value.toFixed(precision)}${units[unit]}`;
 }
 
+function usageColor(percent: number): string {
+  const value = Math.min(100, Math.max(0, percent));
+  const stops = [
+    { value: 0, hue: 150 },
+    { value: 50, hue: 125 },
+    { value: 65, hue: 55 },
+    { value: 80, hue: 30 },
+    { value: 100, hue: 0 },
+  ];
+  const upperIndex = stops.findIndex((stop) => value <= stop.value);
+  if (upperIndex <= 0) return `hsl(${stops[0].hue} 82% 58%)`;
+  const lower = stops[upperIndex - 1];
+  const upper = stops[upperIndex];
+  const position = (value - lower.value) / (upper.value - lower.value);
+  const hue = lower.hue + ((upper.hue - lower.hue) * position);
+  return `hsl(${hue.toFixed(1)} 82% 58%)`;
+}
+
 export class ProcessManager {
   private readonly elements: ProcessManagerElements;
   private readonly getLanguage: () => 'zh-CN' | 'en';
@@ -190,9 +210,9 @@ export class ProcessManager {
       this.elements.error.hidden = true;
       this.elements.updated.textContent = '--';
       this.resetMetric(this.elements.cpuValue, this.elements.cpuProgress);
-      this.elements.loadValue.textContent = '--';
-      this.resetMetric(this.elements.memoryValue, this.elements.memoryProgress);
-      this.resetMetric(this.elements.swapValue, this.elements.swapProgress);
+      this.elements.cpuLoad.textContent = '-- / -- / --';
+      this.resetUsage(this.elements.memoryValue, this.elements.memoryAmount, this.elements.memoryProgress);
+      this.resetUsage(this.elements.swapValue, this.elements.swapAmount, this.elements.swapProgress);
       this.setStatus('连接 SSH 后即可查看实时进程', 'Connect to SSH to view live processes');
       return;
     }
@@ -228,27 +248,43 @@ export class ProcessManager {
       `${snapshot.processes.length} processes · Updated ${updated}`,
     );
     this.setMetric(this.elements.cpuValue, this.elements.cpuProgress, snapshot.metrics.cpuPercent);
-    this.elements.loadValue.textContent = snapshot.metrics.loadAverage?.map((value) => value.toFixed(2)).join(' / ') ?? '--';
-    this.setUsage(this.elements.memoryValue, this.elements.memoryProgress, snapshot.metrics.memory);
-    this.setUsage(this.elements.swapValue, this.elements.swapProgress, snapshot.metrics.swap);
+    this.elements.cpuLoad.textContent = snapshot.metrics.loadAverage?.map((value) => value.toFixed(2)).join(' / ') ?? '-- / -- / --';
+    this.setUsage(this.elements.memoryValue, this.elements.memoryAmount, this.elements.memoryProgress, snapshot.metrics.memory);
+    this.setUsage(this.elements.swapValue, this.elements.swapAmount, this.elements.swapProgress, snapshot.metrics.swap);
   }
 
   private setMetric(valueElement: HTMLElement, progress: HTMLProgressElement, value: number | null): void {
     valueElement.textContent = formatPercent(value);
     progress.value = value === null ? 0 : Math.min(100, value);
+    if (value === null) {
+      valueElement.style.removeProperty('--usage-color');
+      progress.style.removeProperty('--usage-color');
+      return;
+    }
+    const color = usageColor(value);
+    valueElement.style.setProperty('--usage-color', color);
+    progress.style.setProperty('--usage-color', color);
   }
 
   private resetMetric(valueElement: HTMLElement, progress: HTMLProgressElement): void {
     valueElement.textContent = '--';
     progress.value = 0;
+    valueElement.style.removeProperty('--usage-color');
+    progress.style.removeProperty('--usage-color');
   }
 
-  private setUsage(valueElement: HTMLElement, progress: HTMLProgressElement, usage: ResourceUsage | null): void {
+  private resetUsage(valueElement: HTMLElement, amountElement: HTMLElement, progress: HTMLProgressElement): void {
+    this.resetMetric(valueElement, progress);
+    amountElement.textContent = '--/--';
+  }
+
+  private setUsage(valueElement: HTMLElement, amountElement: HTMLElement, progress: HTMLProgressElement, usage: ResourceUsage | null): void {
     if (!usage) {
-      this.resetMetric(valueElement, progress);
+      this.resetUsage(valueElement, amountElement, progress);
       return;
     }
-    valueElement.textContent = `${formatPercent(usage.percent)} ${formatBytes(usage.usedBytes)}/${formatBytes(usage.totalBytes)}`;
+    valueElement.textContent = formatPercent(usage.percent);
+    amountElement.textContent = `${formatBytes(usage.usedBytes)}/${formatBytes(usage.totalBytes)}`;
     progress.value = usage.percent;
   }
 
@@ -295,10 +331,12 @@ export function collectProcessManagerElements(): ProcessManagerElements {
     updated: getElement('process-updated'),
     cpuValue: getElement('resource-cpu-value'),
     cpuProgress: getElement('resource-cpu-progress'),
-    loadValue: getElement('resource-load-value'),
+    cpuLoad: getElement('resource-cpu-load'),
     memoryValue: getElement('resource-memory-value'),
+    memoryAmount: getElement('resource-memory-amount'),
     memoryProgress: getElement('resource-memory-progress'),
     swapValue: getElement('resource-swap-value'),
+    swapAmount: getElement('resource-swap-amount'),
     swapProgress: getElement('resource-swap-progress'),
   };
 }

frontend/src/style.css

@@ -967,57 +967,83 @@ button:disabled {
 .resource-metrics {
   display: flex;
   min-width: 0;
-  flex: 0 1 auto;
+  flex: 0 1 490px;
   align-items: center;
-  gap: 7px;
-  padding-left: 9px;
-  border-left: 1px solid #1c2932;
+  gap: 9px;
 }
 
 .resource-metric {
-  display: grid;
-  min-width: 70px;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 1px 5px;
-  color: #8799a5;
+  min-width: 0;
+  flex: 1 1 0;
+  color: #a8b8c1;
   font-family: var(--mono);
-  font-size: 8px;
+  font-size: 10px;
   white-space: nowrap;
 }
 
-.resource-metric > span {
-  color: #5e707d;
-  font-size: 7px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
+.resource-metric-line {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 6px;
 }
 
-.resource-metric > strong {
+.resource-metric-line > span {
+  flex: 0 0 auto;
+  color: #8fa2ad;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.resource-metric-line > strong {
+  flex: 0 0 auto;
   overflow: hidden;
-  color: #96a8b3;
-  font-size: 8px;
-  font-weight: 600;
+  color: #d4e0e5;
+  font-size: 10px;
+  font-weight: 750;
   text-overflow: ellipsis;
 }
 
+.resource-metric-line > .resource-percentage {
+  color: color-mix(in srgb, var(--usage-color, #d4e0e5) 88%, var(--text));
+  font-weight: 900;
+  transition: color 220ms ease;
+}
+
+.resource-metric-line > .resource-detail {
+  min-width: 0;
+  flex: 1 1 auto;
+  color: #9aadb7;
+  font-weight: 650;
+}
+
 .resource-metric progress {
   width: 100%;
-  height: 3px;
-  grid-column: 1 / -1;
+  height: 4px;
+  display: block;
+  margin-top: 2px;
   overflow: hidden;
   border: 0;
   border-radius: 99px;
-  accent-color: var(--accent);
+  accent-color: var(--usage-color, var(--accent));
 }
 
-.resource-load {
-  min-width: 86px;
+.resource-metric progress::-webkit-progress-bar {
+  border-radius: 99px;
+  background: #263642;
 }
 
-.resource-memory,
-.resource-swap {
-  min-width: 116px;
+.resource-metric progress::-webkit-progress-value {
+  border-radius: 99px;
+  background: var(--usage-color, var(--accent));
+  transition: background-color 220ms ease;
+}
+
+.resource-metric progress::-moz-progress-bar {
+  border-radius: 99px;
+  background: var(--usage-color, var(--accent));
+  transition: background-color 220ms ease;
 }
 
 .session-metrics span {
@@ -1930,16 +1956,11 @@ button:disabled {
   }
 
   .resource-metric {
-    min-width: 48px;
+    flex-basis: 0;
   }
 
-  .resource-load {
-    min-width: 78px;
-  }
-
-  .resource-memory,
-  .resource-swap {
-    min-width: 92px;
+  .resource-detail {
+    display: none;
   }
 
   .terminal-actions .button-label {
@@ -2002,7 +2023,6 @@ button:disabled {
 
   .resource-metrics {
     gap: 6px;
-    padding-left: 7px;
   }
 
   .terminal-card {
@@ -2078,7 +2098,7 @@ button:disabled {
   }
 }
 
-@media (max-width: 420px) {
+@media (max-width: 200px) {
   .terminal-pane {
     grid-template-rows: 70px minmax(0, 1fr);
   }
@@ -2095,21 +2115,18 @@ button:disabled {
     width: 100%;
     grid-column: 1 / -1;
     justify-content: space-between;
-    padding-left: 0;
-    border-left: 0;
     border-top: 1px solid #1c2932;
   }
 
   .resource-metric,
-  .resource-load,
   .resource-memory,
   .resource-swap {
     min-width: 0;
   }
 
-  .resource-metric > span,
-  .resource-metric > strong {
-    font-size: 7px;
+  .resource-metric-line > span,
+  .resource-metric-line > strong {
+    font-size: 8px;
   }
 }