@cecee/document-flip-book 1.0.17 → 1.0.18

package/dist/cjs/DocumentFlipBook/images/Inside.svg

@@ -0,0 +1,10 @@
+<svg width="34" height="825" viewBox="0 0 34 825" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L34 8V817L0 825V0Z" fill="#3AB5EA"/>
+<path d="M0 0L34 8V817L0 825V0Z" fill="url(#paint0_linear_28900_8954)" fill-opacity="0.53" style="mix-blend-mode:multiply"/>
+<defs>
+<linearGradient id="paint0_linear_28900_8954" x1="0" y1="412.5" x2="34" y2="412.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.02" stop-color="#007DB3"/>
+<stop offset="0.995" stop-color="#00354B"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/cjs/DocumentFlipBook/images/book.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1781057525113" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11598" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M256 0C150 0 64 86 64 192v640c0 106 86 192 192 192h640c35.4 0 64-28.6 64-64s-28.6-64-64-64v-128c35.4 0 64-28.6 64-64V64c0-35.4-28.6-64-64-64H256z m0 768h512v128H256c-35.4 0-64-28.6-64-64s28.6-64 64-64z m64-480c0-17.6 14.4-32 32-32h384c17.6 0 32 14.4 32 32s-14.4 32-32 32H352c-17.6 0-32-14.4-32-32z m32 96h384c17.6 0 32 14.4 32 32s-14.4 32-32 32H352c-17.6 0-32-14.4-32-32s14.4-32 32-32z" p-id="11599" fill="#64c3f5"></path></svg>

package/dist/cjs/DocumentFlipBook/images/coverSpine.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="825" viewBox="0 0 17 825" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 30L17 0V825L0 789V30Z" fill="#22A3DA"/>
+<path d="M4 43.8636L13 29.5V802L4 782.364L4 43.8636Z" fill="#DEF0FA"/>
+</svg>

package/dist/{esm/DocumentFlipBook.d.ts → cjs/DocumentFlipBook/index.d.ts}

@@ -7,6 +7,7 @@ interface DocumentFlipBookProps {
     id?: string;
     themeColor?: string;
     documentInfo: {
+        fd: string;
         com00cs?: any[];
         attachments?: any[];
         edr04bs?: any[];
@@ -27,6 +28,7 @@ interface DocumentFlipBookProps {
     onSearch?: (v: string) => void;
     showHeaderBar?: boolean;
     pdfWorkerSrc?: string;
+    printType?: 'A4' | 'A5';
 }
 declare const DocumentFlipBook: React.FC<DocumentFlipBookProps>;
 export default DocumentFlipBook;

package/dist/cjs/{DocumentFlipBook.js → DocumentFlipBook/index.js}

@@ -32,7 +32,7 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // 引入封面组件
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var DocumentFlipBook = function DocumentFlipBook(_ref) {
   var _ref$mode = _ref.mode,
     initialMode = _ref$mode === void 0 ? 'page' : _ref$mode,
@@ -48,7 +48,9 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
     onSearch = _ref$onSearch === void 0 ? function () {} : _ref$onSearch,
     _ref$showHeaderBar = _ref.showHeaderBar,
     showHeaderBar = _ref$showHeaderBar === void 0 ? true : _ref$showHeaderBar,
-    pdfWorkerSrc = _ref.pdfWorkerSrc;
+    pdfWorkerSrc = _ref.pdfWorkerSrc,
+    _ref$printType = _ref.printType,
+    printType = _ref$printType === void 0 ? 'A4' : _ref$printType;
   var flipRef = (0, _react.useRef)(null);
   console.log(documentInfo);
 
@@ -76,6 +78,10 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     mode = _useState10[0],
     setMode = _useState10[1];
+  var _useState11 = (0, _react.useState)(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    refreshKey = _useState12[0],
+    setRefreshKey = _useState12[1];
   var isFirstLoadOfDocument = (0, _react.useRef)(true);
 
   // 内部处理全屏切换
@@ -96,6 +102,14 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
       window.history.back();
     }
   }, [onBack]);
+
+  // 计算加深的主题色，用于书本右侧阴影
+  var themeDarkColor = (0, _react.useMemo)(function () {
+    if (!themeColor) return '#8b6d44';
+    // 简单的加深逻辑：使用 CSS filter 会更方便，但在 linear-gradient 中需要显式颜色
+    // 这里我们直接将变量传给 CSS 变量，让 CSS 处理或在 TS 中简单处理
+    return themeColor; // 暂时传递原始色，稍后在 CSS 中通过 mix-blend-mode 处理更佳
+  }, [themeColor]);
   var archiveId = (0, _react.useMemo)(function () {
     return id || (documentInfo === null || documentInfo === void 0 ? void 0 : documentInfo.id) || (documentInfo === null || documentInfo === void 0 ? void 0 : documentInfo.code);
   }, [id, documentInfo]);
@@ -301,7 +315,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
     return function () {
       isMounted = false;
     };
-  }, [documentInfo, activeTab, id]);
+  }, [documentInfo, activeTab, id, refreshKey]);
   var total = (0, _react.useMemo)(function () {
     return 1 + pages.length;
   }, [pages]);
