From baf64a927280fdb04579d5afeff1b5d50e56556a Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Thu, 4 Jan 2024 12:08:39 +0800
Subject: [PATCH 01/14] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E5=90=84=E9=A1=B9=E7=9B=91=E6=8E=A7=E7=9A=84=E5=8D=95=E7=8B=AC?=
 =?UTF-8?q?api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apiData/systemApiStructs/monitor.go       |  5 ++
 service/api/api_v1/system/monitor.go          | 69 +++++++++++++++++++
 service/global/global.go                      |  2 +-
 service/global/monitor.go                     | 10 ++-
 service/initialize/A_ENTER.go                 |  4 +-
 service/lib/monitor/monitor.go                | 14 ++++
 service/router/system/monitor.go              |  3 +
 7 files changed, 102 insertions(+), 5 deletions(-)
 create mode 100644 service/api/api_v1/common/apiData/systemApiStructs/monitor.go

diff --git a/service/api/api_v1/common/apiData/systemApiStructs/monitor.go b/service/api/api_v1/common/apiData/systemApiStructs/monitor.go
new file mode 100644
index 0000000..f39f325
--- /dev/null
+++ b/service/api/api_v1/common/apiData/systemApiStructs/monitor.go
@@ -0,0 +1,5 @@
+package systemApiStructs
+
+type MonitorGetDiskStateByPathReq struct {
+	Path string `json:"path"`
+}
diff --git a/service/api/api_v1/system/monitor.go b/service/api/api_v1/system/monitor.go
index e47308f..f830ae8 100644
--- a/service/api/api_v1/system/monitor.go
+++ b/service/api/api_v1/system/monitor.go
@@ -1,14 +1,21 @@
 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)
@@ -16,3 +23,65 @@ func (a *MonitorApi) GetAll(c *gin.Context) {
 	}
 	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("读取缓存的的RAM信息")
+		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)
+}
diff --git a/service/global/global.go b/service/global/global.go
index 20d6910..b24a5c3 100644
--- a/service/global/global.go
+++ b/service/global/global.go
@@ -35,6 +35,6 @@ var (
 	Db                  *gorm.DB
 	RedisDb             *redis.Client
 	SystemSetting       *systemSetting.SystemSettingCache
-	SystemMonitor       cache.Cacher[ModelSystemMonitor]
+	SystemMonitor       cache.Cacher[interface{}]
 	RateLimit           *RateLimiter
 )
diff --git a/service/global/monitor.go b/service/global/monitor.go
index daaa42c..e3e3db7 100644
--- a/service/global/monitor.go
+++ b/service/global/monitor.go
@@ -1,6 +1,14 @@
 package global
 
-import "sun-panel/lib/monitor"
+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"`
diff --git a/service/initialize/A_ENTER.go b/service/initialize/A_ENTER.go
index 010b732..78abfd7 100644
--- a/service/initialize/A_ENTER.go
+++ b/service/initialize/A_ENTER.go
@@ -12,7 +12,6 @@ import (
 	"sun-panel/initialize/other"
 	"sun-panel/initialize/redis"
 	"sun-panel/initialize/runlog"
-	"sun-panel/initialize/systemMonitor"
 	"sun-panel/initialize/systemSettingCache"
 	"sun-panel/initialize/userToken"
 	"sun-panel/lib/cmn"
@@ -90,8 +89,7 @@ func InitApp() error {
 	// 其他的初始化
 	global.VerifyCodeCachePool = other.InitVerifyCodeCachePool()
 	global.SystemSetting = systemSettingCache.InItSystemSettingCache()
-	global.SystemMonitor = global.NewCache[global.ModelSystemMonitor](5*time.Hour, -1, "systemMonitorCache")
-	systemMonitor.Start(global.SystemMonitor, 3*time.Second)
+	global.SystemMonitor = global.NewCache[interface{}](5*time.Hour, -1, "systemMonitorCache")
 
 	return nil
 }
diff --git a/service/lib/monitor/monitor.go b/service/lib/monitor/monitor.go
index 16c29df..9c19435 100644
--- a/service/lib/monitor/monitor.go
+++ b/service/lib/monitor/monitor.go
@@ -97,6 +97,20 @@ func GetDiskInfo() ([]DiskInfo, error) {
 	return disks, nil
 }
 
+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{}
diff --git a/service/router/system/monitor.go b/service/router/system/monitor.go
index ced3291..43caa02 100644
--- a/service/router/system/monitor.go
+++ b/service/router/system/monitor.go
@@ -15,5 +15,8 @@ func InitMonitorRouter(router *gin.RouterGroup) {
 	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)
 	}
 }

From 1474f796fc29051b7e0813839dbb6bdc22293990 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Thu, 4 Jan 2024 16:22:33 +0800
Subject: [PATCH 02/14] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=A4=A7=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E5=B0=8F=E5=9B=BE=E6=A0=87=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/systemMonitor.ts               |  19 ++
 .../AppIconSystemMonitor/CPU.vue              |  83 +++++
 .../AppIconSystemMonitor/Disk.vue             |  93 ++++++
 .../AppIconSystemMonitor/Memory.vue           |  87 ++++++
 .../AppIconSystemMonitor/index.vue            | 148 +++++++++
 .../deskModule/SystemMonitor/index copy.vue   | 171 +++++++++++
 .../deskModule/SystemMonitor/index.vue        | 286 ++++++++----------
 .../deskModule/SystemMonitor/typings.ts       |  22 ++
 src/views/home/index.vue                      |   9 +-
 9 files changed, 759 insertions(+), 159 deletions(-)
 create mode 100644 src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
 create mode 100644 src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
 create mode 100644 src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
 create mode 100644 src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
 create mode 100644 src/components/deskModule/SystemMonitor/index copy.vue
 create mode 100644 src/components/deskModule/SystemMonitor/typings.ts

