foucui 1.0.1 → 2.0.0

package/components/QiuUpload/index.vue

@@ -1,628 +0,0 @@
-<template>
-  <div
-    class="qiu-upload"
-    :class="{
-      'is-disabled': disabled,
-      [`qiu-upload--${listType}`]: true,
-      'is-dragover': dragOver,
-    }"
-  >
-    <input
-      ref="inputRef"
-      class="qiu-upload__input"
-      type="file"
-      :accept="accept"
-      :multiple="multiple"
-      :disabled="disabled"
-      @change="onInputChange"
-    />
-
-    <div v-if="listType === 'picture-card'" class="qiu-upload__card-list">
-      <div
-        v-for="item in fileList"
-        :key="item.uid"
-        class="qiu-upload__card"
-        :style="cardStyle"
-      >
-        <img
-          v-if="showPreview && previewSrc(item)"
-          :src="previewSrc(item)!"
-          class="qiu-upload__card-img"
-          alt=""
-        />
-        <div v-else class="qiu-upload__card-name">{{ item.name }}</div>
-        <div v-if="item.status === 'uploading'" class="qiu-upload__card-progress">
-          {{ item.percentage || 0 }}%
-        </div>
-        <button type="button" class="qiu-upload__card-remove" :disabled="disabled" @click="removeFile(item)">
-          ×
-        </button>
-      </div>
-      <button
-        v-if="!disabled && (!limit || fileList.length < limit)"
-        type="button"
-        class="qiu-upload__card-trigger"
-        :style="cardStyle"
-        @click="openPicker"
-      >
-        <qiu-icon icon="add-line" />
-        <span>上传</span>
-      </button>
-    </div>
-
-    <template v-else>
-      <div
-        v-if="drag"
-        class="qiu-upload__dragger"
-        @click="openPicker"
-        @dragover.prevent="onDragOver"
-        @dragleave.prevent="onDragLeave"
-        @drop.prevent="onDrop"
-      >
-        <qiu-icon icon="upload-cloud-2-line" class="qiu-upload__drag-icon" />
-        <p>将文件拖到此处，或 <em>点击上传</em></p>
-        <p v-if="tip" class="qiu-upload__tip">{{ tip }}</p>
-      </div>
-      <div v-else class="qiu-upload__trigger">
-        <qiu-button type="primary" :disabled="disabled" icon="upload-2-line" @click="openPicker">
-          {{ buttonText }}
-        </qiu-button>
-        <p v-if="tip" class="qiu-upload__tip">{{ tip }}</p>
-      </div>
-
-      <ul v-if="fileList.length" class="qiu-upload__list">
-        <li v-for="item in fileList" :key="item.uid" class="qiu-upload__item">
-          <div class="qiu-upload__item-main">
-            <img
-              v-if="showPreview && previewSrc(item)"
-              :src="previewSrc(item)!"
-              class="qiu-upload__thumb"
-              :style="thumbStyle"
-              alt=""
-            />
-            <qiu-icon v-else :icon="isImage(item.name) ? 'image-line' : 'file-line'" />
-            <span class="qiu-upload__name" :title="item.name">{{ item.name }}</span>
-            <span class="qiu-upload__size">{{ formatSize(item.size) }}</span>
-            <button type="button" class="qiu-upload__remove" :disabled="disabled" @click="removeFile(item)">
-              <qiu-icon icon="close-line" />
-            </button>
-          </div>
-          <div v-if="item.status === 'uploading'" class="qiu-upload__progress">
-            <div class="qiu-upload__progress-bar" :style="{ width: `${item.percentage || 0}%` }" />
-          </div>
-          <div v-else-if="item.status === 'fail'" class="qiu-upload__fail">上传失败</div>
-          <pre v-if="showResponse && item.response != null" class="qiu-upload__response">{{ formatResponse(item.response) }}</pre>
-        </li>
-      </ul>
-    </template>
-  </div>
-</template>
-
-<script lang="ts" setup>
-/**
- * QiuUpload — 自研上传（事件模式 / action HTTP）
- * 支持实时预览开关、返回内容展示、自动缩略图
- */
-defineOptions({ name: 'QiuUpload' })
-
-export type QiuUploadFile = {
-  uid: number
-  name: string
-  size: number
-  raw?: File
-  url?: string
-  /** 缩略图（blob/dataURL） */
-  thumbnail?: string
-  status?: 'ready' | 'uploading' | 'success' | 'fail'
-  percentage?: number
-  response?: unknown
-}
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: QiuUploadFile[]
-    accept?: string
-    multiple?: boolean
-    limit?: number
-    disabled?: boolean
-    drag?: boolean
-    listType?: 'text' | 'picture-card'
-    buttonText?: string
-    tip?: string
-    autoUpload?: boolean
-    action?: string
-    headers?: Record<string, string>
-    name?: string
-    data?: Record<string, string | Blob>
-    withCredentials?: boolean
-    /** 是否显示实时图片预览 */
-    showPreview?: boolean
-    /** 上传成功后是否展示返回内容 */
-    showResponse?: boolean
-    /** 是否自动生成缩略图 */
-    autoThumbnail?: boolean
-    /** 缩略图边长（px） */
-    thumbnailSize?: number
-    /** 缩略图压缩质量 0.1~1（控制体积，便于存储） */
-    outputQuality?: number
-    /** 缩略图输出格式 */
-    thumbnailType?: 'image/jpeg' | 'image/webp' | 'image/png'
-  }>(),
-  {
-    modelValue: () => [],
-    accept: '',
-    multiple: false,
-    limit: 0,
-    disabled: false,
-    drag: false,
-    listType: 'text',
-    buttonText: '点击上传',
-    tip: '',
-    autoUpload: true,
-    action: '',
-    headers: () => ({}),
-    name: 'file',
-    data: () => ({}),
-    withCredentials: false,
-    showPreview: true,
-    showResponse: false,
-    autoThumbnail: false,
-    thumbnailSize: 64,
-    outputQuality: 0.85,
-    thumbnailType: 'image/jpeg',
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [QiuUploadFile[]]
-  change: [file: QiuUploadFile, fileList: QiuUploadFile[]]
-  remove: [file: QiuUploadFile, fileList: QiuUploadFile[]]
-  exceed: [files: File[], fileList: QiuUploadFile[]]
-  success: [response: unknown, file: QiuUploadFile, fileList: QiuUploadFile[]]
-  error: [error: Error, file: QiuUploadFile, fileList: QiuUploadFile[]]
-  progress: [percent: number, file: QiuUploadFile, fileList: QiuUploadFile[]]
-}>()
-
-const inputRef = ref<HTMLInputElement | null>(null)
-const dragOver = ref(false)
-const fileList = ref<QiuUploadFile[]>([...props.modelValue])
-let uidSeed = Date.now()
-
-watch(
-  () => props.modelValue,
-  (v) => {
-    fileList.value = [...(v || [])]
-  }
-)
-
-const sync = () => emit('update:modelValue', [...fileList.value])
-
-const thumbStyle = computed(() => {
-  const s = Math.max(24, props.thumbnailSize || 64)
-  return { width: `${s}px`, height: `${s}px` }
-})
-
-const cardStyle = computed(() => {
-  const s = Math.max(64, props.thumbnailSize || 100)
-  return { width: `${s}px`, height: `${s}px` }
-})
-
-const formatSize = (size = 0) => {
-  if (size < 1024) return `${size} B`
-  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
-  return `${(size / 1024 / 1024).toFixed(1)} MB`
-}
-
-const isImage = (name: string) => /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(name)
-
-const previewSrc = (item: QiuUploadFile) => {
-  if (!props.showPreview) return ''
-  if (!isImage(item.name) && !item.url) return ''
-  return item.thumbnail || item.url || ''
-}
-
-const formatResponse = (res: unknown) => {
-  if (typeof res === 'string') return res
-  try {
-    return JSON.stringify(res, null, 2)
-  } catch {
-    return String(res)
-  }
-}
-
-/** 从响应中尝试提取图片 URL */
-const pickUrlFromResponse = (response: unknown): string => {
-  if (!response) return ''
-  if (typeof response === 'string' && /^https?:|^\/|blob:|data:/i.test(response)) return response
-  if (typeof response === 'object' && response) {
-    const o = response as Record<string, any>
-    return (
-      o.url ||
-      o.data?.url ||
-      o.result?.url ||
-      o.path ||
-      o.data?.path ||
-      ''
-    )
-  }
-  return ''
-}
-
-const makeThumbnail = (file: File, size: number): Promise<string> =>
-  new Promise((resolve) => {
-    if (!file.type.startsWith('image/')) {
-      resolve('')
-      return
-    }
-    const img = new Image()
-    const src = URL.createObjectURL(file)
-    img.onload = () => {
-      const canvas = document.createElement('canvas')
-      const scale = Math.min(size / img.width, size / img.height, 1)
-      const w = Math.max(1, Math.round(img.width * scale))
-      const h = Math.max(1, Math.round(img.height * scale))
-      canvas.width = w
-      canvas.height = h
-      const ctx = canvas.getContext('2d')
-      if (props.thumbnailType === 'image/jpeg' || props.thumbnailType === 'image/webp') {
-        ctx?.fillRect(0, 0, w, h)
-      }
-      ctx?.drawImage(img, 0, 0, w, h)
-      URL.revokeObjectURL(src)
-      try {
-        resolve(canvas.toDataURL(props.thumbnailType, props.outputQuality))
-      } catch {
-        resolve('')
-      }
-    }
-    img.onerror = () => {
-      URL.revokeObjectURL(src)
-      resolve('')
-    }
-    img.src = src
-  })
-
-const openPicker = () => {
-  if (props.disabled) return
-  inputRef.value?.click()
-}
-
-const onDragOver = () => {
-  if (!props.disabled) dragOver.value = true
-}
-const onDragLeave = () => {
-  dragOver.value = false
-}
-const onDrop = (e: DragEvent) => {
-  dragOver.value = false
-  if (props.disabled) return
-  addFiles(Array.from(e.dataTransfer?.files || []))
-}
-
-const onInputChange = (e: Event) => {
-  const input = e.target as HTMLInputElement
-  const files = Array.from(input.files || [])
-  input.value = ''
-  addFiles(files)
-}
-
-const addFiles = async (files: File[]) => {
-  if (!files.length) return
-  if (props.limit && fileList.value.length + files.length > props.limit) {
-    emit('exceed', files, [...fileList.value])
-    return
-  }
-  for (const raw of files) {
-    const item: QiuUploadFile = {
-      uid: ++uidSeed,
-      name: raw.name,
-      size: raw.size,
-      raw,
-      url: isImage(raw.name) ? URL.createObjectURL(raw) : undefined,
-      status: 'ready',
-      percentage: 0,
-    }
-    if (props.autoThumbnail && isImage(raw.name)) {
-      item.thumbnail = await makeThumbnail(raw, props.thumbnailSize)
-    }
-    fileList.value.push(item)
-    sync()
-    emit('change', item, [...fileList.value])
-    if (props.autoUpload) uploadFile(item)
-  }
-}
-
-const removeFile = (file: QiuUploadFile) => {
-  if (props.disabled) return
-  if (file.url?.startsWith('blob:')) URL.revokeObjectURL(file.url)
-  fileList.value = fileList.value.filter((f) => f.uid !== file.uid)
-  sync()
-  emit('remove', file, [...fileList.value])
-}
-
-const uploadFile = (file: QiuUploadFile) => {
-  if (!file.raw) return
-  if (!props.action) {
-    file.status = 'success'
-    file.percentage = 100
-    file.response = { local: true, name: file.name, size: file.size, url: file.url }
-    sync()
-    emit('success', file.response, file, [...fileList.value])
-    return
-  }
-
-  file.status = 'uploading'
-  file.percentage = 0
-  sync()
-
-  const xhr = new XMLHttpRequest()
-  const form = new FormData()
-  form.append(props.name, file.raw, file.name)
-  Object.entries(props.data || {}).forEach(([k, v]) => form.append(k, v))
-
-  xhr.upload.onprogress = (ev) => {
-    if (!ev.lengthComputable) return
-    const percent = Math.round((ev.loaded / ev.total) * 100)
-    file.percentage = percent
-    sync()
-    emit('progress', percent, file, [...fileList.value])
-  }
-
-  xhr.onload = () => {
-    if (xhr.status >= 200 && xhr.status < 300) {
-      let response: unknown = xhr.responseText
-      try {
-        response = JSON.parse(xhr.responseText)
-      } catch {
-        /* keep text */
-      }
-      file.status = 'success'
-      file.percentage = 100
-      file.response = response
-      const remoteUrl = pickUrlFromResponse(response)
-      if (remoteUrl) file.url = remoteUrl
-      sync()
-      emit('success', response, file, [...fileList.value])
-    } else {
-      file.status = 'fail'
-      sync()
-      emit('error', new Error(`Upload failed: ${xhr.status}`), file, [...fileList.value])
-    }
-  }
-
-  xhr.onerror = () => {
-    file.status = 'fail'
-    sync()
-    emit('error', new Error('Network error'), file, [...fileList.value])
-  }
-
-  xhr.open('POST', props.action)
-  Object.entries(props.headers || {}).forEach(([k, v]) => xhr.setRequestHeader(k, v))
-  xhr.withCredentials = props.withCredentials
-  xhr.send(form)
-}
-
-defineExpose({
-  clearFiles: () => {
-    fileList.value.forEach((f) => {
-      if (f.url?.startsWith('blob:')) URL.revokeObjectURL(f.url)
-    })
-    fileList.value = []
-    sync()
-  },
-  submit: () => {
-    fileList.value.filter((f) => f.status === 'ready').forEach(uploadFile)
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-upload {
-  width: 100%;
-  max-width: 560px;
-  font-size: 13px;
-  color: var(--qiu-text-color-regular, #606266);
-
-  &.is-disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-}
-
-.qiu-upload__input {
-  display: none;
-}
-
-.qiu-upload__dragger {
-  box-sizing: border-box;
-  padding: 28px 16px;
-  text-align: center;
-  cursor: pointer;
-  background: var(--qiu-fill-color-blank, #fff);
-  border: 1px dashed var(--qiu-border-color, #dcdfe6);
-  border-radius: 8px;
-  transition: border-color 0.2s ease, background 0.2s ease;
-
-  &:hover,
-  .is-dragover & {
-    background: color-mix(in srgb, var(--qiu-color-primary, #0f766e) 6%, #fff);
-    border-color: var(--qiu-color-primary, #0f766e);
-  }
-
-  p {
-    margin: 6px 0 0;
-  }
-
-  em {
-    font-style: normal;
-    color: var(--qiu-color-primary, #0f766e);
-  }
-}
-
-.qiu-upload__drag-icon {
-  font-size: 36px;
-  color: var(--qiu-color-primary, #0f766e);
-}
-
-.qiu-upload__tip {
-  margin: 8px 0 0;
-  font-size: 12px;
-  color: var(--qiu-text-color-secondary, #909399);
-}
-
-.qiu-upload__list {
-  padding: 0;
-  margin: 12px 0 0;
-  list-style: none;
-}
-
-.qiu-upload__item {
-  padding: 8px 10px;
-  margin-bottom: 8px;
-  background: var(--qiu-fill-color-lighter, #fafafa);
-  border: 1px solid var(--qiu-border-color-lighter, #ebeef5);
-  border-radius: 6px;
-}
-
-.qiu-upload__item-main {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.qiu-upload__thumb {
-  flex-shrink: 0;
-  object-fit: cover;
-  border-radius: 4px;
-  background: var(--qiu-fill-color, #f0f2f5);
-}
-
-.qiu-upload__name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.qiu-upload__size {
-  flex-shrink: 0;
-  font-size: 12px;
-  color: var(--qiu-text-color-secondary, #909399);
-}
-
-.qiu-upload__remove {
-  display: inline-flex;
-  padding: 0;
-  color: var(--qiu-text-color-secondary, #909399);
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-
-  &:hover {
-    color: var(--qiu-color-danger, #f56c6c);
-  }
-}
-
-.qiu-upload__progress {
-  height: 4px;
-  margin-top: 8px;
-  overflow: hidden;
-  background: var(--qiu-fill-color, #e5e7eb);
-  border-radius: 999px;
-}
-
-.qiu-upload__progress-bar {
-  height: 100%;
-  background: var(--qiu-color-primary, #0f766e);
-  transition: width 0.15s ease;
-}
-
-.qiu-upload__fail {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--qiu-color-danger, #f56c6c);
-}
-
-.qiu-upload__response {
-  margin: 8px 0 0;
-  padding: 8px;
-  max-height: 120px;
-  overflow: auto;
-  font-size: 12px;
-  line-height: 1.45;
-  color: var(--qiu-text-color-regular, #606266);
-  white-space: pre-wrap;
-  word-break: break-all;
-  background: var(--qiu-fill-color-light, #f5f7fa);
-  border-radius: 4px;
-}
-
-.qiu-upload__card-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.qiu-upload__card,
-.qiu-upload__card-trigger {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  background: var(--qiu-fill-color-blank, #fff);
-  border: 1px dashed var(--qiu-border-color, #dcdfe6);
-  border-radius: 8px;
-}
-
-.qiu-upload__card-trigger {
-  color: var(--qiu-text-color-secondary, #909399);
-  cursor: pointer;
-  gap: 4px;
-
-  &:hover {
-    color: var(--qiu-color-primary, #0f766e);
-    border-color: var(--qiu-color-primary, #0f766e);
-  }
-}
-
-.qiu-upload__card-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.qiu-upload__card-name {
-  padding: 6px;
-  overflow: hidden;
-  font-size: 12px;
-  text-align: center;
-  text-overflow: ellipsis;
-}
-
-.qiu-upload__card-progress {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  background: rgba(0, 0, 0, 0.45);
-}
-
-.qiu-upload__card-remove {
-  position: absolute;
-  top: 2px;
-  right: 4px;
-  z-index: 1;
-  padding: 0 4px;
-  color: #fff;
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.45);
-  border: 0;
-  border-radius: 4px;
-}
-</style>