|
| 1 | +/** |
| 2 | + * 笔记编辑页底部弹层集合（AI 摘要 / 内容分层 / 信息图 / 滚书背诵 / 声音锚点） |
| 3 | + * Note editor bottom dialog collection |
| 4 | + * |
| 5 | + * @ai-context: 从 NoteEditPage 拆出。纯展示组合层：接收页面持有的弹层开关、 |
| 6 | + * ai 摘要状态（useNoteAI 返回值整体注入）、信息图数据与 healthText，渲染各 |
| 7 | + * Modal 组件；自身无状态。开关状态与 AI 调用仍由页面编排（主文件保留状态编排）。 |
| 8 | + * 信息图导出 SVG 的下载逻辑随 JSX 一并迁入。 |
| 9 | + * @ai-context: Extracted from NoteEditPage. Pure presentational composition: |
| 10 | + * receives dialog toggles, the useNoteAI return object, infographic data and |
| 11 | + * healthText from the page and renders the Modal components; holds no state. |
| 12 | + * Dialog toggles and AI calls stay orchestrated by the page. The infographic |
| 13 | + * SVG-export download logic moved in with its JSX. |
| 14 | + */ |
| 15 | +import { AISummaryModal } from './AISummaryModal'; |
| 16 | +import { ContentTierModal } from './ContentTierModal'; |
| 17 | +import RollingRecallMode from './RollingRecallMode'; |
| 18 | +import { Modal } from '@/components/ui/Modal'; |
| 19 | +import InfographicRenderer from '@/components/InfographicRenderer'; |
| 20 | +import { SoundAnchorPicker } from '@/features/soundanchor/components/SoundAnchorPicker'; |
| 21 | +import { Download } from 'lucide-react'; |
| 22 | +import type { InfographicData } from '@/lib/ai/types'; |
| 23 | +import type { useNoteAI } from '../hooks/useNoteAI'; |
| 24 | + |
| 25 | +interface NoteEditDialogsProps { |
| 26 | + /** useNoteAI 返回对象（摘要浮层全部回调/状态整体注入，避免逐项透传） */ |
| 27 | + ai: ReturnType<typeof useNoteAI>; |
| 28 | + noteId: string | null; |
| 29 | + noteTitle: string; |
| 30 | + healthText: string; |
| 31 | + tierOpen: boolean; |
| 32 | + onCloseTier: () => void; |
| 33 | + infographicOpen: boolean; |
| 34 | + onCloseInfographic: () => void; |
| 35 | + infographic: InfographicData | null; |
| 36 | + infographicLoading: boolean; |
| 37 | + infographicError: string | null; |
| 38 | + isFallback: boolean; |
| 39 | + recallOpen: boolean; |
| 40 | + onCloseRecall: () => void; |
| 41 | + soundAnchorOpen: boolean; |
| 42 | + onCloseSoundAnchor: () => void; |
| 43 | + onGoSettings: () => void; |
| 44 | +} |
| 45 | + |
| 46 | +export function NoteEditDialogs({ |
| 47 | + ai, |
| 48 | + noteId, |
| 49 | + noteTitle, |
| 50 | + healthText, |
| 51 | + tierOpen, |
| 52 | + onCloseTier, |
| 53 | + infographicOpen, |
| 54 | + onCloseInfographic, |
| 55 | + infographic, |
| 56 | + infographicLoading, |
| 57 | + infographicError, |
| 58 | + isFallback, |
| 59 | + recallOpen, |
| 60 | + onCloseRecall, |
| 61 | + soundAnchorOpen, |
| 62 | + onCloseSoundAnchor, |
| 63 | + onGoSettings, |
| 64 | +}: NoteEditDialogsProps) { |
| 65 | + return ( |
| 66 | + <> |
| 67 | + {/* AI 摘要结果浮层 */} |
| 68 | + {ai.summaryModalOpen && ( |
| 69 | + <AISummaryModal |
| 70 | + data={ai.aiData} |
| 71 | + loading={ai.aiLoading} |
| 72 | + error={ai.aiError} |
| 73 | + needsConfig={ai.aiNeedsConfig} |
| 74 | + isStreaming={ai.isStreaming} |
| 75 | + streamingText={ai.streamingText} |
| 76 | + flashcardLoading={ai.flashcardLoading} |
| 77 | + convertedKeys={ai.convertedKeys} |
| 78 | + onClose={() => ai.setSummaryModalOpen(false)} |
| 79 | + onGoSettings={onGoSettings} |
| 80 | + onCopySummary={ai.handleCopySummary} |
| 81 | + onGenerateFlashcard={ai.handleGenerateFlashcard} |
| 82 | + onGenerateAllFlashcards={ai.handleGenerateAllFlashcards} |
| 83 | + onInsertNote={ai.handleInsertNote} |
| 84 | + onRegenerate={ai.handleRegenerate} |
| 85 | + onExport={ai.handleExport} |
| 86 | + onCancelStream={ai.cancelStream} |
| 87 | + /> |
| 88 | + )} |
| 89 | + {/* N5 内容分层弹窗（策略性遗忘标记） */} |
| 90 | + <ContentTierModal open={tierOpen} onClose={onCloseTier} noteText={healthText} noteId={noteId} /> |
| 91 | + |
| 92 | + {/* 知识信息图弹窗：AI 生成中显示 spinner，失败时 hook 已回退默认图（降级提示见 toast） */} |
| 93 | + <Modal |
| 94 | + open={infographicOpen} |
| 95 | + onClose={onCloseInfographic} |
| 96 | + title="知识信息图" |
| 97 | + description={infographicError ?? 'AI 将笔记内容可视化为结构化信息图'} |
| 98 | + size="lg" |
| 99 | + > |
| 100 | + {infographicLoading ? ( |
| 101 | + <div className="flex items-center justify-center py-16"> |
| 102 | + <div className="flex items-center gap-2 text-text-tertiary"> |
| 103 | + <div className="w-4 h-4 border-2 border-brand-400/30 border-t-brand-400 rounded-full animate-spin" /> |
| 104 | + <span className="text-b2">AI 正在生成信息图…</span> |
| 105 | + </div> |
| 106 | + </div> |
| 107 | + ) : infographic ? ( |
| 108 | + <div className="max-h-[60vh] overflow-y-auto"> |
| 109 | + <InfographicRenderer data={infographic} /> |
| 110 | + {isFallback && ( |
| 111 | + <p className="mt-3 text-c1 text-text-tertiary">AI 信息图服务暂不可用，已展示默认信息图。</p> |
| 112 | + )} |
| 113 | + <div className="flex justify-end mt-3"> |
| 114 | + <button |
| 115 | + onClick={() => { |
| 116 | + const svg = document.querySelector('.infographic-renderer svg'); |
| 117 | + if (!svg) return; |
| 118 | + const svgData = new XMLSerializer().serializeToString(svg); |
| 119 | + const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' }); |
| 120 | + const url = URL.createObjectURL(blob); |
| 121 | + const a = document.createElement('a'); |
| 122 | + a.href = url; |
| 123 | + a.download = `infographic-${Date.now()}.svg`; |
| 124 | + a.click(); |
| 125 | + URL.revokeObjectURL(url); |
| 126 | + }} |
| 127 | + className="flex items-center gap-1 px-3 py-1.5 rounded-kb-md text-c1 font-medium text-text-secondary hover:text-text-primary hover:bg-bg-tertiary/40 transition-colors" |
| 128 | + > |
| 129 | + <Download className="w-3.5 h-3.5" strokeWidth={1.5} /> |
| 130 | + 导出 SVG |
| 131 | + </button> |
| 132 | + </div> |
| 133 | + </div> |
| 134 | + ) : null} |
| 135 | + </Modal> |
| 136 | + |
| 137 | + {/* 滚书背诵弹窗：4 轮渐进式回忆 */} |
| 138 | + <Modal |
| 139 | + open={recallOpen} |
| 140 | + onClose={onCloseRecall} |
| 141 | + title="滚书背诵" |
| 142 | + description="4 轮渐进式回忆：通读标记 → 精读理解 → 闭卷回忆 → 默写输出" |
| 143 | + size="lg" |
| 144 | + > |
| 145 | + <RollingRecallMode |
| 146 | + noteContent={healthText} |
| 147 | + noteTitle={noteTitle} |
| 148 | + onClose={onCloseRecall} |
| 149 | + className="max-h-[60vh]" |
| 150 | + /> |
| 151 | + </Modal> |
| 152 | + |
| 153 | + {/* 3.11 声音记忆锚点选择器：绑定当前笔记概念 */} |
| 154 | + <SoundAnchorPicker |
| 155 | + open={soundAnchorOpen} |
| 156 | + conceptId={noteId ?? 'note'} |
| 157 | + conceptTitle={noteTitle || '未命名笔记'} |
| 158 | + onClose={onCloseSoundAnchor} |
| 159 | + /> |
| 160 | + </> |
| 161 | + ); |
| 162 | +} |
0 commit comments