feat: enrich features and configure for huggingface

Dockerfile

@@ -0,0 +1,33 @@
+# 构建阶段
+FROM golang:1.21-alpine AS builder
+
+WORKDIR /app
+
+# 安装必要的构建依赖
+RUN apk add --no-cache gcc musl-dev
+
+# 复制依赖文件并下载
+COPY go.mod go.sum ./
+RUN go mod download
+
+# 复制源代码并构建
+COPY . .
+RUN go build -o main .
+
+# 运行阶段
+FROM alpine:latest
+
+WORKDIR /app
+
+# 复制构建产物和静态资源
+COPY --from=builder /app/main .
+COPY --from=builder /app/static ./static
+
+# 暴露端口 (Hugging Face Spaces 默认 7860)
+EXPOSE 7860
+
+# 设置环境变量
+ENV PORT=7860
+
+# 启动应用
+CMD ["./main"]

README.md

@@ -0,0 +1,45 @@
+---
+title: Go 系统实时监控仪表板
+emoji: 📊
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+pinned: false
+short_description: 基于 Go 语言的实时系统性能监控仪表板，支持主机信息、Top 10 进程监控及移动端适配。
+---
+
+# Go 系统实时监控仪表板 (Go-Sys-Dash)
+
+本项目是一个基于 Go 语言开发的轻量级系统性能监控工具。它通过 WebSocket 实时推送服务器的 CPU、内存、磁盘及进程信息，并提供一个现代化的、响应式的 Web 界面。
+
+## 核心特性
+
+- **实时数据推送**：使用 WebSocket 技术，每 2 秒自动刷新系统指标。
+- **主机详情展示**：新增主机名、操作系统、平台及运行时间显示。
+- **直观的可视化**：采用 Chart.js 绘制环形图，清晰展示资源占用情况。
+- **增强型进程管理**：实时列出当前系统中 CPU 占用最高的前 10 个进程。
+- **移动端适配**：响应式布局设计，支持在手机和平板浏览器上流畅查看。
+- **汉化支持**：界面全中文显示，代码包含详尽的中文注释。
+- **一键部署**：支持 Docker 容器化部署，适配主流云平台和 Hugging Face Spaces。
+
+## 技术栈
+
+- **后端**: Go 1.21+, `gopsutil` (系统信息采集), `gorilla/websocket` (通信)
+- **前端**: HTML5, CSS3, JavaScript (ES6+), Chart.js
+- **部署**: Docker, Alpine Linux (轻量化运行环境)
+
+## 本地运行
+
+1. 确保已安装 Go 环境。
+2. 克隆项目并进入目录：
+   ```bash
+   go mod tidy
+   go run main.go
+   ```
+3. 访问 `http://localhost:7860`。
+
+## Hugging Face 部署说明
+
+本项目已针对 Hugging Face Spaces 进行优化，通过 `Dockerfile` 进行构建和部署。系统会自动识别根目录下的 `Dockerfile` 并完成环境搭建。
+默认端口已设为 `7860`，适配 Hugging Face 运行环境。

go.mod

@@ -0,0 +1,20 @@
+module go-sys-dash
+
+go 1.21
+
+require (
+	github.com/gorilla/websocket v1.5.1
+	github.com/shirou/gopsutil/v3 v3.23.12
+)
+
+require (
+	github.com/go-ole/go-ole v1.2.6 // indirect
+	github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 // indirect
+	github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c // indirect
+	github.com/shoenig/go-m1cpu v0.1.6 // indirect
+	github.com/tklauser/go-sysconf v0.3.12 // indirect
+	github.com/tklauser/numcpus v0.6.1 // indirect
+	github.com/yusufpapurcu/wmi v1.2.3 // indirect
+	golang.org/x/net v0.17.0 // indirect
+	golang.org/x/sys v0.15.0 // indirect
+)

go.sum

