@airhang/vue-book-reader 1.0.0

package/dist/vue-book-reader.umd.js

@@ -0,0 +1,3389 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["vue-book-reader"] = factory();
+	else
+		root["vue-book-reader"] = factory();
+})((typeof self !== 'undefined' ? self : this), function() {
+return /******/ (function() { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	!function() {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = function(exports, definition) {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	!function() {
+/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	!function() {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = function(exports) {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/publicPath */
+/******/ 	!function() {
+/******/ 		__webpack_require__.p = "";
+/******/ 	}();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  BookCatalogueDrawer: function() { return /* reexport */ BookCatalogueDrawer; },
+  BookReader: function() { return /* reexport */ BookReader; },
+  "default": function() { return /* binding */ entry_lib; }
+});
+
+;// ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
+/* eslint-disable no-var */
+// This file is imported into lib/wc client bundles.
+
+if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
+  if (false) // removed by dead control flow
+{ var getCurrentScript; }
+
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
+  }
+}
+
+// Indicate to webpack that this file can be concatenated
+/* harmony default export */ var setPublicPath = (null);
+
+;// ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/BookReader.vue?vue&type=template&id=eaca7004&scoped=true
+var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"photo-album-container",style:({ transform: `scale(${_vm.zoomScale}) translate(${_vm.translateX}px, ${_vm.translateY}px)` }),on:{"touchstart":_vm.onContainerTouchStart,"touchmove":_vm.onContainerTouchMove,"touchend":_vm.onContainerTouchEnd,"dblclick":_vm.onContainerDoubleClick,"click":_vm.onContentClick}},[( false)?0:_vm._e(),(_vm.contentReady)?_c('div',{staticClass:"flipbook-wrapper",on:{"dblclick":_vm.onFlipbookDoubleClick,"!touchstart":function($event){return _vm.onFlipbookTouchStart.apply(null, arguments)},"!touchend":function($event){return _vm.onFlipbookTouchEnd.apply(null, arguments)}}},[(_vm.flipMode === 'flip' && _vm.flag)?_c('flipbook',{ref:"flipbook",class:['flipbook', _vm.isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized'],attrs:{"pages":_vm.pages,"pagesHiRes":_vm.pagesHiRes,"startPage":_vm.startPage,"zooms":null,"ambient-light":0.6,"gloss":0.4,"single-page":_vm.isMobile,"click-to-flip":false,"wheel-to-flip":!_vm.isMobile,"swipe-to-flip":true,"center-pages":true},on:{"flip-left-end":_vm.onFlipLeftEnd,"flip-right-end":_vm.onFlipRightEnd},scopedSlots:_vm._u([{key:"default",fn:function({ page, canFlipLeft, canFlipRight }){return undefined}}],null,false,2449366912)}):(_vm.flipMode === 'slide')?_c('div',{ref:"slideViewer",class:['slide-viewer', _vm.isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized'],on:{"touchstart":_vm.onSlideViewerTouchStart,"touchmove":_vm.onSlideViewerTouchMove,"touchend":_vm.onSlideViewerTouchEnd}},[_c('div',{staticClass:"slide-container",style:(_vm.slideContainerStyle)},_vm._l((_vm.pages),function(page,index){return _c('div',{key:index,staticClass:"slide-page",class:{ 'slide-page-active': index + 1 === _vm.currentPage }},[(page)?_c('img',{staticClass:"slide-page-image",attrs:{"src":page,"alt":""}}):_c('div',{staticClass:"slide-page-placeholder"},[_vm._v("封面/封底")])])}),0)]):(_vm.flipMode === 'fade')?_c('div',{ref:"fadeViewer",class:['fade-viewer', _vm.isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized']},[_c('transition',{attrs:{"name":"fade-page","mode":"out-in"}},[_c('div',{key:_vm.currentPage,staticClass:"fade-page-container"},[(_vm.pages[_vm.currentPage - 1])?_c('img',{staticClass:"fade-page-image",attrs:{"src":_vm.pages[_vm.currentPage - 1],"alt":""}}):_c('div',{staticClass:"fade-page-placeholder"},[_vm._v("封面/封底")])])])],1):(_vm.flipMode === 'scroll')?_c('div',{ref:"scrollViewer",class:['scroll-viewer', _vm.isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized'],on:{"scroll":_vm.onScrollViewerScroll}},[_c('div',{staticClass:"scroll-container"},_vm._l((_vm.pages),function(page,index){return _c('div',{key:index,ref:'scrollPage' + index,refInFor:true,staticClass:"scroll-page"},[(page)?_c('img',{staticClass:"scroll-page-image",attrs:{"src":page,"alt":""}}):_c('div',{staticClass:"scroll-page-placeholder"},[_vm._v("封面/封底")])])}),0)]):(_vm.flipMode === 'clip')?_c('div',{ref:"clipViewer",class:['clip-viewer', _vm.isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized']},[_c('div',{staticClass:"clip-pages-wrapper"},[_c('transition',{attrs:{"name":"clip-current"}},[_c('div',{key:'current-' + _vm.currentPage,staticClass:"clip-page clip-page-current"},[(_vm.pages[_vm.currentPage - 1])?_c('img',{staticClass:"clip-page-image",attrs:{"src":_vm.pages[_vm.currentPage - 1],"alt":""}}):_c('div',{staticClass:"clip-page-placeholder"},[_vm._v("封面/封底")])])]),(_vm.currentPage < _vm.totalPages)?_c('div',{staticClass:"clip-page clip-page-next"},[(_vm.pages[_vm.currentPage])?_c('img',{staticClass:"clip-page-image",attrs:{"src":_vm.pages[_vm.currentPage],"alt":""}}):_c('div',{staticClass:"clip-page-placeholder"},[_vm._v("封面/封底")])]):_vm._e()],1)]):(_vm.flipMode === 'card')?_c('div',{ref:"cardViewer",class:['card-viewer', _vm.isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized']},[_c('div',{staticClass:"card-stack"},[_c('transition-group',{staticClass:"card-transition-group",attrs:{"name":"card-flip","tag":"div"}},_vm._l((_vm.visibleCards),function(page,index){return _c('div',{key:'card-' + page.originalIndex,staticClass:"card-item",class:{
+              'card-item-prev': page.position === 'prev',
+              'card-item-current': page.position === 'current',
+              'card-item-next': page.position === 'next'
+            },style:(_vm.getCardStyle(page.position))},[_c('div',{staticClass:"card-content"},[(page.src)?_c('img',{staticClass:"card-image",attrs:{"src":page.src,"alt":""}}):_c('div',{staticClass:"card-placeholder"},[_vm._v("封面/封底")])]),_c('div',{staticClass:"card-page-number"},[_vm._v(_vm._s(page.originalIndex + 1)+" / "+_vm._s(_vm.totalPages))])])}),0)],1)]):_vm._e()],1):_vm._e(),_c('div',{staticClass:"controls",class:{ 'mobile-controls': _vm.isMobile, 'desktop-controls': !_vm.isMobile, 'controls-visible': _vm.showControls },on:{"click":function($event){$event.stopPropagation();}}},[_c('button',{staticClass:"btn btn-prev",on:{"click":_vm.flipLeft}},[_vm._v(" ← 上一页 ")]),_c('span',{staticClass:"page-indicator"},[(_vm.totalPages === 0)?_c('span',[_vm._v("加载中...")]):(_vm.currentPage === 1 && _vm.totalPages > 1)?_c('span',[_vm._v("封面")]):(_vm.currentPage === _vm.totalPages && _vm.totalPages > 1)?_c('span',[_vm._v("封底")]):(!_vm.isMobile && _vm.totalPages > 2)?_c('span',[_vm._v("第 "+_vm._s(Math.ceil((_vm.currentPage - 1) / 2))+" 组 / 共 "+_vm._s(Math.ceil((_vm.totalPages - 2) / 2))+" 组")]):(_vm.isMobile && _vm.totalPages > 2)?_c('span',[_vm._v("第 "+_vm._s(Math.max(1, _vm.currentPage ))+" 页 / 共 "+_vm._s(Math.max(0, _vm.totalPages - 2))+" 页")]):(_vm.totalPages === 1)?_c('span',[_vm._v("第 1 页 / 共 1 页")]):_c('span',[_vm._v("第 "+_vm._s(_vm.currentPage)+" 页 / 共 "+_vm._s(_vm.totalPages)+" 页")])]),_c('button',{staticClass:"btn btn-next",on:{"click":_vm.flipRight}},[_vm._v(" 下一页 → ")])]),(_vm.showFlipModeSelector)?_c('div',{staticClass:"flip-mode-selector",class:{ 'mobile-flip-mode-selector': _vm.isMobile }},[_c('button',{staticClass:"btn btn-flip-mode",on:{"click":_vm.toggleFlipModeMenu}},[_c('span',{staticClass:"flip-mode-icon"},[_vm._v(_vm._s(_vm.flipModeIcon))]),_c('span',{staticClass:"flip-mode-text"},[_vm._v(_vm._s(_vm.flipModeLabel))])]),(_vm.showFlipModeMenu)?_c('div',{staticClass:"flip-mode-menu"},_vm._l((_vm.flipModes),function(mode){return _c('div',{key:mode.value,staticClass:"flip-mode-item",class:{ 'flip-mode-item-active': _vm.flipMode === mode.value },on:{"click":function($event){return _vm.selectFlipMode(mode.value)}}},[_c('span',{staticClass:"flip-mode-item-icon"},[_vm._v(_vm._s(mode.icon))]),_c('span',{staticClass:"flip-mode-item-label"},[_vm._v(_vm._s(mode.label))])])}),0):_vm._e()]):_vm._e(),_c('div',{staticClass:"catalogue-button",class:{
+      'mobile-catalogue-button': _vm.isMobile,
+      'dragging': _vm.catalogueButtonDragging,
+      'catalogue-visible': _vm.showControls
+    },style:({
+      left: _vm.catalogueButtonPosition.x + 'px',
+      top: _vm.catalogueButtonPosition.y + 'px'
+    }),on:{"mousedown":_vm.onCatalogueMouseDown,"touchstart":_vm.onCatalogueTouchStart,"touchmove":_vm.onCatalogueTouchMove,"touchend":_vm.onCatalogueTouchEnd,"click":function($event){$event.stopPropagation();}}},[_c('button',{staticClass:"btn btn-catalogue",on:{"click":_vm.openCatalogue}},[_c('span',{staticClass:"catalogue-text"},[_vm._v("目录")])])]),_c('div',{staticClass:"zoom-hint",class:{ 'show': _vm.zoomScale !== 1 }},[_c('div',{staticClass:"zoom-info"},[_c('span',[_vm._v("缩放: "+_vm._s(Math.round(_vm.zoomScale * 100))+"%")]),_c('button',{staticClass:"btn-reset-zoom",on:{"click":_vm.resetZoom}},[_vm._v("重置")])])]),(_vm.loading)?_c('div',{staticClass:"loading-overlay"},[_vm._m(0)]):_vm._e(),(_vm.error && !_vm.loading)?_c('div',{staticClass:"error-container"},[_c('div',{staticClass:"error-content"},[_c('div',{staticClass:"error-icon"},[_vm._v("⚠️")]),_c('h3',[_vm._v("加载失败")]),_c('p',[_vm._v(_vm._s(_vm.error.message || '网络连接异常，请检查网络后重试'))]),_c('button',{staticClass:"retry-btn",on:{"click":_vm.fetchBooksData}},[_c('span',{staticClass:"retry-icon"},[_vm._v("🔄")]),_vm._v(" 重新加载 ")])])]):_vm._e(),(_vm.booksData && !_vm.loading && !_vm.error)?_c('div',{staticClass:"success-toast",class:{ 'show': _vm.showSuccessToast }},[_vm._v(" 书籍加载完成 ")]):_vm._e(),_c('book-catalogue-drawer',{attrs:{"book-id":_vm.bookId,"catalogue":_vm.catalogue,"loading":_vm.catalogueLoading},on:{"catalogue-click":_vm.onCatalogueClick,"page-jump":_vm.onPageJump,"Focus":_vm.onFocus,"fetch-catalogue":_vm.onFetchCatalogue},model:{value:(_vm.showCatalogueDrawer),callback:function ($$v) {_vm.showCatalogueDrawer=$$v},expression:"showCatalogueDrawer"}})],1)
+}
+var staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"loading-container"},[_c('div',{staticClass:"loading-spinner"},[_c('div',{staticClass:"spinner-ring"}),_c('div',{staticClass:"spinner-ring"}),_c('div',{staticClass:"spinner-ring"})]),_c('div',{staticClass:"loading-text"},[_c('h3',[_vm._v("正在加载书籍")]),_c('p',[_vm._v("请稍候，正在获取精彩内容...")]),_c('div',{staticClass:"loading-progress"},[_c('div',{staticClass:"progress-bar"})])])])
+}]
+
+
+;// ./src/components/BookReader.vue?vue&type=template&id=eaca7004&scoped=true
+
+;// ./node_modules/rematrix/dist/rematrix.es.js
+/*! @license Rematrix v0.7.2
+
+	Copyright 2021 Julian Lloyd.
+
+	Permission is hereby granted, free of charge, to any person obtaining a copy
+	of this software and associated documentation files (the "Software"), to deal
+	in the Software without restriction, including without limitation the rights
+	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+	copies of the Software, and to permit persons to whom the Software is
+	furnished to do so, subject to the following conditions:
+
+	The above copyright notice and this permission notice shall be included in
+	all copies or substantial portions of the Software.
+
+	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+	THE SOFTWARE.
+*/
+function format(source) {
+  if (source && source.constructor === Array) {
+    var values = source
+      .filter(function (value) { return typeof value === 'number'; })
+      .filter(function (value) { return !isNaN(value); });
+
+    if (source.length === 6 && values.length === 6) {
+      var matrix = identity();
+      matrix[0] = values[0];
+      matrix[1] = values[1];
+      matrix[4] = values[2];
+      matrix[5] = values[3];
+      matrix[12] = values[4];
+      matrix[13] = values[5];
+      return matrix
+    } else if (source.length === 16 && values.length === 16) {
+      return source
+    }
+  }
+  throw new TypeError('Expected a `number[]` with length 6 or 16.')
+}
+
+function fromString(source) {
+  if (typeof source === 'string') {
+    var match = source.match(/matrix(3d)?\(([^)]+)\)/);
+    if (match) {
+      var raw = match[2].split(',').map(parseFloat);
+      return format(raw)
+    }
+    if (source === 'none' || source === '') {
+      return identity()
+    }
+  }
+  throw new TypeError('Expected a string containing `matrix()` or `matrix3d()')
+}
+
+function identity() {
+  var matrix = [];
+  for (var i = 0; i < 16; i++) {
+    i % 5 == 0 ? matrix.push(1) : matrix.push(0);
+  }
+  return matrix
+}
+
+function inverse(source) {
+  var m = format(source);
+
+  var s0 = m[0] * m[5] - m[4] * m[1];
+  var s1 = m[0] * m[6] - m[4] * m[2];
+  var s2 = m[0] * m[7] - m[4] * m[3];
+  var s3 = m[1] * m[6] - m[5] * m[2];
+  var s4 = m[1] * m[7] - m[5] * m[3];
+  var s5 = m[2] * m[7] - m[6] * m[3];
+
+  var c5 = m[10] * m[15] - m[14] * m[11];
+  var c4 = m[9] * m[15] - m[13] * m[11];
+  var c3 = m[9] * m[14] - m[13] * m[10];
+  var c2 = m[8] * m[15] - m[12] * m[11];
+  var c1 = m[8] * m[14] - m[12] * m[10];
+  var c0 = m[8] * m[13] - m[12] * m[9];
+
+  var determinant = 1 / (s0 * c5 - s1 * c4 + s2 * c3 + s3 * c2 - s4 * c1 + s5 * c0);
+
+  if (isNaN(determinant) || determinant === Infinity) {
+    throw new Error('Inverse determinant attempted to divide by zero.')
+  }
+
+  return [
+    (m[5] * c5 - m[6] * c4 + m[7] * c3) * determinant,
+    (-m[1] * c5 + m[2] * c4 - m[3] * c3) * determinant,
+    (m[13] * s5 - m[14] * s4 + m[15] * s3) * determinant,
+    (-m[9] * s5 + m[10] * s4 - m[11] * s3) * determinant,
+
+    (-m[4] * c5 + m[6] * c2 - m[7] * c1) * determinant,
+    (m[0] * c5 - m[2] * c2 + m[3] * c1) * determinant,
+    (-m[12] * s5 + m[14] * s2 - m[15] * s1) * determinant,
+    (m[8] * s5 - m[10] * s2 + m[11] * s1) * determinant,
+
+    (m[4] * c4 - m[5] * c2 + m[7] * c0) * determinant,
+    (-m[0] * c4 + m[1] * c2 - m[3] * c0) * determinant,
+    (m[12] * s4 - m[13] * s2 + m[15] * s0) * determinant,
+    (-m[8] * s4 + m[9] * s2 - m[11] * s0) * determinant,
+
+    (-m[4] * c3 + m[5] * c1 - m[6] * c0) * determinant,
+    (m[0] * c3 - m[1] * c1 + m[2] * c0) * determinant,
+    (-m[12] * s3 + m[13] * s1 - m[14] * s0) * determinant,
+    (m[8] * s3 - m[9] * s1 + m[10] * s0) * determinant ]
+}
+
+function multiply(matrixA, matrixB) {
+  var fma = format(matrixA);
+  var fmb = format(matrixB);
+  var product = [];
+
+  for (var i = 0; i < 4; i++) {
+    var row = [fma[i], fma[i + 4], fma[i + 8], fma[i + 12]];
+    for (var j = 0; j < 4; j++) {
+      var k = j * 4;
+      var col = [fmb[k], fmb[k + 1], fmb[k + 2], fmb[k + 3]];
+      var result = row[0] * col[0] + row[1] * col[1] + row[2] * col[2] + row[3] * col[3];
+
+      product[i + k] = result;
+    }
+  }
+
+  return product
+}
+
+function perspective(distance) {
+  var matrix = identity();
+  matrix[11] = -1 / distance;
+  return matrix
+}
+
+function rotate(angle) {
+  return rotateZ(angle)
+}
+
+function rotateX(angle) {
+  var theta = (Math.PI / 180) * angle;
+  var matrix = identity();
+
+  matrix[5] = matrix[10] = Math.cos(theta);
+  matrix[6] = matrix[9] = Math.sin(theta);
+  matrix[9] *= -1;
+
+  return matrix
+}
+
+function rotateY(angle) {
+  var theta = (Math.PI / 180) * angle;
+  var matrix = identity();
+
+  matrix[0] = matrix[10] = Math.cos(theta);
+  matrix[2] = matrix[8] = Math.sin(theta);
+  matrix[2] *= -1;
+
+  return matrix
+}
+
+function rotateZ(angle) {
+  var theta = (Math.PI / 180) * angle;
+  var matrix = identity();
+
+  matrix[0] = matrix[5] = Math.cos(theta);
+  matrix[1] = matrix[4] = Math.sin(theta);
+  matrix[4] *= -1;
+
+  return matrix
+}
+
+function scale(scalar, scalarY) {
+  var matrix = identity();
+
+  matrix[0] = scalar;
+  matrix[5] = typeof scalarY === 'number' ? scalarY : scalar;
+
+  return matrix
+}
+
+function scaleX(scalar) {
+  var matrix = identity();
+  matrix[0] = scalar;
+  return matrix
+}
+
+function scaleY(scalar) {
+  var matrix = identity();
+  matrix[5] = scalar;
+  return matrix
+}
+
+function scaleZ(scalar) {
+  var matrix = identity();
+  matrix[10] = scalar;
+  return matrix
+}
+
+function skew(angleX, angleY) {
+  var thetaX = (Math.PI / 180) * angleX;
+  var matrix = identity();
+
+  matrix[4] = Math.tan(thetaX);
+
+  if (angleY) {
+    var thetaY = (Math.PI / 180) * angleY;
+    matrix[1] = Math.tan(thetaY);
+  }
+
+  return matrix
+}
+
+function skewX(angle) {
+  var theta = (Math.PI / 180) * angle;
+  var matrix = identity();
+
+  matrix[4] = Math.tan(theta);
+
+  return matrix
+}
+
+function skewY(angle) {
+  var theta = (Math.PI / 180) * angle;
+  var matrix = identity();
+
+  matrix[1] = Math.tan(theta);
+
+  return matrix
+}
+
+function rematrix_es_toString(source) {
+  return ("matrix3d(" + (format(source).join(', ')) + ")")
+}
+
+function translate(distanceX, distanceY) {
+  var matrix = identity();
+  matrix[12] = distanceX;
+
+  if (distanceY) {
+    matrix[13] = distanceY;
+  }
+
+  return matrix
+}
+
+function translate3d(distanceX, distanceY, distanceZ) {
+  var matrix = identity();
+  if (distanceX !== undefined && distanceY !== undefined && distanceZ !== undefined) {
+    matrix[12] = distanceX;
+    matrix[13] = distanceY;
+    matrix[14] = distanceZ;
+  }
+  return matrix
+}
+
+function translateX(distance) {
+  var matrix = identity();
+  matrix[12] = distance;
+  return matrix
+}
+
+function translateY(distance) {
+  var matrix = identity();
+  matrix[13] = distance;
+  return matrix
+}
+
+function translateZ(distance) {
+  var matrix = identity();
+  matrix[14] = distance;
+  return matrix
+}
+
+
+
+;// ./node_modules/flipbook-vue/dist/vue2/flipbook.mjs
+/*!
+ * @license
+ * flipbook-vue v1.0.0-beta.4
+ * Copyright © 2023 Takeshi Sone.
+ * Released under the MIT License.
+ */
+
+
+
+var Matrix = /*@__PURE__*/(function () {
+  function Matrix(arg) {
+    if (arg) {
+      if (arg.m) {
+        this.m = [].concat( arg.m );
+      } else {
+        this.m = [].concat( arg );
+      }
+    } else {
+      this.m = identity();
+    }
+  }
+
+  Matrix.prototype.clone = function clone () {
+    return new Matrix(this);
+  };
+
+  Matrix.prototype.multiply = function multiply$1 (m) {
+    return this.m = multiply(this.m, m);
+  };
+
+  Matrix.prototype.perspective = function perspective$1 (d) {
+    return this.multiply(perspective(d));
+  };
+
+  Matrix.prototype.transformX = function transformX (x) {
+    return (x * this.m[0] + this.m[12]) / (x * this.m[3] + this.m[15]);
+  };
+
+  Matrix.prototype.translate = function translate$1 (x, y) {
+    return this.multiply(translate(x, y));
+  };
+
+  Matrix.prototype.translate3d = function translate3d$1 (x, y, z) {
+    return this.multiply(translate3d(x, y, z));
+  };
+
+  Matrix.prototype.rotateY = function rotateY$1 (deg) {
+    return this.multiply(rotateY(deg));
+  };
+
+  Matrix.prototype.toString = function toString$1 () {
+    return rematrix_es_toString(this.m);
+  };
+
+  return Matrix;
+}());
+
+var spinner = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22500%22%20height%3D%22500%22%20viewBox%3D%220%200%20500%20500%22%20fill%3D%22transparent%22%20style%3D%22background-color%3A%20%23fff%22%3E%20%20%3Ccircle%20%20%20%20cx%3D%22250%22%20%20%20%20cy%3D%22250%22%20%20%20%20r%3D%2248%22%20%20%20%20stroke%3D%22%23333%22%20%20%20%20stroke-width%3D%222%22%20%20%20%20stroke-dasharray%3D%22271%2030%22%20%20%3E%20%20%20%20%3CanimateTransform%20%20%20%20%20%20attributeName%3D%22transform%22%20%20%20%20%20%20attributeType%3D%22XML%22%20%20%20%20%20%20type%3D%22rotate%22%20%20%20%20%20%20from%3D%220%20250%20250%22%20%20%20%20%20%20to%3D%22360%20250%20250%22%20%20%20%20%20%20dur%3D%221s%22%20%20%20%20%20%20repeatCount%3D%22indefinite%22%20%20%20%20%2F%3E%20%20%3C%2Fcircle%3E%3C%2Fsvg%3E";
+
+var easeIn, easeInOut, easeOut;
+
+easeIn = function(x) {
+  return Math.pow(x, 2);
+};
+
+easeOut = function(x) {
+  return 1 - easeIn(1 - x);
+};
+
+easeInOut = function(x) {
+  if (x < 0.5) {
+    return easeIn(x * 2) / 2;
+  } else {
+    return 0.5 + easeOut((x - 0.5) * 2) / 2;
+  }
+};
+
+var script = {
+  props: {
+    pages: {
+      type: Array,
+      required: true
+    },
+    pagesHiRes: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    flipDuration: {
+      type: Number,
+      default: 1000
+    },
+    zoomDuration: {
+      type: Number,
+      default: 500
+    },
+    zooms: {
+      type: Array,
+      default: function() {
+        return [1, 2, 4];
+      }
+    },
+    perspective: {
+      type: Number,
+      default: 2400
+    },
+    nPolygons: {
+      type: Number,
+      default: 10
+    },
+    ambient: {
+      type: Number,
+      default: 0.4
+    },
+    gloss: {
+      type: Number,
+      default: 0.6
+    },
+    swipeMin: {
+      type: Number,
+      default: 3
+    },
+    singlePage: {
+      type: Boolean,
+      default: false
+    },
+    forwardDirection: {
+      validator: function(val) {
+        return val === 'right' || val === 'left';
+      },
+      default: 'right'
+    },
+    centering: {
+      type: Boolean,
+      default: true
+    },
+    startPage: {
+      type: Number,
+      default: null
+    },
+    loadingImage: {
+      type: String,
+      default: spinner
+    },
+    clickToZoom: {
+      type: Boolean,
+      default: true
+    },
+    dragToFlip: {
+      type: Boolean,
+      default: true
+    },
+    wheel: {
+      type: String,
+      default: 'scroll'
+    }
+  },
+  data: function() {
+    return {
+      viewWidth: 0,
+      viewHeight: 0,
+      imageWidth: null,
+      imageHeight: null,
+      displayedPages: 1,
+      nImageLoad: 0,
+      nImageLoadTrigger: 0,
+      imageLoadCallback: null,
+      currentPage: 0,
+      firstPage: 0,
+      secondPage: 1,
+      zoomIndex: 0,
+      zoom: 1,
+      zooming: false,
+      touchStartX: null,
+      touchStartY: null,
+      maxMove: 0,
+      activeCursor: null,
+      hasTouchEvents: false,
+      hasPointerEvents: false,
+      minX: 2e308,
+      maxX: -2e308,
+      preloadedImages: {},
+      flip: {
+        progress: 0,
+        direction: null,
+        frontImage: null,
+        backImage: null,
+        auto: false,
+        opacity: 1
+      },
+      currentCenterOffset: null,
+      animatingCenter: false,
+      startScrollLeft: 0,
+      startScrollTop: 0,
+      scrollLeft: 0,
+      scrollTop: 0,
+      loadedImages: {}
+    };
+  },
+  computed: {
+    IE: function() {
+      return typeof navigator !== 'undefined' && /Trident/.test(navigator.userAgent);
+    },
+    canFlipLeft: function() {
+      if (this.forwardDirection === 'left') {
+        return this.canGoForward;
+      } else {
+        return this.canGoBack;
+      }
+    },
+    canFlipRight: function() {
+      if (this.forwardDirection === 'right') {
+        return this.canGoForward;
+      } else {
+        return this.canGoBack;
+      }
+    },
+    canZoomIn: function() {
+      return !this.zooming && this.zoomIndex < this.zooms_.length - 1;
+    },
+    canZoomOut: function() {
+      return !this.zooming && this.zoomIndex > 0;
+    },
+    numPages: function() {
+      if (this.pages[0] === null) {
+        return this.pages.length - 1;
+      } else {
+        return this.pages.length;
+      }
+    },
+    page: function() {
+      if (this.pages[0] !== null) {
+        return this.currentPage + 1;
+      } else {
+        return Math.max(1, this.currentPage);
+      }
+    },
+    zooms_: function() {
+      return this.zooms || [1];
+    },
+    canGoForward: function() {
+      return !this.flip.direction && this.currentPage < this.pages.length - this.displayedPages;
+    },
+    canGoBack: function() {
+      return !this.flip.direction && this.currentPage >= this.displayedPages && !(this.displayedPages === 1 && !this.pageUrl(this.firstPage - 1));
+    },
+    leftPage: function() {
+      if (this.forwardDirection === 'right' || this.displayedPages === 1) {
+        return this.firstPage;
+      } else {
+        return this.secondPage;
+      }
+    },
+    rightPage: function() {
+      if (this.forwardDirection === 'left') {
+        return this.firstPage;
+      } else {
+        return this.secondPage;
+      }
+    },
+    showLeftPage: function() {
+      return this.pageUrl(this.leftPage);
+    },
+    showRightPage: function() {
+      return this.pageUrl(this.rightPage) && this.displayedPages === 2;
+    },
+    cursor: function() {
+      if (this.activeCursor) {
+        return this.activeCursor;
+      } else if (this.IE) {
+        return 'auto';
+      } else if (this.clickToZoom && this.canZoomIn) {
+        return 'zoom-in';
+      } else if (this.clickToZoom && this.canZoomOut) {
+        return 'zoom-out';
+      } else if (this.dragToFlip) {
+        return 'grab';
+      } else {
+        return 'auto';
+      }
+    },
+    pageScale: function() {
+      var scale, vw, xScale, yScale;
+      vw = this.viewWidth / this.displayedPages;
+      xScale = vw / this.imageWidth;
+      yScale = this.viewHeight / this.imageHeight;
+      scale = xScale < yScale ? xScale : yScale;
+      if (scale < 1) {
+        return scale;
+      } else {
+        return 1;
+      }
+    },
+    pageWidth: function() {
+      return Math.round(this.imageWidth * this.pageScale);
+    },
+    pageHeight: function() {
+      return Math.round(this.imageHeight * this.pageScale);
+    },
+    xMargin: function() {
+      return (this.viewWidth - this.pageWidth * this.displayedPages) / 2;
+    },
+    yMargin: function() {
+      return (this.viewHeight - this.pageHeight) / 2;
+    },
+    polygonWidth: function() {
+      var w;
+      w = this.pageWidth / this.nPolygons;
+      w = Math.ceil(w + 1 / this.zoom);
+      return w + 'px';
+    },
+    polygonHeight: function() {
+      return this.pageHeight + 'px';
+    },
+    polygonBgSize: function() {
+      return ((this.pageWidth) + "px " + (this.pageHeight) + "px");
+    },
+    polygonArray: function() {
+      return this.makePolygonArray('front').concat(this.makePolygonArray('back'));
+    },
+    boundingLeft: function() {
+      var x;
+      if (this.displayedPages === 1) {
+        return this.xMargin;
+      } else {
+        x = this.pageUrl(this.leftPage) ? this.xMargin : this.viewWidth / 2;
+        if (x < this.minX) {
+          return x;
+        } else {
+          return this.minX;
+        }
+      }
+    },
+    boundingRight: function() {
+      var x;
+      if (this.displayedPages === 1) {
+        return this.viewWidth - this.xMargin;
+      } else {
+        x = this.pageUrl(this.rightPage) ? this.viewWidth - this.xMargin : this.viewWidth / 2;
+        if (x > this.maxX) {
+          return x;
+        } else {
+          return this.maxX;
+        }
+      }
+    },
+    centerOffset: function() {
+      var retval;
+      retval = this.centering ? Math.round(this.viewWidth / 2 - (this.boundingLeft + this.boundingRight) / 2) : 0;
+      if (this.currentCenterOffset === null && this.imageWidth !== null) {
+        this.currentCenterOffset = retval;
+      }
+      return retval;
+    },
+    centerOffsetSmoothed: function() {
+      return Math.round(this.currentCenterOffset);
+    },
+    dragToScroll: function() {
+      return !this.hasTouchEvents;
+    },
+    scrollLeftMin: function() {
+      var w;
+      w = (this.boundingRight - this.boundingLeft) * this.zoom;
+      if (w < this.viewWidth) {
+        return (this.boundingLeft + this.centerOffsetSmoothed) * this.zoom - (this.viewWidth - w) / 2;
+      } else {
+        return (this.boundingLeft + this.centerOffsetSmoothed) * this.zoom;
+      }
+    },
+    scrollLeftMax: function() {
+      var w;
+      w = (this.boundingRight - this.boundingLeft) * this.zoom;
+      if (w < this.viewWidth) {
+        return (this.boundingLeft + this.centerOffsetSmoothed) * this.zoom - (this.viewWidth - w) / 2;
+      } else {
+        return (this.boundingRight + this.centerOffsetSmoothed) * this.zoom - this.viewWidth;
+      }
+    },
+    scrollTopMin: function() {
+      var h;
+      h = this.pageHeight * this.zoom;
+      if (h < this.viewHeight) {
+        return this.yMargin * this.zoom - (this.viewHeight - h) / 2;
+      } else {
+        return this.yMargin * this.zoom;
+      }
+    },
+    scrollTopMax: function() {
+      var h;
+      h = this.pageHeight * this.zoom;
+      if (h < this.viewHeight) {
+        return this.yMargin * this.zoom - (this.viewHeight - h) / 2;
+      } else {
+        return (this.yMargin + this.pageHeight) * this.zoom - this.viewHeight;
+      }
+    },
+    scrollLeftLimited: function() {
+      return Math.min(this.scrollLeftMax, Math.max(this.scrollLeftMin, this.scrollLeft));
+    },
+    scrollTopLimited: function() {
+      return Math.min(this.scrollTopMax, Math.max(this.scrollTopMin, this.scrollTop));
+    }
+  },
+  mounted: function() {
+    window.addEventListener('resize', this.onResize, {
+      passive: true
+    });
+    this.onResize();
+    this.zoom = this.zooms_[0];
+    return this.goToPage(this.startPage);
+  },
+  beforeDestroy: function() {
+    return window.removeEventListener('resize', this.onResize, {
+      passive: true
+    });
+  },
+  methods: {
+    onResize: function() {
+      var viewport;
+      viewport = this.$refs.viewport;
+      if (!viewport) {
+        return;
+      }
+      this.viewWidth = viewport.clientWidth;
+      this.viewHeight = viewport.clientHeight;
+      this.displayedPages = this.viewWidth > this.viewHeight && !this.singlePage ? 2 : 1;
+      if (this.displayedPages === 2) {
+        this.currentPage &= ~1;
+      }
+      this.fixFirstPage();
+      this.minX = 2e308;
+      return this.maxX = -2e308;
+    },
+    fixFirstPage: function() {
+      if (this.displayedPages === 1 && this.currentPage === 0 && this.pages.length && !this.pageUrl(0)) {
+        return this.currentPage++;
+      }
+    },
+    pageUrl: function(page, hiRes) {
+      if ( hiRes === void 0 ) hiRes = false;
+
+      var url;
+      if (hiRes && this.zoom > 1 && !this.zooming) {
+        url = this.pagesHiRes[page];
+        if (url) {
+          return url;
+        }
+      }
+      return this.pages[page] || null;
+    },
+    pageUrlLoading: function(page, hiRes) {
+      if ( hiRes === void 0 ) hiRes = false;
+
+      var url;
+      url = this.pageUrl(page, hiRes);
+      if (hiRes && this.zoom > 1 && !this.zooming) {
+        // High-res image doesn't use 'loading'
+        return url;
+      }
+      return url && this.loadImage(url);
+    },
+    flipLeft: function() {
+      if (!this.canFlipLeft) {
+        return;
+      }
+      return this.flipStart('left', true);
+    },
+    flipRight: function() {
+      if (!this.canFlipRight) {
+        return;
+      }
+      return this.flipStart('right', true);
+    },
+    makePolygonArray: function(face) {
+      var bgPos, dRadian, dRotate, direction, i, image, j, lighting, m, originRight, pageMatrix, pageRotation, pageX, polygonWidth, progress, rad, radian, radius, ref, results, rotate, theta, x, x0, x1, z;
+      if (!this.flip.direction) {
+        return [];
+      }
+      progress = this.flip.progress;
+      direction = this.flip.direction;
+      if (this.displayedPages === 1 && direction !== this.forwardDirection) {
+        progress = 1 - progress;
+        direction = this.forwardDirection;
+      }
+      this.flip.opacity = this.displayedPages === 1 && progress > .7 ? 1 - (progress - .7) / .3 : 1;
+      image = face === 'front' ? this.flip.frontImage : this.flip.backImage;
+      polygonWidth = this.pageWidth / this.nPolygons;
+      pageX = this.xMargin;
+      originRight = false;
+      if (this.displayedPages === 1) {
+        if (this.forwardDirection === 'right') {
+          if (face === 'back') {
+            originRight = true;
+            pageX = this.xMargin - this.pageWidth;
+          }
+        } else {
+          if (direction === 'left') {
+            if (face === 'back') {
+              pageX = this.pageWidth - this.xMargin;
+            } else {
+              originRight = true;
+            }
+          } else {
+            if (face === 'front') {
+              pageX = this.pageWidth - this.xMargin;
+            } else {
+              originRight = true;
+            }
+          }
+        }
+      } else {
+        if (direction === 'left') {
+          if (face === 'back') {
+            pageX = this.viewWidth / 2;
+          } else {
+            originRight = true;
+          }
+        } else {
+          if (face === 'front') {
+            pageX = this.viewWidth / 2;
+          } else {
+            originRight = true;
+          }
+        }
+      }
+      pageMatrix = new Matrix();
+      pageMatrix.translate(this.viewWidth / 2);
+      pageMatrix.perspective(this.perspective);
+      pageMatrix.translate(-this.viewWidth / 2);
+      pageMatrix.translate(pageX, this.yMargin);
+      pageRotation = 0;
+      if (progress > 0.5) {
+        pageRotation = -(progress - 0.5) * 2 * 180;
+      }
+      if (direction === 'left') {
+        pageRotation = -pageRotation;
+      }
+      if (face === 'back') {
+        pageRotation += 180;
+      }
+      if (pageRotation) {
+        if (originRight) {
+          pageMatrix.translate(this.pageWidth);
+        }
+        pageMatrix.rotateY(pageRotation);
+        if (originRight) {
+          pageMatrix.translate(-this.pageWidth);
+        }
+      }
+      if (progress < 0.5) {
+        theta = progress * 2 * Math.PI;
+      } else {
+        theta = (1 - (progress - 0.5) * 2) * Math.PI;
+      }
+      if (theta === 0) {
+        theta = 1e-9;
+      }
+      radius = this.pageWidth / theta;
+      radian = 0;
+      dRadian = theta / this.nPolygons;
+      rotate = dRadian / 2 / Math.PI * 180;
+      dRotate = dRadian / Math.PI * 180;
+      if (originRight) {
+        rotate = -theta / Math.PI * 180 + dRotate / 2;
+      }
+      if (face === 'back') {
+        rotate = -rotate;
+        dRotate = -dRotate;
+      }
+      this.minX = 2e308;
+      this.maxX = -2e308;
+      results = [];
+      for (i = j = 0, ref = this.nPolygons; (0 <= ref ? j < ref : j > ref); i = 0 <= ref ? ++j : --j) {
+        bgPos = (i / (this.nPolygons - 1) * 100) + "% 0px";
+        m = pageMatrix.clone();
+        rad = originRight ? theta - radian : radian;
+        x = Math.sin(rad) * radius;
+        if (originRight) {
+          x = this.pageWidth - x;
+        }
+        z = (1 - Math.cos(rad)) * radius;
+        if (face === 'back') {
+          z = -z;
+        }
+        m.translate3d(x, 0, z);
+        m.rotateY(-rotate);
+        x0 = m.transformX(0);
+        x1 = m.transformX(polygonWidth);
+        this.maxX = Math.max(Math.max(x0, x1), this.maxX);
+        this.minX = Math.min(Math.min(x0, x1), this.minX);
+        lighting = this.computeLighting(pageRotation - rotate, dRotate);
+        radian += dRadian;
+        rotate += dRotate;
+        results.push([face + i, image, lighting, bgPos, m.toString(), Math.abs(Math.round(z))]);
+      }
+      return results;
+    },
+    computeLighting: function(rot, dRotate) {
+      var DEG, POW, blackness, diffuse, gradients, lightingPoints, specular;
+      gradients = [];
+      lightingPoints = [-0.5, -0.25, 0, 0.25, 0.5];
+      if (this.ambient < 1) {
+        blackness = 1 - this.ambient;
+        diffuse = lightingPoints.map(function (d) {
+          return (1 - Math.cos((rot - dRotate * d) / 180 * Math.PI)) * blackness;
+        });
+        gradients.push(("linear-gradient(to right,\n  rgba(0, 0, 0, " + (diffuse[0]) + "),\n  rgba(0, 0, 0, " + (diffuse[1]) + ") 25%,\n  rgba(0, 0, 0, " + (diffuse[2]) + ") 50%,\n  rgba(0, 0, 0, " + (diffuse[3]) + ") 75%,\n  rgba(0, 0, 0, " + (diffuse[4]) + "))"));
+      }
+      if (this.gloss > 0 && !this.IE) {
+        DEG = 30;
+        POW = 200;
+        specular = lightingPoints.map(function (d) {
+          return Math.max(Math.pow( Math.cos((rot + DEG - dRotate * d) / 180 * Math.PI), POW ), Math.pow( Math.cos((rot - DEG - dRotate * d) / 180 * Math.PI), POW ));
+        });
+        gradients.push(("linear-gradient(to right,\n  rgba(255, 255, 255, " + (specular[0] * this.gloss) + "),\n  rgba(255, 255, 255, " + (specular[1] * this.gloss) + ") 25%,\n  rgba(255, 255, 255, " + (specular[2] * this.gloss) + ") 50%,\n  rgba(255, 255, 255, " + (specular[3] * this.gloss) + ") 75%,\n  rgba(255, 255, 255, " + (specular[4] * this.gloss) + "))"));
+      }
+      return gradients.join(',');
+    },
+    flipStart: function(direction, auto) {
+      var this$1$1 = this;
+
+      if (direction !== this.forwardDirection) {
+        if (this.displayedPages === 1) {
+          this.flip.frontImage = this.pageUrl(this.currentPage - 1);
+          this.flip.backImage = null;
+        } else {
+          this.flip.frontImage = this.pageUrl(this.firstPage);
+          this.flip.backImage = this.pageUrl(this.currentPage - this.displayedPages + 1);
+        }
+      } else {
+        if (this.displayedPages === 1) {
+          this.flip.frontImage = this.pageUrl(this.currentPage);
+          this.flip.backImage = null;
+        } else {
+          this.flip.frontImage = this.pageUrl(this.secondPage);
+          this.flip.backImage = this.pageUrl(this.currentPage + this.displayedPages);
+        }
+      }
+      this.flip.direction = direction;
+      this.flip.progress = 0;
+      return requestAnimationFrame(function () {
+        return requestAnimationFrame(function () {
+          if (this$1$1.flip.direction !== this$1$1.forwardDirection) {
+            if (this$1$1.displayedPages === 2) {
+              this$1$1.firstPage = this$1$1.currentPage - this$1$1.displayedPages;
+            }
+          } else {
+            if (this$1$1.displayedPages === 1) {
+              this$1$1.firstPage = this$1$1.currentPage + this$1$1.displayedPages;
+            } else {
+              this$1$1.secondPage = this$1$1.currentPage + 1 + this$1$1.displayedPages;
+            }
+          }
+          if (auto) {
+            return this$1$1.flipAuto(true);
+          }
+        });
+      });
+    },
+    flipAuto: function(ease) {
+      var this$1$1 = this;
+
+      var animate, duration, startRatio, t0;
+      t0 = Date.now();
+      duration = this.flipDuration * (1 - this.flip.progress);
+      startRatio = this.flip.progress;
+      this.flip.auto = true;
+      this.$emit(("flip-" + (this.flip.direction) + "-start"), this.page);
+      animate = function () {
+        return requestAnimationFrame(function () {
+          var ratio, t;
+          t = Date.now() - t0;
+          ratio = startRatio + t / duration;
+          if (ratio > 1) {
+            ratio = 1;
+          }
+          this$1$1.flip.progress = ease ? easeInOut(ratio) : ratio;
+          if (ratio < 1) {
+            return animate();
+          } else {
+            if (this$1$1.flip.direction !== this$1$1.forwardDirection) {
+              this$1$1.currentPage -= this$1$1.displayedPages;
+            } else {
+              this$1$1.currentPage += this$1$1.displayedPages;
+            }
+            this$1$1.$emit(("flip-" + (this$1$1.flip.direction) + "-end"), this$1$1.page);
+            if (this$1$1.displayedPages === 1 && this$1$1.flip.direction === this$1$1.forwardDirection) {
+              this$1$1.flip.direction = null;
+            } else {
+              this$1$1.onImageLoad(1, function () {
+                return this$1$1.flip.direction = null;
+              });
+            }
+            return this$1$1.flip.auto = false;
+          }
+        });
+      };
+      return animate();
+    },
+    flipRevert: function() {
+      var this$1$1 = this;
+
+      var animate, duration, startRatio, t0;
+      t0 = Date.now();
+      duration = this.flipDuration * this.flip.progress;
+      startRatio = this.flip.progress;
+      this.flip.auto = true;
+      animate = function () {
+        return requestAnimationFrame(function () {
+          var ratio, t;
+          t = Date.now() - t0;
+          ratio = startRatio - startRatio * t / duration;
+          if (ratio < 0) {
+            ratio = 0;
+          }
+          this$1$1.flip.progress = ratio;
+          if (ratio > 0) {
+            return animate();
+          } else {
+            this$1$1.firstPage = this$1$1.currentPage;
+            this$1$1.secondPage = this$1$1.currentPage + 1;
+            if (this$1$1.displayedPages === 1 && this$1$1.flip.direction !== this$1$1.forwardDirection) {
+              this$1$1.flip.direction = null;
+            } else {
+              this$1$1.onImageLoad(1, function () {
+                return this$1$1.flip.direction = null;
+              });
+            }
+            return this$1$1.flip.auto = false;
+          }
+        });
+      };
+      return animate();
+    },
+    onImageLoad: function(trigger, cb) {
+      this.nImageLoad = 0;
+      this.nImageLoadTrigger = trigger;
+      return this.imageLoadCallback = cb;
+    },
+    didLoadImage: function(ev) {
+      if (this.imageWidth === null) {
+        this.imageWidth = (ev.target || ev.path[0]).naturalWidth;
+        this.imageHeight = (ev.target || ev.path[0]).naturalHeight;
+        this.preloadImages();
+      }
+      if (!this.imageLoadCallback) {
+        return;
+      }
+      if (++this.nImageLoad >= this.nImageLoadTrigger) {
+        this.imageLoadCallback();
+        return this.imageLoadCallback = null;
+      }
+    },
+    zoomIn: function(zoomAt) {
+      if ( zoomAt === void 0 ) zoomAt = null;
+
+      if (!this.canZoomIn) {
+        return;
+      }
+      this.zoomIndex += 1;
+      return this.zoomTo(this.zooms_[this.zoomIndex], zoomAt);
+    },
+    zoomOut: function(zoomAt) {
+      if ( zoomAt === void 0 ) zoomAt = null;
+
+      if (!this.canZoomOut) {
+        return;
+      }
+      this.zoomIndex -= 1;
+      return this.zoomTo(this.zooms_[this.zoomIndex], zoomAt);
+    },
+    zoomTo: function(zoom, zoomAt) {
+      var this$1$1 = this;
+      if ( zoomAt === void 0 ) zoomAt = null;
+
+      var animate, containerFixedX, containerFixedY, end, endX, endY, fixedX, fixedY, rect, start, startX, startY, t0, viewport;
+      viewport = this.$refs.viewport;
+      if (zoomAt) {
+        rect = viewport.getBoundingClientRect();
+        fixedX = zoomAt.pageX - rect.left;
+        fixedY = zoomAt.pageY - rect.top;
+      } else {
+        fixedX = viewport.clientWidth / 2;
+        fixedY = viewport.clientHeight / 2;
+      }
+      start = this.zoom;
+      end = zoom;
+      startX = viewport.scrollLeft;
+      startY = viewport.scrollTop;
+      containerFixedX = fixedX + startX;
+      containerFixedY = fixedY + startY;
+      endX = containerFixedX / start * end - fixedX;
+      endY = containerFixedY / start * end - fixedY;
+      t0 = Date.now();
+      this.zooming = true;
+      this.$emit('zoom-start', zoom);
+      animate = function () {
+        return requestAnimationFrame(function () {
+          var ratio, t;
+          t = Date.now() - t0;
+          ratio = t / this$1$1.zoomDuration;
+          if (ratio > 1 || this$1$1.IE) {
+            ratio = 1;
+          }
+          ratio = easeInOut(ratio);
+          this$1$1.zoom = start + (end - start) * ratio;
+          this$1$1.scrollLeft = startX + (endX - startX) * ratio;
+          this$1$1.scrollTop = startY + (endY - startY) * ratio;
+          if (t < this$1$1.zoomDuration) {
+            return animate();
+          } else {
+            this$1$1.$emit('zoom-end', zoom);
+            this$1$1.zooming = false;
+            this$1$1.zoom = zoom;
+            this$1$1.scrollLeft = endX;
+            return this$1$1.scrollTop = endY;
+          }
+        });
+      };
+      animate();
+      if (end > 1) {
+        return this.preloadImages(true);
+      }
+    },
+    zoomAt: function(zoomAt) {
+      this.zoomIndex = (this.zoomIndex + 1) % this.zooms_.length;
+      return this.zoomTo(this.zooms_[this.zoomIndex], zoomAt);
+    },
+    swipeStart: function(touch) {
+      this.touchStartX = touch.pageX;
+      this.touchStartY = touch.pageY;
+      this.maxMove = 0;
+      if (this.zoom <= 1) {
+        if (this.dragToFlip) {
+          return this.activeCursor = 'grab';
+        }
+      } else {
+        this.startScrollLeft = this.$refs.viewport.scrollLeft;
+        this.startScrollTop = this.$refs.viewport.scrollTop;
+        return this.activeCursor = 'all-scroll';
+      }
+    },
+    swipeMove: function(touch) {
+      var x, y;
+      if (this.touchStartX == null) {
+        return;
+      }
+      x = touch.pageX - this.touchStartX;
+      y = touch.pageY - this.touchStartY;
+      this.maxMove = Math.max(this.maxMove, Math.abs(x));
+      this.maxMove = Math.max(this.maxMove, Math.abs(y));
+      if (this.zoom > 1) {
+        if (this.dragToScroll) {
+          this.dragScroll(x, y);
+        }
+        return;
+      }
+      if (!this.dragToFlip) {
+        return;
+      }
+      if (Math.abs(y) > Math.abs(x)) {
+        return;
+      }
+      this.activeCursor = 'grabbing';
+      if (x > 0) {
+        if (this.flip.direction === null && this.canFlipLeft && x >= this.swipeMin) {
+          this.flipStart('left', false);
+        }
+        if (this.flip.direction === 'left') {
+          this.flip.progress = x / this.pageWidth;
+          if (this.flip.progress > 1) {
+            this.flip.progress = 1;
+          }
+        }
+      } else {
+        if (this.flip.direction === null && this.canFlipRight && x <= -this.swipeMin) {
+          this.flipStart('right', false);
+        }
+        if (this.flip.direction === 'right') {
+          this.flip.progress = -x / this.pageWidth;
+          if (this.flip.progress > 1) {
+            this.flip.progress = 1;
+          }
+        }
+      }
+      return true;
+    },
+    swipeEnd: function(touch) {
+      if (this.touchStartX == null) {
+        return;
+      }
+      if (this.clickToZoom && this.maxMove < this.swipeMin) {
+        this.zoomAt(touch);
+      }
+      if (this.flip.direction !== null && !this.flip.auto) {
+        if (this.flip.progress > 1 / 4) {
+          this.flipAuto(false);
+        } else {
+          this.flipRevert();
+        }
+      }
+      this.touchStartX = null;
+      return this.activeCursor = null;
+    },
+    onTouchStart: function(ev) {
+      this.hasTouchEvents = true;
+      return this.swipeStart(ev.changedTouches[0]);
+    },
+    onTouchMove: function(ev) {
+      if (this.swipeMove(ev.changedTouches[0])) {
+        if (ev.cancelable) {
+          return ev.preventDefault();
+        }
+      }
+    },
+    onTouchEnd: function(ev) {
+      return this.swipeEnd(ev.changedTouches[0]);
+    },
+    onPointerDown: function(ev) {
+      this.hasPointerEvents = true;
+      if (this.hasTouchEvents) {
+        return;
+      }
+      if (ev.which && ev.which !== 1) { // Ignore right-click
+        return;
+      }
+      this.swipeStart(ev);
+      try {
+        return ev.target.setPointerCapture(ev.pointerId);
+      } catch (error) {
+
+      }
+    },
+    onPointerMove: function(ev) {
+      if (!this.hasTouchEvents) {
+        return this.swipeMove(ev);
+      }
+    },
+    onPointerUp: function(ev) {
+      if (this.hasTouchEvents) {
+        return;
+      }
+      this.swipeEnd(ev);
+      try {
+        return ev.target.releasePointerCapture(ev.pointerId);
+      } catch (error) {
+
+      }
+    },
+    onMouseDown: function(ev) {
+      if (this.hasTouchEvents || this.hasPointerEvents) {
+        return;
+      }
+      if (ev.which && ev.which !== 1) { // Ignore right-click
+        return;
+      }
+      return this.swipeStart(ev);
+    },
+    onMouseMove: function(ev) {
+      if (!(this.hasTouchEvents || this.hasPointerEvents)) {
+        return this.swipeMove(ev);
+      }
+    },
+    onMouseUp: function(ev) {
+      if (!(this.hasTouchEvents || this.hasPointerEvents)) {
+        return this.swipeEnd(ev);
+      }
+    },
+    dragScroll: function(x, y) {
+      this.scrollLeft = this.startScrollLeft - x;
+      return this.scrollTop = this.startScrollTop - y;
+    },
+    onWheel: function(ev) {
+      if (this.wheel === 'scroll' && this.zoom > 1 && this.dragToScroll) {
+        this.scrollLeft = this.$refs.viewport.scrollLeft + ev.deltaX;
+        this.scrollTop = this.$refs.viewport.scrollTop + ev.deltaY;
+        if (ev.cancelable) {
+          ev.preventDefault();
+        }
+      }
+      if (this.wheel === 'zoom') {
+        if (ev.deltaY >= 100) {
+          this.zoomOut(ev);
+          return ev.preventDefault();
+        } else if (ev.deltaY <= -100) {
+          this.zoomIn(ev);
+          return ev.preventDefault();
+        }
+      }
+    },
+    preloadImages: function(hiRes) {
+      if ( hiRes === void 0 ) hiRes = false;
+
+      var i, j, k, ref, ref1, ref2, ref3, src;
+      for (i = j = ref = this.currentPage - 3, ref1 = this.currentPage + 3; (ref <= ref1 ? j <= ref1 : j >= ref1); i = ref <= ref1 ? ++j : --j) {
+        this.pageUrlLoading(i); // this preloads image
+      }
+      if (hiRes) {
+        for (i = k = ref2 = this.currentPage, ref3 = this.currentPage + this.displayedPages; (ref2 <= ref3 ? k < ref3 : k > ref3); i = ref2 <= ref3 ? ++k : --k) {
+          src = this.pagesHiRes[i];
+          if (src) {
+            (new Image()).src = src;
+          }
+        }
+      }
+    },
+    goToPage: function(p) {
+      if (p === null || p === this.page) {
+        return;
+      }
+      if (this.pages[0] === null) {
+        if (this.displayedPages === 2 && p === 1) {
+          this.currentPage = 0;
+        } else {
+          this.currentPage = p;
+        }
+      } else {
+        this.currentPage = p - 1;
+      }
+      this.minX = 2e308;
+      this.maxX = -2e308;
+      return this.currentCenterOffset = this.centerOffset;
+    },
+    loadImage: function(url) {
+      var this$1$1 = this;
+
+      var img;
+      if (this.imageWidth === null) {
+        // First loaded image defines the image width and height.
+        // So it must be true image, not 'loading' image.
+        return url;
+      } else {
+        if (this.loadedImages[url]) {
+          return url;
+        } else {
+          img = new Image();
+          img.onload = function () {
+            if (this$1$1.$set) {
+              return this$1$1.$set(this$1$1.loadedImages, url, true);
+            } else {
+              return this$1$1.loadedImages[url] = true;
+            }
+          };
+          img.src = url;
+          return this.loadingImage;
+        }
+      }
+    }
+  },
+  watch: {
+    currentPage: function() {
+      this.firstPage = this.currentPage;
+      this.secondPage = this.currentPage + 1;
+      return this.preloadImages();
+    },
+    centerOffset: function() {
+      var this$1$1 = this;
+
+      var animate;
+      if (this.animatingCenter) {
+        return;
+      }
+      animate = function () {
+        return requestAnimationFrame(function () {
+          var diff, rate;
+          rate = 0.1;
+          diff = this$1$1.centerOffset - this$1$1.currentCenterOffset;
+          if (Math.abs(diff) < 0.5) {
+            this$1$1.currentCenterOffset = this$1$1.centerOffset;
+            return this$1$1.animatingCenter = false;
+          } else {
+            this$1$1.currentCenterOffset += diff * rate;
+            return animate();
+          }
+        });
+      };
+      this.animatingCenter = true;
+      return animate();
+    },
+    scrollLeftLimited: function(val) {
+      var this$1$1 = this;
+
+      if (this.IE) {
+        return requestAnimationFrame(function () {
+          return this$1$1.$refs.viewport.scrollLeft = val;
+        });
+      } else {
+        return this.$refs.viewport.scrollLeft = val;
+      }
+    },
+    scrollTopLimited: function(val) {
+      var this$1$1 = this;
+
+      if (this.IE) {
+        return requestAnimationFrame(function () {
+          return this$1$1.$refs.viewport.scrollTop = val;
+        });
+      } else {
+        return this.$refs.viewport.scrollTop = val;
+      }
+    },
+    pages: function(after, before) {
+      this.fixFirstPage();
+      if (!(before != null ? before.length : void 0) && (after != null ? after.length : void 0)) {
+        if (this.startPage > 1 && after[0] === null) {
+          return this.currentPage++;
+        }
+      }
+    },
+    startPage: function(p) {
+      return this.goToPage(p);
+    }
+  }
+};
+
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    var options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    var hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            var originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            var existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
+}
+
+var isOldIE = typeof navigator !== 'undefined' &&
+    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+    return function (id, style) { return addStyle(id, style); };
+}
+var HEAD;
+var styles = {};
+function addStyle(id, css) {
+    var group = isOldIE ? css.media || 'default' : id;
+    var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+    if (!style.ids.has(id)) {
+        style.ids.add(id);
+        var code = css.source;
+        if (css.map) {
+            // https://developer.chrome.com/devtools/docs/javascript-debugging
+            // this makes source maps inside style tags work properly in Chrome
+            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+            // http://stackoverflow.com/a/26603875
+            code +=
+                '\n/*# sourceMappingURL=data:application/json;base64,' +
+                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                    ' */';
+        }
+        if (!style.element) {
+            style.element = document.createElement('style');
+            style.element.type = 'text/css';
+            if (css.media)
+                { style.element.setAttribute('media', css.media); }
+            if (HEAD === undefined) {
+                HEAD = document.head || document.getElementsByTagName('head')[0];
+            }
+            HEAD.appendChild(style.element);
+        }
+        if ('styleSheet' in style.element) {
+            style.styles.push(code);
+            style.element.styleSheet.cssText = style.styles
+                .filter(Boolean)
+                .join('\n');
+        }
+        else {
+            var index = style.ids.size - 1;
+            var textNode = document.createTextNode(code);
+            var nodes = style.element.childNodes;
+            if (nodes[index])
+                { style.element.removeChild(nodes[index]); }
+            if (nodes.length)
+                { style.element.insertBefore(textNode, nodes[index]); }
+            else
+                { style.element.appendChild(textNode); }
+        }
+    }
+}
+
+/* script */
+var __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._t("default",null,null,{
+      canFlipLeft: _vm.canFlipLeft,
+      canFlipRight: _vm.canFlipRight,
+      canZoomIn: _vm.canZoomIn,
+      canZoomOut: _vm.canZoomOut,
+      page: _vm.page,
+      numPages: _vm.numPages,
+      flipLeft: _vm.flipLeft,
+      flipRight: _vm.flipRight,
+      zoomIn: _vm.zoomIn,
+      zoomOut: _vm.zoomOut,
+    }),_vm._v(" "),_c('div',{ref:"viewport",staticClass:"viewport",class:{
+      zoom: _vm.zooming || _vm.zoom > 1,
+      'drag-to-scroll': _vm.dragToScroll,
+    },style:({ cursor: _vm.cursor == 'grabbing' ? 'grabbing' : 'auto' }),on:{"touchmove":_vm.onTouchMove,"pointermove":_vm.onPointerMove,"mousemove":_vm.onMouseMove,"touchend":_vm.onTouchEnd,"touchcancel":_vm.onTouchEnd,"pointerup":_vm.onPointerUp,"pointercancel":_vm.onPointerUp,"mouseup":_vm.onMouseUp,"wheel":_vm.onWheel}},[_c('div',{staticClass:"flipbook-container",style:({ transform: ("scale(" + _vm.zoom + ")") })},[_c('div',{staticClass:"click-to-flip left",style:({ cursor: _vm.canFlipLeft ? 'pointer' : 'auto' }),on:{"click":_vm.flipLeft}}),_vm._v(" "),_c('div',{staticClass:"click-to-flip right",style:({ cursor: _vm.canFlipRight ? 'pointer' : 'auto' }),on:{"click":_vm.flipRight}}),_vm._v(" "),_c('div',{style:({ transform: ("translateX(" + _vm.centerOffsetSmoothed + "px)") })},[(_vm.showLeftPage)?_c('img',{staticClass:"page fixed",style:({
+            width: _vm.pageWidth + 'px',
+            height: _vm.pageHeight + 'px',
+            left: _vm.xMargin + 'px',
+            top: _vm.yMargin + 'px',
+          }),attrs:{"src":_vm.pageUrlLoading(_vm.leftPage, true)},on:{"load":function($event){return _vm.didLoadImage($event)}}}):_vm._e(),_vm._v(" "),(_vm.showRightPage)?_c('img',{staticClass:"page fixed",style:({
+            width: _vm.pageWidth + 'px',
+            height: _vm.pageHeight + 'px',
+            left: _vm.viewWidth / 2 + 'px',
+            top: _vm.yMargin + 'px',
+          }),attrs:{"src":_vm.pageUrlLoading(_vm.rightPage, true)},on:{"load":function($event){return _vm.didLoadImage($event)}}}):_vm._e(),_vm._v(" "),_c('div',{style:({ opacity: _vm.flip.opacity })},_vm._l((_vm.polygonArray),function(ref){
+            var key = ref[0];
+            var bgImage = ref[1];
+            var lighting = ref[2];
+            var bgPos = ref[3];
+            var transform = ref[4];
+            var z = ref[5];
+return _c('div',{key:key,staticClass:"polygon",class:{ blank: !bgImage },style:({
+              backgroundImage: bgImage && ("url(" + (_vm.loadImage(bgImage)) + ")"),
+              backgroundSize: _vm.polygonBgSize,
+              backgroundPosition: bgPos,
+              width: _vm.polygonWidth,
+              height: _vm.polygonHeight,
+              transform: transform,
+              zIndex: z,
+            })},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(lighting.length),expression:"lighting.length"}],staticClass:"lighting",style:({ backgroundImage: lighting })})])}),0),_vm._v(" "),_c('div',{staticClass:"bounding-box",style:({
+            left: _vm.boundingLeft + 'px',
+            top: _vm.yMargin + 'px',
+            width: _vm.boundingRight - _vm.boundingLeft + 'px',
+            height: _vm.pageHeight + 'px',
+            cursor: _vm.cursor,
+          }),on:{"touchstart":_vm.onTouchStart,"pointerdown":_vm.onPointerDown,"mousedown":_vm.onMouseDown}})])])])],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  var __vue_inject_styles__ = function (inject) {
+    if (!inject) { return }
+    inject("data-v-e3f0fbe2_0", { source: ".viewport[data-v-e3f0fbe2]{-webkit-overflow-scrolling:touch;width:100%;height:100%}.viewport.zoom[data-v-e3f0fbe2]{overflow:scroll}.viewport.zoom.drag-to-scroll[data-v-e3f0fbe2]{overflow:hidden}.flipbook-container[data-v-e3f0fbe2]{position:relative;width:100%;height:100%;transform-origin:top left;user-select:none}.click-to-flip[data-v-e3f0fbe2]{position:absolute;width:50%;height:100%;top:0;user-select:none}.click-to-flip.left[data-v-e3f0fbe2]{left:0}.click-to-flip.right[data-v-e3f0fbe2]{right:0}.bounding-box[data-v-e3f0fbe2]{position:absolute;user-select:none}.page[data-v-e3f0fbe2]{position:absolute;backface-visibility:hidden}.polygon[data-v-e3f0fbe2]{position:absolute;top:0;left:0;background-repeat:no-repeat;backface-visibility:hidden;transform-origin:center left}.polygon.blank[data-v-e3f0fbe2]{background-color:#ddd}.polygon .lighting[data-v-e3f0fbe2]{width:100%;height:100%}", map: undefined, media: undefined });
+
+  };
+  /* scoped */
+  var __vue_scope_id__ = "data-v-e3f0fbe2";
+  /* module identifier */
+  var __vue_module_identifier__ = undefined;
+  /* functional template */
+  var __vue_is_functional_template__ = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__ = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+
+
+;// ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/BookCatalogueDrawer.vue?vue&type=template&id=3930be62&scoped=true
+var BookCatalogueDrawervue_type_template_id_3930be62_scoped_true_render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"catalogue-drawer-container"},[(_vm.visible)?_c('div',{staticClass:"drawer-overlay",on:{"click":_vm.closeDrawer}}):_vm._e(),_c('div',{staticClass:"catalogue-drawer",class:{ 'drawer-open': _vm.visible },style:({ width: _vm.drawerWidth })},[_c('div',{staticClass:"drawer-header"},[_c('h3',{staticClass:"drawer-title"},[_vm._v("目录")]),_c('button',{staticClass:"close-button",on:{"click":_vm.closeDrawer}},[_c('span',{staticClass:"close-icon"},[_vm._v("×")])])]),_c('div',{staticClass:"page-jump-section"},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.jumpPageInput),expression:"jumpPageInput"}],staticClass:"page-jump-input",attrs:{"type":"text","placeholder":"请输入页码"},domProps:{"value":(_vm.jumpPageInput)},on:{"input":[function($event){if($event.target.composing)return;_vm.jumpPageInput=$event.target.value},_vm.handlePageInput],"focus":_vm.onInputFocus,"blur":_vm.onInputBlur}}),_c('button',{staticClass:"btn-jump",on:{"click":_vm.handleJumpToPage}},[_vm._v(" 跳转 ")])]),_c('div',{staticClass:"drawer-content"},[(_vm.loading)?_c('div',{staticClass:"loading-container"},[_c('div',{staticClass:"loading-spinner"}),_c('p',[_vm._v("加载目录中...")])]):(_vm.error)?_c('div',{staticClass:"error-container"},[_c('div',{staticClass:"error-icon"},[_vm._v("⚠️")]),_c('p',[_vm._v("目录加载失败")]),_c('button',{staticClass:"retry-button",on:{"click":_vm.fetchCatalogue}},[_vm._v(" 重新加载 ")])]):(_vm.catalogueData && _vm.catalogueData.length > 0)?_c('div',{staticClass:"catalogue-list"},_vm._l((_vm.catalogueData),function(item,index){return _c('catalogue-item',{key:`catalogue-${index}`,attrs:{"item":item || {},"level":0},on:{"item-click":_vm.onItemClick}})}),1):_c('div',{staticClass:"empty-container"},[_c('p',[_vm._v("暂无目录")])])])])])
+}
+var BookCatalogueDrawervue_type_template_id_3930be62_scoped_true_staticRenderFns = []
+
+
+;// ./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/BookCatalogueDrawer.vue?vue&type=script&lang=js
+
+// 目录项组件
+const CatalogueItem = {
+  name: 'CatalogueItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    level: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      expanded: false
+    }
+  },
+  computed: {
+    hasChildren() {
+      const children = this.item.childrenList || this.item.children || this.item.subItems || this.item.items
+      return children && children.length > 0
+    },
+    childrenData() {
+      return this.item.childrenList || this.item.children || this.item.subItems || this.item.items || []
+    },
+    itemStyle() {
+      // 移除缩进，所有层级都左对齐
+      return {
+        paddingLeft: '12px',
+        paddingRight: '12px'
+      }
+    },
+    levelClass() {
+      return `level-${this.level}`
+    }
+  },
+  methods: {
+    toggleExpand() {
+      if (this.hasChildren) {
+        this.expanded = !this.expanded
+      } else {
+        this.handleClick()
+      }
+    },
+    handleClick() {
+      this.$emit('item-click', this.item)
+    }
+  },
+  render(h) {
+    const item = this.item
+    const titleText = item.titleName || item.title || item.name || item.text || item.label || '未命名章节'
+    const pageNum = item.startPageNum || item.pageNumber || item.page || item.pageNum
+    
+    // 创建拖拽手柄
+    const dragHandle = h('span', {
+      class: 'drag-handle'
+    }, '')
+    
+    // 创建展开图标
+    const expandIcon = this.hasChildren ? h('span', {
+      class: 'expand-icon'
+    }, this.expanded ? '▼' : '▶') : null
+    
+    // 创建层级指示器
+    const levelIndicator = this.level > 0 ? h('span', {
+      class: `level-indicator level-${this.level}`
+    }, '•'.repeat(this.level)) : null
+    
+    // 创建标题
+    const titleSpan = h('span', {
+      class: 'item-title'
+    }, titleText)
+    
+    // 创建页码（放在标题后面）
+    // const pageSpan = pageNum ? h('span', {
+    //   class: 'page-number'
+    // }, `第${pageNum}页`) : null
+    const pageSpan =  null
+    // 创建子级目录
+    const childrenDiv = (this.hasChildren && this.expanded) ? h('div', {
+      class: 'children-container'
+    }, this.childrenData.map((child, index) => {
+      return h('catalogue-item', {
+        key: index,
+        props: {
+          item: child,
+          level: this.level + 1
+        },
+        on: {
+          'item-click': (item) => this.$emit('item-click', item)
+        }
+      })
+    })) : null
+    
+    return h('div', {
+      class: 'catalogue-item-wrapper'
+    }, [
+      h('div', {
+        class: [
+          'catalogue-item',
+          this.levelClass,
+          {
+            'has-children': this.hasChildren,
+            'expanded': this.expanded
+          }
+        ],
+        style: this.itemStyle,
+        on: {
+          click: this.toggleExpand
+        }
+      }, [
+        h('div', {
+          class: 'item-content'
+        }, [dragHandle, expandIcon, levelIndicator, titleSpan, pageSpan].filter(Boolean))
+      ]),
+      childrenDiv
+    ].filter(Boolean))
+  }
+}
+
+/* harmony default export */ var BookCatalogueDrawervue_type_script_lang_js = ({
+  name: 'BookCatalogueDrawer',
+  components: {
+    CatalogueItem
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    bookId: {
+      type: String,
+      default: ''
+    },
+    catalogue: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      catalogueData: [],
+      error: null,
+      jumpPageInput: ''
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    drawerWidth() {
+      // 响应式宽度
+      return window.innerWidth <= 768 ? '80%' : '400px'
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal && this.bookId && !this.catalogueData.length) {
+        this.$emit('fetch-catalogue', this.bookId)
+      }
+    },
+    bookId(newVal) {
+      if (newVal && this.visible) {
+        this.$emit('fetch-catalogue', newVal)
+      }
+    },
+    catalogue: {
+      handler(newVal) {
+        if (newVal && newVal.length > 0) {
+          this.catalogueData = this.processCatalogueData(newVal)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /**
+     * 获取目录数据 - 触发事件让父组件处理
+     */
+    fetchCatalogue() {
+      if (!this.bookId) {
+        console.warn('缺少 bookId，无法获取目录')
+        return
+      }
+      this.$emit('fetch-catalogue', this.bookId)
+    },
+
+    /**
+     * 处理目录数据，确保数据结构正确
+     * @param {Array} data - 原始目录数据
+     * @returns {Array} 处理后的目录数据
+     */
+    processCatalogueData(data) {
+      if (!Array.isArray(data)) {
+        return []
+      }
+      
+      return data.map(item => {
+        if (!item || typeof item !== 'object') {
+          return {
+            titleName: '未知章节',
+            startPageNum: null,
+            childrenList: []
+          }
+        }
+        
+        // 确保必要的字段存在
+        const processedItem = {
+          ...item,
+          titleName: item.titleName || item.title || item.name || '未命名章节',
+          startPageNum: item.startPageNum || item.pageNumber || item.page || item.pageNum || null,
+          childrenList: item.childrenList || item.children || item.subItems || item.items || []
+        }
+        
+        // 递归处理子级
+        if (processedItem.childrenList && processedItem.childrenList.length > 0) {
+          processedItem.childrenList = this.processCatalogueData(processedItem.childrenList)
+        }
+        
+        return processedItem
+      })
+    },
+
+    /**
+     * 目录项点击事件
+     * @param {Object} item - 点击的目录项
+     */
+    onItemClick(item) {
+      console.log('目录项被点击:', item)
+      
+      // 发送事件给父组件
+      this.$emit('catalogue-click', item)
+      
+      // 如果有页码信息，可以进行跳转
+      const pageNumber = item.startPageNum || item.pageNumber || item.page || item.pageNum
+      if (pageNumber) {
+        this.$emit('page-jump', pageNumber)
+      }
+    },
+
+    /**
+     * 关闭抽屉
+     */
+    closeDrawer() {
+      this.$emit('input', false)
+    },
+
+    /**
+     * 处理页码输入
+     */
+    handlePageInput(e) {
+      const value = e.target.value
+      const numValue = value.replace(/[^\d]/g, '')
+      this.jumpPageInput = numValue
+    },
+
+    /**
+     * 执行页码跳转
+     */
+    handleJumpToPage() {
+      const pageNum = parseInt(this.jumpPageInput)
+      if (pageNum && pageNum >= 1) {
+        this.$emit('page-jump', pageNum)
+        this.jumpPageInput = ''
+        this.closeDrawer()
+      }
+    },
+
+    /**
+     * 输入框获得焦点
+     */
+    onInputFocus() {
+      // 可以在这里添加焦点处理逻辑
+    },
+
+    /**
+     * 输入框失去焦点
+     */
+    onInputBlur() {
+      this.$emit('Focus')
+    },
+
+    /**
+     * 重置数据
+     */
+    resetData() {
+      this.catalogueData = []
+      this.error = null
+      this.loading = false
+    },
+
+    /**
+     * 处理窗口大小变化
+     */
+    handleResize() {
+      // 可以在这里添加响应式逻辑
+    }
+  },
+
+  mounted() {
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.handleResize)
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+  }
+});
+
+;// ./src/components/BookCatalogueDrawer.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_BookCatalogueDrawervue_type_script_lang_js = (BookCatalogueDrawervue_type_script_lang_js); 
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-52.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-52.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-52.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/BookCatalogueDrawer.vue?vue&type=style&index=0&id=3930be62&prod&scoped=true&lang=css
+// extracted by mini-css-extract-plugin
+
+;// ./src/components/BookCatalogueDrawer.vue?vue&type=style&index=0&id=3930be62&prod&scoped=true&lang=css
+
+;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+function componentNormalizer_normalizeComponent(
+  scriptExports,
+  render,
+  staticRenderFns,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier /* server only */,
+  shadowMode /* vue-cli only */
+) {
+  // Vue.extend constructor export interop
+  var options =
+    typeof scriptExports === 'function' ? scriptExports.options : scriptExports
+
+  // render functions
+  if (render) {
+    options.render = render
+    options.staticRenderFns = staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = 'data-v-' + scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) {
+    // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = shadowMode
+      ? function () {
+          injectStyles.call(
+            this,
+            (options.functional ? this.parent : this).$root.$options.shadowRoot
+          )
+        }
+      : injectStyles
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functional component in vue file
+      var originalRender = options.render
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context)
+        return originalRender(h, context)
+      }
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
+    }
+  }
+
+  return {
+    exports: scriptExports,
+    options: options
+  }
+}
+
+;// ./src/components/BookCatalogueDrawer.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var component = componentNormalizer_normalizeComponent(
+  components_BookCatalogueDrawervue_type_script_lang_js,
+  BookCatalogueDrawervue_type_template_id_3930be62_scoped_true_render,
+  BookCatalogueDrawervue_type_template_id_3930be62_scoped_true_staticRenderFns,
+  false,
+  null,
+  "3930be62",
+  null
+  
+)
+
+/* harmony default export */ var BookCatalogueDrawer = (component.exports);
+;// ./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/BookReader.vue?vue&type=script&lang=js
+
+
+
+
+/* harmony default export */ var BookReadervue_type_script_lang_js = ({
+  name: 'PhotoAlbumView',
+  components: {
+    Flipbook: __vue_component__,
+    BookCatalogueDrawer: BookCatalogueDrawer
+  },
+  props: {
+    pages: {
+      type: Array,
+      default: () => []
+    },
+    bookId: {
+      type: String,
+      default: ''
+    },
+    startPage: {
+      type: Number,
+      default: 1
+    },
+    catalogue: {
+      type: Array,
+      default: () => []
+    },
+    catalogueLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      currentPage: 1,
+      flag: true,
+      // 设备检测
+      isMobile: false,
+      // 接口相关数据
+      booksData: null,
+      loading: false,
+      error: null,
+      showSuccessToast: false,
+      // 内容就绪状态
+      contentReady: false,
+      // 手势缩放相关
+      zoomScale: 1,
+      translateX: 0,
+      translateY: 0,
+      lastTouchDistance: 0,
+      lastTouchCenter: { x: 0, y: 0 },
+      isZooming: false,
+      isPanning: false,
+      touchStartTime: 0,
+      initialTouches: [],
+      // Flipbook区域双击检测
+      flipbookTouchStartTime: 0,
+      flipbookLastTapTime: 0,
+      // 目录相关
+      showCatalogueDrawer: false,
+      // 目录按钮拖拽相关
+      catalogueButtonDragging: false,
+      catalogueButtonPosition: { x: 20, y: 20 },
+      dragStartPosition: { x: 0, y: 0 },
+      dragOffset: { x: 0, y: 0 },
+      // 翻页模式相关
+      flipMode: 'flip', // flip: 仿真翻页, slide: 滑动翻页, fade: 淡入淡出, scroll: 垂直滚动
+      showFlipModeMenu: false,
+      flipModes: [
+        { value: 'flip', label: '仿真翻页', icon: '📖' },
+        { value: 'slide', label: '滑动翻页', icon: '↔️' },
+        { value: 'fade', label: '淡入淡出', icon: '✨' },
+        { value: 'scroll', label: '垂直滚动', icon: '📜' },
+        { value: 'clip', label: '截断特效', icon: '✂️' },
+        { value: 'card', label: '卡片风格', icon: '🃏' }
+      ],
+      // 滑动模式相关
+      slideStartX: 0,
+      slideCurrentX: 0,
+      slideIsDragging: false,
+      // URL参数控制
+      flipModeFromUrl: false, // 翻页模式是否由URL参数指定
+      // 控件自动隐藏相关
+      showControls: false,
+      hideControlsTimer: null,
+      // 页码跳转相关
+      jumpPageInput: ''
+    }
+  },
+  computed: {
+    totalPages() {
+      return this.pages.length
+    },
+    pagesHiRes() {
+      return this.pages
+    },
+    /**
+     * 翻页模式图标
+     */
+    flipModeIcon() {
+      const mode = this.flipModes.find(m => m.value === this.flipMode)
+      return mode ? mode.icon : '📖'
+    },
+    /**
+     * 翻页模式标签
+     */
+    flipModeLabel() {
+      const mode = this.flipModes.find(m => m.value === this.flipMode)
+      return mode ? mode.label : '仿真翻页'
+    },
+    /**
+     * 滑动容器样式
+     */
+    slideContainerStyle() {
+      const offset = -(this.currentPage - 1) * 100
+      const dragOffset = this.slideIsDragging ? (this.slideCurrentX - this.slideStartX) / 5 : 0
+      return {
+        transform: `translateX(calc(${offset}% + ${dragOffset}px))`,
+        transition: this.slideIsDragging ? 'none' : 'transform 0.3s ease-out'
+      }
+    },
+    /**
+     * 是否显示翻页模式选择器
+     */
+    showFlipModeSelector() {
+      // 如果翻页模式是由URL参数指定的，则隐藏选择器
+      return !this.flipModeFromUrl
+    },
+    /**
+     * 卡片模式可见卡片
+     */
+    visibleCards() {
+      const cards = []
+      // 上一页
+      if (this.currentPage > 1) {
+        cards.push({
+          src: this.pages[this.currentPage - 2],
+          originalIndex: this.currentPage - 2,
+          position: 'prev'
+        })
+      }
+      // 当前页
+      cards.push({
+        src: this.pages[this.currentPage - 1],
+        originalIndex: this.currentPage - 1,
+        position: 'current'
+      })
+      // 下一页
+      if (this.currentPage < this.totalPages) {
+        cards.push({
+          src: this.pages[this.currentPage],
+          originalIndex: this.currentPage,
+          position: 'next'
+        })
+      }
+      return cards
+    },
+    /**
+     * 计算当前页面显示文本
+     */
+    pageDisplayText() {
+      if (this.totalPages === 0) return '加载中...'
+      if (this.currentPage === 1 && this.totalPages > 1) return '封面'
+      if (this.currentPage === this.totalPages && this.totalPages > 1) return '封底'
+      
+      if (this.isMobile) {
+        if (this.totalPages <= 2) return `第 ${this.currentPage} 页 / 共 ${this.totalPages} 页`
+        return `第 ${Math.max(1, this.currentPage - 1)} 页 / 共 ${Math.max(0, this.totalPages - 2)} 页`
+      } else {
+        if (this.totalPages <= 2) return `第 ${this.currentPage} 页 / 共 ${this.totalPages} 页`
+        return `第 ${Math.ceil((this.currentPage - 1) / 2)} 组 / 共 ${Math.ceil((this.totalPages - 2) / 2)} 组`
+      }
+    }
+  },
+  methods: {
+    /**
+     * 获取书籍数据
+     */
+    async fetchBooksData() {
+      try {
+        this.loading = true
+        this.error = null
+
+        // 注释：原来从URL参数获取fileManagementId，现在改为通过props传入
+        // const fileManagementId = this.$route.params.id || this.$route.query.id || ''
+        // this.bookId = fileManagementId
+
+        // 注释：原来调用API获取数据，现在改为通过props传入
+        // const response = await booksApi.getBooksSlice(fileManagementId, textContent, 1, 9999)
+
+        // 触发事件让父组件处理数据获取
+        this.$emit('fetch-books-data', this.bookId)
+
+        // 如果通过props传入了pages数据，直接使用
+        if (this.pages && this.pages.length > 0) {
+          this.booksData = { data: { records: this.pages.map(url => ({ imageUrl: url })) } }
+
+          // 显示成功提示
+          this.showSuccessToast = true
+          setTimeout(() => {
+            this.showSuccessToast = false
+          }, 3000)
+
+          // 检查URL参数并跳转到指定页码
+          this.checkUrlPageParameter()
+        }
+        
+      } catch (error) {
+        console.error('获取书籍数据失败:', error)
+        this.error = error
+        
+        // 显示错误信息
+        if (error.response) {
+          console.error('API错误响应:', error.response.data)
+        } else if (error.request) {
+          console.error('网络请求失败:', error.request)
+        } else {
+          console.error('请求配置错误:', error.message)
+        }
+      } finally {
+        this.loading = false
+      }
+    },
+
+    /**
+     * 根据API数据更新页面
+     * @param {Array} apiData - API返回的数据
+     */
+    updatePagesFromApiData(apiData) {
+      if (!Array.isArray(apiData)) {
+        console.warn('API数据格式不正确，期望数组格式')
+        return
+      }
+      
+      console.log('开始更新页面数据，数据长度:', apiData.length)
+      
+      // 这里可以根据实际的API数据结构来处理
+      // 假设API返回的数据包含图片URL
+      const newPages = [null] // 保留封面页
+      
+      apiData.forEach((item, index) => {
+        if (item.imageUrl) {
+          newPages.push(item.imageUrl)
+          console.log(`添加页面 ${index + 1}:`, item.imageUrl)
+        }
+      })
+      
+      if (newPages.length > 1) {
+        this.pages = newPages
+        console.log('页面数据更新完成，总页数:', this.pages.length)
+      }
+    },
+
+    /**
+     * 检测是否为移动设备
+     */
+    detectMobile() {
+      const userAgent = navigator.userAgent.toLowerCase()
+      const mobileKeywords = ['mobile', 'android', 'iphone', 'ipad', 'ipod', 'blackberry', 'windows phone']
+
+      // 检测 User Agent
+      const isMobileUA = mobileKeywords.some(keyword => userAgent.includes(keyword))
+
+      // 检测屏幕尺寸
+      const isMobileScreen = window.innerWidth <= 768
+
+      // 检测触摸支持
+      const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0
+
+      // 综合判断
+      this.isMobile = isMobileUA || (isMobileScreen && isTouchDevice)
+
+      console.log('设备检测结果:', {
+        userAgent: isMobileUA,
+        screenSize: isMobileScreen,
+        touchSupport: isTouchDevice,
+        finalResult: this.isMobile
+      })
+    },
+
+    /**
+     * 预加载首页图片
+     */
+    async preloadFirstPage() {
+      if (!this.pages || this.pages.length === 0) {
+        this.contentReady = true
+        return
+      }
+
+      const firstPageIndex = this.startPage - 1
+      const firstPageUrl = this.pages[firstPageIndex]
+
+      if (!firstPageUrl) {
+        this.contentReady = true
+        return
+      }
+
+      try {
+        await new Promise((resolve, reject) => {
+          const img = new Image()
+          img.onload = () => resolve()
+          img.onerror = () => resolve() // 即使失败也继续
+          img.src = firstPageUrl
+
+          // 超时保护
+          setTimeout(() => resolve(), 3000)
+        })
+      } catch (error) {
+        console.warn('首页图片预加载失败:', error)
+      } finally {
+        this.contentReady = true
+      }
+    },
+    
+    /**
+     * 监听窗口尺寸变化
+     */
+    handleResize() {
+      const wasMobile = this.isMobile
+      this.detectMobile()
+      
+      // 如果设备类型发生变化，重新初始化flipbook
+      if (wasMobile !== this.isMobile) {
+        console.log('设备类型变化，重新初始化')
+        this.$nextTick(() => {
+          if (this.$refs.flipbook) {
+            // 重置到第一页
+            this.currentPage = 1
+            this.startPage = 1
+          }
+        })
+      }
+    },
+    flipLeft() {
+      console.log('尝试向左翻页，当前页:', this.currentPage)
+      if (this.flipMode === 'flip') {
+        // 仿真翻页模式
+        if (this.$refs.flipbook && this.currentPage > 1) {
+          try {
+            this.$refs.flipbook.flipLeft()
+            console.log('向左翻页命令已发送')
+          } catch (error) {
+            console.error('向左翻页失败:', error)
+          }
+        } else {
+          console.log('无法向左翻页 - 已在第一页或组件未就绪')
+        }
+      } else {
+        // 其他模式直接切换页码
+        if (this.currentPage > 1) {
+          this.currentPage--
+          this.onFlipLeftEnd(this.currentPage)
+        }
+      }
+    },
+    flipRight() {
+      console.log('尝试向右翻页，当前页:', this.currentPage)
+      if (this.flipMode === 'flip') {
+        // 仿真翻页模式
+        if (this.$refs.flipbook && this.currentPage < this.totalPages) {
+          try {
+            this.$refs.flipbook.flipRight()
+            console.log('向右翻页命令已发送')
+          } catch (error) {
+            console.error('向右翻页失败:', error)
+          }
+        } else {
+          console.log('无法向右翻页 - 已在最后一页或组件未就绪')
+        }
+      } else {
+        // 其他模式直接切换页码
+        if (this.currentPage < this.totalPages) {
+          this.currentPage++
+          this.onFlipRightEnd(this.currentPage)
+        }
+      }
+    },
+    onFlipLeftEnd(page) {
+      console.log('向左翻页完成，新页面:', page)
+      this.currentPage = page
+      // 触发页码变化事件
+      this.$emit('page-change', page)
+      // 记录阅读进度
+      this.recordReadingProgress(page)
+    },
+    onFlipRightEnd(page) {
+      console.log('向右翻页完成，新页面:', page)
+      this.currentPage = page
+      // 触发页码变化事件
+      this.$emit('page-change', page)
+      // 记录阅读进度
+      this.recordReadingProgress(page)
+    },
+    
+    /**
+     * 容器触摸开始事件
+     */
+    onContainerTouchStart(e) {
+      this.touchStartTime = Date.now()
+      this.initialTouches = Array.from(e.touches)
+      
+      if (e.touches.length === 2) {
+        // 双指缩放
+        this.isZooming = true
+        this.lastTouchDistance = this.getTouchDistance(e.touches[0], e.touches[1])
+        this.lastTouchCenter = this.getTouchCenter(e.touches[0], e.touches[1])
+        e.preventDefault()
+      } else if (e.touches.length === 1 && this.zoomScale > 1) {
+        // 单指拖拽（仅在放大状态下）
+        this.isPanning = true
+        this.lastTouchCenter = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+      }
+    },
+    
+    /**
+     * 容器触摸移动事件
+     */
+    onContainerTouchMove(e) {
+      if (this.isZooming && e.touches.length === 2) {
+        // 双指缩放
+        const currentDistance = this.getTouchDistance(e.touches[0], e.touches[1])
+        const currentCenter = this.getTouchCenter(e.touches[0], e.touches[1])
+        
+        // 计算缩放比例
+        const scaleChange = currentDistance / this.lastTouchDistance
+        let newScale = this.zoomScale * scaleChange
+        
+        // 限制缩放范围
+        newScale = Math.max(0.5, Math.min(3, newScale))
+        
+        // 计算缩放中心点的偏移
+        const deltaX = currentCenter.x - this.lastTouchCenter.x
+        const deltaY = currentCenter.y - this.lastTouchCenter.y
+        
+        this.zoomScale = newScale
+        this.translateX += deltaX
+        this.translateY += deltaY
+        
+        this.lastTouchDistance = currentDistance
+        this.lastTouchCenter = currentCenter
+        
+        e.preventDefault()
+      } else if (this.isPanning && e.touches.length === 1 && this.zoomScale > 1) {
+        // 单指拖拽
+        const deltaX = e.touches[0].clientX - this.lastTouchCenter.x
+        const deltaY = e.touches[0].clientY - this.lastTouchCenter.y
+        
+        this.translateX += deltaX
+        this.translateY += deltaY
+        
+        this.lastTouchCenter = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+        
+        e.preventDefault()
+      }
+    },
+    
+    /**
+     * 容器触摸结束事件
+     */
+    onContainerTouchEnd(e) {
+      const touchDuration = Date.now() - this.touchStartTime
+      const wasZooming = this.isZooming
+      const wasPanning = this.isPanning
+
+      // 先重置状态
+      this.isZooming = false
+      this.isPanning = false
+
+      // 双击重置缩放 - 只在单指快速点击时检测
+      if (e.changedTouches.length === 1 && touchDuration < 300 && !wasZooming && !wasPanning) {
+        const now = Date.now()
+        if (this.lastTapTime && now - this.lastTapTime < 400) {
+          // 检测到双击
+          this.resetZoom()
+          console.log('移动端双击重置显示比例')
+          this.lastTapTime = 0 // 重置，避免三击触发
+        } else {
+          this.lastTapTime = now
+        }
+      }
+
+      // 边界检查和回弹
+      this.constrainPosition()
+    },
+    
+    /**
+     * 获取两点间距离
+     */
+    getTouchDistance(touch1, touch2) {
+      const dx = touch1.clientX - touch2.clientX
+      const dy = touch1.clientY - touch2.clientY
+      return Math.sqrt(dx * dx + dy * dy)
+    },
+    
+    /**
+     * 获取两点中心
+     */
+    getTouchCenter(touch1, touch2) {
+      return {
+        x: (touch1.clientX + touch2.clientX) / 2,
+        y: (touch1.clientY + touch2.clientY) / 2
+      }
+    },
+    
+    /**
+     * 重置缩放
+     */
+    resetZoom() {
+      this.zoomScale = 1
+      this.translateX = 0
+      this.translateY = 0
+    },
+    
+    /**
+     * PC端双击事件处理
+     */
+    onContainerDoubleClick(e) {
+      // 阻止事件冒泡和默认行为，避免触发翻页
+      e.preventDefault()
+      e.stopPropagation()
+
+      // 重置缩放比例
+      this.resetZoom()
+      console.log('容器双击重置显示比例，当前缩放:', this.zoomScale)
+    },
+
+    /**
+     * Flipbook区域双击事件处理
+     */
+    onFlipbookDoubleClick(e) {
+      // 阻止事件冒泡和默认行为，避免触发翻页
+      e.preventDefault()
+      e.stopPropagation()
+
+      // 重置缩放比例
+      this.resetZoom()
+      console.log('Flipbook双击重置显示比例，当前缩放:', this.zoomScale)
+    },
+
+    /**
+     * Flipbook区域触摸开始事件
+     */
+    onFlipbookTouchStart(e) {
+      this.flipbookTouchStartTime = Date.now()
+    },
+
+    /**
+     * Flipbook区域触摸结束事件（移动端双击检测）
+     */
+    onFlipbookTouchEnd(e) {
+      const touchDuration = Date.now() - this.flipbookTouchStartTime
+
+      // 双击重置缩放 - 只在单指快速点击时检测
+      if (e.changedTouches.length === 1 && touchDuration < 300) {
+        const now = Date.now()
+        if (this.flipbookLastTapTime && now - this.flipbookLastTapTime < 400) {
+          // 检测到双击
+          e.preventDefault()
+          e.stopPropagation()
+          this.resetZoom()
+          console.log('Flipbook区域移动端双击重置显示比例')
+          this.flipbookLastTapTime = 0 // 重置，避免三击触发
+        } else {
+          this.flipbookLastTapTime = now
+        }
+      }
+    },
+    
+    /**
+     * 约束位置在边界内
+     */
+    constrainPosition() {
+      if (this.zoomScale <= 1) {
+        this.translateX = 0
+        this.translateY = 0
+        return
+      }
+      
+      const maxTranslate = (this.zoomScale - 1) * 200
+      this.translateX = Math.max(-maxTranslate, Math.min(maxTranslate, this.translateX))
+      this.translateY = Math.max(-maxTranslate, Math.min(maxTranslate, this.translateY))
+    },
+
+
+    /**
+     * 打开目录抽屉
+     */
+    openCatalogue() {
+      console.log('点击目录按钮', {
+        dragging: this.catalogueButtonDragging,
+        showDrawer: this.showCatalogueDrawer
+      })
+      
+      // 只有在不是拖拽状态下才打开目录
+      if (!this.catalogueButtonDragging) {
+        this.showCatalogueDrawer = true
+        console.log('目录抽屉已打开')
+      } else {
+        console.log('拖拽状态中，不打开目录')
+      }
+    },
+
+    /**
+     * 目录按钮拖拽开始
+     */
+    onCatalogueMouseDown(e) {
+      // 不立即设置为拖拽状态，等待移动再判断
+      this.catalogueButtonDragging = false
+      
+      const rect = e.target.closest('.catalogue-button').getBoundingClientRect()
+      this.dragStartPosition = {
+        x: e.clientX,
+        y: e.clientY
+      }
+      this.dragOffset = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      }
+      
+      document.addEventListener('mousemove', this.onCatalogueMouseMove)
+      document.addEventListener('mouseup', this.onCatalogueMouseUp)
+    },
+
+    /**
+     * 目录按钮拖拽移动
+     */
+    onCatalogueMouseMove(e) {
+      // 检查是否开始拖拽
+      const dragDistance = Math.sqrt(
+        Math.pow(e.clientX - this.dragStartPosition.x, 2) + 
+        Math.pow(e.clientY - this.dragStartPosition.y, 2)
+      )
+      
+      // 只有移动距离超过5px才认为是拖拽
+      if (dragDistance > 5) {
+        this.catalogueButtonDragging = true
+      }
+      
+      if (!this.catalogueButtonDragging) return
+      
+      e.preventDefault()
+      
+      const newX = e.clientX - this.dragOffset.x
+      const newY = e.clientY - this.dragOffset.y
+      
+      // 限制在视窗范围内
+      const maxX = window.innerWidth - 120 // 按钮宽度约120px
+      const maxY = window.innerHeight - 50 // 按钮高度约50px
+      
+      this.catalogueButtonPosition = {
+        x: Math.max(0, Math.min(maxX, newX)),
+        y: Math.max(0, Math.min(maxY, newY))
+      }
+    },
+
+    /**
+     * 目录按钮拖拽结束
+     */
+    onCatalogueMouseUp(e) {
+      // 立即重置拖拽状态
+      this.catalogueButtonDragging = false
+      
+      document.removeEventListener('mousemove', this.onCatalogueMouseMove)
+      document.removeEventListener('mouseup', this.onCatalogueMouseUp)
+    },
+
+    /**
+     * 目录按钮触摸开始（移动端）
+     */
+    onCatalogueTouchStart(e) {
+      // 不立即设置为拖拽状态
+      this.catalogueButtonDragging = false
+      
+      const touch = e.touches[0]
+      const rect = e.target.closest('.catalogue-button').getBoundingClientRect()
+      
+      this.dragStartPosition = {
+        x: touch.clientX,
+        y: touch.clientY
+      }
+      this.dragOffset = {
+        x: touch.clientX - rect.left,
+        y: touch.clientY - rect.top
+      }
+    },
+
+    /**
+     * 目录按钮触摸移动（移动端）
+     */
+    onCatalogueTouchMove(e) {
+      const touch = e.touches[0]
+      
+      // 检查是否开始拖拽
+      const dragDistance = Math.sqrt(
+        Math.pow(touch.clientX - this.dragStartPosition.x, 2) + 
+        Math.pow(touch.clientY - this.dragStartPosition.y, 2)
+      )
+      
+      // 只有移动距离超过5px才认为是拖拽
+      if (dragDistance > 5) {
+        this.catalogueButtonDragging = true
+      }
+      
+      if (!this.catalogueButtonDragging) return
+      
+      e.preventDefault()
+      
+      const newX = touch.clientX - this.dragOffset.x
+      const newY = touch.clientY - this.dragOffset.y
+      
+      // 限制在视窗范围内，考虑安全区域
+      const maxX = window.innerWidth - 120
+      const maxY = window.innerHeight - 80
+      
+      this.catalogueButtonPosition = {
+        x: Math.max(15, Math.min(maxX, newX)),
+        y: Math.max(15, Math.min(maxY, newY))
+      }
+    },
+
+    /**
+     * 目录按钮触摸结束（移动端）
+     */
+    onCatalogueTouchEnd(e) {
+      // 立即重置拖拽状态
+      this.catalogueButtonDragging = false
+    },
+    
+    /**
+     * 切换翻页模式菜单显示
+     */
+    toggleFlipModeMenu() {
+      this.showFlipModeMenu = !this.showFlipModeMenu
+    },
+    
+    /**
+     * 选择翻页模式
+     * @param {string} mode - 翻页模式
+     */
+    selectFlipMode(mode) {
+      const oldMode = this.flipMode
+      this.flipMode = mode
+      this.showFlipModeMenu = false
+      
+      // 保存翻页模式到本地存储
+      localStorage.setItem('book-viewer-flip-mode', mode)
+      
+      console.log('切换翻页模式:', { from: oldMode, to: mode })
+      
+      // 如果切换到滚动模式，需要滚动到当前页
+      if (mode === 'scroll') {
+        this.$nextTick(() => {
+          this.scrollToCurrentPage()
+        })
+      }
+    },
+    
+    /**
+     * 滑动模式触摸开始
+     */
+    onSlideViewerTouchStart(e) {
+      if (e.touches.length === 1) {
+        this.slideStartX = e.touches[0].clientX
+        this.slideCurrentX = e.touches[0].clientX
+        this.slideIsDragging = true
+      }
+    },
+    
+    /**
+     * 滑动模式触摸移动
+     */
+    onSlideViewerTouchMove(e) {
+      if (this.slideIsDragging && e.touches.length === 1) {
+        this.slideCurrentX = e.touches[0].clientX
+        e.preventDefault()
+      }
+    },
+    
+    /**
+     * 滑动模式触摸结束
+     */
+    onSlideViewerTouchEnd(e) {
+      if (this.slideIsDragging) {
+        const deltaX = this.slideCurrentX - this.slideStartX
+        const threshold = 50 // 滑动阈值
+        
+        if (deltaX > threshold && this.currentPage > 1) {
+          // 向右滑动，上一页
+          this.currentPage--
+          this.recordReadingProgress(this.currentPage)
+        } else if (deltaX < -threshold && this.currentPage < this.totalPages) {
+          // 向左滑动，下一页
+          this.currentPage++
+          this.recordReadingProgress(this.currentPage)
+        }
+        
+        this.slideIsDragging = false
+      }
+    },
+    
+    /**
+     * 滚动模式滚动事件
+     */
+    onScrollViewerScroll(e) {
+      const container = this.$refs.scrollViewer
+      if (!container) return
+      
+      const scrollTop = container.scrollTop
+      const containerHeight = container.clientHeight
+      
+      // 计算当前页码
+      for (let i = 0; i < this.pages.length; i++) {
+        const pageRef = this.$refs['scrollPage' + i]
+        if (pageRef && pageRef[0]) {
+          const pageTop = pageRef[0].offsetTop
+          const pageBottom = pageTop + pageRef[0].offsetHeight
+          
+          if (scrollTop >= pageTop - containerHeight / 2 && scrollTop < pageBottom - containerHeight / 2) {
+            if (this.currentPage !== i + 1) {
+              this.currentPage = i + 1
+              this.recordReadingProgress(this.currentPage)
+            }
+            break
+          }
+        }
+      }
+    },
+    
+    /**
+     * 滚动到当前页
+     */
+    scrollToCurrentPage() {
+      if (this.flipMode !== 'scroll') return
+      
+      const pageRef = this.$refs['scrollPage' + (this.currentPage - 1)]
+      if (pageRef && pageRef[0]) {
+        pageRef[0].scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }
+    },
+    
+    /**
+     * 关闭翻页模式菜单（点击外部）
+     */
+    closeFlipModeMenu(e) {
+      if (!e.target.closest('.flip-mode-selector')) {
+        this.showFlipModeMenu = false
+      }
+    },
+    
+    /**
+     * 获取卡片样式
+     * @param {string} position - 卡片位置：prev, current, next
+     */
+    getCardStyle(position) {
+      switch (position) {
+        case 'prev':
+          return {
+            transform: 'translateX(-70%) scale(0.85) rotateY(15deg)',
+            zIndex: 1,
+            opacity: 0.6,
+            filter: 'brightness(0.8)'
+          }
+        case 'current':
+          return {
+            transform: 'translateX(0) scale(1) rotateY(0deg)',
+            zIndex: 3,
+            opacity: 1,
+            filter: 'brightness(1)'
+          }
+        case 'next':
+          return {
+            transform: 'translateX(70%) scale(0.85) rotateY(-15deg)',
+            zIndex: 1,
+            opacity: 0.6,
+            filter: 'brightness(0.8)'
+          }
+        default:
+          return {}
+      }
+    },
+
+    /**
+     * 目录项点击事件
+     * @param {Object} item - 点击的目录项
+     */
+    onCatalogueClick(item) {
+      console.log('目录项被点击:', item)
+      this.$emit('catalogue-click', item)
+    },
+
+    /**
+     * 获取目录数据事件
+     * @param {String} bookId - 书籍ID
+     */
+    onFetchCatalogue(bookId) {
+      this.$emit('fetch-catalogue', bookId)
+    },
+
+    /**
+     * 页面跳转事件
+     * @param {number} pageNumber - 目标页码
+     */
+    onFocus() {
+              // 使用flipbook的方法跳转到指定页面
+        if (this.flipMode === 'flip') {
+            this.flag = false
+            setTimeout(() => {
+              this.flag = true
+            }, 500)
+          } else if (this.flipMode === 'scroll') {
+            this.scrollToCurrentPage()
+          }
+    },
+    onPageJump(pageNumber) {
+      console.log('跳转到页面:', pageNumber)
+
+      // 关闭目录抽屉
+      this.showCatalogueDrawer = false
+
+      // 跳转到指定页面
+      if (pageNumber && pageNumber >= 1 && pageNumber <= this.totalPages) {
+        this.currentPage = pageNumber
+        this.startPage = pageNumber
+
+        // 记录阅读进度
+        this.recordReadingProgress(pageNumber)
+
+        // 使用flipbook的方法跳转到指定页面
+        if (this.flipMode === 'flip') {
+            this.flag = false
+            setTimeout(() => {
+              this.flag = true
+              this.$nextTick(() => {
+                this.$refs.flipbook.goToPage(pageNumber)
+              })
+            }, 500)
+          } else if (this.flipMode === 'scroll') {
+            this.scrollToCurrentPage()
+          }
+      } else {
+        console.warn('无效的页码:', pageNumber)
+      }
+    },
+
+    /**
+     * 检查URL参数并跳转到指定页码
+     */
+    checkUrlPageParameter() {
+      // 从URL查询参数中获取页码
+      const pageParam = this.$route.query.page
+      
+      if (pageParam) {
+        const targetPage = parseInt(pageParam, 10)
+        
+        console.log('检测到URL页码参数:', {
+          pageParam,
+          targetPage,
+          totalPages: this.totalPages
+        })
+        
+        // 验证页码是否有效
+        if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= this.totalPages) {
+          console.log('准备跳转到页码:', targetPage)
+          
+          // 使用nextTick确保DOM已更新
+          this.$nextTick(() => {
+            this.jumpToPage(targetPage)
+          })
+        } else {
+          console.warn('无效的页码参数:', {
+            pageParam,
+            targetPage,
+            totalPages: this.totalPages,
+            isValid: !isNaN(targetPage) && targetPage >= 1 && targetPage <= this.totalPages
+          })
+        }
+      } else {
+        console.log('URL中未检测到页码参数')
+      }
+    },
+
+    /**
+     * 跳转到指定页码
+     * @param {number} pageNumber - 目标页码
+     */
+    jumpToPage(pageNumber) {
+      if (!pageNumber || pageNumber < 1 || pageNumber > this.totalPages) {
+        console.warn('无效的页码:', pageNumber)
+        return
+      }
+
+      console.log('跳转到页面:', pageNumber)
+      
+      // 更新当前页码和起始页码
+      this.currentPage = pageNumber
+      this.startPage = pageNumber
+      
+      // 记录阅读进度
+      this.recordReadingProgress(pageNumber)
+      
+      // 使用flipbook的方法跳转到指定页面
+      if (this.flipMode === 'flip') {
+        if (this.$refs.flipbook && this.$refs.flipbook.goToPage) {
+          try {
+            this.$refs.flipbook.goToPage(pageNumber)
+            console.log('页面跳转成功:', pageNumber)
+          } catch (error) {
+            console.error('页面跳转失败:', error)
+          }
+        } else {
+          console.warn('Flipbook组件未就绪，无法跳转页面')
+        }
+      } else if (this.flipMode === 'scroll') {
+        this.scrollToCurrentPage()
+      }
+      // slide 和 fade 模式直接通过 currentPage 变化来切换
+    },
+
+    /**
+     * 记录阅读进度
+     * @param {number} pageNumber - 当前页码
+     */
+    async recordReadingProgress(pageNumber) {
+      if (!this.bookId || !pageNumber) {
+        console.warn('缺少书籍ID或页码，无法记录阅读进度')
+        return
+      }
+
+      try {
+        console.log('记录阅读进度:', {
+          bookId: this.bookId,
+          pageNumber: pageNumber
+        })
+
+        // 注释：原来调用API记录进度，现在改为触发事件让父组件处理
+        // await booksApi.recordReadProgress(this.bookId, pageNumber)
+        this.$emit('record-progress', { bookId: this.bookId, pageNumber })
+
+        console.log('阅读进度记录成功')
+
+      } catch (error) {
+        console.error('记录阅读进度失败:', error)
+        // 阅读记录失败不影响用户体验，只记录日志
+      }
+    },
+
+    /**
+     * 显示控件
+     */
+    showControlsTemporarily() {
+      this.showControls = true
+
+      // 清除之前的定时器
+      if (this.hideControlsTimer) {
+        clearTimeout(this.hideControlsTimer)
+      }
+
+      // 3秒后自动隐藏
+      this.hideControlsTimer = setTimeout(() => {
+        this.showControls = false
+      }, 3000)
+    },
+
+    /**
+     * 内容区域点击事件
+     */
+    onContentClick() {
+      this.showControlsTemporarily()
+    },
+
+    /**
+     * 处理页码输入
+     */
+    handlePageInput(e) {
+      const value = e.target.value
+      // 只允许输入数字
+      const numValue = value.replace(/[^\d]/g, '')
+      // 限制不超过总页数
+      if (numValue && parseInt(numValue) > this.totalPages) {
+        this.jumpPageInput = this.totalPages.toString()
+      } else {
+        this.jumpPageInput = numValue
+      }
+    },
+
+    /**
+     * 执行页码跳转
+     */
+    handleJumpToPage() {
+      const pageNum = parseInt(this.jumpPageInput)
+      if (pageNum && pageNum >= 1 && pageNum <= this.totalPages) {
+        // 重置缩放和位移，避免内容区域缩小
+        this.resetZoom()
+        this.jumpToPage(pageNum)
+        this.jumpPageInput = ''
+      }
+    }
+  },
+  watch: {
+    async pages(newPages) {
+      if (newPages && newPages.length > 0 && this.isMobile) {
+        this.contentReady = false
+        await this.$nextTick()
+        await this.preloadFirstPage()
+      } else if (newPages && newPages.length > 0) {
+        this.contentReady = true
+      }
+    }
+  },
+  async mounted() {
+    console.log('组件已挂载，总页数:', this.totalPages)
+
+    // 检测设备类型
+    this.detectMobile()
+
+    // 检查URL参数中的翻页模式
+    const urlFlipMode = this.$route.query.mode || this.$route.query.flipMode
+    if (urlFlipMode && this.flipModes.some(m => m.value === urlFlipMode)) {
+      // URL参数指定的翻页模式优先级最高，并隐藏切换按钮
+      this.flipMode = urlFlipMode
+      this.flipModeFromUrl = true
+      console.log('从URL参数读取翻页模式:', urlFlipMode)
+    } else {
+      // 否则从本地存储恢复
+      const savedFlipMode = localStorage.getItem('book-viewer-flip-mode')
+      if (savedFlipMode && this.flipModes.some(m => m.value === savedFlipMode)) {
+        this.flipMode = savedFlipMode
+      }
+    }
+
+    // 预加载首页图片（移动端优化）
+    if (this.isMobile && this.pages && this.pages.length > 0) {
+      await this.$nextTick()
+      await this.preloadFirstPage()
+    } else if (this.pages && this.pages.length > 0) {
+      this.contentReady = true
+    }
+
+    // 监听窗口尺寸变化
+    window.addEventListener('resize', this.handleResize)
+
+    // 监听点击事件，用于关闭翻页模式菜单
+    document.addEventListener('click', this.closeFlipModeMenu)
+  },
+  
+  beforeDestroy() {
+    // 清理事件监听
+    window.removeEventListener('resize', this.handleResize)
+    // 清理拖拽事件监听
+    document.removeEventListener('mousemove', this.onCatalogueMouseMove)
+    document.removeEventListener('mouseup', this.onCatalogueMouseUp)
+    // 清理翻页模式菜单事件监听
+    document.removeEventListener('click', this.closeFlipModeMenu)
+    // 清理控件自动隐藏定时器
+    if (this.hideControlsTimer) {
+      clearTimeout(this.hideControlsTimer)
+    }
+  }
+});
+
+;// ./src/components/BookReader.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_BookReadervue_type_script_lang_js = (BookReadervue_type_script_lang_js); 
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-52.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-52.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-52.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/BookReader.vue?vue&type=style&index=0&id=eaca7004&prod&scoped=true&lang=css
+// extracted by mini-css-extract-plugin
+
+;// ./src/components/BookReader.vue?vue&type=style&index=0&id=eaca7004&prod&scoped=true&lang=css
+
+;// ./src/components/BookReader.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var BookReader_component = componentNormalizer_normalizeComponent(
+  components_BookReadervue_type_script_lang_js,
+  render,
+  staticRenderFns,
+  false,
+  null,
+  "eaca7004",
+  null
+  
+)
+
+/* harmony default export */ var BookReader = (BookReader_component.exports);
+;// ./src/index.js
+
+
+
+const components = {
+  BookReader: BookReader,
+  BookCatalogueDrawer: BookCatalogueDrawer
+}
+
+const install = function(Vue) {
+  if (install.installed) return
+  install.installed = true
+  Object.keys(components).forEach(key => {
+    Vue.component(key, components[key])
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+/* harmony default export */ var src_0 = ({
+  install,
+  BookReader: BookReader,
+  BookCatalogueDrawer: BookCatalogueDrawer
+});
+
+
+
+;// ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
+
+
+/* harmony default export */ var entry_lib = (src_0);
+
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});
+//# sourceMappingURL=vue-book-reader.umd.js.map