@cecee/document-flip-book 1.0.18 → 1.0.20

package/dist/cjs/DocumentFlipBook/SideTabs.js

@@ -1,20 +1,71 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = SideTabs;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; }
+var MAX_VISIBLE_TABS = 5;
 function SideTabs(props) {
   var items = props.items,
     activeKey = props.activeKey,
     className = props.className,
     onSelect = props.onSelect;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: ['dfb-sideTabs', className].filter(Boolean).join(' '),
-    children: items.map(function (it) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDropdownOpen = _useState2[0],
+    setIsDropdownOpen = _useState2[1];
+  var dropdownRef = (0, _react.useRef)(null);
+
+  // 根据标签数量动态设置样式类名
+  var getContainerClassName = function getContainerClassName() {
+    var baseClasses = ['dfb-sideTabs', className].filter(Boolean).join(' ');
+    if (items.length > MAX_VISIBLE_TABS) {
+      return "".concat(baseClasses, " dfb-sideTabs--dropdown");
+    } else if (items.length >= 6) {
+      return "".concat(baseClasses, " dfb-sideTabs--overlap");
+    }
+    return baseClasses;
+  };
+
+  // 显示的标签和折叠的标签
+  var visibleItems = items.slice(0, MAX_VISIBLE_TABS);
+  var shouldShowDropdown = items.length > MAX_VISIBLE_TABS;
+  var isActiveInDropdown = activeKey && !visibleItems.some(function (item) {
+    return item.key === activeKey;
+  });
+  var activeItemInDropdown = isActiveInDropdown ? items.find(function (item) {
+    return item.key === activeKey;
+  }) : null;
+
+  // 点击外部关闭下拉菜单
+  (0, _react.useEffect)(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsDropdownOpen(false);
+      }
+    };
+    if (isDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isDropdownOpen]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: getContainerClassName(),
+    ref: dropdownRef,
+    children: [visibleItems.map(function (it) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         type: "button",
         className: ['dfb-sideTab', activeKey === it.key ? 'is-active' : ''].join(' '),
@@ -29,6 +80,60 @@ function SideTabs(props) {
           children: it.label
         })
       }, it.key);
-    })
+    }), shouldShowDropdown && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: ['dfb-sideTab', 'dfb-sideTab--more', isActiveInDropdown ? 'is-active' : ''].join(' '),
+        style: isActiveInDropdown && activeItemInDropdown ? {
+          background: activeItemInDropdown.color
+        } : {},
+        onClick: function onClick() {
+          return setIsDropdownOpen(!isDropdownOpen);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "dfb-sideTabText",
+          children: "\u66F4\u591A"
+        })
+      }), isDropdownOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dfb-sideTabs__dropdown",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dfb-sideTabs__dropdown-header",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: "\u66F4\u591A\u6807\u7B7E"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            className: "dfb-sideTabs__dropdown-close",
+            onClick: function onClick() {
+              return setIsDropdownOpen(false);
+            },
+            children: "\u2715"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dfb-sideTabs__dropdown-content",
+          children: items.map(function (it) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              type: "button",
+              className: ['dfb-sideTabs__dropdown-item', activeKey === it.key ? 'is-active' : ''].join(' '),
+              onClick: function onClick() {
+                onSelect(it);
+                setIsDropdownOpen(false);
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "dfb-sideTabs__dropdown-item-color",
+                style: {
+                  background: it.color
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "dfb-sideTabs__dropdown-item-text",
+                children: it.label
+              })]
+            }, it.key);
+          })
+        })]
+      })]
+    })]
   });
 }

package/dist/cjs/DocumentFlipBook/index.d.ts

