@cecee/document-flip-book 1.0.17 → 1.0.19

package/dist/esm/{index.less → DocumentFlipBook/index.less}

@@ -31,42 +31,88 @@
 .book-page {
   width: 100%;
   height: 100%;
-  background: #9F7D4E;
+  background: var(--dfb-theme-color, #9F7D4E);
   padding: 22px;
 }
 
 .book-view {
-  box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
-  position: relative;
   overflow: hidden;
+  position: relative;
+  z-index: 10;
+  overflow: visible; // 显式设置为 visible 以显示侧边厚度装饰
+  background: transparent; // 改为透明，避免遮挡背景层或产生白色边框
 
-  // 页面内侧阴影（靠近中缝处的深度感）
-  &::before {
-    content: "";
+  // 书本左侧厚度 1
+  .dfb-book-thickness-left-1 {
+    overflow: hidden;
     position: absolute;
     top: 0;
-    bottom: 0;
+    left: -4px;
+    width: 8px;
+    height: 100%;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3));
+    border-radius: 2px;
+    z-index: 20;
+    box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 6px inset;
+    pointer-events: none;
+    display: none; // 默认隐藏，由 nth-child 控制显示
+  }
+
+  // 书本左侧厚度 2
+  .dfb-book-thickness-left-2 {
+    position: absolute;
+    top: 0;
+    left: -10px;
     width: 20px;
-    z-index: 5;
+    height: 100%;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.2));
+    z-index: 14;
     pointer-events: none;
-    transition: opacity 0.3s ease;
+    display: none; // 默认隐藏
   }
 
-  // 偶数页（通常是右页）阴影在左侧
-  &:nth-child(even)::before {
-    left: 0;
-    background: linear-gradient(to right, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.05) 40%, transparent 100%);
+  // 书本右侧厚度 1
+  .dfb-book-thickness-right-1 {
+    position: absolute;
+    top: 0;
+    right: -4px;
+    width: 8px;
+    height: 100%;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3));
+    border-radius: 2px;
+    z-index: 15;
+    box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 6px inset;
+    pointer-events: none;
+    display: none; // 默认隐藏
   }
 
-  // 奇数页（通常是左页）阴影在右侧
-  &:nth-child(odd)::before {
-    right: 0;
-    background: linear-gradient(to left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.05) 40%, transparent 100%);
+  // 书本右侧厚度 2
+  .dfb-book-thickness-right-2 {
+    position: absolute;
+    top: 0;
+    right: -10px;
+    width: 20px;
+    height: 100%;
+    background: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.2));
+    z-index: 14;
+    pointer-events: none;
+    display: none; // 默认隐藏
+  }
+
+  // 偶数页（第 2, 4, 6... 个子元素，对应 Page 1, 3, 5...）是左页 -> 显示左侧厚度
+  &:nth-child(even) {
+    .dfb-book-thickness-left-1,
+    .dfb-book-thickness-left-2 {
+      display: block;
+    }
   }
 
-  // 封面页（第一页）通常不需要这种内部阴影，或者阴影较弱
-  &:first-child::before {
-    opacity: 0.3;
+  // 奇数页（第 1, 3, 5... 个子元素，对应 Page 0, 2, 4...）是右页 -> 显示右侧厚度
+  &:nth-child(odd) {
+    .dfb-book-thickness-right-1,
+    .dfb-book-thickness-right-2 {
+      display: block;
+    }
   }
 }
 
