@ebiz/designer-components 0.1.78 → 0.1.80

package/src/components/EbizPdfViewer.vue

@@ -1,541 +1,541 @@
-<template>
-  <div class="ebiz-pdf-viewer" :style="{ width: width, height: height }">
-    <!-- 工具栏 -->
-    <div v-if="showToolbar" class="pdf-toolbar">
-      <div class="toolbar-left">
-        <button 
-          @click="previousPage" 
-          :disabled="currentPage <= 1"
-          class="toolbar-btn"
-          title="上一页"
-        >
-          ⬅
-        </button>
-        <span class="page-info">
-          {{ currentPage }} / {{ totalPages }}
-        </span>
-        <button 
-          @click="nextPage" 
-          :disabled="currentPage >= totalPages"
-          class="toolbar-btn"
-          title="下一页"
-        >
-          ➡
-        </button>
-      </div>
-      <div class="toolbar-center">
-        <button @click="zoomOut" class="toolbar-btn" title="缩小">-</button>
-        <span class="zoom-info">{{ Math.round(scale * 100) }}%</span>
-        <button @click="zoomIn" class="toolbar-btn" title="放大">+</button>
-        <button @click="resetZoom" class="toolbar-btn" title="重置缩放">⟲</button>
-      </div>
-      <div class="toolbar-right">
-        <button @click="rotatePage" class="toolbar-btn" title="旋转">↻</button>
-        <button @click="downloadPdf" class="toolbar-btn" title="下载">⬇</button>
-      </div>
-    </div>
-
-    <!-- PDF 内容区域 -->
-    <div class="pdf-container" ref="containerRef">
-      <div v-if="loading" class="pdf-loading">
-        <div class="loading-spinner"></div>
-        <span>加载中...</span>
-      </div>
-      <div v-else-if="error" class="pdf-error">
-        <span>{{ error }}</span>
-      </div>
-      <div v-else class="pdf-content">
-        <canvas 
-          ref="canvasRef" 
-          :style="{ 
-            transform: `rotate(${rotation}deg)`,
-            transformOrigin: 'center center'
-          }"
-        ></canvas>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "EbizPdfViewer"
-}
-</script>
-
-<script setup>
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
-
-const props = defineProps({
-  // PDF文件URL或base64数据
-  src: {
-    type: String,
-    required: true
-  },
-  // 组件宽度
-  width: {
-    type: String,
-    default: '100%'
-  },
-  // 组件高度
-  height: {
-    type: String,
-    default: '600px'
-  },
-  // 是否显示工具栏
-  showToolbar: {
-    type: Boolean,
-    default: true
-  },
-  // 初始页码
-  page: {
-    type: Number,
-    default: 1
-  },
-  // 初始缩放比例
-  zoom: {
-    type: Number,
-    default: 1
-  },
-  // 是否允许下载
-  downloadable: {
-    type: Boolean,
-    default: true
-  },
-  // PDF密码
-  password: {
-    type: String,
-    default: ''
-  }
-});
-
-const emit = defineEmits([
-  'load', 
-  'error', 
-  'page-change', 
-  'zoom-change',
-  'download'
-]);
-
-// 响应式状态
-const loading = ref(false);
-const error = ref('');
-const currentPage = ref(props.page);
-const totalPages = ref(0);
-const scale = ref(props.zoom);
-const rotation = ref(0);
-
-// DOM引用
-const containerRef = ref(null);
-const canvasRef = ref(null);
-
-// PDF相关变量
-let pdfDoc = null;
-let pdfLib = null;
-let renderRetryCount = 0;
-const MAX_RETRY_COUNT = 3;
-let resizeObserver = null;
-
-// 初始化PDF.js
-const initPdfJs = async () => {
-  try {
-    // 动态导入pdfjs-dist
-    pdfLib = await import('pdfjs-dist');
-    
-    // 设置worker路径
-    pdfLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js`;
-    
-    return true;
-  } catch (err) {
-    console.error('Failed to initialize PDF.js:', err);
-    error.value = '初始化PDF.js失败';
-    return false;
-  }
-};
-
-// 加载PDF文档
-const loadPdf = async () => {
-  if (!props.src) return;
-  
-  loading.value = true;
-  error.value = '';
-  
-  try {
-    if (!pdfLib) {
-      const success = await initPdfJs();
-      if (!success) return;
-    }
-
-    const loadingTask = pdfLib.getDocument({
-      url: props.src,
-      password: props.password
-    });
-    
-    pdfDoc = await loadingTask.promise;
-    totalPages.value = pdfDoc.numPages;
-    
-    // 确保当前页在有效范围内
-    if (currentPage.value > totalPages.value) {
-      currentPage.value = totalPages.value;
-    }
-    if (currentPage.value < 1) {
-      currentPage.value = 1;
-    }
-    
-    // 延迟渲染确保DOM完全准备
-    await nextTick();
-    setTimeout(async () => {
-      await renderPage();
-    }, 50);
-    
-    emit('load', {
-      totalPages: totalPages.value,
-      currentPage: currentPage.value
-    });
-    
-  } catch (err) {
-    console.error('PDF loading error:', err);
-    error.value = err.message || 'PDF加载失败';
-    emit('error', err);
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 渲染当前页面
-const renderPage = async () => {
-  if (!pdfDoc || !canvasRef.value) return;
-  
-  try {
-    // 确保canvas元素已经完全渲染到DOM中
-    await nextTick();
-    
-    const page = await pdfDoc.getPage(currentPage.value);
-    const canvas = canvasRef.value;
-    
-    // 再次检查canvas是否存在
-    if (!canvas) {
-      if (renderRetryCount < MAX_RETRY_COUNT) {
-        renderRetryCount++;
-        console.warn(`Canvas element not found, retrying... (${renderRetryCount}/${MAX_RETRY_COUNT})`);
-        setTimeout(renderPage, 100);
-        return;
-      } else {
-        console.error('Canvas element not found after multiple retries');
-        error.value = 'Canvas元素未找到';
-        return;
-      }
-    }
-    
-    // 重置重试计数
-    renderRetryCount = 0;
-    
-    const context = canvas.getContext('2d');
-    
-    // 获取页面尺寸
-    const viewport = page.getViewport({ scale: scale.value });
-    
-    // 获取容器可用宽度
-    const containerWidth = containerRef.value?.clientWidth || 800;
-    const maxWidth = containerWidth - 40; // 减去padding
-    
-    // 如果PDF宽度超过容器宽度，自动缩放
-    let finalScale = scale.value;
-    if (viewport.width > maxWidth) {
-      finalScale = (maxWidth / viewport.width) * scale.value;
-      const adjustedViewport = page.getViewport({ scale: finalScale });
-      canvas.height = adjustedViewport.height;
-      canvas.width = adjustedViewport.width;
-    } else {
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
-    }
-    
-    // 清空canvas
-    context.clearRect(0, 0, canvas.width, canvas.height);
-    
-    // 渲染页面 - 使用最终的viewport
-    const finalViewport = finalScale !== scale.value ? 
-      page.getViewport({ scale: finalScale }) : viewport;
-      
-    const renderContext = {
-      canvasContext: context,
-      viewport: finalViewport
-    };
-    
-    await page.render(renderContext).promise;
-    
-  } catch (err) {
-    console.error('Page rendering error:', err);
-    error.value = '页面渲染失败';
-  }
-};
-
-// 翻页方法
-const previousPage = () => {
-  if (currentPage.value > 1) {
-    currentPage.value--;
-    renderPage();
-    emit('page-change', currentPage.value);
-  }
-};
-
-const nextPage = () => {
-  if (currentPage.value < totalPages.value) {
-    currentPage.value++;
-    renderPage();
-    emit('page-change', currentPage.value);
-  }
-};
-
-// 缩放方法
-const zoomIn = () => {
-  scale.value = Math.min(scale.value * 1.2, 3);
-  renderPage();
-  emit('zoom-change', scale.value);
-};
-
-const zoomOut = () => {
-  scale.value = Math.max(scale.value / 1.2, 0.1);
-  renderPage();
-  emit('zoom-change', scale.value);
-};
-
-const resetZoom = () => {
-  scale.value = 1;
-  renderPage();
-  emit('zoom-change', scale.value);
-};
-
-// 旋转页面
-const rotatePage = () => {
-  rotation.value = (rotation.value + 90) % 360;
-};
-
-// 下载PDF
-const downloadPdf = () => {
-  if (!props.downloadable) return;
-  
-  try {
-    const link = document.createElement('a');
-    link.href = props.src;
-    link.download = 'document.pdf';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    
-    emit('download', props.src);
-  } catch (err) {
-    console.error('Download error:', err);
-  }
-};
-
-// 监听属性变化
-watch(() => props.src, () => {
-  loadPdf();
-});
-
-watch(() => props.page, (newPage) => {
-  if (newPage !== currentPage.value && newPage >= 1 && newPage <= totalPages.value) {
-    currentPage.value = newPage;
-    renderPage();
-  }
-});
-
-watch(() => props.zoom, (newZoom) => {
-  if (newZoom !== scale.value) {
-    scale.value = newZoom;
-    renderPage();
-  }
-});
-
-// 强制刷新渲染
-const forceRender = async () => {
-  if (pdfDoc && canvasRef.value) {
-    await nextTick();
-    await renderPage();
-  }
-};
-
-// 组件挂载时加载PDF
-onMounted(() => {
-  nextTick(() => {
-    loadPdf();
-    
-    // 监听容器大小变化
-    if (containerRef.value && window.ResizeObserver) {
-      resizeObserver = new ResizeObserver(() => {
-        if (pdfDoc && canvasRef.value) {
-          // 延迟渲染以避免频繁触发
-          setTimeout(() => {
-            renderPage();
-          }, 100);
-        }
-      });
-      resizeObserver.observe(containerRef.value);
-    }
-  });
-});
-
-// 组件卸载时清理
-onUnmounted(() => {
-  if (resizeObserver) {
-    resizeObserver.disconnect();
-    resizeObserver = null;
-  }
-});
-
-// 暴露强制刷新方法
-defineExpose({
-  forceRender
-});
-</script>
-
-<style lang="less" scoped>
-.ebiz-pdf-viewer {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #e1e1e1;
-  border-radius: 4px;
-  overflow: hidden;
-  background: #f5f5f5;
-}
-
-.pdf-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-  background: #fff;
-  border-bottom: 1px solid #e1e1e1;
-  
-  .toolbar-left,
-  .toolbar-center,
-  .toolbar-right {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .toolbar-btn {
-    padding: 4px 8px;
-    border: 1px solid #d1d1d1;
-    background: #fff;
-    border-radius: 2px;
-    cursor: pointer;
-    font-size: 12px;
-    
-    &:hover:not(:disabled) {
-      background: #f0f0f0;
-    }
-    
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-  
-  .page-info,
-  .zoom-info {
-    font-size: 12px;
-    color: #666;
-    min-width: 60px;
-    text-align: center;
-  }
-}
-
-.pdf-container {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  overflow: auto;
-  padding: 10px;
-  box-sizing: border-box;
-}
-
-.pdf-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  color: #666;
-  min-height: 200px;
-  width: 100%;
-  
-  .loading-spinner {
-    width: 24px;
-    height: 24px;
-    border: 2px solid #f3f3f3;
-    border-top: 2px solid #0052d9;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-}
-
-.pdf-error {
-  color: #e34d59;
-  text-align: center;
-  padding: 20px;
-  min-height: 200px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pdf-content {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  min-height: 100%;
-  width: 100%;
-  padding-top: 10px;
-  
-  canvas {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    background: white;
-    transition: transform 0.3s ease;
-    display: block;
-    max-width: calc(100% - 20px);
-    height: auto;
-    margin: 0 auto;
-  }
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* 响应式适配 */
-@media (max-width: 768px) {
-  .pdf-container {
-    padding: 5px;
-  }
-  
-  .pdf-content {
-    padding-top: 5px;
-    
-    canvas {
-      max-width: calc(100% - 10px);
-    }
-  }
-  
-  .pdf-toolbar {
-    padding: 6px 8px;
-    
-    .toolbar-btn {
-      padding: 3px 6px;
-      font-size: 11px;
-    }
-    
-    .page-info,
-    .zoom-info {
-      font-size: 11px;
-      min-width: 50px;
-    }
-  }
-}
+<template>
+  <div class="ebiz-pdf-viewer" :style="{ width: width, height: height }">
+    <!-- 工具栏 -->
+    <div v-if="showToolbar" class="pdf-toolbar">
+      <div class="toolbar-left">
+        <button 
+          @click="previousPage" 
+          :disabled="currentPage <= 1"
+          class="toolbar-btn"
+          title="上一页"
+        >
+          ⬅
+        </button>
+        <span class="page-info">
+          {{ currentPage }} / {{ totalPages }}
+        </span>
+        <button 
+          @click="nextPage" 
+          :disabled="currentPage >= totalPages"
+          class="toolbar-btn"
+          title="下一页"
+        >
+          ➡
+        </button>
+      </div>
+      <div class="toolbar-center">
+        <button @click="zoomOut" class="toolbar-btn" title="缩小">-</button>
+        <span class="zoom-info">{{ Math.round(scale * 100) }}%</span>
+        <button @click="zoomIn" class="toolbar-btn" title="放大">+</button>
+        <button @click="resetZoom" class="toolbar-btn" title="重置缩放">⟲</button>
+      </div>
+      <div class="toolbar-right">
+        <button @click="rotatePage" class="toolbar-btn" title="旋转">↻</button>
+        <button @click="downloadPdf" class="toolbar-btn" title="下载">⬇</button>
+      </div>
+    </div>
+
+    <!-- PDF 内容区域 -->
+    <div class="pdf-container" ref="containerRef">
+      <div v-if="loading" class="pdf-loading">
+        <div class="loading-spinner"></div>
+        <span>加载中...</span>
+      </div>
+      <div v-else-if="error" class="pdf-error">
+        <span>{{ error }}</span>
+      </div>
+      <div v-else class="pdf-content">
+        <canvas 
+          ref="canvasRef" 
+          :style="{ 
+            transform: `rotate(${rotation}deg)`,
+            transformOrigin: 'center center'
+          }"
+        ></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizPdfViewer"
+}
+</script>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+
+const props = defineProps({
+  // PDF文件URL或base64数据
+  src: {
+    type: String,
+    required: true
+  },
+  // 组件宽度
+  width: {
+    type: String,
+    default: '100%'
+  },
+  // 组件高度
+  height: {
+    type: String,
+    default: '600px'
+  },
+  // 是否显示工具栏
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  // 初始页码
+  page: {
+    type: Number,
+    default: 1
+  },
+  // 初始缩放比例
+  zoom: {
+    type: Number,
+    default: 1
+  },
+  // 是否允许下载
+  downloadable: {
+    type: Boolean,
+    default: true
+  },
+  // PDF密码
+  password: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits([
+  'load', 
+  'error', 
+  'page-change', 
+  'zoom-change',
+  'download'
+]);
+
+// 响应式状态
+const loading = ref(false);
+const error = ref('');
+const currentPage = ref(props.page);
+const totalPages = ref(0);
+const scale = ref(props.zoom);
+const rotation = ref(0);
+
+// DOM引用
+const containerRef = ref(null);
+const canvasRef = ref(null);
+
+// PDF相关变量
+let pdfDoc = null;
+let pdfLib = null;
+let renderRetryCount = 0;
+const MAX_RETRY_COUNT = 3;
+let resizeObserver = null;
+
+// 初始化PDF.js
+const initPdfJs = async () => {
+  try {
+    // 动态导入pdfjs-dist
+    pdfLib = await import('pdfjs-dist');
+    
+    // 设置worker路径
+    pdfLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js`;
+    
+    return true;
+  } catch (err) {
+    console.error('Failed to initialize PDF.js:', err);
+    error.value = '初始化PDF.js失败';
+    return false;
+  }
+};
+
+// 加载PDF文档
+const loadPdf = async () => {
+  if (!props.src) return;
+  
+  loading.value = true;
+  error.value = '';
+  
+  try {
+    if (!pdfLib) {
+      const success = await initPdfJs();
+      if (!success) return;
+    }
+
+    const loadingTask = pdfLib.getDocument({
+      url: props.src,
+      password: props.password
+    });
+    
+    pdfDoc = await loadingTask.promise;
+    totalPages.value = pdfDoc.numPages;
+    
+    // 确保当前页在有效范围内
+    if (currentPage.value > totalPages.value) {
+      currentPage.value = totalPages.value;
+    }
+    if (currentPage.value < 1) {
+      currentPage.value = 1;
+    }
+    
+    // 延迟渲染确保DOM完全准备
+    await nextTick();
+    setTimeout(async () => {
+      await renderPage();
+    }, 50);
+    
+    emit('load', {
+      totalPages: totalPages.value,
+      currentPage: currentPage.value
+    });
+    
+  } catch (err) {
+    console.error('PDF loading error:', err);
+    error.value = err.message || 'PDF加载失败';
+    emit('error', err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 渲染当前页面
+const renderPage = async () => {
+  if (!pdfDoc || !canvasRef.value) return;
+  
+  try {
+    // 确保canvas元素已经完全渲染到DOM中
+    await nextTick();
+    
+    const page = await pdfDoc.getPage(currentPage.value);
+    const canvas = canvasRef.value;
+    
+    // 再次检查canvas是否存在
+    if (!canvas) {
+      if (renderRetryCount < MAX_RETRY_COUNT) {
+        renderRetryCount++;
+        console.warn(`Canvas element not found, retrying... (${renderRetryCount}/${MAX_RETRY_COUNT})`);
+        setTimeout(renderPage, 100);
+        return;
+      } else {
+        console.error('Canvas element not found after multiple retries');
+        error.value = 'Canvas元素未找到';
+        return;
+      }
+    }
+    
+    // 重置重试计数
+    renderRetryCount = 0;
+    
+    const context = canvas.getContext('2d');
+    
+    // 获取页面尺寸
+    const viewport = page.getViewport({ scale: scale.value });
+    
+    // 获取容器可用宽度
+    const containerWidth = containerRef.value?.clientWidth || 800;
+    const maxWidth = containerWidth - 40; // 减去padding
+    
+    // 如果PDF宽度超过容器宽度，自动缩放
+    let finalScale = scale.value;
+    if (viewport.width > maxWidth) {
+      finalScale = (maxWidth / viewport.width) * scale.value;
+      const adjustedViewport = page.getViewport({ scale: finalScale });
+      canvas.height = adjustedViewport.height;
+      canvas.width = adjustedViewport.width;
+    } else {
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+    }
+    
+    // 清空canvas
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // 渲染页面 - 使用最终的viewport
+    const finalViewport = finalScale !== scale.value ? 
+      page.getViewport({ scale: finalScale }) : viewport;
+      
+    const renderContext = {
+      canvasContext: context,
+      viewport: finalViewport
+    };
+    
+    await page.render(renderContext).promise;
+    
+  } catch (err) {
+    console.error('Page rendering error:', err);
+    error.value = '页面渲染失败';
+  }
+};
+
+// 翻页方法
+const previousPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--;
+    renderPage();
+    emit('page-change', currentPage.value);
+  }
+};
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++;
+    renderPage();
+    emit('page-change', currentPage.value);
+  }
+};
+
+// 缩放方法
+const zoomIn = () => {
+  scale.value = Math.min(scale.value * 1.2, 3);
+  renderPage();
+  emit('zoom-change', scale.value);
+};
+
+const zoomOut = () => {
+  scale.value = Math.max(scale.value / 1.2, 0.1);
+  renderPage();
+  emit('zoom-change', scale.value);
+};
+
+const resetZoom = () => {
+  scale.value = 1;
+  renderPage();
+  emit('zoom-change', scale.value);
+};
+
+// 旋转页面
+const rotatePage = () => {
+  rotation.value = (rotation.value + 90) % 360;
+};
+
+// 下载PDF
+const downloadPdf = () => {
+  if (!props.downloadable) return;
+  
+  try {
+    const link = document.createElement('a');
+    link.href = props.src;
+    link.download = 'document.pdf';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    emit('download', props.src);
+  } catch (err) {
+    console.error('Download error:', err);
+  }
+};
+
+// 监听属性变化
+watch(() => props.src, () => {
+  loadPdf();
+});
+
+watch(() => props.page, (newPage) => {
+  if (newPage !== currentPage.value && newPage >= 1 && newPage <= totalPages.value) {
+    currentPage.value = newPage;
+    renderPage();
+  }
+});
+
+watch(() => props.zoom, (newZoom) => {
+  if (newZoom !== scale.value) {
+    scale.value = newZoom;
+    renderPage();
+  }
+});
+
+// 强制刷新渲染
+const forceRender = async () => {
+  if (pdfDoc && canvasRef.value) {
+    await nextTick();
+    await renderPage();
+  }
+};
+
+// 组件挂载时加载PDF
+onMounted(() => {
+  nextTick(() => {
+    loadPdf();
+    
+    // 监听容器大小变化
+    if (containerRef.value && window.ResizeObserver) {
+      resizeObserver = new ResizeObserver(() => {
+        if (pdfDoc && canvasRef.value) {
+          // 延迟渲染以避免频繁触发
+          setTimeout(() => {
+            renderPage();
+          }, 100);
+        }
+      });
+      resizeObserver.observe(containerRef.value);
+    }
+  });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+});
+
+// 暴露强制刷新方法
+defineExpose({
+  forceRender
+});
+</script>
+
+<style lang="less" scoped>
+.ebiz-pdf-viewer {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+
+.pdf-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #fff;
+  border-bottom: 1px solid #e1e1e1;
+  
+  .toolbar-left,
+  .toolbar-center,
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .toolbar-btn {
+    padding: 4px 8px;
+    border: 1px solid #d1d1d1;
+    background: #fff;
+    border-radius: 2px;
+    cursor: pointer;
+    font-size: 12px;
+    
+    &:hover:not(:disabled) {
+      background: #f0f0f0;
+    }
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  
+  .page-info,
+  .zoom-info {
+    font-size: 12px;
+    color: #666;
+    min-width: 60px;
+    text-align: center;
+  }
+}
+
+.pdf-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow: auto;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.pdf-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: #666;
+  min-height: 200px;
+  width: 100%;
+  
+  .loading-spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #0052d9;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+}
+
+.pdf-error {
+  color: #e34d59;
+  text-align: center;
+  padding: 20px;
+  min-height: 200px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pdf-content {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  min-height: 100%;
+  width: 100%;
+  padding-top: 10px;
+  
+  canvas {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    background: white;
+    transition: transform 0.3s ease;
+    display: block;
+    max-width: calc(100% - 20px);
+    height: auto;
+    margin: 0 auto;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .pdf-container {
+    padding: 5px;
+  }
+  
+  .pdf-content {
+    padding-top: 5px;
+    
+    canvas {
+      max-width: calc(100% - 10px);
+    }
+  }
+  
+  .pdf-toolbar {
+    padding: 6px 8px;
+    
+    .toolbar-btn {
+      padding: 3px 6px;
+      font-size: 11px;
+    }
+    
+    .page-info,
+    .zoom-info {
+      font-size: 11px;
+      min-width: 50px;
+    }
+  }
+}
 </style>