-
+
{serverSaveFiles.length > 0 ? (
-
+
)}
- {/* 🔮 Outer Workspace Area */}
+ {activeView === 'lyrics' ? (
{serverSaveFiles.map((file) => (
-
) : (
- handleLoadServerSave(file)}
+ className="w-full text-left bg-white hover:bg-[#FAF9F6] active:bg-[#E8E4DE]/30 border border-[#E8E4DE]/70 hover:border-[#8B7E74]/40 rounded-lg px-3 py-2.5 transition cursor-pointer"
>
-
+
))}
{file.title}
-
- {file.name} · {new Date(file.savedAt).toLocaleString()} · {file.lineCount ?? '?'} 行
-
-
-
-
-
- 还没有已保存文档。填写标题后点击顶部“保存”即可创建。
+
+ 还没有保存的歌词
)}
- {/* LEFT COMPARTMENT: The writing sheet ledger */}
-
+ {/* LEFT COMPARTMENT: The writing sheet */}
+
- {/* Elegant watermark indicators (Minimal traditional look) */}
-
-
-
-
+
setDocumentTitle(e.target.value)}
@@ -894,7 +1049,10 @@ export default function App() {
setEditingLineId(null);
}}
placeholder="请输入文档标题"
- className="w-full max-w-xl bg-transparent text-center font-serif text-2xl font-bold tracking-widest text-[#2D2926] placeholder-[#A69F92]/50 border-b border-[#E8E4DE] focus:border-[#8B7E74] focus:outline-none py-2"
+ disabled={!canEditDocument}
+ className={`w-full max-w-xl bg-transparent text-center font-serif text-xl sm:text-2xl font-bold tracking-widest text-[#2D2926] placeholder-[#A69F92]/50 border-b border-[#E8E4DE] focus:border-[#8B7E74] focus:outline-none py-1.5 sm:py-2 ${
+ canEditDocument ? '' : 'cursor-default border-transparent'
+ }`}
/>
@@ -961,7 +1119,7 @@ export default function App() {
)}
{/* 📝 Integrated Book Page Layout (Double-click or click line to type/edit; select text or click highlights to view annotation) */}
- {
+
{
// If clicked the background paper itself, deactivate active editing line
if (e.target === e.currentTarget) {
setActiveLineId(null);
@@ -969,7 +1127,10 @@ export default function App() {
setFocusedNoteId(null);
}
}}>
- = ({ activeView, onChange }) => {
+ return (
+ <>
+
+
+
+
+ );
+};
diff --git a/src/components/LineItem.tsx b/src/components/LineItem.tsx
index 82136b3..8d5b973 100644
--- a/src/components/LineItem.tsx
+++ b/src/components/LineItem.tsx
@@ -17,6 +17,7 @@ interface LineItemProps {
fontSize: number;
lineSpacing: number;
readOnly?: boolean;
+ canEdit: boolean;
onUpdate: (lineId: string, newRawText: string, newFuriganaItems?: FuriganaItem[]) => void;
onDelete: (lineId: string) => void;
onActivate: (lineId: string) => void;
@@ -41,6 +42,7 @@ export const LineItem: React.FC = ({
fontSize,
lineSpacing,
readOnly = false,
+ canEdit,
onUpdate,
onDelete,
onActivate,
@@ -58,9 +60,25 @@ export const LineItem: React.FC = ({
const furiganaLayerRef = useRef(null);
const mainInputRef = useRef(null);
const displayRef = useRef(null);
+ const mainTextRef = useRef(null);
+ const mobileSelectionRef = useRef<{
+ pointerId: number;
+ startX: number;
+ startY: number;
+ currentX: number;
+ currentY: number;
+ selecting: boolean;
+ startPoint: TextHitPoint | null;
+ } | null>(null);
const furiganaItems = line.furiganaItems;
+ type TextHitPoint = {
+ node: Text;
+ offset: number;
+ globalOffset: number;
+ };
+
// Expose focus methods dynamically
useEffect(() => {
const handleCustomFocus = (e: CustomEvent<{ field: 'main' | 'furigana' }>) => {
@@ -121,23 +139,152 @@ export const LineItem: React.FC = ({
onUpdate(line.id, line.rawText, nextItems);
};
+ const getCaretRangeFromPoint = (clientX: number, clientY: number) => {
+ const doc = document as Document & {
+ caretRangeFromPoint?: (x: number, y: number) => Range | null;
+ caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null;
+ };
+
+ if (doc.caretRangeFromPoint) {
+ return doc.caretRangeFromPoint(clientX, clientY);
+ }
+
+ const position = doc.caretPositionFromPoint?.(clientX, clientY);
+ if (!position) return null;
+
+ const range = document.createRange();
+ range.setStart(position.offsetNode, position.offset);
+ range.collapse(true);
+ return range;
+ };
+
+ const getTextHitPoint = (clientX: number, clientY: number): TextHitPoint | null => {
+ const root = mainTextRef.current;
+ const range = getCaretRangeFromPoint(clientX, clientY);
+ if (!root || !range || !root.contains(range.startContainer)) return null;
+
+ if (range.startContainer.nodeType !== Node.TEXT_NODE) return null;
+
+ const targetNode = range.startContainer as Text;
+ const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+ let globalOffset = 0;
+ let current = treeWalker.nextNode() as Text | null;
+
+ while (current) {
+ if (current === targetNode) {
+ return {
+ node: targetNode,
+ offset: Math.min(range.startOffset, targetNode.data.length),
+ globalOffset: globalOffset + Math.min(range.startOffset, targetNode.data.length),
+ };
+ }
+
+ globalOffset += current.data.length;
+ current = treeWalker.nextNode() as Text | null;
+ }
+
+ return null;
+ };
+
+ const setVisualSelection = (startPoint: TextHitPoint, endPoint: TextHitPoint) => {
+ const range = document.createRange();
+ if (startPoint.globalOffset <= endPoint.globalOffset) {
+ range.setStart(startPoint.node, startPoint.offset);
+ range.setEnd(endPoint.node, endPoint.offset);
+ } else {
+ range.setStart(endPoint.node, endPoint.offset);
+ range.setEnd(startPoint.node, startPoint.offset);
+ }
+
+ const selection = window.getSelection();
+ selection?.removeAllRanges();
+ selection?.addRange(range);
+ return selection?.toString().trim() || '';
+ };
+
+ const handleMobileSelectionStart = (e: React.PointerEvent) => {
+ if (canEdit || e.pointerType !== 'touch' || !line.rawText) return;
+ const target = e.target as HTMLElement;
+ if (target.closest('[data-note-highlight="true"]') || target.closest('[data-furigana-layer="true"]')) return;
+
+ const startPoint = getTextHitPoint(e.clientX, e.clientY);
+ mobileSelectionRef.current = {
+ pointerId: e.pointerId,
+ startX: e.clientX,
+ startY: e.clientY,
+ currentX: e.clientX,
+ currentY: e.clientY,
+ selecting: false,
+ startPoint,
+ };
+ };
+
+ const handleMobileSelectionMove = (e: React.PointerEvent) => {
+ const gesture = mobileSelectionRef.current;
+ if (!gesture || gesture.pointerId !== e.pointerId) return;
+
+ gesture.currentX = e.clientX;
+ gesture.currentY = e.clientY;
+ const dx = Math.abs(e.clientX - gesture.startX);
+ const dy = Math.abs(e.clientY - gesture.startY);
+
+ if (!gesture.selecting && dx > 10 && dx > dy * 1.15) {
+ gesture.selecting = true;
+ }
+
+ if (gesture.selecting) {
+ e.preventDefault();
+ e.stopPropagation();
+ const endPoint = getTextHitPoint(e.clientX, e.clientY);
+ if (gesture.startPoint && endPoint) {
+ setVisualSelection(gesture.startPoint, endPoint);
+ }
+ }
+ };
+
+ const handleMobileSelectionEnd = (e: React.PointerEvent) => {
+ const gesture = mobileSelectionRef.current;
+ if (!gesture || gesture.pointerId !== e.pointerId) return;
+ mobileSelectionRef.current = null;
+
+ if (!gesture.selecting) return;
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ const endPoint = getTextHitPoint(gesture.currentX, gesture.currentY);
+ const selectedText =
+ gesture.startPoint && endPoint
+ ? setVisualSelection(gesture.startPoint, endPoint)
+ : window.getSelection()?.toString().trim() || '';
+
+ if (selectedText) {
+ onTextSelect(selectedText, line.id);
+ }
+ };
+
// Capture selection in reading mode to add annotations
const handleSelection = () => {
const selection = window.getSelection();
if (!selection || selection.isCollapsed) return;
+ const isNodeInsideFurigana = (node: Node | null) => {
+ const element = node instanceof Element ? node : node?.parentElement;
+ return !!element?.closest('[data-furigana-layer="true"]');
+ };
+
const selectedText = selection.toString().trim();
if (selectedText.length > 0) {
const lowerSelected = selectedText.toLowerCase();
const mainTextLower = (line.rawText || '').toLowerCase();
- const furiTextLower = furiganaItems.map((item) => item.text).join(' ').toLowerCase();
-
const isInside = displayRef.current && (
displayRef.current.contains(selection.anchorNode) ||
displayRef.current.contains(selection.focusNode)
);
- if (isInside || mainTextLower.includes(lowerSelected) || furiTextLower.includes(lowerSelected)) {
+ const isInsideFurigana = isNodeInsideFurigana(selection.anchorNode) || isNodeInsideFurigana(selection.focusNode);
+
+ if (!isInsideFurigana && (isInside || mainTextLower.includes(lowerSelected))) {
onTextSelect(selectedText, line.id);
}
}
@@ -193,6 +340,12 @@ export const LineItem: React.FC = ({
{
+ if (e.pointerType !== 'touch') return;
+ e.preventDefault();
+ e.stopPropagation();
+ onNoteClick(earliestNote!);
+ }}
onClick={(e) => {
e.stopPropagation();
onNoteClick(earliestNote!);
@@ -220,23 +373,23 @@ export const LineItem: React.FC = ({
return (
+
{/* Floating Sticky Drawer for Mobile / Tablet screens which normally hides the Sidebar */}
- {currentSelection && (
-
{lines.map((line, idx) => (
{
+ if (!canEditDocument) return;
setActiveLineId(lineId);
setFocusedNoteId(null);
}}
@@ -994,6 +1157,7 @@ export default function App() {
setSelectedFurigana(null);
}}
onDoubleClick={(lineId) => {
+ if (!canEditDocument) return;
setActiveLineId(lineId);
setEditingLineId(lineId);
setFocusedNoteId(null);
@@ -1033,10 +1197,10 @@ export default function App() {
note.fileName !== boundFileName)}
onFocusNote={handleFocusNote}
onAddNote={handleAddNote}
onDeleteNote={handleDeleteNote}
@@ -1052,44 +1216,150 @@ export default function App() {
/>
+ ) : (
+
-
diff --git a/src/api.ts b/src/api.ts
new file mode 100644
index 0000000..cb3487c
--- /dev/null
+++ b/src/api.ts
@@ -0,0 +1,6 @@
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL?.replace(/\/+$/, '') || '';
+
+export const apiUrl = (path: string) => {
+ const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+ return `${API_BASE_URL}${normalizedPath}`;
+};
diff --git a/src/components/AppNav.tsx b/src/components/AppNav.tsx
new file mode 100644
index 0000000..f0f8d14
--- /dev/null
+++ b/src/components/AppNav.tsx
@@ -0,0 +1,69 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { BookOpen, Layers3 } from 'lucide-react';
+
+export type AppView = 'lyrics' | 'vocab';
+
+interface AppNavProps {
+ activeView: AppView;
+ onChange: (view: AppView) => void;
+}
+
+const NAV_ITEMS = [
+ { id: 'lyrics' as const, label: '歌词', icon: BookOpen },
+ { id: 'vocab' as const, label: '单词卡片', icon: Layers3 },
+];
+
+export const AppNav: React.FC
-
- 划词注释 (移动端视图)
-
-
-
-
- 选中：“{currentSelection.text}”
-
-
-
+ {activeView === 'lyrics' && currentSelection && (
+
+
+
)}
+
+
+
+ 选中：“{currentSelection.text}”
+
+
+
+ {mobileSelectedNote ? (
+
+
+ ) : (
+ <>
+ 已有注释，可直接修改
+
+ 颜色
+
+
+
+
+ {MOBILE_HIGHLIGHT_COLORS.map((color) => (
+
+ ))}
+
+
+ 颜色
+
+
+
+
+ )}
+
+ {MOBILE_HIGHLIGHT_COLORS.map((color) => (
+
+ ))}
+
+
{/* 1. Left gutter with number */}
-
- {showLineNumber && (
+ {showLineNumber && (
+
+ )}
{/* 2. Interactive sheet writing lines (Direct live editing) */}
-
{lineNumber.toString().padStart(2, '0')}
- )}
-
+
+
{!readOnly ? (
/* ================= EDIT MODE: FREE-POSITIONED FURIGANA + MAIN TEXT ================= */
-
+
{/* Top Row: Free-positioned Furigana / 假名 layer */}
= ({
fontFamily={isSerif ? 'var(--font-serif), monospace' : 'var(--font-sans), monospace'}
onChange={updateFuriganaItems}
onItemSelect={(itemId) => onFuriganaSelect(line.id, itemId)}
- onTextSelect={(selectedText) => onTextSelect(selectedText, line.id)}
onFocusMain={() => mainInputRef.current?.focus({ preventScroll: true })}
onFocusPreviousLine={() => moveFocusUp(line.id, 'main')}
/>
@@ -286,40 +438,50 @@ export const LineItem: React.FC = ({
{
+ mobileSelectionRef.current = null;
+ }}
onClick={(e) => {
if ((e.target as HTMLElement).closest('[data-furigana-layer="true"]')) return;
+ if (!canEdit) return;
const selection = window.getSelection();
if (selection && !selection.isCollapsed) return;
onActivate(line.id);
}}
onDoubleClick={(e) => {
- if (onDoubleClick) {
+ if (canEdit && onDoubleClick) {
onDoubleClick(line.id);
}
}}
- className="flex flex-col w-full cursor-text select-text pr-1 font-mono hover:bg-[#FAF9F6]/80 rounded px-1 -mx-1"
+ className={`flex flex-col w-full min-w-0 select-text overflow-hidden pr-0.5 font-mono hover:bg-[#FAF9F6]/80 rounded px-0.5 md:-mx-1 md:px-1 md:pr-1 md:overflow-visible ${
+ canEdit ? 'cursor-text' : 'cursor-default'
+ }`}
>
{/* Furigana line */}
onFuriganaSelect(line.id, itemId)}
- onTextSelect={(selectedText) => onTextSelect(selectedText, line.id)}
+ onItemSelect={canEdit ? (itemId) => onFuriganaSelect(line.id, itemId) : undefined}
/>
{/* Main Kanji text line with word highlighter/comment select matches */}
= ({
@@ -28,33 +28,27 @@ export const Toolbar: React.FC = ({
onViewSavedDocuments,
onSaveDocument,
onToggleBulkImport,
- fileStatus,
showImportArea,
showSavedArea,
savedDocumentCount,
+ canEditDocument,
}) => {
return (
-
{line.rawText ? (
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 3a1e7c7..ebc6047 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -5,14 +5,14 @@
import React, { useState } from 'react';
import { SidebarNote, WritingLine } from '../types';
-import { BookOpen, Tag, Trash2, Search, FileText, ChevronRight, HelpCircle, X, Check } from 'lucide-react';
+import { BookOpen, Tag, Trash2, FileText, ChevronRight, HelpCircle, X, Check } from 'lucide-react';
interface SidebarProps {
lines: WritingLine[];
- activeLineId: string | null;
currentSelection: { text: string; lineId: string } | null;
selectedFurigana: { lineId: string; itemId: string } | null;
focusedNoteId: string | null;
+ savedDocumentNotes: SavedDocumentNote[];
onFocusNote: (noteId: string | null) => void;
onAddNote: (lineId: string, noteText: string, comment: string, color: string, noteId?: string) => void;
onDeleteNote: (lineId: string, noteId: string) => void;
@@ -23,6 +23,18 @@ interface SidebarProps {
onJumpToLine: (lineId: string) => void;
}
+export interface SavedDocumentNote {
+ id: string;
+ text: string;
+ comment: string;
+ color: string;
+ lineId: string;
+ lineNumber: number;
+ lineText: string;
+ documentTitle: string;
+ fileName: string;
+}
+
const HIGHLIGHT_COLORS = [
{ value: 'yellow', label: '岩砂褐', bg: 'bg-[#E8E4DE]', border: 'border-[#8B7E74]', check: 'text-[#2D2926]' },
{ value: 'rose', label: '绯樱红', bg: 'bg-rose-100', border: 'border-rose-400', check: 'text-rose-700' },
@@ -33,10 +45,10 @@ const HIGHLIGHT_COLORS = [
export const Sidebar: React.FC = ({
lines,
- activeLineId,
currentSelection,
selectedFurigana,
focusedNoteId,
+ savedDocumentNotes,
onFocusNote,
onAddNote,
onDeleteNote,
@@ -48,8 +60,6 @@ export const Sidebar: React.FC = ({
}) => {
const [commentText, setCommentText] = useState('');
const [selectedColor, setSelectedColor] = useState('yellow');
- const [searchQuery, setSearchQuery] = useState('');
- const [filterMode, setFilterMode] = useState<'all' | 'active'>('all');
// Check if we are editing an existing note
const isEditing = !!(
@@ -81,6 +91,7 @@ export const Sidebar: React.FC = ({
const selectedFuriganaMaxX = selectedFuriganaLine
? Math.max(4, [...selectedFuriganaLine.rawText].length + 4, (selectedFuriganaItem?.x || 0) + 2)
: 4;
+ const isFuriganaMode = !!(selectedFurigana && selectedFuriganaLine && selectedFuriganaItem);
// Automatically update the comment input field when the selected text/note changes
React.useEffect(() => {
@@ -127,41 +138,57 @@ export const Sidebar: React.FC = ({
}
};
- // Compile all notes across the writing pad
+ // Compile all notes across the document
const allNotesWithLineContext = lines.flatMap((line, idx) => {
return line.notes.map((note) => ({
...note,
lineId: line.id,
lineNumber: idx + 1,
+ lineText: line.rawText,
}));
});
- // Filter notes based on search query, current line focus, and focusedNoteId
- const filteredNotes = allNotesWithLineContext.filter((note) => {
- if (focusedNoteId) {
- return note.id === focusedNoteId;
- }
+ const selectedTextForMatch = currentSelection?.text.trim() || '';
+ const exactMatchedNotes = selectedTextForMatch
+ ? [
+ ...allNotesWithLineContext
+ .filter((note) => note.lineId !== currentSelection?.lineId)
+ .map((note) => ({
+ ...note,
+ documentTitle: '当前歌词',
+ fileName: '',
+ source: 'current' as const,
+ })),
+ ...savedDocumentNotes.map((note) => ({
+ ...note,
+ source: 'saved' as const,
+ })),
+ ].filter((note) => note.text.trim() === selectedTextForMatch)
+ : [];
- const matchesSearch =
- note.text.toLowerCase().includes(searchQuery.toLowerCase()) ||
- note.comment.toLowerCase().includes(searchQuery.toLowerCase());
-
- if (filterMode === 'active') {
- return matchesSearch && note.lineId === activeLineId;
- }
- return matchesSearch;
- });
+ const filteredNotes = focusedNoteId
+ ? allNotesWithLineContext.filter((note) => note.id === focusedNoteId)
+ : allNotesWithLineContext;
return (
- {/* FILTER & SEARCH OVERVIEW */}
-
);
};
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 03b98b8..c6ce3ec 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -17,10 +17,10 @@ interface ToolbarProps {
onViewSavedDocuments: () => void;
onSaveDocument: () => void;
onToggleBulkImport: () => void;
- fileStatus: string;
showImportArea: boolean;
showSavedArea: boolean;
savedDocumentCount: number;
+ canEditDocument: boolean;
}
export const Toolbar: React.FC
- {/* Toggle line vs document */}
-
-
- {focusedNoteId && (
-
-
-
-
-
- {/* Search bar */}
-
-
-
-
-
- 已聚焦单条注释
-
-
-
- )}
-
- {/* LIST OF PREVIOUS NOTES */}
-
- {filteredNotes.length > 0 ? (
- filteredNotes.map((note) => {
- let badgeColorClass = 'bg-[#FAF9F6] border-[#E8E4DE] text-[#2D2926]';
- let dotColor = 'bg-[#8B7E74]';
- if (note.color === 'rose') {
- badgeColorClass = 'bg-rose-50 border-rose-200 text-rose-950';
- dotColor = 'bg-rose-500';
- } else if (note.color === 'sky') {
- badgeColorClass = 'bg-sky-50 border-sky-200 text-sky-950';
- dotColor = 'bg-sky-500';
- } else if (note.color === 'emerald') {
- badgeColorClass = 'bg-emerald-50 border-emerald-200 text-emerald-950';
- dotColor = 'bg-emerald-500';
- } else if (note.color === 'violet') {
- badgeColorClass = 'bg-purple-50 border-purple-200 text-purple-950';
- dotColor = 'bg-purple-500';
- }
-
- const isFocused = focusedNoteId === note.id;
-
- return (
-
+ )}
+
+ )}
{
- if (isFocused) {
- onFocusNote(null);
- } else {
- onFocusNote(note.id);
- }
- }}
- className={`group border rounded-lg p-3 bg-white hover:shadow-xs transition-all flex flex-col gap-2 relative cursor-pointer ${
- isFocused ? 'border-[#8B7E74] ring-1 ring-[#8B7E74]/30' : 'border-[#E8E4DE]/60 hover:border-[#8B7E74]/60'
- }`}
- >
- {/* Note metadata */}
-
+ );
+ })
+ ) : (
+
- {/* Highlight text indicator */}
-
- {note.text}
+ {!isFuriganaMode && (
+ <>
+ {exactMatchedNotes.length > 0 && (
+
+ {/* Comment contents */}
+
+
+ )}
+
+ {!focusedNoteId && (
+ /* LIST OF PREVIOUS NOTES */
+
+
+
+
+ 其他歌词中出现
+
+ {exactMatchedNotes.length} 条
+
+
- {/* Jump-to Line indicator */}
-
+ {filteredNotes.length > 0 ? (
+ filteredNotes.map((note) => {
+ let badgeColorClass = 'bg-[#FAF9F6] border-[#E8E4DE] text-[#2D2926]';
+ let dotColor = 'bg-[#8B7E74]';
+ if (note.color === 'rose') {
+ badgeColorClass = 'bg-rose-50 border-rose-200 text-rose-950';
+ dotColor = 'bg-rose-500';
+ } else if (note.color === 'sky') {
+ badgeColorClass = 'bg-sky-50 border-sky-200 text-sky-950';
+ dotColor = 'bg-sky-500';
+ } else if (note.color === 'emerald') {
+ badgeColorClass = 'bg-emerald-50 border-emerald-200 text-emerald-950';
+ dotColor = 'bg-emerald-500';
+ } else if (note.color === 'violet') {
+ badgeColorClass = 'bg-purple-50 border-purple-200 text-purple-950';
+ dotColor = 'bg-purple-500';
+ }
+
+ const isFocused = focusedNoteId === note.id;
+
+ return (
+
- );
- })
- ) : (
- {
+ if (isFocused) {
+ onFocusNote(null);
+ } else {
+ onFocusNote(note.id);
+ }
}}
- className="text-[#A69F92] hover:text-[#2D2926] border border-transparent hover:border-[#E8E4DE] hover:bg-[#FAF9F6] px-1.5 py-0.5 rounded font-mono text-[10px] flex items-center gap-0.5 transition-all cursor-pointer"
- title="点击跳转并定位此行"
+ className={`group border rounded-lg p-3 bg-white hover:shadow-xs transition-all flex flex-col gap-2 relative cursor-pointer ${
+ isFocused
+ ? 'border-[#8B7E74] ring-1 ring-[#8B7E74]/30'
+ : 'border-[#E8E4DE]/60 hover:border-[#8B7E74]/60'
+ }`}
>
- 行 {note.lineNumber.toString().padStart(2, '0')}
-
+ {/* Note metadata */}
+
+ {/* Highlight text indicator */}
+
+ {note.text}
+
- {/* Comment contents */}
-
- {/* Delete button (displays on card hover) */}
-
-
- {note.comment}
-
+ {/* Jump-to Line indicator */}
+
+
-
- )}
- 无匹配的注释记录
- {searchQuery && (
-
- 尝试缩减包含 “{searchQuery}” 的检索词
-
- )}
-
+ {note.comment}
+
+
+ {/* Delete button (displays on card hover) */}
+
+
+
+ )}
+ 暂无注释记录
+
+
{/* Brand / Logo */}
-
-
-
+
{/* Document actions */}
-
+
-
- 言の葉 Kotonoha 写字板
-
- 無AI纯净版
-
+
- 言の葉 Kotonoha 写字板
-
- 無AI纯净版
-
+
+ 言の葉 写字板
-
- 在阅览模式下划词记录释义 · {fileStatus} -
+
-
+ {canEditDocument && (
+
+ )}
-
+ {canEditDocument && (
+
+ )}