feat(chat): 优化拖拽上传逻辑与国际化支持

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

vue3/src/stores/upload-file/upload-file.ts

@@ -56,7 +56,6 @@ export type UploadFileStoreDependenciesDataForModule = {
   uploadRecordList: Ref<UploadFileStoreRecord[]>
   uploadFileList: Ref<UploadFileStoreFile[]>
   uploadProgressInfoList: Ref<UploadFileStoreProgressInfo[]>
-  useDropFiles: Ref<File[]>
 }
 
 /**
@@ -80,14 +79,19 @@ export const useUploadFileStore = defineStore(
     /** 非持久化：进度列表 */
     const uploadProgressInfoList = ref<UploadFileStoreProgressInfo[]>([])
     /** 非持久化：拖拽暂存的文件 */
-    const useDropFiles = ref<File[]>([])
+    const uploadDropFiles = ref<File[]>([])
+    // 只读 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,
       // 单项操作函数

vue3/src/stores/upload-image/upload-image.ts

@@ -56,7 +56,6 @@ export type UploadImageStoreDependenciesDataForModule = {
   uploadRecordList: Ref<UploadImageStoreRecord[]>
   uploadFileList: Ref<UploadImageStoreFile[]>
   uploadProgressInfoList: Ref<UploadImageStoreProgressInfo[]>
-  useDropImages: Ref<File[]>
 }
 
 /**
@@ -81,13 +80,18 @@ export const useUploadImageStore = defineStore(
     const uploadProgressInfoList = ref<UploadImageStoreProgressInfo[]>([])
 
     /** 非持久化：拖拽暂存的图片文件 */
-    const useDropImages = ref<File[]>([])
+    const uploadDropImages = ref<File[]>([])
+    // 只读 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,
       // 单项操作函数

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)
-  // }
-})
 </script>
 
 <template>
-  <div ref="dragRef" class="relative h-full">
+  <div
+    ref="dragRef"
+    class="relative h-full"
+    @dragenter="handleDragEnter"
+    @dragleave="handleDragLeave"
+    @dragover="handleDragOver"
+    @drop="handleDrop"
+  >
     <!-- 用来识别 文件/图片 的拖拽上传 -->
-    <div v-if="isDragging" class="absolute inset-0 z-50 rounded-lg">
+    <div v-show="isDragging" class="absolute inset-0 z-50 rounded-lg">
       <!-- 固定窗口位置 -->
       <div class="bg-primary sticky top-0 flex h-screen w-full">
         <Transition
@@ -287,9 +233,11 @@ onUnmounted(() => {
                 class="pointer-events-none"
               ></RiFolderLine>
               <h1 v-if="isHoveringFileZone" class="pointer-events-none">
-                现在可以松手了哦
+                {{ i18nStore.t('chatDragZoneReleaseText')() }}
+              </h1>
+              <h1 v-else class="pointer-events-none">
+                {{ i18nStore.t('chatDragZoneFilePlaceholderText')() }}
               </h1>
-              <h1 v-else class="pointer-events-none">你好 往这里拖文件喵</h1>
             </div>
             <!-- 图片 -->
             <div
@@ -309,9 +257,11 @@ onUnmounted(() => {
                 class="pointer-events-none"
               ></RiImageLine>
               <h1 v-if="isHoveringImageZone" class="pointer-events-none">
-                现在可以松手了哦
+                {{ i18nStore.t('chatDragZoneReleaseText')() }}
+              </h1>
+              <h1 v-else class="pointer-events-none">
+                {{ i18nStore.t('chatDragZoneImagePlaceholderText')() }}
               </h1>
-              <h1 v-else class="pointer-events-none">你好 往这里拖图片喵</h1>
             </div>
           </div>
         </Transition>
@@ -379,25 +329,6 @@ onUnmounted(() => {
 </template>
 
 <style lang="scss" scoped>
-// .border-glow {
-//   border-color: white;
-//   transition:
-//     border-color 0.2s ease,
-//     box-shadow 0.2s ease,
-//     transform 0.15s ease;
-//   box-shadow:
-//     0 0 16px rgba(255, 255, 255, 0.25),
-//     0 8px 30px rgba(255, 255, 255, 0.12);
-// }
-
-// .border-glow:hover {
-//   // box-shadow:
-//   //   0 0 0 1px rgba(255, 255, 255, 0.4),
-//   //   0 12px 40px rgba(255, 255, 255, 0.18);
-//   box-shadow:
-//     0 0 12px rgba(255, 255, 255, 0.35),
-//     0 8px 30px rgba(255, 255, 255, 0.12);
-// }
 .border-glow {
   border-color: white;
 

vue3/src/views/file/components/file-page-control-panel/components/PanelFileUploader.vue

@@ -12,14 +12,14 @@ const uploadFileStore = useUploadFileStore()
 
 // 注册拖拽事件，处理拖拽上传的文件
 onMounted(() => {
-  const pending = uploadFileStore.useDropFiles
+  const pending = uploadFileStore.dropFiles
   if (pending.length === 0) return
   for (const file of pending) {
     const fakerFile = { raw: file } as UploadFile
     fileUploadAdd(fakerFile)
   }
   // 清空暂存
-  uploadFileStore.useDropFiles = []
+  uploadFileStore.dropFilesSet([])
 })
 
 const i18nStore = useI18nStore()

vue3/src/views/image/components/image-page-control-panel/components/PanelImageUploader.vue

@@ -19,14 +19,14 @@ const uploadImageStore = useUploadImageStore()
 
 // 注册拖拽事件，处理拖拽上传的图片
 onMounted(() => {
-  const pending = uploadImageStore.useDropImages
+  const pending = uploadImageStore.dropImages
   if (pending.length === 0) return
   for (const image of pending) {
     const fakerFile = { raw: image } as UploadFile
     imageUploadAdd(fakerFile)
   }
   // 清空暂存
-  uploadImageStore.useDropImages = []
+  uploadImageStore.dropImagesSet([])
 })
 
 const imageUploadAdd = async (uploadFile: UploadFile) => {