diff --git a/src/api/system/systemMonitor.ts b/src/api/system/systemMonitor.ts
index c7f6b20..684c90b 100644
--- a/src/api/system/systemMonitor.ts
+++ b/src/api/system/systemMonitor.ts
@@ -5,3 +5,22 @@ export function getAll<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',
+  })
+}
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
new file mode 100644
index 0000000..cd98588
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { NProgress } from 'naive-ui'
+import type { ProgressStyle } from '../typings'
+import { getCpuState } from '@/api/system/systemMonitor'
+import { PanelPanelConfigStyleEnum } from '@/enums'
+
+interface Prop {
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  progressStyle: ProgressStyle
+  refreshInterval: number
+}
+
+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">
+    <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
+      <div class="mb-1">
+        <span>
+          CPU
+        </span>
+        <span class="float-right">
+          {{ correctionNumber(cpuState?.usages[0] || 0) }}%
+        </span>
+      </div>
+      <NProgress
+        type="line"
+        :color="progressStyle.color"
+        :rail-color="progressStyle.railColor"
+        :height="progressStyle.height"
+        :percentage="correctionNumber(cpuState?.usages[0] || 0)"
+        :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="progressStyle.color"
+          :rail-color="progressStyle.railColor"
+          type="dashboard"
+          :percentage="correctionNumber(cpuState?.usages[0] || 0)" :stroke-width="15"
+          style="width: 50px;"
+        >
+          <div class="text-white" style="font-size: 10px;">
+            {{ correctionNumber(cpuState?.usages[0] || 0, 1) }}%
+          </div>
+        </NProgress>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
new file mode 100644
index 0000000..15fc9c5
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { NProgress } from 'naive-ui'
+import type { ProgressStyle } from '../typings'
+import { PanelPanelConfigStyleEnum } from '@/enums'
+import { bytesToSize } from '@/utils/cmn'
+import { getDiskStateByPath } from '@/api/system/systemMonitor'
+
+interface Prop {
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  progressStyle: ProgressStyle
+  refreshInterval: number
+  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">
+    <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
+      <div class="mb-1">
+        <span>
+          {{ diskState?.mountpoint }}
+        </span>
+        <span class="float-right">
+          {{ formatdiskSize(formatdiskToByte(diskState?.total || 0)) }}/{{ formatdiskSize(formatdiskToByte(diskState?.free || 0)) }}
+        </span>
+      </div>
+      <NProgress
+        :color="progressStyle.color"
+        :rail-color="progressStyle.railColor"
+        :height="progressStyle.height"
+        type="line"
+        :percentage="diskState?.usedPercent"
+        :show-indicator="false"
+        :stroke-width="15"
+        style="width: 150px;"
+      />
+    </div>
+    <div v-else>
+      <div class="flex justify-center h-full w-full mt-3">
+        <NProgress
+          :color="progressStyle.color"
+          :rail-color="progressStyle.railColor"
+          type="dashboard"
+          :percentage="correctionNumber(diskState?.usedPercent || 0)" :stroke-width="15"
+          style="width: 50px;"
+        >
+          <div class="text-white" style="font-size: 10px;">
+            {{ correctionNumber(diskState?.usedPercent || 0, 1) }}%
+          </div>
+        </NProgress>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
new file mode 100644
index 0000000..222bb08
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { NProgress } from 'naive-ui'
+import type { ProgressStyle } from '../typings'
+import { getMemonyState } from '@/api/system/systemMonitor'
+import { PanelPanelConfigStyleEnum } from '@/enums'
+import { bytesToSize } from '@/utils/cmn'
+
+interface Prop {
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  progressStyle: ProgressStyle
+  refreshInterval: number
+}
+
+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">
+    <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
+      <div class="mb-1">
+        <span>
+          RAM
+        </span>
+        <span class="float-right">
+          {{ formatMemorySize(memoryState?.total || 0) }}/{{ formatMemorySize(memoryState?.free || 0) }}
+        </span>
+      </div>
+      <NProgress
+        type="line"
+        :color="progressStyle.color"
+        :rail-color="progressStyle.railColor"
+        :height="progressStyle.height"
+        :percentage="memoryState?.usedPercent"
+        :show-indicator="false"
+        :stroke-width="15" style="width: 150px;"
+      />
+    </div>
+    <div v-else>
+      <div class="flex justify-center h-full w-full mt-3">
+        <NProgress
+          :color="progressStyle.color"
+          :rail-color="progressStyle.railColor"
+          type="dashboard"
+          :percentage="correctionNumber(memoryState?.usedPercent || 0)" :stroke-width="15"
+          style="width: 50px;"
+        >
+          <div class="text-white" style="font-size: 10px;">
+            {{ correctionNumber(memoryState?.usedPercent || 0, 1) }}%
+          </div>
+        </NProgress>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
new file mode 100644
index 0000000..4dda5ec
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+// -------------------
+// 系统监控图标临时使用（与 AppIcon/index.vue 一致）
+// 如果确定这种方案将 AppIcon/index.vue 封装成通用组件
+// -------------------
+
+import { computed } from 'vue'
+import { MonitorType } from '../typings'
+import type { CardStyle } from '../typings'
+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 {
+  size?: number // 默认70
+  extendParam?: { [key: string]: [value: any] }
+  iconTextColor?: string
+  iconTextIconHideTitle: boolean
+  cardTypeStyle: PanelPanelConfigStyleEnum
+  monitorType: string
+  cardStyle: CardStyle
+}
+
+const props = withDefaults(defineProps<Prop>(), {
+  size: 70,
+})
+
+const defaultBackground = '#2a2a2a6b'
+const refreshInterval = 5
+const svgStyle = {
+  width: '35px',
+  height: '35px',
+}
+
+const calculateLuminance = (color: string) => {
+  const hex = color.replace(/^#/, '')
+  const r = parseInt(hex.substring(0, 2), 16)
+  const g = parseInt(hex.substring(2, 4), 16)
+  const b = parseInt(hex.substring(4, 6), 16)
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255
+}
+
+const textColor = computed(() => {
+  const luminance = calculateLuminance(props.cardStyle.background || defaultBackground)
+  return luminance > 0.5 ? 'black' : 'white'
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <!-- 详情图标 -->
+    <div
+      v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info"
+      class="w-full rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] flex"
+      :style="{ backgroundColor: cardStyle.background }"
+    >
+      <!-- 图标 -->
+      <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="svgStyle" />
+          <SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="svgStyle" />
+          <SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="svgStyle" />
+        </div>
+      </div>
+
+      <!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
+      <div
+        class=" w-full text-white flex items-center"
+        :style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)' }"
+      >
+        <CardCPU
+          v-if="monitorType === MonitorType.cpu"
+          :card-type-style="PanelPanelConfigStyleEnum.info"
+          :progress-style="extendParam?.progressStyle as any"
+          :refresh-interval="refreshInterval"
+        />
+        <Memory
+          v-else-if="monitorType === MonitorType.memory"
+          :card-type-style="PanelPanelConfigStyleEnum.info"
+          :progress-style="extendParam?.progressStyle as any"
+          :refresh-interval="refreshInterval"
+        />
+        <Disk
+          v-else-if="monitorType === MonitorType.disk"
+          :card-type-style="PanelPanelConfigStyleEnum.info"
+          :progress-style="extendParam?.progressStyle as any"
+          :path="extendParam?.path as any"
+          :refresh-interval="refreshInterval"
+        />
+      </div>
+    </div>
+
+    <!-- 极简图标（APP） -->
+    <div
+      v-if="cardTypeStyle === PanelPanelConfigStyleEnum.icon"
+    >
+      <div
+        class="overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
+        :style="{ backgroundColor: cardStyle.background }"
+      >
+        <CardCPU
+          v-if="monitorType === MonitorType.cpu"
+          :card-type-style="PanelPanelConfigStyleEnum.icon"
+          :progress-style="extendParam?.progressStyle as any"
+          :refresh-interval="refreshInterval"
+        />
+        <Memory
+          v-else-if="monitorType === MonitorType.memory"
+          :card-type-style="PanelPanelConfigStyleEnum.icon"
+          :progress-style="extendParam?.progressStyle as any"
+          :refresh-interval="refreshInterval"
+        />
+        <Disk
+          v-else-if="monitorType === MonitorType.disk"
+          :card-type-style="PanelPanelConfigStyleEnum.icon"
+          :progress-style="extendParam?.progressStyle as any"
+          :path="extendParam?.path as any"
+          :refresh-interval="refreshInterval"
+        />
+      </div>
+      <div
+        v-if="!iconTextIconHideTitle"
+        class="text-center app-icon-text-shadow cursor-pointer mt-[2px]"
+        :style="{ color: iconTextColor }"
+      >
+        <span
+          v-if="monitorType === MonitorType.cpu"
+        >
+          CPU
+        </span>
+
+        <span
+          v-else-if="monitorType === MonitorType.memory"
+        >
+          RAM
+        </span>
+
+        <span
+          v-else-if="monitorType === MonitorType.disk"
+        >
+          {{ extendParam?.path }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/deskModule/SystemMonitor/index copy.vue b/src/components/deskModule/SystemMonitor/index copy.vue
new file mode 100644
index 0000000..7c80e28
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/index copy.vue	
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { NProgress } from 'naive-ui'
+import { getAll } from '@/api/system/systemMonitor'
+import { SvgIcon } from '@/components/common'
+import { bytesToSize } from '@/utils/cmn'
+
+interface ProgressStyle {
+  color: string
+  railColor: string
+  height: number
+}
+
+const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
+const progressStyle = ref<ProgressStyle>({
+  color: 'white',
+  railColor: 'rgba(0, 0, 0, 0.5)',
+  height: 5,
+})
+const svgStyle = {
+  width: '25px',
+  height: '25px',
+}
+
+async function getData() {
+  try {
+    const { data, code } = await getAll<SystemMonitor.GetAllRes>()
+    if (code === 0)
+      systemMonitorData.value = data
+  }
+  catch (error) {
+
+  }
+}
+
+function correctionNumber(v: number, keepNum = 2): number {
+  return v === 0 ? 0 : Number(v.toFixed(keepNum))
+}
+
+function formatMemorySize(v: number): string {
+  return bytesToSize(v)
+}
+
+function formatdiskSize(v: number): string {
+  return bytesToSize(v)
+}
+
+function formatdiskToByte(v: number): number {
+  return v * 1024 * 1024
+}
+onMounted(() => {
+  getData()
+  // timer = setInterval(() => {
+  //   getData()
+  // }, 5000)
+})
+
+onUnmounted(() => {
+  // clearInterval(timer)
+})
+</script>
+
+<template>
+  <div class="w-full  system-monitor flex items-center px-2 text-white overflow-auto">
+    <!-- <div class="flex flex-col items-center justify-center ">
+      <div>
+        <NProgress type="dashboard" :percentage="correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0)" :stroke-width="15" style="width: 50px;">
+          <div class="text-white text-xs">
+            {{ correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0, 1) }}%
+          </div>
+        </NProgress>
+      </div>
+      <span>
+        CPU
+      </span>
+    </div> -->
+    <div class="text-xs mr-10 flex justify-center items-center">
+      <div class="mr-2">
+        <SvgIcon icon="solar-cpu-bold" :style="svgStyle" />
+      </div>
+      <div>
+        <div class="mb-1">
+          <span>
+            CPU
+          </span>
+          <span class="float-right">
+            {{ correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0) }}%
+          </span>
+        </div>
+        <NProgress
+          type="line"
+          :color="progressStyle.color"
+          :rail-color="progressStyle.railColor"
+          :height="progressStyle.height"
+          :percentage="correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0)"
+          :show-indicator="false"
+          :stroke-width="15"
+          style="width: 150px;"
+        />
+      </div>
+    </div>
+
+    <div class="text-xs mr-10 flex justify-center items-center">
+      <div class="mr-2">
+        <SvgIcon icon="material-symbols-memory-alt-rounded" :style="svgStyle" />
+      </div>
+      <div>
+        <div class="mb-1">
+          <span>
+            RAM
+          </span>
+          <span class="float-right">
+            {{ formatMemorySize(systemMonitorData?.memoryInfo.total || 0) }}/{{ formatMemorySize(systemMonitorData?.memoryInfo.free || 0) }}
+          </span>
+        </div>
+        <NProgress
+          type="line"
+          :color="progressStyle.color"
+          :rail-color="progressStyle.railColor"
+          :height="progressStyle.height"
+          :percentage="systemMonitorData?.memoryInfo.usedPercent"
+          :show-indicator="false"
+          :stroke-width="15" style="width: 150px;"
+        />
+      </div>
+    </div>
+
+    <!-- <div class="text-xs mr-2">
+      <div class="mb-1">
+        <span>
+          网络:{{ systemMonitorData?.netIOCountersInfo[0].name }}
+        </span>
+      </div>
+      <div>
+        <span class="float-right">
+          上行：{{ netIOToKB(systemMonitorData?.netIOCountersInfo[0].bytesSent || 0) }}
+          下行：{{ netIOToKB(systemMonitorData?.netIOCountersInfo[0].bytesRecv || 0) }}
+        </span>
+      </div>
+    </div> -->
+
+    <!-- 磁盘信息 -->
+    <div v-for=" item, index in systemMonitorData?.diskInfo" :key="index">
+      <div class="text-xs mr-10 flex justify-center items-center">
+        <div class="mr-2">
+          <SvgIcon icon="clarity-hard-disk-solid" :style="svgStyle" />
+        </div>
+        <div>
+          <div class="mb-1">
+            <span>
+              {{ item.mountpoint }}
+            </span>
+            <span class="float-right">
+              {{ formatdiskSize(formatdiskToByte(item.total || 0)) }}/{{ formatdiskSize(formatdiskToByte(item.free || 0)) }}
+            </span>
+          </div>
+          <NProgress
+            :color="progressStyle.color"
+            :rail-color="progressStyle.railColor"
+            :height="progressStyle.height"
+            type="line"
+            :percentage="item.usedPercent"
+            :show-indicator="false"
+            :stroke-width="15"
+            style="width: 150px;"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/deskModule/SystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/index.vue
index d2ccc9a..e11e219 100644
--- a/src/components/deskModule/SystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/index.vue
@@ -1,176 +1,152 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-import { NProgress } from 'naive-ui'
-import { getAll } from '@/api/system/systemMonitor'
-import { SvgIcon } from '@/components/common'
-import { bytesToSize } from '@/utils/cmn'
+import { ref } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
+import AppIconSystemMonitor from './AppIconSystemMonitor/index.vue'
+import { MonitorType } from './typings'
+import type { CardStyle, MonitorData, ProgressStyle } from './typings'
+import { useAuthStore, usePanelState } from '@/store'
+import { PanelPanelConfigStyleEnum } from '@/enums'
 
-interface ProgressStyle {
-  color: string
-  railColor: string
-  height: number
-}
-
-let timer: NodeJS.Timer
+const panelState = usePanelState()
+const authStore = useAuthStore()
 const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
 const progressStyle = ref<ProgressStyle>({
   color: 'white',
-  railColor: 'rgba(0, 0, 0, 0.5)',
+  railColor: 'rgba(0, 0, 0, 0.2)',
   height: 5,
 })
-const svgStyle = {
-  width: '25px',
-  height: '25px',
+
+const cardStyle: CardStyle = {
+  background: '#2a2a2a6b',
 }
 
-async function getData() {
-  try {
-    const { data, code } = await getAll<SystemMonitor.GetAllRes>()
-    if (code === 0)
-      systemMonitorData.value = data
-  }
-  catch (error) {
-
-  }
-}
-
-function correctionNumber(v: number, keepNum = 2): number {
-  return v === 0 ? 0 : Number(v.toFixed(keepNum))
-}
-
-// function formatMemoryToGB(v: number): number {
-//   return correctionNumber(v / 1024 / 1024 / 1024)
-// }
-
-function formatMemorySize(v: number): string {
-  return bytesToSize(v)
-}
-
-function formatdiskSize(v: number): string {
-  return bytesToSize(v)
-}
-
-function formatdiskToByte(v: number): number {
-  return v * 1024 * 1024
-}
-onMounted(() => {
-  getData()
-  timer = setInterval(() => {
-    getData()
-  }, 5000)
-})
-
-onUnmounted(() => {
-  clearInterval(timer)
-})
+const monitorDatas = ref<MonitorData[]>([
+  {
+    monitorType: MonitorType.cpu,
+    extendParam: {
+      progressStyle,
+    },
+    description: 'CPU状态',
+    cardStyle,
+  },
+  {
+    monitorType: MonitorType.memory,
+    cardStyle,
+    extendParam: {
+      progressStyle,
+    },
+  },
+  {
+    monitorType: MonitorType.disk,
+    extendParam: {
+      progressStyle,
+      path: 'C:',
+    },
+    cardStyle,
+  },
+])
 </script>
 
 <template>
-  <div class="w-full p-5 px-5 bg-[#2a2a2a6b] system-monitor flex items-center px-2 text-white overflow-auto">
-    <!-- <div class="flex flex-col items-center justify-center ">
-      <div>
-        <NProgress type="dashboard" :percentage="correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0)" :stroke-width="15" style="width: 50px;">
-          <div class="text-white text-xs">
-            {{ correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0, 1) }}%
-          </div>
-        </NProgress>
-      </div>
-      <span>
-        CPU
+  <div class="w-full">
+    <!-- 分组标题 -->
+    <div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
+      <span class="text-shadow">
+        系统状态
       </span>
-    </div> -->
-    <div class="text-xs mr-10 flex justify-center items-center">
-      <div class="mr-2">
-        <SvgIcon icon="solar-cpu-bold" :style="svgStyle" />
-      </div>
-      <div>
-        <div class="mb-1">
-          <span>
-            CPU
-          </span>
-          <span class="float-right">
-            {{ correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0) }}%
-          </span>
-        </div>
-        <NProgress
-          type="line"
-          :color="progressStyle.color"
-          :rail-color="progressStyle.railColor"
-          :height="progressStyle.height"
-          :percentage="correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0)"
-          :show-indicator="false"
-          :stroke-width="15"
-          style="width: 150px;"
-        />
-      </div>
+      <!-- <div
+        v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
+        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)">
+          <SvgIcon class="text-white font-xl" icon="typcn:plus" />
+        </span>
+        <span class="mr-2 cursor-pointer " title="排序组快捷图标" @click="handleSetSortStatus(itemGroupIndex, !itemGroup.sortStatus)">
+          <SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
+        </span>
+      </div> -->
     </div>
 
-    <div class="text-xs mr-10 flex justify-center items-center">
-      <div class="mr-2">
-        <SvgIcon icon="material-symbols-memory-alt-rounded" :style="svgStyle" />
-      </div>
-      <div>
-        <div class="mb-1">
-          <span>
-            RAM
-          </span>
-          <span class="float-right">
-            {{ formatMemorySize(systemMonitorData?.memoryInfo.total || 0) }}/{{ formatMemorySize(systemMonitorData?.memoryInfo.free || 0) }}
-          </span>
-        </div>
-        <NProgress
-          type="line"
-          :color="progressStyle.color"
-          :rail-color="progressStyle.railColor"
-          :height="progressStyle.height"
-          :percentage="systemMonitorData?.memoryInfo.usedPercent"
-          :show-indicator="false"
-          :stroke-width="15" style="width: 150px;"
-        />
-      </div>
-    </div>
-
-    <!-- <div class="text-xs mr-2">
-      <div class="mb-1">
-        <span>
-          网络:{{ systemMonitorData?.netIOCountersInfo[0].name }}
-        </span>
-      </div>
-      <div>
-        <span class="float-right">
-          上行：{{ netIOToKB(systemMonitorData?.netIOCountersInfo[0].bytesSent || 0) }}
-          下行：{{ netIOToKB(systemMonitorData?.netIOCountersInfo[0].bytesRecv || 0) }}
-        </span>
-      </div>
-    </div> -->
-
-    <!-- 磁盘信息 -->
-    <div v-for=" item, index in systemMonitorData?.diskInfo" :key="index">
-      <div class="text-xs mr-10 flex justify-center items-center">
-        <div class="mr-2">
-          <SvgIcon icon="clarity-hard-disk-solid" :style="svgStyle" />
-        </div>
-        <div>
-          <div class="mb-1">
-            <span>
-              {{ item.mountpoint }}
-            </span>
-            <span class="float-right">
-              {{ formatdiskSize(formatdiskToByte(item.total || 0)) }}/{{ formatdiskSize(formatdiskToByte(item.free || 0)) }}
-            </span>
-          </div>
-          <NProgress
-            :color="progressStyle.color"
-            :rail-color="progressStyle.railColor"
-            :height="progressStyle.height"
-            type="line"
-            :percentage="item.usedPercent"
-            :show-indicator="false"
-            :stroke-width="15"
-            style="width: 150px;"
+    <!-- 详情图标 -->
+    <!-- <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info"> -->
+    <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
+      <VueDraggable
+        v-model="monitorDatas" item-key="sort" :animation="300"
+        class="icon-info-box"
+        filter=".not-drag"
+      >
+        <div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, 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"
+        >
+          <div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, 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="itemGroup.sortStatus" class="flex mt-[10px]">
+        <div>
+          <NButton color="#2a2a2a6b" @click="handleSaveSort(itemGroup)">
+            <template #icon>
+              <SvgIcon class="text-white font-xl" icon="material-symbols:save" />
+            </template>
+            <div>
+              保存排序
+            </div>
+          </NButton>
+        </div>
+      </div> -->
   </div>
 </template>
