diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
index 6f6f319576..52a052cfa1 100644
--- a/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
+++ b/dashboard/src/assets/mdi-subset/materialdesignicons-subset.css
@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 230 icons */
+/* Auto-generated MDI subset – 231 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -692,6 +692,14 @@
   content: "\F03F6";
 }
 
+.mdi-pin::before {
+  content: "\F0403";
+}
+
+.mdi-pin-outline::before {
+  content: "\F0931";
+}
+
 .mdi-play::before {
   content: "\F040A";
 }
@@ -720,10 +728,6 @@
   content: "\F0A66";
 }
 
-.mdi-qrcode::before {
-  content: "\F0432";
-}
-
 .mdi-refresh::before {
   content: "\F0450";
 }
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff
index 47daa82b65..85c2ed9fdf 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff differ
diff --git a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2
index cbfdec3ced..376e47ce72 100644
Binary files a/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 and b/dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2 differ
diff --git a/dashboard/src/components/extension/PinnedPluginItem.vue b/dashboard/src/components/extension/PinnedPluginItem.vue
new file mode 100644
index 0000000000..8fbb7dfd0b
--- /dev/null
+++ b/dashboard/src/components/extension/PinnedPluginItem.vue
@@ -0,0 +1,183 @@
+<script setup>
+import { computed } from 'vue';
+import defaultPluginIcon from "@/assets/images/plugin_icon.png";
+
+const props = defineProps({
+  plugin: {
+    type: Object,
+    required: true
+  },
+  isPinned: {
+    type: Boolean,
+    default: false
+  },
+  tm: {
+    type: Function,
+    required: true
+  },
+  dragged: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits([
+  'toggle-pin',
+  'view-readme',
+  'open-config',
+  'reload',
+  'update',
+  'show-info',
+  'uninstall',
+  'dragstart',
+  'dragover',
+  'dragenter',
+  'dragend',
+  'drop'
+]);
+
+const handlePinnedImgError = (e) => {
+  e.target.src = defaultPluginIcon;
+};
+</script>
+
+<template>
+  <div
+    class="pinned-item pinned-card-wrapper"
+    :class="{ 'is-dragging': dragged }"
+    style="position:relative;"
+    draggable="true"
+    @dragstart="$emit('dragstart')"
+    @dragover.prevent="$emit('dragover', $event)"
+    @dragenter.prevent="$emit('dragenter', $event)"
+    @dragend="$emit('dragend', $event)"
+    @drop="$emit('drop', $event)"
+  >
+    <v-menu offset-y>
+      <template #activator="{ props: menuProps }">
+        <v-avatar
+          v-bind="menuProps"
+          size="72"
+          class="pinned-avatar activator-avatar"
+          :title="plugin.display_name || plugin.name"
+        >
+          <img
+            :src="(typeof plugin.logo === 'string' && plugin.logo.trim()) ? plugin.logo : defaultPluginIcon"
+            :alt="plugin.name"
+            @error="handlePinnedImgError"
+          />
+        </v-avatar>
+      </template>
+
+      <v-card>
+        <v-card-text class="d-flex" style="gap:8px; padding:12px;">
+          <v-tooltip location="top" :text="tm('buttons.viewDocs')">
+            <template #activator="{ props: a }">
+              <v-btn v-bind="a" icon size="small" variant="tonal" color="info" @click.stop="$emit('view-readme', plugin)">
+                <v-icon>mdi-book-open-page-variant</v-icon>
+              </v-btn>
+            </template>
+          </v-tooltip>
+
+          <v-tooltip location="top" :text="tm('card.actions.pluginConfig')">
+            <template #activator="{ props: a }">
+              <v-btn v-bind="a" icon size="small" variant="tonal" color="primary" @click.stop="$emit('open-config', plugin.name)">
+                <v-icon>mdi-cog</v-icon>
+              </v-btn>
+            </template>
+          </v-tooltip>
+
+          <v-tooltip location="top" :text="tm('card.actions.reloadPlugin')">
+            <template #activator="{ props: a }">
+              <v-btn v-bind="a" icon size="small" variant="tonal" color="primary" @click.stop="$emit('reload', plugin.name)">
+                <v-icon>mdi-refresh</v-icon>
+              </v-btn>
+            </template>
+          </v-tooltip>
+
+          <v-tooltip location="top" :text="tm('buttons.update')">
+            <template #activator="{ props: a }">
+              <v-btn v-bind="a" icon size="small" variant="tonal" color="warning" @click.stop="$emit('update', plugin.name)">
+                <v-icon>mdi-update</v-icon>
+              </v-btn>
+            </template>
+          </v-tooltip>
+
+          <v-tooltip location="top" :text="tm('buttons.viewInfo')">
+            <template #activator="{ props: a }">
+              <v-btn v-bind="a" icon size="small" variant="tonal" color="secondary" @click.stop="$emit('show-info', plugin)">
+                <v-icon>mdi-information</v-icon>
+              </v-btn>
+            </template>
+          </v-tooltip>
+
+          <v-tooltip location="top" :text="tm('buttons.uninstall')">
+            <template #activator="{ props: a }">
+              <v-btn v-bind="a" icon size="small" variant="tonal" color="error" @click.stop="$emit('uninstall', plugin.name)" v-if="!plugin.reserved">
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+            </template>
+          </v-tooltip>
+        </v-card-text>
+      </v-card>
+    </v-menu>
+
+    <v-btn
+      icon
+      size="small"
+      class="pinned-pin-btn"
+      :color="isPinned ? 'primary' : 'secondary'"
+      @click.stop="$emit('toggle-pin', plugin)"
+      :title="isPinned ? tm('buttons.unpin') : tm('buttons.pin')"
+      style="position:absolute; top:6px; right:6px; min-width:22px; width:22px; height:22px;"
+    >
+      <v-icon size="14">{{ isPinned ? 'mdi-pin' : 'mdi-pin-outline' }}</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<style scoped>
+.pinned-avatar {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 12px;
+}
+
+.pinned-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.pinned-card-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 72px;
+  height: 72px;
+}
+
+.pinned-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.is-dragging {
+  opacity: 0.5;
+  transform: scale(0.95);
+  cursor: grabbing;
+}
+
+[draggable="true"] {
+  cursor: grab;
+}
+
+[draggable="true"]:active {
+  cursor: grabbing;
+}
+</style>
diff --git a/dashboard/src/components/folder/BaseFolderCard.vue b/dashboard/src/components/folder/BaseFolderCard.vue
index eddda9b620..dfab57224a 100644
--- a/dashboard/src/components/folder/BaseFolderCard.vue
+++ b/dashboard/src/components/folder/BaseFolderCard.vue
@@ -18,26 +18,26 @@
                         <template v-slot:prepend>
                             <v-icon size="small">mdi-folder-open</v-icon>
                         </template>
-                        <v-list-item-title>{{ labels.open }}</v-list-item-title>
+                        <v-list-item-title>{{ mergedLabels.open }}</v-list-item-title>
                     </v-list-item>
                     <v-list-item @click.stop="$emit('rename')">
                         <template v-slot:prepend>
                             <v-icon size="small">mdi-pencil</v-icon>
                         </template>
-                        <v-list-item-title>{{ labels.rename }}</v-list-item-title>
+                        <v-list-item-title>{{ mergedLabels.rename }}</v-list-item-title>
                     </v-list-item>
                     <v-list-item @click.stop="$emit('move')">
                         <template v-slot:prepend>
                             <v-icon size="small">mdi-folder-move</v-icon>
                         </template>
-                        <v-list-item-title>{{ labels.moveTo }}</v-list-item-title>
+                        <v-list-item-title>{{ mergedLabels.moveTo }}</v-list-item-title>
                     </v-list-item>
                     <v-divider class="my-1" />
                     <v-list-item @click.stop="$emit('delete')" class="text-error">
                         <template v-slot:prepend>
                             <v-icon size="small" color="error">mdi-delete</v-icon>
                         </template>
-                        <v-list-item-title>{{ labels.delete }}</v-list-item-title>
+                        <v-list-item-title>{{ mergedLabels.delete }}</v-list-item-title>
                     </v-list-item>
                 </v-list>
             </v-menu>
diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index c324545785..1e37314fdf 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, inject, watch } from "vue";
+import { ref, computed, inject, watch, useAttrs } from "vue";
 import { useCustomizerStore } from "@/stores/customizer";
 import { useModuleI18n } from "@/i18n/composables";
 import { getPlatformDisplayName, getPlatformIcon } from "@/utils/platformUtils";
@@ -13,6 +13,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  pinned: {
+    type: Boolean,
+    default: false,
+  },
   marketMode: {
     type: Boolean,
     default: false,
@@ -31,6 +35,7 @@ const emit = defineEmits([
   "install",
   "uninstall",
   "toggle-activation",
+  "toggle-pin",
   "view-handlers",
   "view-readme",
   "view-changelog",
@@ -39,6 +44,8 @@ const emit = defineEmits([
 const reveal = ref(false);
 const showUninstallDialog = ref(false);
 
+const attrs = useAttrs();
+
 // 国际化
 const { tm } = useModuleI18n("features/extension");
 
@@ -114,6 +121,11 @@ const toggleActivation = () => {
   emit("toggle-activation", props.extension);
 };
 
+const togglePin = (e?: Event) => {
+  if (e) e.stopPropagation();
+  emit("toggle-pin", props.extension);
+};
+
 const viewHandlers = () => {
   emit("view-handlers", props.extension);
 };
@@ -130,6 +142,7 @@ const viewChangelog = () => {
 
 <template>
   <v-card
+    v-bind="attrs"
     class="mx-auto d-flex flex-column h-100"
     elevation="0"
     height="100%"
@@ -203,16 +216,34 @@ const viewChangelog = () => {
             <template v-if="!marketMode">
               <v-tooltip location="left">
                 <template v-slot:activator="{ props: tooltipProps }">
-                  <div v-bind="tooltipProps" class="extension-switch-wrap" @click.stop>
-                    <v-switch
-                      :model-value="extension.activated"
-                      color="success"
-                      density="compact"
-                      hide-details
-                      inset
-                      @update:model-value="toggleActivation"
-                    ></v-switch>
-                  </div>
+                          <div class="extension-switch-wrap" @click.stop>
+                            <div v-bind="tooltipProps" style="display:inline-flex; align-items:center;">
+                              <v-switch
+                                :model-value="extension.activated"
+                                color="success"
+                                density="compact"
+                                hide-details
+                                inset
+                                @update:model-value="toggleActivation"
+                              ></v-switch>
+                            </div>
+
+                            <v-tooltip location="top" :text="pinned ? tm('buttons.unpin') : tm('buttons.pin')">
+                              <template #activator="{ props: pinProps }">
+                                <v-btn
+                                  v-bind="pinProps"
+                                  icon
+                                  size="small"
+                                  variant="tonal"
+                                  :color="pinned ? 'primary' : 'secondary'"
+                                  class="ml-2"
+                                  @click.stop="togglePin"
+                                >
+                                  <v-icon size="18">{{ pinned ? 'mdi-pin' : 'mdi-pin-outline' }}</v-icon>
+                                </v-btn>
+                              </template>
+                            </v-tooltip>
+                          </div>
                 </template>
                 <span>{{
                   extension.activated ? tm("buttons.disable") : tm("buttons.enable")
diff --git a/dashboard/src/i18n/locales/zh-CN/features/extension.json b/dashboard/src/i18n/locales/zh-CN/features/extension.json
index b0f52d65b6..6f38591f45 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/extension.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/extension.json
@@ -9,7 +9,8 @@
     "handlersOperation": "管理行为"
   },
   "titles": {
-    "installedAstrBotPlugins": "已安装的 AstrBot 插件"
+    "installedAstrBotPlugins": "已安装的 AstrBot 插件",
+    "pinnedPlugins": "置顶插件"
   },
   "failedPlugins": {
     "title": "加载失败插件（{count}）",
@@ -53,6 +54,8 @@
     "refresh": "刷新",
     "updateAll": "更新全部插件",
     "deleteSource": "删除源",
+    "pin": "置顶",
+    "unpin": "取消置顶",
     "reshuffle": "随机一发"
   },
   "status": {
diff --git a/dashboard/src/views/extension/InstalledPluginsTab.vue b/dashboard/src/views/extension/InstalledPluginsTab.vue
index 82d0d75e5c..1079b4823e 100644
--- a/dashboard/src/views/extension/InstalledPluginsTab.vue
+++ b/dashboard/src/views/extension/InstalledPluginsTab.vue
@@ -1,9 +1,11 @@
 <script setup>
 import PluginSortControl from "@/components/extension/PluginSortControl.vue";
+import PinnedPluginItem from "@/components/extension/PinnedPluginItem.vue";
 import ExtensionCard from "@/components/shared/ExtensionCard.vue";
 import StyledMenu from "@/components/shared/StyledMenu.vue";
 import defaultPluginIcon from "@/assets/images/plugin_icon.png";
 import { normalizeTextInput } from "@/utils/inputValue";
+import { ref, computed, watch } from "vue";
 
 const props = defineProps({
   state: {
@@ -155,6 +157,108 @@ const {
   handleLocaleChange,
   searchDebounceTimer,
 } = props.state;
+
+// 置顶插件（保存在 localStorage）
+const PINNED_KEY = "astrbot.pinnedExtensions";
+const pinnedNames = ref([]);
+
+const loadPinned = () => {
+  try {
+    const raw = localStorage.getItem(PINNED_KEY);
+    pinnedNames.value = raw ? JSON.parse(raw) : [];
+  } catch (e) {
+    pinnedNames.value = [];
+  }
+};
+
+const savePinned = () => {
+  try {
+    localStorage.setItem(PINNED_KEY, JSON.stringify(pinnedNames.value || []));
+  } catch (e) {
+    // ignore
+  }
+};
+
+loadPinned();
+
+watch(pinnedNames, () => savePinned(), { deep: true });
+
+const isPinned = (name) => {
+  return pinnedNames.value.includes(name);
+};
+
+const togglePin = (extension) => {
+  const name = extension?.name;
+  if (!name) return;
+  const idx = pinnedNames.value.indexOf(name);
+  if (idx === -1) pinnedNames.value.push(name);
+  else pinnedNames.value.splice(idx, 1);
+};
+
+const handlePinnedImgError = (e) => {
+  e.target.src = defaultPluginIcon;
+};
+
+// --- 拖拽功能实现 ---
+const draggedIndex = ref(-1);
+let lastSwapTime = 0;
+
+const onDragStart = (index) => {
+  draggedIndex.value = index;
+};
+
+const onDragOver = (e) => {
+  e.preventDefault(); // 必须调用，否则不会触发 drop
+};
+
+const onDragEnter = (e, index) => {
+  e.preventDefault();
+  
+  const now = Date.now();
+  if (now - lastSwapTime < 100) return; // 100ms 冷却，防止快速抖动
+
+  if (draggedIndex.value === -1 || draggedIndex.value === index) {
+    return;
+  }
+
+  const newList = [...pinnedNames.value];
+  const item = newList.splice(draggedIndex.value, 1)[0];
+  newList.splice(index, 0, item);
+  
+  pinnedNames.value = newList;
+  draggedIndex.value = index; 
+  lastSwapTime = now;
+};
+
+const onDrop = () => {
+  draggedIndex.value = -1;
+};
+
+const onDragEnd = () => {
+  draggedIndex.value = -1;
+};
+// ----------------
+
+// 映射 name -> plugin 对象（优先从 sortedPlugins 找）
+const pinnedPlugins = computed(() => {
+  if (!Array.isArray(pinnedNames.value)) return [];
+
+  const installedAll = Array.isArray(extension_data?.data) ? extension_data.data : [];
+  const all = Array.isArray(sortedPlugins?.value) ? sortedPlugins.value : [];
+  const filtered = Array.isArray(filteredPlugins?.value) ? filteredPlugins.value : [];
+  const market = Array.isArray(pluginMarketData?.value) ? pluginMarketData.value : [];
+
+  const findByName = (name) => {
+    return (
+      installedAll.find((p) => p.name === name) ||
+      all.find((p) => p.name === name) ||
+      filtered.find((p) => p.name === name) ||
+      market.find((p) => p.name === name)
+    );
+  };
+
+  return pinnedNames.value.map((name) => findByName(name)).filter(Boolean);
+});
 </script>
 
 <template>
@@ -255,6 +359,54 @@ const {
               </v-col>
             </v-row>
 
+            <!-- 置顶插件列表 -->
+            <v-row class="mb-4">
+              <v-col cols="12">
+                <v-card class="rounded-lg overflow-hidden elevation-0" variant="flat">
+                  <v-card-text class="pa-4">
+                    <div class="d-flex align-center justify-space-between">
+                      <h3 class="text-h6 mb-0">{{ tm('titles.pinnedPlugins') }}</h3>
+                    </div>
+
+                    <v-row class="mt-3 relative" dense align="center" style="gap:12px">
+                      <template v-if="!pinnedPlugins || pinnedPlugins.length === 0">
+                        <v-col cols="auto" v-for="n in 4" :key="n">
+                        </v-col>
+                      </template>
+
+                      <transition-group name="list" class="v-row v-row--dense">
+                        <v-col
+                          cols="auto"
+                          v-for="(p, index) in pinnedPlugins"
+                          :key="p.name"
+                        >
+                          <PinnedPluginItem
+                            :plugin="p"
+                            :is-pinned="isPinned(p.name)"
+                            :tm="tm"
+                            :dragged="draggedIndex === index"
+                            @toggle-pin="togglePin"
+                            @view-readme="viewReadme"
+                            @open-config="openExtensionConfig"
+                            @reload="reloadPlugin"
+                            @update="updateExtension"
+                            @show-info="showPluginInfo"
+                            @uninstall="uninstallExtension"
+                            @dragstart="onDragStart(index)"
+                            @dragover="onDragOver($event)"
+                            @dragenter="onDragEnter($event, index)"
+                            @dragend="onDragEnd($event)"
+                            @drop="onDrop($event)"
+                          />
+                        </v-col>
+                      </transition-group>
+                    </v-row>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            
             <v-card
               v-if="failedPluginItems.length > 0"
               class="mb-4 rounded-lg"
@@ -341,70 +493,27 @@ const {
                     item-key="name"
                     hover
                   >
-                    <template v-slot:loader>
-                      <v-row class="py-8 d-flex align-center justify-center">
-                        <v-progress-circular
-                          indeterminate
-                          color="primary"
-                        ></v-progress-circular>
-                        <span class="ml-2">{{ tm("status.loading") }}</span>
-                      </v-row>
-                    </template>
-
                     <template v-slot:item.name="{ item }">
-                      <div class="d-flex align-center py-2">
-                        <div
-                          v-if="item.logo"
-                          class="mr-3"
-                          style="flex-shrink: 0"
-                        >
-                          <img
-                            :src="item.logo"
-                            :alt="item.name"
-                            style="
-                              height: 40px;
-                              width: 40px;
-                              border-radius: 8px;
-                              object-fit: cover;
-                            "
-                          />
-                        </div>
-                        <div v-else class="mr-3" style="flex-shrink: 0">
+                      <div class="d-flex">
+                        <div class="mr-3" style="flex-shrink: 0">
                           <img
-                            :src="defaultPluginIcon"
+                            :src="(typeof item.logo === 'string' && item.logo.trim()) ? item.logo : defaultPluginIcon"
                             :alt="item.name"
-                            style="
-                              height: 40px;
-                              width: 40px;
-                              border-radius: 8px;
-                              object-fit: cover;
-                            "
+                            style="height: 40px; width: 40px; border-radius: 8px; object-fit: cover;"
                           />
                         </div>
+
                         <div>
                           <div class="text-h5" style="font-family: inherit;">
-                            {{
-                              item.display_name && item.display_name.length
-                                ? item.display_name
-                                : item.name
-                            }}
+                            {{ item.display_name && item.display_name.length ? item.display_name : item.name }}
                           </div>
-                          <div
-                            v-if="item.display_name && item.display_name.length"
-                            class="text-caption text-medium-emphasis mt-1"
-                          >
+
+                          <div v-if="item.display_name && item.display_name.length" class="text-caption text-medium-emphasis mt-1">
                             {{ item.name }}
                           </div>
-                          <div
-                            v-if="item.reserved"
-                            class="d-flex align-center mt-1"
-                          >
-                            <v-chip
-                              color="primary"
-                              size="x-small"
-                              class="font-weight-medium"
-                              >{{ tm("status.system") }}</v-chip
-                            >
+
+                          <div v-if="item.reserved" class="d-flex align-center mt-1">
+                            <v-chip color="primary" size="x-small" class="font-weight-medium">{{ tm("status.system") }}</v-chip>
                           </div>
                         </div>
                       </div>
@@ -504,6 +613,18 @@ const {
 
                     <template v-slot:item.actions="{ item }">
                       <div class="table-action-row d-flex align-center flex-nowrap justify-start ga-2 py-1">
+                        <v-btn
+                          icon
+                          size="small"
+                          variant="tonal"
+                          color="secondary"
+                          class="table-action-btn pin-action"
+                          @click.stop="togglePin(item)"
+                          :title="isPinned(item.name) ? tm('buttons.unpin') : tm('buttons.pin')"
+                        >
+                          <v-icon size="18">{{ isPinned(item.name) ? 'mdi-pin' : 'mdi-pin-outline' }}</v-icon>
+                        </v-btn>
+
                         <v-btn
                           v-if="!item.activated"
                           size="small"
@@ -633,19 +754,21 @@ const {
                 </v-row>
 
                 <v-row>
-                  <v-col
-                    cols="12"
-                    md="6"
-                    lg="4"
-                    v-for="extension in filteredPlugins"
-                    :key="extension.name"
-                    class="pb-2"
-                  >
-                    <ExtensionCard
-                      :extension="extension"
-                      class="rounded-lg"
-                      style="background-color: rgb(var(--v-theme-mcpCardBg))"
-                      @configure="openExtensionConfig(extension.name)"
+                    <v-col
+                      cols="12"
+                      md="6"
+                      lg="4"
+                      v-for="extension in filteredPlugins"
+                      :key="extension.name"
+                      class="pb-2"
+                    >
+                      <ExtensionCard
+                        :extension="extension"
+                        :pinned="isPinned(extension.name)"
+                        @toggle-pin="() => togglePin(extension)"
+                        class="rounded-lg"
+                        style="background-color: rgb(var(--v-theme-mcpCardBg))"
+                        @configure="openExtensionConfig(extension.name)"
                       @uninstall="
                         (ext, options) => uninstallExtension(ext.name, options)
                       "
@@ -770,4 +893,94 @@ const {
   transform: translateY(-4px) scale(1.05);
   box-shadow: 0 12px 20px rgba(var(--v-theme-primary), 0.4);
 }
+
+.pinned-plugins h3 {
+  font-weight: 600;
+}
+
+.pinned-list {
+  gap: 12px;
+}
+
+.pinned-item {
+  flex: 1 1 180px;
+  max-width: 320px;
+  height: 76px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 4px rgba(16,24,40,0.04);
+}
+
+.pinned-avatar {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 12px;
+}
+
+.pinned-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.pinned-card-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 72px;
+  height: 72px;
+}
+
+.pin-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 5;
+}
+
+.pinned-item-skeleton {
+  width: 72px;
+  height: 72px;
+  border-radius: 10px;
+}
+
+.pinned-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.is-dragging {
+  opacity: 0.5;
+  transform: scale(0.95);
+  cursor: grabbing;
+}
+
+[draggable="true"] {
+  cursor: grab;
+}
+
+[draggable="true"]:active {
+  cursor: grabbing;
+}
+
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: scale(0.6);
+}
+
+.list-leave-active {
+  position: absolute;
+}
 </style>
diff --git a/dashboard/src/views/persona/FolderBreadcrumb.vue b/dashboard/src/views/persona/FolderBreadcrumb.vue
index 9e4c57b606..cb88193e0e 100644
--- a/dashboard/src/views/persona/FolderBreadcrumb.vue
+++ b/dashboard/src/views/persona/FolderBreadcrumb.vue
@@ -1,19 +1,12 @@
 <template>
-    <v-breadcrumbs :items="breadcrumbItems" class="folder-breadcrumb pa-0">
-        <template v-slot:prepend>
-            <v-icon size="small" class="mr-1">mdi-folder-outline</v-icon>
-        </template>
-        <template v-slot:item="{ item }">
-            <v-breadcrumbs-item :disabled="item.disabled" @click="!item.disabled && handleClick((item as any).folderId)"
-                :class="{ 'breadcrumb-link': !item.disabled }">
-                <v-icon v-if="(item as any).isRoot" size="small" class="mr-1">mdi-home</v-icon>
-                {{ item.title }}
-            </v-breadcrumbs-item>
-        </template>
-        <template v-slot:divider>
-            <v-icon size="small">mdi-chevron-right</v-icon>
-        </template>
-    </v-breadcrumbs>
+    <BaseFolderBreadcrumb
+        :breadcrumb-path="breadcrumbPath"
+        :current-folder-id="currentFolderId"
+        :root-folder-name="rootName"
+        @navigate="handleClick"
+        :labels="{ rootFolder: tm('folder.rootFolder') }"
+        class="folder-breadcrumb pa-0"
+    />
 </template>
 
 <script lang="ts">
@@ -21,6 +14,7 @@ import { defineComponent } from 'vue';
 import { useModuleI18n } from '@/i18n/composables';
 import { usePersonaStore } from '@/stores/personaStore';
 import { mapState, mapActions } from 'pinia';
+import BaseFolderBreadcrumb from '@/components/folder/BaseFolderBreadcrumb.vue';
 import type { FolderTreeNode } from '@/components/folder/types';
 
 interface BreadcrumbItem {
@@ -32,33 +26,15 @@ interface BreadcrumbItem {
 
 export default defineComponent({
     name: 'FolderBreadcrumb',
+    components: { BaseFolderBreadcrumb },
     setup() {
         const { tm } = useModuleI18n('features/persona');
         return { tm };
     },
     computed: {
         ...mapState(usePersonaStore, ['breadcrumbPath', 'currentFolderId']),
-
-        breadcrumbItems(): BreadcrumbItem[] {
-            const items: BreadcrumbItem[] = [
-                {
-                    title: this.tm('folder.rootFolder'),
-                    folderId: null,
-                    disabled: this.currentFolderId === null,
-                    isRoot: true
-                }
-            ];
-
-            (this.breadcrumbPath as FolderTreeNode[]).forEach((folder, index) => {
-                items.push({
-                    title: folder.name,
-                    folderId: folder.folder_id,
-                    disabled: index === (this.breadcrumbPath as FolderTreeNode[]).length - 1,
-                    isRoot: false
-                });
-            });
-
-            return items;
+        rootName(): string {
+            return this.tm('folder.rootFolder');
         }
     },
     methods: {
diff --git a/dashboard/src/views/persona/FolderCard.vue b/dashboard/src/views/persona/FolderCard.vue
index 5ee4a14a0f..7e5695c5b1 100644
--- a/dashboard/src/views/persona/FolderCard.vue
+++ b/dashboard/src/views/persona/FolderCard.vue
@@ -1,57 +1,32 @@
 <template>
-    <v-card class="folder-card" :class="{ 'drag-over': isDragOver }" rounded="lg" @click="$emit('click')" @contextmenu.prevent="$emit('contextmenu', $event)"
-        elevation="1" hover @dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
-        <v-card-text class="d-flex align-center pa-3">
-            <v-icon size="40" color="amber-darken-2" class="mr-3">mdi-folder</v-icon>
-            <div class="folder-info flex-grow-1 overflow-hidden">
-                <div class="text-subtitle-1 font-weight-medium text-truncate">{{ folder.name }}</div>
-                <div v-if="folder.description" class="text-body-2 text-medium-emphasis text-truncate">
-                    {{ folder.description }}
-                </div>
-            </div>
-            <v-menu offset-y>
-                <template v-slot:activator="{ props }">
-                    <v-btn icon="mdi-dots-vertical" variant="text" size="small" v-bind="props" @click.stop />
-                </template>
-                <v-list density="compact">
-                    <v-list-item @click.stop="$emit('open')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-folder-open</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('folder.contextMenu.open') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item @click.stop="$emit('rename')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-pencil</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('folder.contextMenu.rename') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-list-item @click.stop="$emit('move')">
-                        <template v-slot:prepend>
-                            <v-icon size="small">mdi-folder-move</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('folder.contextMenu.moveTo') }}</v-list-item-title>
-                    </v-list-item>
-                    <v-divider class="my-1" />
-                    <v-list-item @click.stop="$emit('delete')" class="text-error">
-                        <template v-slot:prepend>
-                            <v-icon size="small" color="error">mdi-delete</v-icon>
-                        </template>
-                        <v-list-item-title>{{ tm('folder.contextMenu.delete') }}</v-list-item-title>
-                    </v-list-item>
-                </v-list>
-            </v-menu>
-        </v-card-text>
-    </v-card>
+    <BaseFolderCard
+        :folder="folder"
+        :accept-drop-types="['persona']"
+        :labels="{
+            open: tm('folder.contextMenu.open'),
+            rename: tm('folder.contextMenu.rename'),
+            moveTo: tm('folder.contextMenu.moveTo'),
+            delete: tm('folder.contextMenu.delete')
+        }"
+        @click="$emit('click')"
+        @contextmenu.native.prevent="$emit('contextmenu', $event)"
+        @open="$emit('open')"
+        @rename="$emit('rename')"
+        @move="$emit('move')"
+        @delete="$emit('delete')"
+        @item-dropped="onItemDropped"
+    />
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue';
 import { useModuleI18n } from '@/i18n/composables';
+import BaseFolderCard from '@/components/folder/BaseFolderCard.vue';
 import type { Folder } from '@/components/folder/types';
 
 export default defineComponent({
     name: 'FolderCard',
+    components: { BaseFolderCard },
     props: {
         folder: {
             type: Object as PropType<Folder>,
@@ -63,35 +38,13 @@ export default defineComponent({
         const { tm } = useModuleI18n('features/persona');
         return { tm };
     },
-    data() {
-        return {
-            isDragOver: false
-        };
-    },
     methods: {
-        handleDragOver(event: DragEvent) {
-            if (event.dataTransfer) {
-                event.dataTransfer.dropEffect = 'move';
-            }
-            this.isDragOver = true;
-        },
-        handleDragLeave() {
-            this.isDragOver = false;
-        },
-        handleDrop(event: DragEvent) {
-            this.isDragOver = false;
-            if (!event.dataTransfer) return;
-            
-            try {
-                const data = JSON.parse(event.dataTransfer.getData('application/json'));
-                if (data.type === 'persona') {
-                    this.$emit('persona-dropped', {
-                        persona_id: data.persona_id,
-                        target_folder_id: this.folder.folder_id
-                    });
-                }
-            } catch (e) {
-                console.error('Failed to parse drop data:', e);
+        onItemDropped(data: { item_id: string; item_type: string; target_folder_id: string | null; source_data?: any }) {
+            if (data.item_type === 'persona') {
+                this.$emit('persona-dropped', {
+                    persona_id: data.item_id,
+                    target_folder_id: data.target_folder_id ?? this.folder.folder_id
+                });
             }
         }
     }
diff --git a/dashboard/src/views/persona/FolderTree.vue b/dashboard/src/views/persona/FolderTree.vue
index 13c5969905..82e7434e83 100644
--- a/dashboard/src/views/persona/FolderTree.vue
+++ b/dashboard/src/views/persona/FolderTree.vue
@@ -1,70 +1,30 @@
 <template>
     <div class="folder-tree">
-        <!-- 搜索框 -->
-        <v-text-field v-model="searchQuery" :placeholder="tm('folder.searchPlaceholder')" prepend-inner-icon="mdi-magnify"
-            variant="outlined" density="compact" hide-details clearable class="mb-3" />
-
-        <!-- 根目录节点 -->
-        <v-list density="compact" nav class="tree-list" bg-color="transparent">
-            <v-list-item :active="currentFolderId === null" @click="handleFolderClick(null)" rounded="lg"
-                :class="['root-item', { 'drag-over': isRootDragOver }]"
-                @dragover.prevent="handleRootDragOver" @dragleave="handleRootDragLeave" @drop.prevent="handleRootDrop">
-                <template v-slot:prepend>
-                    <v-icon>mdi-home</v-icon>
-                </template>
-                <v-list-item-title>{{ tm('folder.rootFolder') }}</v-list-item-title>
-            </v-list-item>
-
-            <!-- 文件夹树 -->
-            <template v-if="!treeLoading">
-                <FolderTreeNode v-for="folder in filteredFolderTree" :key="folder.folder_id" :folder="folder"
-                    :depth="0" :current-folder-id="currentFolderId" :search-query="searchQuery"
-                    @folder-click="handleFolderClick" @folder-context-menu="handleContextMenu"
-                    @persona-dropped="$emit('persona-dropped', $event)" />
-            </template>
-
-            <!-- 加载状态 -->
-            <div v-if="treeLoading" class="text-center pa-4">
-                <v-progress-circular indeterminate size="24" />
-            </div>
-
-            <!-- 空状态 -->
-            <div v-if="!treeLoading && folderTree.length === 0" class="text-center pa-4 text-medium-emphasis">
-                <v-icon size="32" class="mb-2">mdi-folder-outline</v-icon>
-                <div class="text-body-2">{{ tm('folder.noFolders') }}</div>
-            </div>
-        </v-list>
-
-        <!-- 右键菜单 -->
-        <v-menu v-model="contextMenu.show" :target="contextMenu.target as any" location="end" :close-on-content-click="true">
-            <v-list density="compact">
-                <v-list-item @click="openFolder">
-                    <template v-slot:prepend>
-                        <v-icon size="small">mdi-folder-open</v-icon>
-                    </template>
-                    <v-list-item-title>{{ tm('folder.contextMenu.open') }}</v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="renameFolder">
-                    <template v-slot:prepend>
-                        <v-icon size="small">mdi-pencil</v-icon>
-                    </template>
-                    <v-list-item-title>{{ tm('folder.contextMenu.rename') }}</v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="$emit('move-folder', contextMenu.folder)">
-                    <template v-slot:prepend>
-                        <v-icon size="small">mdi-folder-move</v-icon>
-                    </template>
-                    <v-list-item-title>{{ tm('folder.contextMenu.moveTo') }}</v-list-item-title>
-                </v-list-item>
-                <v-divider class="my-1" />
-                <v-list-item @click="confirmDeleteFolder" class="text-error">
-                    <template v-slot:prepend>
-                        <v-icon size="small" color="error">mdi-delete</v-icon>
-                    </template>
-                    <v-list-item-title>{{ tm('folder.contextMenu.delete') }}</v-list-item-title>
-                </v-list-item>
-            </v-list>
-        </v-menu>
+        <BaseFolderTree
+            :folder-tree="folderTree"
+            :current-folder-id="currentFolderId"
+            :expanded-folder-ids="expandedFolderIds"
+            :tree-loading="treeLoading"
+            :accept-drop-types="['persona']"
+            :labels="{
+                searchPlaceholder: tm('folder.searchPlaceholder'),
+                rootFolder: tm('folder.rootFolder'),
+                noFolders: tm('folder.noFolders'),
+                contextMenu: {
+                    open: tm('folder.contextMenu.open'),
+                    rename: tm('folder.contextMenu.rename'),
+                    moveTo: tm('folder.contextMenu.moveTo'),
+                    delete: tm('folder.contextMenu.delete')
+                }
+            }"
+            @folder-click="handleFolderClick"
+            @rename-folder="onRenameFolder"
+            @move-folder="$emit('move-folder', $event)"
+            @delete-folder="onDeleteFolder"
+            @item-dropped="onItemDropped"
+            @toggle-expansion="toggleFolderExpansion"
+            @set-expansion="setFolderExpansion"
+        />
 
         <!-- 重命名对话框 -->
         <v-dialog v-model="renameDialog.show" max-width="400px" persistent>
@@ -121,7 +81,7 @@ import { defineComponent } from 'vue';
 import { useModuleI18n } from '@/i18n/composables';
 import { usePersonaStore } from '@/stores/personaStore';
 import { mapState, mapActions } from 'pinia';
-import FolderTreeNode from './FolderTreeNode.vue';
+import BaseFolderTree from '@/components/folder/BaseFolderTree.vue';
 import type { FolderTreeNode as FolderTreeNodeType } from '@/components/folder/types';
 
 interface ContextMenuState {
@@ -146,7 +106,7 @@ interface DeleteDialogState {
 export default defineComponent({
     name: 'FolderTree',
     components: {
-        FolderTreeNode
+        BaseFolderTree
     },
     emits: ['move-folder', 'error', 'success', 'persona-dropped'],
     setup() {
@@ -176,7 +136,7 @@ export default defineComponent({
         };
     },
     computed: {
-        ...mapState(usePersonaStore, ['folderTree', 'currentFolderId', 'treeLoading']),
+        ...mapState(usePersonaStore, ['folderTree', 'currentFolderId', 'treeLoading', 'expandedFolderIds']),
 
         filteredFolderTree(): FolderTreeNodeType[] {
             if (!this.searchQuery) {
@@ -187,8 +147,7 @@ export default defineComponent({
         }
     },
     methods: {
-        ...mapActions(usePersonaStore, ['navigateToFolder', 'updateFolder', 'deleteFolder']),
-
+        ...mapActions(usePersonaStore, ['navigateToFolder', 'updateFolder', 'deleteFolder', 'toggleFolderExpansion', 'setFolderExpansion']),
         filterTreeBySearch(nodes: FolderTreeNodeType[], query: string): FolderTreeNodeType[] {
             return nodes.filter(node => {
                 const matches = node.name.toLowerCase().includes(query);
@@ -204,51 +163,25 @@ export default defineComponent({
             this.navigateToFolder(folderId);
         },
 
-        handleRootDragOver(event: DragEvent) {
-            if (event.dataTransfer) {
-                event.dataTransfer.dropEffect = 'move';
-            }
-            this.isRootDragOver = true;
-        },
-
-        handleRootDragLeave() {
-            this.isRootDragOver = false;
-        },
-
-        handleRootDrop(event: DragEvent) {
-            this.isRootDragOver = false;
-            if (!event.dataTransfer) return;
-            
-            try {
-                const data = JSON.parse(event.dataTransfer.getData('application/json'));
-                if (data.type === 'persona') {
-                    this.$emit('persona-dropped', {
-                        persona_id: data.persona_id,
-                        target_folder_id: null
-                    });
-                }
-            } catch (e) {
-                console.error('Failed to parse drop data:', e);
-            }
+        // rename event from BaseFolderTree
+        onRenameFolder(folder: FolderTreeNodeType) {
+            this.renameDialog.folder = folder;
+            this.renameDialog.name = folder.name;
+            this.renameDialog.show = true;
         },
 
-        handleContextMenu(eventData: { event: MouseEvent; folder: FolderTreeNodeType }) {
-            this.contextMenu.target = [eventData.event.clientX, eventData.event.clientY];
-            this.contextMenu.folder = eventData.folder;
-            this.contextMenu.show = true;
+        // delete event from BaseFolderTree
+        onDeleteFolder(folder: FolderTreeNodeType) {
+            this.deleteDialog.folder = folder;
+            this.deleteDialog.show = true;
         },
 
-        openFolder() {
-            if (this.contextMenu.folder) {
-                this.navigateToFolder(this.contextMenu.folder.folder_id);
-            }
-        },
-
-        renameFolder() {
-            if (this.contextMenu.folder) {
-                this.renameDialog.folder = this.contextMenu.folder;
-                this.renameDialog.name = this.contextMenu.folder.name;
-                this.renameDialog.show = true;
+        onItemDropped(data: { item_id: string; item_type: string; target_folder_id: string | null; source_data?: any }) {
+            if (data.item_type === 'persona') {
+                this.$emit('persona-dropped', {
+                    persona_id: data.item_id,
+                    target_folder_id: data.target_folder_id
+                });
             }
         },
 
@@ -270,13 +203,6 @@ export default defineComponent({
             }
         },
 
-        confirmDeleteFolder() {
-            if (this.contextMenu.folder) {
-                this.deleteDialog.folder = this.contextMenu.folder;
-                this.deleteDialog.show = true;
-            }
-        },
-
         async submitDelete() {
             if (!this.deleteDialog.folder) return;