@ebiz/designer-components 0.1.0 → 0.1.1

package/src/components/EbizFileUpload.vue

@@ -1,239 +1,239 @@
-<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);
-}
+<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>