refactor(quality): Q27 前端巨型组件拆分 — HostMonitor 547L→224L (-59%), 提取 host-monitor/tabs/ 8 个文件 (BasicTab + DiskTab + NetworkTab + PortMonitorTab + ProcessTable + FDUsageCard + ContextSwitchCard + ProcessTab), TABS 常量数组提取为模块级, PCT_REF_LINES 常量提升到 types.ts, 端口/进程数组类型 JsonData→JsonData[] 类型安全升级, 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓ (17.64s), go build=0, 17/17 测试通过

frontend/src/pages/monitor/host-monitor/tabs/BasicTab.tsx

@@ -0,0 +1,35 @@
+// 主机监控 — 基础监控 Tab (CPU/IO等待/内存/可用内存/Swap/负载)
+import { Cpu, Clock, Server, HardDrive, Activity } from 'lucide-react';
+import type { AggType, BucketPoint, HostRecord, RefLine } from '../types';
+import { MetricChartCard } from '../MetricChartCard';
+import i18n from '@/i18n';
+
+export interface BasicTabProps {
+  metrics: {
+    cpu: BucketPoint[]; iowait: BucketPoint[]; mem: BucketPoint[];
+    memAvail: BucketPoint[]; swap: BucketPoint[]; load1: BucketPoint[];
+  };
+  latest: HostRecord;
+  currentVal: (key: string, fallback?: string) => string;
+  aggType: AggType;
+  pctRefLines: RefLine[];
+}
+
+export function BasicTab({ metrics, latest, currentVal, aggType, pctRefLines }: BasicTabProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.s4e6cbf10')} value={currentVal('cpu')} icon={<Cpu />} iconTone="blue"
+        data={metrics.cpu} color="#3b82f6" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.s79f80fbf')} value={latest?.cpu_iowait != null ? `${(latest.cpu_iowait as number).toFixed(1)}%` : '--'} icon={<Clock />} iconTone="orange"
+        data={metrics.iowait} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.s78262b59')} value={currentVal('mem')} icon={<Server />} iconTone="green"
+        data={metrics.mem} color="#10b981" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.sa23fcda0')} value={latest?.mem_available != null ? `${(latest.mem_available as number).toFixed(1)}GB` : '--'} icon={<Server />} iconTone="green"
+        data={metrics.memAvail} color="#34d399" unit="GB" domain={[0, 'auto']} aggType={aggType} />
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.s05589bfd')} value={currentVal('swap')} icon={<HardDrive />} iconTone="red"
+        data={metrics.swap} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} />
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.sae62efb2')} value={currentVal('load1')} icon={<Activity />} iconTone="purple"
+        data={metrics.load1} color="#8b5cf6" unit="" domain={[0, 'auto']} aggType={aggType} />
+    </div>
+  );
+}