feat： 合页逻辑处理

play/index.css

@@ -41,6 +41,63 @@ body {
   justify-content: center;
 }
 
+/* 多页显示样式 */
+.page-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  margin: 0;
+  padding: 0;
+}
+
+/* 多页时的容器样式 */
+.image-container.multi-page-container {
+  justify-content: stretch;
+  gap: 0;
+}
+
+.image-container.multi-page-container .page-wrapper {
+  flex: 1;
+  width: 50%;
+  margin: 0;
+  padding: 0;
+}
+
+/* 单页时的容器样式 */
+.image-container:not(.multi-page-container) {
+  justify-content: center;
+}
+
+.image-container:not(.multi-page-container) .page-wrapper {
+  flex: none;
+  width: auto;
+}
+
+.page-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+/* 多页时的样式 */
+.page-image.multi-page {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  margin: 0;
+  padding: 0;
+}
+
+/* 当只有一页时的样式 */
+.page-image:not(.multi-page) {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
 .highlight-rect {
   position: absolute;
   border: 2px dashed #007bff;
@@ -61,15 +118,6 @@ body {
   box-shadow: 0 0 5px rgba(255, 235, 59, 0.5);
 }
 
-.image-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .controls {
   position: absolute;
   bottom: 20px;

play/index.html

@@ -47,15 +47,19 @@
       </button>
       
       <!-- 图片容器 -->
-      <div class="image-container">
+      <div class="image-container" :class="{ 'multi-page-container': currentPages.length > 1 }">
+        <!-- 多页显示 -->
+        <div v-for="(page, pageIndex) in currentPages" :key="pageIndex" class="page-wrapper">
           <img 
-          v-if="currentPage" 
-          :src="currentPage.image_url" 
-          :alt="'第' + (currentPageIndex + 1) + '页'"
+            v-if="page.image_url" 
+            :src="page.image_url" 
+            :alt="'第' + (currentPageIndices[pageIndex] + 1) + '页'"
             class="page-image"
+            :class="{ 'multi-page': currentPages.length > 1 }"
             @load="onImageLoad"
             @error="onImageError"
           />
+        </div>
         
         <!-- 蓝色矩形框 -->
         <div