fix(ui): Fix Drag Upload File failed in knowlegebase

lyingbug · lyingbug · commit 8ed050b8ec8b · 2025-09-18T13:17:54.000+08:00
diff --git a/frontend/src/hooks/useKnowledgeBase.ts b/frontend/src/hooks/useKnowledgeBase.ts
@@ -1,4 +1,4 @@
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive } from "vue";
 import { storeToRefs } from "pinia";
 import { formatStringDate, kbFileTypeVerification } from "../utils/index";
 import { MessagePlugin } from "tdesign-vue-next";
@@ -11,6 +11,7 @@ import {
 } from "@/api/knowledge-base/index";
 import { knowledgeStore } from "@/stores/knowledge";
 import { useRoute } from 'vue-router';
+
 const usemenuStore = knowledgeStore();
 export default function (knowledgeBaseId?: string) {
   const route = useRoute();
@@ -23,34 +24,32 @@ export default function (knowledgeBaseId?: string) {
     id: "",
     total: 0
   });
-  const getKnowled = (query = { page: 1, page_size: 35 }) => {
-    if (!knowledgeBaseId) return;
-    listKnowledgeFiles(knowledgeBaseId, query)
+  const getKnowled = (query = { page: 1, page_size: 35 }, kbId?: string) => {
+    const targetKbId = kbId || knowledgeBaseId;
+    if (!targetKbId) return;
+    
+    listKnowledgeFiles(targetKbId, query)
       .then((result: any) => {
-        let { data, total: totalResult } = result;
-        let cardList_ = data.map((item: any) => {
-            item["file_name"] = item.file_name.substring(
-              0,
-              item.file_name.lastIndexOf(".")
-            );
-            return {
-              ...item,
-              updated_at: formatStringDate(new Date(item.updated_at)),
-              isMore: false,
-              file_type: item.file_type.toLocaleUpperCase(),
-            };
-        });
-        if (query.page == 1) {
-          cardList.value = cardList_ as any[];
+        const { data, total: totalResult } = result;
+        const cardList_ = data.map((item: any) => ({
+          ...item,
+          file_name: item.file_name.substring(0, item.file_name.lastIndexOf(".")),
+          updated_at: formatStringDate(new Date(item.updated_at)),
+          isMore: false,
+          file_type: item.file_type.toLocaleUpperCase(),
+        }));
+        
+        if (query.page === 1) {
+          cardList.value = cardList_;
         } else {
-          (cardList.value as any[]).push(...cardList_);
+          cardList.value.push(...cardList_);
         }
         total.value = totalResult;
       })
-      .catch((_err) => {});
+      .catch(() => {});
   };
   const delKnowledge = (index: number, item: any) => {
-    (cardList.value as any[])[index].isMore = false;
+    cardList.value[index].isMore = false;
     moreIndex.value = -1;
     delKnowledgeDetails(item.id)
       .then((result: any) => {
@@ -61,7 +60,7 @@ export default function (knowledgeBaseId?: string) {
           MessagePlugin.error("知识删除失败！");
         }
       })
-      .catch((_err) => {
+      .catch(() => {
         MessagePlugin.error("知识删除失败！");
       });
   };
@@ -74,63 +73,45 @@ export default function (knowledgeBaseId?: string) {
     }
   };
   const requestMethod = (file: any, uploadInput: any) => {
-    if (file instanceof File && uploadInput) {
-      if (kbFileTypeVerification(file)) {
-        return;
-      }
-      // 每次上传时动态解析当前 kbId（优先：路由 -> URL -> 初始参数）
-      let currentKbId: string | undefined;
-      try {
-        currentKbId = (route.params as any)?.kbId as string;
-      } catch {}
-      if (!currentKbId && typeof window !== 'undefined') {
-        try {
-          const match = window.location.pathname.match(/knowledge-bases\/([^/]+)/);
-          if (match && match[1]) currentKbId = match[1];
-        } catch {}
-      }
-      if (!currentKbId) {
-        currentKbId = knowledgeBaseId;
-      }
-      if (!currentKbId) {
-        MessagePlugin.error("缺少知识库ID");
-        return;
-      }
-      uploadKnowledgeFile(currentKbId, { file })
-        .then((result: any) => {
-          if (result.success) {
-            MessagePlugin.info("上传成功！");
-            getKnowled();
-          } else {
-            // 改进错误信息提取逻辑
-            let errorMessage = "上传失败！";
-            if (result.error && result.error.message) {
-              errorMessage = result.error.message;
-            } else if (result.message) {
-              errorMessage = result.message;
-            }
-            if (result.code === 'duplicate_file' || (result.error && result.error.code === 'duplicate_file')) {
-              errorMessage = "文件已存在";
-            }
-            MessagePlugin.error(errorMessage);
-          }
-          uploadInput.value.value = "";
-        })
-        .catch((err: any) => {
-          let errorMessage = "上传失败！";
-          if (err.code === 'duplicate_file') {
-            errorMessage = "文件已存在";
-          } else if (err.error && err.error.message) {
-            errorMessage = err.error.message;
-          } else if (err.message) {
-            errorMessage = err.message;
-          }
-          MessagePlugin.error(errorMessage);
-          uploadInput.value.value = "";
-        });
-    } else {
-      MessagePlugin.error("file文件类型错误！");
+    if (!(file instanceof File) || !uploadInput) {
+      MessagePlugin.error("文件类型错误！");
+      return;
+    }
+    
+    if (kbFileTypeVerification(file)) {
+      return;
+    }
+    
+    // 获取当前知识库ID
+    let currentKbId: string | undefined = (route.params as any)?.kbId as string;
+    if (!currentKbId && typeof window !== 'undefined') {
+      const match = window.location.pathname.match(/knowledge-bases\/([^/]+)/);
+      if (match?.[1]) currentKbId = match[1];
+    }
+    if (!currentKbId) {
+      currentKbId = knowledgeBaseId;
+    }
+    if (!currentKbId) {
+      MessagePlugin.error("缺少知识库ID");
+      return;
     }
+    
+    uploadKnowledgeFile(currentKbId, { file })
+      .then((result: any) => {
+        if (result.success) {
+          MessagePlugin.info("上传成功！");
+          getKnowled({ page: 1, page_size: 35 }, currentKbId);
+        } else {
+          const errorMessage = result.error?.message || result.message || "上传失败！";
+          MessagePlugin.error(result.code === 'duplicate_file' ? "文件已存在" : errorMessage);
+        }
+        uploadInput.value.value = "";
+      })
+      .catch((err: any) => {
+        const errorMessage = err.error?.message || err.message || "上传失败！";
+        MessagePlugin.error(err.code === 'duplicate_file' ? "文件已存在" : errorMessage);
+        uploadInput.value.value = "";
+      });
   };
   const getCardDetails = (item: any) => {
     Object.assign(details, {
@@ -142,31 +123,32 @@ export default function (knowledgeBaseId?: string) {
     getKnowledgeDetails(item.id)
       .then((result: any) => {
         if (result.success && result.data) {
-          let { data } = result;
+          const { data } = result;
           Object.assign(details, {
             title: data.file_name,
             time: formatStringDate(new Date(data.updated_at)),
             id: data.id,
           });
         }
       })
-      .catch((_err) => {});
-      getfDetails(item.id, 1);
+      .catch(() => {});
+    getfDetails(item.id, 1);
   };
+  
   const getfDetails = (id: string, page: number) => {
     getKnowledgeDetailsCon(id, page)
       .then((result: any) => {
         if (result.success && result.data) {
-          let { data, total: totalResult } = result;
-          if (page == 1) {
-            (details.md as any[]) = data;
+          const { data, total: totalResult } = result;
+          if (page === 1) {
+            details.md = data;
           } else {
-            (details.md as any[]).push(...data);
+            details.md.push(...data);
           }
           details.total = totalResult;
         }
       })
-      .catch((_err) => {});
+      .catch(() => {});
   };
   return {
     cardList,
diff --git a/frontend/src/views/platform/index.vue b/frontend/src/views/platform/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="main" ref="dropzone" @dragover="dragover" @drop="drop" @dragstart="dragstart">
+    <div class="main" ref="dropzone">
         <Menu></Menu>
         <RouterView />
         <div class="upload-mask" v-show="ismask">
@@ -10,34 +10,26 @@
 </template>
 <script setup lang="ts">
 import Menu from '@/components/menu.vue'
-import { ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router'
-import { storeToRefs } from "pinia";
-import { knowledgeStore } from "@/stores/knowledge";
-const usemenuStore = knowledgeStore();
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRoute } from 'vue-router'
 import useKnowledgeBase from '@/hooks/useKnowledgeBase'
 import UploadMask from '@/components/upload-mask.vue'
 import { getKnowledgeBaseById } from '@/api/knowledge-base/index'
 import { MessagePlugin } from 'tdesign-vue-next'
+
 let { requestMethod } = useKnowledgeBase()
-const router = useRouter();
 const route = useRoute();
 let ismask = ref(false)
-let dropzone = ref();
 let uploadInput = ref();
 
 // 获取当前知识库ID
-const getCurrentKbId = async (): Promise<string | null> => {
-    let kbId = (route.params as any)?.kbId as string
-    if (!kbId && route.name === 'chat' && (route.params as any)?.kbId) {
-        kbId = (route.params as any).kbId
-    }
-    return kbId || null
+const getCurrentKbId = (): string | null => {
+    return (route.params as any)?.kbId as string || null
 }
 
 // 检查知识库初始化状态
 const checkKnowledgeBaseInitialization = async (): Promise<boolean> => {
-    const currentKbId = await getCurrentKbId();
+    const currentKbId = getCurrentKbId();
     
     if (!currentKbId) {
         MessagePlugin.error("缺少知识库ID");
@@ -48,53 +40,74 @@ const checkKnowledgeBaseInitialization = async (): Promise<boolean> => {
         const kbResponse = await getKnowledgeBaseById(currentKbId);
         const kb = kbResponse.data;
         
-        // 检查知识库是否已初始化（有 EmbeddingModelID 和 SummaryModelID）
-        if (!kb.embedding_model_id || kb.embedding_model_id === '' || 
-            !kb.summary_model_id || kb.summary_model_id === '') {
+        if (!kb.embedding_model_id || !kb.summary_model_id) {
             MessagePlugin.warning("该知识库尚未完成初始化配置，请先前往设置页面配置模型信息后再上传文件");
             return false;
         }
         return true;
     } catch (error) {
-        console.error('获取知识库信息失败:', error);
         MessagePlugin.error("获取知识库信息失败，无法上传文件");
         return false;
     }
 }
 
-const dragover = (event: DragEvent) => {
+
+// 全局拖拽事件处理
+const handleGlobalDragEnter = (event: DragEvent) => {
     event.preventDefault();
+    if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = 'all';
+    }
     ismask.value = true;
-    if (((window.innerWidth - event.clientX) < 50) || ((window.innerHeight - event.clientY) < 50) || event.clientX < 50 || event.clientY < 50) {
-        ismask.value = false
+}
+
+const handleGlobalDragOver = (event: DragEvent) => {
+    event.preventDefault();
+    if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'copy';
     }
+    ismask.value = true;
 }
-const drop = async (event: DragEvent) => {
+
+const handleGlobalDrop = async (event: DragEvent) => {
     event.preventDefault();
-    ismask.value = false
+    ismask.value = false;
+    
+    const DataTransferFiles = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];
+    const DataTransferItemList = event.dataTransfer?.items ? Array.from(event.dataTransfer.items) : [];
     
-    // 检查知识库初始化状态
     const isInitialized = await checkKnowledgeBaseInitialization();
     if (!isInitialized) {
         return;
     }
     
-    const DataTransferItemList = event.dataTransfer?.items;
-    if (DataTransferItemList) {
-        for (const dataTransferItem of DataTransferItemList) {
+    if (DataTransferFiles.length > 0) {
+        DataTransferFiles.forEach(file => requestMethod(file, uploadInput));
+    } else if (DataTransferItemList.length > 0) {
+        DataTransferItemList.forEach(dataTransferItem => {
             const fileEntry = dataTransferItem.webkitGetAsEntry() as FileSystemFileEntry | null;
             if (fileEntry) {
-                fileEntry.file((file: File) => {
-                    requestMethod(file, uploadInput)
-                    // 修复页面跳转问题：不跳转，让上传成功后的逻辑处理
-                })
+                fileEntry.file((file: File) => requestMethod(file, uploadInput));
             }
-        }
+        });
+    } else {
+        MessagePlugin.warning('请拖拽文件而不是文本或链接');
     }
 }
-const dragstart = (event: DragEvent) => {
-    event.preventDefault();
-}
+
+// 组件挂载时添加全局事件监听器
+onMounted(() => {
+    document.addEventListener('dragenter', handleGlobalDragEnter, true);
+    document.addEventListener('dragover', handleGlobalDragOver, true);
+    document.addEventListener('drop', handleGlobalDrop, true);
+});
+
+// 组件卸载时移除全局事件监听器
+onUnmounted(() => {
+    document.removeEventListener('dragenter', handleGlobalDragEnter, true);
+    document.removeEventListener('dragover', handleGlobalDragOver, true);
+    document.removeEventListener('drop', handleGlobalDrop, true);
+});
 </script>
 <style lang="less">
 .main {
