feat: 增加 GPU 监控 (#4468)

2024-11-23 18:49:21 +08:00 · 2024-04-11 14:16:10 +08:00 · 2024-04-11 14:16:10 +08:00 · 1687b99526
commit 1687b99526
parent 0bf6db1cf8
21 changed files with 335 additions and 25 deletions
--- a/backend/app/dto/dashboard.go
+++ b/backend/app/dto/dashboard.go
@ -69,6 +69,8 @@ type DashboardCurrent struct {
 	NetBytesSent uint64 `json:"netBytesSent"`
 	NetBytesRecv uint64 `json:"netBytesRecv"`

+	GPUData []GPUInfo `json:"gpuData"`
+
 	ShotTime time.Time `json:"shotTime"`
 }

@ -86,3 +88,18 @@ type DiskInfo struct {
 	InodesFree        uint64  `json:"inodesFree"`
 	InodesUsedPercent float64 `json:"inodesUsedPercent"`
 }
+
+type GPUInfo struct {
+	Index            uint   `json:"index"`
+	ProductName      string `json:"productName"`
+	GPUUtil          string `json:"gpuUtil"`
+	Temperature      string `json:"temperature"`
+	PerformanceState string `json:"performanceState"`
+	PowerUsage       string `json:"powerUsage"`
+	PowerDraw        string `json:"powerDraw"`
+	MaxPowerLimit    string `json:"maxPowerLimit"`
+	MemoryUsage      string `json:"memoryUsage"`
+	MemUsed          string `json:"memUsed"`
+	MemTotal         string `json:"memTotal"`
+	FanSpeed         string `json:"fanSpeed"`
+}
--- a/backend/app/service/dashboard.go
+++ b/backend/app/service/dashboard.go
@ -11,6 +11,8 @@ import (
 	"github.com/1Panel-dev/1Panel/backend/app/dto"
 	"github.com/1Panel-dev/1Panel/backend/global"
 	"github.com/1Panel-dev/1Panel/backend/utils/cmd"
+	"github.com/1Panel-dev/1Panel/backend/utils/copier"
+	"github.com/1Panel-dev/1Panel/backend/utils/xpack"
 	"github.com/shirou/gopsutil/v3/cpu"
 	"github.com/shirou/gopsutil/v3/disk"
 	"github.com/shirou/gopsutil/v3/host"
@ -154,6 +156,7 @@ func (u *DashboardService) LoadCurrentInfo(ioOption string, netOption string) *d
 	currentInfo.SwapMemoryUsedPercent = swapInfo.UsedPercent

 	currentInfo.DiskData = loadDiskInfo()
+	currentInfo.GPUData = loadGPUInfo()

 	if ioOption == "all" {
 		diskInfo, _ := disk.IOCounters()
@ -289,3 +292,21 @@ func loadDiskInfo() []dto.DiskInfo {
 	})
 	return datas
 }
+
+func loadGPUInfo() []dto.GPUInfo {
+	list := xpack.LoadGpuInfo()
+	if len(list) == 0 {
+		return nil
+	}
+	var data []dto.GPUInfo
+	for _, gpu := range list {
+		var dataItem dto.GPUInfo
+		if err := copier.Copy(&dataItem, &gpu); err != nil {
+			continue
+		}
+		dataItem.PowerUsage = dataItem.PowerDraw + " / " + dataItem.MaxPowerLimit
+		dataItem.MemoryUsage = dataItem.MemUsed + " / " + dataItem.MemTotal
+		data = append(data, dataItem)
+	}
+	return data
+}
--- a/backend/init/migration/migrate.go
+++ b/backend/init/migration/migrate.go
@ -79,6 +79,7 @@ func Init() {
 		migrations.AddCronjobCommand,
 		migrations.NewMonitorDB,
 		migrations.AddNoAuthSetting,
+		migrations.UpdateXpackHideMenu,
 	})
 	if err := m.Migrate(); err != nil {
 		global.LOG.Error(err)
--- a/backend/init/migration/migrations/v_1_10.go
+++ b/backend/init/migration/migrations/v_1_10.go
@ -118,3 +118,13 @@ var AddNoAuthSetting = &gormigrate.Migration{
 		return nil
 	},
 }
