refactor: simplify server stats widget system

Replaced complex drag-and-drop grid layout with simple checkbox-based
configuration and static responsive grid display.

- Removed react-grid-layout dependency and 6 related packages
- Simplified StatsConfig from complex Widget objects to simple array
- Added Statistics tab in HostManagerEditor for checkbox selection
- Refactored Server.tsx to use CSS Grid instead of ResponsiveGridLayout
- Simplified widget components by removing edit mode and size selection
- Deleted unused AddWidgetDialog and registry files
- Fixed statsConfig serialization in backend routes

Net result: -787 lines of code, cleaner architecture.
This commit is contained in:
ZacharyZcR
2025-10-09 12:51:13 +08:00
parent 5446875113
commit d87cabb708
14 changed files with 426 additions and 1230 deletions

View File

@@ -1,53 +1,9 @@
export type WidgetType =
| "cpu" // CPU 使用率
| "memory" // 内存使用率
| "disk"; // 磁盘使用率
// 预留未来功能
// | 'network' // 网络统计
// | 'processes' // 进程数
// | 'uptime'; // 运行时间
export type WidgetSize = "small" | "medium" | "large";
export interface Widget {
id: string; // 唯一 ID"cpu-1", "memory-2"
type: WidgetType; // 卡片类型
size: WidgetSize; // 尺寸small/medium/large
x: number; // 网格X坐标 (0-11)
y: number; // 网格Y坐标
w: number; // 宽度(网格单位 1-12
h: number; // 高度(网格单位)
}
export type WidgetType = "cpu" | "memory" | "disk";
export interface StatsConfig {
widgets: Widget[];
enabledWidgets: WidgetType[];
}
export const DEFAULT_STATS_CONFIG: StatsConfig = {
widgets: [
{ id: "cpu-1", type: "cpu", size: "medium", x: 0, y: 0, w: 4, h: 2 },
{ id: "memory-1", type: "memory", size: "medium", x: 4, y: 0, w: 4, h: 2 },
{ id: "disk-1", type: "disk", size: "medium", x: 8, y: 0, w: 4, h: 2 },
],
enabledWidgets: ["cpu", "memory", "disk"],
};
export const WIDGET_TYPE_CONFIG = {
cpu: {
label: "CPU Usage",
defaultSize: { w: 4, h: 2 },
minSize: { w: 3, h: 2 },
maxSize: { w: 12, h: 4 },
},
memory: {
label: "Memory Usage",
defaultSize: { w: 4, h: 2 },
minSize: { w: 3, h: 2 },
maxSize: { w: 12, h: 4 },
},
disk: {
label: "Disk Usage",
defaultSize: { w: 4, h: 2 },
minSize: { w: 3, h: 2 },
maxSize: { w: 12, h: 4 },
},
} as const;