nl-blogs/client/src/components/admin/ImageUpload.vue

<template>
  <div class="image-upload">
    <!-- 单个上传模式 -->
    <template v-if="!multiple">
      <div 
        v-if="!imageUrl"
        @click="triggerFileInput"
        @dragover.prevent="handleDragOver"
        @dragenter.prevent="handleDragEnter"
        @dragleave.prevent="handleDragLeave"
        @drop.prevent="handleDrop"
        class="upload-area border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors"
        :class="[
          isDragging ? 'border-art-accent bg-art-accent/5' : 'border-white/20 hover:border-art-accent/50',
          disabled ? 'opacity-50 cursor-not-allowed' : ''
        ]"
      >
        <input
          ref="fileInput"
          type="file"
          :accept="accept"
          :multiple="false"
          @change="handleFileSelect"
          class="hidden"
          :disabled="disabled"
        />
        <div class="space-y-3">
          <div class="w-12 h-12 mx-auto flex items-center justify-center text-art-muted">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="17 8 12 3 7 8"></polyline>
              <line x1="12" y1="3" x2="12" y2="15"></line>
            </svg>
          </div>
          <p class="text-sm text-art-muted">点击或拖拽图片到此处上传</p>
          <p class="text-xs text-art-muted/50">支持 JPG、PNG、GIF 格式</p>
        </div>
      </div>
      
      <!-- 从素材库选择按钮 -->
      <div v-if="!imageUrl" class="mt-3 text-center">
        <button
          @click="openLibraryModal"
          type="button"
          class="text-sm text-art-accent hover:text-art-accent/80 transition-colors"
          :disabled="disabled"
        >
          或从素材库选择
        </button>
      </div>
      
      <div v-else class="image-preview relative group">
        <img :src="imageUrl" alt="Preview" class="w-full h-auto rounded-lg max-h-64 object-contain bg-white/5" />
        <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center gap-2">
          <button
            type="button"
            @click.stop="() => removeImage()"
            class="px-4 py-2 bg-red-500/80 text-white rounded hover:bg-red-500 transition-colors text-sm"
            :disabled="disabled"
          >
            删除
          </button>
          <button
            type="button"
            @click.stop="triggerFileInput"
            class="px-4 py-2 bg-art-accent text-black rounded hover:opacity-90 transition-colors text-sm"
            :disabled="disabled"
          >
            更换
          </button>
        </div>
      </div>
      
      <div v-if="uploading" class="mt-4 text-center">
        <div class="inline-flex items-center gap-2 text-art-accent">
          <div class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-art-accent"></div>
          <span class="text-sm">上传中...</span>
        </div>
      </div>
      
      <div v-if="error" class="mt-4 text-center text-red-400 text-sm">
        {{ error }}
      </div>
    </template>

    <!-- 批量上传模式 -->
    <template v-else>
      <div class="space-y-4">
        <!-- 图片列表 -->
        <div v-if="imageUrls.length > 0" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          <div
            v-for="(url, index) in imageUrls"
            :key="index"
            class="image-item relative group aspect-square rounded-lg overflow-hidden bg-white/5 border border-white/10"
          >
            <img :src="url" :alt="`Image ${index + 1}`" class="w-full h-full object-cover" />
            <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
              <button
                type="button"
                @click="() => removeImage(index)"
                class="px-3 py-1.5 bg-red-500/80 text-white rounded hover:bg-red-500 transition-colors text-xs"
                :disabled="disabled"
              >
                删除
              </button>
            </div>
            <div class="absolute top-2 left-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
              {{ index + 1 }}
            </div>
          </div>
        </div>

        <!-- 上传区域 -->
        <div
          v-if="imageUrls.length < (maxCount || Infinity)"
          @click="triggerFileInput"
          @dragover.prevent="handleDragOver"
          @dragenter.prevent="handleDragEnter"
          @dragleave.prevent="handleDragLeave"
          @drop.prevent="handleDrop"
          class="upload-area border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors"
          :class="[
            isDragging ? 'border-art-accent bg-art-accent/5' : 'border-white/20 hover:border-art-accent/50',
            disabled ? 'opacity-50 cursor-not-allowed' : ''
          ]"
        >
          <input
            ref="fileInput"
            type="file"
            :accept="accept"
            :multiple="true"
            @change="handleFileSelect"
            class="hidden"
            :disabled="disabled"
          />
          <div class="space-y-2">
            <div class="w-10 h-10 mx-auto flex items-center justify-center text-art-muted">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="17 8 12 3 7 8"></polyline>
                <line x1="12" y1="3" x2="12" y2="15"></line>
              </svg>
            </div>
            <p class="text-sm text-art-muted">点击或拖拽图片到此处上传</p>
            <p class="text-xs text-art-muted/50">
              {{ maxCount ? `最多上传 ${maxCount} 张，已上传 ${imageUrls.length} 张` : `已上传 ${imageUrls.length} 张` }}
            </p>
          </div>
        </div>
        
        <!-- 从素材库选择按钮 -->
        <div v-if="imageUrls.length < (maxCount || Infinity)" class="mt-3 text-center">
          <button
            @click="openLibraryModal"
            type="button"
            class="text-sm text-art-accent hover:text-art-accent/80 transition-colors"
            :disabled="disabled"
          >
            或从素材库选择
          </button>
        </div>

        <!-- 上传进度 -->
        <div v-if="uploadingCount > 0" class="mt-4 text-center">
          <div class="inline-flex items-center gap-2 text-art-accent">
            <div class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-art-accent"></div>
            <span class="text-sm">正在上传 {{ uploadingCount }} 张图片...</span>
          </div>
        </div>

        <!-- 错误提示 -->
        <div v-if="error" class="mt-4 text-center text-red-400 text-sm">
          {{ error }}
        </div>
      </div>
    </template>

    <!-- 素材库选择模态框 -->
    <AttachmentLibraryModal
      :show="showLibraryModal"
      :multiple="multiple"
      :max-count="maxCount"
      :selected-urls="multiple ? imageUrls : (imageUrl ? [imageUrl] : [])"
      @update:show="showLibraryModal = $event"
      @confirm="handleLibrarySelect"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useToast } from '../../composables/useToast'