@@ -75,8 +121,10 @@
 }
 
 .dfb-HTMLFlipBook {
-  overflow: hidden;
-  background: #fff;
+  position: relative;
+  z-index: 10;
+  overflow: visible; // 显式设置为 visible 以显示侧边厚度装饰
+  background: #fff; // 改为透明，避免遮挡背景层或产生白色边框
 }
 
 .dfb-root {
@@ -261,7 +309,7 @@
   display: flex;
   flex-direction: column;
   gap: 6px; // 
-  z-index: 10;
+  z-index: 20;
   transition: all 0.3s ease;
 
   &.is-on-cover {
@@ -339,57 +387,108 @@
   margin: auto; // 关键：在 flex 容器中使用 margin: auto 实现完美居中且溢出时可滚动到顶部
   position: relative;
   min-width: 300px;
+  overflow: hidden;
 }
 
-.dfb-bookShell1 {
-  position: relative;
-  padding: 18px 0 18px 54px;
-  background: transparent;
-  transition: background-color 0.3s ease;
+// 方法三：背景层样式
+.dfb-book-background-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 18px 54px;
+  z-index: 1;
+  transition: all 0.3s ease;
+  pointer-events: none;
+  overflow: hidden;
+  /* 确保伪元素不会超出容器 */
 }
 
-.dfb-bookShell {
+/* 左侧较高的背景块 */
+.dfb-book-background-layer::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: -16px;
+  width: 50%;
+  /* 占据左半边 */
+  height: 100%;
+  /* 高度为100%，显得更高 */
+  background-color: var(--dfb-theme-color, #9F7D4E);
+  transition: all 0.3s ease;
+}
+
+/* 右侧较低的背景块 */
+.dfb-book-background-layer::after {
+  content: "";
+  position: absolute;
+  top: 9px;
+  right: -16px;
+  width: 50%;
+  /* 占据右半边 */
+  height: calc(100% - 15px);
+  /* 高度减去顶部偏移量 */
+  background-color: var(--dfb-theme-color, #9F7D4E);
+  filter: brightness(0.85); // 自动加深，不再依赖额外的变量
+  opacity: 0.9;
+  transition: all 0.3s ease;
+}
+
+// 方法三：内容层样式
+.dfb-book-content-layer {
   position: relative;
-  padding: 18px 54px;
-  background: #9F7D4E;
-  transition: background-color 0.3s ease;
+  z-index: 10; // 位于背景之上
+  padding: 18px 54px; // 保持与背景层一致的内边距
+}
+
+// 书脊内侧装饰 (Inside.svg)
+.dfb-inside-spine {
+  position: absolute;
+  left: 50%;
+  top: 2px;
+  height: calc(100% - 1px);
+  bottom: 18px;
+  width: 34px; // 恢复为原始 SVG 宽度
+  transform: translateX(-50%);
+  z-index: 5; // 提高层级，确保在 .dfb-book-background-layer 的 linear-gradient 之上
+  pointer-events: none;
+  opacity: 1; // 增加不透明度使其更清晰
+}
 
-  &::after {
+// 中缝装饰层（确保在中缝位置且高于内容层）
+// .dfb-spine-decoration-layer {
+//   position: absolute;
+//   left: 50%;
+//   top: 0;
+//   bottom: 0;
+//   width: 0; // 仅作为定位参考
+//   z-index: 20; // 必须高于内容层 (10) 才能看到
+//   pointer-events: none;
+// }
+
+// 书本中缝分割线
+.dfb-book-spine {
+  position: absolute;
+  left: 50%;
+  top: 17px;
+  bottom: 18px;
+  width: 2px;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  z-index: 20;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+
+  &::before {
     content: "";
     position: absolute;
+    left: -4px;
     top: 0;
-    left: 0;
-    right: 0;
     bottom: 0;
-    background-image: url("https://www.transparenttextures.com/patterns/leather.png");
-    opacity: 0.1;
-    pointer-events: none;
-    border-radius: 8px;
-  }
-
-  // 书本中缝分割线
-  .dfb-book-spine {
-    position: absolute;
-    left: 50%;
-    top: 18px;
-    bottom: 18px;
-    width: 2px;
-    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.2);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-    z-index: 5;
-    pointer-events: none;
-    transition: opacity 0.3s ease;
-
-    &::before {
-      content: "";
-      position: absolute;
-      left: -4px;
-      top: 0;
-      bottom: 0;
-      width: 10px;
-      background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15), transparent);
-    }
+    width: 10px;
+    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15), transparent);
   }
 }
 
@@ -398,7 +497,7 @@
   height: 100%;
   display: grid;
   place-items: center;
