@airhang/vue-book-reader 1.0.0

package/src/components/BookReader.vue

@@ -0,0 +1,3003 @@
+<template>
+  <div
+    class="photo-album-container"
+    @touchstart="onContainerTouchStart"
+    @touchmove="onContainerTouchMove"
+    @touchend="onContainerTouchEnd"
+    @dblclick="onContainerDoubleClick"
+    @click="onContentClick"
+    :style="{ transform: `scale(${zoomScale}) translate(${translateX}px, ${translateY}px)` }"
+  >
+    <div class="album-header" v-if="false">
+      <h1>氪氪</h1>
+      <!-- <p>双页模式 - 双击图片放大，滚轮缩放，拖拽翻页</p> -->
+    </div>
+    
+    <div
+      v-if="contentReady"
+      class="flipbook-wrapper"
+      @dblclick="onFlipbookDoubleClick"
+      @touchstart.capture="onFlipbookTouchStart"
+      @touchend.capture="onFlipbookTouchEnd"
+    >
+      <!-- 仿真翻页模式 -->
+      <flipbook
+        v-if="flipMode === 'flip' && flag"
+        :class="['flipbook', isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized']"
+        :pages="pages"
+        :pagesHiRes="pagesHiRes"
+        :startPage="startPage"
+        v-slot="{ page, canFlipLeft, canFlipRight }"
+        ref="flipbook"
+        @flip-left-end="onFlipLeftEnd"
+        @flip-right-end="onFlipRightEnd"
+        :zooms="null"
+        :ambient-light="0.6"
+        :gloss="0.4"
+        :single-page="isMobile"
+        :click-to-flip="false"
+        :wheel-to-flip="!isMobile"
+        :swipe-to-flip="true"
+        :center-pages="true"
+      >
+      </flipbook>
+      
+      <!-- 滑动翻页模式 -->
+      <div
+        v-else-if="flipMode === 'slide'"
+        :class="['slide-viewer', isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized']"
+        ref="slideViewer"
+        @touchstart="onSlideViewerTouchStart"
+        @touchmove="onSlideViewerTouchMove"
+        @touchend="onSlideViewerTouchEnd"
+      >
+        <div class="slide-container" :style="slideContainerStyle">
+          <div
+            v-for="(page, index) in pages"
+            :key="index"
+            class="slide-page"
+            :class="{ 'slide-page-active': index + 1 === currentPage }"
+          >
+            <img v-if="page" :src="page" alt="" class="slide-page-image" />
+            <div v-else class="slide-page-placeholder">封面/封底</div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 淡入淡出翻页模式 -->
+      <div
+        v-else-if="flipMode === 'fade'"
+        :class="['fade-viewer', isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized']"
+        ref="fadeViewer"
+      >
+        <transition name="fade-page" mode="out-in">
+          <div :key="currentPage" class="fade-page-container">
+            <img v-if="pages[currentPage - 1]" :src="pages[currentPage - 1]" alt="" class="fade-page-image" />
+            <div v-else class="fade-page-placeholder">封面/封底</div>
+          </div>
+        </transition>
+      </div>
+      
+      <!-- 垂直滚动模式 -->
+      <div
+        v-else-if="flipMode === 'scroll'"
+        :class="['scroll-viewer', isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized']"
+        ref="scrollViewer"
+        @scroll="onScrollViewerScroll"
+      >
+        <div class="scroll-container">
+          <div
+            v-for="(page, index) in pages"
+            :key="index"
+            class="scroll-page"
+            :ref="'scrollPage' + index"
+          >
+            <img v-if="page" :src="page" alt="" class="scroll-page-image" />
+            <div v-else class="scroll-page-placeholder">封面/封底</div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 截断特效模式 -->
+      <div
+        v-else-if="flipMode === 'clip'"
+        :class="['clip-viewer', isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized']"
+        ref="clipViewer"
+      >
+        <div class="clip-pages-wrapper">
+          <!-- 当前页 -->
+          <transition name="clip-current">
+            <div :key="'current-' + currentPage" class="clip-page clip-page-current">
+              <img v-if="pages[currentPage - 1]" :src="pages[currentPage - 1]" alt="" class="clip-page-image" />
+              <div v-else class="clip-page-placeholder">封面/封底</div>
+            </div>
+          </transition>
+          <!-- 下一页预览（部分可见） -->
+          <div v-if="currentPage < totalPages" class="clip-page clip-page-next">
+            <img v-if="pages[currentPage]" :src="pages[currentPage]" alt="" class="clip-page-image" />
+            <div v-else class="clip-page-placeholder">封面/封底</div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 卡片风格模式 -->
+      <div
+        v-else-if="flipMode === 'card'"
+        :class="['card-viewer', isMobile ? 'mobile-mode mobile-optimized' : 'desktop-mode desktop-optimized']"
+        ref="cardViewer"
+      >
+        <div class="card-stack">
+          <!-- 显示前后各一页的卡片堆叠效果 -->
+          <transition-group name="card-flip" tag="div" class="card-transition-group">
+            <div
+              v-for="(page, index) in visibleCards"
+              :key="'card-' + page.originalIndex"
+              class="card-item"
+              :class="{
+                'card-item-prev': page.position === 'prev',
+                'card-item-current': page.position === 'current',
+                'card-item-next': page.position === 'next'
+              }"
+              :style="getCardStyle(page.position)"
+            >
+              <div class="card-content">
+                <img v-if="page.src" :src="page.src" alt="" class="card-image" />
+                <div v-else class="card-placeholder">封面/封底</div>
+              </div>
+              <div class="card-page-number">{{ page.originalIndex + 1 }} / {{ totalPages }}</div>
+            </div>
+          </transition-group>
+        </div>
+      </div>
+    </div>
+
+    <div class="controls" :class="{ 'mobile-controls': isMobile, 'desktop-controls': !isMobile, 'controls-visible': showControls }" @click.stop>
+      <button @click="flipLeft" class="btn btn-prev">
+        ← 上一页
+      </button>
+      <span class="page-indicator">
+        <span v-if="totalPages === 0">加载中...</span>
+        <span v-else-if="currentPage === 1 && totalPages > 1">封面</span>
+        <span v-else-if="currentPage === totalPages && totalPages > 1">封底</span>
+        <span v-else-if="!isMobile && totalPages > 2">第 {{ Math.ceil((currentPage - 1) / 2) }} 组 / 共 {{ Math.ceil((totalPages - 2) / 2) }} 组</span>
+        <span v-else-if="isMobile && totalPages > 2">第 {{ Math.max(1, currentPage ) }} 页 / 共 {{ Math.max(0, totalPages - 2) }} 页</span>
+        <span v-else-if="totalPages === 1">第 1 页 / 共 1 页</span>
+        <span v-else>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
+      </span>
+      <button @click="flipRight" class="btn btn-next">
+        下一页 →
+      </button>
+    </div>
+
+    <!-- 页码跳转 - 放在翻页控件下方 -->
+    <!-- <div class="page-jump-container" :class="{ 'mobile-page-jump': isMobile }" @click.stop @touchstart.stop @touchmove.stop @touchend.stop @mousedown.stop @mouseup.stop>
+      <input
+        type="text"
+        :value="jumpPageInput"
+        @input="handlePageInput"
+        :placeholder="`搜索跳转`"
+        class="page-jump-input"
+        @click.stop
+        @mousedown.stop
+        @mouseup.stop
+      />
+      <button @click.stop="handleJumpToPage" @mousedown.stop @mouseup.stop class="btn btn-jump">
+        跳转
+      </button>
+    </div> -->
+
+    <!-- 翻页模式切换按钮（当URL没有指定模式时显示） -->
+    <div v-if="showFlipModeSelector" class="flip-mode-selector" :class="{ 'mobile-flip-mode-selector': isMobile }">
+      <button @click="toggleFlipModeMenu" class="btn btn-flip-mode">
+        <span class="flip-mode-icon">{{ flipModeIcon }}</span>
+        <span class="flip-mode-text">{{ flipModeLabel }}</span>
+      </button>
+      <div v-if="showFlipModeMenu" class="flip-mode-menu">
+        <div
+          v-for="mode in flipModes"
+          :key="mode.value"
+          class="flip-mode-item"
+          :class="{ 'flip-mode-item-active': flipMode === mode.value }"
+          @click="selectFlipMode(mode.value)"
+        >
+          <span class="flip-mode-item-icon">{{ mode.icon }}</span>
+          <span class="flip-mode-item-label">{{ mode.label }}</span>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 目录按钮 -->
+    <div
+      class="catalogue-button"
+      :class="{
+        'mobile-catalogue-button': isMobile,
+        'dragging': catalogueButtonDragging,
+        'catalogue-visible': showControls
+      }"
+      :style="{
+        left: catalogueButtonPosition.x + 'px',
+        top: catalogueButtonPosition.y + 'px'
+      }"
+      @mousedown="onCatalogueMouseDown"
+      @touchstart="onCatalogueTouchStart"
+      @touchmove="onCatalogueTouchMove"
+      @touchend="onCatalogueTouchEnd"
+      @click.stop
+    >
+      <button @click="openCatalogue" class="btn btn-catalogue">
+        <!-- <span class="drag-handle">⋮⋮</span> -->
+        <!-- <span class="catalogue-icon">☰</span> -->
+        <span class="catalogue-text">目录</span>
+      </button>
+    </div>
+    
+    <!-- 缩放提示 -->
+    <div class="zoom-hint" :class="{ 'show': zoomScale !== 1 }">
+      <div class="zoom-info">
+        <span>缩放: {{ Math.round(zoomScale * 100) }}%</span>
+        <button @click="resetZoom" class="btn-reset-zoom">重置</button>
+      </div>
+    </div>
+    
+    <!-- 加载状态覆盖层 -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-container">
+        <div class="loading-spinner">
+          <div class="spinner-ring"></div>
+          <div class="spinner-ring"></div>
+          <div class="spinner-ring"></div>
+        </div>
+        <div class="loading-text">
+          <h3>正在加载书籍</h3>
+          <p>请稍候，正在获取精彩内容...</p>
+          <div class="loading-progress">
+            <div class="progress-bar"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 错误状态 -->
+    <div v-if="error && !loading" class="error-container">
+      <div class="error-content">
+        <div class="error-icon">⚠️</div>
+        <h3>加载失败</h3>
+        <p>{{ error.message || '网络连接异常，请检查网络后重试' }}</p>
+        <button @click="fetchBooksData" class="retry-btn">
+          <span class="retry-icon">🔄</span>
+          重新加载
+        </button>
+      </div>
+    </div>
+
+    <!-- 成功状态提示（短暂显示） -->
+    <div v-if="booksData && !loading && !error" class="success-toast" :class="{ 'show': showSuccessToast }">
+      书籍加载完成
+    </div>
+
+    <!-- 书籍目录抽屉 -->
+    <book-catalogue-drawer
+      v-model="showCatalogueDrawer"
+      :book-id="bookId"
+      :catalogue="catalogue"
+      :loading="catalogueLoading"
+      @catalogue-click="onCatalogueClick"
+      @page-jump="onPageJump"
+      @Focus="onFocus"
+      @fetch-catalogue="onFetchCatalogue"
+    />
+
+    <!-- 调试信息 -->
+    <!-- <div class="debug-info" style="margin-top: 20px; color: #6c757d; text-align: center; font-size: 0.9rem;">
+      当前页: {{ currentPage }} / 总页数: {{ totalPages }} | 设备: {{ isMobile ? '移动端' : 'PC端' }}
+      <br>
+      <div v-if="booksData" style="margin-top: 10px; padding: 10px; background: #f8f9fa; border-radius: 5px; font-family: monospace; font-size: 0.8rem; text-align: left; max-height: 200px; overflow-y: auto;">
+        <strong>接口返回数据:</strong><br>
+        {{ JSON.stringify(booksData, null, 2) }}
+      </div>
+    </div> -->
+    <!-- <div class="debug-info" style="margin-top: 20px; color: #6c757d; text-align: center; font-size: 0.9rem;">
+      当前页: {{ currentPage }} / 总页数: {{ totalPages }} | 设备: {{ isMobile ? '移动端' : 'PC端' }} | 模式: {{ isMobile ? '单页' : '双页' }}
+      <br>
+    </div> -->
+
+  </div>
+</template>
+
+<script>
+import Flipbook from 'flipbook-vue/vue2'
+import BookCatalogueDrawer from './BookCatalogueDrawer.vue'
+
+export default {
+  name: 'PhotoAlbumView',
+  components: {
+    Flipbook,
+    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)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.photo-album-container {
+  /* min-height: 100vh; */
+  background: transparent;
+  padding: 5px 5px 80px 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center center;
+  transition: transform 0.2s ease-out;
+  overflow: hidden;
+  position: relative;
+}
+
+.album-header {
+  text-align: center;
+  color: #495057;
+  margin-bottom: 30px;
+}
+
+.album-header h1 {
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+  font-weight: 600;
+}
+
+.album-header p {
+  font-size: 1.1rem;
+  opacity: 0.9;
+}
+
+.flipbook-wrapper {
+  perspective: 2000px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.flipbook {
+  width: 1600px;
+  height: 1200px;
+  box-shadow: none;
+  border-radius: 0;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+/* 隐藏标题时的调整 */
+.album-header[style*="display: none"],
+.album-header[v-if="false"] {
+  display: none !important;
+}
+
+.photo-album-container:has(.album-header[v-if="false"]) .flipbook,
+.photo-album-container .flipbook {
+  max-height: calc(100vh - 100px);
+}
+
+/* 移动端单页模式样式 */
+.flipbook.mobile-mode {
+  width: 100%;
+  max-width: none;
+  height: 92vh;
+  max-height: 92vh;
+  margin: 0 auto;
+}
+
+/* PC端双页模式样式 */
+.flipbook.desktop-mode {
+  width: 1600px;
+  height: 1200px;
+  margin: 0 auto;
+}
+
+.page {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  border-radius: 5px;
+}
+
+.page--cover {
+  background: linear-gradient(45deg, #e9ecef 0%, #dee2e6 50%, #ced4da 100%);
+  color: #495057;
+}
+
+.cover-page, .back-cover {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+}
+
+.cover-page h2 {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+  font-weight: bold;
+}
+
+.cover-page p {
+  font-size: 1.5rem;
+  opacity: 0.9;
+  margin-bottom: 30px;
+}
+
+.cover-decoration {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.decoration-line {
+  width: 60px;
+  height: 2px;
+  background: rgba(73,80,87,0.6);
+  border-radius: 1px;
+}
+
+.cover-decoration span {
+  font-size: 1.1rem;
+  opacity: 0.9;
+  white-space: nowrap;
+}
+
+.back-cover h3 {
+  font-size: 2.5rem;
+  margin-bottom: 15px;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.back-cover p {
+  font-size: 1.2rem;
+  opacity: 0.8;
+  margin-bottom: 30px;
+}
+
+.back-decoration p {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+}
+
+.back-decoration small {
+  opacity: 0.7;
+  font-size: 1rem;
+}
+
+.content-page {
+  padding: 20px;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.image-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.image-container img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  transition: transform 0.3s ease;
+}
+
+.image-container img:hover {
+  transform: scale(1.02);
+}
+
+.page-content-info {
+  background: rgba(255,255,255,0.95);
+  padding: 8px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  backdrop-filter: blur(10px);
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+
+.image-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #2c3e50;
+  margin-bottom: 8px;
+  text-align: center;
+  display: block;
+}
+
+.image-description {
+  font-size: 0.9rem;
+  color: #5a6c7d;
+  line-height: 1.4;
+  text-align: center;
+  margin-bottom: 10px;
+  display: block;
+}
+
+.page-number {
+  text-align: center;
+  padding-top: 10px;
+  border-top: 1px solid rgba(0,0,0,0.1);
+}
+
+.page-number span {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: bold;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background: transparent;
+  padding: 12px 20px;
+  border-radius: 0;
+  backdrop-filter: none;
+  box-shadow: none;
+  border: none;
+  width: fit-content;
+  margin: 20px auto;
+  z-index: 1000;
+}
+
+.desktop-controls {
+  position: relative;
+  margin: 20px auto;
+}
+
+.mobile-controls {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+  max-width: 90vw;
+}
+
+.btn {
+  background: #333;
+  color: white;
+  border: 1px solid #666;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+  box-shadow: none;
+}
+
+.btn:hover:not(:disabled) {
+  background: #555;
+  transform: none;
+  box-shadow: none;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.page-indicator {
+  color: #495057;
+  font-size: 0.95rem;
+  font-weight: bold;
+  text-shadow: none;
+  min-width: 70px;
+  text-align: center;
+}
+
+/* 页码跳转容器样式 */
+.page-jump-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 10px 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  width: fit-content;
+  margin: 10px auto 0;
+}
+
+.mobile-page-jump {
+  padding: 8px 12px;
+  margin: 10px auto 0;
+}
+
+.page-jump-input {
+  width: 120px;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: #fff;
+  color: #333;
+  font-size: 16px;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.page-jump-input:focus {
+  border-color: #333;
+  box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1);
+}
+
+.page-jump-input::placeholder {
+  color: #999;
+  font-size: 0.85rem;
+}
+
+.btn-jump {
+  padding: 8px 16px;
+  white-space: nowrap;
+  background: #333;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.btn-jump:hover {
+  background: #555;
+}
+
+/* PC端响应式设计 */
+@media (max-width: 1800px) and (min-width: 769px) {
+  .flipbook.desktop-mode {
+    width: 95vw;
+    height: calc(95vw * 0.625);
+    max-width: 1600px;
+    max-height: 1000px;
+  }
+}
+
+/* 移动端样式 */
+@media (max-width: 768px) {
+  .photo-album-container {
+    padding: 5px 5px 120px 5px;
+    align-items: center;
+    touch-action: none;
+    overflow: hidden;
+  }
+
+  .flipbook-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .flipbook.mobile-mode {
+    width: 98vw;
+    height: 85vh;
+    max-width: none;
+    max-height: 85vh;
+    margin: 0 auto;
+  }
+
+  .album-header {
+    width: 100%;
+    text-align: center;
+  }
+
+  .album-header h1 {
+    font-size: 2rem;
+  }
+
+
+  .btn {
+    padding: 8px 16px;
+    font-size: 0.9rem;
+  }
+
+  .page-indicator {
+    font-size: 0.85rem;
+    min-width: 120px;
+    text-align: center;
+  }
+
+  /* 移动端页码跳转 */
+  .page-jump-container {
+    top: 10px;
+    right: 10px;
+    padding: 8px 10px;
+    gap: 6px;
+  }
+
+  .page-jump-input {
+    width: 100px;
+    padding: 6px 10px;
+    font-size: 0.85rem;
+  }
+
+  .btn-jump {
+    padding: 6px 12px;
+    font-size: 0.85rem;
+  }
+
+  /* 移动端图片优化 */
+  .image-container {
+    margin-bottom: 0;
+  }
+
+  .image-container img {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 6px;
+  }
+
+  .page-content-info {
+    padding: 6px;
+    margin-top: 2px;
+  }
+}
+
+@media (max-width: 480px) {
+  .flipbook.mobile-mode {
+    width: 98vw;
+    height: 80vh;
+    max-height: 80vh;
+    margin: 0 auto;
+  }
+  
+  .album-header h1 {
+    font-size: 1.8rem;
+  }
+  
+  .mobile-controls {
+    gap: 6px;
+    padding: 8px 12px;
+    justify-content: center;
+    align-items: center;
+    bottom: 15px;
+    width: 95%;
+    /* max-width: 95vw; */
+  }
+  
+  .btn {
+    padding: 6px 12px;
+    font-size: 0.8rem;
+  }
+  
+  .page-indicator {
+    text-align: center;
+    min-width: 100px;
+  }
+  
+  /* 小屏幕图片优化 */
+  .image-container {
+    margin-bottom: 0;
+  }
+  
+  .image-container img {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 4px;
+  }
+  
+  .page-content-info {
+    padding: 4px;
+    margin-top: 1px;
+  }
+}
+
+/* 设备特定的优化 */
+.mobile-optimized {
+  /* 移动端优化 */
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.desktop-optimized {
+  /* PC端优化 */
+  cursor: pointer;
+}
+
+/* 翻页按钮在不同设备上的样式 */
+.btn {
+  transition: all 0.2s ease;
+}
+
+.btn:hover:not(:disabled) {
+  background: #555;
+  transform: none;
+  box-shadow: none;
+}
+
+/* 缩放提示样式 */
+.zoom-hint {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: rgba(0, 0, 0, 0.85);
+  color: white;
+  padding: 10px 16px;
+  border-radius: 25px;
+  font-size: 0.85rem;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  z-index: 10001;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.zoom-hint.show {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.zoom-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.zoom-info span {
+  font-weight: 500;
+}
+
+.btn-reset-zoom {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 4px 12px;
+  border-radius: 15px;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.btn-reset-zoom:hover {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.5);
+  transform: scale(1.05);
+}
+
+.btn-reset-zoom:active {
+  transform: scale(0.95);
+}
+
+/* 控件显示/隐藏动画 */
+.controls {
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(20px);
+  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
+  display: flex;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.controls.controls-visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.mobile-controls {
+  position: fixed !important;
+  bottom: 76px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  z-index: 10000 !important;
+}
+
+.desktop-controls {
+  position: relative !important;
+  margin: 20px auto !important;
+}
+
+/* 目录按钮样式 */
+.catalogue-button {
+  position: fixed;
+  z-index: 9999999999;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(-20px);
+  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
+  user-select: none;
+}
+
+.catalogue-button.catalogue-visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+
+.catalogue-button.dragging {
+  transform: scale(1.05);
+  /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); */
+  z-index: 999999;
+}
+
+
+.btn-catalogue {
+  background: linear-gradient(45deg, #1989fa, #0066cc);
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  padding: 10px 16px;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgba(25, 137, 250, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: grab;
+  white-space: nowrap;
+  pointer-events: all;
+}
+
+.catalogue-button.dragging .btn-catalogue {
+  cursor: grabbing;
+  /* background: linear-gradient(45deg, #0066cc, #004499); */
+}
+
+.btn-catalogue:active {
+  transform: scale(0.98);
+}
+
+/* 拖拽手柄样式 */
+.btn-catalogue .drag-handle {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  margin-right: 2px;
+  user-select: none;
+}
+
+.catalogue-icon {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.catalogue-text {
+  font-size: 0.9rem;
+  flex-shrink: 0;
+}
+
+.btn-catalogue:hover {
+  background: linear-gradient(45deg, #0066cc, #004499);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(25, 137, 250, 0.4);
+}
+
+.btn-catalogue:hover .drag-handle {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* 移动端按钮优化 */
+@media (max-width: 768px) {
+  .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;
+    font-size: 0.75rem;
+  }
+}
+
+/* 加载状态样式 */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.loading-container {
+  text-align: center;
+  padding: 40px;
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 90%;
+}
+
+.loading-spinner {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 30px;
+}
+
+.spinner-ring {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 3px solid transparent;
+  border-top: 3px solid #007bff;
+  border-radius: 50%;
+  animation: spin 1.2s linear infinite;
+}
+
+.spinner-ring:nth-child(2) {
+  width: 60px;
+  height: 60px;
+  top: 10px;
+  left: 10px;
+  border-top-color: #28a745;
+  animation-delay: -0.4s;
+}
+
+.spinner-ring:nth-child(3) {
+  width: 40px;
+  height: 40px;
+  top: 20px;
+  left: 20px;
+  border-top-color: #ffc107;
+  animation-delay: -0.8s;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-text h3 {
+  color: #333;
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.loading-text p {
+  color: #666;
+  font-size: 1rem;
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+.loading-progress {
+  width: 100%;
+  height: 4px;
+  background: #f0f0f0;
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: 20px;
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #007bff, #28a745, #ffc107);
+  background-size: 200% 100%;
+  animation: progressMove 2s ease-in-out infinite;
+  border-radius: 2px;
+}
+
+@keyframes progressMove {
+  0% {
+    transform: translateX(-100%);
+    background-position: 200% 0;
+  }
+  100% {
+    transform: translateX(100%);
+    background-position: -200% 0;
+  }
+}
+
+/* 错误状态样式 */
+.error-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.error-content {
+  text-align: center;
+  padding: 40px;
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 90%;
+}
+
+.error-icon {
+  font-size: 4rem;
+  margin-bottom: 20px;
+  display: block;
+}
+
+.error-content h3 {
+  color: #dc3545;
+  font-size: 1.5rem;
+  margin-bottom: 15px;
+  font-weight: 600;
+}
+
+.error-content p {
+  color: #666;
+  font-size: 1rem;
+  margin-bottom: 30px;
+  line-height: 1.5;
+}
+
+.retry-btn {
+  background: linear-gradient(45deg, #007bff, #0056b3);
+  color: white;
+  border: none;
+  padding: 12px 30px;
+  border-radius: 25px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
+}
+
+.retry-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
+}
+
+.retry-btn:active {
+  transform: translateY(0);
+}
+
+.retry-icon {
+  display: inline-block;
+  animation: rotateIcon 0.5s ease-in-out;
+}
+
+.retry-btn:hover .retry-icon {
+  animation: rotateIcon 0.5s ease-in-out infinite;
+}
+
+@keyframes rotateIcon {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 成功提示样式 */
+.success-toast {
+  position: fixed;
+  top: 30px;
+  right: 30px;
+  background: linear-gradient(45deg, #28a745, #20c997);
+  color: white;
+  padding: 15px 25px;
+  border-radius: 25px;
+  font-size: 1rem;
+  font-weight: 600;
+  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
+  z-index: 10000;
+  opacity: 0;
+  transform: translateX(100px);
+  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.success-toast.show {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.success-icon {
+  font-size: 1.2rem;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 移动端适配 */
+/* 翻页模式选择器样式 */
+.flip-mode-selector {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  z-index: 10000;
+}
+
+.mobile-flip-mode-selector {
+  top: 15px;
+  left: 15px;
+}
+
+.btn-flip-mode {
+  background: linear-gradient(45deg, #6c5ce7, #a29bfe);
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  padding: 10px 16px;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.btn-flip-mode:hover {
+  background: linear-gradient(45deg, #5f4ed5, #8c7ae6);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(108, 92, 231, 0.5);
+}
+
+.flip-mode-icon {
+  font-size: 1rem;
+}
+
+.flip-mode-text {
+  font-size: 0.85rem;
+}
+
+.flip-mode-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 8px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  min-width: 150px;
+  animation: slideDown 0.2s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.flip-mode-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.flip-mode-item:hover {
+  background: #f5f5f5;
+}
+
+.flip-mode-item-active {
+  background: linear-gradient(45deg, #6c5ce7, #a29bfe);
+  color: white;
+}
+
+.flip-mode-item-active:hover {
+  background: linear-gradient(45deg, #5f4ed5, #8c7ae6);
+}
+
+.flip-mode-item-icon {
+  font-size: 1.1rem;
+}
+
+.flip-mode-item-label {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+/* 滑动模式样式 */
+.slide-viewer {
+  width: 1600px;
+  height: 1000px;
+  overflow: hidden;
+  position: relative;
+}
+
+.slide-viewer.mobile-mode {
+  width: 100%;
+  max-width: none;
+  height: 85vh;
+  max-height: 85vh;
+}
+
+.slide-container {
+  display: flex;
+  height: 100%;
+  will-change: transform;
+}
+
+.slide-page {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f8f9fa;
+}
+
+.slide-page-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.slide-page-placeholder {
+  font-size: 2rem;
+  color: #666;
+  text-align: center;
+}
+
+/* 淡入淡出模式样式 */
+.fade-viewer {
+  width: 1600px;
+  height: 1000px;
+  overflow: hidden;
+  position: relative;
+}
+
+.fade-viewer.mobile-mode {
+  width: 100%;
+  max-width: none;
+  height: 85vh;
+  max-height: 85vh;
+}
+
+.fade-page-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f8f9fa;
+}
+
+.fade-page-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.fade-page-placeholder {
+  font-size: 2rem;
+  color: #666;
+  text-align: center;
+}
+
+.fade-page-enter-active,
+.fade-page-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-page-enter,
+.fade-page-leave-to {
+  opacity: 0;
+}
+
+/* 垂直滚动模式样式 */
+.scroll-viewer {
+  width: 1600px;
+  height: 1000px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  scroll-behavior: smooth;
+}
+
+.scroll-viewer.mobile-mode {
+  width: 100%;
+  max-width: none;
+  height: 85vh;
+  max-height: 85vh;
+}
+
+.scroll-container {
+  width: 100%;
+}
+
+.scroll-page {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f8f9fa;
+  padding: 20px 0;
+  box-sizing: border-box;
+}
+
+.scroll-page-image {
+  max-width: 100%;
+  max-height: none;
+  width: auto;
+}
+
+.scroll-page-placeholder {
+  font-size: 2rem;
+  color: #666;
+  text-align: center;
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 滚动条样式 */
+.scroll-viewer::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scroll-viewer::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.scroll-viewer::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.scroll-viewer::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}
+
+/* 截断特效模式样式 */
+.clip-viewer {
+  width: 1600px;
+  height: 1000px;
+  overflow: hidden;
+  position: relative;
+  perspective: 1200px;
+}
+
+.clip-viewer.mobile-mode {
+  width: 100%;
+  max-width: none;
+  height: 85vh;
+  max-height: 85vh;
+}
+
+.clip-pages-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.clip-page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f8f9fa;
+}
+
+.clip-page-current {
+  z-index: 2;
+  clip-path: inset(0 0 0 0);
+}
+
+.clip-page-next {
+  z-index: 1;
+  opacity: 0.5;
+  transform: scale(0.95);
+  filter: blur(2px);
+}
+
+.clip-page-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+}
+
+.clip-page-placeholder {
+  font-size: 2rem;
+  color: #666;
+  text-align: center;
+}
+
+/* 截断动画 */
+.clip-current-enter-active {
+  animation: clipIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.clip-current-leave-active {
+  animation: clipOut 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes clipIn {
+  0% {
+    clip-path: inset(0 100% 0 0);
+    transform: translateX(50px);
+    opacity: 0;
+  }
+  100% {
+    clip-path: inset(0 0 0 0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes clipOut {
+  0% {
+    clip-path: inset(0 0 0 0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    clip-path: inset(0 0 0 100%);
+    transform: translateX(-50px);
+    opacity: 0;
+  }
+}
+
+/* 卡片风格模式样式 */
+.card-viewer {
+  width: 1600px;
+  height: 1000px;
+  overflow: visible;
+  position: relative;
+  perspective: 1500px;
+}
+
+.card-viewer.mobile-mode {
+  width: 100%;
+  max-width: none;
+  height: 85vh;
+  max-height: 85vh;
+}
+
+.card-stack {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform-style: preserve-3d;
+}
+
+.card-transition-group {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-item {
+  position: absolute;
+  width: 70%;
+  height: 90%;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-style: preserve-3d;
+  cursor: pointer;
+}
+
+.card-content {
+  width: 100%;
+  height: 100%;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 8px 25px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.card-item-current .card-content {
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 15px 40px rgba(0, 0, 0, 0.25);
+}
+
+.card-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.card-placeholder {
+  font-size: 2rem;
+  color: #666;
+  text-align: center;
+}
+
+.card-page-number {
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 6px 16px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.card-item-prev .card-page-number,
+.card-item-next .card-page-number {
+  opacity: 0;
+}
+
+/* 卡片切换动画 */
+.card-flip-enter-active,
+.card-flip-leave-active {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-flip-enter {
+  opacity: 0;
+  transform: translateX(100%) scale(0.8) rotateY(-30deg);
+}
+
+.card-flip-leave-to {
+  opacity: 0;
+  transform: translateX(-100%) scale(0.8) rotateY(30deg);
+}
+
+/* 卡片悬停效果 */
+.card-item-current:hover .card-content {
+  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.4), 0 18px 50px rgba(0, 0, 0, 0.3);
+}
+
+/* 移动端卡片样式 */
+@media (max-width: 768px) {
+  .card-item {
+    width: 85%;
+    height: 85%;
+  }
+  
+  .card-item-prev,
+  .card-item-next {
+    display: none;
+  }
+  
+  .card-content {
+    border-radius: 12px;
+  }
+  
+  .card-page-number {
+    font-size: 0.75rem;
+    padding: 4px 12px;
+  }
+  
+  .clip-page-next {
+    display: none;
+  }
+}
+
+/* 移动端翻页模式选择器样式 */
+@media (max-width: 768px) {
+  .btn-flip-mode {
+    padding: 8px 12px;
+    font-size: 0.8rem;
+    border-radius: 16px;
+  }
+  
+  .flip-mode-icon {
+    font-size: 0.9rem;
+  }
+  
+  .flip-mode-text {
+    font-size: 0.75rem;
+  }
+  
+  .flip-mode-menu {
+    min-width: 130px;
+  }
+  
+  .flip-mode-item {
+    padding: 10px 14px;
+  }
+  
+  .flip-mode-item-icon {
+    font-size: 1rem;
+  }
+  
+  .flip-mode-item-label {
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .loading-container,
+  .error-content {
+    padding: 30px 20px;
+    margin: 20px;
+  }
+  
+  .loading-spinner {
+    width: 60px;
+    height: 60px;
+  }
+  
+  .spinner-ring:nth-child(2) {
+    width: 45px;
+    height: 45px;
+    top: 7.5px;
+    left: 7.5px;
+  }
+  
+  .spinner-ring:nth-child(3) {
+    width: 30px;
+    height: 30px;
+    top: 15px;
+    left: 15px;
+  }
+  
+  .loading-text h3,
+  .error-content h3 {
+    font-size: 1.3rem;
+  }
+  
+  .loading-text p,
+  .error-content p {
+    font-size: 0.9rem;
+  }
+  
+  .success-toast {
+    top: 20px;
+    right: 20px;
+    left: 20px;
+    right: 20px;
+    font-size: 0.9rem;
+    padding: 12px 20px;
+  }
+  
+  .retry-btn {
+    padding: 10px 25px;
+    font-size: 0.9rem;
+  }
+}
+
+</style>