@ebiz/designer-components 0.1.18 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.18",
+  "version": "0.1.21",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizFileList.vue

@@ -133,20 +133,33 @@ const getFullUrl = (url) => {
   return props.baseUrl + url;
 };
 
-// 提取文件名
-const extractFileName = (url) => {
-  if (!url) return '未知文件';
-  const parts = url.split('/');
-  return parts[parts.length - 1] || '未知文件';
-};
-
 // 获取文件扩展名
 const getFileExtension = (filename) => {
   if (!filename) return '';
-  const parts = filename.split('.');
+  // 移除查询参数和锚点
+  const cleanFilename = filename.split('?')[0].split('#')[0];
+  const parts = cleanFilename.split('.');
   return parts.length > 1 ? parts.pop().toLowerCase() : '';
 };
 
+// 提取文件名
+const extractFileName = (url) => {
+  if (!url) return '未知文件';
+  
+  // 移除查询参数和锚点
+  const cleanUrl = url.split('?')[0].split('#')[0];
+  const parts = cleanUrl.split('/');
+  let fileName = parts[parts.length - 1] || '未知文件';
+  
+  // 如果文件名为空或只是扩展名，生成一个默认名称
+  if (!fileName || fileName.startsWith('.')) {
+    const extension = getFileExtension(fileName || url);
+    fileName = extension ? `文件.${extension}` : '未知文件';
+  }
+  
+  return fileName;
+};
+
 // 解析文件信息
 const parseFileInfo = (url) => {
   const fullUrl = getFullUrl(url);
@@ -166,24 +179,45 @@ const computedFiles = computed(() => {
   let fileList = [];
   
   if (typeof props.files === 'string') {
-    // 字符串格式，按逗号分割
-    const urls = props.files.split(',').map(url => url.trim()).filter(url => url);
-    fileList = urls.map(url => parseFileInfo(url));
+    if (!props.files.trim()) {
+      return [];
+    }
+    
+    // 判断是单个URL还是逗号分隔的多个URL
+    if (props.files.includes(',')) {
+      // 逗号分隔的多个URL
+      const urls = props.files.split(',').map(url => url.trim()).filter(url => url);
+      fileList = urls.map(url => parseFileInfo(url));
+    } else {
+      // 单个URL
+      fileList = [parseFileInfo(props.files.trim())];
+    }
   } else if (Array.isArray(props.files)) {
     // 数组格式
     fileList = props.files.map(file => {
       if (typeof file === 'string') {
+        // 数组中的字符串元素，直接作为URL处理
         return parseFileInfo(file);
-      } else {
+      } else if (file && typeof file === 'object') {
+        // 对象格式的文件信息
+        const url = file.url || file.src || file.path || '';
         return {
-          name: file.name || extractFileName(file.url),
-          url: getFullUrl(file.url),
-          size: file.size,
-          extension: file.extension || getFileExtension(file.url || file.name),
+          name: file.name || extractFileName(url),
+          url: getFullUrl(url),
+          size: file.size || null,
+          extension: file.extension || getFileExtension(url || file.name || ''),
           ...file
         };
+      } else {
+        // 其他情况，返回默认对象
+        return {
+          name: '未知文件',
+          url: '',
+          extension: '',
+          size: null
+        };
       }
-    });
+    }).filter(file => file.url); // 过滤掉没有URL的文件
   }
   
   return fileList;

package/src/components/TdesignUpload.vue

@@ -254,11 +254,9 @@ const computedModelValue = computed({
     get() {
         if (props.modelValue instanceof Array) {
             return props.modelValue.map(file => {
-
                 // 从文件路径获取文件名
-                const fileName = file.split('/').pop();
                 return {
-                    name: fileName,
+                    name: file.name,
                     url: file
                 }
             });
@@ -277,11 +275,18 @@ const computedModelValue = computed({
         }
     },
     set(value) {
-        const urls = value.map(file => file.url).filter(Boolean);
+        const files = [];
+        for( const fileItem of value ){
+            files.push({
+                url: fileItem.url,
+                name: fileItem.name,
+                size: fileItem.size
+            })
+        }
         if (props.multiple) {
-            emit('update:modelValue', urls);
+            emit('update:modelValue', files);
         } else {
-            emit('update:modelValue', urls[0]);
+            emit('update:modelValue', files[0]);
         }
     }
 });

package/src/views/EbizFileListDemo.vue

@@ -23,6 +23,24 @@
           @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">
@@ -118,6 +136,18 @@ const arrayFiles = ref([
 
 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',

package/src/views/UploadDemo.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="upload-demo-container">
     <h2>上传组件示例</h2>
+
+    {{ fileList }}
     
     <div class="demo-section">
       <h3>基础用法</h3>
       <EbizUpload
+      v-model="fileList"
         :useInternalUpload="true"
         :auto-upload="true"
+        :multiple="true"
         tips="请选择文件上传"
       >
         <template #default>
@@ -99,6 +103,9 @@ export default {
 <script setup>
 import { EbizUpload } from '../index.js';
 import { Button as TButton } from 'tdesign-vue-next';
+import { ref } from "vue";
+
+const fileList = ref([])
 </script>
 
 <style lang="less" scoped>

package/src/components/EbizFileUpload.vue

@@ -1,239 +0,0 @@
-<template>
-  <div class="ebiz-file-upload">
-    <t-upload
-      ref="uploadRef"
-      v-model="fileList"
-      :action="uploadUrl"
-      :headers="headers"
-      :multiple="multiple"
-      :accept="accept"
-      :max-size="sizeLimit"
-      :disabled="disabled"
-      :drag="draggable"
-      :theme="tTheme"
-      :tips="tips"
-      :show-upload-progress="showUploadProgress"
-      :before-upload="handleBeforeUpload"
-      :on-success="handleSuccess"
-      :on-error="handleError"
-      @change="handleChange"
-    >
-      <template #default v-if="customTrigger">
-        <slot name="trigger"></slot>
-      </template>
-      <template #trigger v-else>
-        <t-button :size="btnSize" :theme="buttonType" :variant="buttonPlain ? 'outline' : 'base'">
-          {{ buttonText }}
-        </t-button>
-      </template>
-    </t-upload>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue';
-import { Upload as TUpload, Button as TButton } from 'tdesign-vue-next';
-
-/**
- * EbizFileUpload 组件 - 基于 TDesign Upload 的文件上传组件
- * 支持自定义上传地址、文件类型限制、大小限制、多文件上传等
- * 提供成功和失败的回调处理
- */
-const props = defineProps({
-  /**
-   * 上传地址
-   */
-  action: {
-    type: String,
-    default: '/api/file/upload'
-  },
-  /**
-   * 上传请求头信息
-   */
-  headers: {
-    type: Object,
-    default: () => ({})
-  },
-  /**
-   * 是否允许多文件上传
-   */
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 接受上传的文件类型
-   */
-  accept: {
-    type: String,
-    default: '*'
-  },
-  /**
-   * 文件大小限制，单位 KB
-   */
-  sizeLimit: {
-    type: Number,
-    default: 5 * 1024  // 默认5MB
-  },
-  /**
-   * 是否禁用上传
-   */
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 是否支持拖拽上传
-   */
-  draggable: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 上传组件主题
-   */
-  theme: {
-    type: String,
-    default: 'text',
-    validator: (val) => ['text', 'button', 'both'].includes(val)
-  },
-  /**
-   * 上传按钮文本
-   */
-  buttonText: {
-    type: String,
-    default: '上传文件'
-  },
-  /**
-   * 上传提示文本
-   */
-  tips: {
-    type: String,
-    default: ''
-  },
-  /**
-   * 是否显示上传进度
-   */
-  showUploadProgress: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * 初始文件列表
-   */
-  initialFiles: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * 按钮大小
-   */
-  buttonSize: {
-    type: String,
-    default: 'medium',
-    validator: (val) => ['medium', 'small', 'mini'].includes(val)
-  },
-  /**
-   * 按钮类型
-   */
-  buttonType: {
-    type: String,
-    default: 'primary',
-    validator: (val) => ['default', 'primary', 'success', 'warning', 'danger', 'info', 'text'].includes(val)
-  },
-  /**
-   * 按钮是否为朴素按钮
-   */
-  buttonPlain: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * 是否使用自定义触发器
-   */
-  customTrigger: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const emit = defineEmits(['update:files', 'success', 'error', 'change']);
-
-// 文件列表状态
-const fileList = ref(props.initialFiles || []);
-
-// 计算上传地址
-const uploadUrl = computed(() => props.action);
-
-// 将tiny主题映射到tdesign主题
-const tTheme = computed(() => {
-  switch (props.theme) {
-    case 'button': return 'button';
-    case 'both': return 'file-input';
-    default: return 'file';
-  }
-});
-
-// 将tiny按钮大小映射到tdesign按钮大小
-const btnSize = computed(() => {
-  switch (props.buttonSize) {
-    case 'mini': return 'small';
-    case 'small': return 'medium';
-    default: return 'large';
-  }
-});
-
-// 上传前处理
-const handleBeforeUpload = (_file) => {
-  // 可以在这里添加文件校验逻辑
-  return true;
-};
-
-// 上传成功处理
-const handleSuccess = (result, file, fileList) => {
-  emit('success', { file: file.raw, response: result, fileList });
-};
-
-// 上传失败处理
-const handleError = (error, file, fileList) => {
-  emit('error', { file: file.raw, error, fileList });
-};
-
-// 文件变更处理
-const handleChange = (value, context) => {
-  emit('update:files', value);
-  emit('change', { file: context.file?.raw, fileList: value });
-};
-
-// 监听initialFiles变化更新文件列表
-watch(() => props.initialFiles, (newFiles) => {
-  if (newFiles && newFiles.length > 0) {
-    fileList.value = [...newFiles];
-  }
-});
-</script>
-
-<style scoped>
-.ebiz-file-upload {
-  width: 100%;
-  margin: 16px 0;
-}
-
-:deep(.t-upload__tips) {
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-:deep(.t-upload__dragger) {
-  padding: 24px;
-  background-color: var(--td-bg-color-container);
-  border: 1px dashed var(--td-component-border);
-  border-radius: 3px;
-  cursor: pointer;
-  transition: border-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
-}
-
-:deep(.t-upload__dragger:hover) {
-  border-color: var(--td-brand-color);
-}
-</style>