-  background: #9F7D4E;
+  background: var(--dfb-theme-color, #9F7D4E);
   color: #111;
   font-size: 46px;
   font-weight: 800;
@@ -425,14 +524,24 @@
 .archive-cover {
   width: 100%;
   height: 100%;
-  background: #9F7D4E; // 棕黄色背景
   display: flex;
   align-items: center;
   justify-content: center;
   color: #000;
   font-family: "SimSun", "STSong", serif;
-  padding: 40px;
+  padding: 40px 40px 40px 57px; // 增加左侧内边距，给背脊留出空间
   box-sizing: border-box;
+  position: relative; // 确保子元素绝对定位
+
+  .archive-spine {
+    background-color: #fff;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 25px; // 稍微放宽一点，效果更好
+    z-index: 10;
+  }
 
   &__outer-border {
     border: 5px solid #000;
@@ -459,7 +568,7 @@
     font-size: 26px;
     font-weight: bold;
     margin-top: 10px;
-    margin-bottom: 30px;
+    margin-bottom: 10px;
     letter-spacing: 4px;
     text-align: center;
   }
@@ -533,10 +642,7 @@
 
 // 项目模式封面样式
 .project-cover-container {
-  // position: absolute;
-  // left: 15px;
-  // top: 0px;
-  // width: calc(100% - 15px);
+  position: relative; // 确保子元素绝对定位
   width: 100%;
   height: 100%;
   z-index: 20;
@@ -544,7 +650,17 @@
   display: flex;
   flex-direction: column;
   font-family: "SimSun", "STSong", serif;
-  padding: 30px;
+  padding: 30px 30px 30px 47px; // 增加左侧内边距，给背脊留出空间
+
+  .archive-spine {
+    background-color: #fff;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 25px;
+    z-index: 10;
+  }
 
   // 移除 react-pageflip 默认添加的样式影响
   &.stf__item {
@@ -574,7 +690,7 @@
     box-sizing: border-box;
   }
 
-   .project-cover-header {
+  .project-cover-header {
     text-align: center;
     color: #000;
     // padding: 8px 0;
@@ -599,8 +715,8 @@
     .stat-cell-label {
       flex: 1;
       text-align: center;
-      height: 52px;
-      line-height: 52px;
+      height: 42px;
+      line-height: 42px;
       // padding: 8px;
       border-right: 1px solid #000;
       display: flex;
@@ -612,8 +728,8 @@
     .stat-cell-value {
       flex: 1;
       text-align: center;
-      height: 52px;
-      line-height: 52px;
+      height: 42px;
+      line-height: 42px;
       border-right: 1px solid #000;
       font-family: "Times New Roman", serif;
       font-size: 18px;

package/dist/esm/{printPdf.d.ts → DocumentFlipBook/printPdf.d.ts}

@@ -3,4 +3,5 @@ export declare function printArchiveAsPdf(params: {
     pages: BuiltPage[];
     getDocument: (path: string) => Promise<PdfDocumentLike>;
     scale?: number;
+    printType?: 'A4' | 'A5';
 }): Promise<void>;

package/dist/esm/{utils.d.ts → DocumentFlipBook/utils.d.ts}

@@ -3,7 +3,7 @@ export declare const setupPdfWorker: (customSrc?: string) => void;
 export declare const PDF_OPTIONS: {};
 export declare const PDF_PRELOAD_TIMEOUT = 60000;
 export declare const VIEWPORT_WIDTH = 580;
-export declare const VIEWPORT_HEIGHT = 670;
+export declare const VIEWPORT_HEIGHT = 650;
 export declare const HEIGHT = "100%";
 export declare const isPdfFile: (path: string) => boolean;
 export declare const formatPath: (path: string) => string;
@@ -14,4 +14,5 @@ export declare const createPdfDocumentCache: (loadDocument: (path: string) => Pr
     getDocument(path: string): Promise<PdfDocumentLike>;
     getPageCount(path: string): Promise<number>;
     clear(path: string): void;
+    clearAll(): void;
 };

package/dist/esm/{utils.js → DocumentFlipBook/utils.js}

@@ -22,7 +22,7 @@ setupPdfWorker();
 export var PDF_OPTIONS = {};
 export var PDF_PRELOAD_TIMEOUT = 60000; // 增加到 60 秒，适配超大文件或慢速网络
 export var VIEWPORT_WIDTH = 580;
-export var VIEWPORT_HEIGHT = 670;
+export var VIEWPORT_HEIGHT = 650;
 export var HEIGHT = '100%';
 
 // 判断是否为 PDF
@@ -209,6 +209,9 @@ export var createPdfDocumentCache = function createPdfDocumentCache(loadDocument
     },
     clear: function clear(path) {
       cache.delete(path);
+    },
+    clearAll: function clearAll() {
+      cache.clear();
     }
   };
 };

package/dist/esm/index.d.ts

@@ -1,4 +1,4 @@
 export { default as DocumentFlipBook } from './DocumentFlipBook';
-export { setupPdfWorker } from './utils';
-export * from './types';
-import './index.less';
+export { default as AccountingBook } from './AccountingBook';
+export { setupPdfWorker } from './DocumentFlipBook/utils';
+export * from './DocumentFlipBook/types';

package/dist/esm/index.js

@@ -1,4 +1,6 @@
 export { default as DocumentFlipBook } from "./DocumentFlipBook";
-export { setupPdfWorker } from "./utils";
-export * from "./types";
-import "./index.less";
+export { default as AccountingBook } from "./AccountingBook";
+
+// 导出通用工具和类型
+export { setupPdfWorker } from "./DocumentFlipBook/utils";
+export * from "./DocumentFlipBook/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cecee/document-flip-book",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "A high-performance document flipbook component based on React and Ant Design.",
   "publishConfig": {
     "access": "public"
@@ -26,12 +26,17 @@
     "html2canvas": ">=1.0.0",
     "jspdf": ">=2.0.0",
     "lodash": ">=4.0.0",
+    "pdfjs-dist": ">=4.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "react-pageflip": ">=2.0.0",
     "react-pdf": ">=9.0.0"
   },
+  "dependencies": {
+    "jszip": "^3.10.1"
+  },
   "devDependencies": {
+    "@types/jszip": "^3.4.1",
     "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",