拖拽上传文件

src/views/assistant/index.vue

@@ -38,7 +38,7 @@ import { useLoading } from '/@/utils/loading-util'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import StructDataPlugin from '/@/components/markdown/plugins/struct-data'
-import { useFileDialog } from '@vueuse/core'
+import { useDropZone, useFileDialog } from '@vueuse/core'
 import download from 'downloadjs'
 import common from '/@/api/common'
 import { UploadFile } from '/@/api/common/type'
@@ -61,6 +61,21 @@ const {
 })
 
 // 附件管理：使用本地列表以支持单个移除
+const dropToUploadZone = ref<HTMLElement>()
+
+const { isOverDropZone } = useDropZone(dropToUploadZone, async (files:File[] | null)=> {
+	if (loadingUpload.value) {
+		ElMessage.warning('请等待上传完成')
+		return
+	}
+	if (files === null || files.length === 0) return
+	const data = await doUpload(files).catch(() => undefined)
+	if (data === undefined) {
+		return
+	}
+	selectedFiles.value = [...selectedFiles.value, ...data]
+})
+
 const selectedFiles = ref<UploadFile[]>([])
 
 const uploadProgress = ref<number>(-1)
@@ -900,7 +915,7 @@ const formatFileSize = (bytes: number): string => {
 </script>
 
 <template>
-	<el-container class="chat-container">
+	<el-container class="chat-container" ref="dropToUploadZone">
 		<!-- 左侧会话列表 -->
 		<el-aside width="300px" class="chat-sidebar">
 			<div class="sidebar-header">
@@ -1230,7 +1245,8 @@ const formatFileSize = (bytes: number): string => {
 								</div>
 								<!-- 无附件时的提示信息 -->
 								<div v-if="selectedFiles.length === 0" class="attachment-hint">
-									<span>点击右侧+上传文件</span>
+									<span v-if="!isOverDropZone">点击右侧+上传文件</span>
+									<span v-else>松开鼠标上传文件...</span>
 								</div>
 							</div>
 						</el-scrollbar>