feat: wip Course Generate

components/uni/FileDnD/index.vue

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+const emit = defineEmits(['change'])
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '点击或拖拽文件到此处',
+  },
+  placeholderDragover: {
+    type: String,
+    default: '松开选择文件',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  accept: {
+    type: String,
+    default: '',
+  },
+})
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const dragover = ref(false)
+
+const selectedFiles = ref<File[]>([])
+
+const onIncomeFiles = (files?: FileList | null) => {
+  if (files && files.length > 0) {
+    let wantedFiles = Array.from(files).filter(file => {
+      if (props.accept) {
+        const accept = props.accept.split(',').map(type => type.trim())
+        return accept.includes(file.type)
+      }
+      return true
+    })
+    if (wantedFiles.length === 0) {
+      console.error('no acceptable file')
+      return
+    }
+    selectedFiles.value = props.multiple ? wantedFiles : [wantedFiles[0]]
+    emit('change', files)
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="{
+      'bg-neutral-300 dark:bg-neutral-900 border-primary-300 dark:border-primary-800 shadow-inner': dragover,
+    }"
+    class="w-full h-44 relative rounded-md border-2 border-dashed border-neutral-200 dark:border-neutral-800
+           bg-inherit cursor-pointer select-none transition duration-200
+           hover:border-primary-300 dark:hover:border-primary-800 overflow-hidden"
+    @click="inputRef?.click()"
+    @dragover.prevent="dragover = true"
+    @dragleave.prevent="dragover = false"
+    @drop.prevent="$event => {
+      dragover = false
+      if (!$event.dataTransfer?.files) return
+      onIncomeFiles($event.dataTransfer?.files)
+    }"
+  >
+    <input
+      ref="inputRef"
+      :accept="accept"
+      :multiple="multiple"
+      class="hidden"
+      type="file"
+      @change="onIncomeFiles(inputRef?.files)"
+    />
+    <div
+      :class="{
+        'pb-6': selectedFiles.length > 0
+      }"
+      class="w-full h-full flex flex-col justify-center items-center gap-2 transition-all"
+    >
+      <Icon
+        :name="dragover ? 'i-tabler-drag-drop' : 'i-tabler-upload'"
+        class="text-4xl text-neutral-400 dark:text-neutral-500"
+      />
+      <p class="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+        {{ dragover ? '松开选择文件' : '点击或拖拽文件到此处' }}
+      </p>
+    </div>
+    <div
+      v-if="selectedFiles.length > 0"
+      class="absolute inset-x-0 bottom-0 pl-2 pr-0.5 py-0.5 flex justify-between items-center bg-neutral-100 dark:bg-neutral-900 border-t dark:border-neutral-800"
+    >
+      <div class="flex-1 pr-4 overflow-hidden flex items-center gap-1">
+        <Icon :name="selectedFiles.length === 1 ? 'i-tabler-file' : 'i-tabler-files'"
+              class="text-neutral-500 dark:text-neutral-400"/>
+        <p
+          :title="selectedFiles.slice(0, 3).map(file => file.name).join(', ')"
+          class="text-2xs font-medium overflow-hidden text-ellipsis whitespace-nowrap"
+        >
+          {{ selectedFiles.slice(0, 3).map(file => file.name).join(', ') }}
+        </p>
+      </div>
+      <div>
+        <UButton
+          color="red"
+          size="xs"
+          square
+          variant="ghost"
+          @click.stop="() => {
+            selectedFiles = []
+            inputRef!.value = ''
+          }"
+        >
+          <Icon name="i-tabler-x"/>
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>