@ebiz/designer-components 0.1.79 → 0.1.81

package/src/views/EbizFileListDemo.vue

@@ -1,340 +1,340 @@
-<template>
-  <div class="demo-container">
-    <h1>EbizFileList 文件列表组件演示</h1>
-    
-    <div class="demo-section">
-      <h2>基础使用</h2>
-      <p>支持数组和字符串两种格式的文件列表</p>
-      <div class="demo-block">
-        <h3>数组格式</h3>
-        <EbizFileList 
-          :files="arrayFiles"
-          @file-click="handleFileClick"
-          @file-download="handleFileDownload"
-          @file-preview="handleFilePreview"
-        />
-      </div>
-      
-      <div class="demo-block">
-        <h3>字符串格式（逗号分隔）</h3>
-        <EbizFileList 
-          :files="stringFiles"
-          @file-click="handleFileClick"
-          @file-download="handleFileDownload"
-        />
-      </div>
-      
-      <div class="demo-block">
-        <h3>单个URL字符串</h3>
-        <EbizFileList 
-          :files="singleUrlFile"
-          @file-click="handleFileClick"
-          @file-download="handleFileDownload"
-        />
-      </div>
-      
-      <div class="demo-block">
-        <h3>纯URL数组</h3>
-        <EbizFileList 
-          :files="urlArrayFiles"
-          @file-click="handleFileClick"
-          @file-download="handleFileDownload"
-        />
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2>功能配置</h2>
-      <div class="demo-block">
-        <h3>允许删除文件</h3>
-        <EbizFileList 
-          :files="deletableFiles"
-          :allow-delete="true"
-          @file-delete="handleFileDelete"
-          @file-click="handleFileClick"
-        />
-      </div>
-      
-      <div class="demo-block">
-        <h3>混合文件类型</h3>
-        <EbizFileList 
-          :files="mixedFiles"
-          @file-click="handleFileClick"
-        />
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2>配置选项</h2>
-      <div class="demo-block">
-        <h3>隐藏文件信息</h3>
-        <EbizFileList 
-          :files="configFiles"
-          :show-file-size="false"
-          :show-file-type="false"
-        />
-      </div>
-    </div>
-
-    <!-- 事件日志 -->
-    <div class="demo-section">
-      <h2>事件日志</h2>
-      <div class="event-log">
-        <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
-          <span class="timestamp">{{ log.timestamp }}</span>
-          <span class="event-type">{{ log.type }}</span>
-          <span class="event-data">{{ log.data }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizFileList } from '../index.js';
-
-// 文件数据
-const arrayFiles = ref([
-  {
-    name: '示例PDF文档.pdf',
-    url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
-    size: 1024000,
-    extension: 'pdf'
-  },
-  {
-    name: '示例图片.jpg',
-    url: 'https://picsum.photos/400/300?random=1',
-    size: 256000,
-    extension: 'jpg'
-  },
-  {
-    name: 'Excel表格.xlsx',
-    url: 'https://example.com/sample.xlsx',
-    size: 512000,
-    extension: 'xlsx'
-  },
-  {
-    name: 'Word文档.docx',
-    url: 'https://example.com/sample.docx',
-    size: 128000,
-    extension: 'docx'
-  },
-  {
-    name: 'PPT演示文稿.pptx',
-    url: 'https://example.com/sample.pptx',
-    size: 2048000,
-    extension: 'pptx'
-  },
-  {
-    name: '压缩包.zip',
-    url: 'https://example.com/sample.zip',
-    size: 5120000,
-    extension: 'zip'
-  }
-]);
-
-const stringFiles = ref('https://picsum.photos/300/200?random=2,https://picsum.photos/300/200?random=3,https://example.com/document.pdf,https://example.com/music.mp3');
-
-// 单个URL字符串
-const singleUrlFile = ref('https://picsum.photos/400/300?random=6');
-
-// 纯URL数组
-const urlArrayFiles = ref([
-  'https://picsum.photos/300/200?random=7',
-  'https://picsum.photos/300/200?random=8', 
-  'https://example.com/sample-document.pdf',
-  'https://example.com/presentation.pptx',
-  'https://example.com/data-export.xlsx'
-]);
-
-const mixedFiles = ref([
-  {
-    name: '技术文档.pdf',
-    url: 'https://example.com/tech-doc.pdf',
-    size: 1024000,
-    extension: 'pdf'
-  },
-  {
-    name: '项目截图.png',
-    url: 'https://picsum.photos/400/300?random=4',
-    size: 256000,
-    extension: 'png'
-  },
-  {
-    name: '数据表格.xlsx',
-    url: 'https://example.com/data.xlsx',
-    size: 512000,
-    extension: 'xlsx'
-  },
-  {
-    name: '音乐文件.mp3',
-    url: 'https://example.com/music.mp3',
-    size: 3072000,
-    extension: 'mp3'
-  }
-]);
-
-const deletableFiles = ref([
-  {
-    name: '可删除文档.pdf',
-    url: 'https://example.com/deletable.pdf',
-    size: 512000,
-    extension: 'pdf'
-  },
-  {
-    name: '可删除图片.jpg',
-    url: 'https://picsum.photos/300/200?random=5',
-    size: 128000,
-    extension: 'jpg'
-  },
-  {
-    name: '可删除视频.mp4',
-    url: 'https://example.com/video.mp4',
-    size: 10240000,
-    extension: 'mp4'
-  }
-]);
-
-const configFiles = ref([
-  {
-    name: '配置文件1.json',
-    url: 'https://example.com/config1.json',
-    extension: 'json'
-  },
-  {
-    name: '配置文件2.xml',
-    url: 'https://example.com/config2.xml',
-    extension: 'xml'
-  },
-  {
-    name: '样式文件.css',
-    url: 'https://example.com/style.css',
-    extension: 'css'
-  },
-  {
-    name: '脚本文件.js',
-    url: 'https://example.com/script.js',
-    extension: 'js'
-  }
-]);
-
-// 事件日志
-const eventLogs = ref([]);
-
-const addLog = (type, data) => {
-  eventLogs.value.unshift({
-    timestamp: new Date().toLocaleTimeString(),
-    type,
-    data: JSON.stringify(data, null, 2)
-  });
-  
-  // 限制日志数量
-  if (eventLogs.value.length > 10) {
-    eventLogs.value = eventLogs.value.slice(0, 10);
-  }
-};
-
-// 事件处理函数
-const handleFileClick = (file) => {
-  addLog('文件点击', { name: file.name, url: file.url });
-};
-
-const handleFileDownload = (file) => {
-  addLog('文件下载', { name: file.name, url: file.url });
-};
-
-const handleFilePreview = (file) => {
-  addLog('文件预览', { name: file.name, url: file.url });
-};
-
-const handleFileDelete = (file, index) => {
-  addLog('文件删除', { name: file.name, index });
-  
-  // 从列表中移除文件
-  if (file.url && file.url.includes('deletable')) {
-    deletableFiles.value.splice(index, 1);
-  }
-};
-</script>
-
-<style scoped>
-.demo-container {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-h1 {
-  color: #333;
-  border-bottom: 2px solid #0052d9;
-  padding-bottom: 10px;
-  margin-bottom: 30px;
-}
-
-h2 {
-  color: #555;
-  margin: 30px 0 15px 0;
-  font-size: 24px;
-}
-
-h3 {
-  color: #666;
-  margin: 20px 0 10px 0;
-  font-size: 18px;
-}
-
-.demo-section {
-  margin-bottom: 40px;
-}
-
-.demo-block {
-  margin-bottom: 30px;
-  padding: 20px;
-  border: 1px solid #e6e6e6;
-  border-radius: 8px;
-  background: #fafafa;
-}
-
-.demo-block p {
-  margin: 0 0 15px 0;
-  color: #666;
-}
-
-.event-log {
-  max-height: 400px;
-  overflow-y: auto;
-  border: 1px solid #e6e6e6;
-  border-radius: 4px;
-  padding: 10px;
-  background: #f9f9f9;
-}
-
-.log-item {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 8px;
-  padding: 8px;
-  background: white;
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 12px;
-}
-
-.timestamp {
-  color: #666;
-  min-width: 80px;
-}
-
-.event-type {
-  color: #0052d9;
-  font-weight: bold;
-  min-width: 80px;
-}
-
-.event-data {
-  color: #333;
-  flex: 1;
-  word-break: break-all;
-}
+<template>
+  <div class="demo-container">
+    <h1>EbizFileList 文件列表组件演示</h1>
+    
+    <div class="demo-section">
+      <h2>基础使用</h2>
+      <p>支持数组和字符串两种格式的文件列表</p>
+      <div class="demo-block">
+        <h3>数组格式</h3>
+        <EbizFileList 
+          :files="arrayFiles"
+          @file-click="handleFileClick"
+          @file-download="handleFileDownload"
+          @file-preview="handleFilePreview"
+        />
+      </div>
+      
+      <div class="demo-block">
+        <h3>字符串格式（逗号分隔）</h3>
+        <EbizFileList 
+          :files="stringFiles"
+          @file-click="handleFileClick"
+          @file-download="handleFileDownload"
+        />
+      </div>
+      
+      <div class="demo-block">
+        <h3>单个URL字符串</h3>
+        <EbizFileList 
+          :files="singleUrlFile"
+          @file-click="handleFileClick"
+          @file-download="handleFileDownload"
+        />
+      </div>
+      
+      <div class="demo-block">
+        <h3>纯URL数组</h3>
+        <EbizFileList 
+          :files="urlArrayFiles"
+          @file-click="handleFileClick"
+          @file-download="handleFileDownload"
+        />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>功能配置</h2>
+      <div class="demo-block">
+        <h3>允许删除文件</h3>
+        <EbizFileList 
+          :files="deletableFiles"
+          :allow-delete="true"
+          @file-delete="handleFileDelete"
+          @file-click="handleFileClick"
+        />
+      </div>
+      
+      <div class="demo-block">
+        <h3>混合文件类型</h3>
+        <EbizFileList 
+          :files="mixedFiles"
+          @file-click="handleFileClick"
+        />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>配置选项</h2>
+      <div class="demo-block">
+        <h3>隐藏文件信息</h3>
+        <EbizFileList 
+          :files="configFiles"
+          :show-file-size="false"
+          :show-file-type="false"
+        />
+      </div>
+    </div>
+
+    <!-- 事件日志 -->
+    <div class="demo-section">
+      <h2>事件日志</h2>
+      <div class="event-log">
+        <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
+          <span class="timestamp">{{ log.timestamp }}</span>
+          <span class="event-type">{{ log.type }}</span>
+          <span class="event-data">{{ log.data }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizFileList } from '../index.js';
+
+// 文件数据
+const arrayFiles = ref([
+  {
+    name: '示例PDF文档.pdf',
+    url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+    size: 1024000,
+    extension: 'pdf'
+  },
+  {
+    name: '示例图片.jpg',
+    url: 'https://picsum.photos/400/300?random=1',
+    size: 256000,
+    extension: 'jpg'
+  },
+  {
+    name: 'Excel表格.xlsx',
+    url: 'https://example.com/sample.xlsx',
+    size: 512000,
+    extension: 'xlsx'
+  },
+  {
+    name: 'Word文档.docx',
+    url: 'https://example.com/sample.docx',
+    size: 128000,
+    extension: 'docx'
+  },
+  {
+    name: 'PPT演示文稿.pptx',
+    url: 'https://example.com/sample.pptx',
+    size: 2048000,
+    extension: 'pptx'
+  },
+  {
+    name: '压缩包.zip',
+    url: 'https://example.com/sample.zip',
+    size: 5120000,
+    extension: 'zip'
+  }
+]);
+
+const stringFiles = ref('https://picsum.photos/300/200?random=2,https://picsum.photos/300/200?random=3,https://example.com/document.pdf,https://example.com/music.mp3');
+
+// 单个URL字符串
+const singleUrlFile = ref('https://picsum.photos/400/300?random=6');
+
+// 纯URL数组
+const urlArrayFiles = ref([
+  'https://picsum.photos/300/200?random=7',
+  'https://picsum.photos/300/200?random=8', 
+  'https://example.com/sample-document.pdf',
+  'https://example.com/presentation.pptx',
+  'https://example.com/data-export.xlsx'
+]);
+
+const mixedFiles = ref([
+  {
+    name: '技术文档.pdf',
+    url: 'https://example.com/tech-doc.pdf',
+    size: 1024000,
+    extension: 'pdf'
+  },
+  {
+    name: '项目截图.png',
+    url: 'https://picsum.photos/400/300?random=4',
+    size: 256000,
+    extension: 'png'
+  },
+  {
+    name: '数据表格.xlsx',
+    url: 'https://example.com/data.xlsx',
+    size: 512000,
+    extension: 'xlsx'
+  },
+  {
+    name: '音乐文件.mp3',
+    url: 'https://example.com/music.mp3',
+    size: 3072000,
+    extension: 'mp3'
+  }
+]);
+
+const deletableFiles = ref([
+  {
+    name: '可删除文档.pdf',
+    url: 'https://example.com/deletable.pdf',
+    size: 512000,
+    extension: 'pdf'
+  },
+  {
+    name: '可删除图片.jpg',
+    url: 'https://picsum.photos/300/200?random=5',
+    size: 128000,
+    extension: 'jpg'
+  },
+  {
+    name: '可删除视频.mp4',
+    url: 'https://example.com/video.mp4',
+    size: 10240000,
+    extension: 'mp4'
+  }
+]);
+
+const configFiles = ref([
+  {
+    name: '配置文件1.json',
+    url: 'https://example.com/config1.json',
+    extension: 'json'
+  },
+  {
+    name: '配置文件2.xml',
+    url: 'https://example.com/config2.xml',
+    extension: 'xml'
+  },
+  {
+    name: '样式文件.css',
+    url: 'https://example.com/style.css',
+    extension: 'css'
+  },
+  {
+    name: '脚本文件.js',
+    url: 'https://example.com/script.js',
+    extension: 'js'
+  }
+]);
+
+// 事件日志
+const eventLogs = ref([]);
+
+const addLog = (type, data) => {
+  eventLogs.value.unshift({
+    timestamp: new Date().toLocaleTimeString(),
+    type,
+    data: JSON.stringify(data, null, 2)
+  });
+  
+  // 限制日志数量
+  if (eventLogs.value.length > 10) {
+    eventLogs.value = eventLogs.value.slice(0, 10);
+  }
+};
+
+// 事件处理函数
+const handleFileClick = (file) => {
+  addLog('文件点击', { name: file.name, url: file.url });
+};
+
+const handleFileDownload = (file) => {
+  addLog('文件下载', { name: file.name, url: file.url });
+};
+
+const handleFilePreview = (file) => {
+  addLog('文件预览', { name: file.name, url: file.url });
+};
+
+const handleFileDelete = (file, index) => {
+  addLog('文件删除', { name: file.name, index });
+  
+  // 从列表中移除文件
+  if (file.url && file.url.includes('deletable')) {
+    deletableFiles.value.splice(index, 1);
+  }
+};
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+h1 {
+  color: #333;
+  border-bottom: 2px solid #0052d9;
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+}
+
+h2 {
+  color: #555;
+  margin: 30px 0 15px 0;
+  font-size: 24px;
+}
+
+h3 {
+  color: #666;
+  margin: 20px 0 10px 0;
+  font-size: 18px;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+.demo-block {
+  margin-bottom: 30px;
+  padding: 20px;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  background: #fafafa;
+}
+
+.demo-block p {
+  margin: 0 0 15px 0;
+  color: #666;
+}
+
+.event-log {
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  padding: 10px;
+  background: #f9f9f9;
+}
+
+.log-item {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 8px;
+  padding: 8px;
+  background: white;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.timestamp {
+  color: #666;
+  min-width: 80px;
+}
+
+.event-type {
+  color: #0052d9;
+  font-weight: bold;
+  min-width: 80px;
+}
+
+.event-data {
+  color: #333;
+  flex: 1;
+  word-break: break-all;
+}
 </style>