@@ -0,0 +1,49 @@
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/go-ole/go-ole v1.2.6 h1:/Fpf6oFPoeFik9ty7siob0G6Ke8QvQEuVcuChpwXzpY=
+github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
+github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/go-cmp v0.5.9/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/QY=
+github.com/gorilla/websocket v1.5.1/go.mod h1:x3kM2JMyaluk02fnUJpQuwD2dCS5NDG2ZHL0uE0tcaY=
+github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 h1:6E+4a0GO5zZEnZ81pIr0yLvtUWk2if982qA3F3QD6H4=
+github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0/go.mod h1:zJYVVT2jmtg6P3p1VtQj7WsuWi/y4VnjVBn7F8KPB3I=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c h1:ncq/mPwQF4JjgDlrVEn3C11VoGHZN7m8qihwgMEtzYw=
+github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
+github.com/shirou/gopsutil/v3 v3.23.12 h1:z90NtUkp3bMtmICZKpC4+WaknU1eXtp5vtbQ11DgpE4=
+github.com/shirou/gopsutil/v3 v3.23.12/go.mod h1:1FrWgea594Jp7qmjHUUPlJDTPgcsb9mGnXDxavtikzM=
+github.com/shoenig/go-m1cpu v0.1.6 h1:nxdKQNcEB6vzgA2E2bvzKIYRuNj7XNJ4S/aRSwKzFtM=
+github.com/shoenig/go-m1cpu v0.1.6/go.mod h1:1JJMcUBvfNwpq05QDQVAnx3gUHr9IYF7GNg9SUEw2VQ=
+github.com/shoenig/test v0.6.4 h1:kVTaSd7WLz5WZ2IaoM0RSzRsUD+m8wRR+5qvntpn4LU=
+github.com/shoenig/test v0.6.4/go.mod h1:byHiCGXqrVaflBLAMq/srcZIHynQPQgeyvkvXnjqq0k=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
+github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/tklauser/go-sysconf v0.3.12 h1:0QaGUFOdQaIVdPgfITYzaTegZvdCjmYO52cSFAEVmqU=
+github.com/tklauser/go-sysconf v0.3.12/go.mod h1:Ho14jnntGE1fpdOqQEEaiKRpvIavV0hSfmBq8nJbHYI=
+github.com/tklauser/numcpus v0.6.1 h1:ng9scYS7az0Bk4OZLvrNXNSAO2Pxr1XXRAPyjhIx+Fk=
+github.com/tklauser/numcpus v0.6.1/go.mod h1:1XfjsgE2zo8GVw7POkMbHENHzVg3GzmoZ9fESEdAacY=
+github.com/yusufpapurcu/wmi v1.2.3 h1:E1ctvB7uKFMOJw3fdOW32DwGE9I7t++CRUEMKvFoFiw=
+github.com/yusufpapurcu/wmi v1.2.3/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
+golang.org/x/net v0.17.0 h1:pVaXccu2ozPjCXewfr1S7xza/zcXTity9cCdXQYSjIM=
+golang.org/x/net v0.17.0/go.mod h1:NxSsAGuq816PNPmqtQdLE42eU2Fs7NoRIZrHJAlaCOE=
+golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20201204225414-ed752295db88/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
+golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

main.go

