@cecee/document-flip-book 1.0.17 → 1.0.19

package/dist/cjs/{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/cjs/{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/cjs/{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/cjs/{utils.js → DocumentFlipBook/utils.js}

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

package/dist/cjs/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/cjs/index.js

@@ -5,8 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   DocumentFlipBook: true,
+  AccountingBook: true,
   setupPdfWorker: true
 };
+Object.defineProperty(exports, "AccountingBook", {
+  enumerable: true,
+  get: function get() {
+    return _AccountingBook.default;
+  }
+});
 Object.defineProperty(exports, "DocumentFlipBook", {
   enumerable: true,
   get: function get() {
@@ -20,8 +27,9 @@ Object.defineProperty(exports, "setupPdfWorker", {
   }
 });
 var _DocumentFlipBook = _interopRequireDefault(require("./DocumentFlipBook"));
-var _utils = require("./utils");
-var _types = require("./types");
+var _AccountingBook = _interopRequireDefault(require("./AccountingBook"));
+var _utils = require("./DocumentFlipBook/utils");
+var _types = require("./DocumentFlipBook/types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -33,5 +41,4 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-require("./index.less");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/esm/AccountingBook/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AccountingBook: React.FC;
+export default AccountingBook;

package/dist/esm/AccountingBook/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var AccountingBook = function AccountingBook() {
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("h1", {
+      children: "Accounting Book Component"
+    }), /*#__PURE__*/_jsx("p", {
+      children: "This is a placeholder for the Accounting Book component."
+    })]
+  });
+};
+export default AccountingBook;

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

@@ -28,12 +28,32 @@ var ArchiveCover = function ArchiveCover(_ref) {
     attachmentsCount: (archiveInfo === null || archiveInfo === void 0 || (_archiveInfo$com00cs = archiveInfo.com00cs) === null || _archiveInfo$com00cs === void 0 ? void 0 : _archiveInfo$com00cs.length) || 0,
     nsp24cFd: (archiveInfo === null || archiveInfo === void 0 || (_archiveInfo$nsp24c = archiveInfo.nsp24c) === null || _archiveInfo$nsp24c === void 0 ? void 0 : _archiveInfo$nsp24c.fd) || '-'
   };
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "archive-cover",
     style: {
       backgroundColor: themeColor
     },
-    children: /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "archive-spine",
+      children: /*#__PURE__*/_jsxs("svg", {
+        width: "100%",
+        height: "100%",
+        viewBox: "0 0 17 825",
+        preserveAspectRatio: "none",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [/*#__PURE__*/_jsx("path", {
+          d: "M0 30L17 0V825L0 789V30Z",
+          fill: themeColor,
+          style: {
+            filter: 'brightness(0.9)'
+          }
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M4 43.8636L13 29.5V802L4 782.364L4 43.8636Z",
+          fill: "rgba(255,255,255,0.3)"
+        })]
+      })
+    }), /*#__PURE__*/_jsx("div", {
       className: "archive-cover__outer-border",
       children: /*#__PURE__*/_jsxs("div", {
         className: "archive-cover__inner",
@@ -130,7 +150,7 @@ var ArchiveCover = function ArchiveCover(_ref) {
           })
         })]
       })
-    })
+    })]
   });
 };
 export default /*#__PURE__*/React.memo(ArchiveCover);

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

@@ -77,7 +77,7 @@ var ExportModal = function ExportModal(_ref) {
               style: {
                 fontSize: 16
               },
-              children: "HTML \u7FFB\u4E66"
+              children: "EPUB \u7535\u5B50\u4E66"
             })
           })]
         })

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

@@ -85,13 +85,33 @@ var ProjectCover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })
     });
   };
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "project-cover-container",
     style: {
       backgroundColor: themeColor
     },
     ref: ref,
-    children: /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "archive-spine",
+      children: /*#__PURE__*/_jsxs("svg", {
+        width: "100%",
+        height: "100%",
+        viewBox: "0 0 17 825",
+        preserveAspectRatio: "none",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [/*#__PURE__*/_jsx("path", {
+          d: "M0 30L17 0V825L0 789V30Z",
+          fill: themeColor,
+          style: {
+            filter: 'brightness(0.9)'
+          }
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M4 43.8636L13 29.5V802L4 782.364L4 43.8636Z",
+          fill: "rgba(255,255,255,0.3)"
+        })]
+      })
+    }), /*#__PURE__*/_jsx("div", {
       className: "project-cover-border-outer",
       children: /*#__PURE__*/_jsxs("div", {
         className: "project-cover-border-inner",
@@ -196,7 +216,7 @@ var ProjectCover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           })]
         })]
       })
-    })
+    })]
   });
 });
 export default /*#__PURE__*/React.memo(ProjectCover);

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

@@ -1,5 +1,5 @@
 import { BuiltPage, PdfDocumentLike } from './types';
-interface ExportHtmlOptions {
+interface ExportEpubOptions {
     pages: BuiltPage[];
     filename: string;
     title?: string;
@@ -13,7 +13,7 @@ interface ExportHtmlOptions {
     };
 }
 /**
- * 导出 HTML 翻书功能
+ * 导出 EPUB 电子书功能
  */
-export declare const exportArchivePagesToHtml: (options: ExportHtmlOptions) => Promise<void>;
+export declare const exportArchivePagesToEpub: (options: ExportEpubOptions) => Promise<void>;
 export {};