优化 PluginAppCard、PluginCard 和 PluginFolderCard 组件的样式，调整布局和响应式设计

src/views/plugin/PluginCardListView.vue

@@ -124,6 +124,14 @@ const filterForm = reactive({
   repo: [] as string[],
 })
 
+// 默认背景
+const defaultGradient =
+  'linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(135deg, rgba(33, 150, 243, 0.7) 0%, rgba(33, 150, 243, 0.8) 100%)'
+// 默认文件夹图标
+const defaultIcon = 'mdi-folder'
+// 默认文件夹颜色
+const defaultColor = '#2196F3'
+
 // 计算过滤表单是否全部为空
 const isFilterFormEmpty = computed(() => {
   return (
@@ -174,14 +182,14 @@ const displayedPlugins = computed(() => {
     // 主列表：显示未归类的插件
     const folderedPluginIds = new Set()
     Object.values(pluginFolders.value).forEach(folderData => {
-      const plugins = Array.isArray(folderData) ? folderData : (folderData.plugins || [])
-      plugins.forEach(id => folderedPluginIds.add(id))
+      const plugins = Array.isArray(folderData) ? folderData : folderData.plugins || []
+      plugins.forEach((pid: string) => folderedPluginIds.add(pid))
     })
     return filteredDataList.value.filter(plugin => !folderedPluginIds.has(plugin.id))
   } else {
     // 文件夹内：只显示文件夹中的插件
     const folderData = pluginFolders.value[currentFolder.value]
-    const folderPluginIds = Array.isArray(folderData) ? folderData : (folderData?.plugins || [])
+    const folderPluginIds = Array.isArray(folderData) ? folderData : folderData?.plugins || []
     return filteredDataList.value.filter(plugin => folderPluginIds.includes(plugin.id))
   }
 })
@@ -196,15 +204,19 @@ const draggableFolderPlugins = ref<Plugin[]>([])
 const isDraggingSortMode = ref(false)
 
 // 监听displayedPlugins变化，更新可拖拽列表（避免拖拽时的循环更新）
-watch(displayedPlugins, (newPlugins) => {
-  if (isDraggingSortMode.value) return // 拖拽排序时跳过更新
-  
-  if (!currentFolder.value) {
-    draggableMainPlugins.value = [...newPlugins]
-  } else {
-    draggableFolderPlugins.value = [...newPlugins]
-  }
-}, { immediate: true })
+watch(
+  displayedPlugins,
+  newPlugins => {
+    if (isDraggingSortMode.value) return // 拖拽排序时跳过更新
+
+    if (!currentFolder.value) {
+      draggableMainPlugins.value = [...newPlugins]
+    } else {
+      draggableFolderPlugins.value = [...newPlugins]
+    }
+  },
+  { immediate: true },
+)
 
 // 监听文件夹切换，更新可拖拽列表
 watch(currentFolder, () => {
@@ -218,24 +230,24 @@ watch(currentFolder, () => {
 // 显示的文件夹列表（按排序显示）
 const displayedFolders = computed(() => {
   if (currentFolder.value) return [] // 在文件夹内不显示其他文件夹
-  
+
   const folderNames = Object.keys(pluginFolders.value)
-  
+
   // 按排序显示文件夹
   const sortedFolderNames = [...folderOrder.value].filter(name => folderNames.includes(name))
   // 添加不在排序中的新文件夹
   const unsortedFolders = folderNames.filter(name => !folderOrder.value.includes(name))
   sortedFolderNames.push(...unsortedFolders)
-  
+
   return sortedFolderNames.map(folderName => {
     const folderData = pluginFolders.value[folderName]
-    const plugins = Array.isArray(folderData) ? folderData : (folderData?.plugins || [])
+    const plugins = Array.isArray(folderData) ? folderData : folderData?.plugins || []
     const config = Array.isArray(folderData) ? {} : folderData
-    
+
     return {
       name: folderName,
       pluginCount: plugins.length,
-      config: config
+      config: config,
     }
   })
 })
@@ -274,7 +286,7 @@ function sortPluginOrder() {
 async function savePluginOrder() {
   // 只在主列表中保存顺序，文件夹内不保存全局顺序
   if (currentFolder.value) return
-  
+
   // 顺序配置
   const orderObj = filteredDataList.value.map(item => ({ id: item.id || '' }))
   orderConfig.value = orderObj
@@ -294,20 +306,20 @@ async function saveMainPluginOrder() {
   try {
     // 更新主列表数据
     const newOrderedList = [...draggableMainPlugins.value]
-    
+
     // 添加文件夹中的插件到末尾
     Object.values(pluginFolders.value).forEach(folderData => {
-      const plugins = Array.isArray(folderData) ? folderData : (folderData.plugins || [])
-      plugins.forEach(id => {
+      const plugins = Array.isArray(folderData) ? folderData : folderData.plugins || []
+      plugins.forEach((id: string) => {
         const folderPlugin = dataList.value.find(p => p.id === id)
         if (folderPlugin && !newOrderedList.find(p => p.id === id)) {
           newOrderedList.push(folderPlugin)
         }
       })
     })
-    
+
     filteredDataList.value = newOrderedList
-    
+
     // 保存排序配置
     const orderObj = newOrderedList.map(item => ({ id: item.id || '' }))
     orderConfig.value = orderObj
@@ -316,7 +328,7 @@ async function saveMainPluginOrder() {
 
     // 保存到服务端
     await api.post('/user/config/PluginOrder', orderObj)
-    
+
     console.log('主列表排序已保存')
   } catch (error) {
     console.error('保存主列表排序失败:', error)
@@ -329,13 +341,13 @@ async function saveMainPluginOrder() {
 // 保存文件夹内插件顺序
 async function saveFolderPluginOrder() {
   if (!currentFolder.value) return
-  
+
   try {
     // 更新文件夹内插件顺序
     const folderData = pluginFolders.value[currentFolder.value]
     if (folderData) {
       const newPluginIds = draggableFolderPlugins.value.map(plugin => plugin.id)
-      
+
       if (Array.isArray(folderData)) {
         // 旧格式，直接替换数组
         pluginFolders.value[currentFolder.value] = newPluginIds
@@ -343,10 +355,10 @@ async function saveFolderPluginOrder() {
         // 新格式，更新plugins字段
         folderData.plugins = newPluginIds
       }
-      
+
       // 保存到后端
       await savePluginFolders()
-      
+
       console.log(`文件夹 ${currentFolder.value} 内排序已保存`)
     }
   } catch (error) {
@@ -635,23 +647,23 @@ useDynamicButton({
 async function loadPluginFolders() {
   try {
     const response = await api.get('plugin/folders')
-    const foldersData = response && typeof response === 'object' ? response : {}
-    
+    const foldersData: any = response && typeof response === 'object' ? response : {}
+
     // 处理旧格式兼容性（array）和新格式（object with config）
-    const processedFolders = {}
+    const processedFolders: any = {}
     const order = []
-    
+
     Object.keys(foldersData).forEach(folderName => {
       const folderData = foldersData[folderName]
-      
+
       if (Array.isArray(folderData)) {
         // 旧格式：直接是插件数组
         processedFolders[folderName] = {
           plugins: folderData,
           order: order.length,
-          icon: 'mdi-folder',
-          color: '#2196F3',
-          gradient: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+          icon: defaultIcon,
+          color: defaultColor,
+          gradient: defaultGradient,
           background: '',
           showIcon: true,
         }
@@ -660,23 +672,24 @@ async function loadPluginFolders() {
         processedFolders[folderName] = {
           plugins: folderData.plugins || [],
           order: folderData.order ?? order.length,
-          icon: folderData.icon || 'mdi-folder',
-          color: folderData.color || '#2196F3',
-          gradient: folderData.gradient || 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+          icon: folderData.icon || defaultIcon,
+          color: folderData.color || defaultColor,
+          gradient: folderData.gradient || defaultGradient,
           background: folderData.background || '',
           showIcon: folderData.showIcon !== undefined ? folderData.showIcon : true,
         }
       }
-      
+
       order.push(folderName)
     })
-    
+
     pluginFolders.value = processedFolders
-    
+
     // 设置文件夹排序
-    folderOrder.value = Object.keys(processedFolders)
-      .sort((a, b) => (processedFolders[a].order || 0) - (processedFolders[b].order || 0))
-    
+    folderOrder.value = Object.keys(processedFolders).sort(
+      (a, b) => (processedFolders[a].order || 0) - (processedFolders[b].order || 0),
+    )
+
     console.log('加载文件夹配置:', pluginFolders.value)
     console.log('文件夹排序:', folderOrder.value)
   } catch (error) {
@@ -690,17 +703,17 @@ async function loadPluginFolders() {
 async function savePluginFolders() {
   try {
     // 更新排序信息
-    const foldersToSave = {}
+    const foldersToSave: any = {}
     Object.keys(pluginFolders.value).forEach(folderName => {
       const folderData = pluginFolders.value[folderName]
       const orderIndex = folderOrder.value.indexOf(folderName)
-      
+
       foldersToSave[folderName] = {
         ...folderData,
         order: orderIndex >= 0 ? orderIndex : 999,
       }
     })
-    
+
     await api.post('plugin/folders', foldersToSave)
     console.log('文件夹配置已保存:', foldersToSave)
   } catch (error) {
@@ -715,12 +728,12 @@ async function createNewFolder() {
     $toast.error('文件夹名称不能为空')
     return
   }
-  
+
   if (pluginFolders.value[newFolderName.value]) {
     $toast.error('文件夹已存在')
     return
   }
-  
+
   try {
     // 直接在本地添加文件夹
     pluginFolders.value[newFolderName.value] = {
@@ -728,21 +741,21 @@ async function createNewFolder() {
       order: folderOrder.value.length,
       icon: 'mdi-folder',
       color: '#2196F3',
-      gradient: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+      gradient: defaultGradient,
       background: '',
       showIcon: true,
     }
-    
+
     // 添加到排序列表
     folderOrder.value.push(newFolderName.value)
-    
+
     // 保存到后端
     await savePluginFolders()
-    
+
     newFolderDialog.value = false
     newFolderName.value = ''
     $toast.success('文件夹创建成功')
-    
+
     console.log('创建文件夹后的配置:', pluginFolders.value)
   } catch (error) {
     console.error('创建文件夹失败:', error)
@@ -769,27 +782,27 @@ async function renameFolder(oldName: string, newName: string) {
     $toast.error('文件夹名称已存在')
     return
   }
-  
+
   try {
     // 更新本地状态
     const folderData = pluginFolders.value[oldName] || { plugins: [] }
     pluginFolders.value[newName] = folderData
     delete pluginFolders.value[oldName]
-    
+
     // 更新排序列表
     const orderIndex = folderOrder.value.indexOf(oldName)
     if (orderIndex >= 0) {
       folderOrder.value[orderIndex] = newName
     }
-    
+
     // 如果正在查看该文件夹，更新当前文件夹名
     if (currentFolder.value === oldName) {
       currentFolder.value = newName
     }
-    
+
     // 保存到后端
     await savePluginFolders()
-    
+
     $toast.success('文件夹重命名成功')
   } catch (error) {
     console.error('重命名文件夹失败:', error)
@@ -809,22 +822,22 @@ async function renameFolder(oldName: string, newName: string) {
 
 // 删除文件夹
 async function deleteFolder(folderName: string) {
+  // 保存被删除的文件夹内容以便回滚
+  const deletedFolder = { ...pluginFolders.value[folderName] }
   try {
-    // 保存被删除的文件夹内容以便回滚
-    const deletedFolder = { ...pluginFolders.value[folderName] }
     delete pluginFolders.value[folderName]
-    
+
     // 从排序列表中移除
     folderOrder.value = folderOrder.value.filter(name => name !== folderName)
-    
+
     // 如果正在查看该文件夹，返回主列表
     if (currentFolder.value === folderName) {
       currentFolder.value = ''
     }
-    
+
     // 保存到后端
     await savePluginFolders()
-    
+
     $toast.success('文件夹删除成功')
   } catch (error) {
     console.error('删除文件夹失败:', error)
@@ -846,21 +859,21 @@ function showNewFolderDialog() {
 // 移出文件夹
 async function removeFromFolder(pluginId: string) {
   if (!currentFolder.value) return
-  
+
   try {
     // 从当前文件夹中移除插件
     const folderData = pluginFolders.value[currentFolder.value]
-    const plugins = Array.isArray(folderData) ? folderData : (folderData?.plugins || [])
+    const plugins = Array.isArray(folderData) ? folderData : folderData?.plugins || []
     const index = plugins.indexOf(pluginId)
     if (index > -1) {
       plugins.splice(index, 1)
       if (!Array.isArray(folderData)) {
         folderData.plugins = plugins
       }
-      
+
       // 保存配置
       await savePluginFolders()
-      
+
       $toast.success('插件已移出文件夹')
     }
   } catch (error) {
@@ -878,10 +891,10 @@ async function updateFolderConfig(folderName: string, config: any) {
         ...pluginFolders.value[folderName],
         ...config,
       }
-      
+
       // 保存到后端
       await savePluginFolders()
-      
+
       console.log('文件夹配置已更新:', folderName, config)
     }
   } catch (error) {
@@ -923,47 +936,47 @@ async function handleDropToFolder(event: DragEvent, folderName: string) {
   event.stopPropagation()
   const target = event.currentTarget as HTMLElement
   target.classList.remove('drag-over')
-  
+
   // 使用跟踪的插件ID
   const pluginId = currentDraggedPluginId.value
   console.log('拖拽到文件夹:', folderName, '插件ID:', pluginId)
-  
+
   if (!pluginId) {
     console.log('无法获取有效的插件ID')
     return
   }
-  
+
   try {
     // 检查是否是文件夹名（忽略文件夹拖入文件夹的情况）
     if (Object.keys(pluginFolders.value).includes(pluginId)) {
       console.log('忽略文件夹拖入文件夹的操作:', pluginId)
       return
     }
-    
+
     // 验证插件ID
     const plugin = filteredDataList.value.find(p => p.id === pluginId)
     console.log('找到插件:', plugin?.plugin_name)
-    
+
     if (!plugin) {
       console.log('未找到对应插件:', pluginId)
       return
     }
-    
+
     // 获取目标文件夹数据
     const targetFolderData = pluginFolders.value[folderName] || { plugins: [] }
-    const targetPlugins = Array.isArray(targetFolderData) ? targetFolderData : (targetFolderData.plugins || [])
-    
+    const targetPlugins = Array.isArray(targetFolderData) ? targetFolderData : targetFolderData.plugins || []
+
     // 检查插件是否已在此文件夹中
     if (targetPlugins.includes(pluginId)) {
       $toast.warning('插件已在此文件夹中')
       return
     }
-    
+
     // 从其他文件夹中移除该插件
     Object.keys(pluginFolders.value).forEach(fname => {
       if (fname !== folderName) {
         const folderData = pluginFolders.value[fname]
-        const plugins = Array.isArray(folderData) ? folderData : (folderData.plugins || [])
+        const plugins = Array.isArray(folderData) ? folderData : folderData.plugins || []
         const index = plugins.indexOf(pluginId)
         if (index > -1) {
           plugins.splice(index, 1)
@@ -973,26 +986,26 @@ async function handleDropToFolder(event: DragEvent, folderName: string) {
         }
       }
     })
-    
+
     // 从主列表中移除（如果存在）
     const mainIndex = draggableMainPlugins.value.findIndex(p => p.id === pluginId)
     if (mainIndex > -1) {
       draggableMainPlugins.value.splice(mainIndex, 1)
     }
-    
+
     // 添加到目标文件夹
     if (!pluginFolders.value[folderName]) {
       pluginFolders.value[folderName] = {
         plugins: [],
         order: folderOrder.value.length,
-        icon: 'mdi-folder',
-        color: '#2196F3',
-        gradient: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+        icon: defaultIcon,
+        color: defaultColor,
+        gradient: defaultGradient,
         background: '',
         showIcon: true,
       }
     }
-    
+
     const targetFolder = pluginFolders.value[folderName]
     if (Array.isArray(targetFolder)) {
       targetFolder.push(pluginId)
@@ -1000,10 +1013,10 @@ async function handleDropToFolder(event: DragEvent, folderName: string) {
       targetFolder.plugins = targetFolder.plugins || []
       targetFolder.plugins.push(pluginId)
     }
-    
+
     // 保存配置
     await savePluginFolders()
-    
+
     $toast.success(`插件已移动到文件夹 "${folderName}"`)
   } catch (error) {
     console.error('拖拽到文件夹失败:', error)
@@ -1015,33 +1028,31 @@ async function handleDropToFolder(event: DragEvent, folderName: string) {
 function onDragStartPlugin(evt: any) {
   // 设置拖拽模式标志
   isDraggingSortMode.value = true
-  
+
   // 从oldIndex获取插件ID
   const oldIndex = evt.oldIndex
   if (oldIndex !== undefined) {
-    const plugin = currentFolder.value 
-      ? draggableFolderPlugins.value[oldIndex] 
-      : draggableMainPlugins.value[oldIndex]
+    const plugin = currentFolder.value ? draggableFolderPlugins.value[oldIndex] : draggableMainPlugins.value[oldIndex]
     if (plugin && plugin.id) {
       currentDraggedPluginId.value = plugin.id
       return
     }
   }
-  
+
   // 从拖拽元素获取
   const item = evt.item
   if (item && item.dataset && item.dataset.pluginId) {
     currentDraggedPluginId.value = item.dataset.pluginId
     return
   }
-  
+
   // 查找data-plugin-id属性
   const pluginCard = item?.querySelector('[data-plugin-id]')
   if (pluginCard) {
     currentDraggedPluginId.value = pluginCard.getAttribute('data-plugin-id') || ''
     return
   }
-  
+
   // 直接从元素属性获取
   if (item && item.getAttribute && item.getAttribute('data-plugin-id')) {
     currentDraggedPluginId.value = item.getAttribute('data-plugin-id')
@@ -1132,10 +1143,10 @@ function onDragEndPlugin(evt: any) {
               <!-- 过滤表单 -->
               <div v-if="isAppMarketLoaded">
                 <VRow>
-                  <VCol cols="12" md="6">
+                  <VCol cols="6">
                     <VTextField v-model="filterForm.name" density="comfortable" :label="t('plugin.name')" clearable />
                   </VCol>
-                  <VCol v-if="authorFilterOptions.length > 0" cols="12" md="6">
+                  <VCol v-if="authorFilterOptions.length > 0" cols="6">
                     <VSelect
                       v-model="filterForm.author"
                       :items="authorFilterOptions"
@@ -1146,7 +1157,7 @@ function onDragEndPlugin(evt: any) {
                       clearable
                     />
                   </VCol>
-                  <VCol v-if="labelFilterOptions.length > 0" cols="12" md="6">
+                  <VCol v-if="labelFilterOptions.length > 0" cols="6">
                     <VSelect
                       v-model="filterForm.label"
                       :items="labelFilterOptions"
@@ -1157,7 +1168,7 @@ function onDragEndPlugin(evt: any) {
                       clearable
                     />
                   </VCol>
-                  <VCol v-if="repoFilterOptions.length > 0" cols="12" md="6">
+                  <VCol v-if="repoFilterOptions.length > 0" cols="6">
                     <VSelect
                       v-model="filterForm.repo"
                       :items="repoFilterOptions"
@@ -1168,7 +1179,7 @@ function onDragEndPlugin(evt: any) {
                       clearable
                     />
                   </VCol>
-                  <VCol v-if="sortOptions.length > 0" cols="12" md="6">
+                  <VCol v-if="sortOptions.length > 0" cols="6">
                     <VSelect
                       v-model="activeSort"
                       :items="sortOptions"
@@ -1208,15 +1219,6 @@ function onDragEndPlugin(evt: any) {
           class="settings-icon-button"
           @click="backToMain"
         />
-        <VBtn
-          v-if="!appMode && !display.mobile && activeTab === 'installed'"
-          icon="mdi-filter"
-          variant="text"
-          color="gray"
-          size="default"
-          class="settings-icon-button"
-          @click="FilterDialog = true"
-        />
       </template>
     </VHeaderTab>
 
@@ -1227,12 +1229,9 @@ function onDragEndPlugin(evt: any) {
           <div>
             <VPageContentTitle v-if="installedFilter" :title="t('plugin.filter', { name: installedFilter })" />
             <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-            
+
             <!-- 文件夹和插件网格 -->
-            <div 
-              v-if="displayedFolders.length > 0 || displayedPlugins.length > 0" 
-              class="grid gap-4 grid-plugin-card"
-            >
+            <div v-if="displayedFolders.length > 0 || displayedPlugins.length > 0" class="grid gap-4 grid-plugin-card">
               <!-- 文件夹卡片 - 使用draggable进行排序 -->
               <draggable
                 v-if="displayedFolders.length > 0"
@@ -1266,7 +1265,7 @@ function onDragEndPlugin(evt: any) {
                   </div>
                 </template>
               </draggable>
-              
+
               <!-- 插件卡片 -->
               <template v-if="!currentFolder">
                 <!-- 主列表：使用draggable进行排序 -->
@@ -1295,7 +1294,7 @@ function onDragEndPlugin(evt: any) {
                   </template>
                 </draggable>
               </template>
-              
+
               <template v-else>
                 <!-- 文件夹内：使用draggable排序 + 移出按钮 -->
                 <draggable
@@ -1332,7 +1331,7 @@ function onDragEndPlugin(evt: any) {
                 </draggable>
               </template>
             </div>
-            
+
             <NoDataFound
               v-if="displayedFolders.length === 0 && displayedPlugins.length === 0 && isRefreshed"
               error-code="404"
@@ -1474,18 +1473,13 @@ function onDragEndPlugin(evt: any) {
       </VCardText>
     </VCard>
   </VDialog>
-  
+
   <!-- 新建文件夹对话框 -->
   <VDialog v-if="newFolderDialog" v-model="newFolderDialog" max-width="400">
     <VCard>
       <VCardTitle>新建文件夹</VCardTitle>
       <VCardText>
-        <VTextField
-          v-model="newFolderName"
-          label="文件夹名称"
-          variant="outlined"
-          @keyup.enter="createNewFolder"
-        />
+        <VTextField v-model="newFolderName" label="文件夹名称" variant="outlined" @keyup.enter="createNewFolder" />
       </VCardText>
       <VCardActions>
         <VSpacer />
@@ -1500,18 +1494,18 @@ function onDragEndPlugin(evt: any) {
 // 拖拽相关样式
 .drop-zone {
   transition: all 0.3s ease;
-  
+
   &.drag-over {
     transform: scale(1.02);
     box-shadow: 0 0 20px rgba(33, 150, 243, 0.5);
-    border: 2px dashed #2196F3;
+    border: 2px dashed #2196f3;
     border-radius: 16px;
   }
 }
 
 .plugin-item-wrapper {
   position: relative;
-  
+
   .remove-from-folder-btn {
     position: absolute;
     top: 8px;
@@ -1523,7 +1517,7 @@ function onDragEndPlugin(evt: any) {
     opacity: 0;
     transition: opacity 0.3s ease;
   }
-  
+
   &:hover .remove-from-folder-btn {
     opacity: 1;
   }
@@ -1534,12 +1528,12 @@ function onDragEndPlugin(evt: any) {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 16px;
-  
+
   @media (max-width: 768px) {
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 12px;
   }
-  
+
   @media (max-width: 480px) {
     grid-template-columns: 1fr;
     gap: 10px;