fix: make sort mode drag-only across cards

src/components/cards/PluginCard.vue

@@ -273,6 +273,14 @@ function openPluginDetail() {
   else showPluginConfig()
 }
 
+function handleCardClick() {
+  if (props.sortable) {
+    return
+  }
+
+  openPluginDetail()
+}
+
 // 配置完成
 function configDone() {
   pluginConfigDialog.value = false
@@ -438,11 +446,13 @@ watch(
           v-bind="hover.props"
           :width="props.width"
           :height="props.height"
-          @click="openPluginDetail"
+          @click="handleCardClick"
           class="flex flex-col h-full"
           :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
+            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering && !props.sortable,
+            'cursor-move': props.sortable,
           }"
+          :ripple="!props.sortable"
         >
           <div
             class="flex-grow"
@@ -487,7 +497,11 @@ watch(
                     <VIcon v-if="!isAvatarLoaded" size="small" icon="mdi-github" class="me-1" />
                   </template>
                 </VImg>
+                <span v-if="props.sortable" class="overflow-hidden text-ellipsis whitespace-nowrap">
+                  {{ props.plugin?.plugin_author }}
+                </span>
                 <a
+                  v-else
                   :href="props.plugin?.author_url"
                   target="_blank"
                   @click.stop
@@ -501,7 +515,7 @@ watch(
                 <span class="text-sm">{{ formatDownloadCount(props.count) }}</span>
               </span>
             </div>
-            <div class="absolute bottom-0 right-0">
+            <div v-if="!props.sortable" class="absolute bottom-0 right-0">
               <IconBtn>
                 <VIcon icon="mdi-dots-vertical" />
                 <VMenu v-model="menuVisible" activator="parent" close-on-content-click>

src/components/cards/PluginFolderCard.vue

@@ -169,6 +169,14 @@ function openFolder() {
   emit('open', props.folderName)
 }
 
+function handleCardClick() {
+  if (props.sortable) {
+    return
+  }
+
+  openFolder()
+}
+
 // 重命名文件夹
 function showRenameDialog() {
   newFolderName.value = props.folderName || ''
@@ -279,11 +287,12 @@ const dropdownItems = ref([
           :width="props.width"
           :height="props.height"
           min-height="8.5rem"
-          @click="openFolder"
+          @click="handleCardClick"
           class="plugin-folder-card h-full"
           :class="{
             'plugin-folder-card--mobile': display.mobile,
-            'plugin-folder-card--hover': hover.isHovering,
+            'plugin-folder-card--hover': hover.isHovering && !props.sortable,
+            'plugin-folder-card--sortable': props.sortable,
           }"
         >
           <template v-if="backgroundImage" #image>
@@ -325,7 +334,7 @@ const dropdownItems = ref([
             </div>
 
             <!-- 更多菜单按钮 - 右下角 -->
-            <div class="absolute top-0 right-0">
+            <div v-if="!props.sortable" class="absolute top-0 right-0">
               <VMenu v-model="menuVisible" location="top end" :close-on-content-click="true">
                 <template #activator="{ props: menuProps }">
                   <IconBtn v-bind="menuProps" @click.stop>
@@ -495,6 +504,10 @@ const dropdownItems = ref([
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
+  &--sortable {
+    cursor: move;
+  }
+
   &--hover {
     transform: translateY(-4px);
   }

src/components/cards/PluginMixedSortCard.vue

@@ -113,7 +113,7 @@ function handleDropToFolder(event: DragEvent) {
 
       <!-- 移出文件夹按钮（仅在文件夹内显示） -->
       <VBtn
-        v-if="showRemoveButton"
+        v-if="showRemoveButton && !sortable"
         icon="mdi-folder-remove"
         variant="text"
         color="warning"

src/components/cards/SiteCard.vue

@@ -123,6 +123,22 @@ function openSitePage() {
   window.open(cardProps.site?.url, '_blank')
 }
 
+function handleCardClick() {
+  if (cardProps.sortable) {
+    return
+  }
+
+  handleResourceBrowse()
+}
+
+function handleSiteUrlClick() {
+  if (cardProps.sortable) {
+    return
+  }
+
+  openSitePage()
+}
+
 // 调用API删除站点信息
 async function deleteSiteInfo() {
   const isConfirmed = await createConfirm({
@@ -210,21 +226,24 @@ onMounted(() => {
 <template>
   <div>
     <VCard
-      class="site-card relative h-full flex flex-col overflow-hidden group transition-all duration-300 cursor-pointer hover:-translate-y-1"
+      class="site-card relative h-full flex flex-col overflow-hidden group transition-all duration-300"
       :class="[
         cardProps.site?.is_active ? '' : 'opacity-70',
         {
           'border-error': statColor === 'error',
           'border-warning': statColor === 'warning',
           'border-success': statColor === 'success',
+          'cursor-pointer hover:-translate-y-1': !cardProps.sortable,
+          'cursor-move': cardProps.sortable,
+          'site-card--sortable': cardProps.sortable,
         },
       ]"
       :ripple="false"
       variant="flat"
       elevation="0"
       rounded="lg"
-      hover
+      :hover="!cardProps.sortable"
-      @click="handleResourceBrowse"
+      @click="handleCardClick"
     >
       <!-- 装饰性状态指示器 -->
       <div v-if="cardProps.site?.is_active" class="site-status-indicator" :class="statColor"></div>
@@ -256,17 +275,37 @@ onMounted(() => {
 
             <!-- 站点特性图标 -->
             <div class="ml-auto flex shrink-0 items-center gap-2">
-              <div v-if="cardProps.site?.limit_interval" class="hover:bg-primary/8 transition-colors">
+              <div v-if="cardProps.site?.limit_interval" :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'">
-                <VIcon icon="mdi-speedometer" size="16" color="primary" class="opacity-85 hover:opacity-100" />
+                <VIcon
+                  icon="mdi-speedometer"
+                  size="16"
+                  color="primary"
+                  :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
+                />
               </div>
-              <div v-if="cardProps.site?.proxy" class="hover:bg-primary/8 transition-colors">
+              <div v-if="cardProps.site?.proxy" :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'">
-                <VIcon icon="mdi-network-outline" size="16" color="primary" class="opacity-85 hover:opacity-100" />
+                <VIcon
+                  icon="mdi-network-outline"
+                  size="16"
+                  color="primary"
+                  :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
+                />
               </div>
-              <div v-if="cardProps.site?.render" class="hover:bg-primary/8 transition-colors">
+              <div v-if="cardProps.site?.render" :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'">
-                <VIcon icon="mdi-apple-safari" size="16" color="primary" class="opacity-85 hover:opacity-100" />
+                <VIcon
+                  icon="mdi-apple-safari"
+                  size="16"
+                  color="primary"
+                  :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
+                />
               </div>
-              <div v-if="cardProps.site?.filter" class="hover:bg-primary/8 transition-colors">
+              <div v-if="cardProps.site?.filter" :class="cardProps.sortable ? '' : 'hover:bg-primary/8 transition-colors'">
-                <VIcon icon="mdi-filter-cog-outline" size="16" color="primary" class="opacity-85 hover:opacity-100" />
+                <VIcon
+                  icon="mdi-filter-cog-outline"
+                  size="16"
+                  color="primary"
+                  :class="cardProps.sortable ? 'opacity-85' : 'opacity-85 hover:opacity-100'"
+                />
               </div>
             </div>
           </div>
@@ -274,10 +313,10 @@ onMounted(() => {
 
         <!-- 中间部分：网址 -->
         <div class="my-3">
-          <div class="min-w-0 truncate text-sm text-medium-emphasis" @click.stop="openSitePage">
+            <div class="min-w-0 truncate text-sm text-medium-emphasis" @click.stop="handleSiteUrlClick">
-            {{ cardProps.site?.url }}
+              {{ cardProps.site?.url }}
+            </div>
           </div>
-        </div>
 
         <!-- 底部：数据统计 -->
         <div class="flex-1 flex flex-col justify-end">
@@ -309,7 +348,7 @@ onMounted(() => {
       </div>
 
       <!-- 右侧操作按钮区 -->
-      <VSheet class="site-card-actions absolute inset-y-0 right-0 z-20 flex flex-col py-2 px-1">
+      <VSheet v-if="!cardProps.sortable" class="site-card-actions absolute inset-y-0 right-0 z-20 flex flex-col py-2 px-1">
         <!-- 测试按钮 -->
         <VBtn
           icon
@@ -432,7 +471,7 @@ onMounted(() => {
 }
 
 /* 站点卡片悬停时状态指示器变化 */
-.site-card:hover .site-status-indicator {
+.site-card:not(.site-card--sortable):hover .site-status-indicator {
   block-size: 2px;
   opacity: 0.8;
 }

src/components/cards/SubscribeCard.vue

@@ -313,6 +313,10 @@ function onSubscribeEditRemove() {
 
 // 处理卡片点击事件
 function handleCardClick() {
+  if (props.sortable) {
+    return
+  }
+
   if (props.batchMode) {
     // 批量模式下触发选择事件
     emit('select')
@@ -330,7 +334,7 @@ function handleCardClick() {
         <div
           class="w-full h-full rounded-lg overflow-hidden"
           :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
+            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering && !props.sortable,
             'outline-dashed outline-1': props.media?.best_version && imageLoaded,
             'outline-dotted outline-pink-500 outline-2': props.batchMode && props.selected,
           }"
@@ -341,13 +345,14 @@ function handleCardClick() {
             class="flex flex-col h-full"
             :class="{
               'opacity-70': subscribeState === 'S',
+              'cursor-move': props.sortable,
             }"
             rounded="0"
             min-height="150"
             @click="handleCardClick"
-            :ripple="!props.batchMode"
+            :ripple="!props.batchMode && !props.sortable"
           >
-            <div class="me-n3 absolute top-1 right-4">
+            <div v-if="!props.sortable" class="me-n3 absolute top-1 right-4">
               <IconBtn>
                 <VIcon icon="mdi-dots-vertical" color="white" />
                 <VMenu activator="parent" close-on-content-click>
@@ -405,8 +410,15 @@ function handleCardClick() {
               </VCardText>
               <VCardText class="flex justify-space-between align-center flex-wrap px-3">
                 <div class="flex align-center">
+                  <VIcon
+                    v-if="props.media?.total_episode && props.sortable"
+                    icon="mdi-progress-download"
+                    size="small"
+                    color="white"
+                    class="me-1"
+                  />
                   <IconBtn
-                    v-if="props.media?.total_episode"
+                    v-else-if="props.media?.total_episode"
                     size="small"
                     v-bind="props"
                     icon="mdi-progress-download"
@@ -416,7 +428,8 @@ function handleCardClick() {
                     {{ (props.media?.total_episode || 0) - (props.media?.lack_episode || 0) }} /
                     {{ props.media?.total_episode }}
                   </div>
-                  <IconBtn v-if="props.media?.username" icon="mdi-account" size="small" color="white" />
+                  <VIcon v-if="props.media?.username && props.sortable" icon="mdi-account" size="small" color="white" class="me-1" />
+                  <IconBtn v-else-if="props.media?.username" icon="mdi-account" size="small" color="white" />
                   <span v-if="props.media?.username" class="text-subtitle-2 text-white">
                     {{ props.media?.username }}
                   </span>

src/locales/en-US.ts

@@ -75,7 +75,7 @@ export default {
     versionMismatch: 'The browser cache version is inconsistent with the server version, please try to clear the cache',
     clearCache: 'Clear Cache',
     sortMode: 'Sort Mode',
-    sortModeHint: 'Virtualization is disabled for large lists to allow drag sorting, which may reduce smoothness.',
+    sortModeHint: 'Drag sorting mode is active',
   },
   mediaType: {
     movie: 'Movie',

src/locales/zh-CN.ts

@@ -75,7 +75,7 @@ export default {
     versionMismatch: '浏览器缓存版本与服务端版本不一致，请尝试清除缓存',
     clearCache: '清除缓存',
     sortMode: '排序模式',
-    sortModeHint: '已关闭大列表虚拟渲染，方便拖拽排序，但页面流畅度可能下降。',
+    sortModeHint: '已进入拖拽排序模式',
   },
   mediaType: {
     movie: '电影',

src/locales/zh-TW.ts

@@ -75,7 +75,7 @@ export default {
     versionMismatch: '瀏覽器快取版本與服務端版本不一致，請嘗試清除快取',
     clearCache: '清除快取',
     sortMode: '排序模式',
-    sortModeHint: '已關閉大列表虛擬渲染，方便拖拽排序，但頁面流暢度可能下降。',
+    sortModeHint: '已進入拖拽排序模式',
   },
   mediaType: {
     movie: '電影',

src/views/plugin/PluginCardListView.vue

@@ -1536,7 +1536,6 @@ function onDragStartPlugin(evt: any) {
                   v-model="mixedSortList"
                   @end="saveMixedSortOrder"
                   @start="onDragStartPlugin"
-                  handle=".cursor-move"
                   item-key="id"
                   tag="div"
                   class="grid gap-4 grid-plugin-card"
@@ -1599,7 +1598,6 @@ function onDragStartPlugin(evt: any) {
                   v-model="draggableFolderPlugins"
                   @end="saveFolderPluginOrder"
                   @start="onDragStartPlugin"
-                  handle=".cursor-move"
                   item-key="id"
                   tag="div"
                   class="grid gap-4 grid-plugin-card"

src/views/site/SiteCardListView.vue

@@ -404,7 +404,6 @@ useDynamicButton({
       v-if="draggableSiteList.length > 0 && canDragSort"
       v-model="draggableSiteList"
       @end="savaSitesPriority"
-      handle=".cursor-move"
       item-key="id"
       tag="div"
       :component-data="{ 'class': 'grid gap-4 grid-site-card px-2' }"

src/views/subscribe/SubscribeListView.vue

@@ -491,7 +491,6 @@ defineExpose({
     v-if="displayList.length > 0 && canDragSort"
     v-model="displayList"
     @end="saveSubscribeOrder"
-    handle=".cursor-move"
     item-key="id"
     tag="div"
     :component-data="{ class: 'grid gap-4 grid-subscribe-card px-2' }"