From 5f94ccf13b64d0c7b5c52b38e5a7b052788ad348 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=9D=E5=B0=98?= <237809796@qq.com>
Date: Fri, 6 Mar 2026 22:03:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E6=94=B6=E8=97=8F?=
 =?UTF-8?q?=E5=A4=B9=E7=BD=AE=E9=A1=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FileSystem/components/Sidebar.vue         | 61 ++++++++++++++++++-
 .../FileSystem/composables/useFavorites.ts    | 48 +++++++++++++++
 web/src/components/FileSystem/index.vue       |  7 ++-
 web/src/types/file-system.ts                  |  2 +
 4 files changed, 115 insertions(+), 3 deletions(-)

diff --git a/web/src/components/FileSystem/components/Sidebar.vue b/web/src/components/FileSystem/components/Sidebar.vue
index d74e070..278aaa8 100644
--- a/web/src/components/FileSystem/components/Sidebar.vue
+++ b/web/src/components/FileSystem/components/Sidebar.vue
@@ -11,6 +11,9 @@
           :key="fav.path"
           class="sidebar-item"
           :class="{
+            'sidebar-item-pinned': fav.pinnedAt,
+            'sidebar-item-pinned-first': index === firstPinnedIndex,
+            'sidebar-item-pinned-last': index === lastPinnedIndex,
             'sidebar-item-dragging': config.draggingState.isDragging && config.draggingState.draggedIndex === index,
             'sidebar-item-drag-over': config.draggingState.isDragging && config.draggingState.draggedIndex !== index
           }"
@@ -27,8 +30,19 @@
           @drop="handleDrop($event, index)"
           @dragend="handleDragEnd"
         >
-          <span class="sidebar-item-icon">{{ fav.isDir ? '📁' : '📄' }}</span>
+          <span class="sidebar-item-icon">{{ getFileIcon(fav) }}</span>
           <span class="sidebar-item-name" :title="fav.name">{{ fav.name }}</span>
+          <a-button
+            type="text"
+            size="mini"
+            @click.stop="handleTogglePin(fav)"
+            class="sidebar-item-pin"
+            :class="{ 'is-pinned': fav.pinnedAt }"
+          >
+            <template #icon>
+              <icon-pushpin :style="{ opacity: fav.pinnedAt ? 1 : 0.4 }" />
+            </template>
+          </a-button>
           <a-button
             type="text"
             size="mini"
@@ -51,6 +65,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { SidebarConfig, FavoriteFile } from '@/types/file-system'
 
 // Props
