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] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=A4=A7=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=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"