更新 1.3.0-beta24-01-09

Squashed commit of the following:

commit 53d1f382c5142f6a388b2d3fa13caef04a48db91
Author: Sun <95302870@qq.com>
Date:   Tue Jan 9 11:54:33 2024 +0800

    系统状态标题加上阴影,beta版本最终优化

commit fc56328765b8a4d902b59f2393f43e10f3c3dac5
Author: Sun <95302870@qq.com>
Date:   Mon Jan 8 22:37:24 2024 +0800

    磁盘监控增加表单验证

commit 3905717d420d8339e0d04443a79e69229cd10a1a
Author: Sun <95302870@qq.com>
Date:   Mon Jan 8 22:36:10 2024 +0800

    删除无用文件

commit 89b6b633107832465973656abfdb6e25be156747
Author: Sun <95302870@qq.com>
Date:   Mon Jan 8 21:10:10 2024 +0800

    修改翻译文件为json格式（为了方便引用插件）优化过期登录弹窗多个的问题

commit 2efb31571ebe5997113c75e69f973dd436cef985
Author: Sun <95302870@qq.com>
Date:   Mon Jan 8 13:56:57 2024 +0800

    增加vscode工作区文件

commit bc79b661db2defa36bdfadb13b1038e906e36d7e
Author: Sun <95302870@qq.com>
Date:   Mon Jan 8 13:56:45 2024 +0800

    暂时解决依赖循环的问题

commit a24520f8087a45abe08ee7ea864169888754a5fc
Author: Sun <95302870@qq.com>
Date:   Sun Jan 7 20:07:52 2024 +0800

    修改设置里面壁纸提示词错误的问题修改首页默认标题

commit 394c6ce20ce33cd3edf43b33ac7c1f5b23cfe89a
Author: Sun <95302870@qq.com>
Date:   Sun Jan 7 14:53:53 2024 +0800

    适配多语言
    Squashed commit of the following:

    commit 632f86c0228c68391c01865c7576f3aa0408c102
    Author: Sun <95302870@qq.com>
    Date:   Sun Jan 7 14:47:55 2024 +0800

        退出的时候清除appstore

    commit b9d805e49a3c6b2ad38bc8d527cb12cc8709012e
    Author: Sun <95302870@qq.com>
    Date:   Sun Jan 7 13:55:20 2024 +0800

        系统状态监控适配国际化

    commit daece99723ec96d210241d2ca4e5a85dc5ae69bd
    Author: Sun <95302870@qq.com>
    Date:   Sun Jan 7 13:09:46 2024 +0800

        适配添加项目页面的国际化配置还有时钟的星期*

    commit 8ea2b2fe951f6266415c96a197cb8d00faef4058
    Author: Sun <95302870@qq.com>
    Date:   Sun Jan 7 12:01:55 2024 +0800

        完成适配所有apps国际化

    commit 21ef54e0d4afb10f560c8cb7aff666374afe0f87
    Author: Sun <95302870@qq.com>
    Date:   Sat Jan 6 21:36:07 2024 +0800

        增加读取默认浏览器语言

    commit 6f710bbebe63ab2800193f27c71e5c0034f11978
    Author: Sun <95302870@qq.com>
    Date:   Sat Jan 6 21:09:58 2024 +0800

        登录页面增加语言选择选项

    commit cb7c4a89a160ed3ef91ad566ec98e75325e7601f
    Author: Sun <95302870@qq.com>
    Date:   Sat Jan 6 20:37:16 2024 +0800

        首次尝试增加英文语言，并在我的信息设置

    commit fb996e17cd11611d30c0e12feee00ddf7b225e32
    Author: Sun <95302870@qq.com>
    Date:   Sat Jan 6 18:22:40 2024 +0800

        完成基础设置页面的语言国际化适配

commit ffc378a38fa4221a9240b067660614ab43009325
Author: Sun <95302870@qq.com>
Date:   Sat Jan 6 17:35:13 2024 +0800

    增加完善基本配置中的系统状态开关

commit c91eaf3e941dfa91b7feca925109ec7121874fda
Merge: 7ebe358 a60f72c
Author: Sun <95302870@qq.com>
Date:   Sat Jan 6 12:57:05 2024 +0800

    Merge branch 'feature/monitor2' into dev

commit 7ebe35856e423bb10d8078636b0c80e472203a68
Merge: d3e3cf5 779712a
Author: Sun <95302870@qq.com>
Date:   Sat Jan 6 12:56:15 2024 +0800

    Merge branch 'feature/footer' into dev

commit a60f72c2779a4adee77f4ab161fb4fad21ff0611
Author: Sun <95302870@qq.com>
Date:   Sat Jan 6 12:55:04 2024 +0800

    优化了首页

commit 899c945fff12290f3c81348a3c262400b1a0ce15
Author: Sun <95302870@qq.com>
Date:   Sat Jan 6 12:54:19 2024 +0800

    完成系统监控

commit cdf16277ff85cee5029de3b7ea78b14bc0274623
Author: Sun <95302870@qq.com>
Date:   Sat Jan 6 12:41:38 2024 +0800

    增加删除功能

commit 128af005ebc95b73ecef8873301a61556984fbea
Author: Sun <95302870@qq.com>
Date:   Sat Jan 6 11:56:32 2024 +0800

    完成排序保存功能

commit 3f4b3c67f261f21121c8e9f7c14d926f152a5836
Author: Sun <95302870@qq.com>
Date:   Sat Jan 6 11:46:59 2024 +0800

    初步完成了增改查包括磁盘状态

commit a85d90985df45af75f8fbc165021b160d5e6500d
Author: Sun <95302870@qq.com>
Date:   Fri Jan 5 22:19:47 2024 +0800

    增加磁盘信息卡片的适配

commit c955afd86134b38620a884e9e6540eda398392e4
Author: Sun <95302870@qq.com>
Date:   Fri Jan 5 21:36:38 2024 +0800

    增加获取磁盘挂载点接口

commit 21e8e8f1b872a7e7989c45b29061f52127dffce5
Author: Sun <95302870@qq.com>
Date:   Fri Jan 5 21:14:57 2024 +0800

    基础完成了增改查cpu和内存状态

commit bdbcd50aa1b1b6958043e26be5b705430312c64c
Author: Sun <95302870@qq.com>
Date:   Fri Jan 5 14:25:09 2024 +0800

    优化公共入口组件

commit 9735e67a7d6334e39d4f58b053c32b3be25e7fa8
Author: Sun <95302870@qq.com>
Date:   Fri Jan 5 14:01:46 2024 +0800

    适配三个组件

commit 3a82949afc64147209be046f9298d55096abd0c3
Author: Sun <95302870@qq.com>
Date:   Fri Jan 5 13:58:58 2024 +0800

    优化组件

commit 0d0421c8ebc749889422c416970fd5760f2a5f6a
Author: Sun <95302870@qq.com>
Date:   Fri Jan 5 13:27:29 2024 +0800

    初步完成了编辑器

commit 1474f796fc29051b7e0813839dbb6bdc22293990
Author: Sun <95302870@qq.com>
Date:   Thu Jan 4 16:22:33 2024 +0800

    完成大图标小图标切换

commit baf64a927280fdb04579d5afeff1b5d50e56556a
Author: Sun <95302870@qq.com>
Date:   Thu Jan 4 12:08:39 2024 +0800

    增加获取各项监控的单独api

commit d3e3cf5d58168cad1e2fa3c96e2381c21aabcab4
Author: Sun <95302870@qq.com>
Date:   Wed Jan 3 20:46:58 2024 +0800

    尝试将所有监控放在顶部

commit 8dfec7e4b78cc393fad96df9d452c5f2dd4933bb
Author: Sun <95302870@qq.com>
Date:   Wed Jan 3 20:02:03 2024 +0800

    完整横条显示并对容量尺寸单位优化自动识别

commit fe967a93141472970616a5eac416c59510810b64
Author: Sun <95302870@qq.com>
Date:   Wed Jan 3 18:55:39 2024 +0800

    适配显示了cpu、硬盘、内存信息

commit 11ea134be3ce8aca9c1bf6af4610e3bb4e09eca7
Author: Sun <95302870@qq.com>
Date:   Tue Jan 2 23:14:04 2024 +0800

    完成系统监控的基础api接口

commit c447884d77349553864e0e045b83b3a4b67345da
Author: Sun <95302870@qq.com>
Date:   Tue Jan 2 22:11:34 2024 +0800

    完成基本的系统监控类库

commit 779712a5da617fa090056a5d549145f687d8db54
Author: Sun <95302870@qq.com>
Date:   Tue Jan 2 17:14:16 2024 +0800

    增加自定义footer

.vscode/settings.json

