From 104543b96fb4d5f9362d29da22390d9a0565c395 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Wed, 24 Jan 2024 21:28:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=B3=BB=E7=BB=9F=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E7=BB=84=E4=BB=B6=E7=9A=84=E9=83=A8=E5=88=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../deskModule/SystemMonitor/index.vue        | 64 +++++++++----------
 1 file changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/components/deskModule/SystemMonitor/index.vue b/src/components/deskModule/SystemMonitor/index.vue
index 9824f73..30692ab 100644
--- a/src/components/deskModule/SystemMonitor/index.vue
+++ b/src/components/deskModule/SystemMonitor/index.vue
@@ -171,7 +171,7 @@ function handleRightMenuSelect(key: string | number) {
 </script>
 
 <template>
-  <div class="w-full">
+  <div class="system-monitor w-full">
     <div
       class="mt-[50px]"
       :class="monitorGroup.sortStatus ? 'shadow-2xl border shadow-[0_0_30px_10px_rgba(0,0,0,0.3)]  p-[10px] rounded-2xl' : ''"
@@ -179,13 +179,13 @@ function handleRightMenuSelect(key: string | number) {
       @mouseleave="handleSetHoverStatus(false)"
     >
       <!-- 分组标题 -->
-      <div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
+      <div class="system-monitor-header text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
         <span v-if="showTitle" class="text-shadow">
           {{ $t('deskModule.systemMonitor.systemState') }}
         </span>
         <div
           v-if="allowEdit"
-          class="ml-2 delay-100 transition-opacity flex"
+          class="system-monitor-buttons ml-2 delay-100 transition-opacity flex"
           :class="monitorGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
         >
           <span class="mr-2 cursor-pointer" @click="handleAddItem()">
@@ -198,7 +198,7 @@ function handleRightMenuSelect(key: string | number) {
       </div>
 
       <!-- 详情图标 -->
-      <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
+      <template v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
         <VueDraggable
           v-model="monitorDatas" item-key="sort" :animation="300"
           class="icon-info-box"
@@ -221,39 +221,37 @@ function handleRightMenuSelect(key: string | number) {
             />
           </div>
         </VueDraggable>
-      </div>
+      </template>
 
       <!-- 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"
+      <template v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
+        <VueDraggable
+          v-model="monitorDatas" item-key="sort" :animation="300"
+          class="icon-small-box"
+          filter=".not-drag"
+          :disabled="!monitorGroup.sortStatus"
+        >
+          <div
+            v-for="item, index in monitorDatas" :key="index"
+            :title="item.description"
+            @click="handleClick(index, item)"
+            @contextmenu="(e) => handleContextMenu(e, index, item)"
           >
-            <div
-              v-for="item, index in monitorDatas" :key="index"
-              :title="item.description"
-              @click="handleClick(index, item)"
-              @contextmenu="(e) => handleContextMenu(e, index, item)"
-            >
-              <AppIconSystemMonitor
-                :extend-param="item.extendParam"
-                :icon-text-icon-hide-title="false"
-                :card-type-style="panelState.panelConfig.iconStyle"
-                :monitor-type="item.monitorType"
-                :card-style="cardStyle"
-                :icon-text-color="panelState.panelConfig.iconTextColor"
-              />
-            </div>
-          </vuedraggable>
-        </div>
-      </div>
+            <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>
+      </template>
 
       <!-- 编辑栏 -->
-      <div v-if="monitorGroup.sortStatus && allowEdit" class="flex mt-[10px]">
-        <div>
+      <template v-if="monitorGroup.sortStatus && allowEdit">
+        <div class="system-monitor-edit-bar flex mt-[10px]">
           <NButton color="#2a2a2a6b" @click="handleSaveSort()">
             <template #icon>
               <SvgIcon class="text-white font-xl" icon="material-symbols:save" />
@@ -263,7 +261,7 @@ function handleRightMenuSelect(key: string | number) {
             </div>
           </NButton>
         </div>
-      </div>
+      </template>
     </div>
 
     <Edit v-model:visible="editShowStatus" :monitor-data="editData" :index="editIndex" @done="handleSaveDone" />