@cecee/document-flip-book 1.0.17 → 1.0.19

package/dist/esm/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/esm/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/esm/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/{cjs/DocumentFlipBook.d.ts → esm/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/esm/{DocumentFlipBook.js → DocumentFlipBook/index.js}

@@ -20,7 +20,7 @@ import PdfPage from "./PdfPage";
 import SideTabs from "./SideTabs";
 import { buildPagesFromSingleAttachment, formatPath, VIEWPORT_HEIGHT, VIEWPORT_WIDTH, setupPdfWorker } from "./utils";
 import { globalPdfCache } from "./globalCache";
-import ArchiveCover from "./ArchiveCover"; // 引入封面组件
+import ArchiveCover from "./ArchiveCover";
 import ProjectCover from "./ProjectCover";
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,7 +40,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 = useRef(null);
   console.log(documentInfo);
 
@@ -48,6 +50,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
   useEffect(function () {
     setupPdfWorker(pdfWorkerSrc);
   }, [pdfWorkerSrc]);
+  var isFirstLoadOfDocument = useRef(true);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     pages = _useState2[0],
@@ -68,7 +71,10 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     mode = _useState10[0],
     setMode = _useState10[1];
-  var isFirstLoadOfDocument = useRef(true);
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    refreshKey = _useState12[0],
+    setRefreshKey = _useState12[1];
 
   // 内部处理全屏切换
   var handleRequestFullscreen = useCallback(function () {
@@ -88,6 +94,14 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
       window.history.back();
     }
   }, [onBack]);
+
+  // 计算加深的主题色，用于书本右侧阴影
+  var themeDarkColor = useMemo(function () {
+    if (!themeColor) return '#8b6d44';
+    // 简单的加深逻辑：使用 CSS filter 会更方便，但在 linear-gradient 中需要显式颜色
+    // 这里我们直接将变量传给 CSS 变量，让 CSS 处理或在 TS 中简单处理
+    return themeColor; // 暂时传递原始色，稍后在 CSS 中通过 mix-blend-mode 处理更佳
+  }, [themeColor]);
   var archiveId = useMemo(function () {
     return id || (documentInfo === null || documentInfo === void 0 ? void 0 : documentInfo.id) || (documentInfo === null || documentInfo === void 0 ? void 0 : documentInfo.code);
   }, [id, documentInfo]);
@@ -102,10 +116,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);
       }
@@ -293,7 +307,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
     return function () {
       isMounted = false;
     };
-  }, [documentInfo, activeTab, id]);
+  }, [documentInfo, activeTab, id, refreshKey]);
   var total = useMemo(function () {
     return 1 + pages.length;
   }, [pages]);
@@ -316,6 +330,10 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
   }, [total]);
   var handleRefresh = useCallback(function () {
     isFirstLoadOfDocument.current = true; // 标记为首次加载，使 init 逻辑停留在封面 (第 0 页)
+    globalPdfCache.clearAll(); // 清理所有 PDF 缓存
+    setRefreshKey(function (prev) {
+      return prev + 1;
+    }); // 增加 refreshKey 以触发 useEffect 重新执行初始化
     setActiveTab('');
     setCurrent(0);
     if (flipRef.current) {
@@ -329,7 +347,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
   var handleDownload = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     var type,
       _yield$import,
-      exportArchivePagesToHtml,
+      exportArchivePagesToEpub,
       hide,
       filename,
       _yield$import2,
@@ -347,12 +365,12 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
           return import("./exportHtml");
         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: globalPdfCache.getDocument,
             coverInfo: {
               data: documentInfo === null || documentInfo === void 0 ? void 0 : documentInfo.acc51c,
@@ -378,7 +396,8 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
             pages: pages,
             getDocument: globalPdfCache.getDocument,
             filename: filename,
-            scale: 2
+            scale: 2,
+            printType: printType
           });
         case 18:
           message.success('已开始下载');
@@ -397,7 +416,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
           return _context2.stop();
       }
     }, _callee2, null, [[10, 21, 24, 27]]);
-  })), [pages, title]);
+  })), [pages, title, printType]);
   var handlePrint = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
     var hide, _yield$import3, printArchiveAsPdf;
     return _regeneratorRuntime().wrap(function _callee3$(_context3) {
@@ -414,7 +433,8 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
           return printArchiveAsPdf({
             pages: pages,
             getDocument: globalPdfCache.getDocument,
-            scale: 2
+            scale: 2,
+            printType: printType
           });
         case 8:
           _context3.next = 13;
@@ -432,7 +452,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
           return _context3.stop();
       }
     }, _callee3, null, [[1, 10, 13, 16]]);
