@airhang/vue-book-reader 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@airhang/vue-book-reader",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A Vue.js book reader component with multiple flip modes, catalog, and page jump features",
   "main": "dist/vue-book-reader.common.js",
   "module": "dist/vue-book-reader.umd.js",
@@ -24,6 +24,7 @@
     "vue": "^2.6.0"
   },
   "dependencies": {
+    "@airhang/vue-book-reader": "^1.0.1",
     "flipbook-vue": "^1.0.0-beta.4"
   },
   "devDependencies": {

package/src/components/BookReader.vue

@@ -6,7 +6,6 @@
     @touchend="onContainerTouchEnd"
     @dblclick="onContainerDoubleClick"
     @click="onContentClick"
-    :style="{ transform: `scale(${zoomScale}) translate(${translateX}px, ${translateY}px)` }"
   >
     <div class="album-header" v-if="false">
       <h1>氪氪</h1>
@@ -16,6 +15,7 @@
     <div
       v-if="contentReady"
       class="flipbook-wrapper"
+      :style="{ transform: `scale(${zoomScale}) translate(${translateX}px, ${translateY}px)` }"
       @dblclick="onFlipbookDoubleClick"
       @touchstart.capture="onFlipbookTouchStart"
       @touchend.capture="onFlipbookTouchEnd"
@@ -238,6 +238,12 @@
         <button @click="resetZoom" class="btn-reset-zoom">重置</button>
       </div>
     </div>
+
+    <!-- PC端缩放工具栏 -->
+    <div class="zoom-toolbar">
+      <button @click="zoomOut" class="btn-zoom" :disabled="zoomScale <= 0.5">-</button>
+      <button @click="zoomIn" class="btn-zoom" :disabled="zoomScale >= 3">+</button>
+    </div>
     
     <!-- 加载状态覆盖层 -->
     <div v-if="loading" class="loading-overlay">
@@ -816,6 +822,20 @@ export default {
       this.translateX = 0
       this.translateY = 0
     },
+
+    /**
+     * 放大
+     */
+    zoomIn() {
+      this.zoomScale = Math.min(3, this.zoomScale + 0.2)
+    },
+
+    /**
+     * 缩小
+     */
+    zoomOut() {
+      this.zoomScale = Math.max(0.5, this.zoomScale - 0.2)
+    },
     
     /**
      * PC端双击事件处理
@@ -2156,36 +2176,74 @@ export default {
   color: rgba(255, 255, 255, 0.9);
 }
 
+/* PC端缩放工具栏 */
+.zoom-toolbar {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  gap: 8px;
+  z-index: 10000;
+}
+
+.btn-zoom {
+  width: 40px;
+  height: 40px;
+  background: #333;
+  color: white;
+  border: 1px solid #666;
+  border-radius: 4px;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-zoom:hover:not(:disabled) {
+  background: #555;
+}
+
+.btn-zoom:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
 /* 移动端按钮优化 */
 @media (max-width: 768px) {
+  .zoom-toolbar {
+    display: none;
+  }
+
   .btn:active {
     background: #555;
     transform: none;
   }
-  
+
   .btn:hover:not(:disabled) {
     background: #555;
     transform: none;
   }
-  
+
   .btn-catalogue {
     padding: 8px 12px;
     font-size: 0.8rem;
     border-radius: 16px;
   }
-  
+
   .btn-catalogue .drag-handle {
     font-size: 16px;
   }
-  
+
   .catalogue-icon {
     font-size: 0.9rem;
   }
-  
+
   .catalogue-text {
     font-size: 0.8rem;
   }
-  
+
   .zoom-hint {
     top: 10px;
     right: 10px;