+
+<style>
+.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>
diff --git a/src/components/deskModule/SystemMonitor/typings.ts b/src/components/deskModule/SystemMonitor/typings.ts
new file mode 100644
index 0000000..0aee70f
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/typings.ts
@@ -0,0 +1,22 @@
+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
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 0ee1f6d..9b81d90 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -333,9 +333,6 @@ function handleAddItem(itemIconGroupId?: number) {
     />
     <div class="mask" :style="{ backgroundColor: `rgba(0,0,0,${panelState.panelConfig.backgroundMaskNumber})` }" />
     <div ref="scrollContainerRef" class="absolute w-full h-full overflow-auto">
-      <div v-if="panelState.panelConfig.searchBoxShow" class="flex mx-auto ">
-        <SystemMonitor @itemSearch="itemFrontEndSearch" />
-      </div>
       <div
         class="p-2.5 mx-auto"
         :style="{
@@ -370,6 +367,10 @@ function handleAddItem(itemIconGroupId?: number) {
             <SystemMonitor @itemSearch="itemFrontEndSearch" />
           </div> -->
 
+          <div v-if="panelState.panelConfig.searchBoxShow" class="flex mx-auto ">
+            <SystemMonitor />
+          </div>
+
           <!-- 组纵向排列 -->
           <div
             v-for="(itemGroup, itemGroupIndex) in filterItems" :key="itemGroupIndex"
@@ -437,7 +438,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"

From 0d0421c8ebc749889422c416970fd5760f2a5f6a Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Fri, 5 Jan 2024 13:27:29 +0800
Subject: [PATCH 03/14] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E4=BA=86=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ItemCard/index.vue      |  53 +++++++
 src/components/common/index.ts                |   2 +
 .../AppIconSystemMonitor/CPU.vue              |  47 ++----
 .../AppIconSystemMonitor/index.vue            | 129 +++++++---------
 .../Edit/GenericProgressStyleEditor/index.vue |  84 +++++++++++
 .../Edit/ProgressStyleEditor/index.vue        |  35 +++++
 .../deskModule/SystemMonitor/Edit/index.vue   |  68 +++++++++
 .../components/GenericMonitorCard/index.vue   |  60 ++++++++
 .../components/GenericProgress/index.vue      |  57 +++++++
 .../deskModule/SystemMonitor/index.vue        | 139 ++++++++++++------
 .../deskModule/SystemMonitor/typings.ts       |   7 +
 src/views/exception/test/zujian.vue           |   0
 .../home/components/EditItem/IconEditor.vue   |   2 +
 13 files changed, 520 insertions(+), 163 deletions(-)
 create mode 100644 src/components/common/ItemCard/index.vue
 create mode 100644 src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue
 create mode 100644 src/components/deskModule/SystemMonitor/Edit/ProgressStyleEditor/index.vue
 create mode 100644 src/components/deskModule/SystemMonitor/Edit/index.vue
 create mode 100644 src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
 create mode 100644 src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue
 create mode 100644 src/views/exception/test/zujian.vue

diff --git a/src/components/common/ItemCard/index.vue b/src/components/common/ItemCard/index.vue
new file mode 100644
index 0000000..e6b6f9f
--- /dev/null
+++ b/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>
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 990d2e8..72ff205 100644
--- a/src/components/common/index.ts
+++ b/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,
 }
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
index cd98588..cac1835 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import { NProgress } from 'naive-ui'
 import type { ProgressStyle } from '../typings'
+import GenericProgress from '../components/GenericProgress/index.vue'
 import { getCpuState } from '@/api/system/systemMonitor'
-import { PanelPanelConfigStyleEnum } from '@/enums'
+import type { PanelPanelConfigStyleEnum } from '@/enums'
 
 interface Prop {
   cardTypeStyle: PanelPanelConfigStyleEnum
@@ -44,40 +44,13 @@ onUnmounted(() => {
 
 <template>
   <div class="w-full">
-    <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
-      <div class="mb-1">
-        <span>
-          CPU
-        </span>
-        <span class="float-right">
-          {{ correctionNumber(cpuState?.usages[0] || 0) }}%
-        </span>
-      </div>
-      <NProgress
-        type="line"
-        :color="progressStyle.color"
-        :rail-color="progressStyle.railColor"
-        :height="progressStyle.height"
-        :percentage="correctionNumber(cpuState?.usages[0] || 0)"
-        :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="progressStyle.color"
-          :rail-color="progressStyle.railColor"
-          type="dashboard"
-          :percentage="correctionNumber(cpuState?.usages[0] || 0)" :stroke-width="15"
-          style="width: 50px;"
-        >
-          <div class="text-white" style="font-size: 10px;">
-            {{ correctionNumber(cpuState?.usages[0] || 0, 1) }}%
-          </div>
-        </NProgress>
-      </div>
-    </div>
+    <GenericProgress
+      :progress-style="progressStyle"
+      :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="black"
+    />
   </div>
 </template>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
index 4dda5ec..48afeb4 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
@@ -4,18 +4,18 @@
 // 如果确定这种方案将 AppIcon/index.vue 封装成通用组件
 // -------------------
 
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { MonitorType } from '../typings'
 import type { CardStyle } from '../typings'
 import CardCPU from './CPU.vue'
 import Memory from './Memory.vue'
 import Disk from './Disk.vue'
-import { SvgIcon } from '@/components/common'
+import { ItemCard, SvgIcon } from '@/components/common'
 import { PanelPanelConfigStyleEnum } from '@/enums'
 
 interface Prop {
   size?: number // 默认70
-  extendParam?: { [key: string]: [value: any] }
+  extendParam?: any
   iconTextColor?: string
   iconTextIconHideTitle: boolean
   cardTypeStyle: PanelPanelConfigStyleEnum
@@ -28,6 +28,7 @@ const props = withDefaults(defineProps<Prop>(), {
 })
 
 const defaultBackground = '#2a2a2a6b'
+const iconText = ref('自定义')
 const refreshInterval = 5
 const svgStyle = {
   width: '35px',
@@ -50,99 +51,69 @@ const textColor = computed(() => {
 
 <template>
   <div class="w-full">
-    <!-- 详情图标 -->
-    <div
-      v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info"
-      class="w-full rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] flex"
-      :style="{ backgroundColor: cardStyle.background }"
+    <ItemCard
+      icon-text-icon-hide-title
+      :card-type-style="cardTypeStyle"
+      :icon-text="iconText"
+      class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
     >
-      <!-- 图标 -->
-      <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="svgStyle" />
-          <SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="svgStyle" />
-          <SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="svgStyle" />
+      <template #info>
+        <!-- 图标 -->
+        <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="svgStyle" />
+            <SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="svgStyle" />
+            <SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="svgStyle" />
+          </div>
         </div>
-      </div>
 
-      <!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
-      <div
-        class=" w-full text-white flex items-center"
-        :style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)' }"
-      >
-        <CardCPU
-          v-if="monitorType === MonitorType.cpu"
-          :card-type-style="PanelPanelConfigStyleEnum.info"
-          :progress-style="extendParam?.progressStyle as any"
-          :refresh-interval="refreshInterval"
-        />
-        <Memory
-          v-else-if="monitorType === MonitorType.memory"
-          :card-type-style="PanelPanelConfigStyleEnum.info"
-          :progress-style="extendParam?.progressStyle as any"
-          :refresh-interval="refreshInterval"
-        />
-        <Disk
-          v-else-if="monitorType === MonitorType.disk"
-          :card-type-style="PanelPanelConfigStyleEnum.info"
-          :progress-style="extendParam?.progressStyle as any"
-          :path="extendParam?.path as any"
-          :refresh-interval="refreshInterval"
-        />
-      </div>
-    </div>
-
-    <!-- 极简图标（APP） -->
-    <div
-      v-if="cardTypeStyle === PanelPanelConfigStyleEnum.icon"
-    >
-      <div
-        class="overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
-        :style="{ backgroundColor: cardStyle.background }"
-      >
+        <!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
+        <div
+          class=" w-full text-white flex items-center"
+          :style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)' }"
+        >
+          <CardCPU
+            v-if="monitorType === MonitorType.cpu"
+            :card-type-style="PanelPanelConfigStyleEnum.info"
+            :progress-style="extendParam?.progressStyle"
+            :refresh-interval="refreshInterval"
+          />
+          <Memory
+            v-else-if="monitorType === MonitorType.memory"
+            :card-type-style="PanelPanelConfigStyleEnum.info"
+            :progress-style="extendParam?.progressStyle"
+            :refresh-interval="refreshInterval"
+          />
+          <Disk
+            v-else-if="monitorType === MonitorType.disk"
+            :card-type-style="PanelPanelConfigStyleEnum.info"
+            :progress-style="extendParam?.progressStyle"
+            :path="extendParam?.path"
+            :refresh-interval="refreshInterval"
+          />
+        </div>
+      </template>
+      <template #small>
         <CardCPU
           v-if="monitorType === MonitorType.cpu"
           :card-type-style="PanelPanelConfigStyleEnum.icon"
-          :progress-style="extendParam?.progressStyle as any"
+          :progress-style="extendParam?.progressStyle"
           :refresh-interval="refreshInterval"
         />
         <Memory
           v-else-if="monitorType === MonitorType.memory"
           :card-type-style="PanelPanelConfigStyleEnum.icon"
-          :progress-style="extendParam?.progressStyle as any"
+          :progress-style="extendParam?.progressStyle"
           :refresh-interval="refreshInterval"
         />
         <Disk
           v-else-if="monitorType === MonitorType.disk"
           :card-type-style="PanelPanelConfigStyleEnum.icon"
-          :progress-style="extendParam?.progressStyle as any"
-          :path="extendParam?.path as any"
+          :progress-style="extendParam?.progressStyle"
+          :path="extendParam?.path"
           :refresh-interval="refreshInterval"
         />
-      </div>
-      <div
-        v-if="!iconTextIconHideTitle"
-        class="text-center app-icon-text-shadow cursor-pointer mt-[2px]"
-        :style="{ color: iconTextColor }"
-      >
-        <span
-          v-if="monitorType === MonitorType.cpu"
-        >
-          CPU
-        </span>
-
-        <span
-          v-else-if="monitorType === MonitorType.memory"
-        >
-          RAM
-        </span>
-
-        <span
-          v-else-if="monitorType === MonitorType.disk"
-        >
-          {{ extendParam?.path }}
-        </span>
-      </div>
-    </div>
+      </template>
+    </ItemCard>
   </div>
 </template>
diff --git a/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue b/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue
new file mode 100644
index 0000000..bc418e3
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } 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'
+
+const props = defineProps<{
+  genericProgressStyleExtendParam: GenericProgressStyleExtendParam
+}>()
+
+// const emit = defineEmits<{
+//   (e: 'update:genericProgressStyleExtendParam', visible: ProgressStyle): void
+// }>()
+
+const data = ref(props.genericProgressStyleExtendParam)
+</script>
+
+<template>
+  <div>
+    <div class="flex mb-5 justify-center">
+      <div class="w-[200px]">
+        <GenericMonitorCard
+          icon-text-icon-hide-title
+          :card-type-style="PanelPanelConfigStyleEnum.info"
+          class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
+          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"
+          class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
+          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">
+      <NFormItem label="主色">
+        <NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem label="副色">
+        <NColorPicker v-model:value="data.progressRailColor" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem label="文字图标颜色">
+        <NColorPicker v-model:value="data.color" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem label="卡片背景色">
+        <NColorPicker v-model:value="data.backgroundColor" :modes="['hex']" size="small" />
+      </NFormItem>
+    </NForm>
+  </div>
+</template>
diff --git a/src/components/deskModule/SystemMonitor/Edit/ProgressStyleEditor/index.vue b/src/components/deskModule/SystemMonitor/Edit/ProgressStyleEditor/index.vue
new file mode 100644
index 0000000..0a529a6
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/Edit/ProgressStyleEditor/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NColorPicker, NForm, NFormItem } from 'naive-ui'
+import type { ProgressStyle } from '../../typings'
+
+const props = defineProps<{
+  progressStyle: ProgressStyle
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:progressStyle', visible: ProgressStyle): void // 定义修改父组件（prop内）的值的事件
+}>()
+
+const data = computed({
+  get: () => props.progressStyle,
+  set() {
+    emit('update:progressStyle', data.value)
+  },
+})
+</script>
+
+<template>
+  <div>
+    <NForm ref="formRef" :model="data">
+      <NFormItem path="url" label="主色">
+        <!-- <NSelect :style="{ width: '100px' }" :options="urlProtocolOptions" /> -->
+        <NColorPicker v-model:value="data.color" size="small" />
+      </NFormItem>
+      <NFormItem path="url" label="背景色">
+        <!-- <NSelect :style="{ width: '100px' }" :options="urlProtocolOptions" /> -->
+        <NColorPicker v-model:value="data.railColor" size="small" />
+      </NFormItem>
+    </NForm>
+  </div>
+</template>
diff --git a/src/components/deskModule/SystemMonitor/Edit/index.vue b/src/components/deskModule/SystemMonitor/Edit/index.vue
new file mode 100644
index 0000000..da6aa47
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/Edit/index.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, ref } from 'vue'
+import { NButton, NModal, NTabPane, NTabs, useMessage } from 'naive-ui'
+import type { GenericProgressStyleExtendParam, MonitorData } from '../typings'
+import GenericProgressStyleEditor from './GenericProgressStyleEditor/index.vue'
+
+interface Props {
+  visible: boolean
+  monitorData: MonitorData | null
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emit>()
+
+// 默认通用的进度扩展参数
+const defaultGenericProgressStyleExtendParam: GenericProgressStyleExtendParam = {
+  progressColor: 'white',
+  progressRailColor: 'white',
+  color: 'white',
+  backgroundColor: '#2a2a2a6b',
+}
+
+// const currentData = ref<MonitorData>(props.monitorData)
+
+const currentDataExterdParam = ref<GenericProgressStyleExtendParam>(defaultGenericProgressStyleExtendParam)
+
+const ms = useMessage()
+const submitLoading = ref(false)
+
+interface Emit {
+  (e: 'update:visible', visible: boolean): void
+  (e: 'done', item: MonitorData): void// 创建完成
+}
+
+// 更新值父组件传来的值
+const show = computed({
+  get: () => props.visible,
+  set: (visible: boolean) => {
+    emit('update:visible', visible)
+  },
+})
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="monitorData ? '修改项目' : '添加项目'">
+    <!-- 选择监视器 -->
+    <div>
+      progressStyle值：{{ JSON.stringify(currentDataExterdParam) }}
+    </div>
+    <NTabs type="segment">
+      <NTabPane name="chap1" tab="CPU">
+        <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentDataExterdParam" />
+      </NTabPane>
+      <NTabPane name="chap2" tab="内存">
+        <!--  -->
+      </NTabPane>
+      <NTabPane name="chap3" tab="磁盘">
+        <!--  -->
+      </NTabPane>
+    </NTabs>
+
+    <template #footer>
+      <NButton type="success" :loading="submitLoading" style="float: right;" @click="handleValidateButtonClick">
+        确定
+      </NButton>
+    </template>
+  </NModal>
+</template>
diff --git a/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue b/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
new file mode 100644
index 0000000..6ecdaed
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
@@ -0,0 +1,60 @@
+<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
+      icon-text-icon-hide-title
+      :card-type-style="cardTypeStyle"
+      :icon-text="iconText"
+      :class="propClass"
+      :background-color="backgroundColor"
+    >
+      <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>
diff --git a/src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue b/src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue
new file mode 100644
index 0000000..5848626
--- /dev/null
+++ b/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" :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>
diff --git a/src/components/deskModule/SystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/index.vue
index e11e219..c708d2f 100644
--- a/src/components/deskModule/SystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/index.vue
@@ -1,21 +1,55 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
+import { NButton } from 'naive-ui'
 import AppIconSystemMonitor from './AppIconSystemMonitor/index.vue'
 import { MonitorType } from './typings'
 import type { CardStyle, MonitorData, ProgressStyle } from './typings'
+import Edit from './Edit/index.vue'
 import { useAuthStore, usePanelState } from '@/store'
 import { PanelPanelConfigStyleEnum } from '@/enums'
+import { VisitMode } from '@/enums/auth'
+import { SvgIcon } from '@/components/common'
 
+interface MonitorGroup extends Panel.ItemIconGroup {
+  sortStatus?: boolean
+  hoverStatus: boolean
+  items?: Panel.ItemInfo[]
+}
 const panelState = usePanelState()
 const authStore = useAuthStore()
 const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
+const monitorGroup = ref<MonitorGroup>({
+  hoverStatus: false,
+  sortStatus: false,
+})
 const progressStyle = ref<ProgressStyle>({
   color: 'white',
   railColor: 'rgba(0, 0, 0, 0.2)',
   height: 5,
 })
 
+const EditShowStatus = ref<boolean>(true)
+
+function handleAddItem() {
+  EditShowStatus.value = true
+}
+
+function handleSetSortStatus(sortStatus: boolean) {
+  monitorGroup.value.sortStatus = sortStatus
+
+  // // 并未保存排序重新更新数据
+  // if (!sortStatus) {
+  //   // 单独更新组
+  //   if (items.value[groupIndex] && items.value[groupIndex].id)
+  //     updateItemIconGroupByNet(groupIndex, items.value[groupIndex].id as number)
+  // }
+}
+
+function handleSetHoverStatus(hoverStatus: boolean) {
+  monitorGroup.value.hoverStatus = hoverStatus
+}
+
 const cardStyle: CardStyle = {
   background: '#2a2a2a6b',
 }
@@ -49,53 +83,39 @@ const monitorDatas = ref<MonitorData[]>([
 
 <template>
   <div class="w-full">
-    <!-- 分组标题 -->
-    <div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
-      <span class="text-shadow">
-        系统状态
-      </span>
-      <!-- <div
-        v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
-        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)">
-          <SvgIcon class="text-white font-xl" icon="typcn:plus" />
+    <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 class="text-shadow">
+          系统状态
         </span>
-        <span class="mr-2 cursor-pointer " title="排序组快捷图标" @click="handleSetSortStatus(itemGroupIndex, !itemGroup.sortStatus)">
-          <SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
-        </span>
-      </div> -->
-    </div>
-
-    <!-- 详情图标 -->
-    <!-- <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info"> -->
-    <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
-      <VueDraggable
-        v-model="monitorDatas" item-key="sort" :animation="300"
-        class="icon-info-box"
-        filter=".not-drag"
-      >
-        <div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, 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
+          v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
+          class="ml-2 delay-100 transition-opacity flex"
+          :class="monitorGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
+        >
+          <span class="mr-2 cursor-pointer" title="添加快捷图标" @click="handleAddItem()">
+            <SvgIcon class="text-white font-xl" icon="typcn:plus" />
+          </span>
+          <span class="mr-2 cursor-pointer " title="排序组快捷图标" @click="handleSetSortStatus(!monitorGroup.sortStatus)">
+            <SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
+          </span>
         </div>
-      </VueDraggable>
-    </div>
+      </div>
 
-    <!-- APP图标宫型盒子 -->
-    <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
-      <div v-if="monitorDatas">
+      <!-- 详情图标 -->
+      <!-- <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info"> -->
+      <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
         <VueDraggable
           v-model="monitorDatas" item-key="sort" :animation="300"
-          class="icon-small-box"
+          class="icon-info-box"
           filter=".not-drag"
+          :disabled="!monitorGroup.sortStatus"
         >
           <div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
             <AppIconSystemMonitor
@@ -107,14 +127,36 @@ const monitorDatas = ref<MonitorData[]>([
               :icon-text-color="panelState.panelConfig.iconTextColor"
             />
           </div>
-        </vuedraggable>
+        </VueDraggable>
       </div>
-    </div>
 
-    <!-- 编辑栏 -->
-    <!-- <div v-if="itemGroup.sortStatus" class="flex mt-[10px]">
+      <!-- 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" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, 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" class="flex mt-[10px]">
         <div>
-          <NButton color="#2a2a2a6b" @click="handleSaveSort(itemGroup)">
+          <NButton color="#2a2a2a6b" @click="handleSaveSort(monitorGroup)">
             <template #icon>
               <SvgIcon class="text-white font-xl" icon="material-symbols:save" />
             </template>
@@ -123,7 +165,10 @@ const monitorDatas = ref<MonitorData[]>([
             </div>
           </NButton>
         </div>
-      </div> -->
+      </div>
+    </div>
+
+    <Edit v-model:visible="EditShowStatus" />
   </div>
 </template>
 
diff --git a/src/components/deskModule/SystemMonitor/typings.ts b/src/components/deskModule/SystemMonitor/typings.ts
index 0aee70f..f62d50c 100644
--- a/src/components/deskModule/SystemMonitor/typings.ts
+++ b/src/components/deskModule/SystemMonitor/typings.ts
@@ -20,3 +20,10 @@ export interface ProgressStyle {
   railColor: string
   height: number
 }
+
+export interface GenericProgressStyleExtendParam {
+  progressColor: string
+  progressRailColor: string
+  color: string
+  backgroundColor: string
+}
diff --git a/src/views/exception/test/zujian.vue b/src/views/exception/test/zujian.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/home/components/EditItem/IconEditor.vue b/src/views/home/components/EditItem/IconEditor.vue
index 8c7b564..1ad87bd 100644
--- a/src/views/home/components/EditItem/IconEditor.vue
+++ b/src/views/home/components/EditItem/IconEditor.vue
@@ -41,6 +41,7 @@ const itemIconInfo = computed({
     return v
   },
   set() {
+    console.log('aaaa')
     handleChange()
   },
 })
@@ -52,6 +53,7 @@ function handleIconTypeRadioChange(type: number) {
 }
 
 function handleChange() {
+  console.log('21222')
   emit('update:itemIcon', itemIconInfo.value || null)
 }
 

From 3a82949afc64147209be046f9298d55096abd0c3 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Fri, 5 Jan 2024 13:58:58 +0800
Subject: [PATCH 04/14] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SystemMonitor/components/GenericMonitorCard/index.vue     | 4 ++--
 .../SystemMonitor/components/GenericProgress/index.vue        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue b/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
index 6ecdaed..d571a34 100644
--- a/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
+++ b/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
@@ -17,7 +17,7 @@ interface Prop {
   textColor?: string
   cardTypeStyle: PanelPanelConfigStyleEnum
   // monitorType: string
-  icon: string
+  icon?: string
   class?: string
   backgroundColor?: string
 }
@@ -40,7 +40,7 @@ const propClass = ref(props.class)
         <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 }" />
+              <SvgIcon :icon="icon ?? ''" style="width: 35px;height: 35px;" :style="{ color: textColor }" />
             </slot>
           </div>
         </div>
diff --git a/src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue b/src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue
index 5848626..f42ec5e 100644
--- a/src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue
+++ b/src/components/deskModule/SystemMonitor/components/GenericProgress/index.vue
@@ -19,7 +19,7 @@ defineProps<Prop>()
 <template>
   <div class="w-full">
     <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
-      <div class="mb-1" :style="{ color: textColor }">
+      <div class="mb-1 text-xs" :style="{ color: textColor }">
         <span>
           {{ infoCardLeftText }}
         </span>

From 9735e67a7d6334e39d4f58b053c32b3be25e7fa8 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Fri, 5 Jan 2024 14:01:46 +0800
Subject: [PATCH 05/14] =?UTF-8?q?=E9=80=82=E9=85=8D=E4=B8=89=E4=B8=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppIconSystemMonitor/CPU.vue              | 11 ++--
 .../AppIconSystemMonitor/Disk.vue             | 54 ++++++-------------
 .../AppIconSystemMonitor/Memory.vue           | 53 ++++++------------
 3 files changed, 37 insertions(+), 81 deletions(-)

diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
index cac1835..462fcb0 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import type { ProgressStyle } from '../typings'
 import GenericProgress from '../components/GenericProgress/index.vue'
 import { getCpuState } from '@/api/system/systemMonitor'
 import type { PanelPanelConfigStyleEnum } from '@/enums'
 
 interface Prop {
   cardTypeStyle: PanelPanelConfigStyleEnum
-  progressStyle: ProgressStyle
   refreshInterval: number
+  textColor: string
+  progressColor: string
+  progressRailColor: string
 }
 
 const props = defineProps<Prop>()
@@ -45,12 +46,14 @@ onUnmounted(() => {
 <template>
   <div class="w-full">
     <GenericProgress
-      :progress-style="progressStyle"
+      :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="black"
+      :text-color="textColor"
     />
   </div>
 </template>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
index 15fc9c5..41898d2 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import { NProgress } from 'naive-ui'
-import type { ProgressStyle } from '../typings'
-import { PanelPanelConfigStyleEnum } from '@/enums'
+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
-  progressStyle: ProgressStyle
   refreshInterval: number
+  textColor: string
+  progressColor: string
+  progressRailColor: string
   path: string
 }
 
@@ -54,40 +55,15 @@ onUnmounted(() => {
 
 <template>
   <div class="w-full">
-    <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
-      <div class="mb-1">
-        <span>
-          {{ diskState?.mountpoint }}
-        </span>
-        <span class="float-right">
-          {{ formatdiskSize(formatdiskToByte(diskState?.total || 0)) }}/{{ formatdiskSize(formatdiskToByte(diskState?.free || 0)) }}
-        </span>
-      </div>
-      <NProgress
-        :color="progressStyle.color"
-        :rail-color="progressStyle.railColor"
-        :height="progressStyle.height"
-        type="line"
-        :percentage="diskState?.usedPercent"
-        :show-indicator="false"
-        :stroke-width="15"
-        style="width: 150px;"
-      />
-    </div>
-    <div v-else>
-      <div class="flex justify-center h-full w-full mt-3">
-        <NProgress
-          :color="progressStyle.color"
-          :rail-color="progressStyle.railColor"
-          type="dashboard"
-          :percentage="correctionNumber(diskState?.usedPercent || 0)" :stroke-width="15"
-          style="width: 50px;"
-        >
-          <div class="text-white" style="font-size: 10px;">
-            {{ correctionNumber(diskState?.usedPercent || 0, 1) }}%
-          </div>
-        </NProgress>
-      </div>
-    </div>
+    <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>
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
index 222bb08..1453808 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import { NProgress } from 'naive-ui'
-import type { ProgressStyle } from '../typings'
+import GenericProgress from '../components/GenericProgress/index.vue'
 import { getMemonyState } from '@/api/system/systemMonitor'
-import { PanelPanelConfigStyleEnum } from '@/enums'
+import type { PanelPanelConfigStyleEnum } from '@/enums'
 import { bytesToSize } from '@/utils/cmn'
 
 interface Prop {
   cardTypeStyle: PanelPanelConfigStyleEnum
-  progressStyle: ProgressStyle
   refreshInterval: number
+  textColor: string
+  progressColor: string
+  progressRailColor: string
 }
 
 const props = defineProps<Prop>()
@@ -49,39 +50,15 @@ onUnmounted(() => {
 
 <template>
   <div class="w-full">
-    <div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
-      <div class="mb-1">
-        <span>
-          RAM
-        </span>
-        <span class="float-right">
-          {{ formatMemorySize(memoryState?.total || 0) }}/{{ formatMemorySize(memoryState?.free || 0) }}
-        </span>
-      </div>
-      <NProgress
-        type="line"
-        :color="progressStyle.color"
-        :rail-color="progressStyle.railColor"
-        :height="progressStyle.height"
-        :percentage="memoryState?.usedPercent"
-        :show-indicator="false"
-        :stroke-width="15" style="width: 150px;"
-      />
-    </div>
-    <div v-else>
-      <div class="flex justify-center h-full w-full mt-3">
-        <NProgress
-          :color="progressStyle.color"
-          :rail-color="progressStyle.railColor"
-          type="dashboard"
-          :percentage="correctionNumber(memoryState?.usedPercent || 0)" :stroke-width="15"
-          style="width: 50px;"
-        >
-          <div class="text-white" style="font-size: 10px;">
-            {{ correctionNumber(memoryState?.usedPercent || 0, 1) }}%
-          </div>
-        </NProgress>
-      </div>
-    </div>
+    <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>

From bdbcd50aa1b1b6958043e26be5b705430312c64c Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Fri, 5 Jan 2024 14:25:09 +0800
Subject: [PATCH 06/14] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppIconSystemMonitor/index.vue            | 60 +++++++++----------
 1 file changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
index 48afeb4..3f5f61e 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
@@ -4,17 +4,17 @@
 // 如果确定这种方案将 AppIcon/index.vue 封装成通用组件
 // -------------------
 
-import { computed, ref } from 'vue'
+import { ref } 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 { ItemCard, SvgIcon } from '@/components/common'
+import { SvgIcon } from '@/components/common'
 import { PanelPanelConfigStyleEnum } from '@/enums'
 
 interface Prop {
-  size?: number // 默认70
   extendParam?: any
   iconTextColor?: string
   iconTextIconHideTitle: boolean
@@ -23,41 +23,25 @@ interface Prop {
   cardStyle: CardStyle
 }
 
-const props = withDefaults(defineProps<Prop>(), {
-  size: 70,
-})
+withDefaults(defineProps<Prop>(), {})
 
-const defaultBackground = '#2a2a2a6b'
 const iconText = ref('自定义')
 const refreshInterval = 5
 const svgStyle = {
   width: '35px',
   height: '35px',
 }
-
-const calculateLuminance = (color: string) => {
-  const hex = color.replace(/^#/, '')
-  const r = parseInt(hex.substring(0, 2), 16)
-  const g = parseInt(hex.substring(2, 4), 16)
-  const b = parseInt(hex.substring(4, 6), 16)
-  return (0.299 * r + 0.587 * g + 0.114 * b) / 255
-}
-
-const textColor = computed(() => {
-  const luminance = calculateLuminance(props.cardStyle.background || defaultBackground)
-  return luminance > 0.5 ? 'black' : 'white'
-})
 </script>
 
 <template>
   <div class="w-full">
-    <ItemCard
-      icon-text-icon-hide-title
+    <GenericMonitorCard
+      :icon-text-icon-hide-title="false"
       :card-type-style="cardTypeStyle"
       :icon-text="iconText"
       class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
     >
-      <template #info>
+      <template #icon>
         <!-- 图标 -->
         <div class="w-[60px] h-[70px]">
           <div class="w-[60px] h-full flex items-center justify-center text-white">
@@ -66,28 +50,34 @@ const textColor = computed(() => {
             <SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="svgStyle" />
           </div>
         </div>
-
+      </template>
+      <template #info>
         <!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
         <div
           class=" w-full text-white flex items-center"
-          :style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)' }"
         >
           <CardCPU
             v-if="monitorType === MonitorType.cpu"
             :card-type-style="PanelPanelConfigStyleEnum.info"
-            :progress-style="extendParam?.progressStyle"
+            :progress-color="extendParam?.progressColor"
+            :progress-rail-color="extendParam?.progressRailColor"
+            :text-color="extendParam?.textColor"
             :refresh-interval="refreshInterval"
           />
           <Memory
             v-else-if="monitorType === MonitorType.memory"
             :card-type-style="PanelPanelConfigStyleEnum.info"
-            :progress-style="extendParam?.progressStyle"
+            :progress-color="extendParam?.progressColor"
+            :progress-rail-color="extendParam?.progressRailColor"
+            :text-color="extendParam?.textColor"
             :refresh-interval="refreshInterval"
           />
           <Disk
             v-else-if="monitorType === MonitorType.disk"
             :card-type-style="PanelPanelConfigStyleEnum.info"
-            :progress-style="extendParam?.progressStyle"
+            :progress-color="extendParam?.progressColor"
+            :progress-rail-color="extendParam?.progressRailColor"
+            :text-color="extendParam?.textColor"
             :path="extendParam?.path"
             :refresh-interval="refreshInterval"
           />
@@ -97,23 +87,29 @@ const textColor = computed(() => {
         <CardCPU
           v-if="monitorType === MonitorType.cpu"
           :card-type-style="PanelPanelConfigStyleEnum.icon"
-          :progress-style="extendParam?.progressStyle"
+          :progress-color="extendParam?.progressColor"
+          :progress-rail-color="extendParam?.progressRailColor"
+          :text-color="extendParam?.textColor"
           :refresh-interval="refreshInterval"
         />
         <Memory
           v-else-if="monitorType === MonitorType.memory"
           :card-type-style="PanelPanelConfigStyleEnum.icon"
-          :progress-style="extendParam?.progressStyle"
+          :progress-color="extendParam?.progressColor"
+          :progress-rail-color="extendParam?.progressRailColor"
+          :text-color="extendParam?.textColor"
           :refresh-interval="refreshInterval"
         />
         <Disk
           v-else-if="monitorType === MonitorType.disk"
           :card-type-style="PanelPanelConfigStyleEnum.icon"
-          :progress-style="extendParam?.progressStyle"
+          :progress-color="extendParam?.progressColor"
+          :progress-rail-color="extendParam?.progressRailColor"
+          :text-color="extendParam?.textColor"
           :path="extendParam?.path"
           :refresh-interval="refreshInterval"
         />
       </template>
-    </ItemCard>
+    </GenericMonitorCard>
   </div>
 </template>

From 21e8e8f1b872a7e7989c45b29061f52127dffce5 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Fri, 5 Jan 2024 21:14:57 +0800
Subject: [PATCH 07/14] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E4=BA=86=E5=A2=9E=E6=94=B9=E6=9F=A5cpu=E5=92=8C=E5=86=85?=
 =?UTF-8?q?=E5=AD=98=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ItemCard/index.vue      |  2 +-
 .../AppIconSystemMonitor/index.vue            | 47 +++++-----
 .../Edit/GenericProgressStyleEditor/index.vue | 24 +++--
 .../deskModule/SystemMonitor/Edit/index.vue   | 89 +++++++++++++++----
 .../deskModule/SystemMonitor/common.ts        | 87 ++++++++++++++++++
 .../components/GenericMonitorCard/index.vue   |  5 +-
 .../deskModule/SystemMonitor/index.vue        | 87 +++++++++---------
 .../deskModule/SystemMonitor/typings.ts       |  2 +-
 src/store/modules/moduleConfig/index.ts       |  4 +-
 9 files changed, 255 insertions(+), 92 deletions(-)
 create mode 100644 src/components/deskModule/SystemMonitor/common.ts

diff --git a/src/components/common/ItemCard/index.vue b/src/components/common/ItemCard/index.vue
index e6b6f9f..7685a7f 100644
--- a/src/components/common/ItemCard/index.vue
+++ b/src/components/common/ItemCard/index.vue
@@ -6,7 +6,7 @@ interface Prop {
   cardTypeStyle: PanelPanelConfigStyleEnum
   class?: string
   backgroundColor?: string
-  iconTextIconHideTitle: boolean // 隐藏小图标标题
+  iconTextIconHideTitle?: boolean // 隐藏小图标标题
   iconTextColor?: string // 小图标文字颜色
   iconText?: string // 小图标文字
 }
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
index 3f5f61e..49fd477 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
@@ -1,10 +1,5 @@
 <script setup lang="ts">
-// -------------------
-// 系统监控图标临时使用（与 AppIcon/index.vue 一致）
-// 如果确定这种方案将 AppIcon/index.vue 封装成通用组件
-// -------------------
-
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { MonitorType } from '../typings'
 import type { CardStyle } from '../typings'
 import GenericMonitorCard from '../components/GenericMonitorCard/index.vue'
@@ -23,14 +18,20 @@ interface Prop {
   cardStyle: CardStyle
 }
 
-withDefaults(defineProps<Prop>(), {})
+const props = withDefaults(defineProps<Prop>(), {})
 
-const iconText = ref('自定义')
-const refreshInterval = 5
-const svgStyle = {
-  width: '35px',
-  height: '35px',
-}
+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 = 50000
 </script>
 
 <template>
@@ -39,15 +40,17 @@ const svgStyle = {
       :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="svgStyle" />
-            <SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="svgStyle" />
-            <SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="svgStyle" />
+            <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>
@@ -61,7 +64,7 @@ const svgStyle = {
             :card-type-style="PanelPanelConfigStyleEnum.info"
             :progress-color="extendParam?.progressColor"
             :progress-rail-color="extendParam?.progressRailColor"
-            :text-color="extendParam?.textColor"
+            :text-color="extendParam?.color"
             :refresh-interval="refreshInterval"
           />
           <Memory
@@ -69,7 +72,7 @@ const svgStyle = {
             :card-type-style="PanelPanelConfigStyleEnum.info"
             :progress-color="extendParam?.progressColor"
             :progress-rail-color="extendParam?.progressRailColor"
-            :text-color="extendParam?.textColor"
+            :text-color="extendParam?.color"
             :refresh-interval="refreshInterval"
           />
           <Disk
@@ -77,7 +80,7 @@ const svgStyle = {
             :card-type-style="PanelPanelConfigStyleEnum.info"
             :progress-color="extendParam?.progressColor"
             :progress-rail-color="extendParam?.progressRailColor"
-            :text-color="extendParam?.textColor"
+            :text-color="extendParam?.color"
             :path="extendParam?.path"
             :refresh-interval="refreshInterval"
           />
@@ -89,7 +92,7 @@ const svgStyle = {
           :card-type-style="PanelPanelConfigStyleEnum.icon"
           :progress-color="extendParam?.progressColor"
           :progress-rail-color="extendParam?.progressRailColor"
-          :text-color="extendParam?.textColor"
+          :text-color="extendParam?.color"
           :refresh-interval="refreshInterval"
         />
         <Memory
@@ -97,7 +100,7 @@ const svgStyle = {
           :card-type-style="PanelPanelConfigStyleEnum.icon"
           :progress-color="extendParam?.progressColor"
           :progress-rail-color="extendParam?.progressRailColor"
-          :text-color="extendParam?.textColor"
+          :text-color="extendParam?.color"
           :refresh-interval="refreshInterval"
         />
         <Disk
@@ -105,7 +108,7 @@ const svgStyle = {
           :card-type-style="PanelPanelConfigStyleEnum.icon"
           :progress-color="extendParam?.progressColor"
           :progress-rail-color="extendParam?.progressRailColor"
-          :text-color="extendParam?.textColor"
+          :text-color="extendParam?.color"
           :path="extendParam?.path"
           :refresh-interval="refreshInterval"
         />
diff --git a/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue b/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue
index bc418e3..6451c6c 100644
--- a/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue
+++ b/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue
@@ -1,30 +1,37 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+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'
 
+interface Emit {
+  (e: 'update:genericProgressStyleExtendParam', visible: GenericProgressStyleExtendParam): void
+}
+
 const props = defineProps<{
   genericProgressStyleExtendParam: GenericProgressStyleExtendParam
 }>()
+const emit = defineEmits<Emit>()
 
-// const emit = defineEmits<{
-//   (e: 'update:genericProgressStyleExtendParam', visible: ProgressStyle): void
-// }>()
-
-const data = ref(props.genericProgressStyleExtendParam)
+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">
       <div class="w-[200px]">
         <GenericMonitorCard
           icon-text-icon-hide-title
           :card-type-style="PanelPanelConfigStyleEnum.info"
-          class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
           icon="solar-cpu-bold"
           :background-color="data.backgroundColor"
           :text-color="data.color"
@@ -48,7 +55,6 @@ const data = ref(props.genericProgressStyleExtendParam)
         <GenericMonitorCard
           icon-text-icon-hide-title
           :card-type-style="PanelPanelConfigStyleEnum.icon"
-          class="hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
           icon="solar-cpu-bold"
           :background-color="data.backgroundColor"
           :icon-text-color="data.color"
@@ -66,7 +72,7 @@ const data = ref(props.genericProgressStyleExtendParam)
       </div>
     </div>
 
-    <NForm ref="formRef">
+    <NForm ref="formRef" v-model="data">
       <NFormItem label="主色">
         <NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
       </NFormItem>
diff --git a/src/components/deskModule/SystemMonitor/Edit/index.vue b/src/components/deskModule/SystemMonitor/Edit/index.vue
index da6aa47..a7b3689 100644
--- a/src/components/deskModule/SystemMonitor/Edit/index.vue
+++ b/src/components/deskModule/SystemMonitor/Edit/index.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { computed, defineEmits, defineProps, ref } from 'vue'
+import { computed, defineEmits, defineProps, ref, watch } from 'vue'
 import { NButton, NModal, NTabPane, NTabs, useMessage } from 'naive-ui'
+import { MonitorType } from '../typings'
 import type { GenericProgressStyleExtendParam, MonitorData } from '../typings'
+import { add, saveByIndex } from '../common'
+
 import GenericProgressStyleEditor from './GenericProgressStyleEditor/index.vue'
 
 interface Props {
   visible: boolean
   monitorData: MonitorData | null
+  index: number | null
 }
 
 const props = defineProps<Props>()
@@ -14,22 +18,27 @@ const emit = defineEmits<Emit>()
 
 // 默认通用的进度扩展参数
 const defaultGenericProgressStyleExtendParam: GenericProgressStyleExtendParam = {
-  progressColor: 'white',
-  progressRailColor: 'white',
-  color: 'white',
+  progressColor: '#fff',
+  progressRailColor: '#CFCFCFA8',
+  color: '#fff',
   backgroundColor: '#2a2a2a6b',
 }
 
-// const currentData = ref<MonitorData>(props.monitorData)
+const defaultMonitorData: MonitorData = {
+  extendParam: defaultGenericProgressStyleExtendParam,
+  monitorType: MonitorType.cpu,
+}
 
-const currentDataExterdParam = ref<GenericProgressStyleExtendParam>(defaultGenericProgressStyleExtendParam)
+const active = ref<string>(MonitorType.cpu)
+const currentMonitorData = ref<MonitorData>(props.monitorData || { ...defaultMonitorData })
+const currentGenericProgressStyleExtendParam = ref<GenericProgressStyleExtendParam>({ ...defaultGenericProgressStyleExtendParam })
 
 const ms = useMessage()
 const submitLoading = ref(false)
 
 interface Emit {
   (e: 'update:visible', visible: boolean): void
-  (e: 'done', item: MonitorData): void// 创建完成
+  (e: 'done', item: boolean): void
 }
 
 // 更新值父组件传来的值
@@ -39,28 +48,78 @@ const show = computed({
     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 }
+
+  if (!value)
+    handleResetGenericProgressStyleExtendParam()
+})
+
+function handleResetGenericProgressStyleExtendParam() {
+  currentGenericProgressStyleExtendParam.value = { ...defaultGenericProgressStyleExtendParam }
+}
+
+// 保存提交
+async function handleSubmit() {
+  if (currentMonitorData.value.monitorType === MonitorType.cpu || currentMonitorData.value.monitorType === MonitorType.memory) {
+    currentMonitorData.value.monitorType = active.value as MonitorType
+    currentMonitorData.value.extendParam = currentGenericProgressStyleExtendParam
+
+    console.log('保存', currentMonitorData.value.extendParam)
+  }
+
+  if (props.index !== null) {
+    const res = await saveByIndex(props.index, currentMonitorData.value)
+    if (res) {
+      show.value = false
+      emit('done', true)
+    }
+    else {
+      ms.error('保存失败')
+    }
+  }
+  else {
+    const res = await add(currentMonitorData.value)
+    if (res) {
+      show.value = false
+      emit('done', true)
+    }
+    else {
+      ms.error('保存失败')
+    }
+  }
+}
 </script>
 
 <template>
   <NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="monitorData ? '修改项目' : '添加项目'">
     <!-- 选择监视器 -->
     <div>
-      progressStyle值：{{ JSON.stringify(currentDataExterdParam) }}
+      <!-- progressStyle值：{{ JSON.stringify(currentGenericProgressStyleExtendParam) }} -->
     </div>
-    <NTabs type="segment">
-      <NTabPane name="chap1" tab="CPU">
-        <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentDataExterdParam" />
+    <NTabs v-model:value="active" type="segment">
+      <NTabPane :name="MonitorType.cpu" tab="CPU状态">
+        <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
+        <NButton @click="handleResetGenericProgressStyleExtendParam">
+          重置
+        </NButton>
       </NTabPane>
-      <NTabPane name="chap2" tab="内存">
-        <!--  -->
+      <NTabPane :name="MonitorType.memory" tab="内存状态">
+        <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
+        <NButton @click="handleResetGenericProgressStyleExtendParam">
+          重置
+        </NButton>
       </NTabPane>
-      <NTabPane name="chap3" tab="磁盘">
+      <NTabPane :name="MonitorType.disk" tab="磁盘状态">
         <!--  -->
       </NTabPane>
     </NTabs>
 
     <template #footer>
-      <NButton type="success" :loading="submitLoading" style="float: right;" @click="handleValidateButtonClick">
+      <NButton type="success" :loading="submitLoading" style="float: right;" @click="handleSubmit">
         确定
       </NButton>
     </template>
diff --git a/src/components/deskModule/SystemMonitor/common.ts b/src/components/deskModule/SystemMonitor/common.ts
new file mode 100644
index 0000000..f5b55d9
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/common.ts
@@ -0,0 +1,87 @@
+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)
+    saveAll(data)
+  }
+  catch (error) {
+    success = false
+  }
+
+  return success
+}
diff --git a/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue b/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
index d571a34..58cf3ea 100644
--- a/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
+++ b/src/components/deskModule/SystemMonitor/components/GenericMonitorCard/index.vue
@@ -12,7 +12,7 @@ interface Prop {
 //   size?: number // 默认70
   extendParam?: any
   iconTextColor?: string
-  iconTextIconHideTitle: boolean
+  iconTextIconHideTitle?: boolean
   iconText?: string
   textColor?: string
   cardTypeStyle: PanelPanelConfigStyleEnum
@@ -29,11 +29,12 @@ const propClass = ref(props.class)
 <template>
   <div class="w-full">
     <ItemCard
-      icon-text-icon-hide-title
       :card-type-style="cardTypeStyle"
       :icon-text="iconText"
+      :icon-text-color="iconTextColor"
       :class="propClass"
       :background-color="backgroundColor"
+      :icon-text-icon-hide-title="iconTextIconHideTitle"
     >
       <template #info>
         <!-- 图标 -->
diff --git a/src/components/deskModule/SystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/index.vue
index c708d2f..786c439 100644
--- a/src/components/deskModule/SystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 import { NButton } from 'naive-ui'
 import AppIconSystemMonitor from './AppIconSystemMonitor/index.vue'
-import { MonitorType } from './typings'
-import type { CardStyle, MonitorData, ProgressStyle } from './typings'
+import type { CardStyle, MonitorData } from './typings'
 import Edit from './Edit/index.vue'
+import { getAll } from './common'
 import { useAuthStore, usePanelState } from '@/store'
 import { PanelPanelConfigStyleEnum } from '@/enums'
 import { VisitMode } from '@/enums/auth'
@@ -18,21 +18,25 @@ interface MonitorGroup extends Panel.ItemIconGroup {
 }
 const panelState = usePanelState()
 const authStore = useAuthStore()
-const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
+// const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
 const monitorGroup = ref<MonitorGroup>({
   hoverStatus: false,
   sortStatus: false,
 })
-const progressStyle = ref<ProgressStyle>({
-  color: 'white',
-  railColor: 'rgba(0, 0, 0, 0.2)',
-  height: 5,
-})
+// const progressStyle = ref<ProgressStyle>({
+//   color: 'white',
+//   railColor: 'rgba(0, 0, 0, 0.2)',
+//   height: 5,
+// })
 
-const EditShowStatus = ref<boolean>(true)
+const editShowStatus = ref<boolean>(false)
+const editData = ref<MonitorData | null>(null)
+const editIndex = ref<number | null>(null)
 
 function handleAddItem() {
-  EditShowStatus.value = true
+  editShowStatus.value = true
+  editData.value = null
+  editIndex.value = null
 }
 
 function handleSetSortStatus(sortStatus: boolean) {
@@ -54,31 +58,25 @@ const cardStyle: CardStyle = {
   background: '#2a2a2a6b',
 }
 
-const monitorDatas = ref<MonitorData[]>([
-  {
-    monitorType: MonitorType.cpu,
-    extendParam: {
-      progressStyle,
-    },
-    description: 'CPU状态',
-    cardStyle,
-  },
-  {
-    monitorType: MonitorType.memory,
-    cardStyle,
-    extendParam: {
-      progressStyle,
-    },
-  },
-  {
-    monitorType: MonitorType.disk,
-    extendParam: {
-      progressStyle,
-      path: 'C:',
-    },
-    cardStyle,
-  },
-])
+const monitorDatas = ref<MonitorData[]>([])
+
+function handleClick(index: number, item: MonitorData) {
+  editShowStatus.value = true
+  editData.value = item
+  editIndex.value = index
+}
+
+async function getData() {
+  monitorDatas.value = await getAll()
+}
+
+onMounted(() => {
+  getData()
+})
+
+function handleSaveDone() {
+  getData()
+}
 </script>
 
 <template>
@@ -109,7 +107,6 @@ const monitorDatas = ref<MonitorData[]>([
       </div>
 
       <!-- 详情图标 -->
-      <!-- <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info"> -->
       <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
         <VueDraggable
           v-model="monitorDatas" item-key="sort" :animation="300"
@@ -117,7 +114,12 @@ const monitorDatas = ref<MonitorData[]>([
           filter=".not-drag"
           :disabled="!monitorGroup.sortStatus"
         >
-          <div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
+          <div
+            v-for="item, index in monitorDatas" :key="index"
+            :title="item.description"
+            @click="handleClick(index, item)"
+            @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)"
+          >
             <AppIconSystemMonitor
               :extend-param="item.extendParam"
               :icon-text-icon-hide-title="false"
@@ -139,7 +141,12 @@ const monitorDatas = ref<MonitorData[]>([
             filter=".not-drag"
             :disabled="!monitorGroup.sortStatus"
           >
-            <div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
+            <div
+              v-for="item, index in monitorDatas" :key="index"
+              :title="item.description"
+              @click="handleClick(index, item)"
+              @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)"
+            >
               <AppIconSystemMonitor
                 :extend-param="item.extendParam"
                 :icon-text-icon-hide-title="false"
@@ -168,7 +175,7 @@ const monitorDatas = ref<MonitorData[]>([
       </div>
     </div>
 
-    <Edit v-model:visible="EditShowStatus" />
+    <Edit v-model:visible="editShowStatus" :monitor-data="editData" :index="editIndex" @done="handleSaveDone" />
   </div>
 </template>
 
diff --git a/src/components/deskModule/SystemMonitor/typings.ts b/src/components/deskModule/SystemMonitor/typings.ts
index f62d50c..148b0b4 100644
--- a/src/components/deskModule/SystemMonitor/typings.ts
+++ b/src/components/deskModule/SystemMonitor/typings.ts
@@ -12,7 +12,7 @@ export interface MonitorData {
   monitorType: MonitorType
   extendParam?: { [key: string]: [value:any] } | any
   description?: string
-  cardStyle: CardStyle
+  // cardStyle: CardStyle
 }
 
 export interface ProgressStyle {
diff --git a/src/store/modules/moduleConfig/index.ts b/src/store/modules/moduleConfig/index.ts
index 7b24926..cf8bcb8 100644
--- a/src/store/modules/moduleConfig/index.ts
+++ b/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)
     },
 
     // 从网络同步

From c955afd86134b38620a884e9e6540eda398392e4 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Fri, 5 Jan 2024 21:36:38 +0800
Subject: [PATCH 08/14] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E7=A3=81=E7=9B=98=E6=8C=82=E8=BD=BD=E7=82=B9=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 service/api/api_v1/system/monitor.go | 11 ++++++++++-
 service/lib/monitor/monitor.go       |  4 ++++
 service/router/system/monitor.go     |  3 ++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/service/api/api_v1/system/monitor.go b/service/api/api_v1/system/monitor.go
index f830ae8..7a14d2c 100644
--- a/service/api/api_v1/system/monitor.go
+++ b/service/api/api_v1/system/monitor.go
@@ -70,7 +70,7 @@ func (a *MonitorApi) GetDiskStateByPath(c *gin.Context) {
 	cacheDiskName := global.SystemMonitor_DISK_INFO + req.Path
 
 	if v, ok := global.SystemMonitor.Get(cacheDiskName); ok {
-		global.Logger.Debugln("读取缓存的的RAM信息")
+		global.Logger.Debugln("读取缓存的的DISK信息")
 		apiReturn.SuccessData(c, v)
 		return
 	}
@@ -85,3 +85,12 @@ func (a *MonitorApi) GetDiskStateByPath(c *gin.Context) {
 	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)
+	}
+}
diff --git a/service/lib/monitor/monitor.go b/service/lib/monitor/monitor.go
index 9c19435..72c2904 100644
--- a/service/lib/monitor/monitor.go
+++ b/service/lib/monitor/monitor.go
@@ -97,6 +97,10 @@ func GetDiskInfo() ([]DiskInfo, error) {
 	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)
diff --git a/service/router/system/monitor.go b/service/router/system/monitor.go
index 43caa02..d4f3ff0 100644
--- a/service/router/system/monitor.go
+++ b/service/router/system/monitor.go
@@ -9,7 +9,8 @@ import (
 
 func InitMonitorRouter(router *gin.RouterGroup) {
 	api := api_v1.ApiGroupApp.ApiSystem.MonitorApi
-	// r := router.Group("", middleware.LoginInterceptor)
+	r := router.Group("", middleware.LoginInterceptor)
+	r.POST("/system/monitor/getDiskMountpoints", api.GetDiskMountpoints)
 
 	// 公开模式
 	rPublic := router.Group("", middleware.PublicModeInterceptor)

From a85d90985df45af75f8fbc165021b160d5e6500d Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Fri, 5 Jan 2024 22:19:47 +0800
Subject: [PATCH 09/14] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A3=81=E7=9B=98?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=8D=A1=E7=89=87=E7=9A=84=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/systemMonitor.ts               |   6 +
 .../AppIconSystemMonitor/Disk.vue             |   1 +
 .../AppIconSystemMonitor/index.vue            |   2 +-
 .../SystemMonitor/Edit/DiskEditor/index.vue   | 120 ++++++++++++++++++
 .../deskModule/SystemMonitor/Edit/index.vue   |  27 +++-
 .../deskModule/SystemMonitor/typings.ts       |   4 +
 src/typings/systemMonitor.d.ts                |   6 +
 7 files changed, 159 insertions(+), 7 deletions(-)
 create mode 100644 src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue

diff --git a/src/api/system/systemMonitor.ts b/src/api/system/systemMonitor.ts
index 684c90b..0e17ff2 100644
--- a/src/api/system/systemMonitor.ts
+++ b/src/api/system/systemMonitor.ts
@@ -24,3 +24,9 @@ export function getMemonyState<T>() {
     url: '/system/monitor/getMemonyState',
   })
 }
+
+export function getDiskMountpoints<T>() {
+  return post<T>({
+    url: '/system/monitor/getDiskMountpoints',
+  })
+}
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
index 41898d2..9443215 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
@@ -31,6 +31,7 @@ function formatdiskToByte(v: number): number {
 }
 
 async function getData() {
+  console.log(props.path)
   try {
     const { data, code } = await getDiskStateByPath<SystemMonitor.DiskInfo>(props.path)
     if (code === 0)
diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
index 49fd477..d02f466 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/index.vue
@@ -31,7 +31,7 @@ const iconText = computed(() => {
   }
   return ''
 })
-const refreshInterval = 50000
+const refreshInterval = 5000
 </script>
 
 <template>
diff --git a/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue b/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue
new file mode 100644
index 0000000..77606be
--- /dev/null
+++ b/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+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'
+
+interface Emit {
+  (e: 'update:diskExtendParam', visible: DiskExtendParam): void
+}
+
+const props = defineProps<{
+  diskExtendParam: DiskExtendParam
+}>()
+const emit = defineEmits<Emit>()
+
+const mountPointList = ref<{
+  label: string
+  value: string
+}[]>([])
+
+const data = 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]
+      mountPointList.value.push({
+        label: element.device,
+        value: element.mountpoint,
+      })
+    }
+  }
+  catch (error) {
+
+  }
+}
+
+onMounted(() => {
+  getMountPointList()
+})
+</script>
+
+<template>
+  <div>
+    <!-- <div>{{ genericProgressStyleExtendParam }}</div>
+    <div>{{ data }}</div> -->
+    <div class="flex mb-5 justify-center">
+      <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="挂载点">
+        <NSelect v-model:value="data.path" size="small" :options="mountPointList" />
+      </NFormItem>
+      <NFormItem label="主色">
+        <NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem label="副色">
+        <NColorPicker v-model:value="data.progressRailColor" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem label="文字图标颜色">
+        <NColorPicker v-model:value="data.color" :modes="['hex']" size="small" />
+      </NFormItem>
+      <NFormItem label="卡片背景色">
+        <NColorPicker v-model:value="data.backgroundColor" :modes="['hex']" size="small" />
+      </NFormItem>
+    </NForm>
+  </div>
+</template>
diff --git a/src/components/deskModule/SystemMonitor/Edit/index.vue b/src/components/deskModule/SystemMonitor/Edit/index.vue
index a7b3689..3456622 100644
--- a/src/components/deskModule/SystemMonitor/Edit/index.vue
+++ b/src/components/deskModule/SystemMonitor/Edit/index.vue
@@ -2,10 +2,11 @@
 import { computed, defineEmits, defineProps, ref, watch } from 'vue'
 import { NButton, NModal, NTabPane, NTabs, useMessage } from 'naive-ui'
 import { MonitorType } from '../typings'
-import type { GenericProgressStyleExtendParam, MonitorData } 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'
 
 interface Props {
   visible: boolean
@@ -24,6 +25,14 @@ const defaultGenericProgressStyleExtendParam: GenericProgressStyleExtendParam =
   backgroundColor: '#2a2a2a6b',
 }
 
+const defaultDiskExtendParam: DiskExtendParam = {
+  progressColor: '#fff',
+  progressRailColor: '#CFCFCFA8',
+  color: '#fff',
+  backgroundColor: '#2a2a2a6b',
+  path: '',
+}
+
 const defaultMonitorData: MonitorData = {
   extendParam: defaultGenericProgressStyleExtendParam,
   monitorType: MonitorType.cpu,
@@ -32,6 +41,7 @@ const defaultMonitorData: MonitorData = {
 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)
@@ -64,12 +74,14 @@ function handleResetGenericProgressStyleExtendParam() {
 
 // 保存提交
 async function handleSubmit() {
-  if (currentMonitorData.value.monitorType === MonitorType.cpu || currentMonitorData.value.monitorType === MonitorType.memory) {
-    currentMonitorData.value.monitorType = active.value as MonitorType
+  currentMonitorData.value.monitorType = active.value as MonitorType
+  if (currentMonitorData.value.monitorType === MonitorType.cpu || currentMonitorData.value.monitorType === MonitorType.memory)
     currentMonitorData.value.extendParam = currentGenericProgressStyleExtendParam
 
-    console.log('保存', currentMonitorData.value.extendParam)
-  }
+  else if (currentMonitorData.value.monitorType === MonitorType.disk)
+    currentMonitorData.value.extendParam = currentDiskExtendParam
+
+  console.log('保存', currentMonitorData.value.extendParam)
 
   if (props.index !== null) {
     const res = await saveByIndex(props.index, currentMonitorData.value)
@@ -114,7 +126,10 @@ async function handleSubmit() {
         </NButton>
       </NTabPane>
       <NTabPane :name="MonitorType.disk" tab="磁盘状态">
-        <!--  -->
+        <DiskEditor v-model:disk-extend-param="currentDiskExtendParam" />
+        <NButton @click="handleResetGenericProgressStyleExtendParam">
+          重置
+        </NButton>
       </NTabPane>
     </NTabs>
 
diff --git a/src/components/deskModule/SystemMonitor/typings.ts b/src/components/deskModule/SystemMonitor/typings.ts
index 148b0b4..2077144 100644
--- a/src/components/deskModule/SystemMonitor/typings.ts
+++ b/src/components/deskModule/SystemMonitor/typings.ts
@@ -27,3 +27,7 @@ export interface GenericProgressStyleExtendParam {
   color: string
   backgroundColor: string
 }
+
+export interface DiskExtendParam extends GenericProgressStyleExtendParam {
+  path: string
+}
diff --git a/src/typings/systemMonitor.d.ts b/src/typings/systemMonitor.d.ts
index 99def4a..7f42e47 100644
--- a/src/typings/systemMonitor.d.ts
+++ b/src/typings/systemMonitor.d.ts
@@ -34,4 +34,10 @@ declare namespace SystemMonitor {
         netIOCountersInfo: NetIOCountersInfo[]
         memoryInfo: MemoryInfo
     }
+
+    interface Mountpoint{
+        device:string
+        mountpoint:string
+        fstype:string
+    }
 }
\ No newline at end of file

From 3f4b3c67f261f21121c8e9f7c14d926f152a5836 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Sat, 6 Jan 2024 11:46:59 +0800
Subject: [PATCH 10/14] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E4=BA=86=E5=A2=9E=E6=94=B9=E6=9F=A5=E5=8C=85=E6=8B=AC=E7=A3=81?=
 =?UTF-8?q?=E7=9B=98=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppIconSystemMonitor/Disk.vue             |  1 -
 .../SystemMonitor/Edit/DiskEditor/index.vue   | 57 ++++++++++++-------
 .../Edit/GenericProgressStyleEditor/index.vue | 21 +++++--
 .../deskModule/SystemMonitor/Edit/index.vue   | 20 ++++---
 .../deskModule/SystemMonitor/index.vue        | 11 +++-
 src/utils/defaultData/index.ts                | 10 ++++
 6 files changed, 81 insertions(+), 39 deletions(-)
 create mode 100644 src/utils/defaultData/index.ts

diff --git a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
index 9443215..41898d2 100644
--- a/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
+++ b/src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
@@ -31,7 +31,6 @@ function formatdiskToByte(v: number): number {
 }
 
 async function getData() {
-  console.log(props.path)
   try {
     const { data, code } = await getDiskStateByPath<SystemMonitor.DiskInfo>(props.path)
     if (code === 0)
diff --git a/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue b/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue
index 77606be..db2e1ff 100644
--- a/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue
+++ b/src/components/deskModule/SystemMonitor/Edit/DiskEditor/index.vue
@@ -6,6 +6,7 @@ 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'
 
 interface Emit {
   (e: 'update:diskExtendParam', visible: DiskExtendParam): void
@@ -21,7 +22,7 @@ const mountPointList = ref<{
   value: string
 }[]>([])
 
-const data = computed({
+const extendParam = computed({
   get: () => props.diskExtendParam,
   set: (visible) => {
     emit('update:diskExtendParam', visible)
@@ -34,8 +35,11 @@ async function getMountPointList() {
     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.device,
+        label: element.mountpoint,
         value: element.mountpoint,
       })
     }
@@ -52,26 +56,25 @@ onMounted(() => {
 
 <template>
   <div>
-    <!-- <div>{{ genericProgressStyleExtendParam }}</div>
-    <div>{{ data }}</div> -->
-    <div class="flex mb-5 justify-center">
+    <!-- <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="data.backgroundColor"
-          :text-color="data.color"
+          :background-color="extendParam.backgroundColor"
+          :text-color="extendParam.color"
         >
           <template #info>
             <GenericProgress
-              :progress-color="data.progressColor"
-              :progress-rail-color="data.progressRailColor"
+              :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="data.color"
+              :text-color="extendParam.color"
               :card-type-style="PanelPanelConfigStyleEnum.info"
             />
           </template>
@@ -83,15 +86,15 @@ onMounted(() => {
           icon-text-icon-hide-title
           :card-type-style="PanelPanelConfigStyleEnum.icon"
           icon="solar-cpu-bold"
-          :background-color="data.backgroundColor"
-          :icon-text-color="data.color"
+          :background-color="extendParam.backgroundColor"
+          :icon-text-color="extendParam.color"
         >
           <template #small>
             <GenericProgress
-              :progress-color="data.progressColor"
-              :progress-rail-color="data.progressRailColor"
+              :progress-color="extendParam.progressColor"
+              :progress-rail-color="extendParam.progressRailColor"
               :percentage="50"
-              :text-color="data.color"
+              :text-color="extendParam.color"
               :card-type-style="PanelPanelConfigStyleEnum.icon"
             />
           </template>
@@ -99,22 +102,32 @@ onMounted(() => {
       </div>
     </div>
 
-    <NForm ref="formRef" v-model="data">
-      <NFormItem label="挂载点">
-        <NSelect v-model:value="data.path" size="small" :options="mountPointList" />
+    <NForm ref="formRef" v-model="extendParam">
+      <NFormItem label="磁盘挂载点">
+        <NSelect v-model:value="extendParam.path" size="small" :options="mountPointList" />
       </NFormItem>
       <NFormItem label="主色">
-        <NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="extendParam.progressColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="副色">
-        <NColorPicker v-model:value="data.progressRailColor" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="extendParam.progressRailColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="文字图标颜色">
-        <NColorPicker v-model:value="data.color" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="extendParam.color" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="卡片背景色">
-        <NColorPicker v-model:value="data.backgroundColor" :modes="['hex']" size="small" />
+        <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>
diff --git a/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue b/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue
index 6451c6c..bf23d44 100644
--- a/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue
+++ b/src/components/deskModule/SystemMonitor/Edit/GenericProgressStyleEditor/index.vue
@@ -5,6 +5,7 @@ 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
@@ -27,7 +28,7 @@ const data = computed({
   <div>
     <!-- <div>{{ genericProgressStyleExtendParam }}</div>
     <div>{{ data }}</div> -->
-    <div class="flex mb-5 justify-center">
+    <div class="flex mb-5 justify-center transparent-grid p-2 rounded-xl border">
       <div class="w-[200px]">
         <GenericMonitorCard
           icon-text-icon-hide-title
@@ -74,17 +75,27 @@ const data = computed({
 
     <NForm ref="formRef" v-model="data">
       <NFormItem label="主色">
-        <NColorPicker v-model:value="data.progressColor" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="data.progressColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="副色">
-        <NColorPicker v-model:value="data.progressRailColor" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="data.progressRailColor" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="文字图标颜色">
-        <NColorPicker v-model:value="data.color" :modes="['hex']" size="small" />
+        <NColorPicker v-model:value="data.color" :swatches="defautSwatchesBackground" :modes="['hex']" size="small" />
       </NFormItem>
       <NFormItem label="卡片背景色">
-        <NColorPicker v-model:value="data.backgroundColor" :modes="['hex']" size="small" />
+        <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>
diff --git a/src/components/deskModule/SystemMonitor/Edit/index.vue b/src/components/deskModule/SystemMonitor/Edit/index.vue
index 3456622..ee1a360 100644
--- a/src/components/deskModule/SystemMonitor/Edit/index.vue
+++ b/src/components/deskModule/SystemMonitor/Edit/index.vue
@@ -63,13 +63,16 @@ 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)
-    handleResetGenericProgressStyleExtendParam()
+    handleResetExtendParam()
 })
 
-function handleResetGenericProgressStyleExtendParam() {
+function handleResetExtendParam() {
   currentGenericProgressStyleExtendParam.value = { ...defaultGenericProgressStyleExtendParam }
+  currentDiskExtendParam.value = { ...defaultDiskExtendParam }
 }
 
 // 保存提交
@@ -109,25 +112,26 @@ async function handleSubmit() {
 <template>
   <NModal v-model:show="show" preset="card" size="small" style="width: 600px;border-radius: 1rem;" :title="monitorData ? '修改项目' : '添加项目'">
     <!-- 选择监视器 -->
-    <div>
-      <!-- progressStyle值：{{ JSON.stringify(currentGenericProgressStyleExtendParam) }} -->
-    </div>
+    <!-- <div>
+      {{ JSON.stringify(currentGenericProgressStyleExtendParam) }}
+      {{ JSON.stringify(currentDiskExtendParam) }}
+    </div> -->
     <NTabs v-model:value="active" type="segment">
       <NTabPane :name="MonitorType.cpu" tab="CPU状态">
         <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
-        <NButton @click="handleResetGenericProgressStyleExtendParam">
+        <NButton @click="handleResetExtendParam">
           重置
         </NButton>
       </NTabPane>
       <NTabPane :name="MonitorType.memory" tab="内存状态">
         <GenericProgressStyleEditor v-model:genericProgressStyleExtendParam="currentGenericProgressStyleExtendParam" />
-        <NButton @click="handleResetGenericProgressStyleExtendParam">
+        <NButton @click="handleResetExtendParam">
           重置
         </NButton>
       </NTabPane>
       <NTabPane :name="MonitorType.disk" tab="磁盘状态">
         <DiskEditor v-model:disk-extend-param="currentDiskExtendParam" />
-        <NButton @click="handleResetGenericProgressStyleExtendParam">
+        <NButton @click="handleResetExtendParam">
           重置
         </NButton>
       </NTabPane>
diff --git a/src/components/deskModule/SystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/index.vue
index 786c439..b2058dc 100644
--- a/src/components/deskModule/SystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/index.vue
@@ -62,8 +62,11 @@ const monitorDatas = ref<MonitorData[]>([])
 
 function handleClick(index: number, item: MonitorData) {
   editShowStatus.value = true
+
   editData.value = item
   editIndex.value = index
+
+  console.log(editData.value)
 }
 
 async function getData() {
@@ -77,6 +80,10 @@ onMounted(() => {
 function handleSaveDone() {
   getData()
 }
+
+function handleSaveSort() {
+
+}
 </script>
 
 <template>
@@ -118,7 +125,6 @@ function handleSaveDone() {
             v-for="item, index in monitorDatas" :key="index"
             :title="item.description"
             @click="handleClick(index, item)"
-            @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)"
           >
             <AppIconSystemMonitor
               :extend-param="item.extendParam"
@@ -145,7 +151,6 @@ function handleSaveDone() {
               v-for="item, index in monitorDatas" :key="index"
               :title="item.description"
               @click="handleClick(index, item)"
-              @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)"
             >
               <AppIconSystemMonitor
                 :extend-param="item.extendParam"
@@ -163,7 +168,7 @@ function handleSaveDone() {
       <!-- 编辑栏 -->
       <div v-if="monitorGroup.sortStatus" class="flex mt-[10px]">
         <div>
-          <NButton color="#2a2a2a6b" @click="handleSaveSort(monitorGroup)">
+          <NButton color="#2a2a2a6b" @click="handleSaveSort()">
             <template #icon>
               <SvgIcon class="text-white font-xl" icon="material-symbols:save" />
             </template>
diff --git a/src/utils/defaultData/index.ts b/src/utils/defaultData/index.ts
new file mode 100644
index 0000000..17b24f9
--- /dev/null
+++ b/src/utils/defaultData/index.ts
@@ -0,0 +1,10 @@
+export const defautSwatchesBackground = [
+  '#00000000',
+  '#000000',
+  '#ffffff',
+  '#18A058',
+  '#2080F0',
+  '#F0A020',
+  'rgba(208, 48, 80, 1)',
+  '#C418D1FF',
+]

From 128af005ebc95b73ecef8873301a61556984fbea Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Sat, 6 Jan 2024 11:56:32 +0800
Subject: [PATCH 11/14] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=8E=92=E5=BA=8F?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../deskModule/SystemMonitor/index.vue        | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/components/deskModule/SystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/index.vue
index b2058dc..4553b98 100644
--- a/src/components/deskModule/SystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/index.vue
@@ -5,7 +5,7 @@ import { NButton } from 'naive-ui'
 import AppIconSystemMonitor from './AppIconSystemMonitor/index.vue'
 import type { CardStyle, MonitorData } from './typings'
 import Edit from './Edit/index.vue'
-import { getAll } from './common'
+import { getAll, saveAll } from './common'
 import { useAuthStore, usePanelState } from '@/store'
 import { PanelPanelConfigStyleEnum } from '@/enums'
 import { VisitMode } from '@/enums/auth'
@@ -23,11 +23,6 @@ const monitorGroup = ref<MonitorGroup>({
   hoverStatus: false,
   sortStatus: false,
 })
-// const progressStyle = ref<ProgressStyle>({
-//   color: 'white',
-//   railColor: 'rgba(0, 0, 0, 0.2)',
-//   height: 5,
-// })
 
 const editShowStatus = ref<boolean>(false)
 const editData = ref<MonitorData | null>(null)
@@ -42,12 +37,9 @@ function handleAddItem() {
 function handleSetSortStatus(sortStatus: boolean) {
   monitorGroup.value.sortStatus = sortStatus
 
-  // // 并未保存排序重新更新数据
-  // if (!sortStatus) {
-  //   // 单独更新组
-  //   if (items.value[groupIndex] && items.value[groupIndex].id)
-  //     updateItemIconGroupByNet(groupIndex, items.value[groupIndex].id as number)
-  // }
+  // 并未保存排序重新更新数据
+  if (!sortStatus)
+    getData()
 }
 
 function handleSetHoverStatus(hoverStatus: boolean) {
@@ -62,11 +54,8 @@ const monitorDatas = ref<MonitorData[]>([])
 
 function handleClick(index: number, item: MonitorData) {
   editShowStatus.value = true
-
   editData.value = item
   editIndex.value = index
-
-  console.log(editData.value)
 }
 
 async function getData() {
@@ -81,8 +70,10 @@ function handleSaveDone() {
   getData()
 }
 
-function handleSaveSort() {
-
+async function handleSaveSort() {
+  const { code } = await saveAll(monitorDatas.value)
+  if (code === 0)
+    monitorGroup.value.sortStatus = false
 }
 </script>
 

From cdf16277ff85cee5029de3b7ea78b14bc0274623 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Sat, 6 Jan 2024 12:41:38 +0800
Subject: [PATCH 12/14] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../deskModule/SystemMonitor/common.ts        |  3 +-
 .../deskModule/SystemMonitor/index.vue        | 96 +++++++++++++++++--
 2 files changed, 88 insertions(+), 11 deletions(-)

diff --git a/src/components/deskModule/SystemMonitor/common.ts b/src/components/deskModule/SystemMonitor/common.ts
index f5b55d9..0df0cd4 100644
--- a/src/components/deskModule/SystemMonitor/common.ts
+++ b/src/components/deskModule/SystemMonitor/common.ts
@@ -77,10 +77,11 @@ export async function deleteByIndex(index: number): Promise<boolean> {
     const data = await getAll()
     if (data[index])
       data.splice(index, 1)
-    saveAll(data)
+    await saveAll(data)
   }
   catch (error) {
     success = false
+    console.error(error)
   }
 
   return success
diff --git a/src/components/deskModule/SystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/index.vue
index 4553b98..22e055f 100644
--- a/src/components/deskModule/SystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/index.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
-import { NButton } from 'naive-ui'
+import { NButton, NDropdown, useDialog } from 'naive-ui'
 import AppIconSystemMonitor from './AppIconSystemMonitor/index.vue'
 import type { CardStyle, MonitorData } from './typings'
 import Edit from './Edit/index.vue'
-import { getAll, saveAll } from './common'
-import { useAuthStore, usePanelState } from '@/store'
+import { deleteByIndex, getAll, saveAll } from './common'
+import { usePanelState } from '@/store'
 import { PanelPanelConfigStyleEnum } from '@/enums'
-import { VisitMode } from '@/enums/auth'
 import { SvgIcon } from '@/components/common'
 
 interface MonitorGroup extends Panel.ItemIconGroup {
@@ -16,9 +15,20 @@ interface MonitorGroup extends Panel.ItemIconGroup {
   hoverStatus: boolean
   items?: Panel.ItemInfo[]
 }
+
+const props = defineProps<{
+  allowEdit?: boolean
+  showTitle?: boolean
+}>()
 const panelState = usePanelState()
-const authStore = useAuthStore()
-// const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
+
+const dialog = useDialog()
+
+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,
@@ -53,6 +63,8 @@ const cardStyle: CardStyle = {
 const monitorDatas = ref<MonitorData[]>([])
 
 function handleClick(index: number, item: MonitorData) {
+  if (!props.allowEdit)
+    return
   editShowStatus.value = true
   editData.value = item
   editIndex.value = index
@@ -75,6 +87,63 @@ async function handleSaveSort() {
   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: '删除',
+      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: '警告',
+        content: '你确定要删除吗？',
+        positiveText: '确定',
+        negativeText: '取消',
+        onPositiveClick: () => {
+          if (currentRightSelectIndex.value !== null)
+            deleteOneByIndex(currentRightSelectIndex.value)
+        },
+      })
+
+      break
+    default:
+      break
+  }
+}
 </script>
 
 <template>
@@ -87,11 +156,11 @@ async function handleSaveSort() {
     >
       <!-- 分组标题 -->
       <div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
-        <span class="text-shadow">
+        <span v-if="showTitle" class="text-shadow">
           系统状态
         </span>
         <div
-          v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
+          v-if="allowEdit"
           class="ml-2 delay-100 transition-opacity flex"
           :class="monitorGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
         >
@@ -116,6 +185,7 @@ async function handleSaveSort() {
             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"
@@ -142,6 +212,7 @@ async function handleSaveSort() {
               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"
@@ -157,7 +228,7 @@ async function handleSaveSort() {
       </div>
 
       <!-- 编辑栏 -->
-      <div v-if="monitorGroup.sortStatus" class="flex mt-[10px]">
+      <div v-if="monitorGroup.sortStatus && allowEdit" class="flex mt-[10px]">
         <div>
           <NButton color="#2a2a2a6b" @click="handleSaveSort()">
             <template #icon>
@@ -172,6 +243,11 @@ async function handleSaveSort() {
     </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>
 

From 899c945fff12290f3c81348a3c262400b1a0ce15 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Sat, 6 Jan 2024 12:54:19 +0800
Subject: [PATCH 13/14] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../deskModule/SystemMonitor/index.vue        | 30 +++++++++++++++++--
 src/locales/zh-CN.ts                          |  1 +
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/deskModule/SystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/index.vue
index 22e055f..2e96314 100644
--- a/src/components/deskModule/SystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/index.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
-import { NButton, NDropdown, useDialog } from 'naive-ui'
+import { NButton, NDropdown, useDialog, useMessage } from 'naive-ui'
 import AppIconSystemMonitor from './AppIconSystemMonitor/index.vue'
-import type { CardStyle, MonitorData } from './typings'
+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
@@ -23,6 +24,7 @@ const props = defineProps<{
 const panelState = usePanelState()
 
 const dialog = useDialog()
+const ms = useMessage()
 
 const dropdownMenuX = ref(0)
 const dropdownMenuY = ref(0)
@@ -72,6 +74,24 @@ function handleClick(index: number, item: MonitorData) {
 
 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(() => {
@@ -104,7 +124,7 @@ function handleContextMenu(e: MouseEvent, index: number | null, item: MonitorDat
 function getDropdownMenuOptions() {
   const dropdownMenuOptions = [
     {
-      label: '删除',
+      label: t('common.delete'),
       key: 'delete',
     },
   ]
@@ -134,6 +154,10 @@ function handleRightMenuSelect(key: string | number) {
         positiveText: '确定',
         negativeText: '取消',
         onPositiveClick: () => {
+          if (monitorDatas.value.length <= 1) {
+            ms.warning(t('common.leastOne'))
+            return
+          }
           if (currentRightSelectIndex.value !== null)
             deleteOneByIndex(currentRightSelectIndex.value)
         },
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 3988e25..5bbd3a8 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -40,6 +40,7 @@ export default {
       regularUser: '普通',
       admin: '管理',
     },
+    leastOne: '请至少保留一项',
   },
   setting: {
     setting: '设置',

From a60f72c2779a4adee77f4ab161fb4fad21ff0611 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Sat, 6 Jan 2024 12:55:04 +0800
Subject: [PATCH 14/14] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 9b81d90..feaf8ef 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -362,13 +362,10 @@ function handleAddItem(itemIconGroupId?: number) {
         </div>
 
         <!-- 应用盒子 -->
-        <div class="mt-[50px]" :style="{ marginLeft: `${panelState.panelConfig.marginX}px`, marginRight: `${panelState.panelConfig.marginX}px` }">
-          <!-- <div v-if="panelState.panelConfig.searchBoxShow" class="flex mt-[20px] mx-auto ">
-            <SystemMonitor @itemSearch="itemFrontEndSearch" />
-          </div> -->
-
+        <div :style="{ marginLeft: `${panelState.panelConfig.marginX}px`, marginRight: `${panelState.panelConfig.marginX}px` }">
+          <!-- 系统状态 -->
           <div v-if="panelState.panelConfig.searchBoxShow" class="flex mx-auto ">
-            <SystemMonitor />
+            <SystemMonitor allow-edit />
           </div>
 
           <!-- 组纵向排列 -->