-  })), [pages]);
+  })), [pages, printType]);
 
   // 提取为独立的渲染函数，增加懒加载逻辑
   var renderContent = useCallback(function (idx) {
@@ -517,6 +537,10 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
   }, [pages, documentInfo, current, themeColor]);
   return /*#__PURE__*/_jsxs("div", {
     className: "dfb-root ".concat(mode === 'modal' ? 'is-fullscreen-modal' : ''),
+    style: {
+      '--dfb-theme-color': themeColor,
+      '--dfb-theme-dark-color': themeDarkColor
+    },
     children: [showHeaderBar && /*#__PURE__*/_jsx(HeaderBar, {
       mode: mode,
       title: title,
@@ -538,19 +562,63 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
       children: /*#__PURE__*/_jsx(Spin, {
         size: "large",
         spinning: loading,
-        children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsxs("div", {
           className: "dfb-book-wrapper",
           style: {
             minHeight: VIEWPORT_HEIGHT + 40
           },
-          children: /*#__PURE__*/_jsxs("div", {
-            className: current === 0 && !activeTab ? 'dfb-bookShell1' : 'dfb-bookShell',
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "dfb-book-background-layer",
             style: {
-              backgroundColor: current === 0 && !activeTab ? 'transparent' : themeColor
-            },
-            children: [(current > 0 || activeTab) && /*#__PURE__*/_jsx("div", {
+              opacity: current === 0 && !activeTab ? 0 : 1
+            }
+          }), (current > 0 || activeTab) && /*#__PURE__*/_jsxs("div", {
+            className: "dfb-spine-decoration-layer",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "dfb-inside-spine",
+              children: /*#__PURE__*/_jsxs("svg", {
+                width: "100%",
+                height: "100%",
+                viewBox: "0 0 34 825",
+                preserveAspectRatio: "none",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: [/*#__PURE__*/_jsx("path", {
+                  d: "M0 0L34 8V817L0 825V0Z",
+                  fill: themeColor
+                }), /*#__PURE__*/_jsx("path", {
+                  d: "M0 0L34 8V817L0 825V0Z",
+                  fill: "url(#paint0_linear_inside)",
+                  fillOpacity: "0.53",
+                  style: {
+                    mixBlendMode: 'multiply'
+                  }
+                }), /*#__PURE__*/_jsx("defs", {
+                  children: /*#__PURE__*/_jsxs("linearGradient", {
+                    id: "paint0_linear_inside",
+                    x1: "0",
+                    y1: "412.5",
+                    x2: "34",
+                    y2: "412.5",
+                    gradientUnits: "userSpaceOnUse",
+                    children: [/*#__PURE__*/_jsx("stop", {
+                      offset: "0.02",
+                      stopColor: "#000",
+                      stopOpacity: "0.6"
+                    }), /*#__PURE__*/_jsx("stop", {
+                      offset: "0.995",
+                      stopColor: "#000",
+                      stopOpacity: "0.2"
+                    })]
+                  })
+                })]
+              })
+            }), /*#__PURE__*/_jsx("div", {
               className: "dfb-book-spine"
-            }), (pages === null || pages === void 0 ? void 0 : pages.length) > 0 && tabItems.length > 0 && /*#__PURE__*/_jsx(SideTabs, {
+            })]
+          }), /*#__PURE__*/_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__*/_jsx(SideTabs, {
               items: tabItems,
               activeKey: activeTab,
               className: current === 0 ? 'is-on-cover' : !activeTab ? 'is-on-activeTab' : '',
@@ -609,7 +677,22 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
                       height: '100%',
                       background: '#fff'
                     },
-                    children: renderContent(i)
+                    children: /*#__PURE__*/_jsxs("div", {
+                      style: {
+                        position: 'relative',
+                        width: '100%',
+                        height: '100%'
+                      },
+                      children: [/*#__PURE__*/_jsx("div", {
+                        className: "dfb-book-thickness-left-1"
+                      }), /*#__PURE__*/_jsx("div", {
+                        className: "dfb-book-thickness-left-2"
+                      }), /*#__PURE__*/_jsx("div", {
+                        className: "dfb-book-thickness-right-1"
+                      }), /*#__PURE__*/_jsx("div", {
+                        className: "dfb-book-thickness-right-2"
+                      }), renderContent(i)]
+                    })
                   }, i);
                 })
               }, "".concat(archiveId, "-").concat(activeTab)), !loading && pages.length === 0 && /*#__PURE__*/_jsx("div", {
@@ -620,10 +703,21 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
                   margin: 'auto',
                   background: '#fff'
                 },
-                children: renderContent(0)
+                children: /*#__PURE__*/_jsxs("div", {
+                  style: {
+                    position: 'relative',
+                    width: '100%',
+                    height: '100%'
+                  },
+                  children: [/*#__PURE__*/_jsx("div", {
+                    className: "dfb-book-thickness-right-1"
+                  }), /*#__PURE__*/_jsx("div", {
+                    className: "dfb-book-thickness-right-2"
+                  }), renderContent(0)]
+                })
               })]
             })]
-          })
+          })]
         })
       })
     })]