feat(story): track and display per-story view counts

Phase 2 PR-2A. Adds Story.viewCount with session-deduped tracking and
surfaces it everywhere a story is shown.

Schema:
- New Story.viewCount Int @default(0)
- Migration 20260421083000_add_story_view_count already applied to
  the production Neon DB before this commit

Tracking:
- recordStoryView server action: simple increment, no auth required
  (anonymous reads count too)
- New ViewTracker client component fires once per session per story
  via sessionStorage dedupe — refreshing the same tab won't re-count,
  a new tab/session will. Failures silently roll back the dedupe key
  so a transient network error doesn't permanently mute counting.
- Mounted at the bottom of StoryReader

Display:
- Story detail header now shows reading time estimate (300 字/min)
  and view count alongside chapter / word count
- StoryCard footer shows views next to word/chapter counts
- Feed, profile (own + drafts + liked), and public author page all
  thread viewCount through their card mappers

Reading-time estimate is intentionally simple (wordCount / 300) and
clamps to a minimum of 1 minute. Will refine if user feedback says
it's off for English-heavy stories.

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

Author: ChanMeng666

prisma/migrations/20260421083000_add_story_view_count/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Story" ADD COLUMN "viewCount" INTEGER NOT NULL DEFAULT 0;

prisma/schema.prisma