import { API_BASE, authFetch, parseApiResponse } from '../../services/api'
import AttachmentLibraryModal from './AttachmentLibraryModal.vue'

const props = withDefaults(defineProps<{
  modelValue?: string | string[]
  multiple?: boolean
  maxCount?: number
  categoryId?: number
  accept?: string
  disabled?: boolean
}>(), {
  multiple: false,
  accept: 'image/*',
  disabled: false
})

const emit = defineEmits<{
  'update:modelValue': [value: string | string[]]
}>()

const fileInput = ref<HTMLInputElement | null>(null)
const uploading = ref(false)
const uploadingCount = ref(0)
const error = ref('')
const isDragging = ref(false)
const showLibraryModal = ref(false)

const toast = useToast()

// 单个模式的值
const imageUrl = computed({
  get: () => {
    if (props.multiple) return ''
    return (props.modelValue as string) || ''
  },
  set: (val: string) => {
    if (!props.multiple) {
      emit('update:modelValue', val)
    }
  }
})

// 批量模式的值
const imageUrls = computed({
  get: () => {
    if (!props.multiple) return []
    const value = props.modelValue
    if (Array.isArray(value)) {
      return value
    }
    return value ? [value] : []
  },
  set: (val: string[]) => {
    if (props.multiple) {
      emit('update:modelValue', val)
    }
  }
})

const triggerFileInput = () => {
  if (props.disabled) return
  fileInput.value?.click()
}

const handleDragOver = (e: DragEvent) => {
  if (props.disabled) return
  e.preventDefault()
  isDragging.value = true
}

const handleDragEnter = (e: DragEvent) => {
  if (props.disabled) return
  e.preventDefault()
  isDragging.value = true
}

const handleDragLeave = (e: DragEvent) => {
  if (props.disabled) return
  e.preventDefault()
  isDragging.value = false
}

const handleDrop = (e: DragEvent) => {
  if (props.disabled) return
  e.preventDefault()
  isDragging.value = false
  
  if (e.dataTransfer?.files) {
    const files = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'))
    if (files.length > 0) {
      if (props.multiple) {
        handleMultipleFiles(files)
      } else {
        uploadFile(files[0])
      }
    }
  }
}