@@ -19,16 +19,12 @@
     "markdown"
   ],
   "cSpell.words": [
-    "antfu",
     "axios",
     "bumpp",
-    "chatgpt",
-    "chenzhaoyu",
     "commitlint",
     "davinci",
     "dockerhub",
     "esno",
-    "GPTAPI",
     "highlightjs",
     "hljs",
     "iconify",
@@ -39,7 +35,6 @@
     "mdhljs",
     "mila",
     "nodata",
-    "OPENAI",
     "pinia",
     "Popconfirm",
     "rushstack",
@@ -50,8 +45,7 @@
     "Typecheck",
     "unplugin",
     "VITE",
-    "vueuse",
+    "vueuse"
-    "Zhao"
   ],
   "i18n-ally.enabledParsers": [
     "ts"

index.html

@@ -7,7 +7,7 @@
 	<link rel="apple-touch-icon" href="/favicon.ico">
 	<meta name="viewport"
 		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
-	<title>Sun Panel</title>
+	<title>Sun-Panel</title>
 </head>
 
 <body class="dark:bg-black">

service/api/api_v1/common/apiData/systemApiStructs/monitor.go

@@ -0,0 +1,5 @@
+package systemApiStructs
+
+type MonitorGetDiskStateByPathReq struct {
+	Path string `json:"path"`
+}

service/api/api_v1/system/A_ENTER.go

@@ -9,4 +9,5 @@ type ApiSystem struct {
 	RegisterApi     RegisterApi
 	NoticeApi       NoticeApi
 	ModuleConfigApi ModuleConfigApi
+	MonitorApi      MonitorApi
 }

service/api/api_v1/system/monitor.go

@@ -0,0 +1,96 @@
+package system
+
+import (
+	"sun-panel/api/api_v1/common/apiData/systemApiStructs"
+	"sun-panel/api/api_v1/common/apiReturn"
+	"sun-panel/global"
+	"sun-panel/lib/monitor"
+	"time"
+
+	"github.com/gin-gonic/gin"
+	"github.com/gin-gonic/gin/binding"
+)
+
+type MonitorApi struct{}
+
+const cacheSecond = 3
+
+// 弃用
+func (a *MonitorApi) GetAll(c *gin.Context) {
+	if value, ok := global.SystemMonitor.Get("value"); ok {
+		apiReturn.SuccessData(c, value)
+		return
+	}
+	apiReturn.Error(c, "failed")
+}
+
+func (a *MonitorApi) GetCpuState(c *gin.Context) {
+	if v, ok := global.SystemMonitor.Get(global.SystemMonitor_CPU_INFO); ok {
+		global.Logger.Debugln("读取缓存的的CPU信息")
+		apiReturn.SuccessData(c, v)
+		return
+	}
+	cpuInfo, err := monitor.GetCPUInfo()
+
+	if err != nil {
+		apiReturn.Error(c, "failed")
+		return
+	}
+	// 缓存
+	global.SystemMonitor.Set(global.SystemMonitor_CPU_INFO, cpuInfo, cacheSecond*time.Second)
+	apiReturn.SuccessData(c, cpuInfo)
+}
+
+func (a *MonitorApi) GetMemonyState(c *gin.Context) {
+	if v, ok := global.SystemMonitor.Get(global.SystemMonitor_MEMORY_INFO); ok {
+		global.Logger.Debugln("读取缓存的的RAM信息")
+		apiReturn.SuccessData(c, v)
+		return
+	}
+	memoryInfo, err := monitor.GetMemoryInfo()
+
+	if err != nil {
+		apiReturn.Error(c, "failed")
+		return
+	}
+
+	// 缓存
+	global.SystemMonitor.Set(global.SystemMonitor_MEMORY_INFO, memoryInfo, cacheSecond*time.Second)
+	apiReturn.SuccessData(c, memoryInfo)
+}
+
+func (a *MonitorApi) GetDiskStateByPath(c *gin.Context) {
+
+	req := systemApiStructs.MonitorGetDiskStateByPathReq{}
+	if err := c.ShouldBindBodyWith(&req, binding.JSON); err != nil {
+		apiReturn.ErrorParamFomat(c, err.Error())
+		return
+	}
+
+	cacheDiskName := global.SystemMonitor_DISK_INFO + req.Path
+
+	if v, ok := global.SystemMonitor.Get(cacheDiskName); ok {
+		global.Logger.Debugln("读取缓存的的DISK信息")
+		apiReturn.SuccessData(c, v)
+		return
+	}
+
+	diskState, err := monitor.GetDiskInfoByPath(req.Path)
+	if err != nil {
+		apiReturn.Error(c, "failed")
+		return
+	}
+
+	// 缓存
+	global.SystemMonitor.Set(cacheDiskName, diskState, cacheSecond*time.Second)
+	apiReturn.SuccessData(c, diskState)
+}
+
+func (a *MonitorApi) GetDiskMountpoints(c *gin.Context) {
+	if list, err := monitor.GetDiskMountpoints(); err != nil {
+		apiReturn.Error(c, err.Error())
+		return
+	} else {
+		apiReturn.SuccessData(c, list)
+	}
+}

service/assets/version

@@ -1 +1 @@
-8|1.2.1
+9|1.3.0-beta24-01-09

service/global/global.go

@@ -35,5 +35,6 @@ var (
 	Db                  *gorm.DB
 	RedisDb             *redis.Client
 	SystemSetting       *systemSetting.SystemSettingCache
+	SystemMonitor       cache.Cacher[interface{}]
 	RateLimit           *RateLimiter
 )

service/global/monitor.go

@@ -0,0 +1,18 @@
+package global
+
+import (
+	"sun-panel/lib/monitor"
+)
+
+const (
+	SystemMonitor_CPU_INFO    = "CPU_INFO"
+	SystemMonitor_MEMORY_INFO = "MEMORY_INFO"
+	SystemMonitor_DISK_INFO   = "DISK_INFO"
+)
+
+type ModelSystemMonitor struct {
+	CPUInfo           monitor.CPUInfo             `json:"cpuInfo"`
+	DiskInfo          []monitor.DiskInfo          `json:"diskInfo"`
+	NetIOCountersInfo []monitor.NetIOCountersInfo `json:"netIOCountersInfo"`
+	MemoryInfo        monitor.MemoryInfo          `json:"memoryInfo"`
+}

service/initialize/A_ENTER.go

@@ -17,6 +17,7 @@ import (
 	"sun-panel/lib/cmn"
 	"sun-panel/models"
 	"sun-panel/structs"
+	"time"
 
 	"log"
 
@@ -88,6 +89,7 @@ func InitApp() error {
 	// 其他的初始化
 	global.VerifyCodeCachePool = other.InitVerifyCodeCachePool()
 	global.SystemSetting = systemSettingCache.InItSystemSettingCache()
+	global.SystemMonitor = global.NewCache[interface{}](5*time.Hour, -1, "systemMonitorCache")
 
 	return nil
 }

service/initialize/systemMonitor/systemMonitor.go

@@ -0,0 +1,53 @@
+package systemMonitor
+
+import (
+	"sun-panel/global"
+	"sun-panel/lib/cache"
+	"sun-panel/lib/monitor"
+	"time"
+)
+
+func Start(cacher cache.Cacher[global.ModelSystemMonitor], interval time.Duration) {
+	go func() {
+
+		ticker := time.NewTicker(interval)
+		defer ticker.Stop()
+
+		for {
+			select {
+			case <-ticker.C:
+				go func() {
+					monitorInfo := GetInfo()
+					// jsonByte, _ := json.Marshal(monitorInfo)
+					// fmt.Println("系统监控：", string(jsonByte))
+					cacher.SetDefault("value", monitorInfo)
+				}()
+			}
+		}
+
+	}()
+
+}
+
+func GetInfo() global.ModelSystemMonitor {
+
+	var modelSystemMonitor global.ModelSystemMonitor
+
+	if cpuInfo, err := monitor.GetCPUInfo(); err == nil {
+		modelSystemMonitor.CPUInfo = cpuInfo
+	}
+
+	if v, err := monitor.GetDiskInfo(); err == nil {
+		modelSystemMonitor.DiskInfo = v
+	}
+
+	if v, err := monitor.GetNetIOCountersInfo(); err == nil {
+		modelSystemMonitor.NetIOCountersInfo = v
+	}
+
+	if v, err := monitor.GetMemoryInfo(); err == nil {
+		modelSystemMonitor.MemoryInfo = v
+	}
+
+	return modelSystemMonitor
+}

service/lib/cache/base.go

@@ -4,6 +4,11 @@ import (
 	"time"
 )
 
+const (
+	CACHE_DRIVE_REDIS  = "redis"
+	CACHE_DRIVE_MEMORY = "memory"
+)
+
 // 缓存接口-支持Redis和内存使用
 type Cacher[T any] interface {
 	// 设置

service/lib/monitor/monitor.go

@@ -0,0 +1,149 @@
+package monitor
+
+import (
+	"time"
+
+	"github.com/shirou/gopsutil/v3/cpu"
+	"github.com/shirou/gopsutil/v3/disk"
+	"github.com/shirou/gopsutil/v3/mem"
+	"github.com/shirou/gopsutil/v3/net"
+)
+
+type CPUInfo struct {
+	CoreCount int32     `json:"coreCount"`
+	CPUNum    int       `json:"cpuNum"`
+	Model     string    `json:"model"`
+	Usages    []float64 `json:"usages"`
+}
+
+type DiskInfo struct {
+	Mountpoint  string  `json:"mountpoint"`
+	Total       uint64  `json:"total"`
+	Used        uint64  `json:"used"`
+	Free        uint64  `json:"free"`
+	UsedPercent float64 `json:"usedPercent"`
+}
+
+type NetIOCountersInfo struct {
+	BytesSent uint64 `json:"bytesSent"`
+	BytesRecv uint64 `json:"bytesRecv"`
+	Name      string `json:"name"`
+}
+
+type MemoryInfo struct {
+	Total       uint64  `json:"total"`
+	Free        uint64  `json:"free"`
+	Used        uint64  `json:"used"`
+	UsedPercent float64 `json:"usedPercent"`
+}
+
+// 获取CPU信息
+func GetCPUInfo() (CPUInfo, error) {
+	cpuInfoRes := CPUInfo{}
+	cpuInfo, err := cpu.Info()
+
+	if err == nil && len(cpuInfo) > 0 {
+		cpuInfoRes.CoreCount = cpuInfo[0].Cores
+		cpuInfoRes.Model = cpuInfo[0].ModelName
+	}
+	numCPU, _ := cpu.Counts(true)
+	cpuInfoRes.CPUNum = numCPU
+	cpuPercentages, err := cpu.Percent(time.Second, true)
+	cpuInfoRes.Usages = cpuPercentages
+
+	return cpuInfoRes, err
+}
+
+// 获取内存信息 单位：MB
+func GetMemoryInfo() (MemoryInfo, error) {
+	memoryInfo := MemoryInfo{}
+	// 获取内存信息
+	memInfo, err := mem.VirtualMemory()
+	if err == nil {
+		memoryInfo.Free = memInfo.Free
+		memoryInfo.Total = memInfo.Total
+		memoryInfo.Used = memInfo.Used
+		memoryInfo.UsedPercent = memInfo.UsedPercent
+	}
+
+	return memoryInfo, err
+}
+
+// 获取每个磁盘分区使用情况
+func GetDiskInfo() ([]DiskInfo, error) {
+	disks := []DiskInfo{}
+	// 获取所有磁盘分区的信息
+	partitions, err := disk.Partitions(true)
+	if err != nil {
+		return disks, err
+	}
+
+	for _, partition := range partitions {
+		usage, err := disk.Usage(partition.Mountpoint)
+		if err != nil {
+			// fmt.Printf("Error getting disk usage for %s: %v\n", partition.Mountpoint, err)
+			continue
+		}
+
+		disks = append(disks, DiskInfo{
+			Mountpoint:  partition.Mountpoint,
+			Total:       usage.Total / 1024 / 1024,
+			Used:        usage.Used / 1024 / 1024,
+			Free:        usage.Free / 1024 / 1024,
+			UsedPercent: usage.UsedPercent,
+		})
+	}
+
+	return disks, nil
+}
+
+func GetDiskMountpoints() ([]disk.PartitionStat, error) {
+	return disk.Partitions(true)
+}
+
+func GetDiskInfoByPath(path string) (*DiskInfo, error) {
+	diskInfo := DiskInfo{}
+	usage, err := disk.Usage(path)
+	if err != nil {
+		return nil, err
+	}
+	diskInfo.Free = usage.Free
+	diskInfo.Mountpoint = usage.Path
+	diskInfo.Total = usage.Total
+	diskInfo.Used = usage.Used
+	diskInfo.UsedPercent = usage.UsedPercent
+	return &diskInfo, nil
+}
+
+// 获取网络统计信息
+func GetNetIOCountersInfo() ([]NetIOCountersInfo, error) {
+	netInfo := []NetIOCountersInfo{}
+	netStats, err := net.IOCounters(true)
+	if err == nil {
+		for _, netStat := range netStats {
+			netInfo = append(netInfo, NetIOCountersInfo{
+				BytesRecv: netStat.BytesRecv,
+				BytesSent: netStat.BytesSent,
+				Name:      netStat.Name,
+			})
+
+		}
+	}
+	return netInfo, err
+}
+
+// func GetCountDiskInfo() {
+// 	// 获取所有磁盘的总使用情况
+// 	allUsage, err := disk.Usage("/")
+// 	if err != nil {
+// 		fmt.Printf("Error getting total disk usage: %v\n", err)
+// 		return
+// 	}
+
+// 	// 打印所有磁盘的总使用情况
+// 	fmt.Println("Total Disk Usage:")
+// 	fmt.Printf("Total: %d MB\n", allUsage.Total/1024/1024)
+// 	fmt.Printf("Used: %d MB\n", allUsage.Used/1024/1024)
+// 	fmt.Printf("Free: %d MB\n", allUsage.Free/1024/1024)
+// 	fmt.Printf("Usage: %.2f%%\n", allUsage.UsedPercent)
+// }

service/router/system/A_ENTER.go

@@ -11,4 +11,5 @@ func Init(routerGroup *gin.RouterGroup) {
 	InitRegister(routerGroup)
 	InitNoticeRouter(routerGroup)
 	InitModuleConfigRouter(routerGroup)
+	InitMonitorRouter(routerGroup)
 }

service/router/system/monitor.go

@@ -0,0 +1,23 @@
+package system
+
+import (
+	"sun-panel/api/api_v1"
+	"sun-panel/api/api_v1/middleware"
+
+	"github.com/gin-gonic/gin"
+)
+
+func InitMonitorRouter(router *gin.RouterGroup) {
+	api := api_v1.ApiGroupApp.ApiSystem.MonitorApi
+	r := router.Group("", middleware.LoginInterceptor)
+	r.POST("/system/monitor/getDiskMountpoints", api.GetDiskMountpoints)
+
+	// 公开模式
+	rPublic := router.Group("", middleware.PublicModeInterceptor)
+	{
+		rPublic.POST("/system/monitor/getAll", api.GetAll)
+		rPublic.POST("/system/monitor/getCpuState", api.GetCpuState)
+		rPublic.POST("/system/monitor/getDiskStateByPath", api.GetDiskStateByPath)
+		rPublic.POST("/system/monitor/getMemonyState", api.GetMemonyState)
+	}
+}

src/api/system/systemMonitor.ts

@@ -0,0 +1,32 @@
+import { post } from '@/utils/request'
+
+export function getAll<T>() {
+  return post<T>({
+    url: '/system/monitor/getAll',
+  })
+}
+
+export function getCpuState<T>() {
+  return post<T>({
+    url: '/system/monitor/getCpuState',
+  })
+}
+
+export function getDiskStateByPath<T>(path: string) {
+  return post<T>({
+    url: '/system/monitor/getDiskStateByPath',
+    data: { path },
+  })
+}
+
+export function getMemonyState<T>() {
+  return post<T>({
+    url: '/system/monitor/getMemonyState',
+  })
+}
+
+export function getDiskMountpoints<T>() {
+  return post<T>({
+    url: '/system/monitor/getDiskMountpoints',
+  })
+}

src/assets/svg-icons/clarity-hard-disk-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="currentColor" d="M30.86 8.43A2 2 0 0 0 28.94 7H7.06a2 2 0 0 0-1.93 1.47L2.29 20h31.42Z" class="clr-i-solid clr-i-solid-path-1"/><path fill="currentColor" d="M2 22v7a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2v-7Zm28 5h-4v-2h4Z" class="clr-i-solid clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></svg>

src/assets/svg-icons/ion-language.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path fill="#888888" d="m478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4ZM334.83 362L368 281.65L401.17 362Zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9Z"/></svg>

src/assets/svg-icons/material-symbols-memory-alt-rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7 15q.425 0 .713-.288T8 14v-4q0-.425-.288-.712T7 9q-.425 0-.712.288T6 10v4q0 .425.288.713T7 15m5 0q.425 0 .713-.288T13 14v-4q0-.425-.288-.712T12 9q-.425 0-.712.288T11 10v4q0 .425.288.713T12 15m5 0q.425 0 .713-.288T18 14v-4q0-.425-.288-.712T17 9q-.425 0-.712.288T16 10v4q0 .425.288.713T17 15M4 19q-.825 0-1.412-.587T2 17V7q0-.825.588-1.412T4 5h1V4q0-.425.288-.712T6 3q.425 0 .713.288T7 4v1h4V4q0-.425.288-.712T12 3q.425 0 .713.288T13 4v1h4V4q0-.425.288-.712T18 3q.425 0 .713.288T19 4v1h1q.825 0 1.413.588T22 7v10q0 .825-.587 1.413T20 19h-1v1q0 .425-.288.713T18 21q-.425 0-.712-.288T17 20v-1h-4v1q0 .425-.288.713T12 21q-.425 0-.712-.288T11 20v-1H7v1q0 .425-.288.713T6 21q-.425 0-.712-.288T5 20v-1z"/></svg>

src/assets/svg-icons/solar-cpu-bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.181 10.181c.053-.053.148-.119.45-.16c.323-.043.761-.044 1.439-.044h1.86c.678 0 1.116.001 1.438.045c.303.04.398.106.45.16c.054.052.12.147.16.45c.044.322.045.76.045 1.438v1.86c0 .678-.001 1.116-.045 1.438c-.04.303-.106.398-.16.45c-.052.054-.147.12-.45.16c-.322.044-.76.045-1.438.045h-1.86c-.678 0-1.116-.001-1.438-.045c-.303-.04-.398-.106-.45-.16c-.054-.052-.12-.147-.16-.45c-.044-.322-.045-.76-.045-1.438v-1.86c0-.678.001-1.116.045-1.438c.04-.303.106-.398.16-.45"/><path fill="currentColor" fill-rule="evenodd" d="M12 3c.385 0 .698.312.698.698v2.79c.51.002.974.005 1.395.017V3.698a.698.698 0 0 1 1.395 0v2.79a.703.703 0 0 1-.008.108c.936.115 1.585.353 2.078.846c.493.493.731 1.142.846 2.078a.702.702 0 0 1 .108-.008h2.79a.698.698 0 0 1 0 1.395h-2.807c.012.421.016.885.017 1.395h2.79a.698.698 0 0 1 0 1.396h-2.79c-.002.51-.005.974-.017 1.395h2.807a.698.698 0 0 1 0 1.395h-2.79a.703.703 0 0 1-.108-.008c-.115.936-.353 1.585-.846 2.078c-.493.493-1.142.731-2.078.846a.639.639 0 0 1 .008.108v2.79a.698.698 0 0 1-1.395 0v-2.807a53.57 53.57 0 0 1-1.395.017v2.79a.698.698 0 0 1-1.396 0v-2.79a56.16 56.16 0 0 1-1.395-.017v2.807a.698.698 0 0 1-1.395 0v-2.79c0-.037.002-.073.008-.108c-.936-.115-1.585-.353-2.078-.846c-.493-.493-.731-1.142-.846-2.078a.703.703 0 0 1-.108.008h-2.79a.698.698 0 0 1 0-1.395h2.807a56.235 56.235 0 0 1-.017-1.395h-2.79a.698.698 0 0 1 0-1.396h2.79c.002-.51.005-.974.017-1.395H2.698a.698.698 0 0 1 0-1.395h2.79c.037 0 .073.002.108.008c.115-.936.353-1.585.846-2.078c.493-.493 1.142-.731 2.078-.846a.702.702 0 0 1-.008-.108v-2.79a.698.698 0 0 1 1.395 0v2.807a53.57 53.57 0 0 1 1.395-.017v-2.79c0-.386.313-.698.698-.698m-.976 5.581c-.619 0-1.152 0-1.578.058c-.458.061-.896.2-1.252.555c-.355.356-.494.794-.555 1.252c-.058.427-.058.96-.058 1.578v1.952c0 .619 0 1.151.058 1.578c.061.458.2.896.555 1.252c.356.355.794.494 1.252.555c.426.058.96.058 1.578.058h1.952c.619 0 1.151 0 1.578-.058c.458-.061.896-.2 1.252-.555c.355-.356.494-.794.555-1.252c.058-.427.058-.96.058-1.578v-1.952c0-.619 0-1.151-.058-1.578c-.061-.458-.2-.896-.555-1.252c-.356-.355-.794-.494-1.252-.555c-.427-.058-.96-.058-1.578-.058z" clip-rule="evenodd"/></svg>

src/components/apps/About/index.vue

@@ -35,7 +35,7 @@ onMounted(() => {
         </div>
         <div class="text-xl">
           <NGradientText type="info">
-            <a href="https://github.com/hslr-s/sun-panel/releases" class="font-semibold" title="点此查看更新说明" target="_blank">v{{ versionName }}</a>
+            <a href="https://github.com/hslr-s/sun-panel/releases" class="font-semibold" :title="$t('apps.about.viewUpdateLog')" target="_blank">v{{ versionName }}</a>
           </NGradientText>
         </div>
       </div>
@@ -43,19 +43,23 @@ onMounted(() => {
     <NDivider> • </NDivider>
     <div class="flex flex-col items-center justify-center text-base">
       <div>
-        建议反馈：<a href="https://github.com/hslr-s/sun-panel/issues" target="_blank" class="link">Github Issues</a>
+        <a href="https://github.com/hslr-s/sun-panel/releases" target="_blank" class="link">{{ $t('apps.about.checkUpdate') }}</a>
       </div>
 
       <div>
-        QQ交流群：<a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=_I9WIoJn1roIdoaAqelSj9qClLKlXIa1&authKey=GfsQP2GagHnus0jMc7U8Sm6VhWjtsipXUzCHbFwQsGyHMgmYWx6ZbAP%2Bhut%2B4D6N&noverify=0&group_code=276594668" target="_blank" class="link">276594668</a>
+        {{ $t('apps.about.issue') }}<a href="https://github.com/hslr-s/sun-panel/issues" target="_blank" class="link">Github Issues</a>
+      </div>
+
+      <div>
+        {{ $t('apps.about.QQGroup') }}<a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=_I9WIoJn1roIdoaAqelSj9qClLKlXIa1&authKey=GfsQP2GagHnus0jMc7U8Sm6VhWjtsipXUzCHbFwQsGyHMgmYWx6ZbAP%2Bhut%2B4D6N&noverify=0&group_code=276594668" target="_blank" class="link">{{ $t("apps.about.addQQGroupUrl") }}</a>
         |
         <span class="link cursor-pointer" @click="qqGroupQRShow = !qqGroupQRShow">
-          二维码(推荐)
+          {{ $t('apps.about.QR') }}
         </span>
       </div>
 
       <div>
-        开发者：<a href="https://blog.enianteam.com/u/sun/content/11" target="_blank" class="link">红烧猎人</a> | <a href="https://github.com/hslr-s/sun-panel/blob/master/doc/donate.md" target="_blank" class="text-red-600 hover:text-red-900">🧧打赏</a>
+        {{ $t('apps.about.author') }}<a href="https://github.com/hslr-s" target="_blank" class="link">红烧猎人</a> | <a href="https://github.com/hslr-s/sun-panel/blob/master/doc/donate.md" target="_blank" class="text-red-600 hover:text-red-900">{{ $t('apps.about.donate') }}</a>
       </div>
 
       <div class="flex mt-[10px]">

src/components/apps/ImportExport/index.vue

@@ -91,9 +91,9 @@ async function importIcons(): Promise<string | null> {
   }
   catch (error) {
     if (error instanceof Error)
-      return `发生错误: ${error.message}`
+      return `${t('common.failed')}: ${error.message}`
     else
-      return '发生未知错误'
+      return t('common.unknownError')
   }
 }
 
@@ -162,7 +162,7 @@ function handleFileChange(options: { file: UploadFileInfo; fileList: Array<Uploa
         importCheck()
       }
       else {
-        ms.error('异常请重新上传')
+        ms.error(`${t('common.failed')}: ${t('common.repeatLater')}`)
       }
       uploadLoading.value = false
     }
@@ -178,13 +178,13 @@ function importCheck() {
       importObj.value = importJsonString(jsonData.value)
       if (importObj.value) {
         if (!importObj.value.isPassCheckMd5())
-          importWarning.value.push('文件被修改过，谨慎导入')
+          importWarning.value.push(t('apps.exportImport.fileModified'))
 
         if (!importObj.value.isPassCheckConfigVersionOld())
-          importWarning.value.push('配置文件版本过低，但是兼容')
+          importWarning.value.push(t('apps.exportImport.warnConfigFileLow'))
 
         if (!importObj.value.isPassCheckConfigVersionNew())
-          importWarning.value.push('当前软件版本可能过旧，很有可能无法兼容该配置文件，请谨慎导入。推荐将软件更新到新版后再次导入')
+          importWarning.value.push(t('apps.exportImport.softwareVersionLow'))
 
         // （暂时不做）此处可以判断，当前的配置文件是否存在的导入项目（不存在隐藏importItems里面的值）操作变量：importItems
 
@@ -196,24 +196,24 @@ function importCheck() {
     }
     catch (error) {
       if (error instanceof ConfigVersionLowError) {
-        ms.error('配置文件版本过低，无法兼容')
+        ms.error(t('apps.exportImport.errorConfigFileLow'))
-        console.log('配置文件版本过低')
+        console.error('The configuration file version is too low to be compatible')
       }
       else if (error instanceof FormatError) {
-        ms.error('格式不正确，无法导入')
+        ms.error(t('apps.exportImport.errorConfigFileFormat'))
-        console.log('格式不正确')
+        console.error('The format is incorrect and cannot be imported')
       }
     }
   }
   else {
-    ms.error('数据不正确')
+    ms.error(t('apps.exportImport.errorConfigFileFormat'))
   }
 }
 
 // 开始导出
 async function handleStartExport() {
   loading.value = true
-  console.log('要导出的项目', checkedItems.value)
+  // console.log('要导出的项目', checkedItems.value)
   // 获取软件版本号
   const exportResult = exportJson(version.value)
   if (checkedItems.value.includes('icons')) {
@@ -223,7 +223,7 @@ async function handleStartExport() {
     console.log('export icons finish', iconGroups)
   }
 
-  console.log('导出结果')
+  // console.log('导出结果')
 
   jsonData.value = exportResult.string()
   exportResult.exportFile()
@@ -244,14 +244,14 @@ async function handleStartImport() {
 
   loading.value = false
   importRoundModalShow.value = false
-  ms.success(`${t('common.success')}，请手动刷新页面`)
+  ms.success(`${t('common.success')}, ${t('common.refreshPage')}`)
 }
 </script>
 
 <template>
   <div class="pt-2">
     <NAlert type="info" :bordered="false">
-      <p>导入图标配置数据不会清空现有图标数据</p>
+      <p>{{ $t('apps.exportImport.tip') }}</p>
     </NAlert>
     <div class="flex justify-center m-[50px]">
       <div class="m-[10px]">
@@ -266,7 +266,7 @@ async function handleStartImport() {
             <template #icon>
               <SvgIcon icon="fa6:solid-file-import" />
             </template>
-            导入配置
+            {{ $t('apps.exportImport.import') }}
           </NButton>
         </NUpload>
       </div>
@@ -275,13 +275,13 @@ async function handleStartImport() {
           <template #icon>
             <SvgIcon icon="fa6:solid-file-export" />
           </template>
-          导出配置
+          {{ $t('apps.exportImport.export') }}
         </NButton>
       </div>
     </div>
 
     <div class="flex justify-center">
-      <a href="https://hslr-s.github.io/sun-panel-tool-page/#/" target="_blank">浏览器书签转换工具</a>
+      <a href="https://hslr-s.github.io/sun-panel-tool-page/#/" target="_blank">{{ $t('apps.exportImport.transmuteStandard') }}</a>
     </div>
 
     <!-- 调试模式 -->
@@ -310,7 +310,7 @@ async function handleStartImport() {
       </div>
     </div>
 
-    <RoundCardModal v-model:show="importRoundModalShow" style="max-width: 400px;" title="导入">
+    <RoundCardModal v-model:show="importRoundModalShow" style="max-width: 400px;" :title=" $t('apps.exportImport.import')">
       <div v-if="importWarning.length > 0">
         <NAlert :title="$t('common.warning')" type="warning">
           <div v-for="(text, index) in importWarning " :key="index">
@@ -319,39 +319,39 @@ async function handleStartImport() {
         </NAlert>
       </div>
       <NDivider title-placement="left">
-        请选择要导入的配置数据
+        {{ $t('apps.exportImport.selectImportData') }}
       </NDivider>
 
       <NSpace justify="center" style="margin-top: 20px;">
         <NCheckboxGroup v-model:value="checkedItems">
-          <NCheckbox v-if="importItems.includes('icons')" value="icons" label="图标" />
+          <NCheckbox v-if="importItems.includes('icons')" value="icons" :label="$t('apps.exportImport.moduleIcon')" />
-          <NCheckbox v-if="importItems.includes('style')" value="style" label="样式配置" />
+          <NCheckbox v-if="importItems.includes('style')" value="style" :label="$t('apps.exportImport.moduleStyle')" />
         </NCheckboxGroup>
       </NSpace>
       <NSpace justify="center">
         <div class="mt-[50px]">
           <NButton type="success" :disabled="checkedItems.length === 0" :loading="loading" @click="handleStartImport">
-            继续导入
+            {{ $t('common.continue') }}
           </NButton>
         </div>
       </NSpace>
     </RoundCardModal>
 
-    <RoundCardModal v-model:show="exportRoundModalShow" style="max-width: 400px;" title="导出">
+    <RoundCardModal v-model:show="exportRoundModalShow" style="max-width: 400px;" :title=" $t('apps.exportImport.export')">
       <NDivider title-placement="left">
-        请选择要导出的配置数据
+        {{ $t('apps.exportImport.selectExportData') }}
       </NDivider>
 
       <NSpace justify="center" style="margin-top: 20px;">
         <NCheckboxGroup v-model:value="checkedItems">
-          <NCheckbox v-if="importItems.includes('icons')" value="icons" label="图标" />
+          <NCheckbox v-if="importItems.includes('icons')" value="icons" :label="$t('apps.exportImport.moduleIcon')" />
-          <NCheckbox v-if="importItems.includes('style')" value="style" label="样式配置" />
+          <NCheckbox v-if="importItems.includes('style')" value="style" :label="$t('apps.exportImport.moduleStyle')" />
         </NCheckboxGroup>
       </NSpace>
       <NSpace justify="center">
         <div class="mt-[50px]">
           <NButton type="success" :disabled="checkedItems.length === 0" :loading="loading" @click="handleStartExport">
-            继续导出
+            {{ $t('common.continue') }}
           </NButton>
         </div>
       </NSpace>

src/components/apps/ItemGroupManage/index.vue

@@ -5,6 +5,7 @@ import { NButton, NCard, NForm, NFormItem, NInput, useDialog, useMessage } from
 import { VueDraggable } from 'vue-draggable-plus'
 import { deletes, edit, getList, saveSort } from '@/api/panel/itemIconGroup'
 import { RoundCardModal, SvgIcon } from '@/components/common'
+import { t } from '@/locales'
 
 interface EditModalArg {
   show: boolean
@@ -33,7 +34,7 @@ const editModalArg = ref<EditModalArg>({
       {
         required: true,
         trigger: 'blur',
-        message: '必填项',
+        message: t('form.required'),
       },
     ],
   },
@@ -66,26 +67,26 @@ function handleSaveSort() {
   }
   saveSort(saveItems).then(({ code, msg }) => {
     if (code === 0) {
-      ms.success('保存成功')
+      ms.success(t('common.saveSuccess'))
       sortStatus.value = false
     }
     else {
-      ms.error(`保存失败:${msg}`)
+      ms.error(`${t('common.saveFail')}:${msg}`)
     }
   })
 }
 
 function handleDelete(groupInfo: Panel.ItemIconGroup) {
   dialog.warning({
-    title: '警告',
+    title: t('common.warning'),
-    content: `你确定删除此分组[ ${groupInfo.title} ]，删除后此分组应用图标将丢失？`,
+    content: t('apps.itemGroupManage.deleteWarnText', { name: groupInfo.title }),
-    positiveText: '确定',
+    positiveText: t('common.confirm'),
-    negativeText: '取消',
+    negativeText: t('common.cancel'),
     onPositiveClick: () => {
       if (groupInfo.id) {
         deletes([groupInfo.id]).then(({ code, msg }) => {
           if (code !== 0)
-            ms.error(`删除失败:${msg}`)
+            ms.error(t('common.deleteFail'))
           else
             refreshList()
         })
@@ -126,15 +127,15 @@ onMounted(() => {
   <div class="h-full">
     <div class="p-2">
       <NButton type="success" size="small" style="margin-right: 10px;" @click="handleAddGroup">
-        新增分组
+        {{ $t('common.add') }}
       </NButton>
 
       <NButton v-if="!sortStatus" size="small" @click="handleDragSort">
-        排序
+        {{ $t('common.sort') }}
       </NButton>
 
       <NButton v-else type="warning" size="small" @click="handleSaveSort">
-        保存排序
+        {{ $t('common.saveSort') }}
       </NButton>
     </div>
 
@@ -181,8 +182,8 @@ onMounted(() => {
 
     <RoundCardModal v-model:show="editModalArg.show" size="small" type="small" :title="editModalArg.editStatus === 1 ? '添加' : '编辑'" style="width: 400px;">
       <NForm ref="formRef" :model="editModalArg.model" :rules="editModalArg.rules">
-        <NFormItem path="title" label="分组名称">
+        <NFormItem path="title" :label="$t('apps.itemGroupManage.groupName')">
-          <NInput v-model:value="editModalArg.model.title" type="text" :maxlength="20" show-count placeholder="请输入" />
+          <NInput v-model:value="editModalArg.model.title" type="text" :maxlength="20" show-count />
         </NFormItem>
 
         <!-- <NFormItem path="name" label="昵称">
@@ -191,7 +192,7 @@ onMounted(() => {
       </NForm>
       <template #footer>
         <NButton type="success" size="small" class="float-right" @click="handleSaveGroup">
-          确定
+          {{ $t('common.confirm') }}
         </NButton>
       </template>
     </RoundCardModal>

src/components/apps/Style/index.vue

@@ -5,20 +5,22 @@ import { NButton, NCard, NColorPicker, NGrid, NGridItem, NInput, NInputGroup, NP
 import { useAuthStore, usePanelState } from '@/store'
 import { set as setUserConfig } from '@/api/panel/userConfig'
 import { PanelPanelConfigStyleEnum } from '@/enums/panel'
+import { t } from '@/locales'
 
 const authStore = useAuthStore()
 const panelState = usePanelState()
 const ms = useMessage()
+const showWallpaperInput = ref(false)
 
 const isSaveing = ref(false)
 
 const iconTypeOptions = [
   {
-    label: '详情图标',
+    label: t('apps.baseSettings.detailIcon'),
     value: PanelPanelConfigStyleEnum.info,
   },
   {
-    label: '小图标',
+    label: t('apps.baseSettings.smallIcon'),
     value: PanelPanelConfigStyleEnum.icon,
   },
 ]
@@ -61,9 +63,9 @@ function handleUploadBackgroundFinish({
 function uploadCloud() {
   setUserConfig({ panel: panelState.panelConfig }).then((res) => {
     if (res.code === 0)
-      ms.success('配置已保存')
+      ms.success(t('apps.baseSettings.configSaved'))
     else
-      ms.error(`配置已保存${res.msg}`)
+      ms.error(t('apps.baseSettings.configFailed', { message: res.msg }))
   })
 }
 
@@ -82,7 +84,7 @@ function resetPanelConfig() {
 
       <div>
         <div>
-          文本内容
+          {{ $t('apps.baseSettings.textContent') }}
         </div>
         <div class="flex items-center mt-[5px]">
           <NInput v-model:value="panelState.panelConfig.logoText" type="text" show-count :maxlength="20" placeholder="请输入文字" />
@@ -92,35 +94,53 @@ function resetPanelConfig() {
 
     <NCard style="border-radius:10px" class="mt-[10px]" size="small">
       <div class="text-slate-500 mb-[5px] font-bold">
-        时钟
+        {{ $t('apps.baseSettings.clock') }}
       </div>
       <div class="flex items-center mt-[5px]">
-        <span class="mr-[10px]">显示秒</span>
+        <span class="mr-[10px]">{{ $t('apps.baseSettings.clockSecondShow') }}</span>
         <NSwitch v-model:value="panelState.panelConfig.clockShowSecond" />
       </div>
     </NCard>
 
     <NCard style="border-radius:10px" class="mt-[10px]" size="small">
       <div class="text-slate-500 mb-[5px] font-bold">
-        搜索框
+        {{ $t('apps.baseSettings.searchBar') }}
       </div>
       <div class="flex items-center mt-[5px]">
-        <span class="mr-[10px]">显示</span>
+        <span class="mr-[10px]">{{ $t('common.show') }}</span>
         <NSwitch v-model:value="panelState.panelConfig.searchBoxShow" />
       </div>
       <div v-if="panelState.panelConfig.searchBoxShow" class="flex items-center mt-[5px]">
-        <span class="mr-[10px]">允许搜索快捷图标</span>
+        <span class="mr-[10px]">{{ $t('apps.baseSettings.searchBarSearchItem') }}</span>
         <NSwitch v-model:value="panelState.panelConfig.searchBoxSearchIcon" />
       </div>
     </NCard>
 
     <NCard style="border-radius:10px" class="mt-[10px]" size="small">
       <div class="text-slate-500 mb-[5px] font-bold">
-        图标
+        {{ $t('apps.baseSettings.systemMonitorStatus') }}
+      </div>
+      <div class="flex items-center mt-[5px]">
+        <span class="mr-[10px]">{{ $t('common.show') }}</span>
+        <NSwitch v-model:value="panelState.panelConfig.systemMonitorShow" />
+      </div>
+      <div v-if="panelState.panelConfig.systemMonitorShow" class="flex items-center mt-[5px]">
+        <span class="mr-[10px]">{{ $t('apps.baseSettings.showTitle') }}</span>
+        <NSwitch v-model:value="panelState.panelConfig.systemMonitorShowTitle" />
+      </div>
+      <div v-if="panelState.panelConfig.systemMonitorShow" class="flex items-center mt-[5px]">
+        <span class="mr-[10px]">{{ $t('apps.baseSettings.publicVisitModeShow') }}</span>
+        <NSwitch v-model:value="panelState.panelConfig.systemMonitorPublicVisitModeShow" />
+      </div>
+    </NCard>
+
+    <NCard style="border-radius:10px" class="mt-[10px]" size="small">
+      <div class="text-slate-500 mb-[5px] font-bold">
+        {{ $t('common.icon') }}
       </div>
       <div class="mt-[5px]">
         <div>
-          样式
+          {{ $t('common.style') }}
         </div>
         <div class="flex items-center mt-[5px]">
           <NSelect v-model:value="panelState.panelConfig.iconStyle" :options="iconTypeOptions" />
@@ -129,7 +149,7 @@ function resetPanelConfig() {
 
       <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info" class="mt-[5px]">
         <div>
-          隐藏描述信息
+          {{ $t('apps.baseSettings.hideDescription') }}
         </div>
         <div class="flex items-center mt-[5px]">
           <NSwitch v-model:value="panelState.panelConfig.iconTextInfoHideDescription" />
@@ -138,7 +158,7 @@ function resetPanelConfig() {
 
       <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon" class="mt-[5px]">
         <div>
-          隐藏标题
+          {{ $t('apps.baseSettings.hideTitle') }}
         </div>
         <div class="flex items-center mt-[5px]">
           <NSwitch v-model:value="panelState.panelConfig.iconTextIconHideTitle" />
@@ -147,7 +167,7 @@ function resetPanelConfig() {
 
       <div class="mt-[5px]">
         <div>
-          文字颜色
+          {{ $t('common.textColor') }}
         </div>
         <div class="flex items-center mt-[5px]">
           <NColorPicker
@@ -168,7 +188,7 @@ function resetPanelConfig() {
     </NCard>
     <NCard style="border-radius:10px" class="mt-[10px]" size="small">
       <div class="text-slate-500 mb-[5px] font-bold">
-        壁纸
+        {{ $t('apps.baseSettings.wallpaper') }}
       </div>
       <NUpload
         action="/api/file/uploadImg"
@@ -186,32 +206,40 @@ function resetPanelConfig() {
             :style="{ background: `url(${panelState.panelConfig.backgroundImageSrc}) no-repeat`, backgroundSize: 'cover' }"
           >
             <div class="text-shadow text-white">
-              点击上传替换图片或拖拽到框内
+              {{ $t('apps.baseSettings.uploadOrDragText') }}
             </div>
           </div>
         </NUploadDragger>
       </NUpload>
 
+      <div class="flex items-center mt-[5px]">
+        <span class="mr-[10px]">{{ $t('apps.baseSettings.customImageAddress') }}</span>
+        <NSwitch v-model:value="showWallpaperInput" />
+      </div>
+      <div v-if="showWallpaperInput" class="mt-1">
+        <NInput v-model:value="panelState.panelConfig.backgroundImageSrc" type="text" size="small" clearable />
+      </div>
+
       <div class="flex items-center mt-[10px]">
-        <span class="mr-[10px]">模糊</span>
+        <span class="mr-[10px]">{{ $t('apps.baseSettings.vague') }}</span>
         <NSlider v-model:value="panelState.panelConfig.backgroundBlur" class="max-w-[200px]" :step="2" :max="20" />
       </div>
 
       <div class="flex items-center mt-[10px]">
-        <span class="mr-[10px]">遮罩</span>
+        <span class="mr-[10px]">{{ $t('apps.baseSettings.mask') }}</span>
         <NSlider v-model:value="panelState.panelConfig.backgroundMaskNumber" class="max-w-[200px]" :step="0.1" :max="1" />
       </div>
     </NCard>
 
     <NCard style="border-radius:10px" class="mt-[10px]" size="small">
       <div class="text-slate-500 mb-[5px] font-bold">
-        内容区域
+        {{ $t('apps.baseSettings.contentArea') }}
       </div>
 
       <NGrid cols="2">
         <NGridItem span="12 400:12">
           <div class="flex items-center mt-[10px]">
-            <span class="mr-[10px]">最大宽度</span>
+            <span class="mr-[10px]">{{ $t('apps.baseSettings.maxWidth') }}</span>
             <div class="flex">
               <NInputGroup>
                 <NInput v-model:value="panelState.panelConfig.maxWidth" size="small" type="number" :maxlength="10" :style="{ width: '100px' }" placeholder="1200" />
@@ -222,39 +250,51 @@ function resetPanelConfig() {
         </NGridItem>
         <NGridItem span="12 400:12">
           <div class="flex items-center mt-[10px]">
-            <span class="mr-[10px]">左右边距</span>
+            <span class="mr-[10px]">{{ $t('apps.baseSettings.leftRightMargin') }}</span>
             <NSlider v-model:value="panelState.panelConfig.marginX" class="max-w-[200px]" :step="1" :max="100" />
           </div>
         </NGridItem>
         <NGridItem span="12 400:12">
           <div class="flex items-center mt-[10px]">
-            <span class="mr-[10px]">上边距 (%)</span>
+            <span class="mr-[10px]">{{ $t('apps.baseSettings.topMargin') }} (%)</span>
             <NSlider v-model:value="panelState.panelConfig.marginTop" class="max-w-[200px]" :step="1" :max="50" />
           </div>
         </NGridItem>
         <NGridItem span="12 400:6">
           <div class="flex items-center mt-[10px]">
-            <span class="mr-[10px]">下边距 (%)</span>
+            <span class="mr-[10px]">{{ $t('apps.baseSettings.bottomMargin') }} (%)</span>
             <NSlider v-model:value="panelState.panelConfig.marginBottom" class="max-w-[200px]" :step="1" :max="50" />
           </div>
         </NGridItem>
       </NGrid>
     </NCard>
 
+    <NCard style="border-radius:10px" class="mt-[10px]" size="small">
+      <div class="text-slate-500 mb-[5px] font-bold">
+        {{ $t('apps.baseSettings.customFooter') }}
+      </div>
+
+      <NInput
+        v-model:value="panelState.panelConfig.footerHtml"
+        type="textarea"
+        clearable
+      />
+    </NCard>
+
     <NCard style="border-radius:10px" class="mt-[10px]" size="small">
       <NPopconfirm
         @positive-click="resetPanelConfig"
       >
         <template #trigger>
           <NButton size="small" quaternary type="error">
-            重置
+            {{ $t('common.reset') }}
           </NButton>
         </template>
-        确定要重置这些样式吗？
+        {{ $t('apps.baseSettings.resetWarnText') }}
       </NPopconfirm>
 
       <NButton size="small" quaternary type="success" class="ml-[10px]" @click="uploadCloud">
-        立即保存
+        {{ $t('common.save') }}
       </NButton>
     </NCard>
   </div>

src/components/apps/UserInfo/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { FormInst, FormRules } from 'naive-ui'
-import { NButton, NCard, NDivider, NForm, NFormItem, NInput, useDialog, useMessage } from 'naive-ui'
+import { NButton, NCard, NDivider, NForm, NFormItem, NInput, NSelect, useDialog, useMessage } from 'naive-ui'
 import { ref } from 'vue'
-import { useAuthStore, usePanelState, useUserStore } from '@/store'
+import { useAppStore, useAuthStore, usePanelState, useUserStore } from '@/store'
+import { languageOptions } from '@/utils/defaultData'
+import type { Language } from '@/store/modules/app/helper'
 import { logout } from '@/api'
-import { router } from '@/router'
 import { RoundCardModal, SvgIcon } from '@/components/common/'
 import { updateInfo, updatePassword } from '@/api/system/user'
 import { updateLocalUserInfo } from '@/utils/cmn'
@@ -12,14 +13,21 @@ import { t } from '@/locales'
 
 const userStore = useUserStore()
 const authStore = useAuthStore()
+const appStore = useAppStore()
 const panelState = usePanelState()
 const ms = useMessage()
 const dialog = useDialog()
 
+const languageValue = ref(appStore.language)
+// const themeValue = ref(appStore.theme)
 const nickName = ref(authStore.userInfo?.name || '')
 const isEditNickNameStatus = ref(false)
 const formRef = ref<FormInst | null>(null)
-
+// const themeOptions: { label: string; key: string; value: Theme }[] = [
+//   { label: t('apps.userInfo.themeStyle.dark'), key: 'dark', value: 'dark' },
+//   { label: t('apps.userInfo.themeStyle.light'), key: 'light', value: 'light' },
+//   { label: t('apps.userInfo.themeStyle.auto'), key: 'Auto', value: 'auto' },
+// ]
 const updatePasswordModalState = ref({
   show: false,
   loading: false,
@@ -59,8 +67,9 @@ async function logoutApi() {
   userStore.resetUserInfo()
   authStore.removeToken()
   panelState.removeState()
+  appStore.removeToken()
   ms.success(t('settingUserInfo.logoutSuccess'))
-  router.push({ path: '/login' })
+  // router.push({ path: '/login' })
   location.reload()// 强制刷新一下页面
 }
 
@@ -122,6 +131,18 @@ function handleLogout() {
     },
   })
 }
+
+function handleChangeLanuage(value: Language) {
+  languageValue.value = value
+  appStore.setLanguage(value)
+  location.reload()
+}
+
+// function handleChangeTheme(value: Theme) {
+//   themeValue.value = value
+//   appStore.setTheme(value)
+//   // location.reload()
+// }
 </script>
 
 <template>
@@ -157,6 +178,24 @@ function handleLogout() {
         </div>
       </div>
 
+      <div class="mt-[10px]">
+        <div class="text-slate-500 font-bold">
+          {{ $t('common.language') }}
+        </div>
+        <div class="max-w-[200px]">
+          <NSelect v-model:value="languageValue" :options="languageOptions" @update-value="handleChangeLanuage" />
+        </div>
+      </div>
+
+      <!-- <div class="mt-[10px]">
+        <div class="text-slate-500 font-bold">
+          {{ $t('apps.userInfo.theme') }}
+        </div>
+        <div class="max-w-[200px]">
+          <NSelect v-model:value="themeValue" :options="themeOptions" @update-value="handleChangeTheme" />
+        </div>
+      </div> -->
+
       <NDivider style="margin: 10px 0;" dashed />
       <div>
         <NButton size="small" text type="info" @click="updatePasswordModalState.show = !updatePasswordModalState.show">

src/components/common/ItemCard/index.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PanelPanelConfigStyleEnum } from '@/enums'
+
+interface Prop {
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  class?: string
+  backgroundColor?: string
+  iconTextIconHideTitle?: boolean // 隐藏小图标标题
+  iconTextColor?: string // 小图标文字颜色
+  iconText?: string // 小图标文字
+}
+
+const props = withDefaults(defineProps<Prop>(), {})
+
+const defaultBackground = '#2a2a2a6b'
+const propClass = ref(props.class)
+</script>
+
+<template>
+  <div class="w-full">
+    <!-- 详情图标 -->
+    <div
+      v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info"
+      class="w-full rounded-2xl transition-all duration-200 flex"
+      :class="propClass"
+      :style="{ backgroundColor: backgroundColor ?? defaultBackground }"
+    >
+      <slot name="info" />
+    </div>
+
+    <!-- 极简图标（APP） -->
+    <div
+      v-if="cardTypeStyle === PanelPanelConfigStyleEnum.icon"
+    >
+      <div
+        class="overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto transition-all duration-200"
+        :class="propClass"
+        :style="{ backgroundColor: backgroundColor ?? defaultBackground }"
+      >
+        <slot name="small" />
+      </div>
+
+      <div
+        v-if="!iconTextIconHideTitle"
+        class="text-center app-icon-text-shadow cursor-pointer mt-[2px]"
+        :style="{ color: iconTextColor }"
+      >
+        {{ iconText }}
+      </div>
+    </div>
+  </div>
+</template>

src/components/common/index.ts

@@ -8,6 +8,7 @@ import RoundCardModal from './RoundCardModal/index.vue'
 import SvgIconOnline from './SvgIconOnline/index.vue'
 import JsonImportExport from './JsonImportExport/index.vue'
 import AppLoader from './AppLoader/index.vue'
+import ItemCard from './ItemCard/index.vue'
 
 export {
   Verification,
@@ -20,4 +21,5 @@ export {
   SvgIconOnline,
   JsonImportExport,
   AppLoader,
+  ItemCard,
 }

src/components/deskModule/Clock/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { t } from '@/locales'
 
 const props = defineProps<{
   hideSecond?: boolean
@@ -35,7 +36,15 @@ function updateCurrentDate() {
   const month = now.getMonth() + 1 // 月份从0开始，所以要加1
   // const year = now.getFullYear()
 
-  const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六']
+  const daysOfWeek = [
+    t('deskModule.clock.sun'),
+    t('deskModule.clock.mon'),
+    t('deskModule.clock.tue'),
+    t('deskModule.clock.wed'),
+    t('deskModule.clock.thu'),
+    t('deskModule.clock.fri'),
+    t('deskModule.clock.sat'),
+  ]
   // const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
   currentDate.value.week = daysOfWeek[now.getDay()]
   currentDate.value.date = `${month}-${day}`
@@ -63,11 +72,11 @@ onBeforeUnmount(() => {
       {{ currentDate.time }}
     </span>
     <div class="hidden sm:hidden md:block">
-      <span>
+      <span class="mr-1">
         {{ currentDate.date }}
       </span>
       <span>
-        星期{{ currentDate.week }}
+        {{ currentDate.week }}
       </span>
     </div>
   </div>

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import GenericProgress from '../components/GenericProgress/index.vue'
+import { getCpuState } from '@/api/system/systemMonitor'
+import type { PanelPanelConfigStyleEnum } from '@/enums'
+
+interface Prop {
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  refreshInterval: number
+  textColor: string
+  progressColor: string
+  progressRailColor: string
+}
+
+const props = defineProps<Prop>()
+let timer: NodeJS.Timer
+const cpuState = ref<SystemMonitor.CPUInfo | null>(null)
+
+function correctionNumber(v: number, keepNum = 2): number {
+  return v === 0 ? 0 : Number(v.toFixed(keepNum))
+}
+
+async function getData() {
+  try {
+    const { data, code } = await getCpuState<SystemMonitor.CPUInfo>()
+    if (code === 0)
+      cpuState.value = data
+  }
+  catch (error) {
+
+  }
+}
+
+onMounted(() => {
+  getData()
+  timer = setInterval(() => {
+    getData()
+  }, (!props.refreshInterval || props.refreshInterval <= 2000) ? 2000 : props.refreshInterval)
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <GenericProgress
+      :progress-color="progressColor"
+      :progress-rail-color="progressRailColor"
+      :progress-height="5"
+      :percentage="correctionNumber(cpuState?.usages[0] || 0)"
+      :card-type-style="cardTypeStyle"
+      :info-card-right-text="`${correctionNumber(cpuState?.usages[0] || 0)}%`"
+      info-card-left-text="CPU"
+      :text-color="textColor"
+    />
+  </div>
+</template>

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import GenericProgress from '../components/GenericProgress/index.vue'
+import type { PanelPanelConfigStyleEnum } from '@/enums'
+import { bytesToSize } from '@/utils/cmn'
+import { getDiskStateByPath } from '@/api/system/systemMonitor'
+
+interface Prop {
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  refreshInterval: number
+  textColor: string
+  progressColor: string
+  progressRailColor: string
+  path: string
+}
+
+const props = defineProps<Prop>()
+let timer: NodeJS.Timer
+const diskState = ref<SystemMonitor.DiskInfo | null>(null)
+
+function correctionNumber(v: number, keepNum = 2): number {
+  return v === 0 ? 0 : Number(v.toFixed(keepNum))
+}
+
+function formatdiskSize(v: number): string {
+  return bytesToSize(v)
+}
+
+function formatdiskToByte(v: number): number {
+  return v
+}
+
+async function getData() {
+  try {
+    const { data, code } = await getDiskStateByPath<SystemMonitor.DiskInfo>(props.path)
+    if (code === 0)
+      diskState.value = data
+  }
+  catch (error) {
+
+  }
+}
+
+onMounted(() => {
+  getData()
+  timer = setInterval(() => {
+    getData()
+  }, (!props.refreshInterval || props.refreshInterval <= 2000) ? 2000 : props.refreshInterval)
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <GenericProgress
+      :progress-color="progressColor"
+      :progress-rail-color="progressRailColor"
+      :progress-height="5"
+      :percentage="correctionNumber(diskState?.usedPercent || 0)"
+      :card-type-style="cardTypeStyle"
+      :info-card-right-text="`${formatdiskSize(formatdiskToByte(diskState?.total || 0))}/${formatdiskSize(formatdiskToByte(diskState?.free || 0))}`"
+      :info-card-left-text="diskState?.mountpoint"
+      :text-color="textColor"
+    />
+  </div>
+</template>

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import GenericProgress from '../components/GenericProgress/index.vue'
+import { getMemonyState } from '@/api/system/systemMonitor'
+import type { PanelPanelConfigStyleEnum } from '@/enums'
+import { bytesToSize } from '@/utils/cmn'
+
+interface Prop {
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  refreshInterval: number
+  textColor: string
+  progressColor: string
+  progressRailColor: string
+}
+
+const props = defineProps<Prop>()
+let timer: NodeJS.Timer
+const memoryState = ref<SystemMonitor.MemoryInfo | null>(null)
+
+function correctionNumber(v: number, keepNum = 2): number {
+  return v === 0 ? 0 : Number(v.toFixed(keepNum))
+}
+
+function formatMemorySize(v: number): string {
+  return bytesToSize(v)
+}
+
+async function getData() {
+  try {
+    const { data, code } = await getMemonyState<SystemMonitor.MemoryInfo>()
+    if (code === 0)
+      memoryState.value = data
+  }
+  catch (error) {
+
+  }
+}
+
+onMounted(() => {
+  getData()
+  timer = setInterval(() => {
+    getData()
+  }, (!props.refreshInterval || props.refreshInterval <= 2000) ? 2000 : props.refreshInterval)
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <GenericProgress
+      :progress-color="progressColor"
+      :progress-rail-color="progressRailColor"
+      :progress-height="5"
+      :percentage="correctionNumber(memoryState?.usedPercent || 0)"
+      :card-type-style="cardTypeStyle"
+      :info-card-right-text="`${formatMemorySize(memoryState?.total || 0)}/${formatMemorySize(memoryState?.free || 0)}`"
+      info-card-left-text="RAM"
+      :text-color="textColor"
+    />
+  </div>
+</template>

src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { MonitorType } from '../typings'
+import type { CardStyle } from '../typings'
+import GenericMonitorCard from '../components/GenericMonitorCard/index.vue'
+import CardCPU from './CPU.vue'
+import Memory from './Memory.vue'
+import Disk from './Disk.vue'
+import { SvgIcon } from '@/components/common'
+import { PanelPanelConfigStyleEnum } from '@/enums'
+
+interface Prop {
+  extendParam?: any
+  iconTextColor?: string
+  iconTextIconHideTitle: boolean
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  monitorType: string
+  cardStyle: CardStyle
+}
+
+const props = withDefaults(defineProps<Prop>(), {})
+
+const iconText = computed(() => {
+  switch (props.monitorType) {
+    case MonitorType.cpu:
+      return 'CPU'
+    case MonitorType.disk:
+      return props.extendParam.path
+    case MonitorType.memory:
+      return 'RAM'
+  }
+  return ''
+})
+const refreshInterval = 5000
+</script>
+
+<template>
+  <div class="w-full">
+    <GenericMonitorCard
+      :icon-text-icon-hide-title="false"
+      :card-type-style="cardTypeStyle"
+      :icon-text="iconText"
+      :icon-text-color="iconTextColor"
+      :background-color="extendParam.backgroundColor"
+      class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
+    >
+      <template #icon>
+        <!-- 图标 -->
+        <div class="w-[60px] h-[70px]">
+          <div class="w-[60px] h-full flex items-center justify-center text-white">
+            <SvgIcon v-if="monitorType === MonitorType.cpu" icon="solar-cpu-bold" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
+            <SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
+            <SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="{ color: extendParam.color }" style="width:35px;height:35px" />
+          </div>
+        </div>
+      </template>
+      <template #info>
+        <!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
+        <div
+          class=" w-full text-white flex items-center"
+        >
+          <CardCPU
+            v-if="monitorType === MonitorType.cpu"
+            :card-type-style="PanelPanelConfigStyleEnum.info"
+            :progress-color="extendParam?.progressColor"
+            :progress-rail-color="extendParam?.progressRailColor"
+            :text-color="extendParam?.color"
+            :refresh-interval="refreshInterval"
+          />
+          <Memory
+            v-else-if="monitorType === MonitorType.memory"
+            :card-type-style="PanelPanelConfigStyleEnum.info"
+            :progress-color="extendParam?.progressColor"
+            :progress-rail-color="extendParam?.progressRailColor"
+            :text-color="extendParam?.color"
+            :refresh-interval="refreshInterval"
+          />
+          <Disk
+            v-else-if="monitorType === MonitorType.disk"
+            :card-type-style="PanelPanelConfigStyleEnum.info"
+            :progress-color="extendParam?.progressColor"
+            :progress-rail-color="extendParam?.progressRailColor"
+            :text-color="extendParam?.color"
+            :path="extendParam?.path"
+            :refresh-interval="refreshInterval"
+          />
+        </div>
+      </template>
+      <template #small>
+        <CardCPU
+          v-if="monitorType === MonitorType.cpu"
+          :card-type-style="PanelPanelConfigStyleEnum.icon"
+          :progress-color="extendParam?.progressColor"
+          :progress-rail-color="extendParam?.progressRailColor"
+          :text-color="extendParam?.color"
+          :refresh-interval="refreshInterval"
+        />
+        <Memory
+          v-else-if="monitorType === MonitorType.memory"
+          :card-type-style="PanelPanelConfigStyleEnum.icon"
+          :progress-color="extendParam?.progressColor"
+          :progress-rail-color="extendParam?.progressRailColor"
+          :text-color="extendParam?.color"
+          :refresh-interval="refreshInterval"
+        />
+        <Disk
+          v-else-if="monitorType === MonitorType.disk"
+          :card-type-style="PanelPanelConfigStyleEnum.icon"
+          :progress-color="extendParam?.progressColor"
+          :progress-rail-color="extendParam?.progressRailColor"
+          :text-color="extendParam?.color"
+          :path="extendParam?.path"
+          :refresh-interval="refreshInterval"
+        />
+      </template>
+    </GenericMonitorCard>
+  </div>
+</template>

src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import type { FormInst, FormRules } from 'naive-ui'
+import { NColorPicker, NForm, NFormItem, NSelect } from 'naive-ui'
+import type { DiskExtendParam } from '../../typings'
+import GenericMonitorCard from '../../components/GenericMonitorCard/index.vue'
+import GenericProgress from '../../components/GenericProgress/index.vue'
+import { PanelPanelConfigStyleEnum } from '@/enums'
+import { getDiskMountpoints } from '@/api/system/systemMonitor'
+import { defautSwatchesBackground } from '@/utils/defaultData'
+import { t } from '@/locales'
+
+interface Emit {
+  (e: 'update:diskExtendParam', visible: DiskExtendParam): void
+}
+
+const props = defineProps<{
+  diskExtendParam: DiskExtendParam
+}>()
+const emit = defineEmits<Emit>()
+const formRef = ref<FormInst | null>(null)
+const rules: FormRules = {
+  path: {
+    required: true,
+    message: t('form.required'),
+    trigger: 'blur',
+  },
+}
+
+const mountPointList = ref<{
+  label: string
+  value: string
+}[]>([])
+
+const extendParam = computed({
+  get: () => props.diskExtendParam,
+  set: (visible) => {
+    emit('update:diskExtendParam', visible)
+  },
+})
+
+async function getMountPointList() {
+  try {
+    const { data } = await getDiskMountpoints<SystemMonitor.Mountpoint[]>()
+    mountPointList.value = []
+    for (let i = 0; i < data.length; i++) {
+      const element = data[i]
+      if (i === 0 && !extendParam.value.path)
+        extendParam.value.path = element.mountpoint
+
+      mountPointList.value.push({
+        label: element.mountpoint,
+        value: element.mountpoint,
+      })
+    }
+  }
+  catch (error) {
+
+  }
+}
+
+onMounted(() => {
+  getMountPointList()
+})
+
+defineExpose({
+  async verification(): Promise<boolean> {
+    try {
+      const errors = await formRef.value?.validate()
+
+      if (!errors) {
+        return Promise.resolve(true)
+      }
+      else {
+        console.log(errors)
+        return Promise.resolve(false)
+      }
+    }
+    catch (error) {
+      console.error('An error occurred during validation:', error)
+      return Promise.resolve(false)
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <!-- <div>{{ diskExtendParam }}</div> -->
+    <div class="flex mb-5 justify-center transparent-grid p-2 rounded-xl border">
+      <div class="w-[200px]">
+        <GenericMonitorCard
+          icon-text-icon-hide-title
+          :card-type-style="PanelPanelConfigStyleEnum.info"
+          icon="solar-cpu-bold"
+          :background-color="extendParam.backgroundColor"
+          :text-color="extendParam.color"
+        >
+          <template #info>
+            <GenericProgress
+              :progress-color="extendParam.progressColor"
+              :progress-rail-color="extendParam.progressRailColor"
+              :percentage="50"
+              :progress-height="5"
+              info-card-left-text="DEMO"
+              info-card-right-text="TEXT"
+              :text-color="extendParam.color"
+              :card-type-style="PanelPanelConfigStyleEnum.info"
+            />
+          </template>
+        </GenericMonitorCard>
+      </div>
+
+      <div class="w-[80px] ml-2">
+        <GenericMonitorCard
+          icon-text-icon-hide-title
+          :card-type-style="PanelPanelConfigStyleEnum.icon"
+          icon="solar-cpu-bold"
+          :background-color="extendParam.backgroundColor"
+          :icon-text-color="extendParam.color"
+        >
+          <template #small>
+            <GenericProgress
+              :progress-color="extendParam.progressColor"
+              :progress-rail-color="extendParam.progressRailColor"
+              :percentage="50"
+              :text-color="extendParam.color"
+              :card-type-style="PanelPanelConfigStyleEnum.icon"
+            />
+          </template>
+        </GenericMonitorCard>
+      </div>
+    </div>
+
+    <NForm ref="formRef" v-model="extendParam" :model="extendParam" :rules="rules">
+      <NFormItem :label="$t('deskModule.systemMonitor.diskMountPoint')" path="path">
+        <NSelect v-model:value="extendParam.path" size="small" :options="mountPointList" />
+      </NFormItem>
+      <NFormItem :label="$t('deskModule.systemMonitor.progressColor')">
+        <NColorPicker v-model:value="extendParam.progressColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem :label="$t('deskModule.systemMonitor.progressRailColor')">
+        <NColorPicker v-model:value="extendParam.progressRailColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem :label="$t('common.textColor')">
+        <NColorPicker v-model:value="extendParam.color" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem :label="$t('common.backgroundColor')">
+        <NColorPicker v-model:value="extendParam.backgroundColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
+      </NFormItem>
+    </NForm>
+  </div>
+</template>
+
+<style>
+.transparent-grid {
+    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
+                      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
+    background-size: 16px 16px;
+    background-position: 0 0, 8px 8px;
+    background-color: #e2e8f0;
+}
+</style>

src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NColorPicker, NForm, NFormItem } from 'naive-ui'
+import type { GenericProgressStyleExtendParam } from '../../typings'
+import GenericMonitorCard from '../../components/GenericMonitorCard/index.vue'
+import GenericProgress from '../../components/GenericProgress/index.vue'
+import { PanelPanelConfigStyleEnum } from '@/enums'
+import { defautSwatchesBackground } from '@/utils/defaultData'
+
+interface Emit {
+  (e: 'update:genericProgressStyleExtendParam', visible: GenericProgressStyleExtendParam): void
+}
+
+const props = defineProps<{
+  genericProgressStyleExtendParam: GenericProgressStyleExtendParam
+}>()
+const emit = defineEmits<Emit>()
+
+const data = computed({
+  get: () => props.genericProgressStyleExtendParam,
+  set: (visible) => {
+    emit('update:genericProgressStyleExtendParam', visible)
+  },
+})
+</script>
+
+<template>
+  <div>
+    <!-- <div>{{ genericProgressStyleExtendParam }}</div>
+    <div>{{ data }}</div> -->
+    <div class="flex mb-5 justify-center transparent-grid p-2 rounded-xl border">
+      <div class="w-[200px]">
+        <GenericMonitorCard
+          icon-text-icon-hide-title
+          :card-type-style="PanelPanelConfigStyleEnum.info"
+          icon="solar-cpu-bold"
+          :background-color="data.backgroundColor"
+          :text-color="data.color"
+        >
+          <template #info>
+            <GenericProgress
+              :progress-color="data.progressColor"
+              :progress-rail-color="data.progressRailColor"
+              :percentage="50"
+              :progress-height="5"
+              info-card-left-text="DEMO"
+              info-card-right-text="TEXT"
+              :text-color="data.color"
+              :card-type-style="PanelPanelConfigStyleEnum.info"
+            />
+          </template>
+        </GenericMonitorCard>
+      </div>
+
+      <div class="w-[80px] ml-2">
+        <GenericMonitorCard
+          icon-text-icon-hide-title
+          :card-type-style="PanelPanelConfigStyleEnum.icon"
+          icon="solar-cpu-bold"
+          :background-color="data.backgroundColor"
+          :icon-text-color="data.color"
+        >
+          <template #small>
+            <GenericProgress
+              :progress-color="data.progressColor"
+              :progress-rail-color="data.progressRailColor"
+              :percentage="50"
+              :text-color="data.color"
+              :card-type-style="PanelPanelConfigStyleEnum.icon"
+            />
+          </template>
+        </GenericMonitorCard>
+      </div>
+    </div>
+
+    <NForm ref="formRef" v-model="data">
+      <NFormItem :label="$t('deskModule.systemMonitor.progressColor')">
+        <NColorPicker v-model:value="data.progressColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem :label="$t('deskModule.systemMonitor.progressRailColor')">
+        <NColorPicker v-model:value="data.progressRailColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem :label="$t('common.textColor')">
+        <NColorPicker v-model:value="data.color" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem :label="$t('common.backgroundColor')">
+        <NColorPicker v-model:value="data.backgroundColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
+      </NFormItem>
+    </NForm>
+  </div>
+</template>
+
+<style>
+.transparent-grid {
+    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
+                      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
+    background-size: 16px 16px;
+    background-position: 0 0, 8px 8px;
+    background-color: #e2e8f0;
+}
+</style>

src/components/deskModule/SystemMonitor/Edit/index.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, ref, watch } from 'vue'
+import { NButton, NModal, NTabPane, NTabs, useMessage } from 'naive-ui'
+import { MonitorType } from '../typings'
+import type { DiskExtendParam, GenericProgressStyleExtendParam, MonitorData } from '../typings'
+import { add, saveByIndex } from '../common'
+
+import GenericProgressStyleEditor from './GenericProgressStyleEditor/index.vue'
+import DiskEditor from './DiskEditor/index.vue'
+import { t } from '@/locales'
+
+interface Props {
+  visible: boolean
+  monitorData: MonitorData | null
+  index: number | null
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+const DiskEditorRef = ref<InstanceType<typeof DiskEditor>>()
+
+// 默认通用的进度扩展参数
+const defaultGenericProgressStyleExtendParam: GenericProgressStyleExtendParam = {
+  progressColor: '#fff',
+  progressRailColor: '#CFCFCFA8',
+  color: '#fff',
+  backgroundColor: '#2a2a2a6b',
+}
+
+const defaultDiskExtendParam: DiskExtendParam = {
+  progressColor: '#fff',
+  progressRailColor: '#CFCFCFA8',
+  color: '#fff',
+  backgroundColor: '#2a2a2a6b',
+  path: '',
+}
+
+const defaultMonitorData: MonitorData = {
+  extendParam: defaultGenericProgressStyleExtendParam,
+  monitorType: MonitorType.cpu,
+}
+
+const active = ref<string>(MonitorType.cpu)
+const currentMonitorData = ref<MonitorData>(props.monitorData || { ...defaultMonitorData })
+const currentGenericProgressStyleExtendParam = ref<GenericProgressStyleExtendParam>({ ...defaultGenericProgressStyleExtendParam })
+const currentDiskExtendParam = ref<DiskExtendParam>({ ...defaultDiskExtendParam })
+
+const ms = useMessage()
+const submitLoading = ref(false)
+
+interface Emit {
+  (e: 'update:visible', visible: boolean): void
+  (e: 'done', item: boolean): void
+}
+
+// 更新值父组件传来的值
+const show = computed({
+  get: () => props.visible,
+  set: (visible: boolean) => {
+    emit('update:visible', visible)
+  },
+})
+
+watch(() => props.visible, (value) => {
+  active.value = props.monitorData?.monitorType || MonitorType.cpu
+  if (props.monitorData?.monitorType === MonitorType.cpu || props.monitorData?.monitorType === MonitorType.memory)
+    currentGenericProgressStyleExtendParam.value = { ...props.monitorData?.extendParam }
+  else if (props.monitorData?.monitorType === MonitorType.disk)
+    currentDiskExtendParam.value = { ...props.monitorData?.extendParam }
+
+  if (!value)
+    handleResetExtendParam()
+})
+
+function handleResetExtendParam() {
+  currentGenericProgressStyleExtendParam.value = { ...defaultGenericProgressStyleExtendParam }
+  currentDiskExtendParam.value = { ...defaultDiskExtendParam }
+}
+
+// 保存提交
+async function handleSubmit() {
+  let verificationRes = true
+  currentMonitorData.value.monitorType = active.value as MonitorType
+  if (currentMonitorData.value.monitorType === MonitorType.cpu || currentMonitorData.value.monitorType === MonitorType.memory) {
+    currentMonitorData.value.extendParam = currentGenericProgressStyleExtendParam
+  }
+  else if (currentMonitorData.value.monitorType === MonitorType.disk) {
+    currentMonitorData.value.extendParam = currentDiskExtendParam
+    const res = await DiskEditorRef.value?.verification()
+    if (res !== undefined)
+      verificationRes = res
+  }
+
+  // console.log('保存', currentMonitorData.value.extendParam)
+  if (!verificationRes)
+    return
+
+  if (props.index !== null) {
+    const res = await saveByIndex(props.index, currentMonitorData.value)
+    if (res) {
+      show.value = false
+      emit('done', true)
+    }
+    else {
+      ms.error(t('common.saveFail'))
+    }
+  }
+  else {
+    const res = await add(currentMonitorData.value)
+    if (res) {
+      show.value = false
+      emit('done', true)
+    }
+    else {
+      ms.error(t('common.saveFail'))
+    }
+  }
+}
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="monitorData ? t('common.edit') : t('common.add')">
+    <!-- 选择监视器 -->
+    <!-- <div>
+      {{ JSON.stringify(currentGenericProgressStyleExtendParam) }}
+      {{ JSON.stringify(currentDiskExtendParam) }}
+    </div> -->
+    <NTabs v-model:value="active" type="segment">
+      <NTabPane :name="MonitorType.cpu" :tab="$t('deskModule.systemMonitor.cpuState')">
+        <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
+      </NTabPane>
+      <NTabPane :name="MonitorType.memory" :tab="$t('deskModule.systemMonitor.memoryState')">
+        <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
+      </NTabPane>
+      <NTabPane :name="MonitorType.disk" :tab="$t('deskModule.systemMonitor.diskState')">
+        <DiskEditor ref="DiskEditorRef" v-model:disk-extend-param="currentDiskExtendParam" />
+      </NTabPane>
+    </NTabs>
+    <NButton @click="handleResetExtendParam">
+      {{ t('common.reset') }}
+    </NButton>
+    <template #footer>
+      <NButton type="success" :loading="submitLoading" style="float: right;" @click="handleSubmit">
+        {{ t('common.confirm') }}
+      </NButton>
+    </template>
+  </NModal>
+</template>

src/components/deskModule/SystemMonitor/common.ts

@@ -0,0 +1,88 @@
+import type { MonitorData } from './typings'
+import { useModuleConfig } from '@/store/modules'
+
+const modelName = 'systemMonitor'
+const moduleConfig = useModuleConfig()
+
+export async function saveAll(value: MonitorData[]) {
+  return await moduleConfig.saveToCloud(modelName, { list: value })
+}
+
+export async function getAll(): Promise< MonitorData[]> {
+  const res = await moduleConfig.getValueByNameFromCloud<{ list: MonitorData[] }>(modelName)
+  if (res.code === 0 && res.data && res.data.list)
+    return res.data.list
+  return []
+}
+
+export async function add(value: MonitorData): Promise<boolean> {
+  let success = true
+  let newData: MonitorData[] = []
+  try {
+    const data = await getAll()
+    if (data)
+      newData = data
+
+    newData.push(value)
+    const res = await saveAll(newData)
+    if (res.code !== 0)
+      console.log('save failed', res)
+  }
+  catch (error) {
+    console.error(error)
+    success = false
+  }
+  return success
+}
+
+export async function saveByIndex(index: number | undefined, value: MonitorData): Promise<boolean> {
+  if (!index)
+    index = 0
+
+  let success = true
+  let newData: MonitorData[] = []
+  try {
+    const data = await getAll()
+    if (data)
+      newData = data
+
+    newData[index] = value
+    const res = await saveAll(newData)
+    if (res.code !== 0)
+      console.log('save failed', res)
+  }
+  catch (error) {
+    console.error(error)
+    success = false
+  }
+  return success
+}
+
+export async function getByIndex(index: number): Promise<MonitorData | null> {
+  try {
+    const data = await getAll()
+    if (data[index])
+      return data[index]
+  }
+  catch (error) {
+
+  }
+
+  return null
+}
+
+export async function deleteByIndex(index: number): Promise<boolean> {
+  let success = true
+  try {
+    const data = await getAll()
+    if (data[index])
+      data.splice(index, 1)
+    await saveAll(data)
+  }
+  catch (error) {
+    success = false
+    console.error(error)
+  }
+
+  return success
+}

src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// -------------------
+// 系统监控图标临时使用（与 AppIcon/index.vue 一致）
+// 如果确定这种方案将 AppIcon/index.vue 封装成通用组件
+// -------------------
+
+import { ref } from 'vue'
+import { ItemCard, SvgIcon } from '@/components/common'
+import type { PanelPanelConfigStyleEnum } from '@/enums'
+
+interface Prop {
+//   size?: number // 默认70
+  extendParam?: any
+  iconTextColor?: string
+  iconTextIconHideTitle?: boolean
+  iconText?: string
+  textColor?: string
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  // monitorType: string
+  icon?: string
+  class?: string
+  backgroundColor?: string
+}
+
+const props = withDefaults(defineProps<Prop>(), {})
+const propClass = ref(props.class)
+</script>
+
+<template>
+  <div class="w-full">
+    <ItemCard
+      :card-type-style="cardTypeStyle"
+      :icon-text="iconText"
+      :icon-text-color="iconTextColor"
+      :class="propClass"
+      :background-color="backgroundColor"
+      :icon-text-icon-hide-title="iconTextIconHideTitle"
+    >
+      <template #info>
+        <!-- 图标 -->
+        <div class="w-[60px] h-[70px]">
+          <div class="w-[60px] h-full flex items-center justify-center text-white">
+            <slot name="icon">
+              <SvgIcon :icon="icon ?? ''" style="width: 35px;height: 35px;" :style="{ color: textColor }" />
+            </slot>
+          </div>
+        </div>
+
+        <div
+          class=" w-full text-white flex items-center"
+          :style=" { maxWidth: 'calc(100% - 80px)' }"
+        >
+          <slot name="info" />
+        </div>
+      </template>
+      <template #small>
+        <slot name="small" />
+      </template>
+    </ItemCard>
+  </div>
+</template>

src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { NProgress } from 'naive-ui'
+import { PanelPanelConfigStyleEnum } from '@/enums'
+
+interface Prop {
+  textColor: string
+  progressColor: string
+  progressRailColor: string
+  progressHeight?: number
+  percentage: number
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  infoCardLeftText?: string
+  infoCardRightText?: string
+}
+
+defineProps<Prop>()
+</script>
+
+<template>
+  <div class="w-full">
+    <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
+      <div class="mb-1 text-xs" :style="{ color: textColor }">
+        <span>
+          {{ infoCardLeftText }}
+        </span>
+        <span class="float-right">
+          {{ infoCardRightText }}
+        </span>
+      </div>
+      <NProgress
+        type="line"
+        :color="progressColor"
+        :rail-color="progressRailColor"
+        :height="progressHeight"
+        :percentage="percentage"
+        :show-indicator="false"
+        :stroke-width="15"
+        style="max-width: 135px;"
+      />
+    </div>
+    <div v-else>
+      <div class="flex justify-center h-full w-full mt-3">
+        <NProgress
+          :color="progressColor"
+          :rail-color="progressRailColor"
+          type="dashboard"
+          :percentage="percentage" :stroke-width="15"
+          style="width: 50px;"
+        >
+          <div class="text-white" style="font-size: 8px;" :style="{ color: textColor }">
+            {{ percentage }}%
+          </div>
+        </NProgress>
+      </div>
+    </div>
+  </div>
+</template>

src/components/deskModule/SystemMonitor/index.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
+import { NButton, NDropdown, useDialog, useMessage } from 'naive-ui'
+import AppIconSystemMonitor from './AppIconSystemMonitor/index.vue'
+import { type CardStyle, type MonitorData, MonitorType } from './typings'
+import Edit from './Edit/index.vue'
+import { deleteByIndex, getAll, saveAll } from './common'
+import { usePanelState } from '@/store'
+import { PanelPanelConfigStyleEnum } from '@/enums'
+import { SvgIcon } from '@/components/common'
+import { t } from '@/locales'
+
+interface MonitorGroup extends Panel.ItemIconGroup {
+  sortStatus?: boolean
+  hoverStatus: boolean
+  items?: Panel.ItemInfo[]
+}
+
+const props = defineProps<{
+  allowEdit?: boolean
+  showTitle?: boolean
+}>()
+const panelState = usePanelState()
+
+const dialog = useDialog()
+const ms = useMessage()
+
+const dropdownMenuX = ref(0)
+const dropdownMenuY = ref(0)
+const dropdownShow = ref(false)
+const currentRightSelectIndex = ref<number | null>(null)
+
+const monitorGroup = ref<MonitorGroup>({
+  hoverStatus: false,
+  sortStatus: false,
+})
+
+const editShowStatus = ref<boolean>(false)
+const editData = ref<MonitorData | null>(null)
+const editIndex = ref<number | null>(null)
+
+function handleAddItem() {
+  editShowStatus.value = true
+  editData.value = null
+  editIndex.value = null
+}
+
+function handleSetSortStatus(sortStatus: boolean) {
+  monitorGroup.value.sortStatus = sortStatus
+
+  // 并未保存排序重新更新数据
+  if (!sortStatus)
+    getData()
+}
+
+function handleSetHoverStatus(hoverStatus: boolean) {
+  monitorGroup.value.hoverStatus = hoverStatus
+}
+
+const cardStyle: CardStyle = {
+  background: '#2a2a2a6b',
+}
+
+const monitorDatas = ref<MonitorData[]>([])
+
+function handleClick(index: number, item: MonitorData) {
+  if (!props.allowEdit)
+    return
+  editShowStatus.value = true
+  editData.value = item
+  editIndex.value = index
+}
+
+async function getData() {
+  monitorDatas.value = await getAll()
+
+  if (monitorDatas.value.length === 0) {
+    // 防止空 - 默认数据
+    monitorDatas.value.push(
+      {
+        extendParam: {
+          backgroundColor: '#2a2a2a6b',
+          color: '#fff',
+          progressColor: '#fff',
+          progressRailColor: '#CFCFCFA8',
+        },
+        monitorType: MonitorType.cpu,
+      },
+    )
+
+    // 生成并保存
+    saveAll(monitorDatas.value)
+  }
+}
+
+onMounted(() => {
+  getData()
+})
+
+function handleSaveDone() {
+  getData()
+}
+
+async function handleSaveSort() {
+  const { code } = await saveAll(monitorDatas.value)
+  if (code === 0)
+    monitorGroup.value.sortStatus = false
+}
+
+function handleContextMenu(e: MouseEvent, index: number | null, item: MonitorData) {
+  if (index !== null) {
+    e.preventDefault()
+    currentRightSelectIndex.value = index
+  }
+
+  nextTick().then(() => {
+    dropdownShow.value = true
+    dropdownMenuX.value = e.clientX
+    dropdownMenuY.value = e.clientY
+  })
+}
+
+function getDropdownMenuOptions() {
+  const dropdownMenuOptions = [
+    {
+      label: t('common.delete'),
+      key: 'delete',
+    },
+  ]
+
+  return dropdownMenuOptions
+}
+
+function onClickoutside() {
+  // message.info('clickoutside')
+  dropdownShow.value = false
+}
+
+async function deleteOneByIndex(index: number) {
+  const res = await deleteByIndex(index)
+  if (res)
+    getData()
+}
+
+function handleRightMenuSelect(key: string | number) {
+  dropdownShow.value = false
+
+  switch (key) {
+    case 'delete':
+      dialog.warning({
+        title: t('common.warning'),
+        content: t('common.deleteConfirm'),
+        positiveText: t('common.confirm'),
+        negativeText: t('common.cancel'),
+        onPositiveClick: () => {
+          if (monitorDatas.value.length <= 1) {
+            ms.warning(t('common.leastOne'))
+            return
+          }
+          if (currentRightSelectIndex.value !== null)
+            deleteOneByIndex(currentRightSelectIndex.value)
+        },
+      })
+
+      break
+    default:
+      break
+  }
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div
+      class="mt-[50px]"
+      :class="monitorGroup.sortStatus ? 'shadow-2xl border shadow-[0_0_30px_10px_rgba(0,0,0,0.3)]  p-[10px] rounded-2xl' : ''"
+      @mouseenter="handleSetHoverStatus(true)"
+      @mouseleave="handleSetHoverStatus(false)"
+    >
+      <!-- 分组标题 -->
+      <div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
+        <span v-if="showTitle" class="text-shadow">
+          {{ $t('deskModule.systemMonitor.systemState') }}
+        </span>
+        <div
+          v-if="allowEdit"
+          class="ml-2 delay-100 transition-opacity flex"
+          :class="monitorGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
+        >
+          <span class="mr-2 cursor-pointer" @click="handleAddItem()">
+            <SvgIcon class="text-white font-xl" icon="typcn:plus" />
+          </span>
+          <span class="mr-2 cursor-pointer" @click="handleSetSortStatus(!monitorGroup.sortStatus)">
+            <SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
+          </span>
+        </div>
+      </div>
+
+      <!-- 详情图标 -->
+      <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
+        <VueDraggable
+          v-model="monitorDatas" item-key="sort" :animation="300"
+          class="icon-info-box"
+          filter=".not-drag"
+          :disabled="!monitorGroup.sortStatus"
+        >
+          <div
+            v-for="item, index in monitorDatas" :key="index"
+            :title="item.description"
+            @click="handleClick(index, item)"
+            @contextmenu="(e) => handleContextMenu(e, index, item)"
+          >
+            <AppIconSystemMonitor
+              :extend-param="item.extendParam"
+              :icon-text-icon-hide-title="false"
+              :card-type-style="panelState.panelConfig.iconStyle"
+              :monitor-type="item.monitorType"
+              :card-style="cardStyle"
+              :icon-text-color="panelState.panelConfig.iconTextColor"
+            />
+          </div>
+        </VueDraggable>
+      </div>
+
+      <!-- APP图标宫型盒子 -->
+      <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
+        <div v-if="monitorDatas">
+          <VueDraggable
+            v-model="monitorDatas" item-key="sort" :animation="300"
+            class="icon-small-box"
+            filter=".not-drag"
+            :disabled="!monitorGroup.sortStatus"
+          >
+            <div
+              v-for="item, index in monitorDatas" :key="index"
+              :title="item.description"
+              @click="handleClick(index, item)"
+              @contextmenu="(e) => handleContextMenu(e, index, item)"
+            >
+              <AppIconSystemMonitor
+                :extend-param="item.extendParam"
+                :icon-text-icon-hide-title="false"
+                :card-type-style="panelState.panelConfig.iconStyle"
+                :monitor-type="item.monitorType"
+                :card-style="cardStyle"
+                :icon-text-color="panelState.panelConfig.iconTextColor"
+              />
+            </div>
+          </vuedraggable>
+        </div>
+      </div>
+
+      <!-- 编辑栏 -->
+      <div v-if="monitorGroup.sortStatus && allowEdit" class="flex mt-[10px]">
+        <div>
+          <NButton color="#2a2a2a6b" @click="handleSaveSort()">
+            <template #icon>
+              <SvgIcon class="text-white font-xl" icon="material-symbols:save" />
+            </template>
+            <div>
+              {{ $t('common.saveSort') }}
+            </div>
+          </NButton>
+        </div>
+      </div>
+    </div>
+
+    <Edit v-model:visible="editShowStatus" :monitor-data="editData" :index="editIndex" @done="handleSaveDone" />
+
+    <NDropdown
+      placement="bottom-start" trigger="manual" :x="dropdownMenuX" :y="dropdownMenuY"
+      :options="getDropdownMenuOptions()" :show="dropdownShow" :on-clickoutside="onClickoutside" @select="handleRightMenuSelect"
+    />
+  </div>
+</template>
+
+<style scoped>
+.text-shadow {
+  text-shadow: 2px 2px 50px rgb(0, 0, 0);
+}
+
+.app-icon-text-shadow {
+  text-shadow: 2px 2px 5px rgb(0, 0, 0);
+}
+
+.icon-info-box {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 18px;
+
+}
+
+.icon-small-box {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
+  gap: 18px;
+
+}
+
+@media (max-width: 500px) {
+  .icon-info-box{
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+}
+</style>

src/components/deskModule/SystemMonitor/typings.ts

@@ -0,0 +1,33 @@
+export enum MonitorType {
+  'cpu' = 'cpu', // 图标风格
+  'memory' = 'memory', // 详情风格
+  'disk' = 'disk',
+}
+
+export interface CardStyle {
+  background: string
+}
+
+export interface MonitorData {
+  monitorType: MonitorType
+  extendParam?: { [key: string]: [value:any] } | any
+  description?: string
+  // cardStyle: CardStyle
+}
+
+export interface ProgressStyle {
+  color: string
+  railColor: string
+  height: number
+}
+
+export interface GenericProgressStyleExtendParam {
+  progressColor: string
+  progressRailColor: string
+  color: string
+  backgroundColor: string
+}
+
+export interface DiskExtendParam extends GenericProgressStyleExtendParam {
+  path: string
+}

src/components/deskModule/index.ts

@@ -1,4 +1,5 @@
 import Clock from './Clock/index.vue'
 import SearchBox from './SearchBox/index.vue'
+import SystemMonitor from './SystemMonitor/index.vue'
 
-export { Clock, SearchBox }
+export { Clock, SearchBox, SystemMonitor }

src/enums/panel/index.ts

@@ -8,4 +8,5 @@ export enum PanelStateNetworkModeEnum {
 export enum PanelPanelConfigStyleEnum {
   'icon' = 1, // 图标风格
   'info' = 0, // 详情风格
+  'small' = 1, // 同icon
 }

src/locales/en-US.json

@@ -0,0 +1,246 @@
+{
+  "adminSettingUsers": {
+    "EditpasswordPlaceholder": "Enter new password, leave blank to keep the current password",
+    "alertText": "Data between accounts is not shared",
+    "appName": "User Management",
+    "currentUseUsername": "Current username",
+    "deletePromptContent": "Are you sure you want to delete {name} ({username})?",
+    "formRules": {
+      "passwordLimit": "6-20 characters",
+      "roleRequired": "Please select a role",
+      "usernameRequired": "Enter username with at least 5 characters"
+    },
+    "passwordPlaceholder": "Enter password",
+    "pblicText": "Public",
+    "role": "Role",
+    "setOrUnsetPublicMode": "Set/Unset public access",
+    "userCountText": "Total {count} users"
+  },
+  "adminSettingUsers.alertText": "Data between accounts are not interoperable",
+  "api": {
+    "loginExpires": "Login status has expired, please login again"
+  },
+  "appLauncher": {
+    "title": "System Applications & Settings"
+  },
+  "apps": {
+    "about": {
+      "QQGroup": "QQ Group:",
+      "QR": "QR Code (Recommended)",
+      "addQQGroupUrl": "Click to add",
+      "appName": "About",
+      "author": "Author:",
+      "checkUpdate": "Check for new version",
+      "donate": "🧧 Donate",
+      "issue": "Feedback:",
+      "viewUpdateLog": "Click here to view update log"
+    },
+    "baseSettings": {
+      "appName": "Basic Settings",
+      "bottomMargin": "Bottom margin",
+      "clock": "Clock component",
+      "clockSecondShow": "Show seconds",
+      "configFailed": "Configuration save failed, {message}",
+      "configSaved": "Configuration saved",
+      "contentArea": "Content area",
+      "customFooter": "Custom footer",
+      "customImageAddress": "Custom image address",
+      "detailIcon": "Detail icon",
+      "hideDescription": "Hide description information",
+      "hideTitle": "Hide title",
+      "leftRightMargin": "Left-right margin",
+      "mask": "Mask",
+      "maxWidth": "Max width",
+      "publicVisitModeShow": "Allow public mode display",
+      "resetWarnText": "Are you sure you want to reset these styles?",
+      "searchBar": "Search bar component",
+      "searchBarSearchItem": "Allow search bar to search items",
+      "searchBarShow": "Configuration saved",
+      "show": "Show",
+      "showTitle": "Show title",
+      "smallIcon": "Small icon",
+      "systemMonitorStatus": "System status component",
+      "textContent": "Text content",
+      "topMargin": "Top margin",
+      "uploadOrDragText": "Click to upload or drag and drop into the box to replace the image",
+      "vague": "Blur",
+      "wallpaper": "Wallpaper"
+    },
+    "exportImport": {
+      "appName": "Export/Import",
+      "errorConfigFileFormat": "The configuration file format is incorrect and cannot be imported",
+      "errorConfigFileLow": "The configuration file version is too low and cannot be compatible",
+      "export": "Export configuration",
+      "fileModified": "The file has been modified, import with caution",
+      "import": "Import configuration",
+      "moduleIcon": "Icon configuration",
+      "moduleStyle": "Style configuration",
+      "selectExportData": "Select the configuration data to export",
+      "selectImportData": "Select the configuration data to import",
+      "softwareVersionLow": "The current software version may be too old and may not be compatible with this configuration file. It is recommended to update the software to the latest version before importing again.",
+      "tip": "Importing icon configuration data will not clear existing icon data",
+      "transmuteStandard": "Transmute Standard",
+      "warnConfigFileLow": "The configuration file version is too low but compatible"
+    },
+    "itemGroupManage": {
+      "appName": "Group Management",
+      "deleteWarnText": "Are you sure you want to delete this group [{name}]? The application icons in this group will be lost after deletion.",
+      "groupName": "Group name"
+    },
+    "uploadsFileManager": {
+      "alertText": "Here you can manage wallpapers and icons you have uploaded.",
+      "appName": "Uploads File Management",
+      "copyFailed": "Copy failed",
+      "copyLink": "Copy link",
+      "copySuccess": "Link copied successfully. You can paste it in the address bar.",
+      "deleteWarningText": "Cannot be recovered after deletion. Are you sure you want to continue?",
+      "fileName": "Original file name",
+      "infoTitle": "File details",
+      "nothingText": "You haven't uploaded any images yet.",
+      "path": "File path",
+      "setWallpaper": "Set as wallpaper",
+      "uploadTime": "Upload time"
+    },
+    "userInfo": {
+      "appName": "My Information",
+      "theme": "Theme",
+      "themeStyle": {
+        "auto": "Follow the system ",
+        "dark": "Dark ",
+        "light": "Light "
+      }
+    }
+  },
+  "common": {
+    "action": "Action",
+    "add": "Add",
+    "addSuccess": "Added successfully",
+    "appName": "Sun-Panel",
+    "backgroundColor": "Background color",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "continue": "Continue",
+    "delete": "Delete",
+    "deleteConfirm": "Are you sure you want to delete?",
+    "deleteConfirmByName": "Are you sure you want to delete {name}?",
+    "deleteFail": "Delete failed",
+    "deleteSuccess": "Deleted successfully",
+    "description": "Description",
+    "download": "Download",
+    "edit": "Edit",
+    "editFail": "Edit failed",
+    "editSuccess": "Edited successfully",
+    "export": "Export",
+    "exportSuccess": "Exported successfully",
+    "failed": "Operation failed",
+    "icon": "Icon",
+    "image": "Image",
+    "import": "Import",
+    "importSuccess": "Imported successfully",
+    "inputPlaceholder": "Please enter",
+    "inputPlaceholderByText": "Please enter {text}",
+    "language": "Language",
+    "leastOne": "Please keep at least one",
+    "nikeName": "Nickname",
+    "no": "No",
+    "noData": "No data available",
+    "password": "Password",
+    "refreshPage": "Please refresh the page",
+    "repeatLater": "Please try again later",
+    "reset": "Reset",
+    "role": {
+      "admin": "Admin",
+      "regularUser": "Regular"
+    },
+    "save": "Save",
+    "saveFail": "Save failed",
+    "saveSort": "Save sort",
+    "saveSuccess": "Saved successfully",
+    "serverError": "Server error",
+    "show": "Show",
+    "sort": "Sort",
+    "style": "Style",
+    "success": "Operation successful",
+    "text": "Text",
+    "textColor": "Text color",
+    "title": "Title",
+    "unknownError": "Unknown error",
+    "uploadFail": "Upload failed",
+    "username": "Username",
+    "verify": "Verify",
+    "warning": "Warning",
+    "yes": "Yes"
+  },
+  "deskModule": {
+    "clock": {
+      "fri": "Friday",
+      "mon": "Monday",
+      "sat": "Saturday",
+      "sun": "Sunday",
+      "thu": "Thursday",
+      "tue": "Tuesday",
+      "wed": "Wednesday"
+    },
+    "searchBox": {
+      "inputPlaceholder": "Enter search content",
+      "openWithNewOpen": "Open in new window"
+    },
+    "systemMonitor": {
+      "cpuState": "CPU status",
+      "diskMountPoint": "Mount point",
+      "diskState": "Disk status",
+      "memoryState": "Memory status",
+      "progressColor": "Main color",
+      "progressRailColor": "Secondary color",
+      "systemState": "System status"
+    }
+  },
+  "form": {
+    "required": "Required field"
+  },
+  "iconItem": {
+    "add": "Add item",
+    "currentPageLayerOpen": "Open in current page as layer",
+    "currentPageOpen": "Open in current page",
+    "edit": "Edit item",
+    "getGroupFail": "Failed to get group information",
+    "getIcon": "Get icon",
+    "geticonFail": "Failed to get icon",
+    "iconGroup": "Group",
+    "inputIconName": "Enter icon name",
+    "inputIconUrlOrUpload": "Enter icon URL or upload",
+    "lanUrl": "LAN URL",
+    "lanUrlInputPlaceholder": "http(s):// (LAN mode, will redirect to this address)",
+    "newWindowOpen": "Open in new window",
+    "onlineIcon": "Online icon",
+    "onlineIconLibrary": "Online icon library",
+    "openMethod": "Open method",
+    "selectUpload": "Local upload",
+    "url": "URL"
+  },
+  "login": {
+    "loginButton": "Login",
+    "passwordPlaceholder": "Password",
+    "usernamePlaceholder": "Username",
+    "welcomeMessage": "Welcome back!"
+  },
+  "panelHome": {
+    "changeToLanModel": "Switch to LAN mode",
+    "changeToLanModelSuccess": "Switched to LAN mode (mode status saved locally)",
+    "changeToWanModel": "Switch to WAN mode",
+    "changeToWanModelSuccess": "Switched to WAN mode (mode status saved locally)",
+    "goToLogin": "Go to login",
+    "openLanUrl": "Open LAN URL",
+    "openWanUrl": "Open WAN URL"
+  },
+  "settingUserInfo": {
+    "confirmLogoutText": "Are you sure you want to logout?",
+    "confirmPassword": "Confirm new password",
+    "confirmPasswordInconsistentMsg": "Passwords do not match",
+    "logout": "Logout",
+    "logoutSuccess": "You have safely logged out. Looking forward to seeing you again!",
+    "newPassword": "New password",
+    "oldPassword": "Old password",
+    "updatePassword": "Change password"
+  }
+}

src/locales/en-US.ts

@@ -1,94 +0,0 @@
-export default {
-  common: {
-    add: 'Add',
-    addSuccess: 'Add Success',
-    edit: 'Edit',
-    editSuccess: 'Edit Success',
-    delete: 'Delete',
-    deleteSuccess: 'Delete Success',
-    save: 'Save',
-    saveSuccess: 'Save Success',
-    reset: 'Reset',
-    action: 'Action',
-    export: 'Export',
-    exportSuccess: 'Export Success',
-    import: 'Import',
-    importSuccess: 'Import Success',
-    clear: 'Clear',
-    clearSuccess: 'Clear Success',
-    yes: 'Yes',
-    no: 'No',
-    confirm: 'Confirm',
-    download: 'Download',
-    noData: 'No Data',
-    wrong: 'Something went wrong, please try again later.',
-    success: 'Success',
-    failed: 'Failed',
-    verify: 'Verify',
-    unauthorizedTips: 'Unauthorized, please verify first.',
-  },
-  chat: {
-    newChatButton: 'New Chat',
-    placeholder: 'Ask me anything...(Shift + Enter = line break, "/" to trigger prompts)',
-    placeholderMobile: 'Ask me anything...',
-    copy: 'Copy',
-    copied: 'Copied',
-    copyCode: 'Copy Code',
-    clearChat: 'Clear Chat',
-    clearChatConfirm: 'Are you sure to clear this chat?',
-    exportImage: 'Export Image',
-    exportImageConfirm: 'Are you sure to export this chat to png?',
-    exportSuccess: 'Export Success',
-    exportFailed: 'Export Failed',
-    usingContext: 'Context Mode',
-    turnOnContext: 'In the current mode, sending messages will carry previous chat records.',
-    turnOffContext: 'In the current mode, sending messages will not carry previous chat records.',
-    deleteMessage: 'Delete Message',
-    deleteMessageConfirm: 'Are you sure to delete this message?',
-    deleteHistoryConfirm: 'Are you sure to clear this history?',
-    clearHistoryConfirm: 'Are you sure to clear chat history?',
-    preview: 'Preview',
-    showRawText: 'Show as raw text',
-  },
-  setting: {
-    setting: 'Setting',
-    general: 'General',
-    advanced: 'Advanced',
-    config: 'Config',
-    avatarLink: 'Avatar Link',
-    name: 'Name',
-    description: 'Description',
-    role: 'Role',
-    temperature: 'Temperature',
-    top_p: 'Top_p',
-    resetUserInfo: 'Reset UserInfo',
-    chatHistory: 'ChatHistory',
-    theme: 'Theme',
-    language: 'Language',
-    api: 'API',
-    reverseProxy: 'Reverse Proxy',
-    timeout: 'Timeout',
-    socks: 'Socks',
-    httpsProxy: 'HTTPS Proxy',
-    balance: 'API Balance',
-    monthlyUsage: 'Monthly Usage',
-  },
-  store: {
-    siderButton: 'Prompt Store',
-    local: 'Local',
-    online: 'Online',
-    title: 'Title',
-    description: 'Description',
-    clearStoreConfirm: 'Whether to clear the data?',
-    importPlaceholder: 'Please paste the JSON data here',
-    addRepeatTitleTips: 'Title duplicate, please re-enter',
-    addRepeatContentTips: 'Content duplicate: {msg}, please re-enter',
-    editRepeatTitleTips: 'Title conflict, please revise',
-    editRepeatContentTips: 'Content conflict {msg} , please re-modify',
-    importError: 'Key value mismatch',
-    importRepeatTitle: 'Title repeatedly skipped: {msg}',
-    importRepeatContent: 'Content is repeatedly skipped: {msg}',
-    onlineImportWarning: 'Note: Please check the JSON file source!',
-    downloadError: 'Please check the network status and JSON file validity',
-  },
-}

src/locales/index.ts

@@ -1,20 +1,15 @@
 import type { App } from 'vue'
 import { createI18n } from 'vue-i18n'
-import enUS from './en-US'
+import enUS from './en-US.json'
 // import koKR from './ko-KR'
-import zhCN from './zh-CN'
+import zhCN from './zh-CN.json'
-// import zhTW from './zh-TW'
 // import ruRU from './ru-RU'
-import { useAppStoreWithOut } from '@/store/modules/app'
-import type { Language } from '@/store/modules/app/helper'
 
-const appStore = useAppStoreWithOut()
+const defaultLocale = 'zh-CN'
-
-const defaultLocale = appStore.language || 'zh-CN'
 
 const i18n = createI18n({
   locale: defaultLocale,
-  fallbackLocale: 'en-US',
+  fallbackLocale: defaultLocale,
   allowComposition: true,
   messages: {
     'en-US': enUS,
@@ -27,7 +22,9 @@ const i18n = createI18n({
 
 export const t = i18n.global.t
 
-export function setLocale(locale: Language) {
+// 避免循环依赖appstore(authstore)language此处暂时先使用any
+// 后面有时间调整
+export function setLocale(locale: any) {
   i18n.global.locale = locale
 }
 

src/locales/zh-CN.json

@@ -0,0 +1,245 @@
+{
+  "adminSettingUsers": {
+    "EditpasswordPlaceholder": "请输入新密码，留空密码不变",
+    "alertText": "账号之间的数据不互通",
+    "appName": "用户管理",
+    "currentUseUsername": "当前账号",
+    "deletePromptContent": "你确定删除{name}({username})？",
+    "formRules": {
+      "passwordLimit": "6-20个字符",
+      "roleRequired": "请选择角色",
+      "usernameRequired": "请输入账号且大于5个字符"
+    },
+    "passwordPlaceholder": "请输入密码",
+    "pblicText": "公开",
+    "role": "角色",
+    "setOrUnsetPublicMode": "设置/取消公开访问",
+    "userCountText": "共{count}位用户"
+  },
+  "api": {
+    "loginExpires": "登录状态已过期，请重新登录"
+  },
+  "appLauncher": {
+    "title": "系统应用 & 设置"
+  },
+  "apps": {
+    "about": {
+      "QQGroup": "QQ交流群：",
+      "QR": "二维码(推荐)",
+      "addQQGroupUrl": "点击添加",
+      "appName": "关于",
+      "author": "作者：",
+      "checkUpdate": "检查新版本",
+      "donate": "🧧打赏",
+      "issue": "建议反馈：",
+      "viewUpdateLog": "点此查看更新说明"
+    },
+    "baseSettings": {
+      "appName": "基础设置",
+      "bottomMargin": "下边距",
+      "clock": "时钟组件",
+      "clockSecondShow": "显示秒",
+      "configFailed": "配置保存失败,{message}",
+      "configSaved": "配置已保存",
+      "contentArea": "内容区域",
+      "customFooter": "自定义footer",
+      "customImageAddress": "自定义图片地址",
+      "detailIcon": "详情图标",
+      "hideDescription": "隐藏描述信息",
+      "hideTitle": "隐藏标题",
+      "leftRightMargin": "左右边距",
+      "mask": "遮罩",
+      "maxWidth": "最大宽度",
+      "publicVisitModeShow": "公开模式允许显示",
+      "resetWarnText": "确定要重置这些样式吗？",
+      "searchBar": "搜索栏组件",
+      "searchBarSearchItem": "允许搜索栏搜索项目",
+      "searchBarShow": "配置已保存",
+      "show": "显示",
+      "showTitle": "显示标题",
+      "smallIcon": "小图标",
+      "systemMonitorStatus": "系统状态组件",
+      "textContent": "文本内容",
+      "topMargin": "上边距",
+      "uploadOrDragText": "点击上传替换图片或拖拽到框内",
+      "vague": "模糊",
+      "wallpaper": "壁纸"
+    },
+    "exportImport": {
+      "appName": "导出导入",
+      "errorConfigFileFormat": "配置文件格式不正确，无法导入",
+      "errorConfigFileLow": "配置文件版本过低，无法兼容",
+      "export": "导出配置",
+      "fileModified": "文件被修改过，谨慎导入",
+      "import": "导入配置",
+      "moduleIcon": "图标配置",
+      "moduleStyle": "样式配置",
+      "selectExportData": "请选择要导出的配置数据",
+      "selectImportData": "请选择要导入的配置数据",
+      "softwareVersionLow": "当前软件版本可能过旧，很有可能无法兼容该配置文件，请谨慎导入。推荐将软件更新到新版后再次导入",
+      "tip": "导入图标配置数据不会清空现有图标数据",
+      "transmuteStandard": "浏览器书签转换工具",
+      "warnConfigFileLow": "配置文件版本过低，但是兼容"
+    },
+    "itemGroupManage": {
+      "appName": "分组管理",
+      "deleteWarnText": "你确定删除此分组[{name}]，删除后此分组应用图标将丢失？",
+      "groupName": "分组名称"
+    },
+    "uploadsFileManager": {
+      "alertText": "你可以在这里管理你上传过的壁纸和图标",
+      "appName": "上传文件管理",
+      "copyFailed": "复制失败",
+      "copyLink": "复制链接",
+      "copySuccess": "链接复制成功，可以在图标地址栏",
+      "deleteWarningText": "删除后无法恢复，你确定要继续吗？",
+      "fileName": "原文件名",
+      "infoTitle": "文件详情",
+      "nothingText": "你还没有上传过任何图片",
+      "path": "文件路径",
+      "setWallpaper": "设置为壁纸",
+      "uploadTime": "上传时间"
+    },
+    "userInfo": {
+      "appName": "我的信息",
+      "theme": "主题",
+      "themeStyle": {
+        "auto": "跟随系统 ",
+        "dark": "深色 ",
+        "light": "浅色 "
+      }
+    }
+  },
+  "common": {
+    "action": "操作",
+    "add": "添加",
+    "addSuccess": "添加成功",
+    "appName": "Sun-Panel",
+    "backgroundColor": "背景颜色",
+    "cancel": "取消",
+    "confirm": "确定",
+    "continue": "继续",
+    "delete": "删除",
+    "deleteConfirm": "你确定要删除吗？",
+    "deleteConfirmByName": "你确定要删除{name}吗？",
+    "deleteFail": "删除失败",
+    "deleteSuccess": "删除成功",
+    "description": "描述信息",
+    "download": "下载",
+    "edit": "编辑",
+    "editFail": "编辑失败",
+    "editSuccess": "编辑成功",
+    "export": "导出",
+    "exportSuccess": "导出成功",
+    "failed": "操作失败",
+    "icon": "图标",
+    "image": "图片",
+    "import": "导入",
+    "importSuccess": "导入成功",
+    "inputPlaceholder": "请输入",
+    "inputPlaceholderByText": "请输入{text}",
+    "language": "语言",
+    "leastOne": "请至少保留一项",
+    "nikeName": "昵称",
+    "no": "否",
+    "noData": "暂无数据",
+    "password": "密码",
+    "refreshPage": "请刷新页面",
+    "repeatLater": "请稍后重试",
+    "reset": "重置",
+    "role": {
+      "admin": "管理",
+      "regularUser": "普通"
+    },
+    "save": "保存",
+    "saveFail": "保存成功",
+    "saveSort": "保存排序",
+    "saveSuccess": "保存成功",
+    "serverError": "服务器错误",
+    "show": "显示",
+    "sort": "排序",
+    "style": "风格",
+    "success": "操作成功",
+    "text": "文字",
+    "textColor": "文字颜色",
+    "title": "标题",
+    "unknownError": "未知错误",
+    "uploadFail": "上传失败",
+    "username": "账号",
+    "verify": "验证",
+    "warning": "警告",
+    "yes": "是"
+  },
+  "deskModule": {
+    "clock": {
+      "fri": "星期五",
+      "mon": "星期一",
+      "sat": "星期六",
+      "sun": "星期日",
+      "thu": "星期四",
+      "tue": "星期二",
+      "wed": "星期三"
+    },
+    "searchBox": {
+      "inputPlaceholder": "请输入搜索内容",
+      "openWithNewOpen": "新窗口打开"
+    },
+    "systemMonitor": {
+      "cpuState": "CPU状态",
+      "diskMountPoint": "挂载点",
+      "diskState": "磁盘状态",
+      "memoryState": "内存状态",
+      "progressColor": "主色",
+      "progressRailColor": "副色",
+      "systemState": "系统状态"
+    }
+  },
+  "form": {
+    "required": "必填项"
+  },
+  "iconItem": {
+    "add": "添加项目",
+    "currentPageLayerOpen": "当前页面弹窗打开",
+    "currentPageOpen": "当前页面打开",
+    "edit": "修改项目",
+    "getGroupFail": "分组信息获取失败",
+    "getIcon": "获取图标",
+    "geticonFail": "图标获取失败",
+    "iconGroup": "分组",
+    "inputIconName": "请输入图标名称",
+    "inputIconUrlOrUpload": "输入图标地址或上传",
+    "lanUrl": "局域网地址",
+    "lanUrlInputPlaceholder": "http(s)://（局域网模式，会跳转该地址）",
+    "newWindowOpen": "新窗口打开",
+    "onlineIcon": "在线图标",
+    "onlineIconLibrary": "在线图标库",
+    "openMethod": "打开方式",
+    "selectUpload": "本地上传",
+    "url": "地址"
+  },
+  "login": {
+    "loginButton": "登录",
+    "passwordPlaceholder": "密码",
+    "usernamePlaceholder": "账号",
+    "welcomeMessage": "欢迎回来！"
+  },
+  "panelHome": {
+    "changeToLanModel": "切换为内网模式",
+    "changeToLanModelSuccess": "已经切换到内网模式（模式状态仅保存在本地）",
+    "changeToWanModel": "切换为公网模式",
+    "changeToWanModelSuccess": "已经切换到公网模式（模式状态仅保存在本地）",
+    "goToLogin": "前往登录",
+    "openLanUrl": "打开局域网地址",
+    "openWanUrl": "打开公网地址"
+  },
+  "settingUserInfo": {
+    "confirmLogoutText": "你确定要退出登录吗？",
+    "confirmPassword": "确认新密码",
+    "confirmPasswordInconsistentMsg": "两次密码不一致",
+    "logout": "退出登录",
+    "logoutSuccess": "您已经安全退出，期待与你再次相见！",
+    "newPassword": "新密码",
+    "oldPassword": "旧密码",
+    "updatePassword": "修改密码"
+  }
+}

src/locales/zh-CN.ts

@@ -1,121 +0,0 @@
-export default {
-  common: {
-    appName: 'Sun-Panel',
-    add: '添加',
-    addSuccess: '添加成功',
-    edit: '编辑',
-    editSuccess: '编辑成功',
-    editFail: '编辑失败',
-    delete: '删除',
-    deleteSuccess: '删除成功',
-    save: '保存',
-    saveSuccess: '保存成功',
-    reset: '重置',
-    action: '操作',
-    export: '导出',
-    exportSuccess: '导出成功',
-    import: '导入',
-    importSuccess: '导入成功',
-    // clear: '清空',
-    // clearSuccess: '清空成功',
-    yes: '是',
-    no: '否',
-    confirm: '确定',
-    cancel: '取消',
-    warning: '警告',
-    download: '下载',
-    noData: '暂无数据',
-    // wrong: '好像出错了，请稍后再试。',
-    success: '操作成功',
-    failed: '操作失败',
-    verify: '验证',
-    unauthorizedTips: '未经授权，请先进行验证。',
-    inputPlaceholder: '请输入',
-    inputPlaceholderByText: '请输入{text}',
-    username: '账号',
-    nikeName: '昵称',
-    password: '密码',
-    serverError: '服务器错误',
-    role: {
-      regularUser: '普通',
-      admin: '管理',
-    },
-  },
-  setting: {
-    setting: '设置',
-    general: '总览',
-    advanced: '高级',
-    config: '配置',
-    avatarLink: '头像链接',
-    avatar: '头像',
-    name: '名称',
-    description: '描述',
-    role: '角色设定',
-    temperature: 'Temperature',
-    top_p: '回答多样性',
-    resetUserInfo: '重置用户信息',
-    chatHistory: '聊天记录',
-    theme: '主题',
-    language: '语言',
-    api: 'API',
-    reverseProxy: '反向代理',
-    timeout: '超时',
-    socks: 'Socks',
-    httpsProxy: 'HTTPS Proxy',
-    balance: 'API余额',
-    monthlyUsage: '本月使用量',
-  },
-  login: {
-    loginButton: '登录',
-    usernamePlaceholder: '请输入账号',
-    passwordPlaceholder: '请输入密码',
-    welcomeMessage: '欢迎回来！',
-  },
-  settingUserInfo: {
-    updatePassword: '修改密码',
-    oldPassword: '旧密码',
-    newPassword: '新密码',
-    confirmPassword: '确认新密码',
-    confirmPasswordInconsistentMsg: '两次密码不一致',
-    logout: '退出登录',
-    confirmLogoutText: '你确定要退出登录吗？',
-    logoutSuccess: '您已经安全退出，期待与你再次相见！',
-  },
-  adminSettingUsers: {
-    passwordPlaceholder: '请输入密码',
-    EditpasswordPlaceholder: '请输入新密码，留空密码不变',
-    role: '角色',
-    formRules: {
-      usernameRequired: '请输入账号且大于5个字符',
-      roleRequired: '请选择角色',
-      passwordLimit: '6-20个字符',
-    },
-    alertText: '账号之间的数据不互通',
-    userCountText: '共{count}位用户',
-    deletePromptContent: '你确定删除{name}({username})？',
-    currentUseUsername: '当前账号',
-    setOrUnsetPublicMode: '设置/取消公开访问',
-    pblicText: '公开',
-  },
-  deskModule: {
-    searchBox: {
-      openWithNewOpen: '新窗口打开',
-      inputPlaceholder: '请输入搜索内容',
-    },
-  },
-  apps: {
-    uploadsFileManager: {
-      copyLink: '复制链接',
-      infoTitle: '文件详情',
-      fileName: '原文件名',
-      path: '文件路径',
-      uploadTime: '上传时间',
-      deleteWarningText: '删除后无法恢复，你确定要继续吗？',
-      copySuccess: '链接复制成功，可以在图标地址栏',
-      copyFailed: '复制失败',
-      setWallpaper: '设置为壁纸',
-      alertText: '你可以在这里管理你上传过的壁纸和图标',
-      nothingText: '你还没有上传过任何图片',
-    },
-  },
-}

src/store/modules/app/helper.ts

@@ -13,7 +13,12 @@ export interface AppState {
 }
 
 export function defaultSetting(): AppState {
-  return { siderCollapsed: false, theme: 'light', language: 'zh-CN' }
+  const lan = (navigator.language).toLowerCase()
+  let language: Language = 'en-US'
+  if (lan.includes('zh'))
+    language = 'zh-CN'
+
+  return { siderCollapsed: false, theme: 'light', language }
 }
 
 export function getLocalSetting(): AppState {
@@ -24,3 +29,7 @@ export function getLocalSetting(): AppState {
 export function setLocalSetting(setting: AppState): void {
   ss.set(LOCAL_NAME, setting)
 }
+
+export function removeLocalState() {
+  ss.remove(LOCAL_NAME)
+}

src/store/modules/app/index.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import type { AppState, Language, Theme } from './helper'
-import { getLocalSetting, setLocalSetting } from './helper'
+import { defaultSetting, getLocalSetting, removeLocalState, setLocalSetting } from './helper'
 import { store } from '@/store'
 
 export const useAppStore = defineStore('app-store', {
@@ -26,6 +26,11 @@ export const useAppStore = defineStore('app-store', {
     recordState() {
       setLocalSetting(this.$state)
     },
+
+    removeToken() {
+      this.$state = defaultSetting()
+      removeLocalState()
+    },
   },
 })
 

src/store/modules/moduleConfig/index.ts

@@ -33,10 +33,10 @@ export const useModuleConfig = defineStore('module-config-store', {
     },
 
     // 保存到网络
-    saveToCloud(name: string, value: any) {
+    async saveToCloud(name: string, value: any) {
       const moduleName = `module-${name}`
       // 保存至网络
-      save(moduleName, value)
+      return save(moduleName, value)
     },
 
     // 从网络同步

src/store/modules/panel/helper.ts

@@ -3,6 +3,8 @@ import { PanelPanelConfigStyleEnum, PanelStateNetworkModeEnum } from '@/enums'
 import defaultBackground from '@/assets/defaultBackground.webp'
 const LOCAL_NAME = 'panelStorage'
 
+const defaultFooterHtml = '<div class="flex justify-center text-slate-300" style="margin-top:100px">Powered By <a href="https://github.com/hslr-s/sun-panel" target="_blank" class="ml-[5px]">Sun-Panel</a></div>'
+
 export function defaultStatePanelConfig(): Panel.panelConfig {
   return {
     backgroundImageSrc: defaultBackground,
@@ -22,6 +24,11 @@ export function defaultStatePanelConfig(): Panel.panelConfig {
     maxWidth: 1200,
     maxWidthUnit: 'px',
     marginX: 5,
+    footerHtml: defaultFooterHtml,
+    systemMonitorShow: false,
+    systemMonitorShowTitle: true,
+    systemMonitorPublicVisitModeShow: false,
+
   }
 }
 

src/typings/panel.d.ts

@@ -55,6 +55,10 @@ declare namespace Panel {
         maxWidth?:number
         maxWidthUnit:string
         marginX?:number
+        footerHtml?:string
+        systemMonitorShow?:boolean
+        systemMonitorShowTitle?:boolean
+        systemMonitorPublicVisitModeShow?:boolean
     }
 
     interface userConfig{

src/typings/systemMonitor.d.ts

@@ -0,0 +1,43 @@
+declare namespace SystemMonitor {
+
+    interface CPUInfo {
+        coreCount: number
+        cpuNum: number
+        model: string
+        usages: number[]
+    }
+
+    interface DiskInfo {
+        mountpoint: string
+        total: number
+        used: number
+        free: number
+        usedPercent: number
+    }
+
+    interface NetIOCountersInfo {
+        bytesSent: number
+        bytesRecv: number
+        name: string
+    }
+
+    interface MemoryInfo {
+        total: number
+        used: number
+        free: number
+        usedPercent: number
+    }
+
+    interface GetAllRes {
+        cpuInfo: CPUInfo
+        diskInfo: DiskInfo[]
+        netIOCountersInfo: NetIOCountersInfo[]
+        memoryInfo: MemoryInfo
+    }
+
+    interface Mountpoint{
+        device:string
+        mountpoint:string
+        fstype:string
+    }
+}

src/utils/cmn/index.ts

@@ -221,3 +221,11 @@ export async function copyToClipboard(text: string): Promise<boolean> {
     }
   }
 }
+
+export function bytesToSize(bytes: number) {
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB']
+  if (bytes === 0)
+    return '0B'
+  const i = parseInt(String(Math.floor(Math.log(bytes) / Math.log(1024))))
+  return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`
+}

src/utils/defaultData/index.ts

@@ -0,0 +1,17 @@
+import type { Language } from '@/store/modules/app/helper'
+
+export const defautSwatchesBackground = [
+  '#00000000',
+  '#000000',
+  '#ffffff',
+  '#18A058',
+  '#2080F0',
+  '#F0A020',
+  'rgba(208, 48, 80, 1)',
+  '#C418D1FF',
+]
+
+export const languageOptions: { label: string; key: Language; value: Language }[] = [
+  { label: 'English', key: 'en-US', value: 'en-US' },
+  { label: '简体中文', key: 'zh-CN', value: 'zh-CN' },
+]

src/utils/request/index.ts

@@ -1,11 +1,12 @@
 import type { AxiosProgressEvent, AxiosResponse, GenericAbortSignal } from 'axios'
 import { createDiscreteApi } from 'naive-ui'
 import request from './axios'
+import { t } from '@/locales'
 import { useAuthStore } from '@/store'
 import { router } from '@/router'
 
 const { message } = createDiscreteApi(['message'])
-
+let loginMessageShow = false
 export interface HttpOption {
   url: string
   data?: any
@@ -34,7 +35,17 @@ function http<T = any>(
       return res.data
 
     if (res.data.code === 1001) {
-      message.warning('登录过期,请重新登录')
+      // 避免重复弹窗
+      if (loginMessageShow === false) {
+        loginMessageShow = true
+        message.warning(t('api.loginExpires'), {
+        // message.warning('登录过期', {
+          onLeave() {
+            loginMessageShow = false
+          },
+        })
+      }
+
       router.push({ path: '/login' })
       authStore.removeToken()
       return res.data

src/views/home/components/AppStarter/index.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { NLayout, NLayoutContent, NLayoutSider, NSpace } from 'naive-ui'
 import { useAuthStore } from '@/store'
 import { AppLoader, RoundCardModal, SvgIcon } from '@/components/common'
+import { t } from '@/locales'
 
 interface App {
   name: string
@@ -23,38 +24,38 @@ const componentName = ref('UserInfo')
 const collapsed = ref(false)
 const screenWidth = ref(0)
 const isSmallScreen = ref(false)
-const defaultTitle = '系统应用 & 设置'
+const defaultTitle = t('appLauncher.title')
 const title = ref('')
 const height = ref('500px')
 
 const apps = ref<App[]>([
   {
-    name: '用户信息',
+    name: t('apps.userInfo.appName'),
     componentName: 'UserInfo',
     icon: 'material-symbols-person-edit-outline-rounded',
   },
   {
-    name: '基本设置',
+    name: t('apps.baseSettings.appName'),
     componentName: 'Style',
     icon: 'ep-setting',
   },
   {
-    name: '分组管理',
+    name: t('apps.itemGroupManage.appName'),
     componentName: 'ItemGroupManage',
     icon: 'material-symbols-ad-group-outline-rounded',
   },
   {
-    name: '导入导出',
+    name: t('apps.exportImport.appName'),
     componentName: 'ImportExport',
     icon: 'icon-park-outline-import-and-export',
   },
   {
-    name: '上传文件管理',
+    name: t('apps.uploadsFileManager.appName'),
     componentName: 'UploadFileManager',
     icon: 'tabler:file-upload',
   },
   {
-    name: '关于',
+    name: t('apps.about.appName'),
     componentName: 'About',
     icon: 'lucide-info',
   },
@@ -93,7 +94,7 @@ function handleResize() {
 
 onMounted(() => {
   const adminApp: App = {
-    name: '用户管理',
+    name: t('adminSettingUsers.appName'),
     componentName: 'Users',
     icon: 'lucide-users',
     auth: 1,
@@ -116,7 +117,6 @@ onUnmounted(() => {
     <RoundCardModal
       v-model:show="show"
       style="max-width: 900px;"
-      title="应用列表"
       size="small"
     >
       <template #header>

src/views/home/components/EditItem/IconEditor.vue

@@ -4,6 +4,7 @@ import type { UploadFileInfo } from 'naive-ui'
 import { computed, defineProps } from 'vue'
 import { ItemIcon } from '@/components/common'
 import { useAuthStore } from '@/store'
+import { t } from '@/locales'
 
 const props = defineProps<{
   itemIcon: Panel.ItemIcon | null
@@ -74,7 +75,7 @@ const handleUploadFinish = ({
     emit('update:itemIcon', itemIconInfo.value || null)
   }
   else {
-    ms.error(`上传错误：${res.msg}`)
+    ms.error(`${t('common.uploadFail')}:${res.msg}`)
   }
 
   return file
@@ -90,7 +91,7 @@ const handleUploadFinish = ({
         name="iconType"
         @change="handleIconTypeRadioChange(1)"
       >
-        文字
+        {{ $t('common.text') }}
       </NRadio>
 
       <NRadio
@@ -99,7 +100,7 @@ const handleUploadFinish = ({
         name="iconType"
         @change="handleIconTypeRadioChange(2)"
       >
-        图片/SVG
+        {{ $t('common.image') }}
       </NRadio>
 
       <NRadio
@@ -108,7 +109,7 @@ const handleUploadFinish = ({
         name="iconType"
         @change="handleIconTypeRadioChange(3)"
       >
-        在线图标
+        {{ $t('iconItem.onlineIcon') }}
       </NRadio>
     </div>
 
@@ -123,22 +124,22 @@ const handleUploadFinish = ({
         <div class="ml-[20px]">
           <!-- <NImage :src="model.icon" preview-disabled /> -->
           <div v-if="itemIconInfo.itemType === 1">
-            <NInput v-model:value="itemIconInfo.text" class="mb-[5px]" size="small" type="text" placeholder="请输入文字作为图标" @input="handleChange" />
+            <NInput v-model:value="itemIconInfo.text" class="mb-[5px]" size="small" type="text" @input="handleChange" />
           </div>
 
           <div v-if="itemIconInfo.itemType === 3">
             <div>
-              <NInput v-model:value="itemIconInfo.text" class="mb-[5px]" size="small" type="text" placeholder="请输入图标名字" @input="handleChange" />
+              <NInput v-model:value="itemIconInfo.text" class="mb-[5px]" size="small" type="text" :placeholder="$t('iconItem.inputIconName')" @input="handleChange" />
 
               <NButton quaternary type="info">
-                <a target="_blank" href="https://icon-sets.iconify.design/">在线图标库</a>
+                <a target="_blank" href="https://icon-sets.iconify.design/">{{ $t('iconItem.onlineIconLibrary') }}</a>
               </NButton>
             </div>
           </div>
 
           <!-- 图片 -->
           <div v-if="itemIconInfo.itemType === 2">
-            <NInput v-model:value="itemIconInfo.src" class="mb-[5px] w-full" size="small" type="text" placeholder="输入图标地址或上传" @input="handleChange" />
+            <NInput v-model:value="itemIconInfo.src" class="mb-[5px] w-full" size="small" type="text" :placeholder="$t('iconItem.inputIconUrlOrUpload')" @input="handleChange" />
             <NUpload
               action="/api/file/uploadImg"
               :show-file-list="false"
@@ -149,7 +150,7 @@ const handleUploadFinish = ({
               @finish="handleUploadFinish"
             >
               <NButton size="small">
-                本地上传
+                {{ $t('iconItem.selectUpload') }}
               </NButton>
             </NUpload>
           </div>
@@ -158,7 +159,7 @@ const handleUploadFinish = ({
 
       <div class="flex items-center mt-[10px]">
         <div class="w-auto text-slate-500 mr-[10px]">
-          背景色:
+          {{ $t('common.backgroundColor') }}
         </div>
         <div class="w-[150px] flex items-center mr-[10px]">
           <NColorPicker
@@ -172,7 +173,7 @@ const handleUploadFinish = ({
         </div>
         <div v-if="itemIconInfo.backgroundColor !== initData.backgroundColor" class="w-auto text-slate-500 mr-[10px] cursor-pointer">
           <NButton quaternary type="info" @click="handleResetBackgroundColor">
-            恢复默认
+            {{ $t('common.reset') }}
           </NButton>
         </div>
       </div>

src/views/home/components/EditItem/index.vue

@@ -5,6 +5,7 @@ import { NButton, NForm, NFormItem, NGrid, NGridItem, NInput, NInputGroup, NModa
 import IconEditor from './IconEditor.vue'
 import { edit, getSiteFavicon } from '@/api/panel/itemIcon'
 import { getList as getGroupList } from '@/api/panel/itemIconGroup'
+import { t } from '@/locales'
 
 interface Props {
   visible: boolean
@@ -43,33 +44,33 @@ const rules: FormRules = {
   title: {
     required: true,
     trigger: 'blur',
-    message: '必填项',
+    message: t('form.required'),
   },
   url: {
     required: true,
     trigger: 'blur',
     type: 'string',
-    message: '必填项',
+    message: t('form.required'),
   },
   // itemIconGroupId: {
   //   required: true,
   //   trigger: ['blur', 'change'],
-  //   message: '必填项',
+  //   message: t('form.required'),
   // },
 }
 
 const options = [
   {
     default: true,
-    label: '当前页面打开',
+    label: t('iconItem.currentPageOpen'),
     value: 1,
   },
   {
-    label: '新窗口打开',
+    label: t('iconItem.newWindowOpen'),
     value: 2,
   },
   {
-    label: '当前页面弹窗打开',
+    label: t('iconItem.currentPageLayerOpen'),
     value: 3,
   },
 ]
@@ -89,16 +90,15 @@ async function editApi() {
     if (code === 0) {
       show.value = false
       model.value = { ...restoreDefault }
-      console.log('重置完成', model.value)
 
       emit('done', data)
     }
     else {
-      ms.error(`保存失败：${msg}`)
+      ms.error(`${t('common.saveFail')}:${msg}`)
     }
   }
   catch (error) {
-    ms.error('保存失败')
+    ms.error(t('common.saveFail'))
   }
   submitLoading.value = false
 }
@@ -122,11 +122,11 @@ async function getIconByUrl(url: string, loadingIndex: number) {
       }
     }
     else {
-      ms.error('图标获取失败')
+      ms.error(t('iconItem.geticonFail'))
     }
   }
   catch (error) {
-    ms.error('图标获取失败')
+    ms.error(t('iconItem.geticonFail'))
   }
   getIconLoading.value[loadingIndex] = false
 }
@@ -160,53 +160,53 @@ function getGroupListOptions() {
       }
     }
     else {
-      ms.error(`分组信息获取失败:${msg}`)
+      ms.error(`${t('iconItem.getGroupFail')}:${msg}`)
     }
   })
 }
 </script>
 
 <template>
-  <NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="itemInfo ? '修改项目' : '添加项目'">
+  <NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="itemInfo ? t('iconItem.edit') : t('iconItem.add')">
     <div class="h-[600px] overflow-auto p-[5px]">
       <NForm ref="formRef" :model="model" :rules="rules">
         <NGrid cols="2" :x-gap="10" item-responsive>
           <NGridItem span="2 500:1">
-            <NFormItem path="itemIconGroupId" label="分组">
+            <NFormItem path="itemIconGroupId" :label="t('iconItem.iconGroup')">
               <NSelect v-model:value="model.itemIconGroupId" :options="itemIconGroupOptions" />
             </NFormItem>
           </NGridItem>
           <NGridItem span="2 500:1">
-            <NFormItem path="title" label="标题">
+            <NFormItem path="title" :label="$t('common.title')">
-              <NInput v-model:value="model.title" type="text" show-count :maxlength="20" placeholder="请输入标题" />
+              <NInput v-model:value="model.title" type="text" show-count :maxlength="20" />
             </NFormItem>
           </NGridItem>
         </NGrid>
 
-        <NFormItem path="icon" label="图标">
+        <NFormItem path="icon" :label="$t('common.icon')">
           <IconEditor v-model:item-icon="model.icon" />
         </NFormItem>
-        <NFormItem path="url" label="跳转地址">
+        <NFormItem path="url" :label="$t('iconItem.url')">
           <!-- <NSelect :style="{ width: '100px' }" :options="urlProtocolOptions" /> -->
           <NInputGroup>
             <NInput v-model:value="model.url" type="text" :maxlength="1000" placeholder="http(s)://" />
             <NButton :disabled="!model.url" :loading="getIconLoading[0]" @click="getIconByUrl(model.url, 0)">
-              获取图标
+              {{ $t('iconItem.getIcon') }}
             </NButton>
           </NInputGroup>
         </NFormItem>
-        <NFormItem path="lanUrl" label="局域网跳转地址">
+        <NFormItem path="lanUrl" :label="$t('iconItem.lanUrl')">
           <NInputGroup>
-            <NInput v-model:value="model.lanUrl" type="text" :maxlength="1000" placeholder="http(s)://（可以留空，切换到局域网模式，点击会使用该地址）" />
+            <NInput v-model:value="model.lanUrl" type="text" :maxlength="1000" :placeholder="$t('iconItem.lanUrlInputPlaceholder')" />
             <NButton :disabled="!model.lanUrl" :loading="getIconLoading[1]" @click="getIconByUrl(model.lanUrl || '', 1)">
-              获取图标
+              {{ $t('iconItem.getIcon') }}
             </NButton>
           </NInputGroup>
         </NFormItem>
-        <NFormItem path="description" label="描述信息">
+        <NFormItem path="description" :label="$t('common.description')">
-          <NInput v-model:value="model.description" type="text" show-count :maxlength="100" placeholder="请填写描述信息" />
+          <NInput v-model:value="model.description" type="text" show-count :maxlength="100" />
         </NFormItem>
-        <NFormItem path="openMethod" label="打开方式">
+        <NFormItem path="openMethod" :label="$t('iconItem.openMethod')">
           <NSelect v-model:value="model.openMethod" :options="options" />
         </NFormItem>
       </NForm>
@@ -214,7 +214,7 @@ function getGroupListOptions() {
 
     <template #footer>
       <NButton type="success" :loading="submitLoading" style="float: right;" @click="handleValidateButtonClick">
-        确定
+        {{ $t('common.save') }}
       </NButton>
     </template>
   </NModal>

src/views/home/index.vue

@@ -3,7 +3,7 @@ import { VueDraggable } from 'vue-draggable-plus'
 import { NBackTop, NButton, NButtonGroup, NDropdown, NModal, NSkeleton, NSpin, useDialog, useMessage } from 'naive-ui'
 import { nextTick, onMounted, ref } from 'vue'
 import { AppIcon, AppStarter, EditItem } from './components'
-import { Clock, SearchBox } from '@/components/deskModule'
+import { Clock, SearchBox, SystemMonitor } from '@/components/deskModule'
 import { SvgIcon } from '@/components/common'
 import { deletes, getListByGroupId, saveSort } from '@/api/panel/itemIcon'
 import { getList as getGroupList } from '@/api/panel/itemIconGroup'
@@ -13,6 +13,7 @@ import { useAuthStore, usePanelState } from '@/store'
 import { PanelPanelConfigStyleEnum, PanelStateNetworkModeEnum } from '@/enums'
 import { VisitMode } from '@/enums/auth'
 import { router } from '@/router'
+import { t } from '@/locales'
 
 interface ItemGroup extends Panel.ItemIconGroup {
   sortStatus?: boolean
@@ -134,18 +135,18 @@ function handleRightMenuSelect(key: string | number) {
       break
     case 'delete':
       dialog.warning({
-        title: '警告',
+        title: t('common.warning'),
-        content: `你确定要删除图标 ${currentRightSelectItem.value?.title} ？`,
+        content: t('common.deleteConfirmByName', { name: currentRightSelectItem.value?.title }),
-        positiveText: '确定',
+        positiveText: t('common.confirm'),
-        negativeText: '取消',
+        negativeText: t('common.cancel'),
         onPositiveClick: () => {
           deletes([currentRightSelectItem.value?.id as number]).then(({ code, msg }) => {
             if (code === 0) {
-              ms.success('已删除')
+              ms.success(t('common.deleteSuccess'))
               getList()
             }
             else {
-              ms.error(`删除失败：${msg}`)
+              ms.error(`${t('common.deleteFail')}:${msg}`)
             }
           })
         },
@@ -183,10 +184,10 @@ function handleEditSuccess(item: Panel.ItemInfo) {
 function handleChangeNetwork(mode: PanelStateNetworkModeEnum) {
   panelState.setNetworkMode(mode)
   if (mode === PanelStateNetworkModeEnum.lan)
-    ms.success('已经切换成局域网模式(此配置仅保存在本地)')
+    ms.success(t('panelHome.changeToLanModelSuccess'))
 
   else
-    ms.success('已经切换成互联网模式(此配置仅保存在本地)')
+    ms.success(t('panelHome.changeToWanModelSuccess'))
 }
 
 // 结束拖拽
@@ -208,11 +209,11 @@ function handleSaveSort(itemGroup: ItemGroup) {
 
     saveSort({ itemIconGroupId: itemGroup.id as number, sortItems: saveItems }).then(({ code, msg }) => {
       if (code === 0) {
-        ms.success('保存成功')
+        ms.success(t('common.saveSuccess'))
         itemGroup.sortStatus = false
       }
       else {
-        ms.error(`保存失败:${msg}`)
+        ms.error(`${t('common.saveFail')}:${msg}`)
       }
     })
   }
@@ -221,7 +222,7 @@ function handleSaveSort(itemGroup: ItemGroup) {
 function getDropdownMenuOptions() {
   const dropdownMenuOptions = [
     {
-      label: '新窗口打开',
+      label: t('iconItem.newWindowOpen'),
       key: 'newWindows',
     },
 
@@ -229,24 +230,24 @@ function getDropdownMenuOptions() {
 
   if (currentRightSelectItem.value?.lanUrl && panelState.networkMode === PanelStateNetworkModeEnum.wan) {
     dropdownMenuOptions.push({
-      label: '打开局域网地址',
+      label: t('panelHome.openLanUrl'),
       key: 'openLanUrl',
     })
   }
 
   if (currentRightSelectItem.value?.lanUrl && panelState.networkMode === PanelStateNetworkModeEnum.lan) {
     dropdownMenuOptions.push({
-      label: '打开互联网地址',
+      label: t('panelHome.openWanUrl'),
       key: 'openWanUrl',
     })
   }
 
   if (authStore.visitMode === VisitMode.VISIT_MODE_LOGIN) {
     dropdownMenuOptions.push({
-      label: '编辑',
+      label: t('common.edit'),
       key: 'edit',
     }, {
-      label: '删除',
+      label: t('common.delete'),
       key: 'delete',
     })
   }
@@ -362,7 +363,20 @@ function handleAddItem(itemIconGroupId?: number) {
         </div>
 
         <!-- 应用盒子 -->
-        <div class="mt-[50px]" :style="{ marginLeft: `${panelState.panelConfig.marginX}px`, marginRight: `${panelState.panelConfig.marginX}px` }">
+        <div :style="{ marginLeft: `${panelState.panelConfig.marginX}px`, marginRight: `${panelState.panelConfig.marginX}px` }">
+          <!-- 系统监控状态 -->
+          <div
+            v-if="panelState.panelConfig.systemMonitorShow
+              && ((panelState.panelConfig.systemMonitorPublicVisitModeShow && authStore.visitMode === VisitMode.VISIT_MODE_PUBLIC)
+                || authStore.visitMode === VisitMode.VISIT_MODE_LOGIN)"
+            class="flex mx-auto"
+          >
+            <SystemMonitor
+              :allow-edit="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
+              :show-title="panelState.panelConfig.systemMonitorShowTitle"
+            />
+          </div>
+
           <!-- 组纵向排列 -->
           <div
             v-for="(itemGroup, itemGroupIndex) in filterItems" :key="itemGroupIndex"
@@ -381,10 +395,10 @@ function handleAddItem(itemIconGroupId?: number) {
                 class="ml-2 delay-100 transition-opacity flex"
                 :class="itemGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
               >
-                <span class="mr-2 cursor-pointer" title="添加快捷图标" @click="handleAddItem(itemGroup.id)">
+                <span class="mr-2 cursor-pointer" :title="t('common.add')" @click="handleAddItem(itemGroup.id)">
                   <SvgIcon class="text-white font-xl" icon="typcn:plus" />
                 </span>
-                <span class="mr-2 cursor-pointer " title="排序组快捷图标" @click="handleSetSortStatus(itemGroupIndex, !itemGroup.sortStatus)">
+                <span class="mr-2 cursor-pointer " :title="t('common.sort')" @click="handleSetSortStatus(itemGroupIndex, !itemGroup.sortStatus)">
                   <SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
                 </span>
               </div>
@@ -414,7 +428,7 @@ function handleAddItem(itemIconGroupId?: number) {
                   <div v-if="itemGroup.items.length === 0" class="not-drag">
                     <AppIcon
                       :class="itemGroup.sortStatus ? 'cursor-move' : 'cursor-pointer'"
-                      :item-info="{ icon: { itemType: 3, text: 'subway:add' }, title: '添加图标', url: '', openMethod: 0 }"
+                      :item-info="{ icon: { itemType: 3, text: 'subway:add' }, title: t('common.add'), url: '', openMethod: 0 }"
                       :icon-text-color="panelState.panelConfig.iconTextColor"
                       :icon-text-info-hide-description="panelState.panelConfig.iconTextInfoHideDescription || false"
                       :icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false"
@@ -430,7 +444,7 @@ function handleAddItem(itemIconGroupId?: number) {
             <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
               <div v-if="itemGroup.items">
                 <VueDraggable
-                  v-model="itemGroup.items" item-key="id" :animation="300"
+                  v-model="itemGroup.items" item-key="sort" :animation="300"
                   class="icon-small-box"
 
                   filter=".not-drag"
@@ -451,7 +465,7 @@ function handleAddItem(itemIconGroupId?: number) {
                   <div v-if="itemGroup.items.length === 0" class="not-drag">
                     <AppIcon
                       class="cursor-pointer"
-                      :item-info="{ icon: { itemType: 3, text: 'subway:add' }, title: '添加图标', url: '', openMethod: 0 }"
+                      :item-info="{ icon: { itemType: 3, text: 'subway:add' }, title: $t('common.add'), url: '', openMethod: 0 }"
                       :icon-text-color="panelState.panelConfig.iconTextColor"
                       :icon-text-info-hide-description="!panelState.panelConfig.iconTextInfoHideDescription"
                       :icon-text-icon-hide-title="panelState.panelConfig.iconTextIconHideTitle || false"
@@ -471,13 +485,14 @@ function handleAddItem(itemIconGroupId?: number) {
                     <SvgIcon class="text-white font-xl" icon="material-symbols:save" />
                   </template>
                   <div>
-                    保存排序
+                    {{ $t('common.saveSort') }}
                   </div>
                 </NButton>
               </div>
             </div>
           </div>
         </div>
+        <div class="mt-5 footer" v-html="panelState.panelConfig.footerHtml" />
       </div>
     </div>
 
@@ -492,7 +507,7 @@ function handleAddItem(itemIconGroupId?: number) {
       <NButtonGroup vertical>
         <NButton
           v-if="panelState.networkMode === PanelStateNetworkModeEnum.lan" color="#2a2a2a6b"
-          title="当前:局域网模式，点击切换成互联网模式" @click="handleChangeNetwork(PanelStateNetworkModeEnum.wan)"
+          :title="t('panelHome.changeToWanModel')" @click="handleChangeNetwork(PanelStateNetworkModeEnum.wan)"
         >
           <template #icon>
             <SvgIcon class="text-white font-xl" icon="material-symbols:lan-outline-rounded" />
@@ -501,7 +516,7 @@ function handleAddItem(itemIconGroupId?: number) {
 
         <NButton
           v-if="panelState.networkMode === PanelStateNetworkModeEnum.wan" color="#2a2a2a6b"
-          title="当前:互联网模式，点击切换成局域网模式" @click="handleChangeNetwork(PanelStateNetworkModeEnum.lan)"
+          :title="t('panelHome.changeToLanModel')" @click="handleChangeNetwork(PanelStateNetworkModeEnum.lan)"
         >
           <template #icon>
             <SvgIcon class="text-white font-xl" icon="mdi:wan" />
@@ -514,7 +529,7 @@ function handleAddItem(itemIconGroupId?: number) {
           </template>
         </NButton>
 
-        <NButton v-if="authStore.visitMode === VisitMode.VISIT_MODE_PUBLIC" color="#2a2a2a6b" title="登录" @click="router.push('/login')">
+        <NButton v-if="authStore.visitMode === VisitMode.VISIT_MODE_PUBLIC" color="#2a2a2a6b" :title="$t('panelHome.goToLogin')" @click="router.push('/login')">
           <template #icon>
             <SvgIcon class="text-white font-xl" icon="material-symbols:account-circle" />
           </template>

src/views/login/index.vue

@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import { NButton, NCard, NForm, NFormItem, NGradientText, NInput, useMessage } from 'naive-ui'
+import { NButton, NCard, NForm, NFormItem, NGradientText, NInput, NSelect, useMessage } from 'naive-ui'
 import { ref } from 'vue'
 import { login } from '@/api'
-import { useAuthStore } from '@/store'
+import { useAppStore, useAuthStore } from '@/store'
 import { SvgIcon } from '@/components/common'
 import { router } from '@/router'
 import { t } from '@/locales'
+import { languageOptions } from '@/utils/defaultData'
+import type { Language } from '@/store/modules/app/helper'
 
 // const userStore = useUserStore()
 const authStore = useAuthStore()
+const appStore = useAppStore()
 const ms = useMessage()
 const loading = ref(false)
+const languageValue = ref<Language>(appStore.language)
+
 // const isShowCaptcha = ref<boolean>(false)
 // const isShowRegister = ref<boolean>(false)
 
@@ -45,11 +50,25 @@ function handleSubmit() {
   // 点击登录按钮触发
   loginPost()
 }
+
+function handleChangeLanuage(value: Language) {
+  languageValue.value = value
+  appStore.setLanguage(value)
+}
 </script>
 
 <template>
   <div class="login-container">
     <NCard class="login-card" style="border-radius: 20px;">
+      <div class="mb-5 flex items-center justify-end">
+        <div class="mr-2">
+          <SvgIcon icon="ion-language" style="width: 20;height: 20;" />
+        </div>
+        <div class="min-w-[100px]">
+          <NSelect v-model:value="languageValue" size="small" :options="languageOptions" @update-value="handleChangeLanuage" />
+        </div>
+      </div>
+
       <div class="login-title  ">
         <NGradientText :size="30" type="success" class="!font-bold">
           {{ $t('common.appName') }}

sun-panel.code-workspace

@@ -0,0 +1,84 @@
+{
+	"folders": [
+		{
+			"name": "frontend",
+			"path": "src"
+		},
+		{
+			"name": "backend",
+			"path": "service"
+		},
+		{
+			"name": "root",
+			"path": ".",
+		}
+	],
+	"settings": {
+		"prettier.enable": false,
+		"editor.formatOnSave": false,
+		"editor.codeActionsOnSave": {
+		  "source.fixAll.eslint": "explicit"
+		},
+		"eslint.validate": [
+		  "javascript",
+		  "javascriptreact",
+		  "typescript",
+		  "typescriptreact",
+		  "vue",
+		  "html",
+		  "json",
+		  "jsonc",
+		  "json5",
+		  "yaml",
+		  "yml",
+		  "markdown"
+		],
+		"cSpell.words": [
+		  "axios",
+		  "bumpp",
+		  "commitlint",
+		  "davinci",
+		  "dockerhub",
+		  "esno",
+		  "highlightjs",
+		  "hljs",
+		  "iconify",
+		  "katex",
+		  "katexmath",
+		  "linkify",
+		  "logprobs",
+		  "mdhljs",
+		  "mila",
+		  "nodata",
+		  "pinia",
+		  "Popconfirm",
+		  "rushstack",
+		  "Sider",
+		  "tailwindcss",
+		  "traptitech",
+		  "tsup",
+		  "Typecheck",
+		  "unplugin",
+		  "VITE",
+		  "vueuse",
+		],
+		"i18n-ally.sortKeys": true,
+		"i18n-ally.enabledParsers": ["ts", "js","json"],
+		"i18n-ally.enabledFrameworks": [
+			"vue"
+		],
+		"i18n-ally.dirStructure": "auto",
+		"i18n-ally.localesPaths": [
+			"locales"
+		],
+		"i18n-ally.sourceLanguage": "zh-CN",
+		"i18n-ally.keystyle": "nested",
+	  },
+	"extensions": {
+		"recommendations": [
+			"Vue.volar",
+			"dbaeumer.vscode-eslint"
+		]
+	},
+	
+}