@@ -0,0 +1,165 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+	"os"
+	"sort"
+	"time"
+
+	"github.com/gorilla/websocket"
+	"github.com/shirou/gopsutil/v3/cpu"
+	"github.com/shirou/gopsutil/v3/disk"
+	"github.com/shirou/gopsutil/v3/host"
+	"github.com/shirou/gopsutil/v3/mem"
+	"github.com/shirou/gopsutil/v3/process"
+)
+
+// 系统状态结构体
+type SystemStatus struct {
+	CPUUsage    float64     `json:"cpuUsage"`
+	MemoryUsage float64     `json:"memoryUsage"`
+	DiskUsage   float64     `json:"diskUsage"`
+	Processes   []Process   `json:"processes"`
+	Timestamp   string      `json:"timestamp"`
+	HostInfo    HostSummary `json:"hostInfo"`
+}
+
+// 进程信息结构体
+type Process struct {
+	PID    int32   `json:"pid"`
+	Name   string  `json:"name"`
+	CPU    float64 `json:"cpu"`
+	Memory float32 `json:"memory"`
+}
+
+// 主机摘要信息
+type HostSummary struct {
+	Hostname string `json:"hostname"`
+	OS       string `json:"os"`
+	Platform string `json:"platform"`
+	Uptime   uint64 `json:"uptime"`
+}
+
+var upgrader = websocket.Upgrader{
+	CheckOrigin: func(r *http.Request) bool {
+		return true // 允许所有来源，方便演示
+	},
+}
+
+// 获取当前系统状态
+func getSystemStatus() SystemStatus {
+	// CPU 使用率
+	cpuPercent, _ := cpu.Percent(time.Second, false)
+	var cpuVal float64
+	if len(cpuPercent) > 0 {
+		cpuVal = cpuPercent[0]
+	}
+
+	// 内存使用率
+	vMem, _ := mem.VirtualMemory()
+	memVal := vMem.UsedPercent
+
+	// 磁盘使用率 (根目录)
+	dUsage, _ := disk.Usage("/")
+	diskVal := dUsage.UsedPercent
+
+	// 获取主机信息
+	hInfo, _ := host.Info()
+	hostSummary := HostSummary{
+		Hostname: hInfo.Hostname,
+		OS:       hInfo.OS,
+		Platform: hInfo.Platform,
+		Uptime:   hInfo.Uptime,
+	}
+
+	// 获取所有进程并按 CPU 排序
+	allProcs, _ := process.Processes()
+	var procList []Process
+	for _, p := range allProcs {
+		name, _ := p.Name()
+		cpuP, _ := p.CPUPercent()
+		memP, _ := p.MemoryPercent()
+		if cpuP > 0 || memP > 0 {
+			procList = append(procList, Process{
+				PID:    p.Pid,
+				Name:   name,
+				CPU:    cpuP,
+				Memory: memP,
+			})
+		}
+	}
+
+	// 按 CPU 使用率降序排序
+	sort.Slice(procList, func(i, j int) bool {
+		return procList[i].CPU > procList[j].CPU
+	})
+
+	return SystemStatus{
+		CPUUsage:    cpuVal,
+		MemoryUsage: memVal,
+		DiskUsage:   diskVal,
+		Processes:   procList[:min(10, len(procList))], // 取前10个
+		Timestamp:   time.Now().Format("15:04:05"),
+		HostInfo:    hostSummary,
+	}
+}
+
+func min(a, b int) int {
+	if a < b {
+		return a
+	}
+	return b
+}
+
+// 处理 WebSocket 连接
+func handleWebSocket(w http.ResponseWriter, r *http.Request) {
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Println("升级 WebSocket 失败:", err)
+		return
+	}
+	defer conn.Close()
+
+	log.Println("新的客户端已连接")
+
+	// 定期发送系统数据
+	for {
+		status := getSystemStatus()
+		data, err := json.Marshal(status)
+		if err != nil {
+			log.Println("序列化数据失败:", err)
+			break
+		}
+
+		if err := conn.WriteMessage(websocket.TextMessage, data); err != nil {
+			log.Println("发送消息失败:", err)
+			break
+		}
+
+		time.Sleep(2 * time.Second) // 每2秒更新一次
+	}
+}
+
+func main() {
+	// 静态文件服务
+	fs := http.FileServer(http.Dir("./static"))
+	http.Handle("/", fs)
+
+	// WebSocket 路由
+	http.HandleFunc("/ws", handleWebSocket)
+
+	port := os.Getenv("PORT")
+	if port == "" {
+		port = "7860" // 默认端口 7860 (Hugging Face Spaces)
+	}
+
+	fmt.Printf("服务器启动在 http://0.0.0.0:%s\n", port)
+	fmt.Println("正在监控系统性能...")
+
+	if err := http.ListenAndServe(":"+port, nil); err != nil {
+		log.Fatal("服务器启动失败:", err)
+	}
+}

static/app.js

