vue-book-reader 1.2.3 → 1.2.4

package/lib/index.css

@@ -13,21 +13,21 @@
 }
 
 /* ↓ */
-.tocAreaButton .expansion[data-v-9d18782d]::before {
+.tocAreaButton .expansion[data-v-56e71b55]::before {
   transform: rotate(-45deg) translateX(2.5px);
 }
-.tocAreaButton .expansion[data-v-9d18782d]::after {
+.tocAreaButton .expansion[data-v-56e71b55]::after {
   transform: rotate(45deg) translateX(-2.5px);
 }
 
 /* ↑ */
-.tocAreaButton .open[data-v-9d18782d]::before {
+.tocAreaButton .open[data-v-56e71b55]::before {
   transform: rotate(45deg) translateX(2.5px);
 }
-.tocAreaButton .open[data-v-9d18782d]::after {
+.tocAreaButton .open[data-v-56e71b55]::after {
   transform: rotate(-45deg) translateX(-2.5px);
 }
-.tocAreaButton[data-v-9d18782d] {
+.tocAreaButton[data-v-56e71b55] {
   user-select: none;
   appearance: none;
   background: none;
@@ -45,19 +45,19 @@
   cursor: pointer;
   position: relative;
 }
-.tocAreaButton[data-v-9d18782d]:hover {
+.tocAreaButton[data-v-56e71b55]:hover {
   background: rgba(0, 0, 0, 0.05);
 }
-.tocAreaButton[data-v-9d18782d]:active {
+.tocAreaButton[data-v-56e71b55]:active {
   background: rgba(0, 0, 0, 0.1);
 }
-.active[data-v-9d18782d] {
+.active[data-v-56e71b55] {
   color: #1565c0;
   border-bottom: 2px solid #1565c0;
 }
 
 /* 二级目录 */
-.tocAreaButton .expansion[data-v-9d18782d] {
+.tocAreaButton .expansion[data-v-56e71b55] {
   cursor: pointer;
   transform: translateY(-50%);
   top: 50%;
@@ -69,8 +69,8 @@
     transform 0.3s ease-in-out,
     top 0.3s ease-in-out;
 }
-.tocAreaButton .expansion[data-v-9d18782d]::after,
-.tocAreaButton .expansion[data-v-9d18782d]::before {
+.tocAreaButton .expansion[data-v-56e71b55]::after,
+.tocAreaButton .expansion[data-v-56e71b55]::before {
   content: '';
   position: absolute;
   width: 6px;
@@ -83,15 +83,15 @@
 }
 
 /* container */
-.container[data-v-94907056] {
+.container[data-v-ce33d15c] {
   overflow: hidden;
   position: relative;
   height: 100%;
 }
-.containerExpanded[data-v-94907056] {
+.containerExpanded[data-v-ce33d15c] {
   transform: translateX(256px);
 }
-.readerArea[data-v-94907056] {
+.readerArea[data-v-ce33d15c] {
   position: relative;
   z-index: 1;
   height: 100%;
@@ -99,7 +99,7 @@
   background-color: #fff;
   transition: all 0.3s ease;
 }
-.container .titleArea[data-v-94907056] {
+.container .titleArea[data-v-ce33d15c] {
   position: absolute;
   top: 20px;
   left: 50px;
@@ -112,7 +112,7 @@
 }
 
 /* toc */
-.tocBackground[data-v-94907056] {
+.tocBackground[data-v-ce33d15c] {
   position: absolute;
   left: 256px;
   top: 0;
@@ -120,7 +120,7 @@
   right: 0;
   z-index: 1;
 }
-.tocArea[data-v-94907056] {
+.tocArea[data-v-ce33d15c] {
   position: absolute;
   left: 0;
   top: 0;
@@ -134,18 +134,18 @@
 }
 
 /* 滚动条 */
-.tocArea[data-v-94907056]::-webkit-scrollbar {
+.tocArea[data-v-ce33d15c]::-webkit-scrollbar {
   width: 5px;
   height: 5px;
 }
-.tocArea[data-v-94907056]::-webkit-scrollbar-thumb:vertical {
+.tocArea[data-v-ce33d15c]::-webkit-scrollbar-thumb:vertical {
   height: 5px;
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 0.5rem;
 }
 
 /* tocButton */
-.tocButton[data-v-94907056] {
+.tocButton[data-v-ce33d15c] {
   background: none;
   border: none;
   width: 32px;
@@ -157,7 +157,7 @@
   outline: none;
   cursor: pointer;
 }
-.tocButtonBar[data-v-94907056] {
+.tocButtonBar[data-v-ce33d15c] {
   position: absolute;
   width: 60%;
   background: #ccc;
@@ -167,12 +167,12 @@
   top: 50%;
   transition: all 0.5s ease;
 }
-.tocButtonExpanded[data-v-94907056] {
+.tocButtonExpanded[data-v-ce33d15c] {
   background: #f2f2f2;
 }
 
 /* 翻页 */
-.arrow[data-v-94907056] {
+.arrow[data-v-ce33d15c] {
   outline: none;
   border: none;
   background: none;
@@ -188,22 +188,22 @@
   appearance: none;
   font-weight: normal;
 }
-.arrow[data-v-94907056]:hover {
+.arrow[data-v-ce33d15c]:hover {
   color: #777;
 }
-.arrow[data-v-94907056]:disabled {
+.arrow[data-v-ce33d15c]:disabled {
   cursor: not-allowed;
   color: #e2e2e2;
 }
-.prev[data-v-94907056] {
+.prev[data-v-ce33d15c] {
   left: 1px;
 }
-.next[data-v-94907056] {
+.next[data-v-ce33d15c] {
   right: 1px;
 }
 
 /* loading */
-.loadingView[data-v-94907056] {
+.loadingView[data-v-ce33d15c] {
   position: absolute;
   top: 50%;
   left: 10%;
@@ -214,7 +214,7 @@
 }
 
 /* errorView */
-.errorView[data-v-94907056] {
+.errorView[data-v-ce33d15c] {
   position: absolute;
   top: 50%;
   left: 10%;

package/lib/overlayer.js

@@ -0,0 +1,175 @@
+const createSVGElement = tag =>
+    document.createElementNS('http://www.w3.org/2000/svg', tag)
+
+export class Overlayer {
+    #svg = createSVGElement('svg')
+    #map = new Map()
+    constructor() {
+        Object.assign(this.#svg.style, {
+            position: 'absolute', top: '0', left: '0',
+            width: '100%', height: '100%',
+            pointerEvents: 'none',
+        })
+    }
+    get element() {
+        return this.#svg
+    }
+    add(key, range, draw, options) {
+        if (this.#map.has(key)) this.remove(key)
+        if (typeof range === 'function') range = range(this.#svg.getRootNode())
+        const rects = range.getClientRects()
+        const element = draw(rects, options)
+        this.#svg.append(element)
+        this.#map.set(key, { range, draw, options, element, rects })
+    }
+    remove(key) {
+        if (!this.#map.has(key)) return
+        this.#svg.removeChild(this.#map.get(key).element)
+        this.#map.delete(key)
+    }
+    redraw() {
+        for (const obj of this.#map.values()) {
+            const { range, draw, options, element } = obj
+            this.#svg.removeChild(element)
+            const rects = range.getClientRects()
+            const el = draw(rects, options)
+            this.#svg.append(el)
+            obj.element = el
+            obj.rects = rects
+        }
+    }
+    hitTest({ x, y }) {
+        const arr = Array.from(this.#map.entries())
+        // loop in reverse to hit more recently added items first
+        for (let i = arr.length - 1; i >= 0; i--) {
+            const [key, obj] = arr[i]
+            for (const { left, top, right, bottom } of obj.rects)
+                if (top <= y && left <= x && bottom > y && right > x)
+                    return [key, obj.range]
+        }
+        return []
+    }
+    static underline(rects, options = {}) {
+        const { color = 'red', width: strokeWidth = 2, writingMode } = options
+        const g = createSVGElement('g')
+        g.setAttribute('fill', color)
+        if (writingMode === 'vertical-rl' || writingMode === 'vertical-lr')
+            for (const { right, top, height } of rects) {
+                const el = createSVGElement('rect')
+                el.setAttribute('x', right - strokeWidth)
+                el.setAttribute('y', top)
+                el.setAttribute('height', height)
+                el.setAttribute('width', strokeWidth)
+                g.append(el)
+            }
+        else for (const { left, bottom, width } of rects) {
+            const el = createSVGElement('rect')
+            el.setAttribute('x', left)
+            el.setAttribute('y', bottom - strokeWidth)
+            el.setAttribute('height', strokeWidth)
+            el.setAttribute('width', width)
+            g.append(el)
+        }
+        return g
+    }
+    static strikethrough(rects, options = {}) {
+        const { color = 'red', width: strokeWidth = 2, writingMode } = options
+        const g = createSVGElement('g')
+        g.setAttribute('fill', color)
+        if (writingMode === 'vertical-rl' || writingMode === 'vertical-lr')
+            for (const { right, left, top, height } of rects) {
+                const el = createSVGElement('rect')
+                el.setAttribute('x', (right + left) / 2)
+                el.setAttribute('y', top)
+                el.setAttribute('height', height)
+                el.setAttribute('width', strokeWidth)
+                g.append(el)
+            }
+        else for (const { left, top, bottom, width } of rects) {
+            const el = createSVGElement('rect')
+            el.setAttribute('x', left)
+            el.setAttribute('y', (top + bottom) / 2)
+            el.setAttribute('height', strokeWidth)
+            el.setAttribute('width', width)
+            g.append(el)
+        }
+        return g
+    }
+    static squiggly(rects, options = {}) {
+        const { color = 'red', width: strokeWidth = 2, writingMode } = options
+        const g = createSVGElement('g')
+        g.setAttribute('fill', 'none')
+        g.setAttribute('stroke', color)
+        g.setAttribute('stroke-width', strokeWidth)
+        const block = strokeWidth * 1.5
+        if (writingMode === 'vertical-rl' || writingMode === 'vertical-lr')
+            for (const { right, top, height } of rects) {
+                const el = createSVGElement('path')
+                const n = Math.round(height / block / 1.5)
+                const inline = height / n
+                const ls = Array.from({ length: n },
+                    (_, i) => `l${i % 2 ? -block : block} ${inline}`).join('')
+                el.setAttribute('d', `M${right} ${top}${ls}`)
+                g.append(el)
+            }
+        else for (const { left, bottom, width } of rects) {
+            const el = createSVGElement('path')
+            const n = Math.round(width / block / 1.5)
+            const inline = width / n
+            const ls = Array.from({ length: n },
+                (_, i) => `l${inline} ${i % 2 ? block : -block}`).join('')
+            el.setAttribute('d', `M${left} ${bottom}${ls}`)
+            g.append(el)
+        }
+        return g
+    }
+    static highlight(rects, options = {}) {
+        const { color = 'red' } = options
+        const g = createSVGElement('g')
+        g.setAttribute('fill', color)
+        g.style.opacity = 'var(--overlayer-highlight-opacity, .3)'
+        g.style.mixBlendMode = 'var(--overlayer-highlight-blend-mode, normal)'
+        for (const { left, top, height, width } of rects) {
+            const el = createSVGElement('rect')
+            el.setAttribute('x', left)
+            el.setAttribute('y', top)
+            el.setAttribute('height', height)
+            el.setAttribute('width', width)
+            g.append(el)
+        }
+        return g
+    }
+    static outline(rects, options = {}) {
+        const { color = 'red', width: strokeWidth = 3, radius = 3 } = options
+        const g = createSVGElement('g')
+        g.setAttribute('fill', 'none')
+        g.setAttribute('stroke', color)
+        g.setAttribute('stroke-width', strokeWidth)
+        for (const { left, top, height, width } of rects) {
+            const el = createSVGElement('rect')
+            el.setAttribute('x', left)
+            el.setAttribute('y', top)
+            el.setAttribute('height', height)
+            el.setAttribute('width', width)
+            el.setAttribute('rx', radius)
+            g.append(el)
+        }
+        return g
+    }
+    // make an exact copy of an image in the overlay
+    // one can then apply filters to the entire element, without affecting them;
+    // it's a bit silly and probably better to just invert images twice
+    // (though the color will be off in that case if you do heu-rotate)
+    static copyImage([rect], options = {}) {
+        const { src } = options
+        const image = createSVGElement('image')
+        const { left, top, height, width } = rect
+        image.setAttribute('href', src)
+        image.setAttribute('x', left)
+        image.setAttribute('y', top)
+        image.setAttribute('height', height)
+        image.setAttribute('width', width)
+        return image
+    }
+}
+

package/lib/vue-book-reader.es.js

@@ -1789,7 +1789,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Toc = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-9d18782d"]]);
+const Toc = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-56e71b55"]]);
 const _hoisted_1 = { class: "container" };
 const _hoisted_2 = ["title"];
 const _hoisted_3 = { key: 0 };
@@ -1931,7 +1931,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const VueReader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-94907056"]]);
+const VueReader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ce33d15c"]]);
 const findIndices = (arr, f2) => arr.map((x2, i2, a2) => f2(x2, i2, a2) ? i2 : null).filter((x2) => x2 != null);
 const splitAt = (arr, is) => [-1, ...is, arr.length].reduce(({ xs, a: a2 }, b2) => ({ xs: (xs == null ? void 0 : xs.concat([arr.slice(a2 + 1, b2)])) ?? [], a: b2 }), {}).xs;
 const concatArrays = (a2, b2) => a2.slice(0, -1).concat([a2[a2.length - 1].concat(b2[0])]).concat(b2.slice(1));

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

@@ -3,7 +3,7 @@
 })(this, (function(exports2, vue) {
   "use strict";
   var __vite_style__ = document.createElement("style");
-  __vite_style__.textContent = "\n.reader[data-v-cbfdb46e] {\r\n  position: absolute;\r\n  inset: 50px 50px 20px;\n}\n.viewHolder[data-v-cbfdb46e] {\r\n  height: 100%;\r\n  width: 100%;\r\n  position: relative;\n}\n#viewer[data-v-cbfdb46e] {\r\n  height: 100%;\n}\r\n\r\n/* ↓ */\n.tocAreaButton .expansion[data-v-9d18782d]::before {\r\n  transform: rotate(-45deg) translateX(2.5px);\n}\n.tocAreaButton .expansion[data-v-9d18782d]::after {\r\n  transform: rotate(45deg) translateX(-2.5px);\n}\r\n\r\n/* ↑ */\n.tocAreaButton .open[data-v-9d18782d]::before {\r\n  transform: rotate(45deg) translateX(2.5px);\n}\n.tocAreaButton .open[data-v-9d18782d]::after {\r\n  transform: rotate(-45deg) translateX(-2.5px);\n}\n.tocAreaButton[data-v-9d18782d] {\r\n  user-select: none;\r\n  appearance: none;\r\n  background: none;\r\n  border: none;\r\n  display: block;\r\n  font-family: sans-serif;\r\n  width: 100%;\r\n  font-size: 0.9em;\r\n  text-align: left;\r\n  padding: 0.9em 1em;\r\n  border-bottom: 1px solid #ddd;\r\n  color: #aaa;\r\n  box-sizing: border-box;\r\n  outline: none;\r\n  cursor: pointer;\r\n  position: relative;\n}\n.tocAreaButton[data-v-9d18782d]:hover {\r\n  background: rgba(0, 0, 0, 0.05);\n}\n.tocAreaButton[data-v-9d18782d]:active {\r\n  background: rgba(0, 0, 0, 0.1);\n}\n.active[data-v-9d18782d] {\r\n  color: #1565c0;\r\n  border-bottom: 2px solid #1565c0;\n}\r\n\r\n/* 二级目录 */\n.tocAreaButton .expansion[data-v-9d18782d] {\r\n  cursor: pointer;\r\n  transform: translateY(-50%);\r\n  top: 50%;\r\n  right: 12px;\r\n  position: absolute;\r\n  width: 10px;\r\n  background-color: #a2a5b4;\r\n  transition:\r\n    transform 0.3s ease-in-out,\r\n    top 0.3s ease-in-out;\n}\n.tocAreaButton .expansion[data-v-9d18782d]::after,\r\n.tocAreaButton .expansion[data-v-9d18782d]::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: 6px;\r\n  height: 2px;\r\n  background-color: currentcolor;\r\n  border-radius: 2px;\r\n  transition:\r\n    transform 0.3s ease-in-out,\r\n    top 0.3s ease-in-out;\n}\r\n\r\n/* container */\n.container[data-v-94907056] {\r\n  overflow: hidden;\r\n  position: relative;\r\n  height: 100%;\n}\n.containerExpanded[data-v-94907056] {\r\n  transform: translateX(256px);\n}\n.readerArea[data-v-94907056] {\r\n  position: relative;\r\n  z-index: 1;\r\n  height: 100%;\r\n  width: 100%;\r\n  background-color: #fff;\r\n  transition: all 0.3s ease;\n}\n.container .titleArea[data-v-94907056] {\r\n  position: absolute;\r\n  top: 20px;\r\n  left: 50px;\r\n  right: 50px;\r\n  text-align: center;\r\n  color: #999;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\n}\r\n\r\n/* toc */\n.tocBackground[data-v-94907056] {\r\n  position: absolute;\r\n  left: 256px;\r\n  top: 0;\r\n  bottom: 0;\r\n  right: 0;\r\n  z-index: 1;\n}\n.tocArea[data-v-94907056] {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  bottom: 0;\r\n  z-index: 0;\r\n  width: 256px;\r\n  overflow-y: auto;\r\n  -webkit-overflow-scrolling: touch;\r\n  background: #f2f2f2;\r\n  padding: 10px 0;\n}\r\n\r\n/* 滚动条 */\n.tocArea[data-v-94907056]::-webkit-scrollbar {\r\n  width: 5px;\r\n  height: 5px;\n}\n.tocArea[data-v-94907056]::-webkit-scrollbar-thumb:vertical {\r\n  height: 5px;\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n  border-radius: 0.5rem;\n}\r\n\r\n/* tocButton */\n.tocButton[data-v-94907056] {\r\n  background: none;\r\n  border: none;\r\n  width: 32px;\r\n  height: 32px;\r\n  position: absolute;\r\n  top: 10px;\r\n  left: 10px;\r\n  border-radius: 2px;\r\n  outline: none;\r\n  cursor: pointer;\n}\n.tocButtonBar[data-v-94907056] {\r\n  position: absolute;\r\n  width: 60%;\r\n  background: #ccc;\r\n  height: 2px;\r\n  left: 50%;\r\n  margin: -1px -30%;\r\n  top: 50%;\r\n  transition: all 0.5s ease;\n}\n.tocButtonExpanded[data-v-94907056] {\r\n  background: #f2f2f2;\n}\r\n\r\n/* 翻页 */\n.arrow[data-v-94907056] {\r\n  outline: none;\r\n  border: none;\r\n  background: none;\r\n  position: absolute;\r\n  top: 50%;\r\n  margin-top: -32px;\r\n  font-size: 64px;\r\n  padding: 0 10px;\r\n  color: #e2e2e2;\r\n  font-family: arial, sans-serif;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  appearance: none;\r\n  font-weight: normal;\n}\n.arrow[data-v-94907056]:hover {\r\n  color: #777;\n}\n.arrow[data-v-94907056]:disabled {\r\n  cursor: not-allowed;\r\n  color: #e2e2e2;\n}\n.prev[data-v-94907056] {\r\n  left: 1px;\n}\n.next[data-v-94907056] {\r\n  right: 1px;\n}\r\n\r\n/* loading */\n.loadingView[data-v-94907056] {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 10%;\r\n  right: 10%;\r\n  color: #ccc;\r\n  text-align: center;\r\n  margin-top: -0.5em;\n}\r\n\r\n/* errorView */\n.errorView[data-v-94907056] {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 10%;\r\n  right: 10%;\r\n  color: #c00;\r\n  text-align: center;\r\n  margin-top: -0.5em;\n}\r\n/*$vite$:1*/";
+  __vite_style__.textContent = "\n.reader[data-v-cbfdb46e] {\r\n  position: absolute;\r\n  inset: 50px 50px 20px;\n}\n.viewHolder[data-v-cbfdb46e] {\r\n  height: 100%;\r\n  width: 100%;\r\n  position: relative;\n}\n#viewer[data-v-cbfdb46e] {\r\n  height: 100%;\n}\r\n\r\n/* ↓ */\n.tocAreaButton .expansion[data-v-56e71b55]::before {\r\n  transform: rotate(-45deg) translateX(2.5px);\n}\n.tocAreaButton .expansion[data-v-56e71b55]::after {\r\n  transform: rotate(45deg) translateX(-2.5px);\n}\r\n\r\n/* ↑ */\n.tocAreaButton .open[data-v-56e71b55]::before {\r\n  transform: rotate(45deg) translateX(2.5px);\n}\n.tocAreaButton .open[data-v-56e71b55]::after {\r\n  transform: rotate(-45deg) translateX(-2.5px);\n}\n.tocAreaButton[data-v-56e71b55] {\r\n  user-select: none;\r\n  appearance: none;\r\n  background: none;\r\n  border: none;\r\n  display: block;\r\n  font-family: sans-serif;\r\n  width: 100%;\r\n  font-size: 0.9em;\r\n  text-align: left;\r\n  padding: 0.9em 1em;\r\n  border-bottom: 1px solid #ddd;\r\n  color: #aaa;\r\n  box-sizing: border-box;\r\n  outline: none;\r\n  cursor: pointer;\r\n  position: relative;\n}\n.tocAreaButton[data-v-56e71b55]:hover {\r\n  background: rgba(0, 0, 0, 0.05);\n}\n.tocAreaButton[data-v-56e71b55]:active {\r\n  background: rgba(0, 0, 0, 0.1);\n}\n.active[data-v-56e71b55] {\r\n  color: #1565c0;\r\n  border-bottom: 2px solid #1565c0;\n}\r\n\r\n/* 二级目录 */\n.tocAreaButton .expansion[data-v-56e71b55] {\r\n  cursor: pointer;\r\n  transform: translateY(-50%);\r\n  top: 50%;\r\n  right: 12px;\r\n  position: absolute;\r\n  width: 10px;\r\n  background-color: #a2a5b4;\r\n  transition:\r\n    transform 0.3s ease-in-out,\r\n    top 0.3s ease-in-out;\n}\n.tocAreaButton .expansion[data-v-56e71b55]::after,\r\n.tocAreaButton .expansion[data-v-56e71b55]::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: 6px;\r\n  height: 2px;\r\n  background-color: currentcolor;\r\n  border-radius: 2px;\r\n  transition:\r\n    transform 0.3s ease-in-out,\r\n    top 0.3s ease-in-out;\n}\r\n\r\n/* container */\n.container[data-v-ce33d15c] {\r\n  overflow: hidden;\r\n  position: relative;\r\n  height: 100%;\n}\n.containerExpanded[data-v-ce33d15c] {\r\n  transform: translateX(256px);\n}\n.readerArea[data-v-ce33d15c] {\r\n  position: relative;\r\n  z-index: 1;\r\n  height: 100%;\r\n  width: 100%;\r\n  background-color: #fff;\r\n  transition: all 0.3s ease;\n}\n.container .titleArea[data-v-ce33d15c] {\r\n  position: absolute;\r\n  top: 20px;\r\n  left: 50px;\r\n  right: 50px;\r\n  text-align: center;\r\n  color: #999;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\n}\r\n\r\n/* toc */\n.tocBackground[data-v-ce33d15c] {\r\n  position: absolute;\r\n  left: 256px;\r\n  top: 0;\r\n  bottom: 0;\r\n  right: 0;\r\n  z-index: 1;\n}\n.tocArea[data-v-ce33d15c] {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  bottom: 0;\r\n  z-index: 0;\r\n  width: 256px;\r\n  overflow-y: auto;\r\n  -webkit-overflow-scrolling: touch;\r\n  background: #f2f2f2;\r\n  padding: 10px 0;\n}\r\n\r\n/* 滚动条 */\n.tocArea[data-v-ce33d15c]::-webkit-scrollbar {\r\n  width: 5px;\r\n  height: 5px;\n}\n.tocArea[data-v-ce33d15c]::-webkit-scrollbar-thumb:vertical {\r\n  height: 5px;\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n  border-radius: 0.5rem;\n}\r\n\r\n/* tocButton */\n.tocButton[data-v-ce33d15c] {\r\n  background: none;\r\n  border: none;\r\n  width: 32px;\r\n  height: 32px;\r\n  position: absolute;\r\n  top: 10px;\r\n  left: 10px;\r\n  border-radius: 2px;\r\n  outline: none;\r\n  cursor: pointer;\n}\n.tocButtonBar[data-v-ce33d15c] {\r\n  position: absolute;\r\n  width: 60%;\r\n  background: #ccc;\r\n  height: 2px;\r\n  left: 50%;\r\n  margin: -1px -30%;\r\n  top: 50%;\r\n  transition: all 0.5s ease;\n}\n.tocButtonExpanded[data-v-ce33d15c] {\r\n  background: #f2f2f2;\n}\r\n\r\n/* 翻页 */\n.arrow[data-v-ce33d15c] {\r\n  outline: none;\r\n  border: none;\r\n  background: none;\r\n  position: absolute;\r\n  top: 50%;\r\n  margin-top: -32px;\r\n  font-size: 64px;\r\n  padding: 0 10px;\r\n  color: #e2e2e2;\r\n  font-family: arial, sans-serif;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  appearance: none;\r\n  font-weight: normal;\n}\n.arrow[data-v-ce33d15c]:hover {\r\n  color: #777;\n}\n.arrow[data-v-ce33d15c]:disabled {\r\n  cursor: not-allowed;\r\n  color: #e2e2e2;\n}\n.prev[data-v-ce33d15c] {\r\n  left: 1px;\n}\n.next[data-v-ce33d15c] {\r\n  right: 1px;\n}\r\n\r\n/* loading */\n.loadingView[data-v-ce33d15c] {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 10%;\r\n  right: 10%;\r\n  color: #ccc;\r\n  text-align: center;\r\n  margin-top: -0.5em;\n}\r\n\r\n/* errorView */\n.errorView[data-v-ce33d15c] {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 10%;\r\n  right: 10%;\r\n  color: #c00;\r\n  text-align: center;\r\n  margin-top: -0.5em;\n}\r\n/*$vite$:1*/";
   document.head.appendChild(__vite_style__);
   function keyListener(el, fn) {
     el.addEventListener(
@@ -1795,7 +1795,7 @@
       };
     }
   });
-  const Toc = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-9d18782d"]]);
+  const Toc = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-56e71b55"]]);
   const _hoisted_1 = { class: "container" };
   const _hoisted_2 = ["title"];
   const _hoisted_3 = { key: 0 };
@@ -1937,7 +1937,7 @@
       };
     }
   });
-  const VueReader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-94907056"]]);
+  const VueReader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ce33d15c"]]);
   const findIndices = (arr, f2) => arr.map((x2, i2, a2) => f2(x2, i2, a2) ? i2 : null).filter((x2) => x2 != null);
   const splitAt = (arr, is) => [-1, ...is, arr.length].reduce(({ xs, a: a2 }, b2) => ({ xs: (xs == null ? void 0 : xs.concat([arr.slice(a2 + 1, b2)])) ?? [], a: b2 }), {}).xs;
   const concatArrays = (a2, b2) => a2.slice(0, -1).concat([a2[a2.length - 1].concat(b2[0])]).concat(b2.slice(1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-book-reader",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "main": "lib/vue-book-reader.umd.js",
   "module": "lib/vue-book-reader.es.js",
@@ -48,6 +48,7 @@
     "typescript": "^5.4.5",
     "vite": "^7.3.1",
     "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-static-copy": "^3.2.0",
     "vue": "^3.5.27",
     "vue-tsc": "^2.0.6"
   },