diff --git a/vue3/src/config/i18n/messages/chat.ts b/vue3/src/config/i18n/messages/chat.ts index 68105c07..da814583 100644 --- a/vue3/src/config/i18n/messages/chat.ts +++ b/vue3/src/config/i18n/messages/chat.ts @@ -184,4 +184,28 @@ export const i18nMessagesChatPart = { 'ko-KR': () => '[파일]' as const, 'ru-RU': () => '[Файл]' as const, }, + chatDragZoneReleaseText: { + 'en-US': () => 'You can release now' as const, + 'zh-CN': () => '现在可以松手了哦' as const, + 'zh-TW': () => '現在可以放手了哦' as const, + 'ja-JP': () => '今すぐリリースできます' as const, + 'ko-KR': () => '이제 놓을 수 있습니다' as const, + 'ru-RU': () => 'Теперь можно отпустить' as const, + }, + chatDragZoneFilePlaceholderText: { + 'en-US': () => 'Drag files here' as const, + 'zh-CN': () => '你好 往这里拖文件喵' as const, + 'zh-TW': () => '你好 往這裡拖檔案喵' as const, + 'ja-JP': () => 'ここにファイルをドラッグしてください' as const, + 'ko-KR': () => '여기에 파일을 드래그하세요' as const, + 'ru-RU': () => 'Перетащите файлы сюда' as const, + }, + chatDragZoneImagePlaceholderText: { + 'en-US': () => 'Drag images here' as const, + 'zh-CN': () => '你好 往这里拖图片喵' as const, + 'zh-TW': () => '你好 往這裡拖圖片喵' as const, + 'ja-JP': () => 'ここに画像をドラッグしてください' as const, + 'ko-KR': () => '여기에 이미지를 드래그하세요' as const, + 'ru-RU': () => 'Перетащите изображения сюда' as const, + }, } as const satisfies I18nMessagesSatisfiesType diff --git a/vue3/src/stores/upload-file/upload-file.ts b/vue3/src/stores/upload-file/upload-file.ts index b4a3d88f..e3138517 100644 --- a/vue3/src/stores/upload-file/upload-file.ts +++ b/vue3/src/stores/upload-file/upload-file.ts @@ -56,7 +56,6 @@ export type UploadFileStoreDependenciesDataForModule = { uploadRecordList: Ref uploadFileList: Ref uploadProgressInfoList: Ref - useDropFiles: Ref } /** @@ -80,14 +79,19 @@ export const useUploadFileStore = defineStore( /** 非持久化：进度列表 */ const uploadProgressInfoList = ref([]) /** 非持久化：拖拽暂存的文件 */ - const useDropFiles = ref([]) + const uploadDropFiles = ref([]) + // 只读 computed，用于暴露给外部 + const dropFiles = computed(() => uploadDropFiles.value) + // 提供 setter 方法修改状态 + const dropFilesSet = (val: File[]) => { + uploadDropFiles.value = val + } const uploadFileStoreDependenciesDataForModule: UploadFileStoreDependenciesDataForModule = { uploadRecordList, uploadFileList, uploadProgressInfoList, - useDropFiles, } /** 仅允许初始化一次，此为实现其所需的标记 */ @@ -153,7 +157,10 @@ export const useUploadFileStore = defineStore( // 上传记录 持久化 uploadRecordList, // 拖拽暂存的文件 - useDropFiles, + // uploadDropFiles 的外部接口 + dropFiles, + // 提供修改 uploadDropFiles 的方法 + dropFilesSet, // 上传管理相关函数 ...uploadFileSystemControlModule, // 单项操作函数 diff --git a/vue3/src/stores/upload-image/upload-image.ts b/vue3/src/stores/upload-image/upload-image.ts index 97bb13db..307502a5 100644 --- a/vue3/src/stores/upload-image/upload-image.ts +++ b/vue3/src/stores/upload-image/upload-image.ts @@ -56,7 +56,6 @@ export type UploadImageStoreDependenciesDataForModule = { uploadRecordList: Ref uploadFileList: Ref uploadProgressInfoList: Ref - useDropImages: Ref } /** @@ -81,13 +80,18 @@ export const useUploadImageStore = defineStore( const uploadProgressInfoList = ref([]) /** 非持久化：拖拽暂存的图片文件 */ - const useDropImages = ref([]) + const uploadDropImages = ref([]) + // 只读 computed，用于暴露给外部 + const dropImages = computed(() => uploadDropImages.value) + // 提供 setter 方法修改状态 + const dropImagesSet = (val: File[]) => { + uploadDropImages.value = val + } const uploadImageStoreDependenciesDataForModule: UploadImageStoreDependenciesDataForModule = { uploadRecordList, uploadFileList, uploadProgressInfoList, - useDropImages, } /** 仅允许初始化一次，此为实现其所需的标记 */ @@ -153,7 +157,10 @@ export const useUploadImageStore = defineStore( // 上传记录 持久化 uploadRecordList, // 拖拽暂存的图片文件 - useDropImages, + // uploadDropImages 的外部接口 + dropImages, + // 提供修改 uploadDropImages 的方法 + dropImagesSet, // 上传管理相关函数 ...uploadImageSystemControlModule, // 单项操作函数 diff --git a/vue3/src/views/chat-home/components/ChatHomeChatCol.vue b/vue3/src/views/chat-home/components/ChatHomeChatCol.vue index 22f5c097..c1455e6a 100644 --- a/vue3/src/views/chat-home/components/ChatHomeChatCol.vue +++ b/vue3/src/views/chat-home/components/ChatHomeChatCol.vue @@ -79,7 +79,6 @@ let dragCounter = 0 const handleDragEnter = (e: DragEvent) => { e.preventDefault() FilesOrImages.value = false - // if (e.dataTransfer?.types.includes('Files')) { if (e.dataTransfer && e.dataTransfer.types.includes('Files')) { dragCounter++ isDragging.value = true @@ -108,14 +107,6 @@ const handleDragLeave = (e: DragEvent) => { } } } -// const handleDragOver = (e: DragEvent) => { -// e.preventDefault() -// if (e.dataTransfer && e.dataTransfer.types.includes('Files')) { -// e.dataTransfer.dropEffect = 'copy' -// } else { -// e.dataTransfer.dropEffect = 'none' -// } -// } const handleDragOver = (e: DragEvent) => { e.preventDefault() @@ -172,13 +163,9 @@ const handleFileDrop = (e: DragEvent) => { // 暂存文件 const files = e.dataTransfer?.files if (!files || files.length === 0) return - // 做一次前端大小校验 - // 20MB - const MAX_SIZE = 20 * 1024 * 1024 - const bigFiles = Array.from(files).filter((file) => file.size <= MAX_SIZE) - if (bigFiles.length === 0) return - uploadFileStore.useDropFiles = bigFiles + // 暂存 + uploadFileStore.dropFilesSet(Array.from(files)) // 跳转 router.push(routerDict.FileSelectPage.path) } @@ -198,64 +185,23 @@ const handleImageDrop = (e: DragEvent) => { ) if (images.length === 0) return - uploadImageStore.useDropImages = images + uploadImageStore.dropImagesSet(images) // 跳转 router.push(routerDict.ImageSelectPage.path) } - -// 挂载好以后注册四个拖拽方法 -onMounted(() => { - const el = dragRef.value - if (el) { - el.addEventListener('dragenter', handleDragEnter) - el.addEventListener('dragleave', handleDragLeave) - el.addEventListener('dragover', handleDragOver) - el.addEventListener('drop', handleDrop) - } - // 当父元素被 v-if 条件切换时，可能会导致元素被销毁重建 - // 所以事件监听无法绑定（需要用 watch），我们直接替换成 Vue 方案 - - // const folderEl = FolderRef.value - // if (folderEl) { - // folderEl.addEventListener('dragenter', handleFileZoneDragEnter) - // folderEl.addEventListener('dragleave', handleFileZoneDragLeave) - // folderEl.addEventListener('dragover', handleZoneDragOver) - // } - // const imageEl = ImageRef.value - // if (imageEl) { - // imageEl.addEventListener('dragenter', handleImageZoneDragEnter) - // imageEl.addEventListener('dragleave', handleImageZoneDragLeave) - // imageEl.addEventListener('dragover', handleZoneDragOver) - // } -}) - -onUnmounted(() => { - const el = dragRef.value - if (el) { - el.removeEventListener('dragenter', handleDragEnter) - el.removeEventListener('dragleave', handleDragLeave) - el.removeEventListener('dragover', handleDragOver) - el.removeEventListener('drop', handleDrop) - } - // const folderEl = FolderRef.value - // if (folderEl) { - // folderEl.removeEventListener('dragenter', handleFileZoneDragEnter) - // folderEl.removeEventListener('dragleave', handleFileZoneDragLeave) - // folderEl.removeEventListener('dragover', handleZoneDragOver) - // } - // const imageEl = ImageRef.value - // if (imageEl) { - // imageEl.removeEventListener('dragenter', handleImageZoneDragEnter) - // imageEl.removeEventListener('dragleave', handleImageZoneDragLeave) - // imageEl.removeEventListener('dragover', handleZoneDragOver) - // } -})