@@ -0,0 +1,101 @@
+// 初始化图表配置
+function createChart(id, label, color) {
+    const ctx = document.getElementById(id).getContext('2d');
+    return new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: [label, '可用'],
+            datasets: [{
+                data: [0, 100],
+                backgroundColor: [color, '#eee'],
+                borderWidth: 0
+            }]
+        },
+        options: {
+            cutout: '70%',
+            responsive: true,
+            plugins: {
+                legend: { display: false }
+            }
+        }
+    });
+}
+
+const cpuChart = createChart('cpuChart', 'CPU', '#3498db');
+const memChart = createChart('memChart', '内存', '#2ecc71');
+const diskChart = createChart('diskChart', '磁盘', '#e67e22');
+
+function formatUptime(seconds) {
+    const days = Math.floor(seconds / 86400);
+    const hours = Math.floor((seconds % 86400) / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    let res = "";
+    if (days > 0) res += days + "天 ";
+    if (hours > 0) res += hours + "时 ";
+    res += minutes + "分";
+    return res;
+}
+
+// 连接 WebSocket
+function connect() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}/ws`);
+
+    ws.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        
+        // 更新文本显示
+        document.getElementById('cpu-val').innerText = `${data.cpuUsage.toFixed(1)}%`;
+        document.getElementById('mem-val').innerText = `${data.memoryUsage.toFixed(1)}%`;
+        document.getElementById('disk-val').innerText = `${data.diskUsage.toFixed(1)}%`;
+        document.getElementById('time-display').innerText = `最后更新: ${data.timestamp}`;
+
+        // 更新主机信息
+        if (data.hostInfo) {
+            document.getElementById('hostname').innerText = data.hostInfo.hostname;
+            document.getElementById('os-info').innerText = data.hostInfo.os;
+            document.getElementById('platform').innerText = data.hostInfo.platform;
+            document.getElementById('uptime').innerText = formatUptime(data.hostInfo.uptime);
+        }
+
+        // 更新图表
+        cpuChart.data.datasets[0].data = [data.cpuUsage, 100 - data.cpuUsage];
+        cpuChart.update();
+
+        memChart.data.datasets[0].data = [data.memoryUsage, 100 - data.memoryUsage];
+        memChart.update();
+
+        diskChart.data.datasets[0].data = [data.diskUsage, 100 - data.diskUsage];
+        diskChart.update();
+
+        // 更新进程列表
+        const processList = document.getElementById('process-list');
+        processList.innerHTML = '';
+        data.processes.forEach(p => {
+            const row = `<tr>
+                <td>${p.pid}</td>
+                <td>${p.name}</td>
+                <td>${p.cpu.toFixed(1)}</td>
+                <td>${p.memory.toFixed(1)}</td>
+            </tr>`;
+            processList.innerHTML += row;
+        });
+    };
+
+    ws.onopen = () => {
+        console.log('WebSocket 连接已建立');
+        document.querySelector('.status-dot').style.backgroundColor = '#2ecc71';
+    };
+
+    ws.onclose = () => {
+        console.log('WebSocket 连接已关闭，尝试重连...');
+        document.querySelector('.status-dot').style.backgroundColor = '#e74c3c';
+        setTimeout(connect, 3000); // 3秒后重连
+    };
+
+    ws.onerror = (err) => {
+        console.error('WebSocket 错误:', err);
+    };
+}
+
+connect();

static/index.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Go 系统监控仪表板</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        :root {
+            --primary-color: #3498db;
+            --bg-color: #f4f7f6;
+            --card-bg: #ffffff;
+            --text-color: #2c3e50;
+        }
+
+        body {
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            margin: 0;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .dashboard-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+
+        .info-bar {
+            background-color: var(--card-bg);
+            border-radius: 12px;
+            padding: 15px 20px;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-around;
+            flex-wrap: wrap;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            font-size: 0.9em;
+        }
+
+        .info-item {
+            margin: 5px 15px;
+        }
+
+        .info-item strong {
+            color: var(--primary-color);
+        }
+
+        .card {
+            background-color: var(--card-bg);
+            border-radius: 12px;
+            padding: 20px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            text-align: center;
+        }
+
+        .card h3 {
+            margin-top: 0;
+            color: var(--primary-color);
+        }
+
+        .process-table {
+            width: 100%;
+            border-collapse: collapse;
+            background-color: var(--card-bg);
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+
+        .process-table th, .process-table td {
+            padding: 12px 15px;
+            text-align: left;
+            border-bottom: 1px solid #eee;
+        }
+
+        .process-table th {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .status-dot {
+            height: 10px;
+            width: 10px;
+            background-color: #2ecc71;
+            border-radius: 50%;
+            display: inline-block;
+            margin-right: 5px;
+        }
+
+        @media (max-width: 600px) {
+            body { padding: 10px; }
+            .dashboard-grid { grid-template-columns: 1fr; }
+            .process-table { font-size: 14px; }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1><span class="status-dot"></span>系统实时监控</h1>
+            <p id="time-display">正在获取时间...</p>
+        </header>
+
+        <div class="info-bar" id="host-info">
+            <div class="info-item"><strong>主机名:</strong> <span id="hostname">-</span></div>
+            <div class="info-item"><strong>系统:</strong> <span id="os-info">-</span></div>
+            <div class="info-item"><strong>平台:</strong> <span id="platform">-</span></div>
+            <div class="info-item"><strong>运行时间:</strong> <span id="uptime">-</span></div>
+        </div>
+
+        <div class="dashboard-grid">
+            <div class="card">
+                <h3>CPU 使用率</h3>
+                <canvas id="cpuChart"></canvas>
+                <p id="cpu-val">0%</p>
+            </div>
+            <div class="card">
+                <h3>内存 使用率</h3>
+                <canvas id="memChart"></canvas>
+                <p id="mem-val">0%</p>
+            </div>
+            <div class="card">
+                <h3>磁盘 使用率</h3>
+                <canvas id="diskChart"></canvas>
+                <p id="disk-val">0%</p>
+            </div>
+        </div>
+
+        <div class="card">
+            <h3>活跃进程 (Top 10)</h3>
+            <table class="process-table">
+                <thead>
+                    <tr>
+                        <th>PID</th>
+                        <th>名称</th>
+                        <th>CPU %</th>
+                        <th>内存 %</th>
+                    </tr>
+                </thead>
+                <tbody id="process-list">
+                    <!-- 动态加载 -->
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>