@cecee/document-flip-book 1.0.19 → 1.0.21

package/dist/esm/DocumentFlipBook/index.less

@@ -101,6 +101,7 @@
 
   // 偶数页（第 2, 4, 6... 个子元素，对应 Page 1, 3, 5...）是左页 -> 显示左侧厚度
   &:nth-child(even) {
+
     .dfb-book-thickness-left-1,
     .dfb-book-thickness-left-2 {
       display: block;
@@ -109,6 +110,7 @@
 
   // 奇数页（第 1, 3, 5... 个子元素，对应 Page 0, 2, 4...）是右页 -> 显示右侧厚度
   &:nth-child(odd) {
+
     .dfb-book-thickness-right-1,
     .dfb-book-thickness-right-2 {
       display: block;
@@ -118,6 +120,10 @@
 
 .header-nav-btn {
   padding: 0 7px;
+
+  span {
+    color: #434343;
+  }
 }
 
 .dfb-HTMLFlipBook {
@@ -308,9 +314,32 @@
   top: 40px;
   display: flex;
   flex-direction: column;
-  gap: 6px; // 
+  gap: 6px; // 正常间距
   z-index: 20;
   transition: all 0.3s ease;
+  max-height: calc(100vh - 140px); // 限制最大高度
+  padding: 10px 0; // 移除水平内边距
+  box-sizing: border-box;
+
+  // 当标签超过6个时，调整间距让它们重叠
+  &.dfb-sideTabs--overlap {
+    gap: -10px; // 让标签重叠
+
+    .dfb-sideTab {
+      min-height: 50px; // 进一步减小高度
+      padding: 6px 4px 6px 8px; // 更紧凑的内边距
+    }
+  }
+
+  // 当标签超过8个时，显示下拉菜单模式
+  &.dfb-sideTabs--dropdown {
+    gap: 6px; // 正常间距
+
+    .dfb-sideTab {
+      min-height: 60px; // 恢复正常高度
+      padding: 8px 4px 8px 8px; // 恢复正常内边距
+    }
+  }
 
   &.is-on-cover {
     right: -42px; // 封面是单页模式，标签需要向左移动（进入书壳内部边缘）
@@ -319,15 +348,15 @@
 
   .dfb-sideTab {
     width: 42px;
-    min-height: 80px;
-    padding: 12px 6px 12px 10px;
+    min-height: 60px; // 减小最小高度以容纳更多标签
+    padding: 8px 4px 8px 8px; // 优化内边距
     border: none;
     border-radius: 0 6px 6px 0;
     cursor: pointer;
     color: #fff;
-    font-size: 13px;
+    font-size: 12px; // 稍微减小字体
     font-weight: 500;
-    line-height: 1.2;
+    line-height: 1.3;
     writing-mode: vertical-rl;
     text-align: center;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -337,6 +366,32 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0; // 防止标签被压缩
+    z-index: 1; // 确保标签层级正确
+
+    // "更多"按钮特殊样式
+    &.dfb-sideTab--more {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      font-weight: bold;
+      animation: pulse 2s infinite;
+
+
+      @keyframes pulse {
+
+        0%,
+        100% {
+          transform: scale(1);
+        }
+
+        50% {
+          transform: scale(1.05);
+        }
+      }
+
+      &:hover {
+        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+      }
+    }
 
     // 标签左侧的装饰条（仅在选中态或悬浮态显示，模拟折痕）
     &::before {
@@ -351,7 +406,11 @@
       opacity: 0;
     }
 
-
+    &:hover:not(.is-active):not(.dfb-sideTab--more) {
+      transform: translateX(-3px);
+      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
+      z-index: 10;
+    }
 
     &.is-active {
       position: relative;
@@ -360,8 +419,8 @@
       padding-left: 16px;
       font-weight: 700;
       box-shadow: 5px 2px 12px rgba(0, 0, 0, 0.2);
-      z-index: 12;
-      font-size: 14px;
+      z-index: 12; // 确保选中态在最上层
+      font-size: 13px;
 
       &::before {
         width: 8px; // 选中态条纹显示且最宽
@@ -371,11 +430,178 @@
     }
 
     .dfb-sideTabText {
-      letter-spacing: 2px;
+      letter-spacing: 1px; // 减小字间距
       filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
     }
   }
 
+  // 下拉菜单样式
+  .dfb-sideTabs__dropdown {
+    position: absolute;
+    right: 60px;
+    top: 0;
+    width: 220px;
+    max-height: 360px;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    z-index: 1000;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    animation: dropdownSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    backdrop-filter: blur(10px);
+
+    @keyframes dropdownSlide {
+      from {
+        opacity: 0;
+        transform: translateX(16px) translateY(-8px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateX(0) translateY(0);
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      right: -8px;
+      top: 28px;
+      width: 0;
+      height: 0;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+      border-left: 8px solid #fff;
+      z-index: 1001;
+      filter: drop-shadow(2px 0 3px rgba(0, 0, 0, 0.08));
+    }
+  }
+
+  .dfb-sideTabs__dropdown-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 10px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: 0.3px;
+  }
+
+  .dfb-sideTabs__dropdown-close {
+    background: rgba(255, 255, 255, 0.18);
+    border: none;
+    color: #fff;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.28);
+      transform: rotate(90deg) scale(1.1);
+    }
+  }
+
+  .dfb-sideTabs__dropdown-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 0;
+    max-height: 320px;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 2px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #c1c1c1;
+      border-radius: 2px;
+
+      &:hover {
+        background: #a1a1a1;
+      }
+    }
+  }
+
+  .dfb-sideTabs__dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: 100%;
+    text-align: left;
+    border-left: 3px solid transparent;
+
+    &:hover {
+      background: #f6f7f8;
+      border-left-color: var(--tab-color, #667eea);
+    }
+
+    &.is-active {
+      background: rgba(102, 126, 234, 0.06);
+      border-left-color: var(--tab-color, #667eea);
+
+      .dfb-sideTabs__dropdown-item-text {
+        color: #1a1a1a;
+        font-weight: 600;
+      }
+
+      .dfb-sideTabs__dropdown-item-check {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        background: var(--tab-color, #667eea);
+        border-radius: 50%;
+        color: #fff;
+        font-size: 10px;
+      }
+    }
+  }
+
+  .dfb-sideTabs__dropdown-item-color {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    flex-shrink: 0;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+    transition: transform 0.2s ease;
+
+    &:hover {
+      transform: scale(1.08);
+    }
+  }
+
+  .dfb-sideTabs__dropdown-item-text {
+    flex: 1;
+    font-size: 13px;
+    color: #333;
+    font-weight: 500;
+  }
+
+  .dfb-sideTabs__dropdown-item-check {
+    display: none;
+    font-size: 12px;
+    font-weight: bold;
+  }
 }
 
 .is-on-activeTab {

package/dist/esm/declarations.d.ts

@@ -0,0 +1,21 @@
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
+
+declare module 'react-image-magnifiers';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cecee/document-flip-book",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "A high-performance document flipbook component based on React and Ant Design.",
   "publishConfig": {
     "access": "public"
@@ -22,6 +22,7 @@
   "license": "ISC",
   "peerDependencies": {
     "antd": ">=5.0.0",
+    "@ant-design/icons": ">=5.0.0",
     "dayjs": ">=1.0.0",
     "html2canvas": ">=1.0.0",
     "jspdf": ">=2.0.0",
@@ -33,13 +34,18 @@
     "react-pdf": ">=9.0.0"
   },
   "dependencies": {
-    "jszip": "^3.10.1"
+    "jszip": "^3.10.1",
+    "moment": "^2.30.1",
+    "react-image-magnifiers": "^1.4.0"
   },
   "devDependencies": {
     "@types/jszip": "^3.4.1",
     "@types/lodash": "^4.14.202",
+    "@types/moment": "^2.13.0",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "@types/react-image-magnifiers": "^1.3.5",
+    "@ant-design/icons": "^5.3.1",
     "antd": "^5.15.0",
     "dayjs": "^1.11.10",
     "esbuild-plugin-less": "^1.3.38",