feat: 拖拽优化

Author: wkylin

src/components/stateless/InteractiveBook/InteractiveBook.mdx

@@ -128,13 +128,13 @@ interface BookPage {
 
 组件支持多种翻页交互方式：
 
-| 交互方式 | 说明 |
-|---------|------|
-| 拖拽翻页 | 在页面上按住并左右拖拽，超过阈值后松手翻页 |
-| 页角点击 | 鼠标悬停在页面右下角/左下角，出现卷起效果后点击翻页 |
-| 导航栏按钮 | 底部导航栏的前后翻页按钮 |
-| 键盘快捷键 | 方向键、Home、End、Escape |
-| 封面点击/拖拽 | 点击或向左拖拽封面打开书籍 |
+| 交互方式      | 说明                                                |
+| ------------- | --------------------------------------------------- |
+| 拖拽翻页      | 在页面上按住并左右拖拽，超过阈值后松手翻页          |
+| 页角点击      | 鼠标悬停在页面右下角/左下角，出现卷起效果后点击翻页 |
+| 导航栏按钮    | 底部导航栏的前后翻页按钮                            |
+| 键盘快捷键    | 方向键、Home、End、Escape                           |
+| 封面点击/拖拽 | 点击或向左拖拽封面打开书籍                          |
 
 > **注意**：最后一页（结束页）禁用拖拽，鼠标光标恢复为普通箭头。
 

src/components/stateless/InteractiveBook/index.module.less

@@ -6,7 +6,8 @@
   perspective: 2000px;
   width: 100%;
   height: auto;
-  padding-bottom: 120px;
+  padding: 48px 80px 140px;
+  box-sizing: border-box;
 }
 
 .emptyState {
@@ -619,8 +620,9 @@
     position: absolute;
     width: 0;
     height: 0;
-    transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
-                height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+    transition:
+      width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
+      height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
 
   .curlShadow {
@@ -639,7 +641,9 @@
     white-space: nowrap;
     opacity: 0;
     transform: scale(0.8);
-    transition: opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s;
+    transition:
+      opacity 0.25s ease 0.1s,
+      transform 0.25s ease 0.1s;
     pointer-events: none;
   }
 
@@ -825,4 +829,4 @@
   background: #f5f5f5;
   color: #bbb;
   font-size: 14px;
-}
+}