@ebiz/designer-components 0.1.78 → 0.1.80

package/src/views/PdfViewerDemo.vue

@@ -1,434 +1,434 @@
-<template>
-  <div class="pdf-viewer-demo">
-    <h1>EbizPdfViewer PDF预览器示例</h1>
-    
-    <div class="demo-section">
-      <h2>基础用法</h2>
-      <div class="demo-card">
-        <div class="demo-controls">
-          <div class="control-item">
-            <label>PDF文件地址:</label>
-            <input 
-              v-model="pdfUrl" 
-              type="text" 
-              placeholder="请输入PDF文件URL"
-              class="url-input"
-            />
-          </div>
-          <div class="control-item">
-            <label>
-              <input 
-                v-model="showToolbar" 
-                type="checkbox"
-              /> 显示工具栏
-            </label>
-          </div>
-          <div class="control-item">
-            <label>
-              <input 
-                v-model="downloadable" 
-                type="checkbox"
-              /> 允许下载
-            </label>
-          </div>
-          <div class="control-item">
-            <button @click="forceRefresh" class="refresh-btn">
-              强制刷新渲染
-            </button>
-          </div>
-        </div>
-        
-        <div class="demo-viewer">
-          <EbizPdfViewer
-            ref="pdfViewerRef"
-            :src="pdfUrl"
-            :show-toolbar="showToolbar"
-            :downloadable="downloadable"
-            :width="'100%'"
-            :height="'500px'"
-            @load="handleLoad"
-            @error="handleError"
-            @page-change="handlePageChange"
-            @zoom-change="handleZoomChange"
-            @download="handleDownload"
-          />
-        </div>
-        
-        <div class="event-log">
-          <h3>事件日志</h3>
-          <div class="log-container">
-            <div 
-              v-for="(log, index) in eventLogs" 
-              :key="index" 
-              class="log-item"
-            >
-              <span class="log-time">{{ log.time }}</span>
-              <span class="log-event">{{ log.event }}</span>
-              <span class="log-data">{{ log.data }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-    <div class="demo-section">
-      <h2>不同配置示例</h2>
-      
-      <div class="demo-grid">
-        <div class="demo-card">
-          <h3>无工具栏模式</h3>
-          <EbizPdfViewer
-            :src="samplePdfUrl"
-            :show-toolbar="false"
-            :width="'100%'"
-            :height="'300px'"
-          />
-        </div>
-        
-        <div class="demo-card">
-          <h3>自定义尺寸</h3>
-          <EbizPdfViewer
-            :src="samplePdfUrl"
-            :width="'400px'"
-            :height="'300px'"
-          />
-        </div>
-        
-        <div class="demo-card">
-          <h3>指定初始页码</h3>
-          <EbizPdfViewer
-            :src="samplePdfUrl"
-            :page="2"
-            :width="'100%'"
-            :height="'300px'"
-          />
-        </div>
-        
-        <div class="demo-card">
-          <h3>自定义缩放</h3>
-          <EbizPdfViewer
-            :src="samplePdfUrl"
-            :zoom="1.5"
-            :width="'100%'"
-            :height="'300px'"
-          />
-        </div>
-      </div>
-    </div>
-    
-    <div class="demo-section">
-      <h2>使用说明</h2>
-      <div class="usage-info">
-        <h3>Props 属性</h3>
-        <table class="props-table">
-          <thead>
-            <tr>
-              <th>属性名</th>
-              <th>类型</th>
-              <th>默认值</th>
-              <th>说明</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>src</td>
-              <td>String</td>
-              <td>-</td>
-              <td>PDF文件的URL地址或base64数据（必填）</td>
-            </tr>
-            <tr>
-              <td>width</td>
-              <td>String</td>
-              <td>'100%'</td>
-              <td>组件宽度</td>
-            </tr>
-            <tr>
-              <td>height</td>
-              <td>String</td>
-              <td>'600px'</td>
-              <td>组件高度</td>
-            </tr>
-            <tr>
-              <td>showToolbar</td>
-              <td>Boolean</td>
-              <td>true</td>
-              <td>是否显示工具栏</td>
-            </tr>
-            <tr>
-              <td>page</td>
-              <td>Number</td>
-              <td>1</td>
-              <td>初始显示页码</td>
-            </tr>
-            <tr>
-              <td>zoom</td>
-              <td>Number</td>
-              <td>1</td>
-              <td>初始缩放比例</td>
-            </tr>
-            <tr>
-              <td>downloadable</td>
-              <td>Boolean</td>
-              <td>true</td>
-              <td>是否允许下载</td>
-            </tr>
-            <tr>
-              <td>password</td>
-              <td>String</td>
-              <td>''</td>
-              <td>PDF文件密码</td>
-            </tr>
-          </tbody>
-        </table>
-        
-        <h3>Events 事件</h3>
-        <table class="props-table">
-          <thead>
-            <tr>
-              <th>事件名</th>
-              <th>参数</th>
-              <th>说明</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>load</td>
-              <td>{ totalPages, currentPage }</td>
-              <td>PDF加载完成时触发</td>
-            </tr>
-            <tr>
-              <td>error</td>
-              <td>Error</td>
-              <td>PDF加载失败时触发</td>
-            </tr>
-            <tr>
-              <td>page-change</td>
-              <td>pageNumber</td>
-              <td>页码变化时触发</td>
-            </tr>
-            <tr>
-              <td>zoom-change</td>
-              <td>scale</td>
-              <td>缩放比例变化时触发</td>
-            </tr>
-            <tr>
-              <td>download</td>
-              <td>src</td>
-              <td>用户点击下载时触发</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizPdfViewer } from '../index.js';
-
-// 响应式数据
-const pdfUrl = ref('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf');
-const samplePdfUrl = ref('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf');
-const showToolbar = ref(true);
-const downloadable = ref(true);
-const eventLogs = ref([]);
-const pdfViewerRef = ref(null);
-
-// 添加事件日志
-const addLog = (event, data) => {
-  const time = new Date().toLocaleTimeString();
-  eventLogs.value.unshift({
-    time,
-    event,
-    data: JSON.stringify(data)
-  });
-  
-  // 保持最多20条记录
-  if (eventLogs.value.length > 20) {
-    eventLogs.value.pop();
-  }
-};
-
-// 事件处理函数
-const handleLoad = (info) => {
-  addLog('PDF加载完成', info);
-  console.log('PDF loaded:', info);
-};
-
-const handleError = (error) => {
-  addLog('PDF加载错误', { message: error.message });
-  console.error('PDF error:', error);
-};
-
-const handlePageChange = (pageNumber) => {
-  addLog('页码变化', { pageNumber });
-  console.log('Page changed:', pageNumber);
-};
-
-const handleZoomChange = (scale) => {
-  addLog('缩放变化', { scale });
-  console.log('Zoom changed:', scale);
-};
-
-const handleDownload = (src) => {
-  addLog('下载PDF', { src });
-  console.log('Download PDF:', src);
-};
-
-// 强制刷新PDF渲染
-const forceRefresh = () => {
-  if (pdfViewerRef.value) {
-    pdfViewerRef.value.forceRender();
-    addLog('强制刷新渲染', { timestamp: Date.now() });
-  }
-};
-</script>
-
-<style scoped>
-.pdf-viewer-demo {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.demo-section {
-  margin-bottom: 40px;
-}
-
-.demo-card {
-  border: 1px solid #e1e1e1;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-}
-
-.demo-controls {
-  margin-bottom: 20px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  align-items: center;
-}
-
-.control-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.url-input {
-  width: 300px;
-  padding: 8px 12px;
-  border: 1px solid #d1d1d1;
-  border-radius: 4px;
-}
-
-.refresh-btn {
-  padding: 8px 16px;
-  background: #0052d9;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.refresh-btn:hover {
-  background: #003eb3;
-}
-
-.demo-viewer {
-  margin-bottom: 20px;
-}
-
-.event-log {
-  background: #f5f5f5;
-  padding: 15px;
-  border-radius: 4px;
-}
-
-.log-container {
-  max-height: 200px;
-  overflow-y: auto;
-  font-family: monospace;
-  font-size: 12px;
-}
-
-.log-item {
-  display: flex;
-  gap: 10px;
-  padding: 2px 0;
-  border-bottom: 1px solid #e1e1e1;
-}
-
-.log-time {
-  color: #666;
-  min-width: 80px;
-}
-
-.log-event {
-  color: #0052d9;
-  min-width: 100px;
-  font-weight: bold;
-}
-
-.log-data {
-  color: #333;
-  flex: 1;
-}
-
-.demo-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-  gap: 20px;
-}
-
-.usage-info {
-  background: #f9f9f9;
-  padding: 20px;
-  border-radius: 8px;
-  margin-top: 20px;
-}
-
-.props-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 10px;
-}
-
-.props-table th,
-.props-table td {
-  border: 1px solid #e1e1e1;
-  padding: 8px 12px;
-  text-align: left;
-}
-
-.props-table th {
-  background: #f5f5f5;
-  font-weight: bold;
-}
-
-.props-table tr:nth-child(even) {
-  background: #fafafa;
-}
-
-h1, h2, h3 {
-  color: #333;
-}
-
-h1 {
-  margin-bottom: 30px;
-  border-bottom: 2px solid #0052d9;
-  padding-bottom: 10px;
-}
-
-h2 {
-  margin-bottom: 20px;
-  color: #0052d9;
-}
-
-h3 {
-  margin-bottom: 15px;
-}
+<template>
+  <div class="pdf-viewer-demo">
+    <h1>EbizPdfViewer PDF预览器示例</h1>
+    
+    <div class="demo-section">
+      <h2>基础用法</h2>
+      <div class="demo-card">
+        <div class="demo-controls">
+          <div class="control-item">
+            <label>PDF文件地址:</label>
+            <input 
+              v-model="pdfUrl" 
+              type="text" 
+              placeholder="请输入PDF文件URL"
+              class="url-input"
+            />
+          </div>
+          <div class="control-item">
+            <label>
+              <input 
+                v-model="showToolbar" 
+                type="checkbox"
+              /> 显示工具栏
+            </label>
+          </div>
+          <div class="control-item">
+            <label>
+              <input 
+                v-model="downloadable" 
+                type="checkbox"
+              /> 允许下载
+            </label>
+          </div>
+          <div class="control-item">
+            <button @click="forceRefresh" class="refresh-btn">
+              强制刷新渲染
+            </button>
+          </div>
+        </div>
+        
+        <div class="demo-viewer">
+          <EbizPdfViewer
+            ref="pdfViewerRef"
+            :src="pdfUrl"
+            :show-toolbar="showToolbar"
+            :downloadable="downloadable"
+            :width="'100%'"
+            :height="'500px'"
+            @load="handleLoad"
+            @error="handleError"
+            @page-change="handlePageChange"
+            @zoom-change="handleZoomChange"
+            @download="handleDownload"
+          />
+        </div>
+        
+        <div class="event-log">
+          <h3>事件日志</h3>
+          <div class="log-container">
+            <div 
+              v-for="(log, index) in eventLogs" 
+              :key="index" 
+              class="log-item"
+            >
+              <span class="log-time">{{ log.time }}</span>
+              <span class="log-event">{{ log.event }}</span>
+              <span class="log-data">{{ log.data }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h2>不同配置示例</h2>
+      
+      <div class="demo-grid">
+        <div class="demo-card">
+          <h3>无工具栏模式</h3>
+          <EbizPdfViewer
+            :src="samplePdfUrl"
+            :show-toolbar="false"
+            :width="'100%'"
+            :height="'300px'"
+          />
+        </div>
+        
+        <div class="demo-card">
+          <h3>自定义尺寸</h3>
+          <EbizPdfViewer
+            :src="samplePdfUrl"
+            :width="'400px'"
+            :height="'300px'"
+          />
+        </div>
+        
+        <div class="demo-card">
+          <h3>指定初始页码</h3>
+          <EbizPdfViewer
+            :src="samplePdfUrl"
+            :page="2"
+            :width="'100%'"
+            :height="'300px'"
+          />
+        </div>
+        
+        <div class="demo-card">
+          <h3>自定义缩放</h3>
+          <EbizPdfViewer
+            :src="samplePdfUrl"
+            :zoom="1.5"
+            :width="'100%'"
+            :height="'300px'"
+          />
+        </div>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h2>使用说明</h2>
+      <div class="usage-info">
+        <h3>Props 属性</h3>
+        <table class="props-table">
+          <thead>
+            <tr>
+              <th>属性名</th>
+              <th>类型</th>
+              <th>默认值</th>
+              <th>说明</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>src</td>
+              <td>String</td>
+              <td>-</td>
+              <td>PDF文件的URL地址或base64数据（必填）</td>
+            </tr>
+            <tr>
+              <td>width</td>
+              <td>String</td>
+              <td>'100%'</td>
+              <td>组件宽度</td>
+            </tr>
+            <tr>
+              <td>height</td>
+              <td>String</td>
+              <td>'600px'</td>
+              <td>组件高度</td>
+            </tr>
+            <tr>
+              <td>showToolbar</td>
+              <td>Boolean</td>
+              <td>true</td>
+              <td>是否显示工具栏</td>
+            </tr>
+            <tr>
+              <td>page</td>
+              <td>Number</td>
+              <td>1</td>
+              <td>初始显示页码</td>
+            </tr>
+            <tr>
+              <td>zoom</td>
+              <td>Number</td>
+              <td>1</td>
+              <td>初始缩放比例</td>
+            </tr>
+            <tr>
+              <td>downloadable</td>
+              <td>Boolean</td>
+              <td>true</td>
+              <td>是否允许下载</td>
+            </tr>
+            <tr>
+              <td>password</td>
+              <td>String</td>
+              <td>''</td>
+              <td>PDF文件密码</td>
+            </tr>
+          </tbody>
+        </table>
+        
+        <h3>Events 事件</h3>
+        <table class="props-table">
+          <thead>
+            <tr>
+              <th>事件名</th>
+              <th>参数</th>
+              <th>说明</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>load</td>
+              <td>{ totalPages, currentPage }</td>
+              <td>PDF加载完成时触发</td>
+            </tr>
+            <tr>
+              <td>error</td>
+              <td>Error</td>
+              <td>PDF加载失败时触发</td>
+            </tr>
+            <tr>
+              <td>page-change</td>
+              <td>pageNumber</td>
+              <td>页码变化时触发</td>
+            </tr>
+            <tr>
+              <td>zoom-change</td>
+              <td>scale</td>
+              <td>缩放比例变化时触发</td>
+            </tr>
+            <tr>
+              <td>download</td>
+              <td>src</td>
+              <td>用户点击下载时触发</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizPdfViewer } from '../index.js';
+
+// 响应式数据
+const pdfUrl = ref('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf');
+const samplePdfUrl = ref('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf');
+const showToolbar = ref(true);
+const downloadable = ref(true);
+const eventLogs = ref([]);
+const pdfViewerRef = ref(null);
+
+// 添加事件日志
+const addLog = (event, data) => {
+  const time = new Date().toLocaleTimeString();
+  eventLogs.value.unshift({
+    time,
+    event,
+    data: JSON.stringify(data)
+  });
+  
+  // 保持最多20条记录
+  if (eventLogs.value.length > 20) {
+    eventLogs.value.pop();
+  }
+};
+
+// 事件处理函数
+const handleLoad = (info) => {
+  addLog('PDF加载完成', info);
+  console.log('PDF loaded:', info);
+};
+
+const handleError = (error) => {
+  addLog('PDF加载错误', { message: error.message });
+  console.error('PDF error:', error);
+};
+
+const handlePageChange = (pageNumber) => {
+  addLog('页码变化', { pageNumber });
+  console.log('Page changed:', pageNumber);
+};
+
+const handleZoomChange = (scale) => {
+  addLog('缩放变化', { scale });
+  console.log('Zoom changed:', scale);
+};
+
+const handleDownload = (src) => {
+  addLog('下载PDF', { src });
+  console.log('Download PDF:', src);
+};
+
+// 强制刷新PDF渲染
+const forceRefresh = () => {
+  if (pdfViewerRef.value) {
+    pdfViewerRef.value.forceRender();
+    addLog('强制刷新渲染', { timestamp: Date.now() });
+  }
+};
+</script>
+
+<style scoped>
+.pdf-viewer-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+.demo-card {
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.demo-controls {
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: center;
+}
+
+.control-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.url-input {
+  width: 300px;
+  padding: 8px 12px;
+  border: 1px solid #d1d1d1;
+  border-radius: 4px;
+}
+
+.refresh-btn {
+  padding: 8px 16px;
+  background: #0052d9;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.refresh-btn:hover {
+  background: #003eb3;
+}
+
+.demo-viewer {
+  margin-bottom: 20px;
+}
+
+.event-log {
+  background: #f5f5f5;
+  padding: 15px;
+  border-radius: 4px;
+}
+
+.log-container {
+  max-height: 200px;
+  overflow-y: auto;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.log-item {
+  display: flex;
+  gap: 10px;
+  padding: 2px 0;
+  border-bottom: 1px solid #e1e1e1;
+}
+
+.log-time {
+  color: #666;
+  min-width: 80px;
+}
+
+.log-event {
+  color: #0052d9;
+  min-width: 100px;
+  font-weight: bold;
+}
+
+.log-data {
+  color: #333;
+  flex: 1;
+}
+
+.demo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 20px;
+}
+
+.usage-info {
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+  margin-top: 20px;
+}
+
+.props-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+.props-table th,
+.props-table td {
+  border: 1px solid #e1e1e1;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.props-table th {
+  background: #f5f5f5;
+  font-weight: bold;
+}
+
+.props-table tr:nth-child(even) {
+  background: #fafafa;
+}
+
+h1, h2, h3 {
+  color: #333;
+}
+
+h1 {
+  margin-bottom: 30px;
+  border-bottom: 2px solid #0052d9;
+  padding-bottom: 10px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  color: #0052d9;
+}
+
+h3 {
+  margin-bottom: 15px;
+}
 </style>