From 1725088f058f490523892659b8d70e089ee0e5dc Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 27 May 2025 13:12:09 +0800
Subject: [PATCH] =?UTF-8?q?fix=20=E6=8F=92=E4=BB=B6=E6=B7=B7=E5=90=88?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...edSortCard.vue => PluginMixedSortCard.vue} | 118 +++++++++++-------
 src/views/plugin/PluginCardListView.vue       |  10 +-
 2 files changed, 74 insertions(+), 54 deletions(-)
 rename src/components/cards/{MixedSortCard.vue => PluginMixedSortCard.vue} (87%)

diff --git a/src/components/cards/MixedSortCard.vue b/src/components/cards/PluginMixedSortCard.vue
similarity index 87%
rename from src/components/cards/MixedSortCard.vue
rename to src/components/cards/PluginMixedSortCard.vue
index 972c72e8..9ac67479 100644
--- a/src/components/cards/MixedSortCard.vue
+++ b/src/components/cards/PluginMixedSortCard.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="mixed-sort-card-wrapper">
-    <!-- 文件夹卡片 -->
-    <div
-      v-if="item.type === 'folder'"
-      class="drop-zone cursor-move"
-      :data-plugin-id="item.id"
-      @dragover="handleDragOver"
-      @dragenter="handleDragEnter"
-      @dragleave="handleDragLeave"
-      @drop="handleDropToFolder"
-    >
-      <PluginFolderCard
-        :folder-name="item.data.name"
-        :plugin-count="item.data.pluginCount"
-        :folder-config="item.data.config"
-        @open="$emit('openFolder', item.id)"
-        @delete="$emit('deleteFolder', item.id)"
-        @rename="(oldName, newName) => $emit('renameFolder', oldName, newName)"
-        @update-config="config => $emit('updateFolderConfig', item.id, config)"
-      />
-    </div>
-
-    <!-- 插件卡片 -->
-    <div v-else-if="item.type === 'plugin'" class="plugin-item-wrapper cursor-move" :data-plugin-id="item.id">
-      <PluginCard
-        :count="pluginStatistics[item.id] || 0"
-        :plugin="item.data"
-        :action="pluginActions[item.id] || false"
-        @remove="$emit('refreshData')"
-        @save="$emit('refreshData')"
-        @action-done="$emit('actionDone', item.id)"
-      />
-
-      <!-- 移出文件夹按钮（仅在文件夹内显示） -->
-      <VBtn
-        v-if="showRemoveButton"
-        icon="mdi-folder-remove"
-        variant="text"
-        color="warning"
-        size="small"
-        class="remove-from-folder-btn"
-        @click="$emit('removeFromFolder', item.id)"
-      />
-    </div>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import PluginCard from './PluginCard.vue'
 import PluginFolderCard from './PluginFolderCard.vue'
@@ -121,14 +73,76 @@ function handleDropToFolder(event: DragEvent) {
 }
 </script>
 
