fstarter 2.10.56 → 2.10.57

package/src/plugins/plugins/components/pdfPreview.vue

@@ -0,0 +1,688 @@
+<template>
+  <div v-if="visible" class="pdf-preview-overlay">
+    <div class="pdf-preview-container" @click.stop>
+      <div class="pdf-header" v-if="currentPdf.title">
+        <div class="pdf-title">
+          {{ currentPdf.title }}
+        </div>
+      </div>
+      <div class="pdf-content" ref="pdfContent" @scroll="checkIfScrolledToBottom">
+        <div ref="pdfContainer" class="pdf-container" role="region" aria-label="PDF内容">
+        </div>
+        <div v-if="loading" class="loading" role="status">加载中...</div>
+        <div v-if="error" class="error" role="alert">
+          加载失败: {{ error }}
+        </div>
+      </div>
+      <!-- 预览多个pdf,并且不需要倒计时 -->
+      <div class="pdf-navigation" v-if="pdfList.length > 1 && !showCountdown" role="navigation" aria-label="PDF导航">
+        <button :disabled="currentIndex === 0" class="nav-btn prev-btn" @click="prevPdf" aria-label="上一个PDF">
+          上一个
+        </button>
+        <span class="pdf-counter" aria-live="polite">
+          {{ currentIndex + 1 }} / {{ pdfList.length }}
+        </span>
+        <button :disabled="currentIndex === pdfList.length - 1" class="nav-btn next-btn" @click="nextPdf"
+          aria-label="下一个PDF">
+          下一个
+        </button>
+      </div>
+      <!-- 仅预览(不区分多个 单个) 显示返回 -->
+      <div class="back" @click="close" v-if="!showCountdown">返回</div>
+      <!-- 需要倒计时按钮 -->
+      <div class="back" @click="handleCountdownClick" v-if="showCountdown">{{ countdownDisplayText }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+let Pdfh5;
+
+// 动态导入pdfh5以避免构建时错误
+try {
+  Pdfh5 = require("pdfh5").default || require("pdfh5");
+} catch (e) {
+  console.warn("Failed to load pdfh5:", e);
+}
+
+// 确保CSS也被正确导入
+try {
+  require("pdfh5/css/pdfh5.css");
+} catch (e) {
+  console.warn("Failed to load pdfh5 css:", e);
+}
+
+export default {
+  name: "PdfPreview",
+  data() {
+    return {
+      visible: false,
+      pdfList: [],
+      currentIndex: 0,
+      pdfh5: null,
+      countdown: 0,
+      countdownTimer: null,
+      autoPlayTimer: null,
+      showCountdown: false,
+      countdownInterval: null,
+      userScrolledToBottom: false,
+      isCountingDown: false,
+      loading: false,
+      error: null
+    };
+  },
+  computed: {
+    currentPdf() {
+      return this.pdfList[this.currentIndex] || {};
+    },
+
+    countdownDisplayText() {
+      // 倒计时正在进行中，显示倒计时数字
+      if (this.countdown > 0) {
+        return this.countdown;
+      }
+
+      // 倒计时结束，根据PDF总数和当前位置决定显示文本
+      const isLastPdf = this.currentIndex === this.pdfList.length - 1;
+
+      if (this.pdfList.length > 1) {
+        // 多个PDF：未到最后一个显示"下一个"，否则显示"返回"
+        return isLastPdf ? '返回' : '下一个';
+      } else {
+        // 单个PDF直接显示"返回"
+        return '返回';
+      }
+    }
+  },
+  methods: {
+    handleCountdownClick() {
+      // 如果还在倒计时中，不允许点击
+      if (this.countdown > 0) {
+        return;
+      }
+
+      if (this.pdfList.length > 1) {
+        // 多个PDF文件的情况
+        if (this.currentIndex < this.pdfList.length - 1) {
+          // 还有下一个PDF，切换到下一个
+          this.nextPdf();
+          // 为下一个PDF启动倒计时
+          if (this.showCountdown) {
+            this.startCountdown();
+          }
+        } else {
+          // 已经是最后一个PDF，关闭预览
+          this.close();
+        }
+      } else {
+        // 单个PDF文件的情况
+        this.close();
+      }
+    },
+    /**
+     * 打开PDF预览
+     * @param {Array|Object} pdfs - PDF文件信息，可以是单个对象或对象数组
+     * @param {Object} options - 配置选项
+     */
+    open(pdfs, options = {}) {
+      console.log('Opening PDFs:', pdfs, 'with options:', options);
+
+      // 格式化PDF列表
+      if (Array.isArray(pdfs)) {
+        this.pdfList = pdfs;
+      } else {
+        this.pdfList = [pdfs];
+      }
+
+      console.log('Formatted PDF list:', this.pdfList);
+
+      // 设置配置选项
+      this.showCountdown = options.showCountdown || false;
+
+      // 重置所有状态
+      this.currentIndex = 0;
+      this.visible = true;
+      this.error = null;
+      this.userScrolledToBottom = false;
+      this.isCountingDown = false;
+      this.countdown = 0;
+      this.stopCountdown();
+
+      this.$nextTick(() => {
+        console.log('Next tick after setting visible to true');
+        this.renderPdf();
+
+        // 确保滚动事件监听器已添加
+        if (this.$refs.pdfContent) {
+          this.$refs.pdfContent.addEventListener('scroll', this.handleScroll);
+        }
+
+        // 如果需要倒计时，进入页面立即开始倒计时
+        if (this.showCountdown) {
+          console.log('Starting countdown immediately on page entry');
+          this.startCountdown();
+        }
+      });
+    },
+
+    /**
+     * 渲染当前PDF
+     */
+    renderPdf() {
+      console.log('Rendering PDF at index:', this.currentIndex, 'URL:', this.currentPdf.url);
+
+      // 检查是否成功导入了Pdfh5
+      if (!Pdfh5) {
+        this.error = "PDF查看器未正确加载";
+        this.loading = false;
+        console.error("Pdfh5 not loaded");
+        return;
+      }
+
+      this.loading = true;
+      this.error = null;
+
+      // 更安全的销毁之前的实例
+      if (this.pdfh5) {
+        try {
+          console.log('Destroying previous PDF instance');
+          // 先移除所有事件监听器
+          if (this.pdfh5.off) {
+            this.pdfh5.off("render");
+            this.pdfh5.off("complete");
+          }
+
+          // 更安全的销毁方式
+          if (this.pdfh5 && typeof this.pdfh5.destroy === 'function') {
+            this.pdfh5.destroy();
+          }
+        } catch (e) {
+          console.warn("Failed to destroy pdfh5 instance:", e);
+        }
+        this.pdfh5 = null;
+      }
+
+      // 清除容器
+      if (this.$refs.pdfContainer) {
+        console.log('Clearing PDF container');
+        try {
+          // 更安全的清理方式：直接清空容器内容
+          while (this.$refs.pdfContainer.firstChild) {
+            this.$refs.pdfContainer.removeChild(this.$refs.pdfContainer.firstChild);
+          }
+        } catch (e) {
+          console.warn("Error clearing container:", e);
+        }
+      }
+
+      const pdfUrl = this.currentPdf.url;
+      if (!pdfUrl) {
+        this.loading = false;
+        console.warn('No PDF URL provided');
+        return;
+      }
+
+      // 延迟创建新实例，确保旧实例完全销毁
+      setTimeout(() => {
+        try {
+          console.log('Creating new PDF instance with URL:', pdfUrl);
+          // 创建PDF实例
+          this.pdfh5 = new Pdfh5(this.$refs.pdfContainer, {
+            pdfurl: pdfUrl,
+            lazy: true,
+            renderType: "svg", // 使用svg渲染，避免canvas依赖问题
+            ...this.currentPdf.options
+          });
+
+          console.log('PDF instance created:', this.pdfh5);
+
+          // 监听渲染事件
+          if (this.pdfh5 && this.pdfh5.on) {
+            this.pdfh5.on("render", (pageNum, time) => {
+              try {
+                console.log(`当前加载页码：${pageNum}，耗时：${time}毫秒，总页数：${this.pdfh5 ? this.pdfh5.totalNum : 'N/A'}`);
+              } catch (e) {
+                console.warn("Error accessing pdfh5 properties:", e);
+              }
+            });
+          }
+
+          // 监听完成事件
+          if (this.pdfh5 && this.pdfh5.on) {
+            this.pdfh5.on("complete", (status, msg, time) => {
+              this.loading = false;
+              if (status !== 1) {
+                this.error = msg || "PDF加载失败";
+                console.error('PDF loading failed:', msg);
+              } else {
+                console.log('PDF loaded successfully');
+              }
+              try {
+                console.log(`状态：${status}，信息：${msg}，耗时：${time}毫秒，总页数：${this.pdfh5 ? this.pdfh5.totalNum : 'N/A'}`);
+              } catch (e) {
+                console.warn("Error accessing pdfh5 properties:", e);
+              }
+            });
+          }
+        } catch (e) {
+          this.loading = false;
+          this.error = e.message || "PDF加载过程中发生错误";
+          console.error("PDF加载错误:", e);
+        }
+      }, 150); // 延迟150ms确保清理完成
+    },
+
+    /**
+     * 开始倒计时
+     */
+    startCountdown() {
+      this.stopCountdown();
+
+      // 设置倒计时初始值
+      if (this.pdfList.length === 1) {
+        // 单个PDF，使用返回倒计时(默认5秒)
+        this.countdown = this.currentPdf.countdownTime || 5;
+      } else {
+        // 多个PDF，使用下一个倒计时(默认5秒)
+        this.countdown = this.currentPdf.countdownTime || 5;
+      }
+
+      this.isCountingDown = true;
+
+      this.countdownInterval = setInterval(() => {
+        if (this.countdown > 0) {
+          this.countdown--;
+        } else {
+          // 倒计时结束
+          this.isCountingDown = false;
+
+          // 倒计时结束后根据PDF数量和位置自动执行操作
+          if (this.pdfList.length === 1) {
+            // 单个PDF，倒计时结束自动关闭
+            console.log('Single PDF countdown finished, closing preview');
+            this.close();
+          } else {
+            // 多个PDF，倒计时结束切换到下一个或关闭
+            if (this.currentIndex < this.pdfList.length - 1) {
+              // 还有下一个PDF
+              console.log('Multiple PDFs countdown finished, moving to next');
+              this.nextPdf();
+              // 为下一个PDF启动倒计时
+              this.startCountdown();
+            } else {
+              // 已经是最后一个PDF，关闭预览
+              console.log('Last PDF countdown finished, closing preview');
+              this.close();
+            }
+          }
+          // 倒计时器由stopCountdown()统一管理，这里不主动清除
+        }
+      }, 1000);
+    },
+
+    /**
+     * 停止倒计时
+     */
+    stopCountdown() {
+      try {
+        if (this.countdownInterval) {
+          console.log('Clearing countdown interval');
+          clearInterval(this.countdownInterval);
+          this.countdownInterval = null;
+        }
+      } catch (e) {
+        console.warn('Error stopping countdown:', e);
+      }
+    },
+
+
+    /**
+     * 停止自动播放
+     */
+    stopAutoPlay() {
+      try {
+        if (this.autoPlayTimer) {
+          console.log('Clearing auto play timeout');
+          clearTimeout(this.autoPlayTimer);
+          this.autoPlayTimer = null;
+        }
+      } catch (e) {
+        console.warn('Error stopping auto play:', e);
+      }
+    },
+
+    /**
+     * 切换到下一个PDF
+     */
+    nextPdf() {
+      console.log('Next PDF clicked, current index:', this.currentIndex, 'total:', this.pdfList.length);
+      if (this.currentIndex < this.pdfList.length - 1) {
+        this.currentIndex++;
+        console.log('Switching to index:', this.currentIndex);
+
+        // 重置状态
+        this.userScrolledToBottom = false;
+        this.isCountingDown = false;
+        this.stopCountdown();
+        // this.stopAutoPlay();
+
+        // 添加延迟确保上一个实例完全销毁
+        setTimeout(() => {
+          this.$nextTick(() => {
+            try {
+              this.renderPdf();
+              // 重置PDF内容的滚动位置
+              if (this.$refs.pdfContent) {
+                this.$refs.pdfContent.scrollTop = 0;
+              }
+              // 重新启动计时器，包括倒计时（如果showCountdown为true）
+              this.resetTimers();
+            } catch (e) {
+              console.error('Error during nextPdf:', e);
+              this.error = '切换PDF时发生错误';
+            }
+          });
+        }, 150); // 150ms延迟确保清理完成
+
+        // 确保界面更新
+        this.$forceUpdate();
+      } else {
+        console.log('Already at last PDF, closing preview');
+        // 最后一个PDF，关闭预览或循环
+        this.close();
+      }
+    },
+
+    /**
+     * 切换到上一个PDF
+     */
+    prevPdf() {
+      console.log('Previous PDF clicked, current index:', this.currentIndex);
+      if (this.currentIndex > 0) {
+        this.currentIndex--;
+        console.log('Switching to index:', this.currentIndex);
+
+        // 重置状态
+        this.userScrolledToBottom = false;
+        this.isCountingDown = false;
+        this.stopCountdown();
+        this.stopAutoPlay();
+
+        // 添加延迟确保上一个实例完全销毁
+        setTimeout(() => {
+          this.$nextTick(() => {
+            try {
+              this.renderPdf();
+              // 重置PDF内容的滚动位置
+              if (this.$refs.pdfContent) {
+                this.$refs.pdfContent.scrollTop = 0;
+              }
+              // 重新启动计时器
+              this.resetTimers();
+            } catch (e) {
+              console.error('Error during prevPdf:', e);
+              this.error = '切换PDF时发生错误';
+            }
+          });
+        }, 150); // 150ms延迟确保清理完成
+
+        // 确保界面更新
+        this.$forceUpdate();
+      } else {
+        console.log('Already at first PDF');
+      }
+    },
+
+    /**
+     * 重置计时器
+     */
+    resetTimers() {
+      console.log('Resetting timers');
+      this.stopCountdown();
+      this.stopAutoPlay();
+
+      // 设置倒计时初始值
+      if (this.pdfList.length === 1) {
+        // 单个PDF，使用返回倒计时(默认3秒)
+        this.countdown = this.currentPdf.countdownTime || 3;
+      } else {
+        // 多个PDF，使用下一个倒计时(默认3秒)
+        this.countdown = this.currentPdf.countdownTime || 3;
+      }
+
+      console.log('New countdown value:', this.countdown);
+
+      this.$nextTick(() => {
+        if (this.showCountdown && this.countdown > 0) {
+          console.log('Starting countdown');
+          this.startCountdown();
+        }
+      });
+    },
+
+    /**
+     * 关闭预览
+     */
+    close() {
+      console.log('Closing PDF preview');
+      this.visible = false;
+
+      if (this.pdfh5) {
+        try {
+          console.log('Destroying PDF instance during close');
+          // 先移除所有事件监听器
+          if (this.pdfh5.off) {
+            this.pdfh5.off("render");
+            this.pdfh5.off("complete");
+          }
+          this.pdfh5.destroy();
+        } catch (e) {
+          console.warn("Failed to destroy pdfh5 instance:", e);
+        }
+        this.pdfh5 = null;
+      }
+
+      // 更安全的容器清理方式
+      if (this.$refs.pdfContainer) {
+        try {
+          while (this.$refs.pdfContainer.firstChild) {
+            this.$refs.pdfContainer.removeChild(this.$refs.pdfContainer.firstChild);
+          }
+        } catch (e) {
+          console.warn("Error clearing pdf container:", e);
+        }
+      }
+
+      this.stopCountdown();
+      this.stopAutoPlay();
+
+      // 清理数据
+      this.pdfList = [];
+      this.currentIndex = 0;
+      this.error = null;
+      this.loading = false;
+
+      // 触发关闭事件
+      console.log('Emitting close event');
+      this.$emit('close');
+    },
+
+    /**
+     * 处理PDF滚动到底部事件
+     */
+    onPdfScrolledToBottom() {
+      console.log('PDF scrolled to bottom event triggered');
+      // 发射滚动到底部事件，供外部监听
+      // this.$emit('scrolled-to-bottom');
+
+      // // 用户滚动到底部，开始倒计时
+      // if (this.showCountdown) {
+      //   console.log('Starting countdown as user scrolled to bottom');
+      //   this.startCountdown();
+      // }
+    },
+
+    /**
+     * 检查是否滚动到底部
+     */
+    checkIfScrolledToBottom() {
+      if (!this.$refs.pdfContent) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = this.$refs.pdfContent;
+      const isBottom = scrollTop + clientHeight >= scrollHeight - 5; // 5px的容差
+
+      if (isBottom && !this.userScrolledToBottom) {
+        this.userScrolledToBottom = true;
+        // 触发滚动到底部事件
+        this.onPdfScrolledToBottom();
+      }
+    }
+  },
+
+  beforeDestroy() {
+    this.close();
+  }
+};
+</script>
+
+<style scoped>
+.back {
+  cursor: pointer;
+  height: 60px;
+  line-height: 60px;
+  color: #4a6bbe;
+  text-align: center;
+}
+
+.pdf-preview-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pdf-preview-container {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border-radius: 0px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.pdf-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background: #f5f5f5;
+  border-bottom: 1px solid #ddd;
+}
+
+.pdf-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.pdf-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.countdown {
+  font-size: 14px;
+  color: #ff6b6b;
+}
+
+.close-btn {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #ff6b6b;
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pdf-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.pdf-container {
+  width: 100%;
+  height: 100%;
+}
+
+.pdf-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background: #f5f5f5;
+  border-top: 1px solid #ddd;
+}
+
+.nav-btn {
+  padding: 8px 16px;
+  background: #4a6bbe;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.nav-btn:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.pdf-counter {
+  font-size: 14px;
+  color: #666;
+}
+
+.prev-btn {
+  order: -1;
+}
+
+.next-btn {
+  order: 1;
+}
+
+@media (max-width: 768px) {
+  .pdf-preview-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .pdf-header {
+    flex-direction: column;
+    gap: 5px;
+    text-align: center;
+  }
+
+  .pdf-title {
+    font-size: 14px;
+  }
+
+  .pdf-controls {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+</style>