@@ -77,6 +77,7 @@ model Story {
   rating        Rating      @default(GENERAL)
   status        StoryStatus @default(DRAFT)
   wordCount     Int         @default(0)
+  viewCount     Int         @default(0)
   coverImageUrl String?
 
   authorId String

src/app/(main)/(protected)/profile/profile-client.tsx

@@ -70,6 +70,7 @@ interface Story {
   rating: string;
   status: string;
   wordCount: number;
+  viewCount?: number;
   coverImageUrl: string | null;
   publishedAt: string | null;
   createdAt: string;
@@ -132,6 +133,7 @@ function toCardData(story: Story, fallbackAuthor: { id: string; username: string
     chapterCount: story._count.chapters,
     likes: story._count.likes,
     comments: story._count.comments,
+    views: story.viewCount ?? 0,
     coverUrl: story.coverImageUrl ?? undefined,
     author: {
       id: author.id,

src/app/(main)/feed/page.tsx

@@ -107,6 +107,7 @@ function FeedPageContent() {
         chapterCount: story._count?.chapters || 0,
         likes: story._count?.likes || 0,
         comments: story._count?.comments || 0,
+        views: story.viewCount,
         coverUrl: story.coverImageUrl || undefined,
         author: {
           id: story.author.id,

src/app/(main)/users/[username]/page.tsx

@@ -91,6 +91,7 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
     chapterCount: story._count.chapters,
     likes: story._count.likes,
     comments: story._count.comments,
+    views: story.viewCount,
     coverUrl: story.coverImageUrl ?? undefined,
     author: {
       id: profile.id,

src/components/feed/StoryCard.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import Image from "next/image";
-import { Heart, MessageSquare, BookOpen } from "lucide-react";
+import { Heart, MessageSquare, BookOpen, Eye } from "lucide-react";
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -22,6 +22,7 @@ export interface StoryCardData {
   chapterCount: number;
   likes: number;
   comments: number;
+  views?: number;
   coverUrl?: string;
   author: {
     id: string;
@@ -177,12 +178,18 @@ export function StoryCard({ story, onLike }: StoryCardProps) {
       </CardContent>
 
       <CardFooter className="pt-2 border-t border-border flex items-center justify-between">
-        <div className="flex items-center gap-4 text-sm text-muted-foreground">
+        <div className="flex items-center gap-3 text-sm text-muted-foreground">
           <span className="flex items-center gap-1">
             <BookOpen className="size-3.5" />
             {formatNumber(story.wordCount)} 字
           </span>
           <span>{story.chapterCount} 章</span>
+          {typeof story.views === "number" && (
+            <span className="flex items-center gap-1">
+              <Eye className="size-3.5" />
+              {formatNumber(story.views)}
+            </span>
+          )}
         </div>
         <div className="relative z-20 flex items-center gap-1">
           <Button

src/components/story/StoryReader.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { Heart, BookOpen, Calendar, User, Tag, MessageSquare, Pencil, Sparkles } from "lucide-react";
+import { Heart, BookOpen, Calendar, User, Tag, MessageSquare, Pencil, Sparkles, Eye } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
@@ -10,6 +10,7 @@ import { toggleLike } from "@/lib/actions/story";
 import { toast } from "sonner";
 import { CommentsSection } from "./CommentsSection";
 import { ContinueChapterDialog } from "./ContinueChapterDialog";
+import { ViewTracker } from "./ViewTracker";
 
 interface StoryReaderProps {
   story: {
@@ -21,6 +22,7 @@ interface StoryReaderProps {
     tags: string[];
     rating: string;
     wordCount: number;
+    viewCount: number;
     publishedAt: Date | null;
     createdAt: Date;
     author: {
@@ -42,6 +44,17 @@ interface StoryReaderProps {
   isOwner?: boolean;
 }
 
+function formatCount(n: number): string {
+  if (n < 1000) return n.toString();
+  if (n < 10000) return (n / 1000).toFixed(1) + "k";
+  return Math.floor(n / 1000) + "k";
+}
+
+// Average reading speed: ~300 Chinese chars / minute
+function readingMinutes(wordCount: number): number {
+  return Math.max(1, Math.round(wordCount / 300));
+}
+
 const ratingLabels: Record<string, string> = {
   GENERAL: "全年龄",
   TEEN: "青少年",
@@ -136,7 +149,11 @@ export function StoryReader({
           </span>
           <span className="flex items-center gap-1.5">
             <BookOpen className="size-3.5" />
-            全文 {story.wordCount.toLocaleString()} 字 · 共 {chapterCount} 章
+            全文 {story.wordCount.toLocaleString()} 字 · 共 {chapterCount} 章 · 约 {readingMinutes(story.wordCount)} 分钟
+          </span>
+          <span className="flex items-center gap-1.5">
+            <Eye className="size-3.5" />
+            {formatCount(story.viewCount)} 阅读
           </span>
         </div>
 
@@ -238,6 +255,8 @@ export function StoryReader({
           onOpenChange={setContinueOpen}
         />
       )}
+
+      <ViewTracker storyId={story.id} />
     </article>
   );
 }

src/components/story/ViewTracker.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+import { recordStoryView } from "@/lib/actions/story";
+
+interface ViewTrackerProps {
+  storyId: string;
+}
+
+/**
+ * Fires recordStoryView once per session per story. Uses sessionStorage so
+ * a refresh in the same tab doesn't double-count, but a new tab/session
+ * will count again — that matches what most readers expect from a "view".
+ */
+export function ViewTracker({ storyId }: ViewTrackerProps) {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const key = `story-viewed:${storyId}`;
+    if (sessionStorage.getItem(key)) return;
+    sessionStorage.setItem(key, "1");
+    recordStoryView(storyId).catch(() => {
+      // Silent: a failed view increment shouldn't surface to the user.
+      sessionStorage.removeItem(key);
+    });
+  }, [storyId]);
+
+  return null;
+}

src/lib/actions/story.ts

@@ -475,6 +475,18 @@ export async function toggleLike(storyId: string) {
   }
 }
 
+export async function recordStoryView(storyId: string) {
+  // Fire-and-forget. No auth required (anonymous reads count too).
+  // Client dedupes per session via sessionStorage; this server action
+  // is intentionally kept minimal — no rate limiting beyond that.
+  await prisma.story.update({
+    where: { id: storyId },
+    data: { viewCount: { increment: 1 } },
+    select: { id: true },
+  });
+  return { ok: true };
+}
+
 export async function getLikedStories() {
   const user = await getCurrentUser();
 

src/lib/hooks/useStory.ts

@@ -23,6 +23,7 @@ interface Story {
   rating: Rating;
   status: StoryStatus;
   wordCount: number;
+  viewCount: number;
   coverImageUrl: string | null;
   authorId: string;
   publishedAt: Date | null;