@ebiz/designer-components 0.1.15 → 0.1.17

package/src/views/EbizFileListDemo.vue

@@ -0,0 +1,310 @@
+<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>
+
+    <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');
+
+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> 

package/src/views/Home.vue

@@ -94,7 +94,8 @@ export default {
       { path: '/approval', title: 'Ebiz审批组件示例' },
       { path: '/vxe-table', title: 'EbizVxeTable示例' },
       { path: '/meeting-room-selector', title: 'Ebiz会议室选择器组件示例' },
-      { path: '/mobile-meeting-room-selector', title: 'Ebiz移动端会议室选择器组件示例' }
+      { path: '/mobile-meeting-room-selector', title: 'Ebiz移动端会议室选择器组件示例' },
+      { path: '/file-list-demo', title: '文件列表demo' }
     ]
 
     return {