+
+var UpdateXpackHideMenu = &gormigrate.Migration{
+	ID: "20240411-update-xpack-hide-menu",
+	Migrate: func(tx *gorm.DB) error {
+		if err := tx.Model(&model.Setting{}).Where("key", "XpackHideMenu").Updates(map[string]interface{}{"value": "{\"id\":\"1\",\"label\":\"/xpack\",\"isCheck\":true,\"title\":\"xpack.menu\",\"children\":[{\"id\":\"2\",\"title\":\"xpack.waf.name\",\"path\":\"/xpack/waf/dashboard\",\"label\":\"Dashboard\",\"isCheck\":true},{\"id\":\"3\",\"title\":\"xpack.tamper.tamper\",\"path\":\"/xpack/tamper\",\"label\":\"Tamper\",\"isCheck\":true},{\"id\":\"4\",\"title\":\"xpack.gpu.gpu\",\"path\":\"/xpack/gpu\",\"label\":\"GPU\",\"isCheck\":true},{\"id\":\"5\",\"title\":\"xpack.setting.setting\",\"path\":\"/xpack/setting\",\"label\":\"XSetting\",\"isCheck\":true}]}"}).Error; err != nil {
+			return err
+		}
+		return nil
+	},
+}
--- a/backend/utils/xpack/xpack.go
+++ b/backend/utils/xpack/xpack.go
@ -2,5 +2,8 @@

 package xpack

-func RemoveTamper(website string) {
+func RemoveTamper(website string) {}
+
+func LoadGpuInfo() []interface{} {
+	return nil
 }
--- a/cmd/server/docs/docs.go
+++ b/cmd/server/docs/docs.go
@ -15194,6 +15194,12 @@ const docTemplate = `{
                        "$ref": "#/definitions/dto.DiskInfo"
                    }
                },
+                "gpuData": {
+                    "type": "array",
+                    "items": {
+                        "$ref": "#/definitions/dto.GPUInfo"
+                    }
+                },
                "ioCount": {
                    "type": "integer"
                },
@ -15777,6 +15783,47 @@ const docTemplate = `{
                }
            }
        },
+        "dto.GPUInfo": {
+            "type": "object",
+            "properties": {
+                "fanSpeed": {
+                    "type": "string"
+                },
+                "gpuUtil": {
+                    "type": "string"
+                },
+                "index": {
+                    "type": "integer"
+                },
+                "maxPowerLimit": {
+                    "type": "string"
+                },
+                "memTotal": {
+                    "type": "string"
+                },
+                "memUsed": {
+                    "type": "string"
+                },
+                "memoryUsage": {
+                    "type": "string"
+                },
+                "performanceState": {
+                    "type": "string"
+                },
+                "powerDraw": {
+                    "type": "string"
+                },
+                "powerUsage": {
+                    "type": "string"
+                },
+                "productName": {
+                    "type": "string"
+                },
+                "temperature": {
+                    "type": "string"
+                }
+            }
+        },
        "dto.GenerateLoad": {
            "type": "object",
            "required": [
@ -17788,6 +17835,9 @@ const docTemplate = `{
                "monitorStoreDays": {
                    "type": "string"
                },
+                "noAuthSetting": {
+                    "type": "string"
+                },
                "ntpSite": {
                    "type": "string"
                },
@ -18915,7 +18965,6 @@ const docTemplate = `{
        "request.FileCreate": {
            "type": "object",
            "required": [
-                "mode",
                "path"
            ],
            "properties": {
--- a/cmd/server/docs/swagger.json
+++ b/cmd/server/docs/swagger.json
@ -15187,6 +15187,12 @@
                        "$ref": "#/definitions/dto.DiskInfo"
                    }
                },
+                "gpuData": {
+                    "type": "array",
+                    "items": {
+                        "$ref": "#/definitions/dto.GPUInfo"
+                    }
+                },
                "ioCount": {
                    "type": "integer"
                },
@ -15770,6 +15776,47 @@
                }
            }
        },
