更新新需求-采集

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

@@ -0,0 +1,192 @@
+<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>