@@ -324,6 +338,10 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
   }, [total]);
   var handleRefresh = (0, _react.useCallback)(function () {
     isFirstLoadOfDocument.current = true; // 标记为首次加载，使 init 逻辑停留在封面 (第 0 页)
+    _globalCache.globalPdfCache.clearAll(); // 清理所有 PDF 缓存
+    setRefreshKey(function (prev) {
+      return prev + 1;
+    }); // 增加 refreshKey 以触发 useEffect 重新执行初始化
     setActiveTab('');
     setCurrent(0);
     if (flipRef.current) {
@@ -337,7 +355,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
   var handleDownload = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     var type,
       _yield$import,
-      exportArchivePagesToHtml,
+      exportArchivePagesToEpub,
       hide,
       filename,
       _yield$import2,
@@ -357,12 +375,12 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
           });
         case 4:
           _yield$import = _context2.sent;
-          exportArchivePagesToHtml = _yield$import.exportArchivePagesToHtml;
+          exportArchivePagesToEpub = _yield$import.exportArchivePagesToEpub;
           _context2.next = 8;
-          return exportArchivePagesToHtml({
+          return exportArchivePagesToEpub({
             pages: pages,
-            filename: "\u6863\u6848\u7FFB\u4E66-".concat(new Date().toISOString().slice(0, 10)),
-            title: title || '档案翻书',
+            filename: "".concat((documentInfo === null || documentInfo === void 0 ? void 0 : documentInfo.fd) || '电子档案书', ".epub"),
+            title: (documentInfo === null || documentInfo === void 0 ? void 0 : documentInfo.fd) || '电子档案书',
             getDocument: _globalCache.globalPdfCache.getDocument,
             coverInfo: {
               data: documentInfo === null || documentInfo === void 0 ? void 0 : documentInfo.acc51c,
@@ -390,7 +408,8 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
             pages: pages,
             getDocument: _globalCache.globalPdfCache.getDocument,
             filename: filename,
-            scale: 2
+            scale: 2,
+            printType: printType
           });
         case 18:
           _antd.message.success('已开始下载');
@@ -409,7 +428,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
           return _context2.stop();
       }
     }, _callee2, null, [[10, 21, 24, 27]]);
-  })), [pages, title]);
+  })), [pages, title, printType]);
   var handlePrint = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
     var hide, _yield$import3, printArchiveAsPdf;
     return _regeneratorRuntime().wrap(function _callee3$(_context3) {
@@ -428,7 +447,8 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
           return printArchiveAsPdf({
             pages: pages,
             getDocument: _globalCache.globalPdfCache.getDocument,
-            scale: 2
+            scale: 2,
+            printType: printType
           });
         case 8:
           _context3.next = 13;
@@ -446,7 +466,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
           return _context3.stop();
       }
     }, _callee3, null, [[1, 10, 13, 16]]);
