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

src/components/cards/PluginAppCard.vue

@@ -8,7 +8,6 @@ import { getDominantColor } from '@/@core/utils/image'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
 
 // 输入参数
 const props = defineProps({
@@ -24,9 +23,6 @@ const emit = defineEmits(['install'])
 // 多语言
 const { t } = useI18n()
 
-// 响应式显示
-const display = useDisplay()
-
 // 背景颜色
 const backgroundColor = ref('#28A9E1')
 
@@ -40,7 +36,17 @@ const $toast = useToast()
 const progressDialog = ref(false)
 
 // 进度框文本
-const progressText = ref('正在安装插件...')
+const progressText = ref('')
+
+// 获取当前插件的标签
+const pluginLabels = computed(() => {
+  if (!props.plugin?.plugin_label) return []
+
+  return props.plugin.plugin_label
+    .split(',')
+    .map(tag => tag.trim())
+    .filter(tag => tag.length > 0)
+})
 
 // 图片是否加载完成
 const isImageLoaded = ref(false)
@@ -54,19 +60,6 @@ const releaseDialog = ref(false)
 // 插件详情弹窗
 const detailDialog = ref(false)
 
-// 用户头像是否加载完成
-const isAvatarLoaded = ref(false)
-
-// 菜单显示状态
-const menuVisible = ref(false)
-
-// 获取当前插件的标签
-const currentPluginLabels = computed(() => {
-  if (!props.plugin?.plugin_label) return []
-  
-  return props.plugin.plugin_label.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0)
-})
-
 // 图片加载完成
 async function imageLoaded() {
   isImageLoaded.value = true
@@ -118,14 +111,6 @@ const iconPath: Ref<string> = computed(() => {
   return `./plugin_icon/${props.plugin?.plugin_icon}`
 })
 
-// 插件作者头像路径
-const authorPath: Ref<string> = computed(() => {
-  // 网络图片则使用代理后返回
-  return `${import.meta.env.VITE_API_BASE_URL}system/img/1?imgurl=${encodeURIComponent(
-    props.plugin?.author_url + '.png',
-  )}`
-})
-
 // 访问插件页面
 function visitPluginPage() {
   // 将raw.githubusercontent.com转换为项目地址
@@ -179,7 +164,6 @@ const dropdownItems = ref([
 
 <template>
   <div>
-    <!-- 重新设计的插件卡片 -->
     <VHover>
       <template #default="hover">
         <VCard
@@ -187,177 +171,98 @@ const dropdownItems = ref([
           :width="props.width"
           :height="props.height"
           @click="detailDialog = true"
-          class="plugin-app-card"
+          class="flex flex-col h-full"
           :class="{
-            'plugin-app-card--mobile': display.mobile,
+            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
-            'plugin-app-card--hover': hover.isHovering,
           }"
-          variant="elevated"
-          :elevation="hover.isHovering ? 16 : 6"
         >
-          <!-- 背景渐变层 -->
+          <div
-          <div 
+            class="flex-grow"
-            class="plugin-app-card__bg"
+            :style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
-            :style="`background: linear-gradient(135deg, ${backgroundColor}15 0%, ${backgroundColor}25 100%)`"
+          >
-          />
+            <VCardText class="px-2 pt-2 pb-0">
-          
+              <VCardTitle
-          <!-- 卡片内容 -->
+                class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
-          <div class="plugin-app-card__content">
+              >
-            <!-- 主体内容 -->
+                {{ props.plugin?.plugin_name }}
-            <div class="plugin-app-card__body">
+                <span class="text-sm mt-1 text-gray-200"> v{{ props.plugin?.plugin_version }} </span>
-              <!-- 左侧区域：图标和安装按钮 -->
+              </VCardTitle>
-              <div class="plugin-app-card__left-section">
+            </VCardText>
-                <!-- 插件图标 -->
+            <div class="relative flex flex-row items-start px-2 justify-between grow">
-                <div class="plugin-app-card__avatar-container">
+              <div class="relative flex-1 min-w-0">
-                  <VAvatar
+                <VCardText class="text-white text-sm px-2 py-1 text-shadow overflow-hidden line-clamp-3 ...">
-                    :size="display.mobile ? 40 : 48"
+                  {{ props.plugin?.plugin_desc }}
-                    class="plugin-app-card__avatar"
+                </VCardText>
-                    variant="elevated"
-                  >
-                    <VImg
-                      ref="imageRef"
-                      :src="iconPath"
-                      @load="imageLoaded"
-                      @error="imageLoadError = true"
-                    >
-                      <template #placeholder>
-                        <VSkeletonLoader type="avatar" />
-                      </template>
-                    </VImg>
-                  </VAvatar>
-                </div>
-
-                <!-- 安装按钮在图标下方 -->
-                <VBtn
-                  size="x-small"
-                  color="primary"
-                  variant="elevated"
-                  @click.stop="installPlugin"
-                  class="plugin-app-card__install-btn-compact"
-                >
-                  <VIcon icon="mdi-download" size="12" />
-                  安装
-                </VBtn>
               </div>
-
+              <div class="relative flex-shrink-0 self-center pb-3">
-              <!-- 右侧信息区域 -->
+                <VAvatar size="48">
-              <div class="plugin-app-card__info-section">
+                  <VImg
-                <!-- 标题行 -->
+                    ref="imageRef"
-                <div class="plugin-app-card__title-row">
+                    :src="iconPath"
-                  <h3 class="plugin-app-card__title">
+                    aspect-ratio="4/3"
-                    {{ props.plugin?.plugin_name }}
+                    cover
-                  </h3>
+                    @load="imageLoaded"
-                  <VChip
+                    @error="imageLoadError = true"
-                    size="x-small"
-                    variant="tonal"
-                    color="primary"
-                    class="plugin-app-card__version-chip"
-                  >
-                    v{{ props.plugin?.plugin_version }}
-                  </VChip>
-                </div>
-
-                <!-- 描述 -->
-                <VTooltip :text="props.plugin?.plugin_desc" location="bottom">
-                  <template #activator="{ props: tooltipProps }">
-                    <p 
-                      class="plugin-app-card__description"
-                      v-bind="tooltipProps"
-                    >
-                      {{ props.plugin?.plugin_desc }}
-                    </p>
-                  </template>
-                </VTooltip>
-
-                <!-- 插件标签 -->
-                <div 
-                  v-if="currentPluginLabels.length > 0" 
-                  class="plugin-app-card__tags-section"
-                >
-                  <VChip
-                    v-for="tag in currentPluginLabels"
-                    :key="tag"
-                    size="x-small"
-                    variant="tonal"
-                    color="primary"
-                    class="plugin-app-card__tag"
-                  >
-                    {{ tag }}
-                  </VChip>
-                </div>
-              </div>
-            </div>
-
-            <!-- 底部信息栏 -->
-            <div class="plugin-app-card__footer">
-              <!-- 作者信息 -->
-              <div class="plugin-app-card__author-info">
-                <VAvatar size="18" class="plugin-app-card__author-avatar">
-                  <VImg :src="authorPath" @load="isAvatarLoaded = true">
-                    <VIcon v-if="!isAvatarLoaded" icon="mdi-github" size="10" />
-                  </VImg>
-                </VAvatar>
-                <span class="plugin-app-card__author-name">
-                  {{ props.plugin?.plugin_author }}
-                </span>
-              </div>
-
-              <!-- 统计信息 -->
-              <div class="plugin-app-card__stats-info">
-                <div v-if="props.count" class="plugin-app-card__download-stats">
-                  <VIcon icon="mdi-download" size="14" />
-                  <span class="plugin-app-card__stats-text">{{ props.count?.toLocaleString() }}</span>
-                </div>
-              </div>
-            </div>
-
-            <!-- 更多菜单按钮 - 右下角 -->
-            <div class="plugin-app-card__menu-section">
-              <VMenu v-model="menuVisible" location="top end" :close-on-content-click="true">
-                <template #activator="{ props: menuProps }">
-                  <VBtn
-                    v-bind="menuProps"
-                    icon="mdi-dots-vertical"
-                    size="small"
-                    variant="text"
-                    @click.stop
-                    class="plugin-app-card__menu-btn-corner"
-                    :class="{ 'plugin-app-card__menu-btn-corner--visible': hover.isHovering || display.mobile }"
                   />
-                </template>
+                </VAvatar>
-                <VList>
+              </div>
-                  <VListItem
-                    v-for="(item, i) in dropdownItems"
-                    v-show="item.show"
-                    :key="i"
-                    @click="item.props.click"
-                    density="compact"
-                  >
-                    <template #prepend>
-                      <VIcon :icon="item.props.prependIcon" size="16" />
-                    </template>
-                    <VListItemTitle class="text-body-2">{{ item.title }}</VListItemTitle>
-                  </VListItem>
-                </VList>
-              </VMenu>
             </div>
           </div>
+
+          <!-- 插件标签 -->
+          <div v-if="pluginLabels.length > 0" class="plugin-app-card__tags-section">
+            <VChip v-for="tag in pluginLabels" :key="tag" size="x-small" variant="tonal" color="primary">
+              {{ tag }}
+            </VChip>
+          </div>
+
+          <VCardText class="flex flex-col align-self-baseline px-2 py-2 w-full overflow-hidden">
+            <div class="flex flex-nowrap items-center w-full pe-7">
+              <span>
+                <VIcon icon="mdi-github" class="me-1" />
+                <a
+                  class="overflow-hidden text-ellipsis whitespace-nowrap"
+                  :href="props.plugin?.author_url"
+                  target="_blank"
+                  @click.stop
+                >
+                  {{ props.plugin?.plugin_author }}
+                </a>
+              </span>
+              <span v-if="props.count" class="ms-2 flex-shrink-0 download-count">
+                <VIcon icon="mdi-download" />
+                <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
+              </span>
+            </div>
+            <div class="absolute bottom-0 right-0">
+              <IconBtn>
+                <VIcon size="small" icon="mdi-dots-vertical" />
+                <VMenu activator="parent" close-on-content-click>
+                  <VList>
+                    <VListItem v-for="(item, i) in dropdownItems" v-show="item.show" :key="i" @click="item.props.click">
+                      <template #prepend>
+                        <VIcon :icon="item.props.prependIcon" />
+                      </template>
+                      <VListItemTitle v-text="item.title" />
+                    </VListItem>
+                  </VList>
+                </VMenu>
+              </IconBtn>
+            </div>
+          </VCardText>
         </VCard>
       </template>
     </VHover>
-
     <!-- 安装插件进度框 -->
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
-    
     <!-- 更新日志 -->
-    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" max-height="85vh" scrollable>
+    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" scrollable>
       <VCard :title="t('plugin.updateHistoryTitle', { name: props.plugin?.plugin_name })">
         <VDialogCloseBtn @click="releaseDialog = false" />
         <VDivider />
         <VersionHistory :history="props.plugin?.history" />
       </VCard>
     </VDialog>
-    
     <!-- 插件详情-->
     <VDialog v-if="detailDialog" v-model="detailDialog" max-width="30rem">
       <VCard>
@@ -422,295 +327,3 @@ const dropdownItems = ref([
     </VDialog>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.plugin-app-card {
-  position: relative;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 16px;
-  overflow: hidden;
-  cursor: pointer;
-  
-  // 与PluginCard相同的高度
-  height: 170px;
-  
-  &--mobile {
-    border-radius: 12px;
-    height: 150px; // 移动端高度
-  }
-  
-  &--hover {
-    transform: translateY(-6px);
-  }
-  
-  &__bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 0;
-  }
-  
-  &__content {
-    position: relative;
-    z-index: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-    padding-bottom: 12px; // 为右下角按钮留空间
-    
-    .plugin-app-card--mobile & {
-      padding: 12px;
-      padding-bottom: 10px;
-    }
-  }
-  
-  &__body {
-    display: flex;
-    gap: 12px;
-    flex: 1;
-    align-items: flex-start;
-    margin-bottom: 8px;
-    
-    .plugin-app-card--mobile & {
-      gap: 10px;
-      margin-bottom: 6px;
-    }
-  }
-  
-  &__left-section {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-  }
-  
-  &__avatar-container {
-    position: relative;
-  }
-  
-  &__avatar {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
-  }
-  
-  &__install-btn-compact {
-    font-size: 0.7rem;
-    height: 24px;
-    padding: 0 8px;
-    min-width: auto;
-    border-radius: 4px;
-    
-    .plugin-app-card--mobile & {
-      font-size: 0.65rem;
-      height: 22px;
-      padding: 0 6px;
-    }
-  }
-  
-  &__info-section {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 10px; // 增加间距
-    
-    .plugin-app-card--mobile & {
-      gap: 8px;
-    }
-  }
-  
-  &__title-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-    margin-bottom: 0; // 移除额外间距
-  }
-  
-  &__title {
-    margin: 0;
-    font-size: 1.0rem; // 稍微缩小字体
-    font-weight: 600;
-    line-height: 1.2;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-    -webkit-box-orient: vertical;
-    
-    .plugin-app-card--mobile & {
-      font-size: 0.9rem;
-    }
-  }
-  
-  &__version-chip {
-    flex-shrink: 0;
-    font-size: 0.7rem;
-  }
-  
-  &__description {
-    margin: 0;
-    font-size: 0.8rem;
-    line-height: 1.3;
-    opacity: 0.8;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    cursor: help;
-    min-height: 2.6rem; // 固定最小高度，确保标签位置一致
-    
-    .plugin-app-card--mobile & {
-      font-size: 0.75rem;
-      line-height: 1.25;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      min-height: 2.5rem; // 移动端固定高度
-    }
-  }
-  
-  &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: auto;
-    gap: 8px;
-    padding-top: 12px; // 增加上边距
-  }
-  
-  &__author-info {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex: 1;
-    min-width: 0;
-  }
-  
-  &__author-avatar {
-    flex-shrink: 0;
-    width: 18px;
-    height: 18px;
-  }
-  
-  &__author-name {
-    font-size: 0.8rem;
-    opacity: 0.8;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  
-  &__stats-info {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-right: 36px;
-    
-    .plugin-app-card--mobile & {
-      margin-right: 32px;
-    }
-  }
-  
-  &__download-stats {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    opacity: 0.8;
-  }
-  
-  &__stats-text {
-    font-size: 0.8rem;
-  }
-  
-  &__tags-section {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 6px;
-    margin: 0;
-    overflow-x: hidden;
-    padding-right: 8px;
-    min-height: 20px; // 固定最小高度，即使没有标签也占位
-    align-items: flex-start; // 标签顶部对齐
-    
-    .plugin-app-card--mobile & {
-      gap: 4px;
-      min-height: 18px;
-    }
-  }
-  
-  &__tag {
-    font-size: 0.65rem;
-    height: 20px; // 缩小高度
-    opacity: 0.9;
-    font-weight: 500;
-    border-radius: 6px;
-    transition: all 0.2s ease;
-    flex-shrink: 0;
-    white-space: nowrap;
-    
-    .plugin-app-card--mobile & {
-      font-size: 0.6rem;
-      height: 18px;
-    }
-    
-    &:hover {
-      opacity: 1;
-      transform: scale(1.05);
-    }
-  }
-  
-  &__menu-section {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    z-index: 10;
-    
-    .plugin-app-card--mobile & {
-      bottom: 6px;
-      right: 6px;
-    }
-  }
-  
-  &__menu-btn-corner {
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    background: rgba(255, 255, 255, 0.1) !important;
-    backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    
-    &--visible {
-      opacity: 0.9;
-    }
-    
-    &:hover {
-      opacity: 1;
-      background: rgba(255, 255, 255, 0.2) !important;
-      transform: scale(1.05);
-    }
-  }
-}
-
-// 全局网格布局调整
-:global(.grid-plugin-card) {
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-  
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr; // 移动端单列
-    gap: 12px;
-  }
-  
-  @media (max-width: 480px) {
-    grid-template-columns: 1fr; // 小屏幕单列
-    gap: 10px;
-  }
-}
-</style>

src/components/cards/PluginCard.vue

@@ -11,7 +11,6 @@ import ProgressDialog from '../dialog/ProgressDialog.vue'
 import PluginConfigDialog from '../dialog/PluginConfigDialog.vue'
 import PluginDataDialog from '../dialog/PluginDataDialog.vue'
 import { useI18n } from 'vue-i18n'
-import { useDisplay } from 'vuetify'
 
 // 输入参数
 const props = defineProps({
@@ -28,9 +27,6 @@ const emit = defineEmits(['remove', 'save', 'actionDone'])
 // 多语言
 const { t } = useI18n()
 
-// 响应式显示
-const display = useDisplay()
-
 // 背景颜色
 const backgroundColor = ref('#28A9E1')
 
@@ -73,13 +69,6 @@ const imageLoadError = ref(false)
 // 更新日志弹窗
 const releaseDialog = ref(false)
 
-// 获取当前插件的标签
-const currentPluginLabels = computed(() => {
-  if (!props.plugin?.plugin_label) return []
-  
-  return props.plugin.plugin_label.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0)
-})
-
 // 监听动作标识，如为true则打开详情
 watch(
   () => props.action,
@@ -340,7 +329,7 @@ watch(
 
 <template>
   <div>
-    <!-- 重新设计的插件卡片 -->
+    <!-- 插件卡片 -->
     <VHover>
       <template #default="hover">
         <VCard
@@ -349,179 +338,88 @@ watch(
           :width="props.width"
           :height="props.height"
           @click="openPluginDetail"
-          class="plugin-card"
+          class="flex flex-col h-full"
           :class="{
-            'plugin-card--mobile': display.mobile,
+            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
-            'plugin-card--hover': hover.isHovering,
           }"
-          variant="elevated"
-          :elevation="hover.isHovering ? 16 : 6"
         >
-          <!-- 背景渐变层 -->
+          <div
-          <div 
+            class="flex-grow"
-            class="plugin-card__bg"
+            :style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
-            :style="`background: linear-gradient(135deg, ${backgroundColor}15 0%, ${backgroundColor}25 100%)`"
+          >
-          />
+            <VCardText class="px-2 pt-2 pb-0">
-          
+              <VCardTitle
-          <!-- 卡片内容 -->
+                class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
-          <div class="plugin-card__content">
+              >
-            <!-- 主体内容 -->
+                <VBadge dot inline :color="props.plugin?.state ? 'success' : 'secondary'" />
-            <div class="plugin-card__body">
+                {{ props.plugin?.plugin_name }}
-              <!-- 左侧区域：图标和更新按钮 -->
+                <span class="text-sm mt-1 text-gray-200"> v{{ props.plugin?.plugin_version }} </span>
-              <div class="plugin-card__left-section">
+              </VCardTitle>
-                <!-- 插件图标 -->
+            </VCardText>
-                <div class="plugin-card__avatar-container">
+            <div class="relative flex flex-row items-start px-2 justify-between grow">
-                  <VAvatar
+              <div class="relative flex-1 min-w-0">
-                    :size="display.mobile ? 40 : 48"
+                <VCardText class="px-2 py-1 text-white text-sm text-shadow overflow-hidden line-clamp-3 ...">
-                    class="plugin-card__avatar"
+                  {{ props.plugin?.plugin_desc }}
-                    variant="elevated"
+                </VCardText>
-                  >
-                    <VImg
-                      ref="imageRef"
-                      :src="iconPath"
-                      @load="imageLoaded"
-                      @error="imageLoadError = true"
-                    >
-                      <template #placeholder>
-                        <VSkeletonLoader type="avatar" />
-                      </template>
-                    </VImg>
-                  </VAvatar>
-                  
-                  <!-- 拖拽手柄在图标上 -->
-                  <VBtn
-                    icon="mdi-arrow-all"
-                    size="x-small"
-                    variant="text"
-                    class="cursor-move plugin-card__drag-btn-overlay"
-                    :class="{ 'plugin-card__drag-btn-overlay--visible': hover.isHovering }"
-                    @click.stop
-                  />
-                </div>
-
-                <!-- 更新按钮在图标下方 -->
-                <VBtn
-                  v-if="props.plugin?.has_update"
-                  size="x-small"
-                  color="warning"
-                  variant="elevated"
-                  @click.stop="showUpdateHistory"
-                  class="plugin-card__update-btn-compact plugin-card__update-btn--blink"
-                >
-                  <VIcon icon="mdi-arrow-up-circle" size="12" />
-                  更新
-                </VBtn>
               </div>
-
+              <div class="relative flex-shrink-0 self-center cursor-move pb-3">
-              <!-- 右侧信息区域 -->
+                <VAvatar size="48">
-              <div class="plugin-card__info-section">
+                  <VImg
-                <!-- 标题行 -->
+                    ref="imageRef"
-                <div class="plugin-card__title-row">
+                    :src="iconPath"
-                  <!-- 启用状态指示器 -->
+                    aspect-ratio="4/3"
-                  <VIcon 
+                    cover
-                    :icon="props.plugin?.state ? 'mdi-check-circle' : 'mdi-pause-circle'"
+                    @load="imageLoaded"
-                    :size="display.mobile ? 14 : 16"
+                    @error="imageLoadError = true"
-                    :color="props.plugin?.state ? 'success' : 'warning'"
-                    class="plugin-card__status-icon"
                   />
-                  <h3 class="plugin-card__title">
-                    {{ props.plugin?.plugin_name }}
-                  </h3>
-                  <VChip
-                    size="x-small"
-                    variant="tonal"
-                    color="primary"
-                    class="plugin-card__version-chip"
-                  >
-                    v{{ props.plugin?.plugin_version }}
-                  </VChip>
-                </div>
-
-                <!-- 描述 -->
-                <VTooltip :text="props.plugin?.plugin_desc" location="bottom">
-                  <template #activator="{ props: tooltipProps }">
-                    <p 
-                      class="plugin-card__description"
-                      v-bind="tooltipProps"
-                    >
-                      {{ props.plugin?.plugin_desc }}
-                    </p>
-                  </template>
-                </VTooltip>
-
-                <!-- 插件标签 -->
-                <div 
-                  v-if="currentPluginLabels.length > 0" 
-                  class="plugin-card__tags-section"
-                >
-                  <VChip
-                    v-for="tag in currentPluginLabels"
-                    :key="tag"
-                    size="x-small"
-                    variant="tonal"
-                    color="primary"
-                    class="plugin-card__tag"
-                  >
-                    {{ tag }}
-                  </VChip>
-                </div>
-              </div>
-            </div>
-
-            <!-- 底部信息栏 -->
-            <div class="plugin-card__footer">
-              <!-- 作者信息 -->
-              <div class="plugin-card__author-info">
-                <VAvatar size="18" class="plugin-card__author-avatar">
-                  <VImg :src="authorPath" @load="isAvatarLoaded = true">
-                    <VIcon v-if="!isAvatarLoaded" icon="mdi-github" size="10" />
-                  </VImg>
                 </VAvatar>
-                <span class="plugin-card__author-name">
+              </div>
+            </div>
+          </div>
+          <VCardText class="flex flex-col align-self-baseline px-2 py-2 w-full overflow-hidden">
+            <div class="flex flex-nowrap items-center w-full pe-7">
+              <span class="author-info flex-shrink-1 overflow-hidden text-ellipsis whitespace-nowrap">
+                <VImg :src="authorPath" class="author-avatar" @load="isAvatarLoaded = true">
+                  <VIcon v-if="!isAvatarLoaded" size="small" icon="mdi-github" class="me-1" />
+                </VImg>
+                <a
+                  :href="props.plugin?.author_url"
+                  target="_blank"
+                  @click.stop
+                  class="overflow-hidden text-ellipsis whitespace-nowrap"
+                >
                   {{ props.plugin?.plugin_author }}
-                </span>
+                </a>
-              </div>
+              </span>
-
+              <span v-if="props.count" class="ms-2 flex-shrink-0 download-count">
-              <!-- 统计信息 -->
+                <VIcon size="small" icon="mdi-download" />
-              <div class="plugin-card__stats-info">
+                <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
-                <div v-if="props.count" class="plugin-card__download-stats">
+              </span>
-                  <VIcon icon="mdi-download" size="14" />
-                  <span class="plugin-card__stats-text">{{ props.count?.toLocaleString() }}</span>
-                </div>
-              </div>
             </div>
-
+            <div class="absolute bottom-0 right-0">
-            <!-- 更多菜单按钮 - 右下角 -->
+              <IconBtn>
-            <div class="plugin-card__menu-section" :class="{ 'plugin-card__menu-section--with-update': props.plugin?.has_update }">
+                <VIcon size="small" icon="mdi-dots-vertical" />
-              <VMenu v-model="menuVisible" location="top end" :close-on-content-click="true">
+                <VMenu v-model="menuVisible" activator="parent" close-on-content-click>
-                <template #activator="{ props: menuProps }">
+                  <VList>
-                  <VBtn
+                    <VListItem
-                    v-bind="menuProps"
+                      v-for="(item, i) in dropdownItems"
-                    icon="mdi-dots-vertical"
+                      v-show="item.show"
-                    size="small"
+                      :key="i"
-                    variant="text"
+                      :base-color="item.props.color"
-                    @click.stop
+                      @click="item.props.click"
-                    class="plugin-card__menu-btn-corner"
+                    >
-                    :class="{ 'plugin-card__menu-btn-corner--visible': hover.isHovering || display.mobile }"
+                      <template #prepend>
-                  />
+                        <VIcon :icon="item.props.prependIcon" />
-                </template>
+                      </template>
-                <VList>
+                      <VListItemTitle v-text="item.title" />
-                  <VListItem
+                    </VListItem>
-                    v-for="(item, i) in dropdownItems"
+                  </VList>
-                    v-show="item.show"
+                </VMenu>
-                    :key="i"
+              </IconBtn>
-                    :base-color="item.props.color"
-                    @click="item.props.click"
-                    density="compact"
-                  >
-                    <template #prepend>
-                      <VIcon :icon="item.props.prependIcon" size="16" />
-                    </template>
-                    <VListItemTitle class="text-body-2">{{ item.title }}</VListItemTitle>
-                  </VListItem>
-                </VList>
-              </VMenu>
             </div>
+          </VCardText>
+          <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 right-5">
+            <VIcon icon="mdi-new-box" class="text-white" />
           </div>
         </VCard>
       </template>
@@ -570,343 +468,26 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-.plugin-card {
+.card-cover-blurred::before {
-  position: relative;
+  position: absolute;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  /* stylelint-disable-next-line property-no-vendor-prefix */
-  border-radius: 16px;
+  -webkit-backdrop-filter: blur(2px);
-  overflow: hidden;
+  backdrop-filter: blur(2px);
-  cursor: pointer;
+  background: rgba(29, 39, 59, 48%);
-  
+  content: '';
-  // 降低高度
+  inset: 0;
-  height: 170px;
-  
-  &--mobile {
-    border-radius: 12px;
-    height: 150px; // 移动端高度
-  }
-  
-  &--hover {
-    transform: translateY(-6px);
-  }
-  
-  &__bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 0;
-  }
-  
-  &__content {
-    position: relative;
-    z-index: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-    padding-bottom: 12px; // 为右下角按钮留空间
-    
-    .plugin-card--mobile & {
-      padding: 12px;
-      padding-bottom: 10px;
-    }
-  }
-  
-  &__body {
-    display: flex;
-    gap: 12px;
-    flex: 1;
-    align-items: flex-start;
-    margin-bottom: 8px;
-    
-    .plugin-card--mobile & {
-      gap: 10px;
-      margin-bottom: 6px;
-    }
-  }
-  
-  &__left-section {
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-  }
-  
-  &__avatar-container {
-    position: relative;
-  }
-  
-  &__avatar {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
-  }
-  
-  &__drag-btn-overlay {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    transition: all 0.3s ease;
-    color: rgba(255, 255, 255, 0.9) !important;
-    
-    &--visible {
-      opacity: 0.8;
-    }
-    
-    &:hover {
-      opacity: 1;
-      transform: translate(-50%, -50%) scale(1.1);
-    }
-  }
-  
-  &__update-btn-compact {
-    font-size: 0.7rem;
-    height: 24px;
-    padding: 0 8px;
-    min-width: auto;
-    border-radius: 4px;
-    
-    .plugin-card--mobile & {
-      font-size: 0.65rem;
-      height: 22px;
-      padding: 0 6px;
-    }
-  }
-  
-  // 更新按钮闪烁效果
-  &__update-btn--blink {
-    animation: plugin-card-blink 1.5s infinite;
-    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
-  }
-  
-  @keyframes plugin-card-blink {
-    0% {
-      transform: scale(1);
-      box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
-    }
-    50% {
-      transform: scale(1.05);
-      box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.1);
-    }
-    100% {
-      transform: scale(1);
-      box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
-    }
-  }
-  
-  &__info-section {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 10px; // 增加间距
-    
-    .plugin-card--mobile & {
-      gap: 8px;
-    }
-  }
-  
-  &__title-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-    margin-bottom: 0; // 移除额外间距
-  }
-  
-  &__status-icon {
-    flex-shrink: 0;
-    opacity: 0.9;
-    transition: opacity 0.3s ease;
-    
-    &:hover {
-      opacity: 1;
-    }
-  }
-  
-  &__title {
-    margin: 0;
-    font-size: 1.0rem; // 稍微缩小字体
-    font-weight: 600;
-    line-height: 1.2;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-    -webkit-box-orient: vertical;
-    
-    .plugin-card--mobile & {
-      font-size: 0.9rem;
-    }
-  }
-  
-  &__version-chip {
-    flex-shrink: 0;
-    font-size: 0.7rem;
-  }
-  
-  &__description {
-    margin: 0;
-    font-size: 0.8rem;
-    line-height: 1.3;
-    opacity: 0.8;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    cursor: help;
-    min-height: 2.6rem; // 固定最小高度，确保标签位置一致
-    
-    .plugin-card--mobile & {
-      font-size: 0.75rem;
-      line-height: 1.25;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      min-height: 2.5rem; // 移动端固定高度
-    }
-  }
-  
-  &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: auto;
-    gap: 8px;
-    padding-top: 12px; // 增加上边距
-  }
-  
-  &__author-info {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    flex: 1;
-    min-width: 0;
-  }
-  
-  &__author-avatar {
-    flex-shrink: 0;
-    width: 18px;
-    height: 18px;
-  }
-  
-  &__author-name {
-    font-size: 0.8rem;
-    opacity: 0.8;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  
-  &__stats-info {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-right: 36px;
-    
-    .plugin-card--mobile & {
-      margin-right: 32px;
-    }
-  }
-  
-  &__download-stats {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    opacity: 0.8;
-  }
-  
-  &__stats-text {
-    font-size: 0.8rem;
-  }
-  
-  &__tags-section {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 6px;
-    margin: 0;
-    overflow-x: hidden;
-    padding-right: 8px;
-    min-height: 20px; // 固定最小高度，即使没有标签也占位
-    align-items: flex-start; // 标签顶部对齐
-    
-    .plugin-card--mobile & {
-      gap: 4px;
-      min-height: 18px;
-    }
-  }
-  
-  &__tag {
-    font-size: 0.65rem;
-    height: 20px; // 缩小高度
-    opacity: 0.9;
-    font-weight: 500;
-    border-radius: 6px;
-    transition: all 0.2s ease;
-    flex-shrink: 0;
-    white-space: nowrap;
-    
-    .plugin-card--mobile & {
-      font-size: 0.6rem;
-      height: 18px;
-    }
-    
-    &:hover {
-      opacity: 1;
-      transform: scale(1.05);
-    }
-  }
-  
-  &__menu-section {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    z-index: 10;
-    
-    .plugin-card--mobile & {
-      bottom: 6px;
-      right: 6px;
-    }
-  }
-  
-  &__menu-btn-corner {
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    background: rgba(255, 255, 255, 0.1) !important;
-    backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    
-    &--visible {
-      opacity: 0.9;
-    }
-    
-    &:hover {
-      opacity: 1;
-      background: rgba(255, 255, 255, 0.2) !important;
-      transform: scale(1.05);
-    }
-  }
 }
 
-// 全局网格布局调整
+.author-info {
-:global(.grid-plugin-card) {
+  display: flex;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  align-items: center;
-  gap: 16px;
+}
-  
+
-  @media (max-width: 768px) {
+.author-avatar {
-    grid-template-columns: 1fr; // 移动端单列
+  border-radius: 50%;
-    gap: 12px;
+  block-size: 24px;
-  }
+  inline-size: 24px;
-  
+  margin-inline-end: 8px;
-  @media (max-width: 480px) {
+  object-fit: cover;
-    grid-template-columns: 1fr; // 小屏幕单列
-    gap: 10px;
-  }
 }
 </style>

src/components/cards/PluginFolderCard.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   pluginCount: Number,
   folderConfig: {
     type: Object as PropType<FolderConfig>,
-    default: () => ({})
+    default: () => ({}),
   },
   width: String,
   height: String,
@@ -60,7 +60,8 @@ const folderSettings = ref<FolderConfig>({
   background: '',
   icon: 'mdi-folder',
   color: '#2196F3',
-  gradient: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+  gradient:
+    'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(33, 150, 243, 0.7) 0%, rgba(33, 150, 243, 0.8s) 100%)',
   showIcon: true,
 })
 
@@ -92,27 +93,27 @@ const colorOptions = [
 
 // 预设渐变选项
 const gradientOptions = [
-  'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+  '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%)',
-  'linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.15) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(76, 175, 80, 0.7) 0%, rgba(76, 175, 80, 0.8) 100%)',
-  'linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.15) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(255, 152, 0, 0.7) 0%, rgba(255, 152, 0, 0.8) 100%)',
-  'linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.15) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(156, 39, 176, 0.7) 0%, rgba(156, 39, 176, 0.8) 100%)',
-  'linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.15) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(244, 67, 54, 0.7) 0%, rgba(244, 67, 54, 0.8) 100%)',
-  'linear-gradient(135deg, rgba(96, 125, 139, 0.1) 0%, rgba(96, 125, 139, 0.15) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(96, 125, 139, 0.7) 0%, rgba(96, 125, 139, 0.8) 100%)',
-  'linear-gradient(135deg, rgba(233, 30, 99, 0.1) 0%, rgba(233, 30, 99, 0.15) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(233, 30, 99, 0.7) 0%, rgba(233, 30, 99, 0.8) 100%)',
-  'linear-gradient(135deg, rgba(63, 81, 181, 0.1) 0%, rgba(156, 39, 176, 0.15) 100%)',
+  'linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(63, 81, 181, 0.7) 0%, rgba(156, 39, 176, 0.8) 100%)',
 ]
 
 // 计算文件夹样式
-const folderStyle = computed(() => {
+const folderStyle: any = computed(() => {
   const config = props.folderConfig || {}
   const settings = folderSettings.value
-  
+
   let style = {}
-  
+
   // 背景图片
   if (config.background || settings.background) {
     const bg = config.background || settings.background
-    if (bg.startsWith('http')) {
+    if (bg?.startsWith('http')) {
       style = {
         ...style,
         backgroundImage: `url(${bg})`,
@@ -122,7 +123,7 @@ const folderStyle = computed(() => {
       }
     }
   }
-  
+
   return style
 })
 
@@ -130,7 +131,7 @@ const folderStyle = computed(() => {
 const backgroundGradient = computed(() => {
   const config = props.folderConfig || {}
   const settings = folderSettings.value
-  
+
   return config.gradient || settings.gradient || gradientOptions[0]
 })
 
@@ -138,7 +139,7 @@ const backgroundGradient = computed(() => {
 const folderIcon = computed(() => {
   const config = props.folderConfig || {}
   const settings = folderSettings.value
-  
+
   return config.icon || settings.icon || 'mdi-folder'
 })
 
@@ -146,7 +147,7 @@ const folderIcon = computed(() => {
 const iconColor = computed(() => {
   const config = props.folderConfig || {}
   const settings = folderSettings.value
-  
+
   return config.color || settings.color || '#2196F3'
 })
 
@@ -154,19 +155,23 @@ const iconColor = computed(() => {
 const shouldShowIcon = computed(() => {
   const config = props.folderConfig || {}
   const settings = folderSettings.value
-  
+
-  return config.showIcon !== undefined ? config.showIcon : (settings.showIcon !== undefined ? settings.showIcon : true)
+  return config.showIcon !== undefined ? config.showIcon : settings.showIcon !== undefined ? settings.showIcon : true
 })
 
 // 监听props变化，更新本地设置
-watch(() => props.folderConfig, (newConfig) => {
+watch(
-  if (newConfig) {
+  () => props.folderConfig,
-    folderSettings.value = {
+  newConfig => {
-      ...folderSettings.value,
+    if (newConfig) {
-      ...newConfig,
+      folderSettings.value = {
+        ...folderSettings.value,
+        ...newConfig,
+      }
     }
-  }
+  },
-}, { deep: true, immediate: true })
+  { deep: true, immediate: true },
+)
 
 // 打开文件夹
 function openFolder() {
@@ -185,12 +190,12 @@ async function confirmRename() {
     $toast.error('文件夹名称不能为空')
     return
   }
-  
+
   if (newFolderName.value === props.folderName) {
     renameDialog.value = false
     return
   }
-  
+
   try {
     emit('rename', props.folderName, newFolderName.value)
     renameDialog.value = false
@@ -233,7 +238,7 @@ function saveSettings() {
     ...props.folderConfig,
     ...folderSettings.value,
   }
-  
+
   emit('update-config', props.folderName, config)
   settingDialog.value = false
   $toast.success('文件夹设置已保存')
@@ -273,38 +278,38 @@ const dropdownItems = ref([
 </script>
 
 <template>
-  <div>
+  <div class="h-full">
     <!-- 文件夹卡片 -->
     <VHover>
       <template #default="hover">
         <VCard
           v-bind="hover.props"
+          :ripple="false"
           :width="props.width"
           :height="props.height"
+          min-height="9rem"
           @click="openFolder"
-          class="plugin-folder-card cursor-move"
+          class="plugin-folder-card h-full"
           :class="{
             'plugin-folder-card--mobile': display.mobile,
             'plugin-folder-card--hover': hover.isHovering,
           }"
-          variant="elevated"
-          :elevation="hover.isHovering ? 16 : 6"
           :style="folderStyle"
         >
           <!-- 背景渐变层 -->
           <div class="plugin-folder-card__bg" :style="{ background: backgroundGradient }" />
-          
+
           <!-- 背景遮罩（当有背景图片时） -->
           <div v-if="folderStyle.backgroundImage" class="plugin-folder-card__overlay" />
-          
+
           <!-- 卡片内容 -->
           <div class="plugin-folder-card__content">
             <!-- 主体内容 -->
             <div class="plugin-folder-card__body" :class="{ 'plugin-folder-card__body--no-icon': !shouldShowIcon }">
               <!-- 文件夹图标 -->
               <div v-if="shouldShowIcon" class="plugin-folder-card__icon-container">
-                <VIcon 
+                <VIcon
-                  :icon="folderIcon" 
+                  :icon="folderIcon"
                   :size="display.mobile ? 56 : 72"
                   class="plugin-folder-card__folder-icon"
                   :color="iconColor"
@@ -318,25 +323,17 @@ const dropdownItems = ref([
                   {{ props.folderName }}
                 </h3>
                 <!-- 插件数量 -->
-                <p class="plugin-folder-card__count">
+                <p class="plugin-folder-card__count">{{ props.pluginCount }} 个插件</p>
-                  {{ props.pluginCount }} 个插件
-                </p>
               </div>
             </div>
 
             <!-- 更多菜单按钮 - 右下角 -->
-            <div class="plugin-folder-card__menu-section">
+            <div class="absolute bottom-0 right-0">
               <VMenu v-model="menuVisible" location="top end" :close-on-content-click="true">
                 <template #activator="{ props: menuProps }">
-                  <VBtn
+                  <IconBtn v-bind="menuProps" @click.stop>
-                    v-bind="menuProps"
+                    <VIcon size="small" icon="mdi-dots-vertical" color="white" />
-                    icon="mdi-dots-vertical"
+                  </IconBtn>
-                    size="small"
-                    variant="text"
-                    @click.stop
-                    class="plugin-folder-card__menu-btn-corner"
-                    :class="{ 'plugin-folder-card__menu-btn-corner--visible': hover.isHovering || display.mobile }"
-                  />
                 </template>
                 <VList>
                   <VListItem
@@ -345,7 +342,6 @@ const dropdownItems = ref([
                     :key="i"
                     :base-color="item.props.color"
                     @click="item.props.click"
-                    density="compact"
                   >
                     <template #prepend>
                       <VIcon :icon="item.props.prependIcon" size="16" />
@@ -392,20 +388,16 @@ const dropdownItems = ref([
           <VRow>
             <!-- 显示图标开关 -->
             <VCol cols="12">
-              <VSwitch
+              <VSwitch v-model="folderSettings.showIcon" label="显示文件夹图标" color="primary" hide-details />
-                v-model="folderSettings.showIcon"
-                label="显示文件夹图标"
-                color="primary"
-                hide-details
-              />
             </VCol>
-            
+
             <!-- 图标选择 -->
             <VCol v-if="folderSettings.showIcon" cols="12" md="6">
               <VCardSubtitle class="pa-0 mb-2">图标</VCardSubtitle>
               <div class="icon-grid">
                 <VBtn
                   v-for="icon in iconOptions"
+                  icon
                   :key="icon"
                   :variant="folderSettings.icon === icon ? 'tonal' : 'text'"
                   :color="folderSettings.icon === icon ? 'primary' : 'default'"
@@ -417,7 +409,7 @@ const dropdownItems = ref([
                 </VBtn>
               </div>
             </VCol>
-            
+
             <!-- 颜色选择 -->
             <VCol v-if="folderSettings.showIcon" cols="12" md="6">
               <VCardSubtitle class="pa-0 mb-2">图标颜色</VCardSubtitle>
@@ -436,7 +428,7 @@ const dropdownItems = ref([
                 </VBtn>
               </div>
             </VCol>
-            
+
             <!-- 渐变背景选择 -->
             <VCol cols="12">
               <VCardSubtitle class="pa-0 mb-2">背景渐变</VCardSubtitle>
@@ -454,7 +446,7 @@ const dropdownItems = ref([
                 </VBtn>
               </div>
             </VCol>
-            
+
             <!-- 自定义背景图片 -->
             <VCol cols="12">
               <VTextField
@@ -482,22 +474,13 @@ const dropdownItems = ref([
 .plugin-folder-card {
   position: relative;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 16px;
   overflow: hidden;
   cursor: pointer;
-  
+
-  // 与插件卡片相同的高度
-  height: 170px;
-  
-  &--mobile {
-    border-radius: 12px;
-    height: 150px;
-  }
-  
   &--hover {
-    transform: translateY(-6px);
+    transform: translateY(-4px);
   }
-  
+
   &__bg {
     position: absolute;
     top: 0;
@@ -506,7 +489,7 @@ const dropdownItems = ref([
     bottom: 0;
     z-index: 0;
   }
-  
+
   &__overlay {
     position: absolute;
     top: 0;
@@ -516,7 +499,7 @@ const dropdownItems = ref([
     z-index: 1;
     background: rgba(0, 0, 0, 0.2);
   }
-  
+
   &__content {
     position: relative;
     z-index: 2;
@@ -525,13 +508,13 @@ const dropdownItems = ref([
     flex-direction: column;
     padding: 16px;
     padding-bottom: 12px;
-    
+
     .plugin-folder-card--mobile & {
       padding: 12px;
       padding-bottom: 10px;
     }
   }
-  
+
   &__body {
     display: flex;
     flex-direction: row;
@@ -540,52 +523,51 @@ const dropdownItems = ref([
     flex: 1;
     gap: 16px;
     padding: 0 8px;
-    
+
     .plugin-folder-card--mobile & {
       gap: 12px;
       padding: 0 4px;
     }
-    
+
     &--no-icon {
       justify-content: flex-start;
       align-items: flex-start;
       padding: 16px;
       gap: 0;
-      
+
       .plugin-folder-card--mobile & {
         padding: 12px;
         gap: 0;
       }
     }
   }
-  
+
   &__icon-container {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
-  
+
   &__folder-icon {
     transition: all 0.3s ease;
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+
-    
     .plugin-folder-card--hover & {
       transform: scale(1.05);
     }
   }
-  
+
   &__info {
     text-align: left;
     min-height: 0;
     flex: 1;
-    
+
     &--no-icon {
       text-align: left;
       flex: none;
     }
   }
-  
+
   &__name {
     margin: 0;
     font-size: 1.1rem;
@@ -600,74 +582,44 @@ const dropdownItems = ref([
     max-width: none;
     color: white;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-    
+
     .plugin-folder-card--mobile & {
-      font-size: 1.0rem;
+      font-size: 1rem;
     }
-    
+
     .plugin-folder-card__info--no-icon & {
       font-size: 1.3rem;
       font-weight: 700;
       -webkit-line-clamp: 2;
       line-clamp: 2;
       margin-bottom: 4px;
-      
+
       .plugin-folder-card--mobile & {
         font-size: 1.2rem;
       }
     }
   }
-  
+
   &__count {
     margin: 2px 0 0 0;
     font-size: 0.85rem;
     opacity: 0.9;
     color: white;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-    
+
     .plugin-folder-card--mobile & {
       font-size: 0.8rem;
     }
-    
+
     .plugin-folder-card__info--no-icon & {
       margin-top: 0;
       font-size: 0.9rem;
-      
+
       .plugin-folder-card--mobile & {
         font-size: 0.85rem;
       }
     }
   }
-  
-  &__menu-section {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    z-index: 10;
-    
-    .plugin-folder-card--mobile & {
-      bottom: 6px;
-      right: 6px;
-    }
-  }
-  
-  &__menu-btn-corner {
-    opacity: 0;
-    transition: opacity 0.2s ease;
-    background: rgba(255, 255, 255, 0.1) !important;
-    backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    
-    &--visible {
-      opacity: 0.9;
-    }
-    
-    &:hover {
-      opacity: 1;
-      background: rgba(255, 255, 255, 0.2) !important;
-      transform: scale(1.05);
-    }
-  }
 }
 
 // 设置对话框样式
@@ -704,4 +656,4 @@ const dropdownItems = ref([
   height: 60px !important;
   border-radius: 8px !important;
 }
-</style> 
+</style>

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 || [])
+      const plugins = Array.isArray(folderData) ? folderData : folderData.plugins || []
-      plugins.forEach(id => folderedPluginIds.add(id))
+      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) => {
+watch(
-  if (isDraggingSortMode.value) return // 拖拽排序时跳过更新
+  displayedPlugins,
-  
+  newPlugins => {
-  if (!currentFolder.value) {
+    if (isDraggingSortMode.value) return // 拖拽排序时跳过更新
-    draggableMainPlugins.value = [...newPlugins]
+
-  } else {
+    if (!currentFolder.value) {
-    draggableFolderPlugins.value = [...newPlugins]
+      draggableMainPlugins.value = [...newPlugins]
-  }
+    } else {
-}, { immediate: true })
+      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 || [])
+      const plugins = Array.isArray(folderData) ? folderData : folderData.plugins || []
-      plugins.forEach(id => {
+      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',
+          icon: defaultIcon,
-          color: '#2196F3',
+          color: defaultColor,
-          gradient: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+          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',
+          icon: folderData.icon || defaultIcon,
-          color: folderData.color || '#2196F3',
+          color: folderData.color || defaultColor,
-          gradient: folderData.gradient || 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+          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)
+    folderOrder.value = Object.keys(processedFolders).sort(
-      .sort((a, b) => (processedFolders[a].order || 0) - (processedFolders[b].order || 0))
+      (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',
+        icon: defaultIcon,
-        color: '#2196F3',
+        color: defaultColor,
-        gradient: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+        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 
+    const plugin = currentFolder.value ? draggableFolderPlugins.value[oldIndex] : draggableMainPlugins.value[oldIndex]
-      ? 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 
+            <div v-if="displayedFolders.length > 0 || displayedPlugins.length > 0" class="grid gap-4 grid-plugin-card">
-              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
+        <VTextField v-model="newFolderName" label="文件夹名称" variant="outlined" @keyup.enter="createNewFolder" />
-          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;