+<template>
+  <div class="mixed-sort-card-wrapper">
+    <!-- 文件夹卡片 -->
+    <div
+      v-if="item.type === 'folder'"
+      class="drop-zone cursor-move"
+      :data-plugin-id="item.id"
+      @dragover="handleDragOver"
+      @dragenter="handleDragEnter"
+      @dragleave="handleDragLeave"
+      @drop="handleDropToFolder"
+    >
+      <PluginFolderCard
+        :folder-name="item.data.name"
+        :plugin-count="item.data.pluginCount"
+        :folder-config="item.data.config"
+        @open="$emit('openFolder', item.id)"
+        @delete="$emit('deleteFolder', item.id)"
+        @rename="(oldName, newName) => $emit('renameFolder', oldName, newName)"
+        @update-config="(folderName, config) => $emit('updateFolderConfig', folderName, config)"
+      />
+    </div>
+
+    <!-- 插件卡片 -->
+    <div v-else-if="item.type === 'plugin'" class="plugin-item-wrapper cursor-move" :data-plugin-id="item.id">
+      <PluginCard
+        :count="pluginStatistics[item.id] || 0"
+        :plugin="item.data"
+        :action="pluginActions[item.id] || false"
+        @remove="$emit('refreshData')"
+        @save="$emit('refreshData')"
+        @action-done="$emit('actionDone', item.id)"
+      />
+
+      <!-- 移出文件夹按钮（仅在文件夹内显示） -->
+      <VBtn
+        v-if="showRemoveButton"
+        icon="mdi-folder-remove"
+        variant="text"
+        color="warning"
+        size="small"
+        class="remove-from-folder-btn"
+        @click="$emit('removeFromFolder', item.id)"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .mixed-sort-card-wrapper {
   block-size: 100%;
   inline-size: 100%;
+
+  // 确保拖拽时的边界清晰
+  &.sortable-chosen {
+    opacity: 0.5;
+  }
+
+  &.sortable-ghost {
+    border: 2px dashed #2196f3;
+    border-radius: 16px;
+    background: rgba(33, 150, 243, 10%);
+    opacity: 0.3;
+  }
 }
 
 // 拖拽相关样式
 .drop-zone {
+  position: relative;
+  isolation: isolate; // 创建新的层叠上下文
   transition: all 0.3s ease;
 
   &.drag-over {
@@ -141,6 +155,7 @@ function handleDropToFolder(event: DragEvent) {
 
 .plugin-item-wrapper {
   position: relative;
+  isolation: isolate; // 创建新的层叠上下文
 
   .remove-from-folder-btn {
     position: absolute;
@@ -158,4 +173,11 @@ function handleDropToFolder(event: DragEvent) {
     opacity: 1;
   }
 }
+
+// 拖拽时的样式优化
+.mixed-sort-card-wrapper.sortable-drag {
+  .remove-from-folder-btn {
+    display: none !important;
+  }
+}
 </style>
diff --git a/src/views/plugin/PluginCardListView.vue b/src/views/plugin/PluginCardListView.vue
index 49f6bf42..6396a3cd 100644
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -5,7 +5,6 @@ import api from '@/api'
 import type { Plugin } from '@/api/types'
 import NoDataFound from '@/components/NoDataFound.vue'
 import PluginAppCard from '@/components/cards/PluginAppCard.vue'
-import PluginCard from '@/components/cards/PluginCard.vue'
 import noImage from '@images/logos/plugin.png'
 import { useDisplay } from 'vuetify'
 import { isNullOrEmptyObject } from '@/@core/utils'
@@ -13,8 +12,7 @@ import { getPluginTabs } from '@/router/i18n-menu'
 import PluginMarketSettingDialog from '@/components/dialog/PluginMarketSettingDialog.vue'
 import { useDynamicButton } from '@/composables/useDynamicButton'
 import { useI18n } from 'vue-i18n'
-import PluginFolderCard from '@/components/cards/PluginFolderCard.vue'
-import MixedSortCard from '@/components/cards/MixedSortCard.vue'
+import PluginMixedSortCard from '@/components/cards/PluginMixedSortCard.vue'
 
 // 国际化
 const { t } = useI18n()
@@ -1345,7 +1343,7 @@ function onDragEndPlugin(evt: any) {
                   group="mixed"
                 >
                   <template #item="{ element }">
-                    <MixedSortCard
+                    <PluginMixedSortCard
                       :item="element"
                       :plugin-statistics="PluginStatistics"
                       :plugin-actions="pluginActions"
@@ -1378,7 +1376,7 @@ function onDragEndPlugin(evt: any) {
                   group="plugins"
                 >
                   <template #item="{ element }">
-                    <MixedSortCard
+                    <PluginMixedSortCard
                       :item="{ type: 'plugin', id: element.id, data: element, order: 0 }"
                       :plugin-statistics="PluginStatistics"
                       :plugin-actions="pluginActions"
@@ -1565,5 +1563,5 @@ function onDragEndPlugin(evt: any) {
 </template>
 
 <style lang="scss" scoped>
-// 样式已移至 MixedSortCard 组件
+// 样式已移至 PluginMixedSortCard 组件
 </style>