@@ -60,10 +75,21 @@ interface Props {
 
 const props = defineProps<Props>()
 
+// 计算第一个和最后一个置顶项的索引
+const pinnedIndices = computed(() => {
+  return props.config.favoriteFiles
+    .map((fav, index) => fav.pinnedAt ? index : -1)
+    .filter(i => i !== -1)
+})
+
+const firstPinnedIndex = computed(() => pinnedIndices.value[0] ?? -1)
+const lastPinnedIndex = computed(() => pinnedIndices.value[pinnedIndices.value.length - 1] ?? -1)
+
 // Emits
 interface Emits {
   (e: 'openFavorite', file: FavoriteFile): void
   (e: 'removeFavorite', path: string): void
+  (e: 'togglePin', path: string): void
   (e: 'longPressStart', event: MouseEvent | TouchEvent, index: number): void
   (e: 'longPressCancel'): void
   (e: 'dragStart', event: DragEvent, index: number): void
@@ -75,7 +101,8 @@ interface Emits {
 const emit = defineEmits<Emits>()
 
 // 图标导入
-import { IconStar, IconClose } from '@arco-design/web-vue/es/icon'
+import { IconStar, IconClose, IconPushpin } from '@arco-design/web-vue/es/icon'
+import { getFileIcon } from '@/utils/fileUtils'
 
 // 事件处理
 const handleOpenFavorite = (file: FavoriteFile) => {
@@ -86,6 +113,10 @@ const handleRemoveFavorite = (file: FavoriteFile) => {
   emit('removeFavorite', file.path)
 }
 
+const handleTogglePin = (file: FavoriteFile) => {
+  emit('togglePin', file.path)
+}
+
 const handleLongPressStart = (event: MouseEvent | TouchEvent, index: number) => {
   emit('longPressStart', event, index)
 }
@@ -200,6 +231,32 @@ const handleDragEnd = () => {
   opacity: 1;
 }
 
+.sidebar-item-pinned {
+  background: var(--color-fill-1);
+  border-radius: 0;
+}
+
+.sidebar-item-pinned-first {
+  border-radius: 6px 6px 0 0;
+}
+
+.sidebar-item-pinned-last {
+  border-radius: 0 0 6px 6px;
+}
+
+.sidebar-item-pinned-first.sidebar-item-pinned-last {
+  border-radius: 6px;
+}
+
+.sidebar-item-pin {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.sidebar-item:hover .sidebar-item-pin {
+  opacity: 1;
+}
+
 .sidebar-empty {
   display: flex;
   flex-direction: column;
diff --git a/web/src/components/FileSystem/composables/useFavorites.ts b/web/src/components/FileSystem/composables/useFavorites.ts
index 53721b8..c1c002e 100644
--- a/web/src/components/FileSystem/composables/useFavorites.ts
+++ b/web/src/components/FileSystem/composables/useFavorites.ts
@@ -18,6 +18,21 @@ export function useFavorites() {
     pressedIndex: -1
   })
 
+  /**
+   * 排序收藏列表：置顶项在前（按 pinnedAt 降序），非置顶项按添加时间降序
+   */
+  const sortFavorites = () => {
+    favorites.value.sort((a, b) => {
+      // 置顶项优先
+      if (a.pinnedAt && !b.pinnedAt) return -1
+      if (!a.pinnedAt && b.pinnedAt) return 1
+      // 都是置顶项，按置顶时间降序
+      if (a.pinnedAt && b.pinnedAt) return b.pinnedAt - a.pinnedAt
+      // 都不是置顶项，按添加时间降序（最新在前）
+      return b.addedAt - a.addedAt
+    })
+  }
+
   /**
    * 从 localStorage 加载收藏列表
    */
@@ -32,6 +47,9 @@ export function useFavorites() {
           ...fav,
           isDir: fav.isDir ?? (fav as any).is_dir ?? false
         }))
+
+        // 排序
+        sortFavorites()
       }
     } catch (error) {
       console.error('加载收藏列表失败:', error)
@@ -108,6 +126,34 @@ export function useFavorites() {
     return favorites.value.some(fav => normalizePath(fav.path) === normalizedPath)
   }
 
+  /**
+   * 切换置顶状态
+   */
+  const togglePin = (path: string) => {
+    const normalizedPath = normalizePath(path)
+    const fav = favorites.value.find(f => normalizePath(f.path) === normalizedPath)
+    if (fav) {
+      if (fav.pinnedAt) {
+        // 取消置顶
+        fav.pinnedAt = undefined
+      } else {
+        // 设置置顶
+        fav.pinnedAt = Date.now()
+      }
+      sortFavorites()
+      saveFavorites()
+    }
+  }
+
+  /**
+   * 检查是否已置顶
+   */
+  const isPinned = (path: string): boolean => {
+    const normalizedPath = normalizePath(path)
+    const fav = favorites.value.find(f => normalizePath(f.path) === normalizedPath)
+    return !!fav?.pinnedAt
+  }
+
   /**
    * 长按开始
    */
@@ -219,6 +265,8 @@ export function useFavorites() {
     removeFavorite,
     toggleFavorite,
     isFavorite,
+    togglePin,
+    isPinned,
 
     // 拖拽方法
     onLongPressStart,
diff --git a/web/src/components/FileSystem/index.vue b/web/src/components/FileSystem/index.vue
index b22f235..950d6b2 100644
--- a/web/src/components/FileSystem/index.vue
+++ b/web/src/components/FileSystem/index.vue
@@ -21,6 +21,7 @@
         :config="sidebarConfig"
         @open-favorite="handleOpenFavorite"
         @remove-favorite="handleRemoveFavorite"
+        @toggle-pin="handleTogglePin"
         @long-press-start="handleLongPressStart"
         @long-press-cancel="handleLongPressCancel"
         @drag-start="handleDragStart"
@@ -224,7 +225,7 @@ const fileOps = useFileOperations({
 })
 
 // 收藏夹
-const { favorites, draggingState, toggleFavorite: toggleFav, removeFavorite: removeFav, isFavorite } = useFavorites()
+const { favorites, draggingState, toggleFavorite: toggleFav, removeFavorite: removeFav, isFavorite, togglePin } = useFavorites()
 
 // 路径导航
 const { filePath, history, navigate, back, forward, onPathSelect, onPathEnter, browseDirectory, getParentPath } =
@@ -457,6 +458,10 @@ const handleRemoveFavorite = (path: string) => {
   removeFav(path)
 }
 
+const handleTogglePin = (path: string) => {
+  togglePin(path)
+}
+
 const handleLongPressStart = (event: MouseEvent | TouchEvent, index: number) => {
   // 拖拽开始
 }
diff --git a/web/src/types/file-system.ts b/web/src/types/file-system.ts
index 0bd8fc6..ef80a80 100644
--- a/web/src/types/file-system.ts
+++ b/web/src/types/file-system.ts
@@ -29,6 +29,8 @@ export interface FileItem {
 export interface FavoriteFile extends FileItem {
   /** 添加时间（时间戳） */
   addedAt: number
+  /** 置顶时间（时间戳），undefined 表示未置顶 */
+  pinnedAt?: number
 }
 
 /**