feat(notes): 搜索栏重构为笔记内筛选+批量删除+模板筛选+文件夹树删除

Author: Aparencia

client/src/features/notes/components/CornellLayout.tsx

@@ -54,14 +54,8 @@ function useCornellEditor(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, JSON.stringify(initialContent)]);
 
-  // 确保编辑器在组件卸载时正确销毁
-  useEffect(() => {
-    return () => {
-      if (editor) {
-        editor.destroy();
-      }
-    };
-  }, [editor]);
+  // 编辑器生命周期由 @tiptap/react v3 useEditor 托管（scheduleDestroy 延迟销毁
+  // 机制抵御 React 18 StrictMode 双调用，卸载时自动销毁），无需自定义 destroy。
 
   return editor;
 }

client/src/features/notes/components/FreeCanvas.tsx

@@ -283,12 +283,15 @@ export default function FreeCanvas({ content, onChange }: FreeCanvasProps) {
       return;
     }
 
-    // ---- 普通左键：清除选中 ----
+    // ---- 普通左键：清除选中（仅空白区域；块内保留编辑器焦点，否则点击文本块无法输入） ----
     if (e.button === 0 && !e.shiftKey) {
-      setSelectedBlockIds(new Set());
-      (document.activeElement as HTMLElement)?.blur?.();
-      suppressSelectRef.current = true;
-      setTimeout(() => { suppressSelectRef.current = false; }, 100);
+      const insideBlock = !!(e.target as HTMLElement).closest?.('[data-freeblock]');
+      if (!insideBlock) {
+        setSelectedBlockIds(new Set());
+        (document.activeElement as HTMLElement)?.blur?.();
+        suppressSelectRef.current = true;
+        setTimeout(() => { suppressSelectRef.current = false; }, 100);
+      }
     }
   };
 

client/src/features/notes/components/FreeTextBlock.tsx

@@ -1,7 +1,7 @@
 /**
  * @ai-context: 通用组件：FreeTextBlock。
  */
-import { useRef, useCallback, useEffect, useState } from 'react';
+import { useRef, useCallback, useState } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { GripVertical, Trash2, Copy, Pencil } from 'lucide-react';
@@ -168,13 +168,7 @@ export default function FreeTextBlock({
     setBlockContextMenu(null);
   }, [onDuplicate, block.id]);
 
