mirror of
https://github.com/AstrBotDevs/AstrBot.git
synced 2026-10-29 17:24:47 +08:00
perf: adjust elevation and drag behavior for folder and persona cards, improve layout responsiveness
This commit is contained in:
@@ -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 +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)" />
|
||||
|
||||
Reference in New Issue
Block a user