|
| 1 | +/** |
| 2 | + * @ai-context: 沉浸 3D 视图（双主题双形态：深色=沉降深渊 / 浅色=穹顶石窟）： |
| 3 | + * AnimatePresence 形态切换 + AbyssView2D/GrottoView3D + ReefDiverConsole 控制盘。 |
| 4 | + * 自 NotesPage.tsx 原样拆出；节点投影（reefNotes）与搜索高亮（highlightIds）的 |
| 5 | + * useMemo 一并内聚于此（仅本视图使用），其余状态/动作全部经 props 注入。 |
| 6 | + * @ai-context: Immersive 3D view (dark=abyss / light=grotto) with morph transition |
| 7 | + * and diver console, extracted verbatim from NotesPage.tsx. The reef projection |
| 8 | + * and search-highlight memos live here (used only by this view); other state/actions |
| 9 | + * are injected via props. |
| 10 | + */ |
| 11 | +import { useMemo } from 'react'; |
| 12 | +import { AnimatePresence, motion } from 'framer-motion'; |
| 13 | +import type { Note, NoteFolder } from '@/types/models'; |
| 14 | +import { AbyssView2D } from '../components/reef/AbyssView2D'; |
| 15 | +import { GrottoView3D } from '../components/reef/GrottoView3D'; |
| 16 | +import { ReefDiverConsole } from '../components/reef/ReefDiverConsole'; |
| 17 | +import type { ReefMorph, ReefNote } from '../components/reef/reefTypes'; |
| 18 | + |
| 19 | +interface Immersive3DViewProps { |
| 20 | + /** 过滤后的笔记列表（本视图内部投影为无 content 的 ReefNote） */ |
| 21 | + notes: Note[]; |
| 22 | + /** 当前选中笔记 id */ |
| 23 | + selectedId: string | null; |
| 24 | + /** 当前 hover 笔记 id */ |
| 25 | + hoveredId: string | null; |
| 26 | + /** 当前文件夹筛选（dim 未命中笔记） */ |
| 27 | + focusFolderId: string | null; |
| 28 | + /** 主题 → 3D 形态：深色=abyss / 浅色=grotto */ |
| 29 | + morph: ReefMorph; |
| 30 | + /** 文件夹列表（控制盘筛选） */ |
| 31 | + folders: NoteFolder[]; |
| 32 | + /** 搜索词（控制盘声呐 + 声呐点亮高亮） */ |
| 33 | + searchQuery: string; |
| 34 | + /** hover 变化回调 */ |
| 35 | + onHover: (id: string | null) => void; |
| 36 | + /** 选中笔记回调 */ |
| 37 | + onSelect: (id: string) => void; |
| 38 | + /** 打开笔记回调 */ |
| 39 | + onOpen: (id: string) => void; |
| 40 | + /** 退出沉浸视图回调 */ |
| 41 | + onExit: () => void; |
| 42 | + /** 选择文件夹回调 */ |
| 43 | + onSelectFolder: (id: string | null) => void; |
| 44 | + /** 搜索词变化回调 */ |
| 45 | + onSearchChange: (q: string) => void; |
| 46 | + /** 新建笔记回调（打开模板选择器） */ |
| 47 | + onNewNote: () => void; |
| 48 | + /** 剪藏回调（打开剪藏弹窗） */ |
| 49 | + onClip: () => void; |
| 50 | + /** 打开笔记图谱回调 */ |
| 51 | + onGraph: () => void; |
| 52 | + /** 进入批量模式回调（先退出 3D 视图） */ |
| 53 | + onBatch: () => void; |
| 54 | + /** 进入折纸视图回调（先退出 3D 视图） */ |
| 55 | + onOrigami: () => void; |
| 56 | +} |
| 57 | + |
| 58 | +export default function Immersive3DView({ |
| 59 | + notes, |
| 60 | + selectedId, |
| 61 | + hoveredId, |
| 62 | + focusFolderId, |
| 63 | + morph, |
| 64 | + folders, |
| 65 | + searchQuery, |
| 66 | + onHover, |
| 67 | + onSelect, |
| 68 | + onOpen, |
| 69 | + onExit, |
| 70 | + onSelectFolder, |
| 71 | + onSearchChange, |
| 72 | + onNewNote, |
| 73 | + onClip, |
| 74 | + onGraph, |
| 75 | + onBatch, |
| 76 | + onOrigami, |
| 77 | +}: Immersive3DViewProps) { |
| 78 | + // 3D 视图节点投影（无 content 全文，与 P1-1 惰性加载兼容） |
| 79 | + const reefNotes = useMemo<ReefNote[]>(() => notes.map((n) => ({ |
| 80 | + id: n.id, |
| 81 | + title: n.title, |
| 82 | + template: n.template, |
| 83 | + wordCount: n.wordCount ?? 0, |
| 84 | + updatedAt: n.updatedAt, |
| 85 | + folderId: n.folderId, |
| 86 | + tags: n.tags, |
| 87 | + pinned: n.pinned, |
| 88 | + })), [notes]); |
| 89 | + |
| 90 | + // 搜索高亮：声呐点亮（标题/标签匹配；空搜索=全亮） |
| 91 | + const highlightIds = useMemo<ReadonlySet<string> | null>(() => { |
| 92 | + const q = searchQuery.trim().toLowerCase(); |
| 93 | + if (!q) return null; |
| 94 | + const set = new Set<string>(); |
| 95 | + for (const n of notes) { |
| 96 | + if ( |
| 97 | + n.title.toLowerCase().includes(q) |
| 98 | + || n.tags.some((t) => t.toLowerCase().includes(q)) |
| 99 | + ) { |
| 100 | + set.add(n.id); |
| 101 | + } |
| 102 | + } |
| 103 | + return set; |
| 104 | + }, [notes, searchQuery]); |
| 105 | + |
| 106 | + return ( |
| 107 | + <div className="relative flex-1 min-w-0 h-full"> |
| 108 | + {/* 主题切换时形态淡入淡出（mode="wait"：旧 Canvas 卸载后再挂载新形态，避免双 Canvas 共存） */} |
| 109 | + <AnimatePresence mode="wait"> |
| 110 | + <motion.div |
| 111 | + key={morph} |
| 112 | + className="absolute inset-0" |
| 113 | + initial={{ opacity: 0 }} |
| 114 | + animate={{ opacity: 1 }} |
| 115 | + exit={{ opacity: 0 }} |
| 116 | + transition={{ duration: 0.3 }} |
| 117 | + > |
| 118 | + {morph === 'abyss' ? ( |
| 119 | + <AbyssView2D |
| 120 | + notes={reefNotes} |
| 121 | + selectedId={selectedId} |
| 122 | + hoveredId={hoveredId} |
| 123 | + highlightIds={highlightIds} |
| 124 | + focusFolderId={focusFolderId} |
| 125 | + onHover={onHover} |
| 126 | + onSelect={onSelect} |
| 127 | + onOpen={onOpen} |
| 128 | + onExit={onExit} |
| 129 | + /> |
| 130 | + ) : ( |
| 131 | + <GrottoView3D |
| 132 | + notes={reefNotes} |
| 133 | + selectedId={selectedId} |
| 134 | + hoveredId={hoveredId} |
| 135 | + highlightIds={highlightIds} |
| 136 | + focusFolderId={focusFolderId} |
| 137 | + onHover={onHover} |
| 138 | + onSelect={onSelect} |
| 139 | + onOpen={onOpen} |
| 140 | + onExit={onExit} |
| 141 | + /> |
| 142 | + )} |
| 143 | + </motion.div> |
| 144 | + </AnimatePresence> |
| 145 | + |
| 146 | + <ReefDiverConsole |
| 147 | + morph={morph} |
| 148 | + folders={folders} |
| 149 | + selectedFolderId={focusFolderId} |
| 150 | + onSelectFolder={onSelectFolder} |
| 151 | + searchQuery={searchQuery} |
| 152 | + onSearchChange={onSearchChange} |
| 153 | + onNewNote={onNewNote} |
| 154 | + onClip={onClip} |
| 155 | + onGraph={onGraph} |
| 156 | + onBatch={onBatch} |
| 157 | + onOrigami={onOrigami} |
| 158 | + onExit={onExit} |
| 159 | + /> |
| 160 | + </div> |
| 161 | + ); |
| 162 | +} |
0 commit comments