From a067caf4c89891a09bfe73c567ef47c418ff5ad2 Mon Sep 17 00:00:00 2001
From: AnnatarHe <annatar.he+github@gmail.com>
Date: Sat, 21 Mar 2026 23:02:34 +0800
Subject: [PATCH] refactor(book): redesign book detail page for spacious layout

Remove triple-nested card containment that compressed content width.
Flatten layout wrapper, switch to fixed-width cover grid, add reading
stats bar with highlights count/duration/date range, enlarge title,
display book tags, and improve section contrast.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../dash/[userid]/book/[bookid]/layout.tsx    |  44 +-----
 src/app/dash/[userid]/book/[bookid]/page.tsx  |  13 +-
 .../dash/[userid]/book/[bookid]/skeleton.tsx  | 142 ++++++++++--------
 .../book-info/book-cover-column.tsx           |   9 +-
 src/components/book-info/book-info.tsx        |  80 ++++++----
 .../book-info/book-meta-section.tsx           |   4 +-
 src/components/book-info/book-stats-bar.tsx   |  78 ++++++++++
 .../book-info/book-summary-section.tsx        |   2 +-
 .../book-info/book-title-section.tsx          |  30 ++--
 src/locales/en.json                           |   5 +-
 src/locales/ko.json                           |   5 +-
 src/locales/zhCN.json                         |   5 +-
 12 files changed, 254 insertions(+), 163 deletions(-)
 create mode 100644 src/components/book-info/book-stats-bar.tsx

