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] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90=E4=BA=86?=
 =?UTF-8?q?=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)
 }