feat: interactive book

Author: wkylin

src/components/stateless/InteractiveBook/InteractiveBook.mdx

@@ -16,7 +16,9 @@ import * as InteractiveBookStories from './InteractiveBook.stories'
 - 🎨 3D 翻页动画效果
 - ⌨️ 完整的键盘导航支持（箭头键、Escape、Home、End）
 - 📖 双面内容显示（正面内容 + 背面内容）
-- 🎯 空状态处理
+- � 页角海浪卷起翻页提示
+- 🖱️ 拖拽翻页 & 点击翻页
+- �🎯 空状态处理
 - 🔄 页面变化回调
 - 📱 响应式设计
 
@@ -26,6 +28,22 @@ import * as InteractiveBookStories from './InteractiveBook.stories'
   <Story of={InteractiveBookStories.Default} />
 </Canvas>
 
+## 页角翻页提示
+
+鼠标悬停在页面的右下角或左下角时，页角会出现海浪卷起的动画效果，提示用户可以点击翻页。
+
+<Canvas>
+  <Story of={InteractiveBookStories.CornerCurlHint} />
+</Canvas>
+
+## 少量页面
+
+当翻到最后一页（结束页）时，拖动手势自动禁用，鼠标恢复为普通箭头光标。
+
+<Canvas>
+  <Story of={InteractiveBookStories.FewPages} />
+</Canvas>
+
 ## Props（可调参数）
 
 <ArgTypes />
@@ -106,6 +124,20 @@ interface BookPage {
 - `Home`：回到封面
 - `End`：跳到最后一页
 
+## 交互方式
+
+组件支持多种翻页交互方式：
+
+| 交互方式 | 说明 |
+|---------|------|
+| 拖拽翻页 | 在页面上按住并左右拖拽，超过阈值后松手翻页 |
+| 页角点击 | 鼠标悬停在页面右下角/左下角，出现卷起效果后点击翻页 |
+| 导航栏按钮 | 底部导航栏的前后翻页按钮 |
+| 键盘快捷键 | 方向键、Home、End、Escape |
+| 封面点击/拖拽 | 点击或向左拖拽封面打开书籍 |
+
+> **注意**：最后一页（结束页）禁用拖拽，鼠标光标恢复为普通箭头。
+
 ## 高级用法
 
 ### 自定义样式

src/components/stateless/InteractiveBook/InteractiveBook.stories.tsx

@@ -229,6 +229,7 @@ const meta: Meta<typeof InteractiveBook> = {
     bookAuthor: { control: 'text' },
     width: { control: 'number' },
     height: { control: 'number' },
+    enableKeyboard: { control: 'boolean' },
   },
   parameters: {
     layout: 'centered',
@@ -251,5 +252,77 @@ export const Default: Story = {
     pages: bookPages,
     width: 350,
     height: 500,
+    enableKeyboard: true,
+  },
+}
+
+/**
+ * 页角翻页提示：鼠标悬停在页面右下角/左下角时，
+ * 页角会出现海浪卷起的动画效果，提示用户可以点击翻页。
+ */
+export const CornerCurlHint: Story = {
+  name: '页角翻页提示',
+  render: (args: InteractiveBookProps) => (
+    <div className="flex h-[800px] w-full flex-col items-center justify-center gap-4 bg-neutral-100 p-10">
+      <p style={{ color: '#6b7280', fontSize: '0.875rem', textAlign: 'center', maxWidth: 400 }}>
+        打开书籍后，将鼠标悬停在页面的右下角或左下角，页角会出现海浪卷起的动画效果。点击页角即可翻页。
+      </p>
+      <InteractiveBook {...args} />
+    </div>
+  ),
+  args: {
+    coverImage: AiCover,
+    bookTitle: 'AI Agent 完全指南',
+    bookAuthor: 'AI 专家',
+    pages: bookPages,
+    width: 350,
+    height: 500,
+    enableKeyboard: true,
+  },
+}
+
+/**
+ * 少量页面示例：展示两页内容时的翻页交互，
+ * 最后一页（结束页）不再显示拖动手势。
+ */
+export const FewPages: Story = {
+  name: '少量页面',
+  render: (args: InteractiveBookProps) => (
+    <div className="flex h-[800px] w-full items-center justify-center bg-neutral-100 p-10">
+      <InteractiveBook {...args} />
+    </div>
+  ),
+  args: {
+    coverImage: AiCover,
+    bookTitle: '简短手册',
+    bookAuthor: '作者',
+    pages: [
+      {
+        pageNumber: 1,
+        title: '唯一的章节',
+        content: (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            <p>"这本书只有一页正文，翻到最后一页时不再显示拖动手势。"</p>
+            <p>"将鼠标移到右下角，可以看到页角卷起效果。"</p>
+          </div>
+        ),
+        backContent: (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+            <p style={{ fontStyle: 'italic', color: '#9ca3af' }}>背面内容</p>
+          </div>
+        ),
+      },
+      {
+        pageNumber: 2,
+        title: '结束',
+        content: (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+            <p>"最后一页，拖动手势已禁用，鼠标恢复为普通箭头。"</p>
+          </div>
+        ),
+      },
+    ],
+    width: 350,
+    height: 500,
   },
 }