初步完成了编辑器

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>