crawler-plugin/frontend-vue/src/shared/components/ai-workflow/AiAssetDropzone.vue

<template>
  <div class="ai-asset-dropzone">
    <div class="ai-asset-dropzone__head">
      <div>
        <div class="ai-asset-dropzone__title">{{ title }}</div>
        <p v-if="description" class="ai-asset-dropzone__description">{{ description }}</p>
      </div>
      <el-button
        v-if="fileName"
        text
        type="primary"
        class="ai-asset-dropzone__clear"
        @click="$emit('clear')"
      >
        清空
      </el-button>
    </div>

    <el-upload
      drag
      :auto-upload="false"
      :show-file-list="false"
      :accept="accept"
      class="ai-asset-dropzone__upload"
      @change="handleChange"
    >
      <div v-if="previewUrl || (fileName && previewKind === 'file')" class="ai-asset-dropzone__preview">
        <img
          v-if="previewKind === 'image'"
          :src="previewUrl"
          class="ai-asset-dropzone__media"
          alt=""
        />
        <video
          v-else-if="previewKind === 'video'"
          :src="previewUrl"
          class="ai-asset-dropzone__media"
          controls
        />
        <div v-else class="ai-asset-dropzone__file">
          <span>{{ fileName }}</span>
        </div>
      </div>
      <div v-else class="ai-asset-dropzone__empty">
        <div class="ai-asset-dropzone__placeholder">{{ placeholder }}</div>
        <div v-if="helper" class="ai-asset-dropzone__helper">{{ helper }}</div>
      </div>
    </el-upload>

    <div v-if="fileName" class="ai-asset-dropzone__footer">
      <span class="ai-asset-dropzone__filename">{{ fileName }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { UploadFile, UploadFiles } from 'element-plus'

withDefaults(
  defineProps<{
    title: string
    description?: string
    placeholder?: string
    helper?: string
    accept?: string
    fileName?: string
    previewUrl?: string
    previewKind?: 'image' | 'video' | 'file'
  }>(),
  {
    description: '',
    placeholder: '点击或拖拽上传素材',
    helper: '',
    accept: '',
    fileName: '',
    previewUrl: '',
    previewKind: 'file',
  },
)

const emit = defineEmits<{
  (event: 'select', file: File): void
  (event: 'clear'): void
}>()

function handleChange(uploadFile: UploadFile, _files: UploadFiles) {
  const rawFile = uploadFile.raw
  if (!rawFile) {
    return
  }
  emit('select', rawFile)
}
</script>

<style scoped>
.ai-asset-dropzone {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-asset-dropzone__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ai-asset-dropzone__title {
  color: #f2f2f2;
  font-size: 14px;
  font-weight: 600;
}

.ai-asset-dropzone__description {
  margin: 6px 0 0;
  color: #9d9d9d;
  font-size: 12px;
  line-height: 1.45;
}

:deep(.ai-asset-dropzone__upload .el-upload) {
  width: 100%;
}

:deep(.ai-asset-dropzone__upload .el-upload-dragger) {
  width: 100%;
  min-height: 176px;
  padding: 12px;
  border: 1px dashed #474747;
  border-radius: 14px;
  background: #1f1f1f;
  transition: border-color 0.2s ease, background 0.2s ease;
}

:deep(.ai-asset-dropzone__upload .el-upload-dragger:hover) {
  border-color: #8c63ff;
  background: #232323;
}

.ai-asset-dropzone__preview,
.ai-asset-dropzone__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  border-radius: 10px;
  overflow: hidden;
}

.ai-asset-dropzone__empty {
  flex-direction: column;
  gap: 8px;
}

.ai-asset-dropzone__placeholder {
  color: #f0f0f0;
  font-size: 14px;
  font-weight: 500;
}

.ai-asset-dropzone__helper {
  color: #8d8d8d;
  font-size: 12px;
}

.ai-asset-dropzone__media {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.ai-asset-dropzone__file {
  color: #d8d8d8;
  font-size: 13px;
  line-height: 1.5;
}

.ai-asset-dropzone__footer {
  padding: 10px 12px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid #383838;
}

.ai-asset-dropzone__filename {
  color: #d8d8d8;
  font-size: 12px;
  word-break: break-all;
}
</style>