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

This commit is contained in:
Soulter
2026-03-29 20:49:07 +08:00
parent a40a5fe18c
commit ab66910724
4 changed files with 8 additions and 21 deletions
@@ -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));
@@ -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"
+1 -5
View File
@@ -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;
@@ -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)" />