-  })), [pages]);
+  })), [pages, printType]);
 
   // 提取为独立的渲染函数，增加懒加载逻辑
   var renderContent = (0, _react.useCallback)(function (idx) {
@@ -531,6 +551,10 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
   }, [pages, documentInfo, current, themeColor]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "dfb-root ".concat(mode === 'modal' ? 'is-fullscreen-modal' : ''),
+    style: {
+      '--dfb-theme-color': themeColor,
+      '--dfb-theme-dark-color': themeDarkColor
+    },
     children: [showHeaderBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderBar.default, {
       mode: mode,
       title: title,
@@ -552,19 +576,63 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, {
         size: "large",
         spinning: loading,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dfb-book-wrapper",
           style: {
             minHeight: _utils.VIEWPORT_HEIGHT + 40
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: current === 0 && !activeTab ? 'dfb-bookShell1' : 'dfb-bookShell',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dfb-book-background-layer",
             style: {
-              backgroundColor: current === 0 && !activeTab ? 'transparent' : themeColor
-            },
-            children: [(current > 0 || activeTab) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              opacity: current === 0 && !activeTab ? 0 : 1
+            }
+          }), (current > 0 || activeTab) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "dfb-spine-decoration-layer",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "dfb-inside-spine",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+                width: "100%",
+                height: "100%",
+                viewBox: "0 0 34 825",
+                preserveAspectRatio: "none",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+                  d: "M0 0L34 8V817L0 825V0Z",
+                  fill: themeColor
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+                  d: "M0 0L34 8V817L0 825V0Z",
+                  fill: "url(#paint0_linear_inside)",
+                  fillOpacity: "0.53",
+                  style: {
+                    mixBlendMode: 'multiply'
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("linearGradient", {
+                    id: "paint0_linear_inside",
+                    x1: "0",
+                    y1: "412.5",
+                    x2: "34",
+                    y2: "412.5",
+                    gradientUnits: "userSpaceOnUse",
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+                      offset: "0.02",
+                      stopColor: "#000",
+                      stopOpacity: "0.6"
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+                      offset: "0.995",
+                      stopColor: "#000",
+                      stopOpacity: "0.2"
+                    })]
+                  })
+                })]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "dfb-book-spine"
-            }), (pages === null || pages === void 0 ? void 0 : pages.length) > 0 && tabItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideTabs.default, {
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: current === 0 ? '' : 'dfb-book-content-layer',
+            children: [(pages === null || pages === void 0 ? void 0 : pages.length) > 0 && tabItems.length > 0 && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideTabs.default, {
               items: tabItems,
               activeKey: activeTab,
               className: current === 0 ? 'is-on-cover' : !activeTab ? 'is-on-activeTab' : '',
@@ -623,7 +691,22 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
                       height: '100%',
                       background: '#fff'
                     },
-                    children: renderContent(i)
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                      style: {
+                        position: 'relative',
+                        width: '100%',
+                        height: '100%'
+                      },
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        className: "dfb-book-thickness-left-1"
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        className: "dfb-book-thickness-left-2"
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        className: "dfb-book-thickness-right-1"
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        className: "dfb-book-thickness-right-2"
+                      }), renderContent(i)]
+                    })
                   }, i);
                 })
               }, "".concat(archiveId, "-").concat(activeTab)), !loading && pages.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -634,10 +717,21 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
                   margin: 'auto',
                   background: '#fff'
                 },
-                children: renderContent(0)
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  style: {
+                    position: 'relative',
+                    width: '100%',
+                    height: '100%'
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    className: "dfb-book-thickness-right-1"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                    className: "dfb-book-thickness-right-2"
+                  }), renderContent(0)]
+                })
               })]
             })]
-          })
+          })]
         })
       })
     })]

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);
+  // box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
+  // overflow: hidden;
   position: relative;
-  overflow: hidden;
+  z-index: 10;
+  overflow: visible; // 显式设置为 visible 以显示侧边厚度装饰
+  background: transparent; // 改为透明，避免遮挡背景层或产生白色边框
 
-  // 页面内侧阴影（靠近中缝处的深度感）
-  &::before {
-    content: "";
+  // 书本左侧厚度 1
+  .dfb-book-thickness-left-1 {
     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; // 默认隐藏
   }
 
-  // 封面页（第一页）通常不需要这种内部阴影，或者阴影较弱
-  &:first-child::before {
-    opacity: 0.3;
+  // 偶数页（第 2, 4, 6... 个子元素，对应 Page 1, 3, 5...）是左页 -> 显示左侧厚度
+  &:nth-child(even) {
+    .dfb-book-thickness-left-1,
+    .dfb-book-thickness-left-2 {
+      display: block;
+    }
+  }
+
+  // 奇数页（第 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: transparent; // 改为透明，避免遮挡背景层或产生白色边框
 }
 
 .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 {
@@ -341,55 +389,105 @@
   min-width: 300px;
 }
 
-.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-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-bookShell {
+// 方法三：内容层样式
+.dfb-book-content-layer {
   position: relative;
-  padding: 18px 54px;
-  background: #9F7D4E;
-  transition: background-color 0.3s ease;
+  z-index: 10; // 位于背景之上
+  padding: 18px 54px; // 保持与背景层一致的内边距
+}
 
-  &::after {
+// 书脊内侧装饰 (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; // 增加不透明度使其更清晰
+}
+
+// 中缝装饰层（确保在中缝位置且高于内容层）
+// .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 +496,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 +523,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 +567,7 @@
     font-size: 26px;
     font-weight: bold;
     margin-top: 10px;
-    margin-bottom: 30px;
+    margin-bottom: 10px;
     letter-spacing: 4px;
     text-align: center;
   }
@@ -533,10 +641,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 +649,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 +689,7 @@
     box-sizing: border-box;
   }
 
-   .project-cover-header {
+  .project-cover-header {
     text-align: center;
     color: #000;
     // padding: 8px 0;
@@ -599,8 +714,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 +727,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>;