diff --git a/src/app/dash/[userid]/book/[bookid]/layout.tsx b/src/app/dash/[userid]/book/[bookid]/layout.tsx
index 03a52cd7..e1914dad 100644
--- a/src/app/dash/[userid]/book/[bookid]/layout.tsx
+++ b/src/app/dash/[userid]/book/[bookid]/layout.tsx
@@ -5,49 +5,7 @@ type Props = {
 function Layout({ children }: Props) {
   return (
     <section className='page anna-fade-in'>
-      <div className='w-full mt-4 lg:mt-24 mb-8'>
-        {/* Single elegant container for book content */}
-        <div className='relative w-full rounded-3xl overflow-hidden'>
-          {/* Subtle texture overlay */}
-          <div className='absolute inset-0 opacity-[0.008] dark:opacity-[0.012] pointer-events-none z-10'>
-            <svg width='100%' height='100%'>
-              <pattern
-                id='book-texture'
-                x='0'
-                y='0'
-                width='8'
-                height='8'
-                patternUnits='userSpaceOnUse'
-              >
-                <circle
-                  cx='2'
-                  cy='2'
-                  r='1'
-                  fill='currentColor'
-                  className='text-gray-900 dark:text-white'
-                />
-                <circle
-                  cx='6'
-                  cy='6'
-                  r='1'
-                  fill='currentColor'
-                  className='text-gray-900 dark:text-white'
-                />
-              </pattern>
-              <rect width='100%' height='100%' fill='url(#book-texture)' />
-            </svg>
-          </div>
-
-          {/* Main card with gradient background */}
-          <div className='relative bg-gradient-to-br from-white/95 via-gray-50/90 to-blue-50/50 dark:from-zinc-900/95 dark:via-zinc-900/90 dark:to-blue-950/30 shadow-xl border border-gray-200/60 dark:border-zinc-800/50 backdrop-blur-md'>
-            {/* Additional gradient overlay for depth */}
-            <div className='absolute inset-0 bg-gradient-to-t from-transparent via-transparent to-blue-400/[0.015] dark:to-blue-400/[0.025] pointer-events-none' />
-
-            {/* Content */}
-            <div className='relative z-10 p-6 lg:p-10'>{children}</div>
-          </div>
-        </div>
-      </div>
+      <div className='w-full mt-4 lg:mt-8 mb-8'>{children}</div>
     </section>
   )
 }
diff --git a/src/app/dash/[userid]/book/[bookid]/page.tsx b/src/app/dash/[userid]/book/[bookid]/page.tsx
index 20bb51f4..bcf739a4 100644
--- a/src/app/dash/[userid]/book/[bookid]/page.tsx
+++ b/src/app/dash/[userid]/book/[bookid]/page.tsx
@@ -110,6 +110,8 @@ async function Page(props: PageProps) {
     duration = result || 0
   }
 
+  const clippingsCount = clippingsData.book.clippingsCount ?? 0
+
   return (
     <>
       <BookInfo
@@ -117,8 +119,17 @@ async function Page(props: PageProps) {
         uid={uid}
         duration={duration}
         isLastReadingBook={clippingsData.book.isLastReadingBook}
+        clippingsCount={clippingsCount}
+        startReadingAt={clippingsData.book.startReadingAt}
+        lastReadingAt={clippingsData.book.lastReadingAt}
+      />
+      <Divider
+        title={
+          clippingsCount > 0
+            ? `${clippingsCount} ${t('app.book.title')}`
+            : t('app.book.title')
+        }
       />
-      <Divider title={t('app.book.title')} />
       <BookPageContent book={bookData} userid={userid} />
     </>
   )
diff --git a/src/app/dash/[userid]/book/[bookid]/skeleton.tsx b/src/app/dash/[userid]/book/[bookid]/skeleton.tsx
index 63265376..4396fb25 100644
--- a/src/app/dash/[userid]/book/[bookid]/skeleton.tsx
+++ b/src/app/dash/[userid]/book/[bookid]/skeleton.tsx
@@ -1,63 +1,87 @@
 function BookPageSkeleton() {
   return (
     <div className='w-full space-y-8 animate-pulse'>
-      {/* Book info section skeleton */}
-      <div className='grid grid-cols-1 lg:grid-cols-[300px,1fr] gap-8'>
-        {/* Book cover and details */}
-        <div className='space-y-4'>
-          {/* Book cover skeleton */}
-          <div className='w-full h-96 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-200 dark:from-zinc-700 dark:via-zinc-600 dark:to-zinc-700 rounded-2xl shadow-sm'></div>
-
-          {/* Action buttons skeleton */}
-          <div className='space-y-3'>
-            <div className='h-12 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-xl'></div>
-            <div className='h-10 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-lg'></div>
+      {/* Book info hero section skeleton */}
+      <div className='grid grid-cols-1 md:grid-cols-[280px,1fr] lg:grid-cols-[320px,1fr] gap-6 lg:gap-10 py-6 lg:py-8'>
+        {/* Book cover skeleton */}
+        <div className='mx-auto w-full max-w-[320px]'>
+          <div className='w-full aspect-[4/5] bg-gradient-to-br from-gray-200 via-gray-300 to-gray-200 dark:from-zinc-700 dark:via-zinc-600 dark:to-zinc-700 rounded-xl shadow-sm' />
+          {/* Mobile share button skeleton */}
+          <div className='mt-6 md:hidden'>
+            <div className='h-12 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-xl' />
           </div>
         </div>
 
-        {/* Book info content */}
+        {/* Book details skeleton */}
         <div className='space-y-6'>
-          {/* Title and author */}
+          {/* Title */}
           <div className='space-y-3'>
-            <div className='h-8 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-lg w-3/4'></div>
-            <div className='h-6 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-lg w-1/2'></div>
-          </div>
-
-          {/* Rating and badges */}
-          <div className='flex items-center gap-4'>
-            <div className='flex gap-1'>
-              {[...Array(5)].map((_, i) => (
+            <div className='h-10 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-lg w-3/4' />
+            <div className='flex items-center gap-2'>
+              <div className='h-6 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-lg w-1/3' />
+              <div className='h-6 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-full w-16' />
+            </div>
+            {/* Tags skeleton */}
+            <div className='flex gap-2'>
+              {[...Array(3)].map((_, i) => (
                 <div
                   key={i}
-                  className='w-4 h-4 bg-gray-300 dark:bg-zinc-600 rounded-full'
-                ></div>
+                  className='h-6 bg-gray-200 dark:bg-zinc-700 rounded-full w-16'
+                />
               ))}
             </div>
-            <div className='h-6 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-full w-16'></div>
           </div>
 
-          {/* Description */}
-          <div className='space-y-2'>
-            <div className='h-4 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-full'></div>
-            <div className='h-4 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-5/6'></div>
-            <div className='h-4 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-4/5'></div>
+          {/* Stats bar skeleton */}
+          <div className='flex flex-wrap gap-3'>
+            {[...Array(3)].map((_, i) => (
+              <div
+                key={i}
+                className='flex items-center gap-3 rounded-xl border border-gray-200/40 dark:border-zinc-700/40 bg-white/40 dark:bg-zinc-800/40 px-4 py-3'
+              >
+                <div className='h-8 w-8 bg-gray-200 dark:bg-zinc-700 rounded-lg' />
+                <div className='space-y-1'>
+                  <div className='h-5 bg-gray-200 dark:bg-zinc-700 rounded w-12' />
+                  <div className='h-3 bg-gray-200 dark:bg-zinc-700 rounded w-16' />
+                </div>
+              </div>
+            ))}
           </div>
 
-          {/* Stats section */}
-          <div className='bg-white/40 dark:bg-zinc-800/40 backdrop-blur-sm rounded-xl p-4 border border-gray-200/40 dark:border-zinc-700/40'>
-            <div className='grid grid-cols-3 gap-4'>
-              {[...Array(3)].map((_, i) => (
-                <div key={i} className='text-center space-y-2'>
-                  <div className='h-6 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-12 mx-auto'></div>
-                  <div className='h-4 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-16 mx-auto'></div>
+          {/* Share button skeleton (desktop) */}
+          <div className='hidden md:block'>
+            <div className='h-10 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-xl w-32' />
+          </div>
+
+          {/* Meta section skeleton */}
+          <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+            {[...Array(2)].map((_, i) => (
+              <div
+                key={i}
+                className='flex items-center gap-3 rounded-xl border border-gray-200/40 dark:border-zinc-700/40 bg-white/40 dark:bg-zinc-800/40 p-3'
+              >
+                <div className='h-9 w-9 bg-gray-200 dark:bg-zinc-700 rounded-lg' />
+                <div className='space-y-1'>
+                  <div className='h-3 bg-gray-200 dark:bg-zinc-700 rounded w-16' />
+                  <div className='h-4 bg-gray-200 dark:bg-zinc-700 rounded w-24' />
                 </div>
-              ))}
+              </div>
+            ))}
+          </div>
+
+          {/* Summary skeleton */}
+          <div className='rounded-xl border border-gray-200/40 dark:border-zinc-700/40 bg-white/40 dark:bg-zinc-800/40 p-6 space-y-3'>
+            <div className='h-6 bg-gray-200 dark:bg-zinc-700 rounded w-24' />
+            <div className='space-y-2'>
+              <div className='h-4 bg-gray-200 dark:bg-zinc-700 rounded w-full' />
+              <div className='h-4 bg-gray-200 dark:bg-zinc-700 rounded w-5/6' />
+              <div className='h-4 bg-gray-200 dark:bg-zinc-700 rounded w-4/5' />
             </div>
           </div>
         </div>
       </div>
 
-      {/* Elegant divider */}
+      {/* Divider skeleton */}
       <div className='relative h-px my-8 bg-gradient-to-r from-transparent via-gray-300 dark:via-zinc-700 to-transparent overflow-hidden'>
         <div
           className='absolute inset-0 bg-gradient-to-r from-transparent via-blue-400/25 to-transparent animate-pulse'
@@ -65,33 +89,23 @@ function BookPageSkeleton() {
         />
       </div>
 
-      {/* Clippings section skeleton */}
-      <div className='space-y-6'>
-        <div className='flex items-center justify-between'>
-          <div className='h-7 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-lg w-32'></div>
-          <div className='h-8 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded-lg w-24'></div>
-        </div>
-
-        {/* Clippings grid */}
-        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
-          {new Array(6).fill(1).map((_, i) => (
-            <div
-              key={i}
-              className='bg-white/30 dark:bg-zinc-800/30 backdrop-blur-sm rounded-2xl p-4 border border-gray-200/30 dark:border-zinc-700/30 space-y-3'
-            >
-              <div className='h-4 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-3/4'></div>
-              <div className='space-y-2'>
-                <div className='h-3 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-full'></div>
-                <div className='h-3 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-5/6'></div>
-                <div className='h-3 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-4/5'></div>
-              </div>
-              <div className='flex justify-between items-center'>
-                <div className='h-3 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-16'></div>
-                <div className='h-6 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-zinc-700 dark:to-zinc-600 rounded w-6'></div>
-              </div>
+      {/* Clippings grid skeleton */}
+      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
+        {new Array(6).fill(1).map((_, i) => (
+          <div
+            key={i}
+            className='bg-slate-50/80 dark:bg-slate-800/70 backdrop-blur-sm rounded-2xl p-6 border border-slate-100/50 dark:border-slate-700/50 space-y-4'
+          >
+            <div className='h-6 bg-gray-200 dark:bg-zinc-700 rounded w-3/4' />
+            <div className='h-px w-full bg-gradient-to-r from-transparent via-gray-200 dark:via-zinc-700 to-transparent' />
+            <div className='space-y-2'>
+              <div className='h-4 bg-gray-200 dark:bg-zinc-700 rounded w-full' />
+              <div className='h-4 bg-gray-200 dark:bg-zinc-700 rounded w-5/6' />
+              <div className='h-4 bg-gray-200 dark:bg-zinc-700 rounded w-4/5' />
+              <div className='h-4 bg-gray-200 dark:bg-zinc-700 rounded w-3/4' />
             </div>
-          ))}
-        </div>
+          </div>
+        ))}
       </div>
     </div>
   )
diff --git a/src/components/book-info/book-cover-column.tsx b/src/components/book-info/book-cover-column.tsx
index 39a837e2..50f80cb2 100644
--- a/src/components/book-info/book-cover-column.tsx
+++ b/src/components/book-info/book-cover-column.tsx
@@ -11,9 +11,10 @@ type Props = {
 function BookCoverColumn({ book, togglePreviewVisible }: Props) {
   const { t } = useTranslation()
   return (
-    <div className='md:col-span-1'>
-      <div className='relative -mt-12 md:-mt-20 mx-auto w-64 md:w-full max-w-xs transform transition-all duration-500 hover:scale-[1.02] hover:-rotate-1'>
-        <div className='absolute inset-0 -z-10 blur-md opacity-30 scale-95 translate-y-4'></div>
+    <div>
+      <div className='relative mx-auto w-full max-w-[320px] transform transition-all duration-500 hover:scale-[1.02] hover:-rotate-1'>
+        {/* Colored shadow behind cover */}
+        <div className='absolute inset-4 -z-10 rounded-2xl bg-blue-400/30 opacity-40 blur-2xl translate-y-4 scale-95 dark:bg-blue-500/20' />
         <BlurhashView
           blurhashValue={
             book.edges?.imageInfo?.blurHashValue ??
@@ -22,7 +23,7 @@ function BookCoverColumn({ book, togglePreviewVisible }: Props) {
           src={book.image}
           height={384}
           width={320}
-          className='w-full aspect-[4/5] object-cover rounded-xl shadow-xl transition-all duration-300'
+          className='w-full aspect-[4/5] object-cover rounded-xl shadow-2xl transition-all duration-300'
           alt={book.title}
         />
       </div>
diff --git a/src/components/book-info/book-info.tsx b/src/components/book-info/book-info.tsx
index 01169461..94f2f8d1 100644
--- a/src/components/book-info/book-info.tsx
+++ b/src/components/book-info/book-info.tsx
@@ -6,6 +6,7 @@ import type { WenquBook } from '../../services/wenqu'
 import BookSharePreview from '../preview/preview-book'
 import BookCoverColumn from './book-cover-column'
 import BookMetaSection from './book-meta-section'
+import BookStatsBar from './book-stats-bar'
 import BookSummarySection from './book-summary-section'
 import BookTitleSection from './book-title-section'
 
@@ -14,52 +15,67 @@ type TBookInfoProp = {
   book: WenquBook
   duration?: number
   isLastReadingBook?: boolean
+  clippingsCount?: number
+  startReadingAt?: string
+  lastReadingAt?: string
 }
 
-function BookInfo({ book, uid, duration }: TBookInfoProp) {
+function BookInfo({
+  book,
+  uid,
+  duration,
+  clippingsCount,
+  startReadingAt,
+  lastReadingAt,
+}: TBookInfoProp) {
   const { t } = useTranslation()
   const [sharePreviewVisible, setSharePreviewVisible] = useState(false)
 
   const togglePreviewVisible = useCallback(() => {
     setSharePreviewVisible((v) => !v)
   }, [])
-  return (
-    <div className='relative mt-16 w-full md:mt-24'>
-      {/* Background decoration */}
-      <div className='absolute inset-0 -z-10 bg-gradient-to-br from-white/30 via-white/20 to-white/5 backdrop-blur-lg dark:from-gray-800/30 dark:via-gray-800/20 dark:to-gray-900/5'></div>
 
-      {/* Main content container */}
-      <div className='mx-auto w-full max-w-7xl rounded-2xl border border-gray-200 bg-gradient-to-br from-white/70 via-white/60 to-white/40 shadow-xl backdrop-blur-lg dark:border-gray-700 dark:from-gray-900/70 dark:via-gray-800/60 dark:to-gray-900/40'>
-        {/* Book content grid */}
-        <div className='grid grid-cols-1 gap-8 p-8 md:grid-cols-3 lg:grid-cols-4'>
-          {/* Book cover column */}
-          <BookCoverColumn
-            book={book}
-            togglePreviewVisible={togglePreviewVisible}
-          />
+  return (
+    <div className='relative w-full'>
+      {/* Subtle background wash */}
+      <div className='absolute inset-0 -z-10 rounded-2xl bg-gradient-to-b from-blue-50/40 via-white/20 to-transparent dark:from-blue-950/30 dark:via-zinc-900/20 dark:to-transparent' />
 
-          {/* Book details column */}
-          <div className='font-lxgw md:col-span-2 lg:col-span-3'>
-            {/* Title and rating */}
-            <BookTitleSection book={book} duration={duration} />
+      <div className='grid grid-cols-1 gap-6 py-6 md:grid-cols-[280px,1fr] lg:grid-cols-[320px,1fr] lg:gap-10 lg:py-8'>
+        {/* Book cover column */}
+        <BookCoverColumn
+          book={book}
+          togglePreviewVisible={togglePreviewVisible}
+        />
 
-            {/* Action buttons (desktop) */}
-            <div className='mt-6 hidden gap-4 md:flex'>
-              <button
-                onClick={() => togglePreviewVisible()}
-                className='flex items-center gap-2 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 px-5 py-2.5 text-white shadow-md transition-all duration-300 hover:from-blue-600 hover:to-blue-700 hover:shadow-lg'
-              >
-                <Share2 className='h-4 w-4' />
-                <span>{t('app.book.share')}</span>
-              </button>
-            </div>
+        {/* Book details column */}
+        <div className='font-lxgw space-y-6'>
+          {/* Title and rating */}
+          <BookTitleSection book={book} duration={duration} />
 
-            {/* Book metadata */}
-            <BookMetaSection book={book} />
+          {/* Reading stats bar */}
+          <BookStatsBar
+            clippingsCount={clippingsCount}
+            duration={duration}
+            startReadingAt={startReadingAt}
+            lastReadingAt={lastReadingAt}
+          />
 
-            {/* Book summary */}
-            <BookSummarySection book={book} />
+          {/* Action buttons (desktop) */}
+          <div className='hidden gap-4 md:flex'>
+            <button
+              onClick={() => togglePreviewVisible()}
+              className='flex items-center gap-2 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 px-5 py-2.5 text-white shadow-md transition-all duration-300 hover:from-blue-600 hover:to-blue-700 hover:shadow-lg'
+            >
+              <Share2 className='h-4 w-4' />
+              <span>{t('app.book.share')}</span>
+            </button>
           </div>
+
+          {/* Book metadata */}
+          <BookMetaSection book={book} />
+
+          {/* Book summary */}
+          <BookSummarySection book={book} />
         </div>
       </div>
 
diff --git a/src/components/book-info/book-meta-section.tsx b/src/components/book-info/book-meta-section.tsx
index 954952dc..2228b49d 100644
--- a/src/components/book-info/book-meta-section.tsx
+++ b/src/components/book-info/book-meta-section.tsx
@@ -14,7 +14,7 @@ function BookMetaSection({ book }: Props) {
   return (
     <div className='mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3'>
       {book.pubdate && (
-        <div className='flex items-center gap-3 rounded-xl border border-gray-100 bg-white/20 p-3 backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/20'>
+        <div className='flex items-center gap-3 rounded-xl border border-gray-100 bg-white/40 p-3 backdrop-blur-sm dark:border-gray-700 dark:bg-zinc-800/40'>
           <div className='rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30'>
             <Calendar className='h-5 w-5 text-blue-600 dark:text-blue-400' />
           </div>
@@ -30,7 +30,7 @@ function BookMetaSection({ book }: Props) {
       )}
 
       {book.totalPages > 0 && (
-        <div className='flex items-center gap-3 rounded-xl border border-gray-100 bg-white/20 p-3 backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/20'>
+        <div className='flex items-center gap-3 rounded-xl border border-gray-100 bg-white/40 p-3 backdrop-blur-sm dark:border-gray-700 dark:bg-zinc-800/40'>
           <div className='rounded-lg bg-green-100 p-2 dark:bg-green-900/30'>
             <BookOpen className='h-5 w-5 text-green-600 dark:text-green-400' />
           </div>
diff --git a/src/components/book-info/book-stats-bar.tsx b/src/components/book-info/book-stats-bar.tsx
new file mode 100644
index 00000000..9b1c617c
--- /dev/null
+++ b/src/components/book-info/book-stats-bar.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { Bookmark, CalendarRange, Clock } from 'lucide-react'
+import { useTranslation } from '@/i18n/client'
+import dayjs from '@/utils/dayjs'
+
+type Props = {
+  clippingsCount?: number
+  duration?: number
+  startReadingAt?: string
+  lastReadingAt?: string
+}
+
+function BookStatsBar({
+  clippingsCount,
+  duration,
+  startReadingAt,
+  lastReadingAt,
+}: Props) {
+  const { t } = useTranslation()
+
+  const hasDateRange = startReadingAt && lastReadingAt
+
+  return (
+    <div className='flex flex-wrap gap-3'>
+      {clippingsCount != null && clippingsCount > 0 && (
+        <div className='flex items-center gap-3 rounded-xl border border-blue-200/40 bg-white/40 px-4 py-3 backdrop-blur-sm dark:border-blue-800/40 dark:bg-zinc-800/40'>
+          <div className='rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30'>
+            <Bookmark className='h-4 w-4 text-blue-600 dark:text-blue-400' />
+          </div>
+          <div>
+            <p className='text-lg font-semibold text-gray-800 dark:text-gray-200'>
+              {clippingsCount}
+            </p>
+            <p className='text-xs text-gray-500 dark:text-gray-400'>
+              {t('app.book.highlights')}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {duration != null && duration > 0 && (
+        <div className='flex items-center gap-3 rounded-xl border border-green-200/40 bg-white/40 px-4 py-3 backdrop-blur-sm dark:border-green-800/40 dark:bg-zinc-800/40'>
+          <div className='rounded-lg bg-green-100 p-2 dark:bg-green-900/30'>
+            <Clock className='h-4 w-4 text-green-600 dark:text-green-400' />
+          </div>
+          <div>
+            <p className='text-lg font-semibold text-gray-800 dark:text-gray-200'>
+              {duration}
+            </p>
+            <p className='text-xs text-gray-500 dark:text-gray-400'>
+              {t('app.book.readingDays')}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {hasDateRange && (
+        <div className='flex items-center gap-3 rounded-xl border border-purple-200/40 bg-white/40 px-4 py-3 backdrop-blur-sm dark:border-purple-800/40 dark:bg-zinc-800/40'>
+          <div className='rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30'>
+            <CalendarRange className='h-4 w-4 text-purple-600 dark:text-purple-400' />
+          </div>
+          <div>
+            <p className='text-sm font-semibold text-gray-800 dark:text-gray-200'>
+              {dayjs(startReadingAt).format('YYYY/MM/DD')} –{' '}
+              {dayjs(lastReadingAt).format('YYYY/MM/DD')}
+            </p>
+            <p className='text-xs text-gray-500 dark:text-gray-400'>
+              {t('app.book.readingPeriod')}
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default BookStatsBar
diff --git a/src/components/book-info/book-summary-section.tsx b/src/components/book-info/book-summary-section.tsx
index be8f0a38..e0c75012 100644
--- a/src/components/book-info/book-summary-section.tsx
+++ b/src/components/book-info/book-summary-section.tsx
@@ -10,7 +10,7 @@ function BookSummarySection({ book }: Props) {
   const { t } = useTranslation(undefined, 'book')
   const [summaryExpanded, setSummaryExpanded] = useState(false)
   return (
-    <div className='mt-8 rounded-xl border border-gray-100 bg-white/20 p-6 backdrop-blur-sm dark:border-gray-700 dark:bg-gray-800/20'>
+    <div className='mt-8 rounded-xl border border-gray-100 bg-white/40 p-6 backdrop-blur-sm dark:border-gray-700 dark:bg-zinc-800/40'>
       <div className='mb-4 flex items-center justify-between'>
         <h3 className='text-xl font-semibold text-gray-800 dark:text-gray-200'>
           {t('app.book.summary.title')}
diff --git a/src/components/book-info/book-title-section.tsx b/src/components/book-info/book-title-section.tsx
index 12d7d49c..6331f6ec 100644
--- a/src/components/book-info/book-title-section.tsx
+++ b/src/components/book-info/book-title-section.tsx
@@ -1,5 +1,4 @@
-import { Clock, Star } from 'lucide-react'
-import { useTranslation } from '@/i18n/client'
+import { Star } from 'lucide-react'
 import type { WenquBook } from '@/services/wenqu'
 
 type Props = {
@@ -7,17 +6,16 @@ type Props = {
   duration?: number
 }
 
-function BookTitleSection({ book, duration }: Props) {
-  const { t } = useTranslation()
+function BookTitleSection({ book }: Props) {
   return (
     <div className='space-y-4'>
       <div className='flex flex-wrap items-start justify-between gap-4'>
-        <h1 className='text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 inline-block text-transparent bg-clip-text'>
+        <h1 className='inline-block bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-3xl font-bold text-transparent md:text-4xl lg:text-5xl dark:from-blue-400 dark:to-purple-400'>
           {book.title}
         </h1>
 
-        <div className='flex items-center gap-2 bg-white/30 dark:bg-gray-800/30 backdrop-blur-sm px-3 py-1.5 rounded-full'>
-          <Star className='w-4 h-4 text-yellow-500' />
+        <div className='flex items-center gap-2 rounded-full bg-white/30 px-3 py-1.5 backdrop-blur-sm dark:bg-gray-800/30'>
+          <Star className='h-4 w-4 text-yellow-500' />
           <span className='font-medium text-gray-800 dark:text-gray-200'>
             {book.rating?.toFixed(1)}/10
           </span>
@@ -25,7 +23,7 @@ function BookTitleSection({ book, duration }: Props) {
       </div>
 
       {/* Author and publication info */}
-      <div className='space-y-2'>
+      <div className='space-y-3'>
         <div className='flex items-center gap-2 text-gray-700 dark:text-gray-300'>
           <h2 className='text-xl font-semibold'>{book.author}</h2>
           {book.press && (
@@ -33,11 +31,17 @@ function BookTitleSection({ book, duration }: Props) {
           )}
         </div>
 
-        {/* Reading stats */}
-        {duration && (
-          <div className='flex items-center gap-2 text-gray-600 dark:text-gray-400'>
-            <Clock className='w-4 h-4' />
-            <span>{t('app.book.readingDuration', { count: duration })}</span>
+        {/* Tags */}
+        {book.tags && book.tags.length > 0 && (
+          <div className='flex flex-wrap gap-2'>
+            {book.tags.slice(0, 6).map((tag) => (
+              <span
+                key={tag}
+                className='rounded-full border border-gray-200/60 bg-white/40 px-3 py-1 text-xs font-medium text-gray-600 backdrop-blur-sm dark:border-zinc-700/60 dark:bg-zinc-800/40 dark:text-gray-400'
+              >
+                {tag}
+              </span>
+            ))}
           </div>
         )}
       </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index 1bc2108b..caf0719c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -76,7 +76,10 @@
       "title": "Clippings",
       "share": "Share the book",
       "readingDuration": "Read for {{ count }} day",
-      "readingDuration_plural": "Read for {{ count }} days"
+      "readingDuration_plural": "Read for {{ count }} days",
+      "highlights": "Highlights",
+      "readingDays": "Reading Days",
+      "readingPeriod": "Reading Period"
     },
     "auth": {
       "signin": "Sign in",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index cbdabe5b..2d71412b 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -76,7 +76,10 @@
       "title": "책 다이제스트",
       "share": "이 책 공유",
       "readingDuration": "이 책을 {{ count }} 일 동안 읽으십시오",
-      "readingDuration_plural": "이 책을 {{ count }} 일 동안 읽으십시오"
+      "readingDuration_plural": "이 책을 {{ count }} 일 동안 읽으십시오",
+      "highlights": "하이라이트",
+      "readingDays": "독서 일수",
+      "readingPeriod": "독서 기간"
     },
     "auth": {
       "signin": "로그인",
diff --git a/src/locales/zhCN.json b/src/locales/zhCN.json
index dccad0fa..bc95beae 100644
--- a/src/locales/zhCN.json
+++ b/src/locales/zhCN.json
@@ -76,7 +76,10 @@
       "title": "书摘",
       "share": "分享这本书",
       "readingDuration": "这本书看了 {{ count }} 天",
-      "readingDuration_plural": "这本书看了 {{ count }} 天"
+      "readingDuration_plural": "这本书看了 {{ count }} 天",
+      "highlights": "高亮",
+      "readingDays": "阅读天数",
+      "readingPeriod": "阅读时间"
     },
     "auth": {
       "signin": "登陆",