@cecee/document-flip-book 1.0.17 → 1.0.19

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);
 
@@ -56,6 +58,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
   (0, _react.useEffect)(function () {
     (0, _utils.setupPdfWorker)(pdfWorkerSrc);
   }, [pdfWorkerSrc]);
+  var isFirstLoadOfDocument = (0, _react.useRef)(true);
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     pages = _useState2[0],
@@ -76,7 +79,10 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     mode = _useState10[0],
     setMode = _useState10[1];
-  var isFirstLoadOfDocument = (0, _react.useRef)(true);
+  var _useState11 = (0, _react.useState)(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    refreshKey = _useState12[0],
+    setRefreshKey = _useState12[1];
 
   // 内部处理全屏切换
   var handleRequestFullscreen = (0, _react.useCallback)(function () {
@@ -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]);
@@ -110,10 +124,10 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
     setPages([]); // 立即清空旧页面，防止切换时闪烁旧数据
     setCurrent(0);
     setActiveTab('');
-    if (flipRef.current) {
+    if (flipRef !== null && flipRef !== void 0 && flipRef.current) {
       try {
         var _flipRef$current;
-        (_flipRef$current = flipRef.current) === null || _flipRef$current === void 0 || (_flipRef$current = _flipRef$current.pageFlip()) === null || _flipRef$current === void 0 || _flipRef$current.turnToPage(0);
+        flipRef === null || flipRef === void 0 || (_flipRef$current = flipRef.current) === null || _flipRef$current === void 0 || (_flipRef$current = _flipRef$current.pageFlip()) === null || _flipRef$current === void 0 || _flipRef$current.turnToPage(0);
       } catch (e) {
         console.warn('Reset flipbook failed', e);
       }
@@ -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)]
+                })
               })]
             })]
-          })
+          })]
         })
       })
     })]