|
| 1 | +/** |
| 2 | + * NoteInsertDialog — 课堂笔记插入弹窗 |
| 3 | + * 分析完成后弹出，让用户选择：追加到已有笔记 / 创建新笔记 / 复制到剪贴板 / 放弃 |
| 4 | + */ |
| 5 | +import { useState, useEffect, useCallback } from 'react'; |
| 6 | +import { |
| 7 | + FilePlus, FilePen, Clipboard, X, Loader2, ChevronDown, |
| 8 | +} from 'lucide-react'; |
| 9 | +import { cn } from '@/lib/utils'; |
| 10 | + |
| 11 | +// ================================================================ |
| 12 | +// Props |
| 13 | +// ================================================================ |
| 14 | + |
| 15 | +export interface CourseNoteItem { |
| 16 | + id: string; |
| 17 | + title: string; |
| 18 | + content?: string; |
| 19 | + updatedAt: string; |
| 20 | +} |
| 21 | + |
| 22 | +interface NoteInsertDialogProps { |
| 23 | + /** 待插入的笔记内容（Markdown） */ |
| 24 | + content: string; |
| 25 | + /** 课程名称（用于查询已有笔记和生成标题） */ |
| 26 | + courseName: string; |
| 27 | + /** 当天同课程的采集序号 */ |
| 28 | + sessionSeq: number; |
| 29 | + /** 查询同课程已有笔记 */ |
| 30 | + fetchCourseNotes: (courseName: string) => Promise<CourseNoteItem[]>; |
| 31 | + /** 追加到已有笔记 */ |
| 32 | + appendToNote: (noteId: string, content: string, sessionLabel: string) => Promise<void>; |
| 33 | + /** 创建新笔记 */ |
| 34 | + createCourseNote: (title: string, content: string) => Promise<void>; |
| 35 | + /** 完成回调（成功后关闭弹窗） */ |
| 36 | + onDone: (message: string) => void; |
| 37 | + /** 关闭弹窗 */ |
| 38 | + onClose: () => void; |
| 39 | +} |
| 40 | + |
| 41 | +// ================================================================ |
| 42 | +// 主组件 |
| 43 | +// ================================================================ |
| 44 | + |
| 45 | +export function NoteInsertDialog({ |
| 46 | + content, |
| 47 | + courseName, |
| 48 | + sessionSeq, |
| 49 | + fetchCourseNotes, |
| 50 | + appendToNote, |
| 51 | + createCourseNote, |
| 52 | + onDone, |
| 53 | + onClose, |
| 54 | +}: NoteInsertDialogProps) { |
| 55 | + const [existingNotes, setExistingNotes] = useState<CourseNoteItem[]>([]); |
| 56 | + const [loadingNotes, setLoadingNotes] = useState(true); |
| 57 | + const [selectedNoteId, setSelectedNoteId] = useState<string | null>(null); |
| 58 | + const [dropdownOpen, setDropdownOpen] = useState(false); |
| 59 | + const [busy, setBusy] = useState(false); |
| 60 | + |
| 61 | + const today = new Date().toLocaleDateString('zh-CN'); |
| 62 | + const sessionLabel = `${today} 第${sessionSeq}次采集`; |
| 63 | + const newNoteTitle = courseName |
| 64 | + ? `${courseName} - ${today} 课堂笔记` |
| 65 | + : `${today} 课堂笔记`; |
| 66 | + |
| 67 | + // 加载同课程已有笔记 |
| 68 | + useEffect(() => { |
| 69 | + let cancelled = false; |
| 70 | + setLoadingNotes(true); |
| 71 | + fetchCourseNotes(courseName) |
| 72 | + .then((notes) => { |
| 73 | + if (!cancelled) { |
| 74 | + setExistingNotes(notes); |
| 75 | + if (notes.length > 0) setSelectedNoteId(notes[0].id); |
| 76 | + } |
| 77 | + }) |
| 78 | + .finally(() => { if (!cancelled) setLoadingNotes(false); }); |
| 79 | + return () => { cancelled = true; }; |
| 80 | + }, [courseName, fetchCourseNotes]); |
| 81 | + |
| 82 | + // 追加到已有笔记 |
| 83 | + const handleAppend = useCallback(async () => { |
| 84 | + if (!selectedNoteId || busy) return; |
| 85 | + setBusy(true); |
| 86 | + try { |
| 87 | + await appendToNote(selectedNoteId, content, sessionLabel); |
| 88 | + const note = existingNotes.find((n) => n.id === selectedNoteId); |
| 89 | + onDone(`已追加到「${note?.title ?? '笔记'}」`); |
| 90 | + } catch (err) { |
| 91 | + console.error('[NoteInsertDialog] 追加失败:', err); |
| 92 | + onDone('追加失败，请重试'); |
| 93 | + } finally { |
| 94 | + setBusy(false); |
| 95 | + } |
| 96 | + }, [selectedNoteId, busy, appendToNote, content, sessionLabel, existingNotes, onDone]); |
| 97 | + |
| 98 | + // 创建新笔记 |
| 99 | + const handleCreate = useCallback(async () => { |
| 100 | + if (busy) return; |
| 101 | + setBusy(true); |
| 102 | + try { |
| 103 | + const fullContent = `## ${sessionLabel}\n\n${content}`; |
| 104 | + await createCourseNote(newNoteTitle, fullContent); |
| 105 | + onDone(`已创建笔记「${newNoteTitle}」`); |
| 106 | + } catch (err) { |
| 107 | + console.error('[NoteInsertDialog] 创建失败:', err); |
| 108 | + onDone('创建笔记失败，请重试'); |
| 109 | + } finally { |
| 110 | + setBusy(false); |
| 111 | + } |
| 112 | + }, [busy, content, sessionLabel, newNoteTitle, createCourseNote, onDone]); |
| 113 | + |
| 114 | + // 复制到剪贴板 |
| 115 | + const handleCopy = useCallback(async () => { |
| 116 | + await navigator.clipboard.writeText(content); |
| 117 | + onDone('已复制到剪贴板'); |
| 118 | + }, [content, onDone]); |
| 119 | + |
| 120 | + const selectedNote = existingNotes.find((n) => n.id === selectedNoteId); |
| 121 | + |
| 122 | + return ( |
| 123 | + <div className="fixed inset-0 z-50 flex items-center justify-center"> |
| 124 | + {/* 遮罩 */} |
| 125 | + <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} /> |
| 126 | + |
| 127 | + {/* 弹窗主体 */} |
| 128 | + <div className="relative w-[420px] max-w-[90vw] rounded-kb-xl bg-bg-elevated border border-border/40 shadow-kb-lg overflow-hidden"> |
| 129 | + {/* 头部 */} |
| 130 | + <div className="flex items-center justify-between px-5 py-3.5 border-b border-border/20"> |
| 131 | + <h3 className="text-b2 font-semibold text-text-primary">保存课堂笔记</h3> |
| 132 | + <button onClick={onClose} className="text-text-tertiary hover:text-text-secondary transition-colors"> |
| 133 | + <X className="w-4 h-4" strokeWidth={1.5} /> |
| 134 | + </button> |
| 135 | + </div> |
| 136 | + |
| 137 | + <div className="px-5 py-4 space-y-4"> |
| 138 | + {/* 内容预览摘要 */} |
| 139 | + <div className="px-3 py-2.5 rounded-kb-md bg-bg-secondary/60 border border-border/20 max-h-24 overflow-y-auto"> |
| 140 | + <p className="text-b3 text-text-tertiary leading-relaxed line-clamp-3"> |
| 141 | + {content.slice(0, 200)}{content.length > 200 ? '...' : ''} |
| 142 | + </p> |
| 143 | + </div> |
| 144 | + |
| 145 | + {/* 选项 1：追加到已有笔记 */} |
| 146 | + <div className="space-y-2"> |
| 147 | + <div className="flex items-center gap-2"> |
| 148 | + <FilePen className="w-4 h-4 text-brand-500" strokeWidth={1.5} /> |
| 149 | + <span className="text-b3 font-medium text-text-secondary">追加到已有笔记</span> |
| 150 | + </div> |
| 151 | + {loadingNotes ? ( |
| 152 | + <div className="flex items-center gap-2 px-3 py-2 text-b3 text-text-tertiary"> |
| 153 | + <Loader2 className="w-3.5 h-3.5 animate-spin" /> 正在查找同课程笔记... |
| 154 | + </div> |
| 155 | + ) : existingNotes.length > 0 ? ( |
| 156 | + <> |
| 157 | + {/* 下拉选择 */} |
| 158 | + <div className="relative"> |
| 159 | + <button |
| 160 | + onClick={() => setDropdownOpen(!dropdownOpen)} |
| 161 | + className="w-full flex items-center justify-between px-3 py-2 rounded-kb-md text-b3 bg-bg-secondary border border-border/30 text-text-primary hover:border-brand-300 transition-colors" |
| 162 | + > |
| 163 | + <span className="truncate">{selectedNote?.title ?? '选择笔记...'}</span> |
| 164 | + <ChevronDown className={cn('w-4 h-4 text-text-tertiary transition-transform', dropdownOpen && 'rotate-180')} strokeWidth={1.5} /> |
| 165 | + </button> |
| 166 | + {dropdownOpen && ( |
| 167 | + <div className="absolute z-10 mt-1 w-full max-h-36 overflow-y-auto rounded-kb-md bg-bg-elevated border border-border/40 shadow-kb-md"> |
| 168 | + {existingNotes.map((note) => ( |
| 169 | + <button |
| 170 | + key={note.id} |
| 171 | + onClick={() => { setSelectedNoteId(note.id); setDropdownOpen(false); }} |
| 172 | + className={cn( |
| 173 | + 'w-full text-left px-3 py-2 text-b3 transition-colors', |
| 174 | + note.id === selectedNoteId ? 'bg-brand-50 text-brand-700' : 'text-text-secondary hover:bg-bg-tertiary', |
| 175 | + )} |
| 176 | + > |
| 177 | + <span className="block truncate">{note.title}</span> |
| 178 | + <span className="text-[10px] text-text-tertiary"> |
| 179 | + 更新于 {new Date(note.updatedAt).toLocaleString('zh-CN')} |
| 180 | + </span> |
| 181 | + </button> |
| 182 | + ))} |
| 183 | + </div> |
| 184 | + )} |
| 185 | + </div> |
| 186 | + <p className="text-[11px] text-text-tertiary"> |
| 187 | + 将在笔记末尾追加「{sessionLabel}」分段 |
| 188 | + </p> |
| 189 | + <button |
| 190 | + onClick={handleAppend} |
| 191 | + disabled={busy || !selectedNoteId} |
| 192 | + className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-kb-md text-b3 font-medium bg-brand-600 text-white hover:bg-brand-700 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed" |
| 193 | + > |
| 194 | + {busy ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <FilePen className="w-3.5 h-3.5" strokeWidth={1.5} />} |
| 195 | + 追加到「{selectedNote?.title ? (selectedNote.title.length > 12 ? selectedNote.title.slice(0, 12) + '...' : selectedNote.title) : '...'}」 |
| 196 | + </button> |
| 197 | + </> |
| 198 | + ) : ( |
| 199 | + <p className="text-b3 text-text-tertiary px-1"> |
| 200 | + {courseName ? `未找到「${courseName}」相关笔记` : '未填写课程名，无法查找已有笔记'} |
| 201 | + </p> |
| 202 | + )} |
| 203 | + </div> |
| 204 | + |
| 205 | + {/* 分隔线 */} |
| 206 | + <div className="border-t border-border/20" /> |
| 207 | + |
| 208 | + {/* 选项 2：创建新笔记 */} |
| 209 | + <div className="space-y-2"> |
| 210 | + <div className="flex items-center gap-2"> |
| 211 | + <FilePlus className="w-4 h-4 text-emerald-500" strokeWidth={1.5} /> |
| 212 | + <span className="text-b3 font-medium text-text-secondary">创建新笔记</span> |
| 213 | + </div> |
| 214 | + <p className="text-[11px] text-text-tertiary px-1">标题：{newNoteTitle}</p> |
| 215 | + <button |
| 216 | + onClick={handleCreate} |
| 217 | + disabled={busy} |
| 218 | + className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-kb-md text-b3 font-medium bg-emerald-600/10 text-emerald-600 hover:bg-emerald-600/20 active:scale-[0.98] transition-all disabled:opacity-50" |
| 219 | + > |
| 220 | + <FilePlus className="w-3.5 h-3.5" strokeWidth={1.5} /> |
| 221 | + 创建新笔记 |
| 222 | + </button> |
| 223 | + </div> |
| 224 | + |
| 225 | + {/* 分隔线 */} |
| 226 | + <div className="border-t border-border/20" /> |
| 227 | + |
| 228 | + {/* 选项 3：复制到剪贴板 */} |
| 229 | + <button |
| 230 | + onClick={handleCopy} |
| 231 | + disabled={busy} |
| 232 | + className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-kb-md text-b3 font-medium bg-bg-secondary text-text-secondary hover:bg-bg-tertiary active:scale-[0.98] transition-all disabled:opacity-50" |
| 233 | + > |
| 234 | + <Clipboard className="w-3.5 h-3.5" strokeWidth={1.5} /> |
| 235 | + 仅复制到剪贴板 |
| 236 | + </button> |
| 237 | + </div> |
| 238 | + |
| 239 | + {/* 底部：放弃 */} |
| 240 | + <div className="px-5 py-3 border-t border-border/20 bg-bg-secondary/50 flex justify-end"> |
| 241 | + <button |
| 242 | + onClick={onClose} |
| 243 | + className="px-3 py-1.5 rounded-kb-md text-b3 font-medium text-text-tertiary hover:text-text-secondary transition-colors" |
| 244 | + > |
| 245 | + 放弃 |
| 246 | + </button> |
| 247 | + </div> |
| 248 | + </div> |
| 249 | + </div> |
| 250 | + ); |
| 251 | +} |
| 252 | + |
| 253 | +export default NoteInsertDialog; |
0 commit comments