diff --git a/packages/shared/IpcChannel.ts b/packages/shared/IpcChannel.ts index 67bd137b8..167721a7f 100644 --- a/packages/shared/IpcChannel.ts +++ b/packages/shared/IpcChannel.ts @@ -196,6 +196,9 @@ export enum IpcChannel { File_ValidateNotesDirectory = 'file:validateNotesDirectory', File_StartWatcher = 'file:startWatcher', File_StopWatcher = 'file:stopWatcher', + File_PauseWatcher = 'file:pauseWatcher', + File_ResumeWatcher = 'file:resumeWatcher', + File_BatchUploadMarkdown = 'file:batchUploadMarkdown', File_ShowInFolder = 'file:showInFolder', // file service diff --git a/packages/shared/config/types.ts b/packages/shared/config/types.ts index 5c42f1d2b..8fba6399f 100644 --- a/packages/shared/config/types.ts +++ b/packages/shared/config/types.ts @@ -10,7 +10,7 @@ export type LoaderReturn = { messageSource?: 'preprocess' | 'embedding' | 'validation' } -export type FileChangeEventType = 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir' +export type FileChangeEventType = 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir' | 'refresh' export type FileChangeEvent = { eventType: FileChangeEventType diff --git a/src/main/ipc.ts b/src/main/ipc.ts index e537b8526..f91e61eaa 100644 --- a/src/main/ipc.ts +++ b/src/main/ipc.ts @@ -595,6 +595,9 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) { ipcMain.handle(IpcChannel.File_ValidateNotesDirectory, fileManager.validateNotesDirectory.bind(fileManager)) ipcMain.handle(IpcChannel.File_StartWatcher, fileManager.startFileWatcher.bind(fileManager)) ipcMain.handle(IpcChannel.File_StopWatcher, fileManager.stopFileWatcher.bind(fileManager)) + ipcMain.handle(IpcChannel.File_PauseWatcher, fileManager.pauseFileWatcher.bind(fileManager)) + ipcMain.handle(IpcChannel.File_ResumeWatcher, fileManager.resumeFileWatcher.bind(fileManager)) + ipcMain.handle(IpcChannel.File_BatchUploadMarkdown, fileManager.batchUploadMarkdownFiles.bind(fileManager)) ipcMain.handle(IpcChannel.File_ShowInFolder, fileManager.showInFolder.bind(fileManager)) // file service diff --git a/src/main/services/FileStorage.ts b/src/main/services/FileStorage.ts index c8eb6abb0..81f5c15bd 100644 --- a/src/main/services/FileStorage.ts +++ b/src/main/services/FileStorage.ts @@ -151,6 +151,7 @@ class FileStorage { private currentWatchPath?: string private debounceTimer?: NodeJS.Timeout private watcherConfig: Required = DEFAULT_WATCHER_CONFIG + private isPaused = false constructor() { this.initStorageDir() @@ -1479,6 +1480,12 @@ class FileStorage { private createChangeHandler() { return (eventType: string, filePath: string) => { + // Skip processing if watcher is paused + if (this.isPaused) { + logger.debug('File change ignored (watcher paused)', { eventType, filePath }) + return + } + if (!this.shouldWatchFile(filePath, eventType)) { return } @@ -1636,6 +1643,165 @@ class FileStorage { logger.error('Failed to show item in folder:', error as Error) } } + + /** + * Batch upload markdown files from native File objects + * This handles all I/O operations in the Main process to avoid blocking Renderer + */ + public batchUploadMarkdownFiles = async ( + _: Electron.IpcMainInvokeEvent, + filePaths: string[], + targetPath: string + ): Promise<{ + fileCount: number + folderCount: number + skippedFiles: number + }> => { + try { + logger.info('Starting batch upload', { fileCount: filePaths.length, targetPath }) + + const basePath = path.resolve(targetPath) + const MARKDOWN_EXTS = ['.md', '.markdown'] + + // Filter markdown files + const markdownFiles = filePaths.filter((filePath) => { + const ext = path.extname(filePath).toLowerCase() + return MARKDOWN_EXTS.includes(ext) + }) + + const skippedFiles = filePaths.length - markdownFiles.length + + if (markdownFiles.length === 0) { + return { fileCount: 0, folderCount: 0, skippedFiles } + } + + // Collect unique folders needed + const foldersSet = new Set() + const fileOperations: Array<{ sourcePath: string; targetPath: string }> = [] + + for (const filePath of markdownFiles) { + try { + // Get relative path if file is from a directory upload + const fileName = path.basename(filePath) + const relativePath = path.dirname(filePath) + + // Determine target directory structure + let targetDir = basePath + const folderParts: string[] = [] + + // Extract folder structure from file path for nested uploads + // This is a simplified version - in real scenario we'd need the original directory structure + if (relativePath && relativePath !== '.') { + const parts = relativePath.split(path.sep) + // Get the last few parts that represent the folder structure within upload + const relevantParts = parts.slice(Math.max(0, parts.length - 3)) + folderParts.push(...relevantParts) + } + + // Build target directory path + for (const part of folderParts) { + targetDir = path.join(targetDir, part) + foldersSet.add(targetDir) + } + + // Determine final file name + const nameWithoutExt = fileName.endsWith('.md') + ? fileName.slice(0, -3) + : fileName.endsWith('.markdown') + ? fileName.slice(0, -9) + : fileName + + const { safeName } = await this.fileNameGuard(_, targetDir, nameWithoutExt, true) + const finalPath = path.join(targetDir, safeName + '.md') + + fileOperations.push({ sourcePath: filePath, targetPath: finalPath }) + } catch (error) { + logger.error('Failed to prepare file operation:', error as Error, { filePath }) + } + } + + // Create folders in order (shallow to deep) + const sortedFolders = Array.from(foldersSet).sort((a, b) => a.length - b.length) + for (const folder of sortedFolders) { + try { + if (!fs.existsSync(folder)) { + await fs.promises.mkdir(folder, { recursive: true }) + } + } catch (error) { + logger.debug('Folder already exists or creation failed', { folder, error: (error as Error).message }) + } + } + + // Process files in batches + const BATCH_SIZE = 10 // Higher batch size since we're in Main process + let successCount = 0 + + for (let i = 0; i < fileOperations.length; i += BATCH_SIZE) { + const batch = fileOperations.slice(i, i + BATCH_SIZE) + + const results = await Promise.allSettled( + batch.map(async (op) => { + // Read from source and write to target in Main process + const content = await fs.promises.readFile(op.sourcePath, 'utf-8') + await fs.promises.writeFile(op.targetPath, content, 'utf-8') + return true + }) + ) + + results.forEach((result, index) => { + if (result.status === 'fulfilled') { + successCount++ + } else { + logger.error('Failed to upload file:', result.reason, { + file: batch[index].sourcePath + }) + } + }) + } + + logger.info('Batch upload completed', { + successCount, + folderCount: foldersSet.size, + skippedFiles + }) + + return { + fileCount: successCount, + folderCount: foldersSet.size, + skippedFiles + } + } catch (error) { + logger.error('Batch upload failed:', error as Error) + throw error + } + } + + /** + * Pause file watcher to prevent events during batch operations + */ + public pauseFileWatcher = async (): Promise => { + if (this.watcher) { + logger.debug('Pausing file watcher') + this.isPaused = true + // Clear any pending debounced notifications + if (this.debounceTimer) { + clearTimeout(this.debounceTimer) + this.debounceTimer = undefined + } + } + } + + /** + * Resume file watcher and trigger a refresh + */ + public resumeFileWatcher = async (): Promise => { + if (this.watcher && this.currentWatchPath) { + logger.debug('Resuming file watcher') + this.isPaused = false + // Send a synthetic refresh event to trigger tree reload + this.notifyChange('refresh', this.currentWatchPath) + } + } } export const fileStorage = new FileStorage() diff --git a/src/preload/index.ts b/src/preload/index.ts index 92f44075a..25b1064d4 100644 --- a/src/preload/index.ts +++ b/src/preload/index.ts @@ -221,6 +221,10 @@ const api = { startFileWatcher: (dirPath: string, config?: any) => ipcRenderer.invoke(IpcChannel.File_StartWatcher, dirPath, config), stopFileWatcher: () => ipcRenderer.invoke(IpcChannel.File_StopWatcher), + pauseFileWatcher: () => ipcRenderer.invoke(IpcChannel.File_PauseWatcher), + resumeFileWatcher: () => ipcRenderer.invoke(IpcChannel.File_ResumeWatcher), + batchUploadMarkdown: (filePaths: string[], targetPath: string) => + ipcRenderer.invoke(IpcChannel.File_BatchUploadMarkdown, filePaths, targetPath), onFileChange: (callback: (data: FileChangeEvent) => void) => { const listener = (_event: Electron.IpcRendererEvent, data: any) => { if (data && typeof data === 'object') { diff --git a/src/renderer/src/components/VirtualList/__tests__/DynamicVirtualList.test.tsx b/src/renderer/src/components/VirtualList/__tests__/DynamicVirtualList.test.tsx index c9cbbf7dd..cf1ff2954 100644 --- a/src/renderer/src/components/VirtualList/__tests__/DynamicVirtualList.test.tsx +++ b/src/renderer/src/components/VirtualList/__tests__/DynamicVirtualList.test.tsx @@ -140,11 +140,11 @@ describe('DynamicVirtualList', () => { // Should call isSticky function during rendering expect(isSticky).toHaveBeenCalled() - // Should apply sticky styles to sticky items + // Sticky items within visible range should have proper z-index but may be absolute until scrolled const stickyItem = document.querySelector('[data-index="0"]') as HTMLElement expect(stickyItem).toBeInTheDocument() - expect(stickyItem).toHaveStyle('position: sticky') - expect(stickyItem).toHaveStyle('z-index: 1') + // When sticky item is in visible range, it gets z-index but may not be sticky yet + expect(stickyItem).toHaveStyle('z-index: 999') }) it('should apply absolute positioning to non-sticky items', () => { diff --git a/src/renderer/src/components/VirtualList/__tests__/__snapshots__/DynamicVirtualList.test.tsx.snap b/src/renderer/src/components/VirtualList/__tests__/__snapshots__/DynamicVirtualList.test.tsx.snap index c5567f9b0..7bf458282 100644 --- a/src/renderer/src/components/VirtualList/__tests__/__snapshots__/DynamicVirtualList.test.tsx.snap +++ b/src/renderer/src/components/VirtualList/__tests__/__snapshots__/DynamicVirtualList.test.tsx.snap @@ -24,7 +24,7 @@ exports[`DynamicVirtualList > basic rendering > snapshot test 1`] = ` >
basic rendering > snapshot test 1`] = `
basic rendering > snapshot test 1`] = `
extends InheritedVirtualizerOptions */ isSticky?: (index: number) => boolean + /** + * Get the depth/level of an item for hierarchical sticky positioning + * Used with isSticky to determine ancestor relationships + */ + getItemDepth?: (index: number) => number + /** * Range extractor function, cannot be used with isSticky */ @@ -101,6 +107,7 @@ function DynamicVirtualList(props: DynamicVirtualListProps) { size, estimateSize, isSticky, + getItemDepth, rangeExtractor: customRangeExtractor, itemContainerStyle, scrollerStyle, @@ -115,7 +122,7 @@ function DynamicVirtualList(props: DynamicVirtualListProps) { const internalScrollerRef = useRef(null) const scrollerRef = internalScrollerRef - const activeStickyIndexRef = useRef(0) + const activeStickyIndexesRef = useRef([]) const stickyIndexes = useMemo(() => { if (!isSticky) return [] @@ -124,21 +131,54 @@ function DynamicVirtualList(props: DynamicVirtualListProps) { const internalStickyRangeExtractor = useCallback( (range: Range) => { - // The active sticky index is the last one that is before or at the start of the visible range - const newActiveStickyIndex = - [...stickyIndexes].reverse().find((index) => range.startIndex >= index) ?? stickyIndexes[0] ?? 0 + const activeStickies: number[] = [] - if (newActiveStickyIndex !== activeStickyIndexRef.current) { - activeStickyIndexRef.current = newActiveStickyIndex + if (getItemDepth) { + // With depth information, we can build a proper ancestor chain + // Find all sticky items before the visible range + const stickiesBeforeRange = stickyIndexes.filter((index) => index < range.startIndex) + + if (stickiesBeforeRange.length > 0) { + // Find the depth of the first visible item (or last sticky before it) + const firstVisibleIndex = range.startIndex + const referenceDepth = getItemDepth(firstVisibleIndex) + + // Build ancestor chain: include all sticky parents + const ancestorChain: number[] = [] + let minDepth = referenceDepth + + // Walk backwards from the last sticky before visible range + for (let i = stickiesBeforeRange.length - 1; i >= 0; i--) { + const stickyIndex = stickiesBeforeRange[i] + const stickyDepth = getItemDepth(stickyIndex) + + // Include this sticky if it's a parent (smaller depth) of our reference + if (stickyDepth < minDepth) { + ancestorChain.unshift(stickyIndex) + minDepth = stickyDepth + } + } + + activeStickies.push(...ancestorChain) + } + } else { + // Fallback: without depth info, just use the last sticky before range + const lastStickyBeforeRange = [...stickyIndexes].reverse().find((index) => index < range.startIndex) + if (lastStickyBeforeRange !== undefined) { + activeStickies.push(lastStickyBeforeRange) + } } - // Merge the active sticky index and the default range extractor - const next = new Set([activeStickyIndexRef.current, ...defaultRangeExtractor(range)]) + // Update the ref with current active stickies + activeStickyIndexesRef.current = activeStickies + + // Merge the active sticky indexes and the default range extractor + const next = new Set([...activeStickyIndexesRef.current, ...defaultRangeExtractor(range)]) // Sort the set to maintain proper order return [...next].sort((a, b) => a - b) }, - [stickyIndexes] + [stickyIndexes, getItemDepth] ) const rangeExtractor = customRangeExtractor ?? (isSticky ? internalStickyRangeExtractor : undefined) @@ -221,14 +261,47 @@ function DynamicVirtualList(props: DynamicVirtualListProps) { }}> {virtualItems.map((virtualItem) => { const isItemSticky = stickyIndexes.includes(virtualItem.index) - const isItemActiveSticky = isItemSticky && activeStickyIndexRef.current === virtualItem.index + const isItemActiveSticky = isItemSticky && activeStickyIndexesRef.current.includes(virtualItem.index) + + // Calculate the sticky offset for multi-level sticky headers + const activeStickyIndex = isItemActiveSticky ? activeStickyIndexesRef.current.indexOf(virtualItem.index) : -1 + + // Calculate cumulative offset based on actual sizes of previous sticky items + let stickyOffset = 0 + if (activeStickyIndex >= 0) { + for (let i = 0; i < activeStickyIndex; i++) { + const prevStickyIndex = activeStickyIndexesRef.current[i] + stickyOffset += estimateSize(prevStickyIndex) + } + } + + // Check if this item is visually covered by sticky items + // If covered, disable pointer events to prevent hover/click bleeding through + const isCoveredBySticky = (() => { + if (!activeStickyIndexesRef.current.length) return false + if (isItemActiveSticky) return false // Sticky items themselves are not covered + + // Calculate if this item's visual position is under any sticky header + const itemVisualTop = virtualItem.start + let totalStickyHeight = 0 + for (const stickyIdx of activeStickyIndexesRef.current) { + totalStickyHeight += estimateSize(stickyIdx) + } + + // If item starts within the sticky area, it's covered + return itemVisualTop < totalStickyHeight + })() const style: React.CSSProperties = { ...itemContainerStyle, position: isItemActiveSticky ? 'sticky' : 'absolute', - top: 0, + top: isItemActiveSticky ? stickyOffset : 0, left: 0, - zIndex: isItemSticky ? 1 : undefined, + zIndex: isItemActiveSticky ? 1000 + (100 - activeStickyIndex) : isItemSticky ? 999 : 0, + pointerEvents: isCoveredBySticky ? 'none' : 'auto', + ...(isItemActiveSticky && { + backgroundColor: 'var(--color-background)' + }), ...(horizontal ? { transform: isItemActiveSticky ? undefined : `translateX(${virtualItem.start}px)`, diff --git a/src/renderer/src/hooks/useInPlaceEdit.ts b/src/renderer/src/hooks/useInPlaceEdit.ts index 675de75c7..ab614f952 100644 --- a/src/renderer/src/hooks/useInPlaceEdit.ts +++ b/src/renderer/src/hooks/useInPlaceEdit.ts @@ -1,10 +1,12 @@ -import { useCallback, useEffect, useRef, useState } from 'react' - -import { useTimer } from './useTimer' +import { loggerService } from '@logger' +import { useCallback, useLayoutEffect, useRef, useState } from 'react' +import { useTranslation } from 'react-i18next' +const logger = loggerService.withContext('useInPlaceEdit') export interface UseInPlaceEditOptions { onSave: ((value: string) => void) | ((value: string) => Promise) onCancel?: () => void + onError?: (error: unknown) => void autoSelectOnStart?: boolean trimOnSave?: boolean } @@ -12,14 +14,10 @@ export interface UseInPlaceEditOptions { export interface UseInPlaceEditReturn { isEditing: boolean isSaving: boolean - editValue: string - inputRef: React.RefObject startEdit: (initialValue: string) => void saveEdit: () => void cancelEdit: () => void - handleKeyDown: (e: React.KeyboardEvent) => void - handleInputChange: (e: React.ChangeEvent) => void - handleValueChange: (value: string) => void + inputProps: React.InputHTMLAttributes & { ref: React.RefObject } } /** @@ -32,63 +30,69 @@ export interface UseInPlaceEditReturn { * @returns An object containing the editing state and handler functions */ export function useInPlaceEdit(options: UseInPlaceEditOptions): UseInPlaceEditReturn { - const { onSave, onCancel, autoSelectOnStart = true, trimOnSave = true } = options + const { onSave, onCancel, onError, autoSelectOnStart = true, trimOnSave = true } = options + const { t } = useTranslation() const [isSaving, setIsSaving] = useState(false) const [isEditing, setIsEditing] = useState(false) const [editValue, setEditValue] = useState('') - const [originalValue, setOriginalValue] = useState('') + const originalValueRef = useRef('') const inputRef = useRef(null) - const { setTimeoutTimer } = useTimer() - const startEdit = useCallback( - (initialValue: string) => { - setIsEditing(true) - setEditValue(initialValue) - setOriginalValue(initialValue) + const startEdit = useCallback((initialValue: string) => { + setIsEditing(true) + setEditValue(initialValue) + originalValueRef.current = initialValue + }, []) - setTimeoutTimer( - 'startEdit', - () => { - inputRef.current?.focus() - if (autoSelectOnStart) { - inputRef.current?.select() - } - }, - 0 - ) - }, - [autoSelectOnStart, setTimeoutTimer] - ) + useLayoutEffect(() => { + if (isEditing) { + inputRef.current?.focus() + if (autoSelectOnStart) { + inputRef.current?.select() + } + } + }, [autoSelectOnStart, isEditing]) const saveEdit = useCallback(async () => { if (isSaving) return + const finalValue = trimOnSave ? editValue.trim() : editValue + if (finalValue === originalValueRef.current) { + setIsEditing(false) + return + } + setIsSaving(true) try { - const finalValue = trimOnSave ? editValue.trim() : editValue - if (finalValue !== originalValue) { - await onSave(finalValue) - } + await onSave(finalValue) setIsEditing(false) setEditValue('') - setOriginalValue('') + } catch (error) { + logger.error('Error saving in-place edit', { error }) + + // Call custom error handler if provided, otherwise show default toast + if (onError) { + onError(error) + } else { + window.toast.error(t('common.save_failed') || 'Failed to save') + } } finally { setIsSaving(false) } - }, [isSaving, trimOnSave, editValue, originalValue, onSave]) + }, [isSaving, trimOnSave, editValue, onSave, onError, t]) const cancelEdit = useCallback(() => { setIsEditing(false) setEditValue('') - setOriginalValue('') onCancel?.() }, [onCancel]) const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { - if (e.key === 'Enter' && !e.nativeEvent.isComposing) { + if (e.nativeEvent.isComposing) return + if (e.key === 'Enter') { e.preventDefault() saveEdit() } else if (e.key === 'Escape') { @@ -104,37 +108,29 @@ export function useInPlaceEdit(options: UseInPlaceEditOptions): UseInPlaceEditRe setEditValue(e.target.value) }, []) - const handleValueChange = useCallback((value: string) => { - setEditValue(value) - }, []) - - // Handle clicks outside the input to save - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if (isEditing && inputRef.current && !inputRef.current.contains(event.target as Node)) { - saveEdit() - } + const handleBlur = useCallback(() => { + // 这里的逻辑需要注意： + // 如果点击了“取消”按钮，可能会先触发 Blur 保存。 + // 通常 InPlaceEdit 的逻辑是 Blur 即 Save。 + // 如果不想 Blur 保存，可以去掉这一行，或者判断 relatedTarget。 + if (!isSaving) { + saveEdit() } - - if (isEditing) { - document.addEventListener('mousedown', handleClickOutside) - return () => { - document.removeEventListener('mousedown', handleClickOutside) - } - } - return - }, [isEditing, saveEdit]) + }, [saveEdit, isSaving]) return { isEditing, isSaving, - editValue, - inputRef, startEdit, saveEdit, cancelEdit, - handleKeyDown, - handleInputChange, - handleValueChange + inputProps: { + ref: inputRef, + value: editValue, + onChange: handleInputChange, + onKeyDown: handleKeyDown, + onBlur: handleBlur, + disabled: isSaving // 保存时禁用输入 + } } } diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json index 2ebddb688..e8fdad0af 100644 --- a/src/renderer/src/i18n/locales/en-us.json +++ b/src/renderer/src/i18n/locales/en-us.json @@ -2220,7 +2220,10 @@ "untitled_folder": "New Folder", "untitled_note": "Untitled Note", "upload_failed": "Note upload failed", - "upload_success": "Note uploaded success" + "upload_files": "Upload Files", + "upload_folder": "Upload Folder", + "upload_success": "Note uploaded success", + "uploading_files": "Uploading {{count}} files..." }, "notification": { "assistant": "Assistant Response", diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json index 4218c68f5..0ce762739 100644 --- a/src/renderer/src/i18n/locales/zh-cn.json +++ b/src/renderer/src/i18n/locales/zh-cn.json @@ -2220,7 +2220,10 @@ "untitled_folder": "新文件夹", "untitled_note": "无标题笔记", "upload_failed": "笔记上传失败", - "upload_success": "笔记上传成功" + "upload_files": "上传文件", + "upload_folder": "上传文件夹", + "upload_success": "笔记上传成功", + "uploading_files": "正在上传 {{count}} 个文件..." }, "notification": { "assistant": "助手响应", diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json index bcf12aa63..20a3d84df 100644 --- a/src/renderer/src/i18n/locales/zh-tw.json +++ b/src/renderer/src/i18n/locales/zh-tw.json @@ -2220,7 +2220,10 @@ "untitled_folder": "新資料夾", "untitled_note": "無標題筆記", "upload_failed": "筆記上傳失敗", - "upload_success": "筆記上傳成功" + "upload_files": "[to be translated]:Upload Files", + "upload_folder": "[to be translated]:Upload Folder", + "upload_success": "筆記上傳成功", + "uploading_files": "正在上傳 {{count}} 個檔案..." }, "notification": { "assistant": "助手回應", diff --git a/src/renderer/src/i18n/translate/de-de.json b/src/renderer/src/i18n/translate/de-de.json index 963f06551..aaed5b498 100644 --- a/src/renderer/src/i18n/translate/de-de.json +++ b/src/renderer/src/i18n/translate/de-de.json @@ -2220,7 +2220,10 @@ "untitled_folder": "Neuer Ordner", "untitled_note": "Unbenannte Notiz", "upload_failed": "Notizen-Upload fehlgeschlagen", - "upload_success": "Notizen erfolgreich hochgeladen" + "upload_files": "[to be translated]:Upload Files", + "upload_folder": "[to be translated]:Upload Folder", + "upload_success": "Notizen erfolgreich hochgeladen", + "uploading_files": "[to be translated]:Uploading {{count}} files..." }, "notification": { "assistant": "Assistenten-Antwort", diff --git a/src/renderer/src/i18n/translate/el-gr.json b/src/renderer/src/i18n/translate/el-gr.json index 6bc8b318d..f8125631a 100644 --- a/src/renderer/src/i18n/translate/el-gr.json +++ b/src/renderer/src/i18n/translate/el-gr.json @@ -2220,7 +2220,10 @@ "untitled_folder": "Νέος φάκελος", "untitled_note": "σημείωση χωρίς τίτλο", "upload_failed": "Η σημείωση δεν ανέβηκε", - "upload_success": "Οι σημειώσεις μεταφορτώθηκαν με επιτυχία" + "upload_files": "[to be translated]:Upload Files", + "upload_folder": "[to be translated]:Upload Folder", + "upload_success": "Οι σημειώσεις μεταφορτώθηκαν με επιτυχία", + "uploading_files": "[to be translated]:Uploading {{count}} files..." }, "notification": { "assistant": "Απάντηση Βοηθού", diff --git a/src/renderer/src/i18n/translate/es-es.json b/src/renderer/src/i18n/translate/es-es.json index 925977529..2a5874f6b 100644 --- a/src/renderer/src/i18n/translate/es-es.json +++ b/src/renderer/src/i18n/translate/es-es.json @@ -2220,7 +2220,10 @@ "untitled_folder": "Nueva carpeta", "untitled_note": "Nota sin título", "upload_failed": "Error al cargar la nota", - "upload_success": "Nota cargada con éxito" + "upload_files": "[to be translated]:Upload Files", + "upload_folder": "[to be translated]:Upload Folder", + "upload_success": "Nota cargada con éxito", + "uploading_files": "[to be translated]:Uploading {{count}} files..." }, "notification": { "assistant": "Respuesta del asistente", diff --git a/src/renderer/src/i18n/translate/fr-fr.json b/src/renderer/src/i18n/translate/fr-fr.json index 5bd57f777..bc884c8c6 100644 --- a/src/renderer/src/i18n/translate/fr-fr.json +++ b/src/renderer/src/i18n/translate/fr-fr.json @@ -2220,7 +2220,10 @@ "untitled_folder": "nouveau dossier", "untitled_note": "Note sans titre", "upload_failed": "Échec du téléchargement de la note", - "upload_success": "Note téléchargée avec succès" + "upload_files": "[to be translated]:Upload Files", + "upload_folder": "[to be translated]:Upload Folder", + "upload_success": "Note téléchargée avec succès", + "uploading_files": "[to be translated]:Uploading {{count}} files..." }, "notification": { "assistant": "Réponse de l'assistant", diff --git a/src/renderer/src/i18n/translate/ja-jp.json b/src/renderer/src/i18n/translate/ja-jp.json index 9d0926c48..f1c0fe575 100644 --- a/src/renderer/src/i18n/translate/ja-jp.json +++ b/src/renderer/src/i18n/translate/ja-jp.json @@ -2220,7 +2220,10 @@ "untitled_folder": "新ファイル夹", "untitled_note": "無題のメモ", "upload_failed": "ノートのアップロードに失敗しました", - "upload_success": "ノートのアップロードが成功しました" + "upload_files": "[to be translated]:Upload Files", + "upload_folder": "[to be translated]:Upload Folder", + "upload_success": "ノートのアップロードが成功しました", + "uploading_files": "[to be translated]:Uploading {{count}} files..." }, "notification": { "assistant": "助手回應", diff --git a/src/renderer/src/i18n/translate/pt-pt.json b/src/renderer/src/i18n/translate/pt-pt.json index b84971d72..33976b2e1 100644 --- a/src/renderer/src/i18n/translate/pt-pt.json +++ b/src/renderer/src/i18n/translate/pt-pt.json @@ -2220,7 +2220,10 @@ "untitled_folder": "Nova pasta", "untitled_note": "Nota sem título", "upload_failed": "Falha ao carregar a nota", - "upload_success": "Nota carregada com sucesso" + "upload_files": "[to be translated]:Upload Files", + "upload_folder": "[to be translated]:Upload Folder", + "upload_success": "Nota carregada com sucesso", + "uploading_files": "[to be translated]:Uploading {{count}} files..." }, "notification": { "assistant": "Resposta do assistente", diff --git a/src/renderer/src/i18n/translate/ru-ru.json b/src/renderer/src/i18n/translate/ru-ru.json index 50db74739..fbdffdb37 100644 --- a/src/renderer/src/i18n/translate/ru-ru.json +++ b/src/renderer/src/i18n/translate/ru-ru.json @@ -2220,7 +2220,10 @@ "untitled_folder": "Новая папка", "untitled_note": "Незаглавленная заметка", "upload_failed": "Не удалось загрузить заметку", - "upload_success": "Заметка успешно загружена" + "upload_files": "[to be translated]:Upload Files", + "upload_folder": "[to be translated]:Upload Folder", + "upload_success": "Заметка успешно загружена", + "uploading_files": "[to be translated]:Uploading {{count}} files..." }, "notification": { "assistant": "Ответ ассистента", diff --git a/src/renderer/src/pages/home/Tabs/components/SessionItem.tsx b/src/renderer/src/pages/home/Tabs/components/SessionItem.tsx index 2c719fa13..2fb9652d4 100644 --- a/src/renderer/src/pages/home/Tabs/components/SessionItem.tsx +++ b/src/renderer/src/pages/home/Tabs/components/SessionItem.tsx @@ -42,7 +42,7 @@ const SessionItem: FC = ({ session, agentId, onDelete, onPress const targetSession = useDeferredValue(_targetSession) const dispatch = useAppDispatch() - const { isEditing, isSaving, editValue, inputRef, startEdit, handleKeyDown, handleValueChange } = useInPlaceEdit({ + const { isEditing, isSaving, startEdit, inputProps } = useInPlaceEdit({ onSave: async (value) => { if (value !== session.name) { await updateSession({ id: session.id, name: value }) @@ -179,14 +179,7 @@ const SessionItem: FC = ({ session, agentId, onDelete, onPress {isFulfilled && !isActive && } {isEditing ? ( - ) => handleValueChange(e.target.value)} - onKeyDown={handleKeyDown} - onClick={(e: React.MouseEvent) => e.stopPropagation()} - style={{ opacity: isSaving ? 0.5 : 1 }} - /> + ) : ( <> diff --git a/src/renderer/src/pages/home/Tabs/components/Topics.tsx b/src/renderer/src/pages/home/Tabs/components/Topics.tsx index 7219f7d38..c9b4b5ea4 100644 --- a/src/renderer/src/pages/home/Tabs/components/Topics.tsx +++ b/src/renderer/src/pages/home/Tabs/components/Topics.tsx @@ -81,7 +81,7 @@ export const Topics: React.FC = ({ assistant: _assistant, activeTopic, se const deleteTimerRef = useRef(null) const [editingTopicId, setEditingTopicId] = useState(null) - const topicEdit = useInPlaceEdit({ + const { startEdit, isEditing, inputProps } = useInPlaceEdit({ onSave: (name: string) => { const topic = assistant.topics.find((t) => t.id === editingTopicId) if (topic && name !== topic.name) { @@ -526,29 +526,23 @@ export const Topics: React.FC = ({ assistant: _assistant, activeTopic, se setTargetTopic(topic)} className={classNames(isActive ? 'active' : '', singlealone ? 'singlealone' : '')} - onClick={editingTopicId === topic.id && topicEdit.isEditing ? undefined : () => onSwitchTopic(topic)} + onClick={editingTopicId === topic.id && isEditing ? undefined : () => onSwitchTopic(topic)} style={{ borderRadius, - cursor: editingTopicId === topic.id && topicEdit.isEditing ? 'default' : 'pointer' + cursor: editingTopicId === topic.id && isEditing ? 'default' : 'pointer' }}> {isPending(topic.id) && !isActive && } {isFulfilled(topic.id) && !isActive && } - {editingTopicId === topic.id && topicEdit.isEditing ? ( - e.stopPropagation()} - /> + {editingTopicId === topic.id && isEditing ? ( + e.stopPropagation()} /> ) : ( { setEditingTopicId(topic.id) - topicEdit.startEdit(topic.name) + startEdit(topic.name) }}> {topicName} diff --git a/src/renderer/src/pages/notes/NotesPage.tsx b/src/renderer/src/pages/notes/NotesPage.tsx index 105ceee36..7692aa997 100644 --- a/src/renderer/src/pages/notes/NotesPage.tsx +++ b/src/renderer/src/pages/notes/NotesPage.tsx @@ -295,6 +295,16 @@ const NotesPage: FC = () => { break } + case 'refresh': { + // 批量操作完成后的单次刷新 + logger.debug('Received refresh event, triggering tree refresh') + const refresh = refreshTreeRef.current + if (refresh) { + await refresh() + } + break + } + case 'add': case 'addDir': case 'unlink': @@ -621,7 +631,27 @@ const NotesPage: FC = () => { throw new Error('No folder path selected') } - const result = await uploadNotes(files, targetFolderPath) + // Validate uploadNotes function is available + if (typeof uploadNotes !== 'function') { + logger.error('uploadNotes function is not available', { uploadNotes }) + window.toast.error(t('notes.upload_failed')) + return + } + + let result: Awaited> + try { + result = await uploadNotes(files, targetFolderPath) + } catch (uploadError) { + logger.error('Upload operation failed:', uploadError as Error) + throw uploadError + } + + // Validate result object + if (!result || typeof result !== 'object') { + logger.error('Invalid upload result:', { result }) + window.toast.error(t('notes.upload_failed')) + return + } // 检查上传结果 if (result.fileCount === 0) { diff --git a/src/renderer/src/pages/notes/NotesSidebar.tsx b/src/renderer/src/pages/notes/NotesSidebar.tsx index 8663d9625..6ed144dd7 100644 --- a/src/renderer/src/pages/notes/NotesSidebar.tsx +++ b/src/renderer/src/pages/notes/NotesSidebar.tsx @@ -1,47 +1,31 @@ -import { loggerService } from '@logger' -import HighlightText from '@renderer/components/HighlightText' -import { DeleteIcon } from '@renderer/components/Icons' -import SaveToKnowledgePopup from '@renderer/components/Popups/SaveToKnowledgePopup' -import Scrollbar from '@renderer/components/Scrollbar' -import { useInPlaceEdit } from '@renderer/hooks/useInPlaceEdit' -import { useKnowledgeBases } from '@renderer/hooks/useKnowledge' +import { DynamicVirtualList } from '@renderer/components/VirtualList' import { useActiveNode } from '@renderer/hooks/useNotesQuery' import NotesSidebarHeader from '@renderer/pages/notes/NotesSidebarHeader' -import { fetchNoteSummary } from '@renderer/services/ApiService' -import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService' -import type { SearchMatch, SearchResult } from '@renderer/services/NotesSearchService' -import type { RootState } from '@renderer/store' import { useAppSelector } from '@renderer/store' import { selectSortType } from '@renderer/store/note' import type { NotesSortType, NotesTreeNode } from '@renderer/types/note' -import { exportNote } from '@renderer/utils/export' -import { useVirtualizer } from '@tanstack/react-virtual' -import type { InputRef, MenuProps } from 'antd' -import { Dropdown, Input } from 'antd' -import type { ItemType, MenuItemType } from 'antd/es/menu/interface' -import { - ChevronDown, - ChevronRight, - Edit3, - File, - FilePlus, - FileSearch, - Folder, - FolderOpen, - Loader2, - Sparkles, - Star, - StarOff, - UploadIcon, - X -} from 'lucide-react' -import type { FC, Ref } from 'react' +import type { MenuProps } from 'antd' +import { Dropdown } from 'antd' +import { FilePlus, Folder, FolderUp, Loader2, Upload, X } from 'lucide-react' +import type { FC } from 'react' import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { useSelector } from 'react-redux' import styled from 'styled-components' +import TreeNode from './components/TreeNode' +import { + NotesActionsContext, + NotesDragContext, + NotesEditingContext, + NotesSearchContext, + NotesSelectionContext, + NotesUIContext +} from './context/NotesContexts' import { useFullTextSearch } from './hooks/useFullTextSearch' +import { useNotesDragAndDrop } from './hooks/useNotesDragAndDrop' +import { useNotesEditing } from './hooks/useNotesEditing' +import { useNotesFileUpload } from './hooks/useNotesFileUpload' +import { useNotesMenu } from './hooks/useNotesMenu' interface NotesSidebarProps { onCreateFolder: (name: string, targetFolderId?: string) => void @@ -58,278 +42,6 @@ interface NotesSidebarProps { selectedFolderId?: string | null } -const logger = loggerService.withContext('NotesSidebar') - -interface TreeNodeProps { - node: NotesTreeNode | SearchResult - depth: number - selectedFolderId?: string | null - activeNodeId?: string - editingNodeId: string | null - renamingNodeIds: Set - newlyRenamedNodeIds: Set - draggedNodeId: string | null - dragOverNodeId: string | null - dragPosition: 'before' | 'inside' | 'after' - inPlaceEdit: any - getMenuItems: (node: NotesTreeNode) => any[] - onSelectNode: (node: NotesTreeNode) => void - onToggleExpanded: (nodeId: string) => void - onDragStart: (e: React.DragEvent, node: NotesTreeNode) => void - onDragOver: (e: React.DragEvent, node: NotesTreeNode) => void - onDragLeave: () => void - onDrop: (e: React.DragEvent, node: NotesTreeNode) => void - onDragEnd: () => void - renderChildren?: boolean // 控制是否渲染子节点 - searchKeyword?: string // 搜索关键词,用于高亮 - showMatches?: boolean // 是否显示匹配预览 - openDropdownKey: string | null - onDropdownOpenChange: (key: string | null) => void -} - -const TreeNode = memo( - ({ - node, - depth, - selectedFolderId, - activeNodeId, - editingNodeId, - renamingNodeIds, - newlyRenamedNodeIds, - draggedNodeId, - dragOverNodeId, - dragPosition, - inPlaceEdit, - getMenuItems, - onSelectNode, - onToggleExpanded, - onDragStart, - onDragOver, - onDragLeave, - onDrop, - onDragEnd, - renderChildren = true, - searchKeyword = '', - showMatches = false, - openDropdownKey, - onDropdownOpenChange - }) => { - const { t } = useTranslation() - const [showAllMatches, setShowAllMatches] = useState(false) - - // 检查是否是搜索结果 - const searchResult = 'matchType' in node ? (node as SearchResult) : null - const hasMatches = searchResult && searchResult.matches && searchResult.matches.length > 0 - - // 处理匹配项点击 - const handleMatchClick = useCallback( - (match: SearchMatch) => { - // 发送定位事件 - EventEmitter.emit(EVENT_NAMES.LOCATE_NOTE_LINE, { - noteId: node.id, - lineNumber: match.lineNumber, - lineContent: match.lineContent - }) - }, - [node] - ) - - const isActive = selectedFolderId - ? node.type === 'folder' && node.id === selectedFolderId - : node.id === activeNodeId - const isEditing = editingNodeId === node.id && inPlaceEdit.isEditing - const isRenaming = renamingNodeIds.has(node.id) - const isNewlyRenamed = newlyRenamedNodeIds.has(node.id) - const hasChildren = node.children && node.children.length > 0 - const isDragging = draggedNodeId === node.id - const isDragOver = dragOverNodeId === node.id - const isDragBefore = isDragOver && dragPosition === 'before' - const isDragInside = isDragOver && dragPosition === 'inside' - const isDragAfter = isDragOver && dragPosition === 'after' - - const getNodeNameClassName = () => { - if (isRenaming) return 'shimmer' - if (isNewlyRenamed) return 'typing' - return '' - } - - const displayName = useMemo(() => { - if (!searchKeyword) { - return node.name - } - - const name = node.name ?? '' - if (!name) { - return name - } - - const keyword = searchKeyword - const nameLower = name.toLowerCase() - const keywordLower = keyword.toLowerCase() - const matchStart = nameLower.indexOf(keywordLower) - - if (matchStart === -1) { - return name - } - - const matchEnd = matchStart + keyword.length - const beforeMatch = Math.min(2, matchStart) - const contextStart = matchStart - beforeMatch - const contextLength = 50 - const contextEnd = Math.min(name.length, matchEnd + contextLength) - - const prefix = contextStart > 0 ? '...' : '' - const suffix = contextEnd < name.length ? '...' : '' - - return prefix + name.substring(contextStart, contextEnd) + suffix - }, [node.name, searchKeyword]) - - return ( -
- onDropdownOpenChange(open ? node.id : null)}> -
e.stopPropagation()}> - onDragStart(e, node)} - onDragOver={(e) => onDragOver(e, node)} - onDragLeave={onDragLeave} - onDrop={(e) => onDrop(e, node)} - onDragEnd={onDragEnd}> - onSelectNode(node)}> - - - {node.type === 'folder' && ( - { - e.stopPropagation() - onToggleExpanded(node.id) - }} - title={node.expanded ? t('notes.collapse') : t('notes.expand')}> - {node.expanded ? : } - - )} - - - {node.type === 'folder' ? ( - node.expanded ? ( - - ) : ( - - ) - ) : ( - - )} - - - {isEditing ? ( - } - value={inPlaceEdit.editValue} - onChange={inPlaceEdit.handleInputChange} - onBlur={inPlaceEdit.saveEdit} - onKeyDown={inPlaceEdit.handleKeyDown} - onClick={(e) => e.stopPropagation()} - autoFocus - size="small" - /> - ) : ( - - - {searchKeyword ? : node.name} - - {searchResult && searchResult.matchType && searchResult.matchType !== 'filename' && ( - - {searchResult.matchType === 'both' ? t('notes.search.both') : t('notes.search.content')} - - )} - - )} - - -
- - - {showMatches && hasMatches && ( - - {(showAllMatches ? searchResult!.matches! : searchResult!.matches!.slice(0, 3)).map((match, idx) => ( - handleMatchClick(match)}> - {match.lineNumber} - - - - - ))} - {searchResult!.matches!.length > 3 && ( - { - e.stopPropagation() - setShowAllMatches(!showAllMatches) - }}> - {showAllMatches ? ( - <> - - {t('notes.search.show_less')} - - ) : ( - <> - +{searchResult!.matches!.length - 3}{' '} - {t('notes.search.more_matches')} - - )} - - )} - - )} - - {renderChildren && node.type === 'folder' && node.expanded && hasChildren && ( -
- {node.children!.map((child) => ( - - ))} -
- )} -
- ) - } -) - const NotesSidebar: FC = ({ onCreateFolder, onCreateNote, @@ -345,28 +57,52 @@ const NotesSidebar: FC = ({ selectedFolderId }) => { const { t } = useTranslation() - const { bases } = useKnowledgeBases() const { activeNode } = useActiveNode(notesTree) const sortType = useAppSelector(selectSortType) - const exportMenuOptions = useSelector((state: RootState) => state.settings.exportMenuOptions) - const [editingNodeId, setEditingNodeId] = useState(null) - const [renamingNodeIds, setRenamingNodeIds] = useState>(new Set()) - const [newlyRenamedNodeIds, setNewlyRenamedNodeIds] = useState>(new Set()) - const [draggedNodeId, setDraggedNodeId] = useState(null) - const [dragOverNodeId, setDragOverNodeId] = useState(null) - const [dragPosition, setDragPosition] = useState<'before' | 'inside' | 'after'>('inside') + const [isShowStarred, setIsShowStarred] = useState(false) const [isShowSearch, setIsShowSearch] = useState(false) const [searchKeyword, setSearchKeyword] = useState('') const [isDragOverSidebar, setIsDragOverSidebar] = useState(false) const [openDropdownKey, setOpenDropdownKey] = useState(null) - const dragNodeRef = useRef(null) - const scrollbarRef = useRef(null) + const notesTreeRef = useRef(notesTree) + const virtualListRef = useRef(null) const trimmedSearchKeyword = useMemo(() => searchKeyword.trim(), [searchKeyword]) const hasSearchKeyword = trimmedSearchKeyword.length > 0 - // 全文搜索配置 + const { editingNodeId, renamingNodeIds, newlyRenamedNodeIds, inPlaceEdit, handleStartEdit, handleAutoRename } = + useNotesEditing({ onRenameNode }) + + const { + draggedNodeId, + dragOverNodeId, + dragPosition, + handleDragStart, + handleDragOver, + handleDragLeave, + handleDrop, + handleDragEnd + } = useNotesDragAndDrop({ onMoveNode }) + + const { handleDropFiles, handleSelectFiles, handleSelectFolder } = useNotesFileUpload({ + onUploadFiles, + setIsDragOverSidebar + }) + + const { getMenuItems } = useNotesMenu({ + renamingNodeIds, + onCreateNote, + onCreateFolder, + onRenameNode, + onToggleStar, + onDeleteNode, + onSelectNode, + handleStartEdit, + handleAutoRename, + activeNode + }) + const searchOptions = useMemo( () => ({ debounceMs: 300, @@ -388,268 +124,10 @@ const NotesSidebar: FC = ({ stats: searchStats } = useFullTextSearch(searchOptions) - const inPlaceEdit = useInPlaceEdit({ - onSave: (newName: string) => { - if (editingNodeId && newName) { - onRenameNode(editingNodeId, newName) - logger.debug(`Renamed node ${editingNodeId} to "${newName}"`) - } - setEditingNodeId(null) - }, - onCancel: () => { - setEditingNodeId(null) - } - }) - - // 滚动到活动节点 - useEffect(() => { - if (activeNode?.id && !isShowStarred && !isShowSearch && scrollbarRef.current) { - // 延迟一下确保DOM已更新 - setTimeout(() => { - const scrollContainer = scrollbarRef.current as HTMLElement - if (scrollContainer) { - const activeElement = scrollContainer.querySelector(`[data-node-id="${activeNode.id}"]`) as HTMLElement - if (activeElement) { - // 获取元素相对于滚动容器的位置 - const containerHeight = scrollContainer.clientHeight - const elementOffsetTop = activeElement.offsetTop - const elementHeight = activeElement.offsetHeight - const currentScrollTop = scrollContainer.scrollTop - - // 检查元素是否在可视区域内 - const elementTop = elementOffsetTop - const elementBottom = elementOffsetTop + elementHeight - const viewTop = currentScrollTop - const viewBottom = currentScrollTop + containerHeight - - // 如果元素不在可视区域内，滚动到中心位置 - if (elementTop < viewTop || elementBottom > viewBottom) { - const targetScrollTop = elementOffsetTop - (containerHeight - elementHeight) / 2 - scrollContainer.scrollTo({ - top: Math.max(0, targetScrollTop), - behavior: 'instant' - }) - } - } - } - }, 200) - } - }, [activeNode?.id, isShowStarred, isShowSearch]) - - const handleCreateFolder = useCallback(() => { - onCreateFolder(t('notes.untitled_folder')) - }, [onCreateFolder, t]) - - const handleCreateNote = useCallback(() => { - onCreateNote(t('notes.untitled_note')) - }, [onCreateNote, t]) - - const handleSelectSortType = useCallback( - (selectedSortType: NotesSortType) => { - onSortNodes(selectedSortType) - }, - [onSortNodes] - ) - - const handleStartEdit = useCallback( - (node: NotesTreeNode) => { - setEditingNodeId(node.id) - inPlaceEdit.startEdit(node.name) - }, - [inPlaceEdit] - ) - - const handleDeleteNode = useCallback( - (node: NotesTreeNode) => { - const confirmText = - node.type === 'folder' - ? t('notes.delete_folder_confirm', { name: node.name }) - : t('notes.delete_note_confirm', { name: node.name }) - - window.modal.confirm({ - title: t('notes.delete'), - content: confirmText, - centered: true, - okButtonProps: { danger: true }, - onOk: () => { - onDeleteNode(node.id) - } - }) - }, - [onDeleteNode, t] - ) - - const handleExportKnowledge = useCallback( - async (note: NotesTreeNode) => { - try { - if (bases.length === 0) { - window.toast.warning(t('chat.save.knowledge.empty.no_knowledge_base')) - return - } - - const result = await SaveToKnowledgePopup.showForNote(note) - - if (result?.success) { - window.toast.success(t('notes.export_success', { count: result.savedCount })) - } - } catch (error) { - window.toast.error(t('notes.export_failed')) - logger.error(`Failed to export note to knowledge base: ${error}`) - } - }, - [bases.length, t] - ) - - const handleImageAction = useCallback( - async (node: NotesTreeNode, platform: 'copyImage' | 'exportImage') => { - try { - if (activeNode?.id !== node.id) { - onSelectNode(node) - await new Promise((resolve) => setTimeout(resolve, 500)) - } - - await exportNote({ node, platform }) - } catch (error) { - logger.error(`Failed to ${platform === 'copyImage' ? 'copy' : 'export'} as image:`, error as Error) - window.toast.error(t('common.copy_failed')) - } - }, - [activeNode, onSelectNode, t] - ) - - const handleAutoRename = useCallback( - async (note: NotesTreeNode) => { - if (note.type !== 'file') return - - setRenamingNodeIds((prev) => new Set(prev).add(note.id)) - try { - const content = await window.api.file.readExternal(note.externalPath) - if (!content || content.trim().length === 0) { - window.toast.warning(t('notes.auto_rename.empty_note')) - return - } - - const summaryText = await fetchNoteSummary({ content }) - if (summaryText) { - onRenameNode(note.id, summaryText) - window.toast.success(t('notes.auto_rename.success')) - } else { - window.toast.error(t('notes.auto_rename.failed')) - } - } catch (error) { - window.toast.error(t('notes.auto_rename.failed')) - logger.error(`Failed to auto-rename note: ${error}`) - } finally { - setRenamingNodeIds((prev) => { - const next = new Set(prev) - next.delete(note.id) - return next - }) - - setNewlyRenamedNodeIds((prev) => new Set(prev).add(note.id)) - - setTimeout(() => { - setNewlyRenamedNodeIds((prev) => { - const next = new Set(prev) - next.delete(note.id) - return next - }) - }, 700) - } - }, - [onRenameNode, t] - ) - - const handleDragStart = useCallback((e: React.DragEvent, node: NotesTreeNode) => { - setDraggedNodeId(node.id) - e.dataTransfer.effectAllowed = 'move' - e.dataTransfer.setData('text/plain', node.id) - - dragNodeRef.current = e.currentTarget as HTMLDivElement - - if (e.currentTarget.parentElement) { - const rect = e.currentTarget.getBoundingClientRect() - const ghostElement = e.currentTarget.cloneNode(true) as HTMLElement - ghostElement.style.width = `${rect.width}px` - ghostElement.style.opacity = '0.7' - ghostElement.style.position = 'absolute' - ghostElement.style.top = '-1000px' - document.body.appendChild(ghostElement) - e.dataTransfer.setDragImage(ghostElement, 10, 10) - setTimeout(() => { - document.body.removeChild(ghostElement) - }, 0) - } - }, []) - - const handleDragOver = useCallback( - (e: React.DragEvent, node: NotesTreeNode) => { - e.preventDefault() - e.dataTransfer.dropEffect = 'move' - - if (draggedNodeId === node.id) { - return - } - - setDragOverNodeId(node.id) - - const rect = (e.currentTarget as HTMLElement).getBoundingClientRect() - const mouseY = e.clientY - const thresholdTop = rect.top + rect.height * 0.3 - const thresholdBottom = rect.bottom - rect.height * 0.3 - - if (mouseY < thresholdTop) { - setDragPosition('before') - } else if (mouseY > thresholdBottom) { - setDragPosition('after') - } else { - setDragPosition(node.type === 'folder' ? 'inside' : 'after') - } - }, - [draggedNodeId] - ) - - const handleDragLeave = useCallback(() => { - setDragOverNodeId(null) - setDragPosition('inside') - }, []) - - const handleDrop = useCallback( - (e: React.DragEvent, targetNode: NotesTreeNode) => { - e.preventDefault() - const draggedId = e.dataTransfer.getData('text/plain') - - if (draggedId && draggedId !== targetNode.id) { - onMoveNode(draggedId, targetNode.id, dragPosition) - } - - setDraggedNodeId(null) - setDragOverNodeId(null) - setDragPosition('inside') - }, - [onMoveNode, dragPosition] - ) - - const handleDragEnd = useCallback(() => { - setDraggedNodeId(null) - setDragOverNodeId(null) - setDragPosition('inside') - }, []) - - const handleToggleStarredView = useCallback(() => { - setIsShowStarred(!isShowStarred) - }, [isShowStarred]) - - const handleToggleSearchView = useCallback(() => { - setIsShowSearch(!isShowSearch) - }, [isShowSearch]) - - // 同步 notesTree 到 ref useEffect(() => { notesTreeRef.current = notesTree }, [notesTree]) - // 触发全文搜索 useEffect(() => { if (!isShowSearch) { reset() @@ -663,6 +141,61 @@ const NotesSidebar: FC = ({ } }, [isShowSearch, hasSearchKeyword, trimmedSearchKeyword, search, reset]) + // --- Logic --- + + const handleCreateFolder = useCallback(() => { + onCreateFolder(t('notes.untitled_folder')) + }, [onCreateFolder, t]) + + const handleCreateNote = useCallback(() => { + onCreateNote(t('notes.untitled_note')) + }, [onCreateNote, t]) + + const handleToggleStarredView = useCallback(() => { + setIsShowStarred(!isShowStarred) + }, [isShowStarred]) + + const handleToggleSearchView = useCallback(() => { + setIsShowSearch(!isShowSearch) + }, [isShowSearch]) + + const handleSelectSortType = useCallback( + (selectedSortType: NotesSortType) => { + onSortNodes(selectedSortType) + }, + [onSortNodes] + ) + + const getEmptyAreaMenuItems = useCallback((): MenuProps['items'] => { + return [ + { + label: t('notes.new_note'), + key: 'new_note', + icon: , + onClick: handleCreateNote + }, + { + label: t('notes.new_folder'), + key: 'new_folder', + icon: , + onClick: handleCreateFolder + }, + { type: 'divider' }, + { + label: t('notes.upload_files'), + key: 'upload_files', + icon: , + onClick: handleSelectFiles + }, + { + label: t('notes.upload_folder'), + key: 'upload_folder', + icon: , + onClick: handleSelectFolder + } + ] + }, [t, handleCreateNote, handleCreateFolder, handleSelectFiles, handleSelectFolder]) + // Flatten tree nodes for virtualization and filtering const flattenedNodes = useMemo(() => { const flattenForVirtualization = ( @@ -706,493 +239,210 @@ const NotesSidebar: FC = ({ } if (isShowStarred) { - // For filtered views, return flat list without virtualization for simplicity const filteredNodes = flattenForFiltering(notesTree) return filteredNodes.map((node) => ({ node, depth: 0 })) } - // For normal tree view, use hierarchical flattening for virtualization return flattenForVirtualization(notesTree) }, [notesTree, isShowStarred, isShowSearch, hasSearchKeyword, searchResults]) - // Use virtualization only for normal tree view with many items - const shouldUseVirtualization = !isShowStarred && !isShowSearch && flattenedNodes.length > 100 - - const parentRef = useRef(null) - - const virtualizer = useVirtualizer({ - count: flattenedNodes.length, - getScrollElement: () => parentRef.current, - estimateSize: () => 28, // Estimated height of each tree item - overscan: 10 - }) - - const filteredTree = useMemo(() => { - if (isShowStarred || isShowSearch) { - return flattenedNodes.map(({ node }) => node) + // Scroll to active node + useEffect(() => { + if (activeNode?.id && !isShowStarred && !isShowSearch && virtualListRef.current) { + setTimeout(() => { + const activeIndex = flattenedNodes.findIndex(({ node }) => node.id === activeNode.id) + if (activeIndex !== -1) { + virtualListRef.current?.scrollToIndex(activeIndex, { + align: 'center', + behavior: 'auto' + }) + } + }, 200) } - return notesTree - }, [flattenedNodes, isShowStarred, isShowSearch, notesTree]) + }, [activeNode?.id, isShowStarred, isShowSearch, flattenedNodes]) - const getMenuItems = useCallback( - (node: NotesTreeNode) => { - const baseMenuItems: MenuProps['items'] = [] + // Determine which items should be sticky (only folders in normal view) + const isSticky = useCallback( + (index: number) => { + const item = flattenedNodes[index] + if (!item) return false - // only show auto rename for file for now - if (node.type !== 'folder') { - baseMenuItems.push({ - label: t('notes.auto_rename.label'), - key: 'auto-rename', - icon: , - disabled: renamingNodeIds.has(node.id), - onClick: () => { - handleAutoRename(node) - } - }) - } - - if (node.type === 'folder') { - baseMenuItems.push( - { - label: t('notes.new_note'), - key: 'new_note', - icon: , - onClick: () => { - onCreateNote(t('notes.untitled_note'), node.id) - } - }, - { - label: t('notes.new_folder'), - key: 'new_folder', - icon: , - onClick: () => { - onCreateFolder(t('notes.untitled_folder'), node.id) - } - }, - { type: 'divider' } - ) - } - - baseMenuItems.push( - { - label: t('notes.rename'), - key: 'rename', - icon: , - onClick: () => { - handleStartEdit(node) - } - }, - { - label: t('notes.open_outside'), - key: 'open_outside', - icon: , - onClick: () => { - window.api.openPath(node.externalPath) - } - } - ) - if (node.type !== 'folder') { - baseMenuItems.push( - { - label: node.isStarred ? t('notes.unstar') : t('notes.star'), - key: 'star', - icon: node.isStarred ? : , - onClick: () => { - onToggleStar(node.id) - } - }, - { - label: t('notes.export_knowledge'), - key: 'export_knowledge', - icon: , - onClick: () => { - handleExportKnowledge(node) - } - }, - { - label: t('chat.topics.export.title'), - key: 'export', - icon: , - children: [ - exportMenuOptions.image && { - label: t('chat.topics.copy.image'), - key: 'copy-image', - onClick: () => handleImageAction(node, 'copyImage') - }, - exportMenuOptions.image && { - label: t('chat.topics.export.image'), - key: 'export-image', - onClick: () => handleImageAction(node, 'exportImage') - }, - exportMenuOptions.markdown && { - label: t('chat.topics.export.md.label'), - key: 'markdown', - onClick: () => exportNote({ node, platform: 'markdown' }) - }, - exportMenuOptions.docx && { - label: t('chat.topics.export.word'), - key: 'word', - onClick: () => exportNote({ node, platform: 'docx' }) - }, - exportMenuOptions.notion && { - label: t('chat.topics.export.notion'), - key: 'notion', - onClick: () => exportNote({ node, platform: 'notion' }) - }, - exportMenuOptions.yuque && { - label: t('chat.topics.export.yuque'), - key: 'yuque', - onClick: () => exportNote({ node, platform: 'yuque' }) - }, - exportMenuOptions.obsidian && { - label: t('chat.topics.export.obsidian'), - key: 'obsidian', - onClick: () => exportNote({ node, platform: 'obsidian' }) - }, - exportMenuOptions.joplin && { - label: t('chat.topics.export.joplin'), - key: 'joplin', - onClick: () => exportNote({ node, platform: 'joplin' }) - }, - exportMenuOptions.siyuan && { - label: t('chat.topics.export.siyuan'), - key: 'siyuan', - onClick: () => exportNote({ node, platform: 'siyuan' }) - } - ].filter(Boolean) as ItemType[] - } - ) - } - baseMenuItems.push( - { type: 'divider' }, - { - label: t('notes.delete'), - danger: true, - key: 'delete', - icon: , - onClick: () => { - handleDeleteNode(node) - } - } - ) - - return baseMenuItems + // Only folders should be sticky, and only in normal view (not search or starred) + return item.node.type === 'folder' && !isShowSearch && !isShowStarred }, - [ - t, - handleStartEdit, - onToggleStar, - handleExportKnowledge, - handleImageAction, - handleDeleteNode, + [flattenedNodes, isShowSearch, isShowStarred] + ) + + // Get the depth of an item for hierarchical sticky positioning + const getItemDepth = useCallback( + (index: number) => { + const item = flattenedNodes[index] + return item?.depth ?? 0 + }, + [flattenedNodes] + ) + + const actionsValue = useMemo( + () => ({ + getMenuItems, + onSelectNode, + onToggleExpanded, + onDropdownOpenChange: setOpenDropdownKey + }), + [getMenuItems, onSelectNode, onToggleExpanded] + ) + + const selectionValue = useMemo( + () => ({ + selectedFolderId, + activeNodeId: activeNode?.id + }), + [selectedFolderId, activeNode?.id] + ) + + const editingValue = useMemo( + () => ({ + editingNodeId, renamingNodeIds, - handleAutoRename, - exportMenuOptions, - onCreateNote, - onCreateFolder + newlyRenamedNodeIds, + inPlaceEdit + }), + [editingNodeId, renamingNodeIds, newlyRenamedNodeIds, inPlaceEdit] + ) + + const dragValue = useMemo( + () => ({ + draggedNodeId, + dragOverNodeId, + dragPosition, + onDragStart: handleDragStart, + onDragOver: handleDragOver, + onDragLeave: handleDragLeave, + onDrop: handleDrop, + onDragEnd: handleDragEnd + }), + [ + draggedNodeId, + dragOverNodeId, + dragPosition, + handleDragStart, + handleDragOver, + handleDragLeave, + handleDrop, + handleDragEnd ] ) - const handleDropFiles = useCallback( - async (e: React.DragEvent) => { - e.preventDefault() - setIsDragOverSidebar(false) - - // 处理文件夹拖拽：从 dataTransfer.items 获取完整的文件路径信息 - const items = Array.from(e.dataTransfer.items) - const files: File[] = [] - - const processEntry = async (entry: FileSystemEntry, path: string = '') => { - if (entry.isFile) { - const fileEntry = entry as FileSystemFileEntry - return new Promise((resolve) => { - fileEntry.file((file) => { - // 手动设置 webkitRelativePath 以保持文件夹结构 - Object.defineProperty(file, 'webkitRelativePath', { - value: path + file.name, - writable: false - }) - files.push(file) - resolve() - }) - }) - } else if (entry.isDirectory) { - const dirEntry = entry as FileSystemDirectoryEntry - const reader = dirEntry.createReader() - return new Promise((resolve) => { - reader.readEntries(async (entries) => { - const promises = entries.map((subEntry) => processEntry(subEntry, path + entry.name + '/')) - await Promise.all(promises) - resolve() - }) - }) - } - } - - // 如果支持 DataTransferItem API（文件夹拖拽） - if (items.length > 0 && items[0].webkitGetAsEntry()) { - const promises = items.map((item) => { - const entry = item.webkitGetAsEntry() - return entry ? processEntry(entry) : Promise.resolve() - }) - - await Promise.all(promises) - - if (files.length > 0) { - onUploadFiles(files) - } - } else { - const regularFiles = Array.from(e.dataTransfer.files) - if (regularFiles.length > 0) { - onUploadFiles(regularFiles) - } - } - }, - [onUploadFiles] + const searchValue = useMemo( + () => ({ + searchKeyword: isShowSearch ? trimmedSearchKeyword : '', + showMatches: isShowSearch + }), + [isShowSearch, trimmedSearchKeyword] ) - const handleClickToSelectFiles = useCallback(() => { - const fileInput = document.createElement('input') - fileInput.type = 'file' - fileInput.multiple = true - fileInput.accept = '.md,.markdown' - fileInput.webkitdirectory = false - - fileInput.onchange = (e) => { - const target = e.target as HTMLInputElement - if (target.files && target.files.length > 0) { - const selectedFiles = Array.from(target.files) - onUploadFiles(selectedFiles) - } - fileInput.remove() - } - - fileInput.click() - }, [onUploadFiles]) - - const getEmptyAreaMenuItems = useCallback((): MenuProps['items'] => { - return [ - { - label: t('notes.new_note'), - key: 'new_note', - icon: , - onClick: handleCreateNote - }, - { - label: t('notes.new_folder'), - key: 'new_folder', - icon: , - onClick: handleCreateFolder - } - ] - }, [t, handleCreateNote, handleCreateFolder]) - return ( - { - e.preventDefault() - if (!draggedNodeId) { - setIsDragOverSidebar(true) - } - }} - onDragLeave={() => setIsDragOverSidebar(false)} - onDrop={(e) => { - if (!draggedNodeId) { - handleDropFiles(e) - } - }}> - + + + + + + + { + e.preventDefault() + if (!draggedNodeId) { + setIsDragOverSidebar(true) + } + }} + onDragLeave={() => setIsDragOverSidebar(false)} + onDrop={(e) => { + if (!draggedNodeId) { + handleDropFiles(e) + } + }}> + - - {isShowSearch && isSearching && ( - - - {t('notes.search.searching')} - - - - - )} - {isShowSearch && !isSearching && hasSearchKeyword && searchStats.total > 0 && ( - - - {t('notes.search.found_results', { - count: searchStats.total, - nameCount: searchStats.fileNameMatches, - contentCount: searchStats.contentMatches + searchStats.bothMatches - })} - - - )} - {shouldUseVirtualization ? ( - setOpenDropdownKey(open ? 'empty-area' : null)}> - -
- {virtualizer.getVirtualItems().map((virtualItem) => { - const { node, depth } = flattenedNodes[virtualItem.index] - return ( -
-
+ + {isShowSearch && isSearching && ( + + + {t('notes.search.searching')} + + + + + )} + {isShowSearch && !isSearching && hasSearchKeyword && searchStats.total > 0 && ( + + + {t('notes.search.found_results', { + count: searchStats.total, + nameCount: searchStats.fileNameMatches, + contentCount: searchStats.contentMatches + searchStats.bothMatches + })} + + + )} + setOpenDropdownKey(open ? 'empty-area' : null)}> + 28} + itemContainerStyle={{ padding: '8px 8px 0 8px' }} + overscan={10} + isSticky={isSticky} + getItemDepth={getItemDepth}> + {({ node, depth }) => } + + + {!isShowStarred && !isShowSearch && ( +
-
- ) - })} -
- {!isShowStarred && !isShowSearch && ( - - - - - - - {t('notes.drop_markdown_hint')} - - - - )} - - - ) : ( - setOpenDropdownKey(open ? 'empty-area' : null)}> - - - {isShowStarred || isShowSearch - ? filteredTree.map((node) => ( - - )) - : notesTree.map((node) => ( - - ))} - {!isShowStarred && !isShowSearch && ( - - - - - - - {t('notes.drop_markdown_hint')} - - - - )} - - - - )} - + )} + - {isDragOverSidebar && } - + {isDragOverSidebar && } + + + + + + + ) } -const SidebarContainer = styled.div` +export const SidebarContainer = styled.div` width: 250px; min-width: 250px; height: calc(100vh - var(--navbar-height)); @@ -1204,7 +454,7 @@ const SidebarContainer = styled.div` position: relative; ` -const NotesTreeContainer = styled.div` +export const NotesTreeContainer = styled.div` flex: 1; overflow: hidden; display: flex; @@ -1212,183 +462,7 @@ const NotesTreeContainer = styled.div` height: calc(100vh - var(--navbar-height) - 45px); ` -const VirtualizedTreeContainer = styled.div` - flex: 1; - height: 100%; - overflow: auto; - position: relative; - padding-top: 10px; -` - -const StyledScrollbar = styled(Scrollbar)` - flex: 1; - height: 100%; - min-height: 0; -` - -const TreeContent = styled.div` - padding: 8px; -` - -const TreeNodeContainer = styled.div<{ - active: boolean - depth: number - isDragging?: boolean - isDragOver?: boolean - isDragBefore?: boolean - isDragInside?: boolean - isDragAfter?: boolean -}>` - display: flex; - align-items: center; - justify-content: space-between; - padding: 4px 6px; - border-radius: 4px; - cursor: pointer; - margin-bottom: 2px; - background-color: ${(props) => { - if (props.isDragInside) return 'var(--color-primary-background)' - if (props.active) return 'var(--color-background-soft)' - return 'transparent' - }}; - border: 0.5px solid - ${(props) => { - if (props.isDragInside) return 'var(--color-primary)' - if (props.active) return 'var(--color-border)' - return 'transparent' - }}; - opacity: ${(props) => (props.isDragging ? 0.5 : 1)}; - transition: all 0.2s ease; - position: relative; - - &:hover { - background-color: var(--color-background-soft); - - .node-actions { - opacity: 1; - } - } - - /* 添加拖拽指示线 */ - ${(props) => - props.isDragBefore && - ` - &::before { - content: ''; - position: absolute; - top: -2px; - left: 0; - right: 0; - height: 2px; - background-color: var(--color-primary); - border-radius: 1px; - } - `} - - ${(props) => - props.isDragAfter && - ` - &::after { - content: ''; - position: absolute; - bottom: -2px; - left: 0; - right: 0; - height: 2px; - background-color: var(--color-primary); - border-radius: 1px; - } - `} -` - -const TreeNodeContent = styled.div` - display: flex; - align-items: center; - flex: 1; - min-width: 0; -` - -const NodeIndent = styled.div<{ depth: number }>` - width: ${(props) => props.depth * 16}px; - flex-shrink: 0; -` - -const ExpandIcon = styled.div` - width: 16px; - height: 16px; - display: flex; - align-items: center; - justify-content: center; - color: var(--color-text-2); - margin-right: 4px; - - &:hover { - color: var(--color-text); - } -` - -const NodeIcon = styled.div` - display: flex; - align-items: center; - justify-content: center; - margin-right: 8px; - color: var(--color-text-2); - flex-shrink: 0; -` - -const NodeName = styled.div` - flex: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 13px; - color: var(--color-text); - position: relative; - will-change: background-position, width; - - --color-shimmer-mid: var(--color-text-1); - --color-shimmer-end: color-mix(in srgb, var(--color-text-1) 25%, transparent); - - &.shimmer { - background: linear-gradient(to left, var(--color-shimmer-end), var(--color-shimmer-mid), var(--color-shimmer-end)); - background-size: 200% 100%; - background-clip: text; - color: transparent; - animation: shimmer 3s linear infinite; - } - - &.typing { - display: block; - white-space: nowrap; - overflow: hidden; - animation: typewriter 0.5s steps(40, end); - } - - @keyframes shimmer { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } - } - - @keyframes typewriter { - from { - width: 0; - } - to { - width: 100%; - } - } -` - -const EditInput = styled(Input)` - flex: 1; - font-size: 13px; -` - -const DragOverIndicator = styled.div` +export const DragOverIndicator = styled.div` position: absolute; top: 0; right: 0; @@ -1400,31 +474,14 @@ const DragOverIndicator = styled.div` pointer-events: none; ` -const DropHintNode = styled.div` - margin: 6px 0; - margin-bottom: 20px; - - ${TreeNodeContainer} { - background-color: transparent; - border: 1px dashed var(--color-border); - cursor: default; - opacity: 0.6; - - &:hover { - background-color: var(--color-background-soft); - opacity: 0.8; - } - } -` - -const DropHintText = styled.div` +export const DropHintText = styled.div` color: var(--color-text-3); font-size: 12px; font-style: italic; ` // 搜索相关样式 -const SearchStatusBar = styled.div` +export const SearchStatusBar = styled.div` display: flex; align-items: center; gap: 8px; @@ -1448,7 +505,7 @@ const SearchStatusBar = styled.div` } ` -const CancelButton = styled.button` +export const CancelButton = styled.button` margin-left: auto; display: flex; align-items: center; @@ -1473,98 +530,4 @@ const CancelButton = styled.button` } ` -const NodeNameContainer = styled.div` - display: flex; - align-items: center; - gap: 6px; - flex: 1; - min-width: 0; -` - -const MatchBadge = styled.span<{ matchType: string }>` - display: inline-flex; - align-items: center; - padding: 0 4px; - height: 16px; - font-size: 10px; - line-height: 1; - border-radius: 2px; - background-color: ${(props) => - props.matchType === 'both' ? 'var(--color-primary-soft)' : 'var(--color-background-mute)'}; - color: ${(props) => (props.matchType === 'both' ? 'var(--color-primary)' : 'var(--color-text-3)')}; - font-weight: 500; - flex-shrink: 0; -` - -const SearchMatchesContainer = styled.div<{ depth: number }>` - margin-left: ${(props) => props.depth * 16 + 40}px; - margin-top: 4px; - margin-bottom: 8px; - padding: 6px 8px; - background-color: var(--color-background-mute); - border-radius: 4px; - border-left: 2px solid var(--color-primary-soft); -` - -const MatchItem = styled.div` - display: flex; - gap: 8px; - margin-bottom: 4px; - font-size: 12px; - padding: 4px 6px; - margin-left: -6px; - margin-right: -6px; - border-radius: 3px; - cursor: pointer; - transition: all 0.15s ease; - - &:hover { - background-color: var(--color-background-soft); - transform: translateX(2px); - } - - &:active { - background-color: var(--color-active); - } - - &:last-child { - margin-bottom: 0; - } -` - -const MatchLineNumber = styled.span` - color: var(--color-text-3); - font-family: monospace; - flex-shrink: 0; - width: 30px; -` - -const MatchContext = styled.div` - color: var(--color-text-2); - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-family: monospace; -` - -const MoreMatches = styled.div<{ depth: number }>` - margin-top: 4px; - padding: 4px 6px; - margin-left: -6px; - margin-right: -6px; - font-size: 11px; - color: var(--color-text-3); - border-radius: 3px; - cursor: pointer; - display: flex; - align-items: center; - transition: all 0.15s ease; - - &:hover { - color: var(--color-text-2); - background-color: var(--color-background-soft); - } -` - export default memo(NotesSidebar) diff --git a/src/renderer/src/pages/notes/components/TreeNode.tsx b/src/renderer/src/pages/notes/components/TreeNode.tsx new file mode 100644 index 000000000..0801d3105 --- /dev/null +++ b/src/renderer/src/pages/notes/components/TreeNode.tsx @@ -0,0 +1,498 @@ +import HighlightText from '@renderer/components/HighlightText' +import { + useNotesActions, + useNotesDrag, + useNotesEditing, + useNotesSearch, + useNotesSelection, + useNotesUI +} from '@renderer/pages/notes/context/NotesContexts' +import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService' +import type { SearchMatch, SearchResult } from '@renderer/services/NotesSearchService' +import type { NotesTreeNode } from '@renderer/types/note' +import { Dropdown } from 'antd' +import { ChevronDown, ChevronRight, File, FilePlus, Folder, FolderOpen } from 'lucide-react' +import { memo, useCallback, useMemo, useState } from 'react' +import { useTranslation } from 'react-i18next' +import styled from 'styled-components' + +interface TreeNodeProps { + node: NotesTreeNode | SearchResult + depth: number + renderChildren?: boolean + onHintClick?: () => void +} + +const TreeNode = memo(({ node, depth, renderChildren = true, onHintClick }) => { + const { t } = useTranslation() + + // Use split contexts - only subscribe to what this node needs + const { selectedFolderId, activeNodeId } = useNotesSelection() + const { editingNodeId, renamingNodeIds, newlyRenamedNodeIds, inPlaceEdit } = useNotesEditing() + const { draggedNodeId, dragOverNodeId, dragPosition, onDragStart, onDragOver, onDragLeave, onDrop, onDragEnd } = + useNotesDrag() + const { searchKeyword, showMatches } = useNotesSearch() + const { openDropdownKey } = useNotesUI() + const { getMenuItems, onSelectNode, onToggleExpanded, onDropdownOpenChange } = useNotesActions() + + const [showAllMatches, setShowAllMatches] = useState(false) + const { isEditing: isInputEditing, inputProps } = inPlaceEdit + + // 检查是否是 hint 节点 + const isHintNode = node.type === 'hint' + + // 检查是否是搜索结果 + const searchResult = 'matchType' in node ? (node as SearchResult) : null + const hasMatches = searchResult && searchResult.matches && searchResult.matches.length > 0 + + // 处理匹配项点击 + const handleMatchClick = useCallback( + (match: SearchMatch) => { + // 发送定位事件 + EventEmitter.emit(EVENT_NAMES.LOCATE_NOTE_LINE, { + noteId: node.id, + lineNumber: match.lineNumber, + lineContent: match.lineContent + }) + }, + [node] + ) + + const isActive = selectedFolderId ? node.type === 'folder' && node.id === selectedFolderId : node.id === activeNodeId + const isEditing = editingNodeId === node.id && isInputEditing + const isRenaming = renamingNodeIds.has(node.id) + const isNewlyRenamed = newlyRenamedNodeIds.has(node.id) + const hasChildren = node.children && node.children.length > 0 + const isDragging = draggedNodeId === node.id + const isDragOver = dragOverNodeId === node.id + const isDragBefore = isDragOver && dragPosition === 'before' + const isDragInside = isDragOver && dragPosition === 'inside' + const isDragAfter = isDragOver && dragPosition === 'after' + + const getNodeNameClassName = () => { + if (isRenaming) return 'shimmer' + if (isNewlyRenamed) return 'typing' + return '' + } + + const displayName = useMemo(() => { + if (!searchKeyword) { + return node.name + } + + const name = node.name ?? '' + if (!name) { + return name + } + + const keyword = searchKeyword + const nameLower = name.toLowerCase() + const keywordLower = keyword.toLowerCase() + const matchStart = nameLower.indexOf(keywordLower) + + if (matchStart === -1) { + return name + } + + const matchEnd = matchStart + keyword.length + const beforeMatch = Math.min(2, matchStart) + const contextStart = matchStart - beforeMatch + const contextLength = 50 + const contextEnd = Math.min(name.length, matchEnd + contextLength) + + const prefix = contextStart > 0 ? '...' : '' + const suffix = contextEnd < name.length ? '...' : '' + + return prefix + name.substring(contextStart, contextEnd) + suffix + }, [node.name, searchKeyword]) + + // Special render for hint nodes + if (isHintNode) { + return ( +
+ + + + + + {t('notes.drop_markdown_hint')} + + +
+ ) + } + + return ( +
+ onDropdownOpenChange(open ? node.id : null)}> +
e.stopPropagation()}> + onDragStart(e, node as NotesTreeNode)} + onDragOver={(e) => onDragOver(e, node as NotesTreeNode)} + onDragLeave={onDragLeave} + onDrop={(e) => onDrop(e, node as NotesTreeNode)} + onDragEnd={onDragEnd}> + onSelectNode(node as NotesTreeNode)}> + + + {node.type === 'folder' && ( + { + e.stopPropagation() + onToggleExpanded(node.id) + }} + title={node.expanded ? t('notes.collapse') : t('notes.expand')}> + {node.expanded ? : } + + )} + + + {node.type === 'folder' ? ( + node.expanded ? ( + + ) : ( + + ) + ) : ( + + )} + + + {isEditing ? ( + e.stopPropagation()} autoFocus /> + ) : ( + + + {searchKeyword ? : node.name} + + {searchResult && searchResult.matchType && searchResult.matchType !== 'filename' && ( + + {searchResult.matchType === 'both' ? t('notes.search.both') : t('notes.search.content')} + + )} + + )} + + +
+ + + {showMatches && hasMatches && ( + + {(showAllMatches ? searchResult!.matches! : searchResult!.matches!.slice(0, 3)).map((match, idx) => ( + handleMatchClick(match)}> + {match.lineNumber} + + + + + ))} + {searchResult!.matches!.length > 3 && ( + { + e.stopPropagation() + setShowAllMatches(!showAllMatches) + }}> + {showAllMatches ? ( + <> + + {t('notes.search.show_less')} + + ) : ( + <> + +{searchResult!.matches!.length - 3}{' '} + {t('notes.search.more_matches')} + + )} + + )} + + )} + + {renderChildren && node.type === 'folder' && node.expanded && hasChildren && ( +
+ {node.children!.map((child) => ( + + ))} +
+ )} +
+ ) +}) + +export const TreeNodeContainer = styled.div<{ + active: boolean + depth: number + isDragging?: boolean + isDragOver?: boolean + isDragBefore?: boolean + isDragInside?: boolean + isDragAfter?: boolean +}>` + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px 6px; + border-radius: 4px; + cursor: pointer; + margin-bottom: 2px; + /* CRITICAL: Must have fully opaque background for sticky to work properly */ + /* Transparent/semi-transparent backgrounds will show content bleeding through when sticky */ + background-color: ${(props) => { + if (props.isDragInside) return 'var(--color-primary-background)' + // Use hover color for active state - it's guaranteed to be opaque + if (props.active) return 'var(--color-hover, var(--color-background-mute))' + return 'var(--color-background)' + }}; + border: 0.5px solid + ${(props) => { + if (props.isDragInside) return 'var(--color-primary)' + if (props.active) return 'var(--color-border)' + return 'transparent' + }}; + opacity: ${(props) => (props.isDragging ? 0.5 : 1)}; + transition: all 0.2s ease; + position: relative; + + &:hover { + background-color: var(--color-background-soft); + + .node-actions { + opacity: 1; + } + } + + /* 添加拖拽指示线 */ + ${(props) => + props.isDragBefore && + ` + &::before { + content: ''; + position: absolute; + top: -2px; + left: 0; + right: 0; + height: 2px; + background-color: var(--color-primary); + border-radius: 1px; + } + `} + + ${(props) => + props.isDragAfter && + ` + &::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + right: 0; + height: 2px; + background-color: var(--color-primary); + border-radius: 1px; + } + `} +` + +export const TreeNodeContent = styled.div` + display: flex; + align-items: center; + flex: 1; + min-width: 0; +` + +export const NodeIndent = styled.div<{ depth: number }>` + width: ${(props) => props.depth * 16}px; + flex-shrink: 0; +` + +export const ExpandIcon = styled.div` + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-2); + margin-right: 4px; + + &:hover { + color: var(--color-text); + } +` + +export const NodeIcon = styled.div` + display: flex; + align-items: center; + justify-content: center; + margin-right: 8px; + color: var(--color-text-2); + flex-shrink: 0; +` + +export const NodeName = styled.div` + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 13px; + color: var(--color-text); + position: relative; + will-change: background-position, width; + + --color-shimmer-mid: var(--color-text-1); + --color-shimmer-end: color-mix(in srgb, var(--color-text-1) 25%, transparent); + + &.shimmer { + background: linear-gradient(to left, var(--color-shimmer-end), var(--color-shimmer-mid), var(--color-shimmer-end)); + background-size: 200% 100%; + background-clip: text; + color: transparent; + animation: shimmer 3s linear infinite; + } + + &.typing { + display: block; + white-space: nowrap; + overflow: hidden; + animation: typewriter 0.5s steps(40, end); + } + + @keyframes shimmer { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } + } + + @keyframes typewriter { + from { + width: 0; + } + to { + width: 100%; + } + } +` + +export const SearchMatchesContainer = styled.div<{ depth: number }>` + margin-left: ${(props) => props.depth * 16 + 40}px; + margin-top: 4px; + margin-bottom: 8px; + padding: 6px 8px; + background-color: var(--color-background-mute); + border-radius: 4px; + border-left: 2px solid var(--color-primary-soft); +` + +export const NodeNameContainer = styled.div` + display: flex; + align-items: center; + gap: 6px; + flex: 1; + min-width: 0; +` + +export const MatchBadge = styled.span<{ matchType: string }>` + display: inline-flex; + align-items: center; + padding: 0 4px; + height: 16px; + font-size: 10px; + line-height: 1; + border-radius: 2px; + background-color: ${(props) => + props.matchType === 'both' ? 'var(--color-primary-soft)' : 'var(--color-background-mute)'}; + color: ${(props) => (props.matchType === 'both' ? 'var(--color-primary)' : 'var(--color-text-3)')}; + font-weight: 500; + flex-shrink: 0; +` + +export const MatchItem = styled.div` + display: flex; + gap: 8px; + margin-bottom: 4px; + font-size: 12px; + padding: 4px 6px; + margin-left: -6px; + margin-right: -6px; + border-radius: 3px; + cursor: pointer; + transition: all 0.15s ease; + + &:hover { + background-color: var(--color-background-soft); + transform: translateX(2px); + } + + &:active { + background-color: var(--color-active); + } + + &:last-child { + margin-bottom: 0; + } +` + +export const MatchLineNumber = styled.span` + color: var(--color-text-3); + font-family: monospace; + flex-shrink: 0; + width: 30px; +` + +export const MatchContext = styled.div` + color: var(--color-text-2); + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: monospace; +` + +export const MoreMatches = styled.div<{ depth: number }>` + margin-top: 4px; + padding: 4px 6px; + margin-left: -6px; + margin-right: -6px; + font-size: 11px; + color: var(--color-text-3); + border-radius: 3px; + cursor: pointer; + display: flex; + align-items: center; + transition: all 0.15s ease; + + &:hover { + color: var(--color-text-2); + background-color: var(--color-background-soft); + } +` + +const EditInput = styled.input` + flex: 1; + font-size: 13px; +` + +const DropHintText = styled.div` + color: var(--color-text-3); + font-size: 12px; + font-style: italic; +` + +export default TreeNode diff --git a/src/renderer/src/pages/notes/context/NotesContexts.tsx b/src/renderer/src/pages/notes/context/NotesContexts.tsx new file mode 100644 index 000000000..6bbb86c8d --- /dev/null +++ b/src/renderer/src/pages/notes/context/NotesContexts.tsx @@ -0,0 +1,109 @@ +import type { UseInPlaceEditReturn } from '@renderer/hooks/useInPlaceEdit' +import type { NotesTreeNode } from '@renderer/types/note' +import type { MenuProps } from 'antd' +import { createContext, use } from 'react' + +// ==================== 1. Actions Context (Static, rarely changes) ==================== +export interface NotesActionsContextType { + getMenuItems: (node: NotesTreeNode) => MenuProps['items'] + onSelectNode: (node: NotesTreeNode) => void + onToggleExpanded: (nodeId: string) => void + onDropdownOpenChange: (key: string | null) => void +} + +export const NotesActionsContext = createContext(null) + +export const useNotesActions = () => { + const context = use(NotesActionsContext) + if (!context) { + throw new Error('useNotesActions must be used within NotesActionsContext.Provider') + } + return context +} + +// ==================== 2. Selection Context (Low frequency updates) ==================== +export interface NotesSelectionContextType { + selectedFolderId?: string | null + activeNodeId?: string +} + +export const NotesSelectionContext = createContext(null) + +export const useNotesSelection = () => { + const context = use(NotesSelectionContext) + if (!context) { + throw new Error('useNotesSelection must be used within NotesSelectionContext.Provider') + } + return context +} + +// ==================== 3. Editing Context (Medium frequency updates) ==================== +export interface NotesEditingContextType { + editingNodeId: string | null + renamingNodeIds: Set + newlyRenamedNodeIds: Set + inPlaceEdit: UseInPlaceEditReturn +} + +export const NotesEditingContext = createContext(null) + +export const useNotesEditing = () => { + const context = use(NotesEditingContext) + if (!context) { + throw new Error('useNotesEditing must be used within NotesEditingContext.Provider') + } + return context +} + +// ==================== 4. Drag Context (High frequency updates) ==================== +export interface NotesDragContextType { + draggedNodeId: string | null + dragOverNodeId: string | null + dragPosition: 'before' | 'inside' | 'after' + onDragStart: (e: React.DragEvent, node: NotesTreeNode) => void + onDragOver: (e: React.DragEvent, node: NotesTreeNode) => void + onDragLeave: () => void + onDrop: (e: React.DragEvent, node: NotesTreeNode) => void + onDragEnd: () => void +} + +export const NotesDragContext = createContext(null) + +export const useNotesDrag = () => { + const context = use(NotesDragContext) + if (!context) { + throw new Error('useNotesDrag must be used within NotesDragContext.Provider') + } + return context +} + +// ==================== 5. Search Context (Medium frequency updates) ==================== +export interface NotesSearchContextType { + searchKeyword: string + showMatches: boolean +} + +export const NotesSearchContext = createContext(null) + +export const useNotesSearch = () => { + const context = use(NotesSearchContext) + if (!context) { + throw new Error('useNotesSearch must be used within NotesSearchContext.Provider') + } + return context +} + +// ==================== 6. UI Context (Medium frequency updates) ==================== +export interface NotesUIContextType { + openDropdownKey: string | null +} + +export const NotesUIContext = createContext(null) + +export const useNotesUI = () => { + const context = use(NotesUIContext) + if (!context) { + throw new Error('useNotesUI must be used within NotesUIContext.Provider') + } + return context +} diff --git a/src/renderer/src/pages/notes/hooks/useNotesDragAndDrop.ts b/src/renderer/src/pages/notes/hooks/useNotesDragAndDrop.ts new file mode 100644 index 000000000..1822c00e9 --- /dev/null +++ b/src/renderer/src/pages/notes/hooks/useNotesDragAndDrop.ts @@ -0,0 +1,101 @@ +import type { NotesTreeNode } from '@renderer/types/note' +import { useCallback, useRef, useState } from 'react' + +interface UseNotesDragAndDropProps { + onMoveNode: (sourceNodeId: string, targetNodeId: string, position: 'before' | 'after' | 'inside') => void +} + +export const useNotesDragAndDrop = ({ onMoveNode }: UseNotesDragAndDropProps) => { + const [draggedNodeId, setDraggedNodeId] = useState(null) + const [dragOverNodeId, setDragOverNodeId] = useState(null) + const [dragPosition, setDragPosition] = useState<'before' | 'inside' | 'after'>('inside') + const dragNodeRef = useRef(null) + + const handleDragStart = useCallback((e: React.DragEvent, node: NotesTreeNode) => { + setDraggedNodeId(node.id) + e.dataTransfer.effectAllowed = 'move' + e.dataTransfer.setData('text/plain', node.id) + + dragNodeRef.current = e.currentTarget as HTMLDivElement + + // Create ghost element + if (e.currentTarget.parentElement) { + const rect = e.currentTarget.getBoundingClientRect() + const ghostElement = e.currentTarget.cloneNode(true) as HTMLElement + ghostElement.style.width = `${rect.width}px` + ghostElement.style.opacity = '0.7' + ghostElement.style.position = 'absolute' + ghostElement.style.top = '-1000px' + document.body.appendChild(ghostElement) + e.dataTransfer.setDragImage(ghostElement, 10, 10) + setTimeout(() => { + document.body.removeChild(ghostElement) + }, 0) + } + }, []) + + const handleDragOver = useCallback( + (e: React.DragEvent, node: NotesTreeNode) => { + e.preventDefault() + e.dataTransfer.dropEffect = 'move' + + if (draggedNodeId === node.id) { + return + } + + setDragOverNodeId(node.id) + + const rect = (e.currentTarget as HTMLElement).getBoundingClientRect() + const mouseY = e.clientY + const thresholdTop = rect.top + rect.height * 0.3 + const thresholdBottom = rect.bottom - rect.height * 0.3 + + if (mouseY < thresholdTop) { + setDragPosition('before') + } else if (mouseY > thresholdBottom) { + setDragPosition('after') + } else { + setDragPosition(node.type === 'folder' ? 'inside' : 'after') + } + }, + [draggedNodeId] + ) + + const handleDragLeave = useCallback(() => { + setDragOverNodeId(null) + setDragPosition('inside') + }, []) + + const handleDrop = useCallback( + (e: React.DragEvent, targetNode: NotesTreeNode) => { + e.preventDefault() + const draggedId = e.dataTransfer.getData('text/plain') + + if (draggedId && draggedId !== targetNode.id) { + onMoveNode(draggedId, targetNode.id, dragPosition) + } + + setDraggedNodeId(null) + setDragOverNodeId(null) + setDragPosition('inside') + }, + [onMoveNode, dragPosition] + ) + + const handleDragEnd = useCallback(() => { + setDraggedNodeId(null) + setDragOverNodeId(null) + setDragPosition('inside') + }, []) + + return { + draggedNodeId, + dragOverNodeId, + dragPosition, + handleDragStart, + handleDragOver, + handleDragLeave, + handleDrop, + handleDragEnd + } +} diff --git a/src/renderer/src/pages/notes/hooks/useNotesEditing.ts b/src/renderer/src/pages/notes/hooks/useNotesEditing.ts new file mode 100644 index 000000000..58cbdee9e --- /dev/null +++ b/src/renderer/src/pages/notes/hooks/useNotesEditing.ts @@ -0,0 +1,94 @@ +import { loggerService } from '@logger' +import { useInPlaceEdit } from '@renderer/hooks/useInPlaceEdit' +import { fetchNoteSummary } from '@renderer/services/ApiService' +import type { NotesTreeNode } from '@renderer/types/note' +import { useCallback, useState } from 'react' +import { useTranslation } from 'react-i18next' + +const logger = loggerService.withContext('UseNotesEditing') + +interface UseNotesEditingProps { + onRenameNode: (nodeId: string, newName: string) => void +} + +export const useNotesEditing = ({ onRenameNode }: UseNotesEditingProps) => { + const { t } = useTranslation() + const [editingNodeId, setEditingNodeId] = useState(null) + const [renamingNodeIds, setRenamingNodeIds] = useState>(new Set()) + const [newlyRenamedNodeIds, setNewlyRenamedNodeIds] = useState>(new Set()) + + const inPlaceEdit = useInPlaceEdit({ + onSave: (newName: string) => { + if (editingNodeId && newName) { + onRenameNode(editingNodeId, newName) + window.toast.success(t('common.saved')) + logger.debug(`Renamed node ${editingNodeId} to "${newName}"`) + } + setEditingNodeId(null) + }, + onCancel: () => { + setEditingNodeId(null) + } + }) + + const handleStartEdit = useCallback( + (node: NotesTreeNode) => { + setEditingNodeId(node.id) + inPlaceEdit.startEdit(node.name) + }, + [inPlaceEdit] + ) + + const handleAutoRename = useCallback( + async (note: NotesTreeNode) => { + if (note.type !== 'file') return + + setRenamingNodeIds((prev) => new Set(prev).add(note.id)) + try { + const content = await window.api.file.readExternal(note.externalPath) + if (!content || content.trim().length === 0) { + window.toast.warning(t('notes.auto_rename.empty_note')) + return + } + + const summaryText = await fetchNoteSummary({ content }) + if (summaryText) { + onRenameNode(note.id, summaryText) + window.toast.success(t('notes.auto_rename.success')) + } else { + window.toast.error(t('notes.auto_rename.failed')) + } + } catch (error) { + window.toast.error(t('notes.auto_rename.failed')) + logger.error(`Failed to auto-rename note: ${error}`) + } finally { + setRenamingNodeIds((prev) => { + const next = new Set(prev) + next.delete(note.id) + return next + }) + + setNewlyRenamedNodeIds((prev) => new Set(prev).add(note.id)) + + setTimeout(() => { + setNewlyRenamedNodeIds((prev) => { + const next = new Set(prev) + next.delete(note.id) + return next + }) + }, 700) + } + }, + [onRenameNode, t] + ) + + return { + editingNodeId, + renamingNodeIds, + newlyRenamedNodeIds, + inPlaceEdit, + handleStartEdit, + handleAutoRename, + setEditingNodeId + } +} diff --git a/src/renderer/src/pages/notes/hooks/useNotesFileUpload.ts b/src/renderer/src/pages/notes/hooks/useNotesFileUpload.ts new file mode 100644 index 000000000..aba1a9099 --- /dev/null +++ b/src/renderer/src/pages/notes/hooks/useNotesFileUpload.ts @@ -0,0 +1,112 @@ +import { useCallback } from 'react' + +interface UseNotesFileUploadProps { + onUploadFiles: (files: File[]) => void + setIsDragOverSidebar: (isDragOver: boolean) => void +} + +export const useNotesFileUpload = ({ onUploadFiles, setIsDragOverSidebar }: UseNotesFileUploadProps) => { + const handleDropFiles = useCallback( + async (e: React.DragEvent) => { + e.preventDefault() + setIsDragOverSidebar(false) + + // 处理文件夹拖拽：从 dataTransfer.items 获取完整文件路径信息 + const items = Array.from(e.dataTransfer.items) + const files: File[] = [] + + const processEntry = async (entry: FileSystemEntry, path: string = '') => { + if (entry.isFile) { + const fileEntry = entry as FileSystemFileEntry + return new Promise((resolve) => { + fileEntry.file((file) => { + // 手动设置 webkitRelativePath 以保持文件夹结构 + Object.defineProperty(file, 'webkitRelativePath', { + value: path + file.name, + writable: false + }) + files.push(file) + resolve() + }) + }) + } else if (entry.isDirectory) { + const dirEntry = entry as FileSystemDirectoryEntry + const reader = dirEntry.createReader() + return new Promise((resolve) => { + reader.readEntries(async (entries) => { + const promises = entries.map((subEntry) => processEntry(subEntry, path + entry.name + '/')) + await Promise.all(promises) + resolve() + }) + }) + } + } + + // 如果支持 DataTransferItem API（文件夹拖拽） + if (items.length > 0 && items[0].webkitGetAsEntry()) { + const promises = items.map((item) => { + const entry = item.webkitGetAsEntry() + return entry ? processEntry(entry) : Promise.resolve() + }) + + await Promise.all(promises) + + if (files.length > 0) { + onUploadFiles(files) + } + } else { + const regularFiles = Array.from(e.dataTransfer.files) + if (regularFiles.length > 0) { + onUploadFiles(regularFiles) + } + } + }, + [onUploadFiles, setIsDragOverSidebar] + ) + + const handleSelectFiles = useCallback(() => { + const fileInput = document.createElement('input') + fileInput.type = 'file' + fileInput.multiple = true + fileInput.accept = '.md,.markdown' + fileInput.webkitdirectory = false + + fileInput.onchange = (e) => { + const target = e.target as HTMLInputElement + if (target.files && target.files.length > 0) { + const selectedFiles = Array.from(target.files) + onUploadFiles(selectedFiles) + } + fileInput.remove() + } + + fileInput.click() + }, [onUploadFiles]) + + const handleSelectFolder = useCallback(() => { + const folderInput = document.createElement('input') + folderInput.type = 'file' + // @ts-ignore - webkitdirectory is a non-standard attribute + folderInput.webkitdirectory = true + // @ts-ignore - directory is a non-standard attribute + folderInput.directory = true + folderInput.multiple = true + + folderInput.onchange = (e) => { + const target = e.target as HTMLInputElement + if (target.files && target.files.length > 0) { + const selectedFiles = Array.from(target.files) + onUploadFiles(selectedFiles) + } + folderInput.remove() + } + + folderInput.click() + }, [onUploadFiles]) + + return { + handleDropFiles, + handleSelectFiles, + handleSelectFolder + } +} diff --git a/src/renderer/src/pages/notes/hooks/useNotesMenu.tsx b/src/renderer/src/pages/notes/hooks/useNotesMenu.tsx new file mode 100644 index 000000000..f08f9b150 --- /dev/null +++ b/src/renderer/src/pages/notes/hooks/useNotesMenu.tsx @@ -0,0 +1,263 @@ +import { loggerService } from '@logger' +import { DeleteIcon } from '@renderer/components/Icons' +import SaveToKnowledgePopup from '@renderer/components/Popups/SaveToKnowledgePopup' +import { useKnowledgeBases } from '@renderer/hooks/useKnowledge' +import type { RootState } from '@renderer/store' +import type { NotesTreeNode } from '@renderer/types/note' +import { exportNote } from '@renderer/utils/export' +import type { MenuProps } from 'antd' +import type { ItemType, MenuItemType } from 'antd/es/menu/interface' +import { Edit3, FilePlus, FileSearch, Folder, FolderOpen, Sparkles, Star, StarOff, UploadIcon } from 'lucide-react' +import { useCallback } from 'react' +import { useTranslation } from 'react-i18next' +import { useSelector } from 'react-redux' + +const logger = loggerService.withContext('UseNotesMenu') + +interface UseNotesMenuProps { + renamingNodeIds: Set + onCreateNote: (name: string, targetFolderId?: string) => void + onCreateFolder: (name: string, targetFolderId?: string) => void + onRenameNode: (nodeId: string, newName: string) => void + onToggleStar: (nodeId: string) => void + onDeleteNode: (nodeId: string) => void + onSelectNode: (node: NotesTreeNode) => void + handleStartEdit: (node: NotesTreeNode) => void + handleAutoRename: (node: NotesTreeNode) => void + activeNode?: NotesTreeNode | null +} + +export const useNotesMenu = ({ + renamingNodeIds, + onCreateNote, + onCreateFolder, + onToggleStar, + onDeleteNode, + onSelectNode, + handleStartEdit, + handleAutoRename, + activeNode +}: UseNotesMenuProps) => { + const { t } = useTranslation() + const { bases } = useKnowledgeBases() + const exportMenuOptions = useSelector((state: RootState) => state.settings.exportMenuOptions) + + const handleExportKnowledge = useCallback( + async (note: NotesTreeNode) => { + try { + if (bases.length === 0) { + window.toast.warning(t('chat.save.knowledge.empty.no_knowledge_base')) + return + } + + const result = await SaveToKnowledgePopup.showForNote(note) + + if (result?.success) { + window.toast.success(t('notes.export_success', { count: result.savedCount })) + } + } catch (error) { + window.toast.error(t('notes.export_failed')) + logger.error(`Failed to export note to knowledge base: ${error}`) + } + }, + [bases.length, t] + ) + + const handleImageAction = useCallback( + async (node: NotesTreeNode, platform: 'copyImage' | 'exportImage') => { + try { + if (activeNode?.id !== node.id) { + onSelectNode(node) + await new Promise((resolve) => setTimeout(resolve, 500)) + } + + await exportNote({ node, platform }) + } catch (error) { + logger.error(`Failed to ${platform === 'copyImage' ? 'copy' : 'export'} as image:`, error as Error) + window.toast.error(t('common.copy_failed')) + } + }, + [activeNode, onSelectNode, t] + ) + + const handleDeleteNodeWrapper = useCallback( + (node: NotesTreeNode) => { + const confirmText = + node.type === 'folder' + ? t('notes.delete_folder_confirm', { name: node.name }) + : t('notes.delete_note_confirm', { name: node.name }) + + window.modal.confirm({ + title: t('notes.delete'), + content: confirmText, + centered: true, + okButtonProps: { danger: true }, + onOk: () => { + onDeleteNode(node.id) + } + }) + }, + [onDeleteNode, t] + ) + + const getMenuItems = useCallback( + (node: NotesTreeNode) => { + const baseMenuItems: MenuProps['items'] = [] + + // only show auto rename for file for now + if (node.type !== 'folder') { + baseMenuItems.push({ + label: t('notes.auto_rename.label'), + key: 'auto-rename', + icon: , + disabled: renamingNodeIds.has(node.id), + onClick: () => { + handleAutoRename(node) + } + }) + } + + if (node.type === 'folder') { + baseMenuItems.push( + { + label: t('notes.new_note'), + key: 'new_note', + icon: , + onClick: () => { + onCreateNote(t('notes.untitled_note'), node.id) + } + }, + { + label: t('notes.new_folder'), + key: 'new_folder', + icon: , + onClick: () => { + onCreateFolder(t('notes.untitled_folder'), node.id) + } + }, + { type: 'divider' } + ) + } + + baseMenuItems.push( + { + label: t('notes.rename'), + key: 'rename', + icon: , + onClick: () => { + handleStartEdit(node) + } + }, + { + label: t('notes.open_outside'), + key: 'open_outside', + icon: , + onClick: () => { + window.api.openPath(node.externalPath) + } + } + ) + if (node.type !== 'folder') { + baseMenuItems.push( + { + label: node.isStarred ? t('notes.unstar') : t('notes.star'), + key: 'star', + icon: node.isStarred ? : , + onClick: () => { + onToggleStar(node.id) + } + }, + { + label: t('notes.export_knowledge'), + key: 'export_knowledge', + icon: , + onClick: () => { + handleExportKnowledge(node) + } + }, + { + label: t('chat.topics.export.title'), + key: 'export', + icon: , + children: [ + exportMenuOptions.image && { + label: t('chat.topics.copy.image'), + key: 'copy-image', + onClick: () => handleImageAction(node, 'copyImage') + }, + exportMenuOptions.image && { + label: t('chat.topics.export.image'), + key: 'export-image', + onClick: () => handleImageAction(node, 'exportImage') + }, + exportMenuOptions.markdown && { + label: t('chat.topics.export.md.label'), + key: 'markdown', + onClick: () => exportNote({ node, platform: 'markdown' }) + }, + exportMenuOptions.docx && { + label: t('chat.topics.export.word'), + key: 'word', + onClick: () => exportNote({ node, platform: 'docx' }) + }, + exportMenuOptions.notion && { + label: t('chat.topics.export.notion'), + key: 'notion', + onClick: () => exportNote({ node, platform: 'notion' }) + }, + exportMenuOptions.yuque && { + label: t('chat.topics.export.yuque'), + key: 'yuque', + onClick: () => exportNote({ node, platform: 'yuque' }) + }, + exportMenuOptions.obsidian && { + label: t('chat.topics.export.obsidian'), + key: 'obsidian', + onClick: () => exportNote({ node, platform: 'obsidian' }) + }, + exportMenuOptions.joplin && { + label: t('chat.topics.export.joplin'), + key: 'joplin', + onClick: () => exportNote({ node, platform: 'joplin' }) + }, + exportMenuOptions.siyuan && { + label: t('chat.topics.export.siyuan'), + key: 'siyuan', + onClick: () => exportNote({ node, platform: 'siyuan' }) + } + ].filter(Boolean) as ItemType[] + } + ) + } + baseMenuItems.push( + { type: 'divider' }, + { + label: t('notes.delete'), + danger: true, + key: 'delete', + icon: , + onClick: () => { + handleDeleteNodeWrapper(node) + } + } + ) + + return baseMenuItems + }, + [ + t, + handleStartEdit, + onToggleStar, + handleExportKnowledge, + handleImageAction, + handleDeleteNodeWrapper, + renamingNodeIds, + handleAutoRename, + exportMenuOptions, + onCreateNote, + onCreateFolder + ] + ) + + return { getMenuItems } +} diff --git a/src/renderer/src/services/NotesService.ts b/src/renderer/src/services/NotesService.ts index 940c8db10..4b71941fe 100644 --- a/src/renderer/src/services/NotesService.ts +++ b/src/renderer/src/services/NotesService.ts @@ -83,6 +83,68 @@ export async function renameNode(node: NotesTreeNode, newName: string): Promise< } export async function uploadNotes(files: File[], targetPath: string): Promise { + const basePath = normalizePath(targetPath) + const totalFiles = files.length + + if (files.length === 0) { + return { + uploadedNodes: [], + totalFiles: 0, + skippedFiles: 0, + fileCount: 0, + folderCount: 0 + } + } + + try { + // Get file paths from File objects + // For browser File objects from drag-and-drop, we need to use FileReader to save temporarily + // However, for directory uploads, the files already have paths + const filePaths: string[] = [] + + for (const file of files) { + // @ts-ignore - webkitRelativePath exists on File objects from directory uploads + if (file.path) { + // @ts-ignore - Electron File objects have .path property + filePaths.push(file.path) + } else { + // For browser File API, we'd need to use FileReader and create temp files + // For now, fall back to the old method for these cases + logger.warn('File without path detected, using fallback method') + return uploadNotesLegacy(files, targetPath) + } + } + + // Pause file watcher to prevent N refresh events + await window.api.file.pauseFileWatcher() + + try { + // Use the new optimized batch upload API that runs in Main process + const result = await window.api.file.batchUploadMarkdown(filePaths, basePath) + + return { + uploadedNodes: [], + totalFiles, + skippedFiles: result.skippedFiles, + fileCount: result.fileCount, + folderCount: result.folderCount + } + } finally { + // Resume watcher and trigger single refresh + await window.api.file.resumeFileWatcher() + } + } catch (error) { + logger.error('Batch upload failed, falling back to legacy method:', error as Error) + // Fall back to old method if new method fails + return uploadNotesLegacy(files, targetPath) + } +} + +/** + * Legacy upload method using Renderer process + * Kept as fallback for browser File API files without paths + */ +async function uploadNotesLegacy(files: File[], targetPath: string): Promise { const basePath = normalizePath(targetPath) const markdownFiles = filterMarkdown(files) const skippedFiles = files.length - markdownFiles.length @@ -101,18 +163,37 @@ export async function uploadNotes(files: File[], targetPath: string): Promise { + const { dir, name } = resolveFileTarget(file, basePath) + const { safeName } = await window.api.file.checkFileName(dir, name, true) + const finalPath = `${dir}/${safeName}${MARKDOWN_EXT}` + + const content = await file.text() + await window.api.file.write(finalPath, content) + return true + }) + ) + + // Count successful uploads + results.forEach((result) => { + if (result.status === 'fulfilled') { + fileCount += 1 + } else { + logger.error('Failed to write uploaded file:', result.reason) + } + }) + + // Yield to the event loop between batches to keep UI responsive + if (i + BATCH_SIZE < markdownFiles.length) { + await new Promise((resolve) => setTimeout(resolve, 0)) } } diff --git a/src/renderer/src/types/note.ts b/src/renderer/src/types/note.ts index fda85e63d..83bbd74e5 100644 --- a/src/renderer/src/types/note.ts +++ b/src/renderer/src/types/note.ts @@ -13,7 +13,7 @@ export type NotesSortType = export interface NotesTreeNode { id: string name: string // 不包含扩展名 - type: 'folder' | 'file' + type: 'folder' | 'file' | 'hint' treePath: string // 相对路径 externalPath: string // 绝对路径 children?: NotesTreeNode[]