+        "dto.GPUInfo": {
+            "type": "object",
+            "properties": {
+                "fanSpeed": {
+                    "type": "string"
+                },
+                "gpuUtil": {
+                    "type": "string"
+                },
+                "index": {
+                    "type": "integer"
+                },
+                "maxPowerLimit": {
+                    "type": "string"
+                },
+                "memTotal": {
+                    "type": "string"
+                },
+                "memUsed": {
+                    "type": "string"
+                },
+                "memoryUsage": {
+                    "type": "string"
+                },
+                "performanceState": {
+                    "type": "string"
+                },
+                "powerDraw": {
+                    "type": "string"
+                },
+                "powerUsage": {
+                    "type": "string"
+                },
+                "productName": {
+                    "type": "string"
+                },
+                "temperature": {
+                    "type": "string"
+                }
+            }
+        },
        "dto.GenerateLoad": {
            "type": "object",
            "required": [
@ -17781,6 +17828,9 @@
                "monitorStoreDays": {
                    "type": "string"
                },
+                "noAuthSetting": {
+                    "type": "string"
+                },
                "ntpSite": {
                    "type": "string"
                },
@ -18908,7 +18958,6 @@
        "request.FileCreate": {
            "type": "object",
            "required": [
-                "mode",
                "path"
            ],
            "properties": {
--- a/cmd/server/docs/swagger.yaml
+++ b/cmd/server/docs/swagger.yaml
@ -795,6 +795,10 @@ definitions:
        items:
          $ref: '#/definitions/dto.DiskInfo'
        type: array
+      gpuData:
+        items:
+          $ref: '#/definitions/dto.GPUInfo'
+        type: array
      ioCount:
        type: integer
      ioReadBytes:
@ -1190,6 +1194,33 @@ definitions:
    - type
    - vars
    type: object
+  dto.GPUInfo:
+    properties:
+      fanSpeed:
+        type: string
+      gpuUtil:
+        type: string
+      index:
+        type: integer
+      maxPowerLimit:
+        type: string
+      memTotal:
+        type: string
+      memUsed:
+        type: string
+      memoryUsage:
+        type: string
+      performanceState:
+        type: string
+      powerDraw:
+        type: string
+      powerUsage:
+        type: string
+      productName:
+        type: string
+      temperature:
+        type: string
+    type: object
  dto.GenerateLoad:
    properties:
      encryptionMode:
@ -2550,6 +2581,8 @@ definitions:
        type: string
      monitorStoreDays:
        type: string
+      noAuthSetting:
+        type: string
      ntpSite:
        type: string
      panelName:
@ -3311,7 +3344,6 @@ definitions:
      sub:
        type: boolean
    required:
-    - mode
    - path
    type: object
  request.FileDeCompress:
--- a/frontend/src/api/interface/dashboard.ts
+++ b/frontend/src/api/interface/dashboard.ts
@ -59,6 +59,8 @@ export namespace Dashboard {

        diskData: Array<DiskInfo>;

+        gpuData: Array<GPUInfo>;
+
        netBytesSent: number;
        netBytesRecv: number;

@ -78,4 +80,14 @@ export namespace Dashboard {
        inodesFree: number;
        inodesUsedPercent: number;
    }
+    export interface GPUInfo {
+        index: number;
+        productName: string;
+        gpuUtil: string;
+        temperature: string;
+        performanceState: string;
+        powerUsage: string;
+        memoryUsage: string;
+        fanSpeed: string;
+    }
 }
--- a/frontend/src/assets/iconfont/iconfont.css
+++ b/frontend/src/assets/iconfont/iconfont.css
@ -1,9 +1,9 @@
@font-face {
  font-family: "panel"; /* Project id 3575356 */
-  src: url('iconfont.woff2?t=1712045188451') format('woff2'),
-       url('iconfont.woff?t=1712045188451') format('woff'),
-       url('iconfont.ttf?t=1712045188451') format('truetype'),
-       url('iconfont.svg?t=1712045188451#panel') format('svg');
+  src: url('iconfont.woff2?t=1712805038256') format('woff2'),
+       url('iconfont.woff?t=1712805038256') format('woff'),
+       url('iconfont.ttf?t=1712805038256') format('truetype'),
+       url('iconfont.svg?t=1712805038256#panel') format('svg');
 }

 .panel {
@ -15,7 +15,15 @@
 }

 .p-xpack:before {
-  content: "\eb70";
+  content: "\e604";
+}
+
+.p-gpu-2:before {
+  content: "\e6d8";
+}
+
+.p-gpu-1:before {
+  content: "\e623";
 }

 .p-waf-4:before {
--- a/frontend/src/assets/iconfont/iconfont.js
+++ b/frontend/src/assets/iconfont/iconfont.js
--- a/frontend/src/assets/iconfont/iconfont.json
+++ b/frontend/src/assets/iconfont/iconfont.json
@ -6,11 +6,25 @@
  "description": "",
  "glyphs": [
    {
-      "icon_id": "5387846",
-      "name": "钻石_o",
+      "icon_id": "4657672",
+      "name": "会员",
      "font_class": "xpack",
-      "unicode": "eb70",
-      "unicode_decimal": 60272
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "640495",
+      "name": "详细信息",
+      "font_class": "gpu-2",
+      "unicode": "e6d8",
+      "unicode_decimal": 59096
+    },
+    {
+      "icon_id": "6176565",
+      "name": "监控",
+      "font_class": "gpu-1",
+      "unicode": "e623",
+      "unicode_decimal": 58915
    },
    {
      "icon_id": "8229531",
--- a/frontend/src/assets/iconfont/iconfont.svg
+++ b/frontend/src/assets/iconfont/iconfont.svg
@ -14,7 +14,11 @@
    />
      <missing-glyph />
      
-      <glyph glyph-name="xpack" unicode="&#60272;" d="M401.066667 469.333333h264.533333l-98.133333 170.666667h-68.266667l-98.133333-170.666667z m4.266666-42.666666l128-324.266667 128 324.266667h-256z m452.266667 42.666666l-123.733333 170.666667h-119.466667l98.133333-170.666667h145.066667z m21.333333-42.666666h-170.666666l-123.733334-311.466667 294.4 311.466667zM209.066667 469.333333h140.8l98.133333 170.666667H332.8l-123.733333-170.666667z m-21.333334-42.666666l294.4-311.466667L362.666667 426.666667H187.733333z m345.6-426.666667L128 430.933333 307.2 682.666667h448l179.2-251.733334L533.333333 0z"  horiz-adv-x="1024" />
+      <glyph glyph-name="xpack" unicode="&#58884;" d="M1018.61333 498.9L788.31333 811.2c-5.2 7.1-13.5 11.2-22.3 11.2l-513-3.7c-8.8-0.1-17-4.3-22.1-11.5L5.11333 491.6c-7.7-10.8-6.6-25.6 2.6-35.1L496.01333-46.10000000000002c5.2-5.3 12.3-8.3 19.7-8.3h0.2c7.5 0.1 14.6 3.2 19.8 8.6l480.8 509.5c9.1 9.7 10 24.5 2.1 35.2z m-715.3-46.5l139.4-364.8-353 363.3 213.6 1.5z m292.8 313.8L667.31333 510l-310.9-2.3 68 257.3 171.7 1.2zM662.21333 455L514.71333 53.200000000000045 362.01333 452.8l300.2 2.2z m58.6 0.4l213.8 1.5-348.9-369.6 135.1 368.1zM940.71333 512l-216.5-1.6L653.01333 766.7l99.4 0.7L940.71333 512zM267.41333 763.9l100 0.7-68-257.3-216.6-1.6 184.6 258.2z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="gpu-2" unicode="&#59096;" d="M392.585795 223.71443399999998l-93.230358 0c-14.145162 0-25.611308-11.466146-25.611308-25.611308s11.467169-25.611308 25.611308-25.611308l93.230358 0c14.145162 0 25.611308 11.466146 25.611308 25.611308S406.729933 223.71443399999998 392.585795 223.71443399999998zM392.585795 103.84434599999997l-93.230358 0c-14.145162 0-25.611308-11.466146-25.611308-25.611308s11.467169-25.611308 25.611308-25.611308l93.230358 0c14.145162 0 25.611308 11.466146 25.611308 25.611308S406.729933 103.84434599999997 392.585795 103.84434599999997zM392.585795 330.26312199999995l-93.230358 0c-14.145162 0-25.611308-11.466146-25.611308-25.611308s11.467169-25.611308 25.611308-25.611308l93.230358 0c14.145162 0 25.611308 11.466146 25.611308 25.611308S406.729933 330.26312199999995 392.585795 330.26312199999995zM473.523175 304.65181399999994c0-14.145162 11.467169-25.611308 25.611308-25.611308l226.416729 0c14.145162 0 25.611308 11.466146 25.611308 25.611308s-11.466146 25.611308-25.611308 25.611308l-226.416729 0C484.990345 330.26312199999995 473.523175 318.796976 473.523175 304.65181399999994zM852.245729 471.110987c-54.019311 71.51887-226.167043 271.164886-294.330492 347.954807-2.820232 3.175319-6.088672 5.656837-9.639544 7.385201l-2.437515 2.849908-9.704013 0c-0.049119 0-0.097214 0.004093-0.146333 0.004093-0.039909 0-0.079818-0.004093-0.12075-0.004093L213.635123 829.300902c-15.878642 0-32.363082-6.886851-45.228087-18.896372-13.467733-12.571317-21.190625-29.167297-21.190625-45.533033L147.216411 5.710303999999951c0-16.116049 7.467065-32.885991 20.48659-46.007847 13.072737-13.175067 29.815049-20.732184 45.933145-20.732184l602.350774 0c16.676821 0 33.07428 8.121981 44.989657 22.281469 10.622942 12.624529 16.714683 28.828582 16.714683 44.457538L877.691261 441.366545 852.245729 471.110987zM559.654858 734.350366l239.987816-280.545534L563.927161 453.804832c-2.067079 3.163039-4.272303 9.214872-4.272303 13.115716L559.654858 734.350366zM826.467623 5.710303999999951c0-7.726985-7.185656-15.516392-10.480702-15.516392L213.635123-9.806087000000048c-5.396917 0-15.196097 10.005888-15.196097 15.516392L198.439026 764.87252c0 4.66423 8.933463 13.205766 15.196097 13.205766l294.79712 0 0-311.158762c0-26.295899 18.24555-64.339354 51.235918-64.339354l266.799462 0L826.467623 5.710303999999951zM430.875866 634.92696L297.690518 634.92696c-14.145162 0-25.611308-11.467169-25.611308-25.611308l0-133.186372c0-14.145162 11.467169-25.612331 25.611308-25.612331l133.185348 0c14.145162 0 25.611308 11.467169 25.611308 25.612331L456.487174 609.314629C456.487174 623.45979 445.021028 634.92696 430.875866 634.92696zM405.264559 501.739565l-81.962733 0 0 81.963757 81.962733 0L405.264559 501.739565zM725.551212 223.71443399999998l-226.416729 0c-14.145162 0-25.611308-11.466146-25.611308-25.611308s11.467169-25.611308 25.611308-25.611308l226.416729 0c14.145162 0 25.611308 11.466146 25.611308 25.611308S739.697397 223.71443399999998 725.551212 223.71443399999998zM725.551212 103.84434599999997l-226.416729 0c-14.145162 0-25.611308-11.466146-25.611308-25.611308s11.467169-25.611308 25.611308-25.611308l226.416729 0c14.145162 0 25.611308 11.466146 25.611308 25.611308S739.697397 103.84434599999997 725.551212 103.84434599999997z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="gpu-1" unicode="&#58915;" d="M838.22 139.59000000000003H187.78a89.1 89.1 0 0 0-89.1 89.1V697.46a89.1 89.1 0 0 0 89.1 89.1h650.44a89.1 89.1 0 0 0 89.1-89.1v-468.77a89.1 89.1 0 0 0-89.1-89.1zM852 224.64999999999998V701.5a9 9 0 0 1-9 8.95H183a9 9 0 0 1-9-8.95v-476.85a9 9 0 0 1 9-8.94h660a9 9 0 0 1 9 8.94zM287.01 63.48000000000002m37.86 0l376.26 0q37.86 0 37.86-37.86l0-0.39q0-37.86-37.86-37.86l-376.26 0q-37.86 0-37.86 37.86l0 0.39q0 37.86 37.86 37.86ZM249.34 558.22m31.68 0l11.97 0q31.68 0 31.68-31.68l0-203.04q0-31.68-31.68-31.68l-11.97 0q-31.68 0-31.68 31.68l0 203.04q0 31.68 31.68 31.68ZM400 444.05m37.67 0l-0.01 0q37.67 0 37.67-37.67l0-76.89q0-37.67-37.67-37.67l0.01 0q-37.67 0-37.67 37.67l0 76.89q0 37.67 37.67 37.67ZM550.67 634.3299999999999m37.67 0l-0.01 0q37.67 0 37.67-37.67l0-267.17q0-37.67-37.67-37.67l0.01 0q-37.67 0-37.67 37.67l0 267.17q0 37.67 37.67 37.67ZM701.33 482.11m37.67 0l-0.01 0q37.67 0 37.67-37.67l0-114.94q0-37.67-37.67-37.67l0.01 0q-37.67 0-37.67 37.67l0 114.94q0 37.67 37.67 37.67Z"  horiz-adv-x="1024" />
      
      <glyph glyph-name="waf-4" unicode="&#58888;" d="M136.533333 759.466667h546.133334v-68.266667H136.533333zM136.533333 622.933333h546.133334v-68.266666H136.533333zM136.533333 486.4h546.133334v-68.266667H136.533333zM136.533333 349.866667h68.266667v-68.266667H136.533333zM136.533333 213.33333300000004h68.266667v-68.266666H136.533333zM466.261333 55.63733300000001h68.266667L546.133333 8.53333299999997h43.690667l-68.266667 204.8H477.866667l-68.266667-204.8h43.008z m30.037334 105.130667a81.92 81.92 0 0 1 0 17.066667 84.650667 84.650667 0 0 1 0-17.749334l21.162666-68.266666H477.866667zM691.541333 8.53333299999997a115.370667 115.370667 0 0 1 53.248 10.922667v38.912a84.650667 84.650667 0 0 0-45.738666-12.970667 53.248 53.248 0 0 0-42.325334 17.749334 68.266667 68.266667 0 0 0-15.701333 47.104 68.266667 68.266667 0 0 0 16.384 48.469333 55.296 55.296 0 0 0 43.690667 18.432 79.872 79.872 0 0 0 43.008-11.605333v40.96a121.514667 121.514667 0 0 1-45.738667 7.509333 92.842667 92.842667 0 0 1-68.266667-30.037333 108.544 108.544 0 0 1-27.989333-76.458667 101.034667 101.034667 0 0 1 24.576-68.266667 86.698667 86.698667 0 0 1 64.853333-30.72zM887.466667 44.03200000000004h-69.632V213.33333300000004h-40.277334v-204.8H887.466667v35.498667zM819.2 349.866667V896H0v-1024h1024V349.866667zM68.266667-59.733333000000016V827.733333h682.666666v-477.866666H273.066667v-409.6z m887.466666 0H341.333333V281.6h614.4z"  horiz-adv-x="1024" />
      
--- a/frontend/src/assets/iconfont/iconfont.ttf
+++ b/frontend/src/assets/iconfont/iconfont.ttf
--- a/frontend/src/assets/iconfont/iconfont.woff
+++ b/frontend/src/assets/iconfont/iconfont.woff
--- a/frontend/src/assets/iconfont/iconfont.woff2
+++ b/frontend/src/assets/iconfont/iconfont.woff2
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@ -892,6 +892,13 @@ const message = {
        up: 'Up',
        down: 'Down',
        interval: 'Interval(min)',
+
+        gpuUtil: 'GPU Utilization',
+        temperature: 'Temperature',
+        performanceState: 'Performance State',
+        powerUsage: 'Power Usage',
+        memoryUsage: 'Memory Usage',
+        fanSpeed: 'Fan Speed',
    },
    terminal: {
        conn: 'connection',
@ -1505,10 +1512,11 @@ const message = {
        knowMorePro: 'Learn More',
        closeAlert: 'The current page can be closed in the panel settings',
        introduce: 'Feature Introduction',
-        waf: 'Upgrade to the professional version to get interception maps, logs, blocking records, geographical location blocking, custom rules, custom blocking pages and other functions',
-        tamper: '1Panel tamper-proof function is a security measure used to protect a website from unauthorized modifications or tampering.',
+        waf: 'Upgrading to the professional version can provide features such as interception map, logs, block records, geographical location blocking, custom rules, custom interception pages, etc.',
+        tamper: 'Upgrading to the professional version can protect websites from unauthorized modifications or tampering.',
+        gpu: 'Upgrading to the professional version can help users visually monitor important parameters of GPU such as workload, temperature, memory usage in real time.',
        setting:
-            '1Panel interface settings function allow you to customize panel logos, welcome messages, and other information.',
+            'Upgrading to the professional version allows customization of panel logo, welcome message, and other information.',
    },
    clean: {
        scan: 'Start Scanning',
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@ -852,6 +852,13 @@ const message = {
        up: '上行',
        down: '下行',
        interval: '采集間隔（分鐘）',
+
+        gpuUtil: 'GPU 使用率',
+        temperature: '溫度',
+        performanceState: '性能狀態',
+        powerUsage: '功耗',
+        memoryUsage: '顯存使用率',
+        fanSpeed: '風扇轉速',
    },
    terminal: {
        conn: '連接',
@ -1404,9 +1411,10 @@ const message = {
        knowMorePro: '了解更多',
        closeAlert: '當前頁面可在面板設置中關閉顯示',
        introduce: '功能介紹',
-        waf: '升級專業版可以獲得攔截地圖、日誌、封鎖記錄、地理位置封鎖、自訂規則、自訂攔截頁面等功能',
-        tamper: '1Panel 防篡改功能是一種用於保護網站免受未經授權的修改或篡改的安全措施。',
-        setting: '1Panel 介面設置功能可自定義面板 Logo、歡迎簡介等信息。',
+        waf: '升級專業版可以獲得攔截地圖、日誌、封鎖記錄、地理位置封禁、自定義規則、自定義攔截頁面等功能。',
+        tamper: '升級專業版可以保護網站免受未經授權的修改或篡改。',
+        gpu: '升級專業版可以幫助用戶實時直觀查看到 GPU 的工作負載、溫度、顯存等重要參數。',
+        setting: '升級專業版可以自定義面板 Logo、歡迎簡介等信息。',
    },
    clean: {
        scan: '開始掃描',
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@ -853,6 +853,13 @@ const message = {
        up: '上行',
        down: '下行',
        interval: '采集间隔（分钟）',
+
+        gpuUtil: 'GPU 使用率',
+        temperature: '温度',
+        performanceState: '性能状态',
+        powerUsage: '功耗',
+        memoryUsage: '显存使用率',
+        fanSpeed: '风扇转速',
    },
    terminal: {
        conn: '连接',
@ -1405,9 +1412,10 @@ const message = {
        knowMorePro: '了解更多',
        closeAlert: '当前页面可在面板设置中关闭显示',
        introduce: '功能介绍',
-        waf: '升级专业版可以获得拦截地图、日志、封锁记录、地理位置封禁、自定义规则、自定义拦截页面等功能',
-        tamper: '1Panel 防篡改功能是一种用于保护网站免受未经授权的修改或篡改的安全措施。',
-        setting: '1Panel 界面设置功能可自定义面板 Logo、欢迎简介等信息。',
+        waf: '升级专业版可以获得拦截地图、日志、封锁记录、地理位置封禁、自定义规则、自定义拦截页面等功能。',
+        tamper: '升级专业版可以保护网站免受未经授权的修改或篡改。',
+        gpu: '升级专业版可以帮助用户实时直观查看到 GPU 的工作负载、温度、显存等重要参数。',
+        setting: '升级专业版可以自定义面板 Logo、欢迎简介等信息。',
    },
    clean: {
        scan: '开始扫描',
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@ -336,6 +336,7 @@ const currentInfo = ref<Dashboard.CurrentInfo>({
    ioWriteTime: 0,

    diskData: [],
+    gpuData: [],

    netBytesSent: 0,
    netBytesRecv: 0,
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@ -161,6 +161,59 @@
                <span class="input-help">{{ computeSize(item.used) }} / {{ computeSize(item.total) }}</span>
            </el-col>
        </template>
+        <template v-for="(item, index) of currentInfo.gpuData" :key="index">
+            <el-col
+                :xs="12"
+                :sm="12"
+                :md="6"
+                :lg="6"
+                :xl="6"
+                align="center"
+                v-if="showMore || index < 4 - currentInfo.diskData.length"
+            >
+                <el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
+                    <el-row :gutter="5">
+                        <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
+                    </el-row>
+                    <el-row :gutter="5">
+                        <el-tag class="tagClass">{{ $t('monitor.gpuUtil') }}: {{ item.gpuUtil }}</el-tag>
+                    </el-row>
+                    <el-row :gutter="5">
+                        <el-tag class="tagClass">
+                            {{ $t('monitor.temperature') }}: {{ item.temperature.replaceAll('C', '°C') }}
+                        </el-tag>
+                    </el-row>
+                    <el-row :gutter="5">
+                        <el-tag class="tagClass">
+                            {{ $t('monitor.performanceState') }}: {{ item.performanceState }}
+                        </el-tag>
+                    </el-row>
+                    <el-row :gutter="5">
+                        <el-tag class="tagClass">{{ $t('monitor.powerUsage') }}: {{ item.powerUsage }}</el-tag>
+                    </el-row>
+                    <el-row :gutter="5">
+                        <el-tag class="tagClass">{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsage }}</el-tag>
+                    </el-row>
+                    <el-row :gutter="5">
+                        <el-tag class="tagClass">{{ $t('monitor.fanSpeed') }}: {{ item.fanSpeed }}</el-tag>
+                    </el-row>
+                    <template #reference>
+                        <v-charts
+                            @click="goGPU()"
+                            height="160px"
+                            :id="`gpu${index}`"
+                            type="pie"
+                            :option="chartsOption[`gpu${index}`]"
+                            v-if="chartsOption[`gpu${index}`]"
+                        />
+                    </template>
+                </el-popover>
+                <el-tooltip :content="item.productName" v-if="item.productName.length > 25">
+                    <span class="input-help">{{ item.productName.substring(0, 22) }}...</span>
+                </el-tooltip>
+                <span class="input-help" v-else>{{ item.productName }}</span>
+            </el-col>
+        </template>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
            <el-button v-if="!showMore" link type="primary" @click="showMore = true" class="buttonClass">
                {{ $t('tabs.more') }}
@ -183,6 +236,7 @@
 <script setup lang="ts">
 import { Dashboard } from '@/api/interface/dashboard';
 import { computeSize } from '@/utils/util';
+import router from '@/routers';
 import i18n from '@/lang';
 import { nextTick, ref } from 'vue';
 const showMore = ref(true);
@ -238,6 +292,7 @@ const currentInfo = ref<Dashboard.CurrentInfo>({
    ioWriteTime: 0,

    diskData: [],
+    gpuData: [],

    netBytesSent: 0,
    netBytesRecv: 0,
@ -271,7 +326,13 @@ const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo,
                data: formatNumber(currentInfo.value.diskData[i].usedPercent),
            };
        }
-        if (currentInfo.value.diskData.length > 5) {
+        for (let i = 0; i < currentInfo.value.gpuData.length; i++) {
+            chartsOption.value['gpu' + i] = {
+                title: 'GPU-' + currentInfo.value.gpuData[i].index,
+                data: formatNumber(Number(currentInfo.value.gpuData[i].gpuUtil.replaceAll(' %', ''))),
+            };
+        }
+        if (currentInfo.value.diskData.length + currentInfo.value.gpuData.length > 5) {
            showMore.value = isInit ? false : showMore.value || false;
        }
    });
@ -290,6 +351,10 @@ function loadStatus(val: number) {
    return i18n.global.t('home.runJam');
 }

+const goGPU = () => {
+    router.push({ name: 'GPU' });
+};
+
 function formatNumber(val: number) {
    return Number(val.toFixed(2));
 }