fix: 修复切换文件后无法使用快捷键操作文件

Author: codexu

src/app/core/article/file/file-item.tsx

@@ -28,7 +28,7 @@ import { isSkillsFolder } from "@/lib/skills/utils";
 
 type Platform = 'macos' | 'windows' | 'linux' | 'unknown'
 
-export function FileItem({ item }: { item: DirTree }) {
+export function FileItem({ item, focusSidebar }: { item: DirTree; focusSidebar?: () => void }) {
   const [isEditing, setIsEditing] = useState(item.isEditing)
   const [name, setName] = useState(item.name)
   const [isComposing, setIsComposing] = useState(false) // 追踪输入法合成状态
@@ -149,6 +149,8 @@ export function FileItem({ item }: { item: DirTree }) {
   }, [])
 
   async function handleSelectFile() {
+    // 让文件管理器获得焦点，以便响应快捷键
+    focusSidebar?.()
     const currentPath = computedParentPath(item)
 
     if (item.name.match(/\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i)) {

src/app/core/article/file/file-manager.tsx

@@ -19,7 +19,7 @@ function filterFileTree(tree: DirTree[], showCloud: boolean): DirTree[] {
     }))
 }
 
-function Tree({ item }: { item: DirTree }) {
+function Tree({ item, focusSidebar }: { item: DirTree; focusSidebar: () => void }) {
   const { collapsibleList, setCollapsibleList, loadCollapsibleFiles } = useArticleStore()
   const path = computedParentPath(item)
 
@@ -31,19 +31,19 @@ function Tree({ item }: { item: DirTree }) {
   }
 
   return (
-    item.isFile ? 
-    <FileItem item={item} /> :
+    item.isFile ?
+    <FileItem item={item} focusSidebar={focusSidebar} /> :
     <li>
       <Collapsible
         onOpenChange={handleCollapse}
         className="group/collapsible [&[data-state=open]>button>.file-manange-item>svg:first-child]:rotate-90"
         open={collapsibleList.includes(path)}
       >
-        <FolderItem item={item} />
+        <FolderItem item={item} focusSidebar={focusSidebar} />
         <CollapsibleContent className="pl-1">
           <ul className="pl-2">
             {item.children?.map((subItem) => (
-              <Tree key={`${subItem.name}-${subItem.parent?.name}-${subItem.sha || ''}-${subItem.isLocale}`} item={subItem} />
+              <Tree key={`${subItem.name}-${subItem.parent?.name}-${subItem.sha || ''}-${subItem.isLocale}`} item={subItem} focusSidebar={focusSidebar} />
             ))}
           </ul>
         </CollapsibleContent>
@@ -52,7 +52,7 @@ function Tree({ item }: { item: DirTree }) {
   )
 }
 
-export function FileManager() {
+export function FileManager({ focusSidebar }: { focusSidebar: () => void }) {
   const [isDragging, setIsDragging] = useState(false)
   const { activeFilePath, fileTree, loadFileTree, setActiveFilePath, addFile, showCloudFiles } = useArticleStore()
 
@@ -157,7 +157,7 @@ export function FileManager() {
             >
             </div>
             {filteredFileTree.map((item) => (
-              <Tree key={`${item.name}-${item.parent?.name || ''}-${item.sha || ''}-${item.isLocale}`} item={item} />
+              <Tree key={`${item.name}-${item.parent?.name || ''}-${item.sha || ''}-${item.isLocale}`} item={item} focusSidebar={focusSidebar} />
             ))}
             <div
               className="flex-1 min-h-1"

src/app/core/article/file/folder-item/index.tsx

@@ -28,7 +28,7 @@ import { FolderVectorMenu } from './folder-vector-menu'
 import emitter from '@/lib/emitter'
 import { LinkedFolder } from '@/lib/files'
 
-export function FolderItem({ item }: { item: DirTree }) {
+export function FolderItem({ item, focusSidebar }: { item: DirTree; focusSidebar?: () => void }) {
   const [isEditing, setIsEditing] = useState(item.isEditing)
   const [name, setName] = useState(item.name)
   const [isComposing, setIsComposing] = useState(false)
@@ -590,6 +590,8 @@ export function FolderItem({ item }: { item: DirTree }) {
   }
 
   async function handleSelectFolder() {
+    // 让文件管理器获得焦点，以便响应快捷键
+    focusSidebar?.()
     // 设置选中状态
     await setActiveFilePath(path)
 

src/app/core/article/file/index.tsx

@@ -181,13 +181,21 @@ function useFileManagerShortcuts() {
     }
   }, [])
 
-  const handleFocusOut = useCallback(() => {
-    // 延迟检查，因为 focusOut 会在新元素获得焦点前触发
-    setTimeout(() => {
-      if (sidebarRef.current && !sidebarRef.current.contains(document.activeElement)) {
+  const handleFocusOut = useCallback((e: FocusEvent) => {
+    // 检查焦点是否移到了 sidebar 外部
+    // relatedTarget 是即将获得焦点的元素
+    const newFocusedElement = e.relatedTarget as Node
+
+    if (sidebarRef.current && newFocusedElement) {
+      // 如果新焦点元素不在 sidebar 内，才设置 isFocused = false
+      if (!sidebarRef.current.contains(newFocusedElement)) {
         setIsFocused(false)
       }
-    }, 0)
+    } else if (!newFocusedElement) {
+      // 如果 relatedTarget 为 null（焦点移到了文档外），设置 isFocused = false
+      setIsFocused(false)
+    }
+    // 否则，焦点还在 sidebar 内，保持 isFocused = true
   }, [])
 
   useEffect(() => {
@@ -202,12 +210,21 @@ function useFileManagerShortcuts() {
     }
   }, [handleFocusIn, handleFocusOut])
 
-  return { sidebarRef, isFocused }
+  // 主动设置焦点到文件管理器
+  const focusSidebar = useCallback(() => {
+    setIsFocused(true)
+    // 使用 requestAnimationFrame 确保 DOM 更新后再设置焦点
+    requestAnimationFrame(() => {
+      sidebarRef.current?.focus()
+    })
+  }, [])
+
+  return { sidebarRef, isFocused, focusSidebar }
 }
 
 export function FileSidebar() {
   const { initCollapsibleList, initSortSettings, initShowCloudFiles } = useArticleStore()
-  const { sidebarRef } = useFileManagerShortcuts()
+  const { sidebarRef, focusSidebar } = useFileManagerShortcuts()
 
   useEffect(() => {
     initCollapsibleList()
@@ -223,7 +240,7 @@ export function FileSidebar() {
       tabIndex={-1}
     >
       <div className="flex-1 overflow-x-hidden overflow-y-auto">
-        <FileManager />
+        <FileManager focusSidebar={focusSidebar} />
       </div>
       <FileFooter />
     </div>