perf: adjust elevation and drag behavior for folder and persona cards, improve layout responsiveness

Author: Soulter

dashboard/src/components/folder/BaseFolderCard.vue

@@ -1,6 +1,6 @@
 <template>
     <v-card class="base-folder-card" :class="{ 'drag-over': isDragOver }" rounded="lg" @click="$emit('click')" @contextmenu.prevent="$emit('contextmenu', $event)"
-        elevation="1" hover @dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
+        elevation="0" @dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
         <v-card-text class="d-flex align-center pa-3">
             <v-icon size="40" color="amber-darken-2" class="mr-3">mdi-folder</v-icon>
             <div class="folder-info flex-grow-1 overflow-hidden">
@@ -127,10 +127,6 @@ export default defineComponent({
     transition: all 0.2s ease;
 }
 
-.base-folder-card:hover {
-    transform: translateY(-2px);
-}
-
 .base-folder-card.drag-over {
     background-color: rgba(var(--v-theme-primary), 0.15);
     border: 2px dashed rgb(var(--v-theme-primary));

dashboard/src/views/extension/InstalledPluginsTab.vue

@@ -360,7 +360,7 @@ const pinnedPlugins = computed(() => {
             </v-row>
 
             <!-- 置顶插件列表 -->
-            <v-row class="mb-4">
+            <v-row v-if="pinnedPlugins.length > 0" class="mb-4">
               <v-col cols="12">
                 <v-card class="rounded-lg overflow-hidden elevation-0" variant="flat">
                   <v-card-text class="pa-4">
@@ -369,11 +369,6 @@ const pinnedPlugins = computed(() => {
                     </div>
 
                     <v-row class="mt-3 relative" dense align="center" style="gap:12px">
-                      <template v-if="!pinnedPlugins || pinnedPlugins.length === 0">
-                        <v-col cols="auto" v-for="n in 4" :key="n">
-                        </v-col>
-                      </template>
-
                       <transition-group name="list" class="v-row v-row--dense">
                         <v-col
                           cols="auto"

dashboard/src/views/persona/PersonaCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-card class="persona-card" :class="{ 'dragging': isDragging }" rounded="lg" @click="$emit('view')" elevation="1" hover
+    <v-card class="persona-card" :class="{ 'dragging': isDragging }" rounded="lg" @click="$emit('view')" elevation="0"
         draggable="true" @dragstart="handleDragStart" @dragend="handleDragEnd">
         <v-card-title class="d-flex justify-space-between align-center">
             <div class="text-truncate ml-2">{{ persona.persona_id }}</div>
@@ -156,10 +156,6 @@ export default defineComponent({
     transform: scale(0.95);
 }
 
-.persona-card:hover {
-    transform: translateY(-2px);
-}
-
 .system-prompt-preview {
     font-size: 14px;
     line-height: 1.4;

dashboard/src/views/persona/PersonaManager.vue

@@ -43,7 +43,7 @@
                 <v-fade-transition>
                     <div v-if="showSkeleton" class="loading-container">
                         <v-row>
-                            <v-col v-for="n in 6" :key="n" cols="12" sm="6" lg="4" xl="3">
+                            <v-col v-for="n in 6" :key="n" cols="12" sm="6" lg="6" xl="4">
                                 <v-skeleton-loader type="card" rounded="lg" />
                             </v-col>
                         </v-row>
@@ -59,8 +59,8 @@
                             {{ tm('folder.foldersTitle') }} ({{ currentFolders.length }})
                         </h3>
                         <v-row>
-                            <v-col v-for="folder in currentFolders" :key="folder.folder_id" cols="12" sm="6" lg="4"
-                                xl="3">
+                            <v-col v-for="folder in currentFolders" :key="folder.folder_id" cols="12" sm="6" lg="6"
+                                xl="4">
                                 <FolderCard :folder="folder" @click="navigateToFolder(folder.folder_id)"
                                     @open="navigateToFolder(folder.folder_id)" @rename="openRenameFolderDialog(folder)"
                                     @move="openMoveFolderDialog(folder)" @delete="confirmDeleteFolder(folder)"
@@ -76,8 +76,8 @@
                             {{ tm('persona.personasTitle') }} ({{ currentPersonas.length }})
                         </h3>
                         <v-row>
-                            <v-col v-for="persona in currentPersonas" :key="persona.persona_id" cols="12" sm="6" lg="4"
-                                xl="3">
+                            <v-col v-for="persona in currentPersonas" :key="persona.persona_id" cols="12" sm="6" lg="6"
+                                xl="4">
                                 <PersonaCard :persona="persona" @view="viewPersona(persona)"
                                     @edit="editPersona(persona)" @move="openMovePersonaDialog(persona)"
                                     @delete="confirmDeletePersona(persona)" />