const handleFileSelect = (e: Event) => {
  const target = e.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    const files = Array.from(target.files).filter(file => file.type.startsWith('image/'))
    if (files.length > 0) {
      if (props.multiple) {
        handleMultipleFiles(files)
      } else {
        uploadFile(files[0])
      }
    }
  }
  // 清空input，允许重复选择同一文件
  if (target) {
    target.value = ''
  }
}

const handleMultipleFiles = async (files: File[]) => {
  if (props.maxCount && imageUrls.value.length + files.length > props.maxCount) {
    error.value = `最多只能上传 ${props.maxCount} 张图片`
    toast.showToast(error.value, 'error')
    return
  }

  error.value = ''
  uploadingCount.value = files.length

  const uploadPromises = files.map(file => uploadSingleFile(file))
  
  try {
    const results = await Promise.all(uploadPromises)
    const successfulUrls = results.filter(url => url !== null) as string[]
    
    if (successfulUrls.length > 0) {
      const newUrls = [...imageUrls.value, ...successfulUrls]
      imageUrls.value = newUrls
      toast.showToast(`成功上传 ${successfulUrls.length} 张图片`, 'success')
    }
  } catch (err) {
    console.error('Batch upload error:', err)
  } finally {
    uploadingCount.value = 0
  }
}

const uploadFile = async (file: File) => {
  if (!file.type.startsWith('image/')) {
    error.value = '请选择图片文件'
    toast.showToast(error.value, 'error')
    return
  }

  uploading.value = true
  error.value = ''

  try {
    const url = await uploadSingleFile(file)
    if (url) {
      imageUrl.value = url
      toast.showToast('图片上传成功', 'success')
    }
  } catch (err: any) {
    error.value = err.message || '上传失败，请重试'
    toast.showToast(error.value, 'error')
  } finally {
    uploading.value = false
  }
}

const uploadSingleFile = async (file: File): Promise<string | null> => {
  try {
    const formData = new FormData()
    formData.append('file', file)
    if (props.categoryId) {
      formData.append('categoryId', props.categoryId.toString())
    }

    const result = await parseApiResponse<{ fileUrl: string }>(await authFetch(`${API_BASE}/admin/attachments/upload`, {
      method: 'POST',
      headers: {},
      body: formData
    }))
    return result.fileUrl
  } catch (err: any) {
    console.error('Upload error:', err)
    throw err
  }
}

const removeImage = (index?: number) => {
  if (props.disabled) return
  
  if (props.multiple && typeof index === 'number') {
    const newUrls = [...imageUrls.value]
    newUrls.splice(index, 1)
    imageUrls.value = newUrls
  } else {
    imageUrl.value = ''
    if (fileInput.value) {
      fileInput.value.value = ''
    }
  }
}

const openLibraryModal = () => {
  if (props.disabled) return
  showLibraryModal.value = true
}

const handleLibrarySelect = (urls: string[]) => {
  if (props.multiple) {
    // 批量模式：添加选中的图片，考虑maxCount限制
    const currentCount = imageUrls.value.length
    const remainingCount = props.maxCount ? props.maxCount - currentCount : Infinity
    const urlsToAdd = urls.slice(0, remainingCount)
    
    if (urlsToAdd.length > 0) {
      const newUrls = [...imageUrls.value, ...urlsToAdd]
      imageUrls.value = newUrls
      toast.showToast(`已添加 ${urlsToAdd.length} 张图片`, 'success')
    }
    
    if (urls.length > urlsToAdd.length) {
      toast.showToast(`最多只能添加 ${props.maxCount} 张图片，已添加 ${urlsToAdd.length} 张`, 'error')
    }
  } else {
    // 单个模式：直接设置选中的第一张图片
    if (urls.length > 0) {
      imageUrl.value = urls[0]
      toast.showToast('图片选择成功', 'success')
    }
  }
}
</script>

<style scoped>
.upload-area {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.image-item {
  transition: transform 0.2s;
}

.image-item:hover {
  transform: scale(1.02);
}
</style>