Merge pull request #338 from madrays/v2

2026-05-26 10:49:47 +08:00 · 2025-05-24 06:34:30 +08:00
parent ba13e6ac35 a34dd8148f
commit b62d291aab
4 changed files with 2481 additions and 182 deletions
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -8,6 +8,7 @@ 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({
@@ -23,6 +24,9 @@ const emit = defineEmits(['install'])
 // 多语言
 const { t } = useI18n()

+// 响应式显示
+const display = useDisplay()
+
 // 背景颜色
 const backgroundColor = ref('#28A9E1')

@@ -50,6 +54,19 @@ 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
@@ -101,6 +118,14 @@ 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转换为项目地址
@@ -154,6 +179,7 @@ const dropdownItems = ref([

 <template>
  <div>
+    <!-- 重新设计的插件卡片 -->
    <VHover>
      <template #default="hover">
        <VCard
@@ -161,90 +187,177 @@ const dropdownItems = ref([
          :width="props.width"
          :height="props.height"
          @click="detailDialog = true"
-          class="flex flex-col h-full"
+          class="plugin-app-card"
          :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
+            'plugin-app-card--mobile': display.mobile,
+            'plugin-app-card--hover': hover.isHovering,
          }"
+          variant="elevated"
+          :elevation="hover.isHovering ? 16 : 6"
        >
-          <div
-            class="flex-grow"
-            :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
-                class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
-              >
-                {{ props.plugin?.plugin_name }}
-                <span class="text-sm mt-1 text-gray-200"> v{{ props.plugin?.plugin_version }} </span>
-              </VCardTitle>
-            </VCardText>
-            <div class="relative flex flex-row items-start px-2 justify-between grow">
-              <div class="relative flex-1 min-w-0">
-                <VCardText class="text-white text-sm px-2 py-1 text-shadow overflow-hidden line-clamp-3 ...">
-                  {{ props.plugin?.plugin_desc }}
-                </VCardText>
+          <!-- 背景渐变层 -->
+          <div 
+            class="plugin-app-card__bg"
+            :style="`background: linear-gradient(135deg, ${backgroundColor}15 0%, ${backgroundColor}25 100%)`"
+          />
+          
+          <!-- 卡片内容 -->
+          <div class="plugin-app-card__content">
+            <!-- 主体内容 -->
+            <div class="plugin-app-card__body">
+              <!-- 左侧区域：图标和安装按钮 -->
+              <div class="plugin-app-card__left-section">
+                <!-- 插件图标 -->
+                <div class="plugin-app-card__avatar-container">
+                  <VAvatar
+                    :size="display.mobile ? 40 : 48"
+                    class="plugin-app-card__avatar"
+                    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">
-                  <VImg
-                    ref="imageRef"
-                    :src="iconPath"
-                    aspect-ratio="4/3"
-                    cover
-                    @load="imageLoaded"
-                    @error="imageLoadError = true"
-                  />
+
+              <!-- 右侧信息区域 -->
+              <div class="plugin-app-card__info-section">
+                <!-- 标题行 -->
+                <div class="plugin-app-card__title-row">
+                  <h3 class="plugin-app-card__title">
+                    {{ props.plugin?.plugin_name }}
+                  </h3>
+                  <VChip
+                    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>
+                <VList>
+                  <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>
-          <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="me-n3 absolute bottom-0 right-3">
-              <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" scrollable>
+    <VDialog v-if="releaseDialog" v-model="releaseDialog" width="600" max-height="85vh" 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>
@@ -309,3 +422,295 @@ 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>
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -11,6 +11,7 @@ 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({
@@ -27,6 +28,9 @@ const emit = defineEmits(['remove', 'save', 'actionDone'])
 // 多语言
 const { t } = useI18n()

+// 响应式显示
+const display = useDisplay()
+
 // 背景颜色
 const backgroundColor = ref('#28A9E1')

@@ -69,6 +73,13 @@ 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,
@@ -329,7 +340,7 @@ watch(

 <template>
  <div>
-    <!-- 插件卡片 -->
+    <!-- 重新设计的插件卡片 -->
    <VHover>
      <template #default="hover">
        <VCard
@@ -338,88 +349,179 @@ watch(
          :width="props.width"
          :height="props.height"
          @click="openPluginDetail"
-          class="flex flex-col h-full"
+          class="plugin-card"
          :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
+            'plugin-card--mobile': display.mobile,
+            'plugin-card--hover': hover.isHovering,
          }"
+          variant="elevated"
+          :elevation="hover.isHovering ? 16 : 6"
        >
-          <div
-            class="flex-grow"
-            :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
-                class="text-white px-2 pb-0 text-lg text-shadow whitespace-nowrap overflow-hidden text-ellipsis"
-              >
-                <VBadge dot inline :color="props.plugin?.state ? 'success' : 'secondary'" />
-                {{ props.plugin?.plugin_name }}
-                <span class="text-sm mt-1 text-gray-200"> v{{ props.plugin?.plugin_version }} </span>
-              </VCardTitle>
-            </VCardText>
-            <div class="relative flex flex-row items-start px-2 justify-between grow">
-              <div class="relative flex-1 min-w-0">
-                <VCardText class="px-2 py-1 text-white text-sm text-shadow overflow-hidden line-clamp-3 ...">
-                  {{ props.plugin?.plugin_desc }}
-                </VCardText>
-              </div>
-              <div class="relative flex-shrink-0 self-center cursor-move pb-3">
-                <VAvatar size="48">
-                  <VImg
-                    ref="imageRef"
-                    :src="iconPath"
-                    aspect-ratio="4/3"
-                    cover
-                    @load="imageLoaded"
-                    @error="imageLoadError = true"
-                  />
-                </VAvatar>
-              </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 }}
-                </a>
-              </span>
-              <span v-if="props.count" class="ms-2 flex-shrink-0 download-count">
-                <VIcon size="small" icon="mdi-download" />
-                <span class="text-sm ms-1 mt-1">{{ props.count?.toLocaleString() }}</span>
-              </span>
-            </div>
-            <div class="me-n3 absolute bottom-0 right-3">
-              <IconBtn>
-                <VIcon size="small" icon="mdi-dots-vertical" />
-                <VMenu v-model="menuVisible" activator="parent" close-on-content-click>
-                  <VList>
-                    <VListItem
-                      v-for="(item, i) in dropdownItems"
-                      v-show="item.show"
-                      :key="i"
-                      :base-color="item.props.color"
-                      @click="item.props.click"
+          <!-- 背景渐变层 -->
+          <div 
+            class="plugin-card__bg"
+            :style="`background: linear-gradient(135deg, ${backgroundColor}15 0%, ${backgroundColor}25 100%)`"
+          />
+          
+          <!-- 卡片内容 -->
+          <div class="plugin-card__content">
+            <!-- 主体内容 -->
+            <div class="plugin-card__body">
+              <!-- 左侧区域：图标和更新按钮 -->
+              <div class="plugin-card__left-section">
+                <!-- 插件图标 -->
+                <div class="plugin-card__avatar-container">
+                  <VAvatar
+                    :size="display.mobile ? 40 : 48"
+                    class="plugin-card__avatar"
+                    variant="elevated"
+                  >
+                    <VImg
+                      ref="imageRef"
+                      :src="iconPath"
+                      @load="imageLoaded"
+                      @error="imageLoadError = true"
                    >
-                      <template #prepend>
-                        <VIcon :icon="item.props.prependIcon" />
+                      <template #placeholder>
+                        <VSkeletonLoader type="avatar" />
                      </template>
-                      <VListItemTitle v-text="item.title" />
-                    </VListItem>
-                  </VList>
-                </VMenu>
-              </IconBtn>
+                    </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="plugin-card__info-section">
+                <!-- 标题行 -->
+                <div class="plugin-card__title-row">
+                  <!-- 启用状态指示器 -->
+                  <VIcon 
+                    :icon="props.plugin?.state ? 'mdi-check-circle' : 'mdi-pause-circle'"
+                    :size="display.mobile ? 14 : 16"
+                    :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">
+                  {{ props.plugin?.plugin_author }}
+                </span>
+              </div>
+
+              <!-- 统计信息 -->
+              <div class="plugin-card__stats-info">
+                <div v-if="props.count" class="plugin-card__download-stats">
+                  <VIcon icon="mdi-download" size="14" />
+                  <span class="plugin-card__stats-text">{{ props.count?.toLocaleString() }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 更多菜单按钮 - 右下角 -->
+            <div class="plugin-card__menu-section" :class="{ 'plugin-card__menu-section--with-update': props.plugin?.has_update }">
+              <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-card__menu-btn-corner"
+                    :class="{ 'plugin-card__menu-btn-corner--visible': hover.isHovering || display.mobile }"
+                  />
+                </template>
+                <VList>
+                  <VListItem
+                    v-for="(item, i) in dropdownItems"
+                    v-show="item.show"
+                    :key="i"
+                    :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>
@@ -468,26 +570,343 @@ watch(
 </template>

 <style lang="scss" scoped>
-.card-cover-blurred::before {
-  position: absolute;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-  background: rgba(29, 39, 59, 48%);
-  content: '';
-  inset: 0;
+.plugin-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);
+  }
+  
+  &__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 {
-  display: flex;
-  align-items: center;
-}
-
-.author-avatar {
-  border-radius: 50%;
-  block-size: 24px;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-  object-fit: cover;
+// 全局网格布局调整
+: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>
--- a/src/components/cards/PluginFolderCard.vue
+++ b/src/components/cards/PluginFolderCard.vue
@@ -0,0 +1,707 @@
+<script lang="ts" setup>
+import { useToast } from 'vue-toast-notification'
+import { useConfirm } from 'vuetify-use-dialog'
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+import api from '@/api'
+
+// 文件夹配置接口
+interface FolderConfig {
+  plugins?: string[]
+  order?: number
+  background?: string
+  icon?: string
+  color?: string
+  gradient?: string
+  showIcon?: boolean
+}
+
+// 输入参数
+const props = defineProps({
+  folderName: String,
+  pluginCount: Number,
+  folderConfig: {
+    type: Object as PropType<FolderConfig>,
+    default: () => ({})
+  },
+  width: String,
+  height: String,
+})
+
+// 定义触发的自定义事件
+const emit = defineEmits(['open', 'delete', 'rename', 'update-config'])
+
+// 多语言
+const { t } = useI18n()
+
+// 响应式显示
+const display = useDisplay()
+
+// 提示框
+const $toast = useToast()
+
+// 确认框
+const createConfirm = useConfirm()
+
+// 菜单显示状态
+const menuVisible = ref(false)
+
+// 重命名对话框
+const renameDialog = ref(false)
+
+// 设置对话框
+const settingDialog = ref(false)
+
+// 新名称
+const newFolderName = ref('')
+
+// 文件夹设置
+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%)',
+  showIcon: true,
+})
+
+// 预设图标选项
+const iconOptions = [
+  'mdi-folder',
+  'mdi-folder-star',
+  'mdi-folder-heart',
+  'mdi-folder-cog',
+  'mdi-folder-music',
+  'mdi-folder-image',
+  'mdi-folder-video',
+  'mdi-folder-download',
+  'mdi-folder-network',
+  'mdi-folder-special',
+]
+
+// 预设颜色选项
+const colorOptions = [
+  '#2196F3', // 蓝色
+  '#4CAF50', // 绿色
+  '#FF9800', // 橙色
+  '#9C27B0', // 紫色
+  '#F44336', // 红色
+  '#607D8B', // 蓝灰色
+  '#795548', // 棕色
+  '#E91E63', // 粉色
+]
+
+// 预设渐变选项
+const gradientOptions = [
+  'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+  'linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.15) 100%)',
+  'linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.15) 100%)',
+  'linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.15) 100%)',
+  'linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.15) 100%)',
+  'linear-gradient(135deg, rgba(96, 125, 139, 0.1) 0%, rgba(96, 125, 139, 0.15) 100%)',
+  'linear-gradient(135deg, rgba(233, 30, 99, 0.1) 0%, rgba(233, 30, 99, 0.15) 100%)',
+  'linear-gradient(135deg, rgba(63, 81, 181, 0.1) 0%, rgba(156, 39, 176, 0.15) 100%)',
+]
+
+// 计算文件夹样式
+const folderStyle = 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')) {
+      style = {
+        ...style,
+        backgroundImage: `url(${bg})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+      }
+    }
+  }
+  
+  return style
+})
+
+// 计算背景渐变
+const backgroundGradient = computed(() => {
+  const config = props.folderConfig || {}
+  const settings = folderSettings.value
+  
+  return config.gradient || settings.gradient || gradientOptions[0]
+})
+
+// 计算图标
+const folderIcon = computed(() => {
+  const config = props.folderConfig || {}
+  const settings = folderSettings.value
+  
+  return config.icon || settings.icon || 'mdi-folder'
+})
+
+// 计算图标颜色
+const iconColor = computed(() => {
+  const config = props.folderConfig || {}
+  const settings = folderSettings.value
+  
+  return config.color || settings.color || '#2196F3'
+})
+
+// 计算是否显示图标
+const shouldShowIcon = computed(() => {
+  const config = props.folderConfig || {}
+  const settings = folderSettings.value
+  
+  return config.showIcon !== undefined ? config.showIcon : (settings.showIcon !== undefined ? settings.showIcon : true)
+})
+
+// 监听props变化，更新本地设置
+watch(() => props.folderConfig, (newConfig) => {
+  if (newConfig) {
+    folderSettings.value = {
+      ...folderSettings.value,
+      ...newConfig,
+    }
+  }
+}, { deep: true, immediate: true })
+
+// 打开文件夹
+function openFolder() {
+  emit('open', props.folderName)
+}
+
+// 重命名文件夹
+function showRenameDialog() {
+  newFolderName.value = props.folderName || ''
+  renameDialog.value = true
+}
+
+// 确认重命名
+async function confirmRename() {
+  if (!newFolderName.value.trim()) {
+    $toast.error('文件夹名称不能为空')
+    return
+  }
+  
+  if (newFolderName.value === props.folderName) {
+    renameDialog.value = false
+    return
+  }
+  
+  try {
+    emit('rename', props.folderName, newFolderName.value)
+    renameDialog.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 删除文件夹
+async function deleteFolder() {
+  const isConfirmed = await createConfirm({
+    title: t('common.confirm'),
+    content: `确定要删除文件夹 "${props.folderName}" 吗？文件夹中的插件将移回主列表。`,
+  })
+
+  if (!isConfirmed) return
+
+  try {
+    emit('delete', props.folderName)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// 显示设置对话框
+function showSettingDialog() {
+  folderSettings.value = {
+    background: props.folderConfig?.background || '',
+    icon: props.folderConfig?.icon || 'mdi-folder',
+    color: props.folderConfig?.color || '#2196F3',
+    gradient: props.folderConfig?.gradient || gradientOptions[0],
+    showIcon: props.folderConfig?.showIcon !== undefined ? props.folderConfig.showIcon : true,
+  }
+  settingDialog.value = true
+}
+
+// 保存设置
+function saveSettings() {
+  const config = {
+    ...props.folderConfig,
+    ...folderSettings.value,
+  }
+  
+  emit('update-config', props.folderName, config)
+  settingDialog.value = false
+  $toast.success('文件夹设置已保存')
+}
+
+// 弹出菜单
+const dropdownItems = ref([
+  {
+    title: '设置外观',
+    value: 0,
+    show: true,
+    props: {
+      prependIcon: 'mdi-palette',
+      click: showSettingDialog,
+    },
+  },
+  {
+    title: '重命名',
+    value: 1,
+    show: true,
+    props: {
+      prependIcon: 'mdi-pencil',
+      click: showRenameDialog,
+    },
+  },
+  {
+    title: '删除文件夹',
+    value: 2,
+    show: true,
+    props: {
+      prependIcon: 'mdi-delete',
+      color: 'error',
+      click: deleteFolder,
+    },
+  },
+])
+</script>
+
+<template>
+  <div>
+    <!-- 文件夹卡片 -->
+    <VHover>
+      <template #default="hover">
+        <VCard
+          v-bind="hover.props"
+          :width="props.width"
+          :height="props.height"
+          @click="openFolder"
+          class="plugin-folder-card cursor-move"
+          :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 
+                  :icon="folderIcon" 
+                  :size="display.mobile ? 56 : 72"
+                  class="plugin-folder-card__folder-icon"
+                  :color="iconColor"
+                />
+              </div>
+
+              <!-- 文件夹信息 -->
+              <div class="plugin-folder-card__info" :class="{ 'plugin-folder-card__info--no-icon': !shouldShowIcon }">
+                <!-- 文件夹名称 -->
+                <h3 class="plugin-folder-card__name">
+                  {{ props.folderName }}
+                </h3>
+                <!-- 插件数量 -->
+                <p class="plugin-folder-card__count">
+                  {{ props.pluginCount }} 个插件
+                </p>
+              </div>
+            </div>
+
+            <!-- 更多菜单按钮 - 右下角 -->
+            <div class="plugin-folder-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-folder-card__menu-btn-corner"
+                    :class="{ 'plugin-folder-card__menu-btn-corner--visible': hover.isHovering || display.mobile }"
+                  />
+                </template>
+                <VList>
+                  <VListItem
+                    v-for="(item, i) in dropdownItems"
+                    v-show="item.show"
+                    :key="i"
+                    :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>
+          </div>
+        </VCard>
+      </template>
+    </VHover>
+
+    <!-- 重命名对话框 -->
+    <VDialog v-if="renameDialog" v-model="renameDialog" max-width="400">
+      <VCard>
+        <VCardTitle>重命名文件夹</VCardTitle>
+        <VCardText>
+          <VTextField
+            v-model="newFolderName"
+            label="文件夹名称"
+            variant="outlined"
+            autofocus
+            @keyup.enter="confirmRename"
+          />
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn @click="renameDialog = false">取消</VBtn>
+          <VBtn color="primary" @click="confirmRename">确认</VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+
+    <!-- 设置对话框 -->
+    <VDialog v-if="settingDialog" v-model="settingDialog" max-width="600">
+      <VCard>
+        <VCardTitle>
+          <VIcon icon="mdi-palette" class="mr-2" />
+          文件夹外观设置
+        </VCardTitle>
+        <VCardText>
+          <VRow>
+            <!-- 显示图标开关 -->
+            <VCol cols="12">
+              <VSwitch
+                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"
+                  :key="icon"
+                  :variant="folderSettings.icon === icon ? 'tonal' : 'text'"
+                  :color="folderSettings.icon === icon ? 'primary' : 'default'"
+                  size="large"
+                  class="ma-1"
+                  @click="folderSettings.icon = icon"
+                >
+                  <VIcon :icon="icon" size="24" />
+                </VBtn>
+              </div>
+            </VCol>
+            
+            <!-- 颜色选择 -->
+            <VCol v-if="folderSettings.showIcon" cols="12" md="6">
+              <VCardSubtitle class="pa-0 mb-2">图标颜色</VCardSubtitle>
+              <div class="color-grid">
+                <VBtn
+                  v-for="color in colorOptions"
+                  :key="color"
+                  :variant="folderSettings.color === color ? 'tonal' : 'text'"
+                  :color="color"
+                  size="large"
+                  class="ma-1 color-btn"
+                  :style="{ backgroundColor: color }"
+                  @click="folderSettings.color = color"
+                >
+                  <VIcon v-if="folderSettings.color === color" icon="mdi-check" color="white" />
+                </VBtn>
+              </div>
+            </VCol>
+            
+            <!-- 渐变背景选择 -->
+            <VCol cols="12">
+              <VCardSubtitle class="pa-0 mb-2">背景渐变</VCardSubtitle>
+              <div class="gradient-grid">
+                <VBtn
+                  v-for="(gradient, index) in gradientOptions"
+                  :key="index"
+                  :variant="folderSettings.gradient === gradient ? 'tonal' : 'text'"
+                  class="ma-1 gradient-btn"
+                  :style="{ background: gradient }"
+                  size="large"
+                  @click="folderSettings.gradient = gradient"
+                >
+                  <VIcon v-if="folderSettings.gradient === gradient" icon="mdi-check" color="white" />
+                </VBtn>
+              </div>
+            </VCol>
+            
+            <!-- 自定义背景图片 -->
+            <VCol cols="12">
+              <VTextField
+                v-model="folderSettings.background"
+                label="自定义背景图片URL（可选）"
+                placeholder="https://example.com/image.jpg"
+                variant="outlined"
+                hint="支持网络图片URL，留空则使用渐变背景"
+                persistent-hint
+              />
+            </VCol>
+          </VRow>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn @click="settingDialog = false">取消</VBtn>
+          <VBtn color="primary" @click="saveSettings">保存</VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.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);
+  }
+  
+  &__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+  
+  &__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  
+  &__content {
+    position: relative;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    padding-bottom: 12px;
+    
+    .plugin-folder-card--mobile & {
+      padding: 12px;
+      padding-bottom: 10px;
+    }
+  }
+  
+  &__body {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    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;
+    font-weight: 600;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
+    max-width: none;
+    color: white;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    
+    .plugin-folder-card--mobile & {
+      font-size: 1.0rem;
+    }
+    
+    .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);
+    }
+  }
+}
+
+// 设置对话框样式
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.color-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 8px;
+}
+
+.gradient-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.color-btn {
+  min-width: 60px !important;
+  height: 60px !important;
+  border-radius: 8px !important;
+}
+
+.gradient-btn {
+  min-width: 120px !important;
+  height: 60px !important;
+  border-radius: 8px !important;
+}
+</style> 
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -13,6 +13,7 @@ import { getPluginTabs } from '@/router/i18n-menu'
 import PluginMarketSettingDialog from '@/components/dialog/PluginMarketSettingDialog.vue'
 import { useDynamicButton } from '@/composables/useDynamicButton'
 import { useI18n } from 'vue-i18n'
+import PluginFolderCard from '@/components/cards/PluginFolderCard.vue'

 // 国际化
 const { t } = useI18n()
@@ -100,7 +101,7 @@ const keyword = ref('')
 const pluginIconLoaded = ref<{ [key: string]: boolean }>({})

 // 每一个插件的动作标识
-const pluginActions = ref<{ [key: string]: boolean }>({})
+const pluginActions: Ref<{ [key: string]: boolean }> = ref({})

 // 提示框
 const $toast = useToast()
@@ -152,6 +153,93 @@ const labelFilterOptions = ref<string[]>([])
 // 插件库过滤项
 const repoFilterOptions = ref<string[]>([])

+// 插件文件夹配置
+const pluginFolders: Ref<{ [key: string]: any }> = ref({})
+
+// 文件夹排序
+const folderOrder = ref<string[]>([])
+
+// 当前查看的文件夹
+const currentFolder = ref('')
+
+// 新建文件夹对话框
+const newFolderDialog = ref(false)
+
+// 新文件夹名称
+const newFolderName = ref('')
+
+// 显示的插件列表（考虑文件夹筛选）
+const displayedPlugins = computed(() => {
+  if (!currentFolder.value) {
+    // 主列表：显示未归类的插件
+    const folderedPluginIds = new Set()
+    Object.values(pluginFolders.value).forEach(folderData => {
+      const plugins = Array.isArray(folderData) ? folderData : (folderData.plugins || [])
+      plugins.forEach(id => folderedPluginIds.add(id))
+    })
+    return filteredDataList.value.filter(plugin => !folderedPluginIds.has(plugin.id))
+  } else {
+    // 文件夹内：只显示文件夹中的插件
+    const folderData = pluginFolders.value[currentFolder.value]
+    const folderPluginIds = Array.isArray(folderData) ? folderData : (folderData?.plugins || [])
+    return filteredDataList.value.filter(plugin => folderPluginIds.includes(plugin.id))
+  }
+})
+
+// 可拖拽的插件列表（主列表用）
+const draggableMainPlugins = ref<Plugin[]>([])
+
+// 可拖拽的插件列表（文件夹内用）
+const draggableFolderPlugins = ref<Plugin[]>([])
+
+// 是否正在拖拽排序中
+const isDraggingSortMode = ref(false)
+
+// 监听displayedPlugins变化，更新可拖拽列表（避免拖拽时的循环更新）
+watch(displayedPlugins, (newPlugins) => {
+  if (isDraggingSortMode.value) return // 拖拽排序时跳过更新
+  
+  if (!currentFolder.value) {
+    draggableMainPlugins.value = [...newPlugins]
+  } else {
+    draggableFolderPlugins.value = [...newPlugins]
+  }
+}, { immediate: true })
+
+// 监听文件夹切换，更新可拖拽列表
+watch(currentFolder, () => {
+  if (!currentFolder.value) {
+    draggableMainPlugins.value = [...displayedPlugins.value]
+  } else {
+    draggableFolderPlugins.value = [...displayedPlugins.value]
+  }
+})
+
+// 显示的文件夹列表（按排序显示）
+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 config = Array.isArray(folderData) ? {} : folderData
+    
+    return {
+      name: folderName,
+      pluginCount: plugins.length,
+      config: config
+    }
+  })
+})
+
 // 加载插件顺序
 async function loadPluginOrderConfig() {
  // 顺序配置
@@ -184,6 +272,9 @@ function sortPluginOrder() {

 // 保存顺序设置
 async function savePluginOrder() {
+  // 只在主列表中保存顺序，文件夹内不保存全局顺序
+  if (currentFolder.value) return
+  
  // 顺序配置
  const orderObj = filteredDataList.value.map(item => ({ id: item.id || '' }))
  orderConfig.value = orderObj
@@ -198,6 +289,74 @@ async function savePluginOrder() {
  }
 }

+// 保存主列表插件顺序
+async function saveMainPluginOrder() {
+  try {
+    // 更新主列表数据
+    const newOrderedList = [...draggableMainPlugins.value]
+    
+    // 添加文件夹中的插件到末尾
+    Object.values(pluginFolders.value).forEach(folderData => {
+      const plugins = Array.isArray(folderData) ? folderData : (folderData.plugins || [])
+      plugins.forEach(id => {
+        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
+    const orderString = JSON.stringify(orderObj)
+    localStorage.setItem('MP_PLUGIN_ORDER', orderString)
+
+    // 保存到服务端
+    await api.post('/user/config/PluginOrder', orderObj)
+    
+    console.log('主列表排序已保存')
+  } catch (error) {
+    console.error('保存主列表排序失败:', error)
+  } finally {
+    // 清除拖拽标志
+    isDraggingSortMode.value = false
+  }
+}
+
+// 保存文件夹内插件顺序
+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
+      } else {
+        // 新格式，更新plugins字段
+        folderData.plugins = newPluginIds
+      }
+      
+      // 保存到后端
+      await savePluginFolders()
+      
+      console.log(`文件夹 ${currentFolder.value} 内排序已保存`)
+    }
+  } catch (error) {
+    console.error('保存文件夹内排序失败:', error)
+  } finally {
+    // 清除拖拽标志
+    isDraggingSortMode.value = false
+  }
+}
+
 // 初始化过滤选项
 function initOptions(item: Plugin) {
  const optionValue = (options: Array<string>, value: string | undefined) => {
@@ -449,10 +608,11 @@ function loadMarketMore({ done }: { done: any }) {
  done('ok')
 }

-// 加载时获取数据
+// 组件挂载后
 onMounted(async () => {
  await loadPluginOrderConfig()
-  refreshData()
+  await loadPluginFolders() // 加载文件夹配置
+  await refreshData()
  getPluginStatistics()
  if (activeTab.value != 'market' && pluginId.value) {
    // 找到这个插件
@@ -470,6 +630,430 @@ useDynamicButton({
    SearchDialog.value = true
  },
 })
+
+// 获取插件文件夹配置
+async function loadPluginFolders() {
+  try {
+    const response = await api.get('plugin/folders')
+    const foldersData = response && typeof response === 'object' ? response : {}
+    
+    // 处理旧格式兼容性（array）和新格式（object with config）
+    const processedFolders = {}
+    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',
+          color: '#2196F3',
+          gradient: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+          background: '',
+          showIcon: true,
+        }
+      } else if (folderData && typeof folderData === 'object') {
+        // 新格式：包含配置的对象
+        processedFolders[folderName] = {
+          plugins: folderData.plugins || [],
+          order: folderData.order ?? order.length,
+          icon: folderData.icon || 'mdi-folder',
+          color: folderData.color || '#2196F3',
+          gradient: folderData.gradient || 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+          background: folderData.background || '',
+          showIcon: folderData.showIcon !== undefined ? folderData.showIcon : true,
+        }
+      }
+      
+      order.push(folderName)
+    })
+    
+    pluginFolders.value = processedFolders
+    
+    // 设置文件夹排序
+    folderOrder.value = Object.keys(processedFolders)
+      .sort((a, b) => (processedFolders[a].order || 0) - (processedFolders[b].order || 0))
+    
+    console.log('加载文件夹配置:', pluginFolders.value)
+    console.log('文件夹排序:', folderOrder.value)
+  } catch (error) {
+    console.error('加载插件文件夹配置失败:', error)
+    pluginFolders.value = {}
+    folderOrder.value = []
+  }
+}
+
+// 保存插件文件夹配置
+async function savePluginFolders() {
+  try {
+    // 更新排序信息
+    const foldersToSave = {}
+    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) {
+    console.error('保存插件文件夹配置失败:', error)
+    throw error
+  }
+}
+
+// 创建新文件夹
+async function createNewFolder() {
+  if (!newFolderName.value.trim()) {
+    $toast.error('文件夹名称不能为空')
+    return
+  }
+  
+  if (pluginFolders.value[newFolderName.value]) {
+    $toast.error('文件夹已存在')
+    return
+  }
+  
+  try {
+    // 直接在本地添加文件夹
+    pluginFolders.value[newFolderName.value] = {
+      plugins: [],
+      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%)',
+      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)
+    // 回滚本地更改
+    delete pluginFolders.value[newFolderName.value]
+    folderOrder.value = folderOrder.value.filter(name => name !== newFolderName.value)
+    $toast.error('创建文件夹失败')
+  }
+}
+
+// 打开文件夹
+function openFolder(folderName: string) {
+  currentFolder.value = folderName
+}
+
+// 返回主列表
+function backToMain() {
+  currentFolder.value = ''
+}
+
+// 重命名文件夹
+async function renameFolder(oldName: string, newName: string) {
+  if (pluginFolders.value[newName]) {
+    $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)
+    // 回滚本地更改
+    pluginFolders.value[oldName] = pluginFolders.value[newName] || { plugins: [] }
+    delete pluginFolders.value[newName]
+    const orderIndex = folderOrder.value.indexOf(newName)
+    if (orderIndex >= 0) {
+      folderOrder.value[orderIndex] = oldName
+    }
+    if (currentFolder.value === newName) {
+      currentFolder.value = oldName
+    }
+    $toast.error('重命名文件夹失败')
+  }
+}
+
+// 删除文件夹
+async function deleteFolder(folderName: string) {
+  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)
+    // 回滚本地更改
+    pluginFolders.value[folderName] = deletedFolder
+    if (!folderOrder.value.includes(folderName)) {
+      folderOrder.value.push(folderName)
+    }
+    $toast.error('删除文件夹失败')
+  }
+}
+
+// 显示新建文件夹对话框
+function showNewFolderDialog() {
+  newFolderName.value = ''
+  newFolderDialog.value = true
+}
+
+// 移出文件夹
+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 index = plugins.indexOf(pluginId)
+    if (index > -1) {
+      plugins.splice(index, 1)
+      if (!Array.isArray(folderData)) {
+        folderData.plugins = plugins
+      }
+      
+      // 保存配置
+      await savePluginFolders()
+      
+      $toast.success('插件已移出文件夹')
+    }
+  } catch (error) {
+    console.error('移出文件夹失败:', error)
+    $toast.error('操作失败')
+  }
+}
+
+// 更新文件夹配置
+async function updateFolderConfig(folderName: string, config: any) {
+  try {
+    // 更新本地配置
+    if (pluginFolders.value[folderName]) {
+      pluginFolders.value[folderName] = {
+        ...pluginFolders.value[folderName],
+        ...config,
+      }
+      
+      // 保存到后端
+      await savePluginFolders()
+      
+      console.log('文件夹配置已更新:', folderName, config)
+    }
+  } catch (error) {
+    console.error('更新文件夹配置失败:', error)
+    $toast.error('保存文件夹配置失败')
+  }
+}
+
+// 文件夹拖拽排序结束事件
+function onFolderSortEnd() {
+  // 保存新的文件夹顺序
+  savePluginFolders()
+  console.log('文件夹排序已更新:', folderOrder.value)
+}
+
+// 当前拖拽的插件ID
+const currentDraggedPluginId = ref('')
+
+// 处理拖拽到文件夹的事件
+function handleDragOver(event: DragEvent) {
+  event.preventDefault()
+  event.dataTransfer!.dropEffect = 'move'
+  const target = event.currentTarget as HTMLElement
+  target.classList.add('drag-over')
+}
+
+function handleDragEnter(event: DragEvent) {
+  event.preventDefault()
+}
+
+function handleDragLeave(event: DragEvent) {
+  event.preventDefault()
+  const target = event.currentTarget as HTMLElement
+  target.classList.remove('drag-over')
+}
+
+async function handleDropToFolder(event: DragEvent, folderName: string) {
+  event.preventDefault()
+  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 || [])
+    
+    // 检查插件是否已在此文件夹中
+    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 index = plugins.indexOf(pluginId)
+        if (index > -1) {
+          plugins.splice(index, 1)
+          if (!Array.isArray(folderData)) {
+            folderData.plugins = plugins
+          }
+        }
+      }
+    })
+    
+    // 从主列表中移除（如果存在）
+    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',
+        color: '#2196F3',
+        gradient: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.15) 100%)',
+        background: '',
+        showIcon: true,
+      }
+    }
+    
+    const targetFolder = pluginFolders.value[folderName]
+    if (Array.isArray(targetFolder)) {
+      targetFolder.push(pluginId)
+    } else {
+      targetFolder.plugins = targetFolder.plugins || []
+      targetFolder.plugins.push(pluginId)
+    }
+    
+    // 保存配置
+    await savePluginFolders()
+    
+    $toast.success(`插件已移动到文件夹 "${folderName}"`)
+  } catch (error) {
+    console.error('拖拽到文件夹失败:', error)
+    $toast.error('操作失败')
+  }
+}
+
+// 拖拽开始事件（修复版本）
+function onDragStartPlugin(evt: any) {
+  // 设置拖拽模式标志
+  isDraggingSortMode.value = true
+  
+  // 从oldIndex获取插件ID
+  const oldIndex = evt.oldIndex
+  if (oldIndex !== undefined) {
+    const plugin = currentFolder.value 
+      ? 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')
+  }
+}
+
+// 拖拽结束事件
+function onDragEndPlugin(evt: any) {
+  currentDraggedPluginId.value = ''
+  // 清除拖拽标志
+  isDraggingSortMode.value = false
+}
 </script>

 <template>
@@ -606,6 +1190,33 @@ useDynamicButton({
          class="settings-icon-button"
          @click="MarketSettingDialog = true"
        />
+        <VBtn
+          v-if="activeTab === 'installed' && !currentFolder"
+          icon="mdi-folder-plus"
+          variant="text"
+          color="gray"
+          size="default"
+          class="settings-icon-button"
+          @click="showNewFolderDialog"
+        />
+        <VBtn
+          v-if="activeTab === 'installed' && currentFolder"
+          icon="mdi-arrow-left"
+          variant="text"
+          color="gray"
+          size="default"
+          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>

@@ -616,28 +1227,114 @@ useDynamicButton({
          <div>
            <VPageContentTitle v-if="installedFilter" :title="t('plugin.filter', { name: installedFilter })" />
            <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-            <draggable
-              v-if="filteredDataList.length > 0"
-              v-model="filteredDataList"
-              @end="savePluginOrder"
-              handle=".cursor-move"
-              item-key="id"
-              tag="div"
-              :component-data="{ class: 'grid gap-4 grid-plugin-card' }"
+            
+            <!-- 文件夹和插件网格 -->
+            <div 
+              v-if="displayedFolders.length > 0 || displayedPlugins.length > 0" 
+              class="grid gap-4 grid-plugin-card"
            >
-              <template #item="{ element }">
-                <PluginCard
-                  :count="PluginStatistics[element.id || '0']"
-                  :plugin="element"
-                  :action="pluginActions[element.id || '0']"
-                  @remove="refreshData"
-                  @save="refreshData"
-                  @action-done="pluginActions[element.id || '0'] = false"
-                />
+              <!-- 文件夹卡片 - 使用draggable进行排序 -->
+              <draggable
+                v-if="displayedFolders.length > 0"
+                v-model="folderOrder"
+                @end="onFolderSortEnd"
+                handle=".cursor-move"
+                item-key="name"
+                tag="div"
+                :component-data="{ style: 'display: contents;' }"
+                :disabled="currentFolder !== ''"
+                group="folders"
+              >
+                <template #item="{ element: folderName }">
+                  <div
+                    v-if="displayedFolders.find(f => f.name === folderName)"
+                    class="drop-zone"
+                    @dragover="handleDragOver($event)"
+                    @dragenter="handleDragEnter($event)"
+                    @dragleave="handleDragLeave($event)"
+                    @drop="handleDropToFolder($event, folderName)"
+                  >
+                    <PluginFolderCard
+                      :folder-name="folderName"
+                      :plugin-count="displayedFolders.find(f => f.name === folderName)?.pluginCount || 0"
+                      :folder-config="displayedFolders.find(f => f.name === folderName)?.config || {}"
+                      @open="openFolder"
+                      @delete="deleteFolder"
+                      @rename="renameFolder"
+                      @update-config="updateFolderConfig"
+                    />
+                  </div>
+                </template>
+              </draggable>
+              
+              <!-- 插件卡片 -->
+              <template v-if="!currentFolder">
+                <!-- 主列表：使用draggable进行排序 -->
+                <draggable
+                  v-model="draggableMainPlugins"
+                  @end="saveMainPluginOrder"
+                  @start="onDragStartPlugin"
+                  @sort="onDragEndPlugin"
+                  handle=".cursor-move"
+                  item-key="id"
+                  tag="div"
+                  :component-data="{ style: 'display: contents;' }"
+                  group="plugins"
+                >
+                  <template #item="{ element }">
+                    <div class="plugin-item-wrapper" :data-plugin-id="element.id">
+                      <PluginCard
+                        :count="PluginStatistics[element.id || '0']"
+                        :plugin="element"
+                        :action="pluginActions[element.id || '0']"
+                        @remove="refreshData"
+                        @save="refreshData"
+                        @action-done="pluginActions[element.id || '0'] = false"
+                      />
+                    </div>
+                  </template>
+                </draggable>
              </template>
-            </draggable>
+              
+              <template v-else>
+                <!-- 文件夹内：使用draggable排序 + 移出按钮 -->
+                <draggable
+                  v-model="draggableFolderPlugins"
+                  @end="saveFolderPluginOrder"
+                  @start="onDragStartPlugin"
+                  handle=".cursor-move"
+                  item-key="id"
+                  tag="div"
+                  :component-data="{ style: 'display: contents;' }"
+                  group="plugins"
+                >
+                  <template #item="{ element }">
+                    <div class="plugin-item-wrapper" :data-plugin-id="element.id">
+                      <PluginCard
+                        :count="PluginStatistics[element.id || '0']"
+                        :plugin="element"
+                        :action="pluginActions[element.id || '0']"
+                        @remove="refreshData"
+                        @save="refreshData"
+                        @action-done="pluginActions[element.id || '0'] = false"
+                      />
+                      <!-- 移出文件夹按钮 -->
+                      <VBtn
+                        icon="mdi-folder-remove"
+                        variant="text"
+                        color="warning"
+                        size="small"
+                        class="remove-from-folder-btn"
+                        @click="removeFromFolder(element.id || '')"
+                      />
+                    </div>
+                  </template>
+                </draggable>
+              </template>
+            </div>
+            
            <NoDataFound
-              v-if="filteredDataList.length === 0 && isRefreshed"
+              v-if="displayedFolders.length === 0 && displayedPlugins.length === 0 && isRefreshed"
              error-code="404"
              :error-title="t('common.noData')"
              :error-description="
@@ -777,4 +1474,75 @@ useDynamicButton({
      </VCardText>
    </VCard>
  </VDialog>
+  
+  <!-- 新建文件夹对话框 -->
+  <VDialog v-if="newFolderDialog" v-model="newFolderDialog" max-width="400">
+    <VCard>
+      <VCardTitle>新建文件夹</VCardTitle>
+      <VCardText>
+        <VTextField
+          v-model="newFolderName"
+          label="文件夹名称"
+          variant="outlined"
+          @keyup.enter="createNewFolder"
+        />
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn @click="newFolderDialog = false">取消</VBtn>
+        <VBtn color="primary" @click="createNewFolder">创建</VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
 </template>
+
+<style lang="scss" scoped>
+// 拖拽相关样式
+.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-radius: 16px;
+  }
+}
+
+.plugin-item-wrapper {
+  position: relative;
+  
+  .remove-from-folder-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 10;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(4px);
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  
+  &:hover .remove-from-folder-btn {
+    opacity: 1;
+  }
+}
+
+// 网格布局
+.grid-plugin-card {
+  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;
+  }
+}
+</style>