feat:优化移动端体验

Author: codedogQBY

packages/app-mobile/src/App.tsx

@@ -13,6 +13,7 @@ import { TTSSettingsPage } from "@/components/settings/TTSSettingsPage";
 import { TranslationSettingsPage } from "@/components/settings/TranslationSettingsPage";
 import { AboutPage } from "@/components/settings/AboutPage";
 import { VectorModelSettingsPage } from "@/components/settings/VectorModelSettingsPage";
+import { MobileStatsPage } from "@/components/stats/MobileStatsPage";
 
 export default function App() {
   return (
@@ -37,6 +38,7 @@ export default function App() {
         <Route path="/settings/about" element={<AboutPage />} />
         <Route path="/settings/vector-model" element={<VectorModelSettingsPage />} />
         <Route path="/skills" element={<SkillsPage />} />
+        <Route path="/stats" element={<MobileStatsPage />} />
 
         {/* Default redirect */}
         <Route path="*" element={<Navigate to="/library" replace />} />

packages/app-mobile/src/components/layout/NavHeader.tsx

@@ -33,11 +33,14 @@ export function NavHeader({
   return (
     <header
       className={cn(
-        "relative flex h-11 shrink-0 items-center px-4",
+        "relative flex shrink-0 items-center px-4",
         !transparent && "border-b border-border bg-background",
         className,
       )}
-      style={{ paddingTop: "var(--safe-area-top)" }}
+      style={{
+        paddingTop: "var(--safe-area-top, 0px)",
+        height: "calc(2.75rem + var(--safe-area-top, 0px))",
+      }}
     >
       {/* Left: back button */}
       {showBack && (
@@ -52,7 +55,10 @@ export function NavHeader({
 
       {/* Center: title */}
       {title && (
-        <h1 className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-base font-semibold truncate max-w-[60%]">
+        <h1
+          className="absolute left-1/2 -translate-x-1/2 text-base font-semibold truncate max-w-[60%]"
+          style={{ top: "calc(var(--safe-area-top, 0px) + 1.375rem)", transform: "translate(-50%, -50%)" }}
+        >
           {title}
         </h1>
       )}

packages/app-mobile/src/components/notes/NotesPage.tsx

@@ -5,6 +5,7 @@
 import { useEffect, useMemo, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
+import { useCoverUrl } from "@/lib/use-cover-url";
 import {
   NotebookPen,
   Highlighter,
@@ -101,6 +102,8 @@ export function NotesPage() {
     return bookNotebooks.find((b) => b.bookId === selectedBookId) || null;
   }, [selectedBookId, bookNotebooks]);
 
+  const selectedBookCover = useCoverUrl(selectedBook?.coverUrl);
+
   const { notes, highlightsOnly } = useMemo(() => {
     if (!selectedBook) return { notes: [], highlightsOnly: [] };
     let all = selectedBook.highlights;
@@ -230,9 +233,9 @@ export function NotesPage() {
                 <ChevronLeft className="h-5 w-5" />
               </button>
 
-              {selectedBook?.coverUrl ? (
+              {selectedBookCover ? (
                 <img
-                  src={selectedBook.coverUrl}
+                  src={selectedBookCover}
                   alt=""
                   className="h-10 w-7 shrink-0 rounded object-cover shadow-sm"
                 />
@@ -423,15 +426,16 @@ interface NotebookCardProps {
 }
 
 function NotebookCard({ book, onClick }: NotebookCardProps) {
+  const resolvedCover = useCoverUrl(book.coverUrl);
   return (
     <button
       type="button"
       className="flex w-full items-start gap-3 rounded-xl border border-border bg-card p-3 text-left active:bg-muted/50 transition-colors"
       onClick={onClick}
     >
-      {book.coverUrl ? (
+      {resolvedCover ? (
         <img
-          src={book.coverUrl}
+          src={resolvedCover}
           alt=""
           className="h-16 w-11 shrink-0 rounded object-cover shadow-sm"
         />