diff --git a/frontend/src/components/server/server-detail/MiniSparkline.tsx b/frontend/src/components/server/server-detail/MiniSparkline.tsx
new file mode 100644
index 0000000..bca894e
--- /dev/null
+++ b/frontend/src/components/server/server-detail/MiniSparkline.tsx
@@ -0,0 +1,39 @@
+// 迷你实时曲线卡片 // Logan.Li
+import { Line, LineChart, ResponsiveContainer } from 'recharts';
+import type { SparkPoint } from './helpers';
+
+interface MiniSparklineProps {
+ title: string;
+ data: SparkPoint[];
+ color: string;
+ valueLabel: string;
+}
+
+export function MiniSparkline({ title, data, color, valueLabel }: MiniSparklineProps) {
+ return (
+
+
+ {title}
+ {valueLabel}
+
+
+ {data.length === 0 ? (
+
+ ) : (
+
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/frontend/src/components/server/server-detail/helpers.ts b/frontend/src/components/server/server-detail/helpers.ts
new file mode 100644
index 0000000..6afdcd2
--- /dev/null
+++ b/frontend/src/components/server/server-detail/helpers.ts
@@ -0,0 +1,111 @@
+// 资产主机详情抽屉 — 数据整形 // Logan.Li
+import type { JsonData } from '@/types/common';
+
+export interface SparkPoint {
+ i: number;
+ v: number;
+}
+
+export interface ProcessTopItem {
+ name: string;
+ cpu: number;
+ mem: number;
+}
+
+export function displayServerName(server: JsonData | null | undefined): string {
+ if (!server) return '';
+ return String(
+ server.alias || server.cloud_instance_name || server.hostname || server.ip || '',
+ );
+}
+
+export function parseMaybeJSON(raw: unknown): JsonData {
+ if (!raw) return {};
+ if (typeof raw === 'object') return raw as JsonData;
+ try {
+ return JSON.parse(String(raw)) as JsonData;
+ } catch {
+ return {};
+ }
+}
+
+export function asFiniteNumber(value: unknown, fallback = 0): number {
+ const n = Number(value);
+ return Number.isFinite(n) ? n : fallback;
+}
+
+/** 网络/磁盘吞吐按字节每秒换算，禁止把 bps 直接当 MB/s。 // Logan.Li */
+export function formatBps(bps: number): string {
+ const abs = Math.abs(bps);
+ if (abs >= 1024 * 1024 * 1024) return `${(bps / 1024 / 1024 / 1024).toFixed(1)} GB/s`;
+ if (abs >= 1024 * 1024) return `${(bps / 1024 / 1024).toFixed(1)} MB/s`;
+ if (abs >= 1024) return `${(bps / 1024).toFixed(1)} KB/s`;
+ return `${bps.toFixed(1)} B/s`;
+}
+
+export function formatUptime(seconds: unknown): string {
+ const sec = Math.max(0, Math.floor(asFiniteNumber(seconds)));
+ if (sec <= 0) return '';
+ const days = Math.floor(sec / 86400);
+ const hours = Math.floor((sec % 86400) / 3600);
+ if (days > 0) return `${days}d ${hours}h`;
+ const mins = Math.floor((sec % 3600) / 60);
+ if (hours > 0) return `${hours}h ${mins}m`;
+ return `${mins}m`;
+}
+
+export function formatMemGB(memoryMb: unknown): string {
+ const mb = asFiniteNumber(memoryMb);
+ if (mb <= 0) return '';
+ const gb = mb / 1024;
+ if (gb >= 1) {
+ const shown = gb >= 10 || Math.abs(gb - Math.round(gb)) < 0.05 ? String(Math.round(gb)) : gb.toFixed(1);
+ return `${shown} GB`;
+ }
+ return `${Math.round(mb)} MB`;
+}
+
+export function regionLabel(server: JsonData): string {
+ const region = server.region;
+ if (!region) return '';
+ if (typeof region === 'string') return region;
+ const obj = region as JsonData;
+ return String(obj.name || obj.Name || obj.code || '');
+}
+
+export function sparklineFromHistory(
+ history: JsonData[],
+ pick: (row: JsonData) => number,
+ maxPoints = 30,
+): SparkPoint[] {
+ const slice = history.slice(-maxPoints);
+ return slice.map((row, i) => ({ i, v: asFiniteNumber(pick(row)) }));
+}
+
+export function pickNetRxBps(row: JsonData): number {
+ const net = parseMaybeJSON(row.net_info);
+ return asFiniteNumber(net.net_rx_bps);
+}
+
+export function pickProcessTop(raw: unknown, limit = 5): ProcessTopItem[] {
+ let list: JsonData[] = [];
+ if (Array.isArray(raw)) {
+ list = raw as JsonData[];
+ } else if (typeof raw === 'string') {
+ const parsed = parseMaybeJSON(raw);
+ list = Array.isArray(parsed) ? (parsed as unknown as JsonData[]) : [];
+ }
+ return list
+ .map((p) => ({
+ name: String(p.cmdline || p.name || '?'),
+ cpu: asFiniteNumber(p.cpu_pct ?? p.cpu),
+ mem: asFiniteNumber(p.mem_pct ?? p.mem),
+ }))
+ .sort((a, b) => b.cpu - a.cpu)
+ .slice(0, limit);
+}
+
+export function dash(value: unknown): string {
+ const s = String(value ?? '').trim();
+ return s || '—';
+}
diff --git a/frontend/src/components/system/LiveMonitorDialog.tsx b/frontend/src/components/system/LiveMonitorDialog.tsx
index e2b9eeb..5bdadac 100644
--- a/frontend/src/components/system/LiveMonitorDialog.tsx
+++ b/frontend/src/components/system/LiveMonitorDialog.tsx
@@ -10,8 +10,14 @@ import {
DialogTitle,
} from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';
-import { Loader2, Maximize2, Minimize2, Monitor, X } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils';
+import {
+ TerminalWindowChrome,
+ TERMINAL_BG,
+ TERMINAL_BORDER,
+ TERMINAL_XTERM_THEME,
+} from '@/components/common/TerminalWindowChrome';
import { attachTerminalResize, mountXterm } from '@/lib/xterm-utils';
import { useUserStore } from '@/store';
import { TerminalLoadingOverlay } from '@/components/common/TerminalLoadingOverlay';
@@ -64,12 +70,7 @@ export function LiveMonitorDialog({ open, onOpenChange, sessionId, sessionInfo }
disableStdin: true,
allowProposedApi: true,
scrollback: 5000,
- theme: {
- background: '#0a0e14',
- foreground: '#d6d6d6',
- cursor: '#d6d6d6',
- selectionBackground: 'rgba(255,255,255,0.2)',
- },
+ theme: TERMINAL_XTERM_THEME,
});
const fitAddon = new FitAddon();
@@ -183,72 +184,68 @@ export function LiveMonitorDialog({ open, onOpenChange, sessionId, sessionInfo }
showCloseButton={false}
showOverlay={false}
className={cn(
- 'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] p-0 gap-0',
+ 'overflow-hidden p-0 gap-0 text-[#e2e8f0]',
'!duration-0 !transition-none',
fullscreen
? '!max-w-none !w-screen !h-screen !rounded-none !translate-x-0 !translate-y-0 !left-0 !top-0'
: '',
)}
- style={
- fullscreen
+ style={{
+ background: TERMINAL_BG,
+ borderColor: TERMINAL_BORDER,
+ ...(fullscreen
? { maxWidth: '100vw', width: '100vw', height: '100vh' }
- : { maxWidth: '960px', width: '92vw' }
- }
+ : { maxWidth: '960px', width: '92vw' }),
+ }}
>
终端实时监控
审计在线 WebSSH 会话
-
- {/* 工具栏 — 与 TerminalDialog 一致 // Logan.Li */}
-
-
-
- 终端实时监控
- {meta && (
-
- {meta.username} · {meta.server_name} ({meta.server_ip}) · {formatTime(meta.start_time)}
-
- )}
- {connected && (
-
- ● 在线
-
- )}
- {!connected && !connectError && (
-
-
- 连接中
-
- )}
- {connectError && (
-
- 连接失败
-
- )}
-
-
-
-
-
-
+
setFullscreen(!fullscreen)}
+ onClose={() => onOpenChange(false)}
+ closeLabel="关闭"
+ fullscreenLabel="全屏"
+ restoreLabel="退出全屏"
+ trailing={
+ <>
+ {meta && (
+
+ {meta.server_ip} · {formatTime(meta.start_time)}
+
+ )}
+ {connected && (
+
+ 在线
+
+ )}
+ {!connected && !connectError && (
+
+
+ 连接中
+
+ )}
+ {connectError && (
+
+ 连接失败
+
+ )}
+
+ }
+ />
{connectError && (
- {connectError}
+
+ {connectError}
+
)}
-
+
diff --git a/frontend/src/locales/en-US.json b/frontend/src/locales/en-US.json
index edddb6e..18344e1 100644
--- a/frontend/src/locales/en-US.json
+++ b/frontend/src/locales/en-US.json
@@ -1236,6 +1236,24 @@
"clipboardDisabled": "Clipboard is disabled by session policy",
"fileUploadDisabled": "File upload is disabled by session policy",
"fileDownloadDisabled": "File download is disabled by session policy"
+ },
+ "detailSheet": {
+ "subtitle": "Host detail · specs and live metrics",
+ "kernel": "Kernel",
+ "region": "Region",
+ "uptime": "Uptime",
+ "cloudInstance": "Cloud instance",
+ "realtime": "Live metrics (last 30 min)",
+ "memory": "Memory",
+ "disk": "Disk",
+ "netIn": "Network in",
+ "processTop": "Process TOP5",
+ "process": "Process",
+ "noAgent": "No Agent reports yet. Charts and process TOP are unavailable.",
+ "noProcess": "No process data",
+ "monitor": "Monitor",
+ "fullscreen": "Fullscreen",
+ "exitFullscreen": "Exit fullscreen"
}
},
"alert": {
@@ -7679,6 +7697,8 @@
"safetyBlockDanger": "Block danger only",
"enableReasoning": "Enable reasoning mode",
"mimoPlatform": "MiMo Platform",
+ "mimoTokenPlan": "Xiaomi MiMo Token Plan",
+ "mimoPlanHint": "Requires a MiMo Token Plan subscription; use the plan-specific key with the monthly endpoint",
"getPaygApiKey": "Get pay-as-you-go API Key",
"safetyBalanced": "Balanced",
"shiftEnterHint": "Shift+Enter for newline · Enter to send",
diff --git a/frontend/src/locales/zh-CN.json b/frontend/src/locales/zh-CN.json
index 55f1247..280cb24 100644
--- a/frontend/src/locales/zh-CN.json
+++ b/frontend/src/locales/zh-CN.json
@@ -1236,6 +1236,24 @@
"clipboardDisabled": "会话策略已禁用剪贴板",
"fileUploadDisabled": "会话策略已禁用文件上传",
"fileDownloadDisabled": "会话策略已禁用文件下载"
+ },
+ "detailSheet": {
+ "subtitle": "主机详情 · 资产规格与实时监控",
+ "kernel": "内核",
+ "region": "区域",
+ "uptime": "运行时长",
+ "cloudInstance": "云实例",
+ "realtime": "实时资源（最近 30 分钟）",
+ "memory": "内存",
+ "disk": "磁盘",
+ "netIn": "网络下行",
+ "processTop": "进程 TOP5",
+ "process": "进程",
+ "noAgent": "暂无 Agent 上报，曲线与进程 TOP 不可用",
+ "noProcess": "暂无进程数据",
+ "monitor": "监控",
+ "fullscreen": "全屏",
+ "exitFullscreen": "退出全屏"
}
},
"alert": {
@@ -7679,6 +7697,8 @@
"safetyBlockDanger": "仅拦截危险",
"enableReasoning": "启用推理模式",
"mimoPlatform": "MiMo 开放平台",
+ "mimoTokenPlan": "小米 MiMo Token Plan（包月）",
+ "mimoPlanHint": "需在 MiMo 开放平台订阅 Token Plan 套餐，使用套餐专用密钥接入包月端点",
"getPaygApiKey": "获取按量 API Key",
"safetyBalanced": "均衡",
"shiftEnterHint": "Shift+回车换行 · 回车发送",