优化 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
-            class="plugin-app-card__bg"
+            class="flex-grow"
-            :style="`background: linear-gradient(135deg, ${backgroundColor}15 0%, ${backgroundColor}25 100%)`"
+            :style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
-          />
+          >
-          
+            <VCardText class="px-2 pt-2 pb-0">
-          <!-- 卡片内容 -->
+              <VCardTitle
-          <div class="plugin-app-card__content">
+                class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
-            <!-- 主体内容 -->
+              >
-            <div class="plugin-app-card__body">
+                {{ props.plugin?.plugin_name }}
-              <!-- 左侧区域：图标和安装按钮 -->
+                <span class="text-sm mt-1 text-gray-200"> v{{ props.plugin?.plugin_version }} </span>
-              <div class="plugin-app-card__left-section">
+              </VCardTitle>
-                <!-- 插件图标 -->
+            </VCardText>
-                <div class="plugin-app-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="text-white text-sm px-2 py-1 text-shadow overflow-hidden line-clamp-3 ...">
-                    class="plugin-app-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>
-                </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
-            class="plugin-card__bg"
+            class="flex-grow"
-            :style="`background: linear-gradient(135deg, ${backgroundColor}15 0%, ${backgroundColor}25 100%)`"
+            :style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
-          />
+          >
-          
+            <VCardText class="px-2 pt-2 pb-0">
-          <!-- 卡片内容 -->
+              <VCardTitle
-          <div class="plugin-card__content">
+                class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
-            <!-- 主体内容 -->
+              >
-            <div class="plugin-card__body">
+                <VBadge dot inline :color="props.plugin?.state ? 'success' : 'secondary'" />
-              <!-- 左侧区域：图标和更新按钮 -->
+                {{ props.plugin?.plugin_name }}
-              <div class="plugin-card__left-section">
+                <span class="text-sm mt-1 text-gray-200"> v{{ props.plugin?.plugin_version }} </span>
-                <!-- 插件图标 -->
+              </VCardTitle>
-                <div class="plugin-card__avatar-container">
+            </VCardText>
-                  <VAvatar
+            <div class="relative flex flex-row items-start px-2 justify-between grow">
-                    :size="display.mobile ? 40 : 48"
+              <div class="relative flex-1 min-w-0">
-                    class="plugin-card__avatar"
+                <VCardText class="px-2 py-1 text-white text-sm text-shadow overflow-hidden line-clamp-3 ...">
-                    variant="elevated"
+                  {{ props.plugin?.plugin_desc }}
-                  >
+                </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,18 +93,18 @@ 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
 
@@ -112,7 +113,7 @@ const folderStyle = computed(() => {
   // 背景图片
   if (config.background || settings.background) {
     const bg = config.background || settings.background
-    if (bg.startsWith('http')) {
+    if (bg?.startsWith('http')) {
       style = {
         ...style,
         backgroundImage: `url(${bg})`,
@@ -155,18 +156,22 @@ 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() {
@@ -273,22 +278,22 @@ 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"
         >
           <!-- 背景渐变层 -->
@@ -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,12 +388,7 @@ 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>
 
             <!-- 图标选择 -->
@@ -406,6 +397,7 @@ const dropdownItems = ref([
               <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'"
@@ -482,20 +474,11 @@ 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 {
@@ -568,7 +551,6 @@ const dropdownItems = ref([
 
   &__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);
@@ -602,7 +584,7 @@ const dropdownItems = ref([
     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 & {
@@ -638,36 +620,6 @@ const dropdownItems = ref([
       }
     }
   }
-  
-  &__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);
-    }
-  }
 }
 
 // 设置对话框样式

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 (isDraggingSortMode.value) return // 拖拽排序时跳过更新
 
-  if (!currentFolder.value) {
+    if (!currentFolder.value) {
-    draggableMainPlugins.value = [...newPlugins]
+      draggableMainPlugins.value = [...newPlugins]
-  } else {
+    } else {
-    draggableFolderPlugins.value = [...newPlugins]
+      draggableFolderPlugins.value = [...newPlugins]
-  }
+    }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 
 // 监听文件夹切换，更新可拖拽列表
 watch(currentFolder, () => {
@@ -229,13 +241,13 @@ const displayedFolders = computed(() => {
 
   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,
     }
   })
 })
@@ -297,8 +309,8 @@ async function saveMainPluginOrder() {
 
     // 添加文件夹中的插件到末尾
     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)
@@ -635,10 +647,10 @@ 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 => {
@@ -649,9 +661,9 @@ async function loadPluginFolders() {
         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,9 +672,9 @@ 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,
         }
@@ -674,8 +686,9 @@ async function loadPluginFolders() {
     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)
@@ -690,7 +703,7 @@ 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)
@@ -728,7 +741,7 @@ 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,
     }
@@ -809,9 +822,9 @@ 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]
 
     // 从排序列表中移除
@@ -850,7 +863,7 @@ async function removeFromFolder(pluginId: string) {
   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)
@@ -951,7 +964,7 @@ async function handleDropToFolder(event: DragEvent, folderName: string) {
 
     // 获取目标文件夹数据
     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)) {
@@ -963,7 +976,7 @@ async function handleDropToFolder(event: DragEvent, folderName: string) {
     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)
@@ -985,9 +998,9 @@ async function handleDropToFolder(event: DragEvent, folderName: string) {
       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,
       }
@@ -1019,9 +1032,7 @@ function onDragStartPlugin(evt: any) {
   // 从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
@@ -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>
 
@@ -1229,10 +1231,7 @@ function onDragEndPlugin(evt: any) {
             <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"
@@ -1480,12 +1479,7 @@ function onDragEndPlugin(evt: any) {
     <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 />
@@ -1504,7 +1498,7 @@ function onDragEndPlugin(evt: any) {
   &.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;
   }
 }