feat(Gemini): 左右翻页优化

src/main/resources/static/css/reader.css

@@ -32,16 +32,38 @@
     flex: 1;
     overflow: hidden;
     position: relative;
-    padding: var(--spacing-lg);
+    /* 增加左右内边距，作为页面边距，同时避免文字贴边 */
+    padding: 0 20px;
     padding-top: calc(var(--spacing-xl) + var(--safe-area-top));
     padding-bottom: calc(var(--spacing-lg) + var(--safe-area-bottom));
+    padding-left: calc(20px + var(--safe-area-left));
+    padding-right: calc(20px + var(--safe-area-right));
+    box-sizing: border-box;
 }
 
 .page-content {
-    max-width: 720px;
+    height: 100%;
-    margin: 0 auto;
+    margin: 0;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-sizing: border-box;
+    
+    /* 多栏布局 - 实现横向分页 */
+    column-fill: auto;
+    /* gap由js设置为0，这里设个默认值 */
+    column-gap: 0;
+    
+    /* 动画 */
+    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
     will-change: transform;
+    
+    /* 确保文本对齐 */
+    text-align: justify;
+}
+
+.page-content p {
+    margin-bottom: 1em;
+    /* 防止段落内分页断行太过难看 */
+    widows: 2;
+    orphans: 2;
 }
 
 /* 页码指示器 */

src/main/resources/static/js/reader.js

@@ -19,6 +19,8 @@ const Reader = (function() {
     let touchEndX = 0;
     let touchEndY = 0;
     let isSwiping = false;
+    let pageStride = 0; // 翻页跨度（宽度+间距）
+    const PAGE_GAP = 32; // 页间距
     
     // ========== 初始化阅读器 ==========
     
@@ -174,12 +176,34 @@ const Reader = (function() {
         
         if (!$container.length || !$content.length) return;
         
+        // 1. 获取内容区域可用宽度（jQuery .width() 返回减去padding后的宽度）
+        const contentWidth = $container.width();
         const containerHeight = $container.height();
-        const contentHeight = $content[0].scrollHeight;
         
-        // 计算总页数
+        // 设置较大的 gap 以防止相邻页内容出现在 padding 区域中
-        totalPages = Math.max(1, Math.ceil(contentHeight / containerHeight));
+        // 容器 overflow:hidden 只能裁剪 border-box 以外的内容，padding 区域仍会显示子元素溢出的内容
-        pageContents = [];
+        // 所以需要让 gap 大于 padding 的宽度
+        const gap = 80; 
+        
+        // 2. 设置分栏布局
+        $content.css({
+            'height': containerHeight + 'px',
+            'column-width': contentWidth + 'px',
+            'column-gap': gap + 'px',
+            'width': 'auto',
+            'padding': '0'
+        });
+        
+        // 3. 计算总页数
+        const scrollWidth = $content[0].scrollWidth;
+        // 步长 = 内容宽度 + 间距
+        pageStride = contentWidth + gap;
+        
+        // 防止除零错误
+        if (pageStride <= 0) pageStride = 1;
+        
+        // 计算页数 (允许误差)
+        totalPages = Math.max(1, Math.ceil((scrollWidth + gap/2) / pageStride));
         
         // 更新页码显示
         $('.page-total').text(totalPages);
@@ -191,25 +215,25 @@ const Reader = (function() {
         } else {
             currentPage = 0;
         }
+        
+        // 立即应用位置
+        showPage(currentPage);
     }
     
     function showPage(pageIndex) {
         if (currentReadingMode !== 'page') return;
         
-        const $container = $('.page-container');
         const $content = $('.page-content');
-        
+        if (!$content.length) return;
-        if (!$container.length || !$content.length) return;
         
         // 确保页码在有效范围内
         pageIndex = Math.max(0, Math.min(pageIndex, totalPages - 1));
         currentPage = pageIndex;
         
-        const containerHeight = $container.height();
+        const translateX = pageIndex * pageStride;
-        const scrollTop = pageIndex * containerHeight;
         
-        // 使用transform进行平滑翻页
+        // 使用translateX进行平滑横向翻页
-        $content.css('transform', `translateY(-${scrollTop}px)`);
+        $content.css('transform', `translateX(-${translateX}px)`);
         
         // 更新页码显示
         $('.page-current').text(currentPage + 1);