[WIP] Fix current scene functionality and implement book status management

src/app/App.css

@@ -122,3 +122,82 @@ body, html {
 
 .leaf-held-pages-panel { width: 300px; border-left: 1px solid var(--kindle-border); background: var(--kindle-paper); flex-shrink: 0; }
 .leaf-timeline-bar { height: 64px; background: var(--kindle-paper); border-top: 1px solid var(--kindle-border); flex-shrink: 0; }
+
+/* Recently opened books */
+.recent-books {
+  margin-top: 48px;
+  width: 100%;
+  max-width: 560px;
+  text-align: left;
+}
+
+.recent-books-title {
+  font-family: var(--font-serif);
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--kindle-gray);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--kindle-border);
+}
+
+.recent-books-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.recent-book-item {
+  width: 100%;
+}
+
+.recent-book-btn {
+  width: 100%;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 10px 14px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  text-align: left;
+  transition: background 0.15s, border-color 0.15s;
+  font-family: var(--font-serif);
+}
+
+.recent-book-btn:hover {
+  background: rgba(0, 0, 0, 0.04);
+  border-color: var(--kindle-border);
+}
+
+.recent-book-name {
+  font-size: 0.95rem;
+  color: var(--kindle-ink);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.recent-book-meta {
+  font-size: 0.78rem;
+  color: var(--kindle-gray);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.status-badge {
+  margin-left: 8px;
+  font-size: 0.75rem;
+  color: var(--kindle-gray);
+  font-style: italic;
+}
+.kindle-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

src/app/App.tsx

@@ -10,6 +10,7 @@ import { useHeldStore } from '../stores/heldStore';
 import { useWindowStore } from '../stores/windowStore';
 import { useQuickFlipStore } from '../stores/quickFlipStore';
 import { useWorkspaceStore } from '../stores/workspaceStore';
+import { useRecentBooksStore } from '../stores/recentBooksStore';
 import { thumbnailService } from '../services/ThumbnailService';
 
 function App() {
@@ -18,21 +19,39 @@ function App() {
   const { windows, updateWindow, closeWindow, openInNewWindow, setActiveWindow } = useWindowStore();
   const { isOpen: isQuickFlipVisible, close: closeQuickFlip, open: openQuickFlip } = useQuickFlipStore();
   const { saveWorkspace, restoreWorkspace, status: workspaceStatus } = useWorkspaceStore();
+  const { books: recentBooks, loadBooks: loadRecentBooks, addBook: addRecentBook } = useRecentBooksStore();
 
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const pendingFileNameRef = useRef<string>('');
+
+  // Load recent books on mount
+  useEffect(() => {
+    loadRecentBooks();
+  }, [loadRecentBooks]);
 
   const handleFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
+      pendingFileNameRef.current = file.name;
       try {
         await loadDocument(file);
-        const newId = useBookStore.getState().documentId;
-        if (newId) await restoreWorkspace(newId);
+        const state = useBookStore.getState();
+        const newId = state.documentId;
+        if (newId) {
+          await restoreWorkspace(newId);
+          await addRecentBook({
+            documentId: newId,
+            fileName: file.name,
+            totalPages: state.totalPages,
+          });
+        }
       } catch (err) {
         console.error('Workflow Error:', err);
       }
+      // Reset input so the same file can be re-selected
+      e.target.value = '';
     }
-  }, [loadDocument, restoreWorkspace]);
+  }, [loadDocument, restoreWorkspace, addRecentBook]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -56,6 +75,7 @@ function App() {
         <div className="logo-section">
           <span className="logo-text">LeafSpace</span>
           {workspaceStatus === 'restoring' && <span className="status-badge">正在恢复布局...</span>}
+          {workspaceStatus === 'saving' && <span className="status-badge">正在保存...</span>}
         </div>
 
         <div className="center-info">
@@ -73,7 +93,7 @@ function App() {
           <button onClick={() => fileInputRef.current?.click()} className="kindle-btn">导入书籍</button>
           <button 
             onClick={() => documentId && saveWorkspace(documentId)} 
-            disabled={!documentId}
+            disabled={!documentId || workspaceStatus === 'saving'}
             className="kindle-btn outline"
           >
             保存现场
@@ -99,6 +119,28 @@ function App() {
                 <p>为扫描版 PDF 打造的空间化阅读体验。</p>
                 <button onClick={() => fileInputRef.current?.click()} className="kindle-btn large">开启您的阅读之旅</button>
               </div>
+
+              {recentBooks.length > 0 && (
+                <div className="recent-books">
+                  <h2 className="recent-books-title">最近打开</h2>
+                  <ul className="recent-books-list">
+                    {recentBooks.map((book) => (
+                      <li key={book.documentId} className="recent-book-item">
+                        <button
+                          className="recent-book-btn"
+                          onClick={() => fileInputRef.current?.click()}
+                          title={`重新导入文件以恢复 "${book.fileName}" 的阅读状态`}
+                        >
+                          <span className="recent-book-name">{book.fileName}</span>
+                          <span className="recent-book-meta">
+                            {book.totalPages} 页 · {new Date(book.lastOpenedAt).toLocaleDateString('zh-CN')}
+                          </span>
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
             </div>
           )}
         </section>