@@ -6,6 +6,7 @@ interface DocumentFlipBookProps {
     title?: string;
     id?: string;
     themeColor?: string;
+    iconColor?: string;
     documentInfo: {
         fd: string;
         com00cs?: any[];

package/dist/cjs/DocumentFlipBook/index.js

@@ -40,6 +40,8 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
     id = _ref.id,
     _ref$themeColor = _ref.themeColor,
     themeColor = _ref$themeColor === void 0 ? '#9F7D4E' : _ref$themeColor,
+    _ref$iconColor = _ref.iconColor,
+    iconColor = _ref$iconColor === void 0 ? '#0064ff' : _ref$iconColor,
     documentInfo = _ref.documentInfo,
     onBack = _ref.onBack,
     onRequestFullscreen = _ref.onRequestFullscreen,
@@ -58,6 +60,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],
@@ -82,7 +85,6 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     refreshKey = _useState12[0],
     setRefreshKey = _useState12[1];
-  var isFirstLoadOfDocument = (0, _react.useRef)(true);
 
   // 内部处理全屏切换
   var handleRequestFullscreen = (0, _react.useCallback)(function () {
@@ -124,10 +126,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);
       }
@@ -365,7 +367,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           type = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : 'pdf';
-          if (!(type === 'html')) {
+          if (!(type === 'epub')) {
             _context2.next = 9;
             break;
           }
@@ -542,7 +544,7 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
       style: {
         width: '100%',
         minHeight: _utils.VIEWPORT_HEIGHT,
-        height: '100%',
+        height: _utils.VIEWPORT_HEIGHT,
         objectFit: 'contain',
         objectPosition: 'center top'
       }
@@ -570,7 +572,8 @@ var DocumentFlipBook = function DocumentFlipBook(_ref) {
       onPrint: handlePrint,
       onDownload: handleDownload,
       onRefresh: handleRefresh,
-      themeColor: themeColor
+      themeColor: themeColor,
+      iconColor: iconColor
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dfb-stage",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, {

package/dist/cjs/DocumentFlipBook/index.less

@@ -36,8 +36,7 @@
 }
 
 .book-view {
-  // box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
-  // overflow: hidden;
+  overflow: hidden;
   position: relative;
   z-index: 10;
   overflow: visible; // 显式设置为 visible 以显示侧边厚度装饰
@@ -45,6 +44,7 @@
 
   // 书本左侧厚度 1
   .dfb-book-thickness-left-1 {
+    overflow: hidden;
     position: absolute;
     top: 0;
     left: -4px;
@@ -101,6 +101,7 @@
 
   // 偶数页（第 2, 4, 6... 个子元素，对应 Page 1, 3, 5...）是左页 -> 显示左侧厚度
   &:nth-child(even) {
+
     .dfb-book-thickness-left-1,
     .dfb-book-thickness-left-2 {
       display: block;
@@ -109,6 +110,7 @@
 
   // 奇数页（第 1, 3, 5... 个子元素，对应 Page 0, 2, 4...）是右页 -> 显示右侧厚度
   &:nth-child(odd) {
+
     .dfb-book-thickness-right-1,
     .dfb-book-thickness-right-2 {
       display: block;
@@ -118,13 +120,17 @@
 
 .header-nav-btn {
   padding: 0 7px;
+
+  span {
+    color: #434343;
+  }
 }
 
 .dfb-HTMLFlipBook {
   position: relative;
   z-index: 10;
   overflow: visible; // 显式设置为 visible 以显示侧边厚度装饰
-  background: transparent; // 改为透明，避免遮挡背景层或产生白色边框
+  background: #fff; // 改为透明，避免遮挡背景层或产生白色边框
 }
 
 .dfb-root {
@@ -308,9 +314,32 @@
   top: 40px;
   display: flex;
   flex-direction: column;
-  gap: 6px; // 
+  gap: 6px; // 正常间距
   z-index: 20;
   transition: all 0.3s ease;
+  max-height: calc(100vh - 140px); // 限制最大高度
+  padding: 10px 0; // 移除水平内边距
+  box-sizing: border-box;
+
+  // 当标签超过6个时，调整间距让它们重叠
+  &.dfb-sideTabs--overlap {
+    gap: -10px; // 让标签重叠
+
+    .dfb-sideTab {
+      min-height: 50px; // 进一步减小高度
+      padding: 6px 4px 6px 8px; // 更紧凑的内边距
+    }
+  }
+
+  // 当标签超过8个时，显示下拉菜单模式
+  &.dfb-sideTabs--dropdown {
+    gap: 6px; // 正常间距
+
+    .dfb-sideTab {
+      min-height: 60px; // 恢复正常高度
+      padding: 8px 4px 8px 8px; // 恢复正常内边距
+    }
+  }
 
   &.is-on-cover {
     right: -42px; // 封面是单页模式，标签需要向左移动（进入书壳内部边缘）
@@ -319,15 +348,15 @@
 
   .dfb-sideTab {
     width: 42px;
-    min-height: 80px;
-    padding: 12px 6px 12px 10px;
+    min-height: 60px; // 减小最小高度以容纳更多标签
+    padding: 8px 4px 8px 8px; // 优化内边距
     border: none;
     border-radius: 0 6px 6px 0;
     cursor: pointer;
     color: #fff;
-    font-size: 13px;
+    font-size: 12px; // 稍微减小字体
     font-weight: 500;
-    line-height: 1.2;
+    line-height: 1.3;
     writing-mode: vertical-rl;
     text-align: center;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -337,6 +366,32 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0; // 防止标签被压缩
+    z-index: 1; // 确保标签层级正确
+
+    // "更多"按钮特殊样式
+    &.dfb-sideTab--more {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      font-weight: bold;
+      animation: pulse 2s infinite;
+
+
+      @keyframes pulse {
+
+        0%,
+        100% {
+          transform: scale(1);
+        }
+
+        50% {
+          transform: scale(1.05);
+        }
+      }
+
+      &:hover {
+        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+      }
+    }
 
     // 标签左侧的装饰条（仅在选中态或悬浮态显示，模拟折痕）
     &::before {
@@ -351,7 +406,11 @@
       opacity: 0;
     }
 
-
+    &:hover:not(.is-active):not(.dfb-sideTab--more) {
+      transform: translateX(-3px);
+      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
+      z-index: 10;
+    }
 
     &.is-active {
       position: relative;
@@ -360,8 +419,8 @@
       padding-left: 16px;
       font-weight: 700;
       box-shadow: 5px 2px 12px rgba(0, 0, 0, 0.2);
-      z-index: 12;
-      font-size: 14px;
+      z-index: 12; // 确保选中态在最上层
+      font-size: 13px;
 
       &::before {
         width: 8px; // 选中态条纹显示且最宽
@@ -371,11 +430,178 @@
     }
 
     .dfb-sideTabText {
-      letter-spacing: 2px;
+      letter-spacing: 1px; // 减小字间距
       filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
     }
   }
 
+  // 下拉菜单样式
+  .dfb-sideTabs__dropdown {
+    position: absolute;
+    right: 60px;
+    top: 0;
+    width: 220px;
+    max-height: 360px;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    z-index: 1000;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    animation: dropdownSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    backdrop-filter: blur(10px);
+
+    @keyframes dropdownSlide {
+      from {
+        opacity: 0;
+        transform: translateX(16px) translateY(-8px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateX(0) translateY(0);
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      right: -8px;
+      top: 28px;
+      width: 0;
+      height: 0;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+      border-left: 8px solid #fff;
+      z-index: 1001;
+      filter: drop-shadow(2px 0 3px rgba(0, 0, 0, 0.08));
+    }
+  }
+
+  .dfb-sideTabs__dropdown-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 10px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: 0.3px;
+  }
+
+  .dfb-sideTabs__dropdown-close {
+    background: rgba(255, 255, 255, 0.18);
+    border: none;
+    color: #fff;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.28);
+      transform: rotate(90deg) scale(1.1);
+    }
+  }
+
+  .dfb-sideTabs__dropdown-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 0;
+    max-height: 320px;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 2px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #c1c1c1;
+      border-radius: 2px;
+
+      &:hover {
+        background: #a1a1a1;
+      }
+    }
+  }
+
+  .dfb-sideTabs__dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: 100%;
+    text-align: left;
+    border-left: 3px solid transparent;
+
+    &:hover {
+      background: #f6f7f8;
+      border-left-color: var(--tab-color, #667eea);
+    }
+
+    &.is-active {
+      background: rgba(102, 126, 234, 0.06);
+      border-left-color: var(--tab-color, #667eea);
+
+      .dfb-sideTabs__dropdown-item-text {
+        color: #1a1a1a;
+        font-weight: 600;
+      }
+
+      .dfb-sideTabs__dropdown-item-check {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        background: var(--tab-color, #667eea);
+        border-radius: 50%;
+        color: #fff;
+        font-size: 10px;
+      }
+    }
+  }
+
+  .dfb-sideTabs__dropdown-item-color {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    flex-shrink: 0;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+    transition: transform 0.2s ease;
+
+    &:hover {
+      transform: scale(1.08);
+    }
+  }
+
+  .dfb-sideTabs__dropdown-item-text {
+    flex: 1;
+    font-size: 13px;
+    color: #333;
+    font-weight: 500;
+  }
+
+  .dfb-sideTabs__dropdown-item-check {
+    display: none;
+    font-size: 12px;
+    font-weight: bold;
+  }
 }
 
 .is-on-activeTab {
@@ -387,6 +613,7 @@
   margin: auto; // 关键：在 flex 容器中使用 margin: auto 实现完美居中且溢出时可滚动到顶部
   position: relative;
   min-width: 300px;
+  overflow: hidden;
 }
 
 // 方法三：背景层样式

package/dist/cjs/declarations.d.ts

@@ -0,0 +1,21 @@
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
+
+declare module 'react-image-magnifiers';

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import './index.less';
+interface VoucherEntry {
+    summary: string;
+    account: string;
+    debit: string;
+    credit: string;
+    trade_direction?: '借' | '贷';
+    amount?: string;
+    isTotal?: boolean;
+    checked?: boolean;
+}
+interface VoucherProps {
+    date?: string;
+    company?: string;
+    voucherNo?: string;
+    entries?: VoucherEntry[];
+    accountant?: string;
+    recorder?: string;
+    maker?: string;
+    showTotal?: boolean;
+    totalDebit?: string;
+    totalCredit?: string;
+}
+declare const AccountingVoucher: React.FC<VoucherProps>;
+export default AccountingVoucher;