feat(story): per-reader font / line-height prefs and scroll position memory

Story pages now remember how each reader likes to read.

Reading preferences
- New floating Type button at the bottom-right of the reader opens a
  popover with three font sizes (sm / md / lg) and three line heights
  (compact / normal / relaxed)
- useReadingPrefs hook persists choices to localStorage via
  useSyncExternalStore so multiple instances stay in sync within a tab
- StoryReader injects the chosen values as CSS custom properties on
  the <article> wrapper; ChapterBody reads them as fontSize and
  lineHeight, so the memoized chapter component does not re-render
  when settings change

Reading position memory
- useReadingProgress writes a throttled scroll percent (1.5s) to
  localStorage per story, with floor / ceiling thresholds so trivial
  and finished reads do not stick
- On revisit, ReadingProgressBanner shows a dismissable card with the
  saved percent and a "回到上次位置" smooth scroll action

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ChanMeng666

src/components/story/ReadingPrefs.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { Type, AlignJustify } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import {
+  useReadingPrefs,
+  type FontSize,
+  type LineHeight,
+} from "@/lib/hooks/useReadingPrefs";
+import { cn } from "@/lib/utils";
+
+const FONT_OPTIONS: Array<{ value: FontSize; label: string; sample: string }> = [
+  { value: "sm", label: "小", sample: "A" },
+  { value: "md", label: "中", sample: "A" },
+  { value: "lg", label: "大", sample: "A" },
+];
+
+const LINE_OPTIONS: Array<{ value: LineHeight; label: string }> = [
+  { value: "compact", label: "紧凑" },
+  { value: "normal", label: "标准" },
+  { value: "relaxed", label: "宽松" },
+];
+
+const FONT_SAMPLE_CLASS: Record<FontSize, string> = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+};
+
+export function ReadingPrefs() {
+  const { fontSize, lineHeight, setFontSize, setLineHeight } = useReadingPrefs();
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          aria-label="阅读偏好"
+          className="fixed bottom-6 right-6 z-30 size-11 rounded-full bg-surface/95 backdrop-blur-lg shadow-lg border-border/60"
+        >
+          <Type className="size-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        side="top"
+        sideOffset={8}
+        className="w-64 space-y-4"
+      >
+        <div className="space-y-2">
+          <p className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+            <Type className="size-3.5" />
+            字号
+          </p>
+          <div className="grid grid-cols-3 gap-1.5">
+            {FONT_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => setFontSize(opt.value)}
+                aria-pressed={fontSize === opt.value}
+                aria-label={`字号 ${opt.label}`}
+                className={cn(
+                  "h-12 rounded-lg border flex flex-col items-center justify-center gap-0.5 transition-colors",
+                  fontSize === opt.value
+                    ? "border-primary bg-primary/10 text-primary"
+                    : "border-border bg-surface text-muted-foreground hover:bg-muted"
+                )}
+              >
+                <span className={cn("font-prose", FONT_SAMPLE_CLASS[opt.value])}>
+                  {opt.sample}
+                </span>
+                <span className="text-[10px]">{opt.label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <p className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
+            <AlignJustify className="size-3.5" />
+            行距
+          </p>
+          <div className="grid grid-cols-3 gap-1.5">
+            {LINE_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => setLineHeight(opt.value)}
+                aria-pressed={lineHeight === opt.value}
+                aria-label={`行距 ${opt.label}`}
+                className={cn(
+                  "h-9 rounded-lg border text-xs transition-colors",
+                  lineHeight === opt.value
+                    ? "border-primary bg-primary/10 text-primary"
+                    : "border-border bg-surface text-muted-foreground hover:bg-muted"
+                )}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

src/components/story/ReadingProgressBanner.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { BookmarkCheck, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface ReadingProgressBannerProps {
+  percent: number;
+  onRestore: () => void;
+  onDismiss: () => void;
+}
+
+/**
+ * Floating restore prompt shown when the user revisits a story they
+ * scrolled through last time. Sits below the global header and is
+ * dismissable; the parent decides when to render it.
+ */
+export function ReadingProgressBanner({
+  percent,
+  onRestore,
+  onDismiss,
+}: ReadingProgressBannerProps) {
+  return (
+    <div className="fixed top-20 right-4 sm:right-6 z-30 max-w-xs animate-fade-slide-in">
+      <div className="flex items-start gap-3 rounded-2xl border border-border bg-surface/95 backdrop-blur-lg shadow-lg px-4 py-3">
+        <div className="flex items-center justify-center size-8 rounded-lg bg-primary/15 text-primary shrink-0">
+          <BookmarkCheck className="size-4" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-foreground">
+            上次读到 {percent}%
+          </p>
+          <button
+            type="button"
+            onClick={onRestore}
+            className="mt-1 text-xs font-medium text-primary hover:underline"
+          >
+            回到上次位置
+          </button>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="忽略"
+          onClick={onDismiss}
+          className="size-7 -mt-1 -mr-1 rounded-full"
+        >
+          <X className="size-3.5" />
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/story/StoryReader.tsx

@@ -12,6 +12,14 @@ import { formatError } from "@/lib/format-error";
 import { CommentsSection } from "./CommentsSection";
 import { ContinueChapterDialog } from "./ContinueChapterDialog";
 import { ViewTracker } from "./ViewTracker";
+import { ReadingPrefs } from "./ReadingPrefs";
+import { ReadingProgressBanner } from "./ReadingProgressBanner";
+import {
+  useReadingPrefs,
+  useReadingProgress,
+  FONT_SIZE_PX,
+  LINE_HEIGHT_VALUE,
+} from "@/lib/hooks";
 
 interface StoryReaderProps {
   story: {
@@ -98,7 +106,13 @@ const ChapterBody = memo(function ChapterBody({
           {chapterTitle && chapterTitle !== storyTitle ? `：${chapterTitle}` : ""}
         </h2>
       )}
-      <div className="font-prose text-foreground/90 leading-8 text-base md:text-lg whitespace-pre-wrap">
+      <div
+        className="font-prose text-foreground/90 whitespace-pre-wrap"
+        style={{
+          fontSize: "var(--reader-font-size, 1.075rem)",
+          lineHeight: "var(--reader-line-height, 1.85)",
+        }}
+      >
         {content}
       </div>
       {showSeparator && <Separator className="mt-12" />}
@@ -119,6 +133,9 @@ export function StoryReader({
   const [liking, setLiking] = useState(false);
   const [continueOpen, setContinueOpen] = useState(false);
 
+  const { fontSize, lineHeight } = useReadingPrefs();
+  const { savedPercent, restore, dismiss } = useReadingProgress({ storyId: story.id });
+
   const displayDate = story.publishedAt ?? story.createdAt;
   const chapterCount = story.chapters.length;
 
@@ -141,7 +158,15 @@ export function StoryReader({
   }
 
   return (
-    <article className="max-w-3xl mx-auto px-3 sm:px-4 py-6 sm:py-10">
+    <article
+      className="max-w-3xl mx-auto px-3 sm:px-4 py-6 sm:py-10"
+      style={
+        {
+          "--reader-font-size": FONT_SIZE_PX[fontSize],
+          "--reader-line-height": LINE_HEIGHT_VALUE[lineHeight],
+        } as React.CSSProperties
+      }
+    >
       <header className="mb-6 sm:mb-8 space-y-3 sm:space-y-4">
         <div className="flex items-start justify-between gap-3">
           <h1 className="font-display text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-foreground leading-tight">
@@ -285,6 +310,15 @@ export function StoryReader({
       )}
 
       <ViewTracker storyId={story.id} />
+
+      <ReadingPrefs />
+      {savedPercent !== null && (
+        <ReadingProgressBanner
+          percent={savedPercent}
+          onRestore={restore}
+          onDismiss={dismiss}
+        />
+      )}
     </article>
   );
 }

src/lib/hooks/index.ts

@@ -3,3 +3,11 @@ export { useStoryCreation } from "./useStoryCreation";
 export { useMousePositionRef } from "./use-mouse-position-ref";
 export { useInfiniteScroll } from "./useInfiniteScroll";
 export { useDebounce } from "./useDebounce";
+export {
+  useReadingPrefs,
+  FONT_SIZE_PX,
+  LINE_HEIGHT_VALUE,
+  type FontSize,
+  type LineHeight,
+} from "./useReadingPrefs";
+export { useReadingProgress } from "./useReadingProgress";

src/lib/hooks/useReadingPrefs.ts

@@ -0,0 +1,100 @@
+"use client";
+
+import { useCallback, useSyncExternalStore } from "react";
+
+export type FontSize = "sm" | "md" | "lg";
+export type LineHeight = "compact" | "normal" | "relaxed";
+
+interface ReadingPrefs {
+  fontSize: FontSize;
+  lineHeight: LineHeight;
+}
+
+const STORAGE_KEY = "fanfic-lab:reading-prefs";
+const DEFAULT_PREFS: ReadingPrefs = { fontSize: "md", lineHeight: "normal" };
+
+// Per-tab pub/sub so multiple <ReadingPrefs /> instances stay in sync
+// after the user picks a new value (the native `storage` event only
+// fires across tabs, not within the same tab).
+const listeners = new Set<() => void>();
+let cachedSnapshot: ReadingPrefs | null = null;
+
+function readFromStorage(): ReadingPrefs {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return DEFAULT_PREFS;
+    const parsed = JSON.parse(raw) as Partial<ReadingPrefs>;
+    return {
+      fontSize: parsed.fontSize ?? DEFAULT_PREFS.fontSize,
+      lineHeight: parsed.lineHeight ?? DEFAULT_PREFS.lineHeight,
+    };
+  } catch {
+    return DEFAULT_PREFS;
+  }
+}
+
+function subscribe(onChange: () => void): () => void {
+  listeners.add(onChange);
+  if (typeof window !== "undefined") {
+    window.addEventListener("storage", onChange);
+  }
+  return () => {
+    listeners.delete(onChange);
+    if (typeof window !== "undefined") {
+      window.removeEventListener("storage", onChange);
+    }
+  };
+}
+
+function getSnapshot(): ReadingPrefs {
+  // useSyncExternalStore demands a stable reference between renders when
+  // the underlying value hasn't changed; recompute only after a write.
+  if (cachedSnapshot === null) cachedSnapshot = readFromStorage();
+  return cachedSnapshot;
+}
+
+function getServerSnapshot(): ReadingPrefs {
+  return DEFAULT_PREFS;
+}
+
+function persist(next: ReadingPrefs) {
+  cachedSnapshot = next;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+  } catch {
+    // storage full / blocked — preferences just won't persist
+  }
+  listeners.forEach((l) => l());
+}
+
+/**
+ * Lightweight reader preferences hook.
+ *
+ * Persists font size and line height to localStorage and returns the
+ * current values plus setters. SSR-safe via useSyncExternalStore.
+ */
+export function useReadingPrefs() {
+  const prefs = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  const setFontSize = useCallback((fontSize: FontSize) => {
+    persist({ ...getSnapshot(), fontSize });
+  }, []);
+
+  const setLineHeight = useCallback((lineHeight: LineHeight) => {
+    persist({ ...getSnapshot(), lineHeight });
+  }, []);
+
+  return { ...prefs, setFontSize, setLineHeight };
+}
+
+export const FONT_SIZE_PX: Record<FontSize, string> = {
+  sm: "0.95rem",
+  md: "1.075rem",
+  lg: "1.25rem",
+};
+
+export const LINE_HEIGHT_VALUE: Record<LineHeight, string> = {
+  compact: "1.65",
+  normal: "1.85",
+  relaxed: "2.1",
+};