-  // 清理编辑器
-  useEffect(() => {
-    return () => {
-      editor?.destroy();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // 编辑器生命周期由 @tiptap/react v3 useEditor 托管（卸载时自动销毁），无需自定义 destroy。
 
   const blockHeight = typeof block.size.height === 'number' ? block.size.height : undefined;
 
@@ -194,7 +188,11 @@ export default function FreeTextBlock({
           'bg-bg-elevated rounded-kb-md shadow-sm overflow-hidden flex flex-col border',
           isSelected ? 'ring-2 ring-blue-500/40 border-blue-500' : 'border-border/50',
         )}
-        onClick={(e) => onSelect(block.id, e.shiftKey)}
+        onClick={(e) => {
+          onSelect(block.id, e.shiftKey);
+          // 点击块体即聚焦编辑器，避免首次点击无响应（块内 mousedown 不再被画布 blur）
+          if (!isDraggingRef.current) editor?.commands.focus();
+        }}
         onDoubleClick={(e) => e.stopPropagation()}
         onContextMenu={handleContextMenu}
       >

client/src/features/notes/components/NoteSearchBar.tsx

@@ -1,211 +1,102 @@
 /**
- * @ai-context: 通用组件：NoteSearchBar。
+ * 笔记搜索栏
+ *
+ * @ai-context: 内测反馈重构：全局搜索（跨模块搜内容）已独立至 Ctrl+K 命令面板，
+ * 笔记页搜索框收窄为「笔记内部筛选」——关键词即时过滤笔记列表（本地内存过滤，
+ * getFilteredNotes 同步生效）+ 模板筛选 tabs（与卡片模板 Tag 共用 selectedTemplate
+ * 状态，双向联动，再点取消，可逆）。
  */
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Input } from '@/components/ui';
-import { Search, X, Loader2, FileText, Layers, Brain, Lightbulb, GraduationCap } from 'lucide-react';
+import { useState } from 'react';
+import { Search, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { soundPlayer } from '@/lib/audio/SoundPlayer';
 import { useNoteStore } from '../store/useNoteStore';
 import { useShallow } from 'zustand/react/shallow';
-import { useReducedMotion } from '@/hooks/useReducedMotion';
-import type { SearchEntityType } from '@/types/models';
-
-/**
- * 笔记搜索栏组件
- * v0.9.0: 带 300ms 防抖的搜索输入框 + 结果计数 + 关键词高亮辅助
- * v1.2.0: 全局统一搜索，支持实体类型筛选标签 + 结果类型图标
- */
-
-/** 实体类型筛选配置 */
-const ENTITY_TYPE_TABS: Array<{
-  type: SearchEntityType | 'all';
-  label: string;
-  icon: React.ReactNode;
-}> = [
-  { type: 'all', label: '全部', icon: <Search className="w-3 h-3" /> },
-  { type: 'note', label: '笔记', icon: <FileText className="w-3 h-3" /> },
-  { type: 'flashcard', label: '闪卡', icon: <Layers className="w-3 h-3" /> },
-  { type: 'feynman', label: '费曼', icon: <Brain className="w-3 h-3" /> },
-  { type: 'inspiration', label: '灵感', icon: <Lightbulb className="w-3 h-3" /> },
-  { type: 'classroom', label: '课堂', icon: <GraduationCap className="w-3 h-3" /> },
+import { Input } from '@/components/ui/Input';
+import type { NoteTemplate } from '../components/TemplateSelector';
+
+/** 模板筛选 tabs（与卡片模板 Tag 共用 selectedTemplate 状态） */
+const TEMPLATE_TABS: Array<{ type: NoteTemplate | 'all'; label: string }> = [
+  { type: 'all', label: '全部' },
+  { type: 'outline', label: '大纲式' },
+  { type: 'cornell', label: '康奈尔' },
+  { type: 'mindmap', label: '思维导图' },
+  { type: 'free', label: '自由笔记' },
+  { type: 'blank', label: '空白' },
+  { type: 'todo', label: '待办' },
 ];
 
-/** 搜索结果类型图标 */
-export function EntityTypeIcon({ type, className }: { type: SearchEntityType; className?: string }) {
-  const iconMap: Record<SearchEntityType, React.ReactNode> = {
-    note: <FileText className={cn('w-3.5 h-3.5', className)} />,
-    flashcard: <Layers className={cn('w-3.5 h-3.5', className)} />,
-    feynman: <Brain className={cn('w-3.5 h-3.5', className)} />,
-    inspiration: <Lightbulb className={cn('w-3.5 h-3.5', className)} />,
-    classroom: <GraduationCap className={cn('w-3.5 h-3.5', className)} />,
-  };
-  return <>{iconMap[type]}</>;
-}
-
-/** 实体类型对应的颜色样式 */
-const ENTITY_TYPE_COLORS: Record<SearchEntityType, string> = {
-  note: 'bg-brand-500/10 text-brand-600 border-brand-300/30',
-  flashcard: 'bg-emerald-500/10 text-emerald-600 border-emerald-300/30',
-  feynman: 'bg-violet-500/10 text-violet-600 border-violet-300/30',
-  inspiration: 'bg-amber-500/10 text-amber-600 border-amber-300/30',
-  classroom: 'bg-sky-500/10 text-sky-600 border-sky-300/30',
-};
-
-/** 实体类型的中文标签 */
-export const ENTITY_TYPE_LABELS: Record<SearchEntityType, string> = {
-  note: '笔记',
-  flashcard: '闪卡',
-  feynman: '费曼',
-  inspiration: '灵感',
-  classroom: '课堂',
-};
-
 export function NoteSearchBar() {
   const {
     searchQuery,
-    searchResults,
-    searchNotes,
     setSearchQuery,
-    selectedEntityTypes,
-    setSelectedEntityTypes,
-  } = useNoteStore(useShallow(s => ({
+    selectedTemplate,
+    toggleTemplate,
+  } = useNoteStore(useShallow((s) => ({
     searchQuery: s.searchQuery,
-    searchResults: s.searchResults,
-    searchNotes: s.searchNotes,
     setSearchQuery: s.setSearchQuery,
-    selectedEntityTypes: s.selectedEntityTypes,
-    setSelectedEntityTypes: s.setSelectedEntityTypes,
+    selectedTemplate: s.selectedTemplate,
+    toggleTemplate: s.toggleTemplate,
   })));
-  const prefersReduced = useReducedMotion();
   const [localQuery, setLocalQuery] = useState(searchQuery);
-  const [isSearching, setIsSearching] = useState(false);
-  const timerRef = useRef<ReturnType<typeof setTimeout>>();
-  const queryRef = useRef(localQuery);
-
-  // 保持 queryRef 最新
-  queryRef.current = localQuery;
-
-  // 防抖搜索：300ms
-  const debouncedSearch = useCallback(
-    (query: string, entityTypes?: SearchEntityType[]) => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-      if (!query.trim()) {
-        setSearchQuery('');
-        setIsSearching(false);
-        return;
-      }
-      setIsSearching(true);
-      timerRef.current = setTimeout(async () => {
-        await searchNotes(query, { limit: 50, fuzzy: true, entityTypes });
-        setIsSearching(false);
-      }, 300);
-    },
-    [searchNotes, setSearchQuery],
-  );
-
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, []);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = e.target.value;
     setLocalQuery(val);
-    debouncedSearch(val, selectedEntityTypes);
+    // 本地即时过滤：getFilteredNotes 按 searchQuery 过滤笔记列表（无索引延迟）
+    setSearchQuery(val);
   };
 
   const handleClear = () => {
     setLocalQuery('');
     setSearchQuery('');
-    setIsSearching(false);
-    if (timerRef.current) clearTimeout(timerRef.current);
   };
 
-  const handleTypeFilter = (type: SearchEntityType | 'all') => {
-    const currentType = selectedEntityTypes.length === 0 ? 'all' : selectedEntityTypes[0];
-    if (type !== currentType) soundPlayer.play('ui_tab_switch');
-    const newTypes = type === 'all' ? [] : [type];
-    setSelectedEntityTypes(newTypes);
-    // 如果有搜索词，立即用新过滤条件搜索
-    if (queryRef.current.trim()) {
-      debouncedSearch(queryRef.current, newTypes);
+  const handleTemplateFilter = (type: NoteTemplate | 'all') => {
+    // 「全部」点击清除筛选；模板点击切换（再点取消，可逆）
+    if (type === 'all') {
+      if (selectedTemplate) {
+        soundPlayer.play('ui_tab_switch');
+        toggleTemplate(selectedTemplate);
+      }
+    } else {
+      if (selectedTemplate !== type) soundPlayer.play('ui_tab_switch');
+      toggleTemplate(type);
     }
   };
 
-  const resultCount = searchResults.length;
-  const showResultBadge = searchQuery.trim().length > 0 && !isSearching;
-  const activeType = selectedEntityTypes.length === 0 ? 'all' : selectedEntityTypes[0];
-
   return (
     <div className="flex flex-col gap-2 flex-1 min-w-0">
       <div className="flex items-center gap-2 flex-1 min-w-0">
         <Input
-          placeholder="搜索笔记、闪卡、费曼、灵感、课堂笔记..."
+          placeholder="搜索笔记…"
           prefix={<Search className="w-4 h-4" strokeWidth={1.5} />}
           suffix={
-            <AnimatePresence>
-              {isSearching ? (
-                <motion.div
-                  key="loading"
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.8 }}
-                  transition={prefersReduced ? { duration: 0.01 } : undefined}
-                >
-                  <Loader2 className="w-4 h-4 animate-spin text-text-tertiary" strokeWidth={1.5} />
-                </motion.div>
-              ) : localQuery ? (
-                <motion.button
-                  key="clear"
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.8 }}
-                  transition={prefersReduced ? { duration: 0.01 } : { type: 'spring', stiffness: 400, damping: 25 }}
-                  whileTap={{ scale: 0.9 }}
-                  onClick={handleClear}
-                  className="p-0.5 rounded-full text-text-tertiary hover:text-text-primary hover:bg-bg-tertiary/50 transition-all duration-200"
-                >
-                  <X className="w-3.5 h-3.5" strokeWidth={1.5} />
-                </motion.button>
-              ) : null}
-            </AnimatePresence>
+            localQuery ? (
+              <button
+                onClick={handleClear}
+                className="p-0.5 rounded-full text-text-tertiary hover:text-text-primary hover:bg-bg-tertiary/50 transition-all duration-200"
+                aria-label="清除搜索"
+              >
+                <X className="w-3.5 h-3.5" strokeWidth={1.5} />
+              </button>
+            ) : null
           }
           size="sm"
           className="flex-1 min-w-0"
           value={localQuery}
           onChange={handleChange}
         />
-        <AnimatePresence>
-          {showResultBadge && (
-            <motion.span
-              initial={prefersReduced ? false : { opacity: 0, scale: 0.8, x: -8 }}
-              animate={{ opacity: 1, scale: 1, x: 0 }}
-              exit={{ opacity: 0, scale: 0.8, x: -8 }}
-              transition={prefersReduced ? { duration: 0.01 } : { type: 'spring', stiffness: 400, damping: 28 }}
-              className={cn(
-                'flex-shrink-0 px-2 py-0.5 rounded-full text-[11px] font-medium',
-                resultCount > 0
-                  ? 'bg-brand-500/10 text-brand-600 border border-brand-300/30'
-                  : 'bg-bg-tertiary/40 text-text-tertiary border border-border/30',
-              )}
-            >
-              {resultCount > 0 ? `${resultCount} 条结果` : '无结果'}
-            </motion.span>
-          )}
-        </AnimatePresence>
       </div>
 
-      {/* 实体类型筛选标签 */}
+      {/* 模板筛选 tabs：笔记内部维度，与卡片模板 Tag 联动 */}
       <div className="flex items-center gap-1 flex-wrap">
-        {ENTITY_TYPE_TABS.map((tab) => {
-          const isActive = activeType === tab.type;
+        {TEMPLATE_TABS.map((tab) => {
+          const isActive = tab.type === 'all' ? !selectedTemplate : selectedTemplate === tab.type;
           return (
             <button
               key={tab.type}
-              onClick={() => handleTypeFilter(tab.type)}
+              onClick={() => handleTemplateFilter(tab.type)}
               className={cn(
                 'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium',
                 'border transition-all duration-200',
@@ -214,7 +105,6 @@ export function NoteSearchBar() {
                   : 'bg-bg-tertiary/20 text-text-tertiary border-border/20 hover:bg-bg-tertiary/40 hover:text-text-secondary',
               )}
             >
-              {tab.icon}
               {tab.label}
             </button>
           );
@@ -223,20 +113,3 @@ export function NoteSearchBar() {
     </div>
   );
 }
-
-/**
- * 搜索结果类型徽章（可在搜索结果列表中使用）
- */
-export function EntityTypeBadge({ type }: { type: SearchEntityType }) {
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center gap-0.5 px-1.5 py-0 rounded-full text-[10px] font-medium border',
-        ENTITY_TYPE_COLORS[type],
-      )}
-    >
-      <EntityTypeIcon type={type} className="w-2.5 h-2.5" />
-      {ENTITY_TYPE_LABELS[type]}
-    </span>
-  );
-}