From 10408c5711665c8a2c42b3897ea6fad591ed35aa Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Thu, 18 Apr 2024 11:09:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=80=90=E7=9F=A5=E8=AF=86=E5=BA=93?=
 =?UTF-8?q?=E3=80=91=E4=B8=8A=E4=BC=A0=E6=96=87=E6=A1=A3=E6=97=B6=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=80=89=E6=8B=A9=E6=96=87=E4=BB=B6=E5=A4=B9?=
 =?UTF-8?q?(#36)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataset/component/UploadComponent.vue     | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/ui/src/views/dataset/component/UploadComponent.vue b/ui/src/views/dataset/component/UploadComponent.vue
index df2c36621..98a785a93 100644
--- a/ui/src/views/dataset/component/UploadComponent.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -9,6 +9,7 @@
   >
     <el-form-item prop="fileList">
       <el-upload
+        :webkitdirectory="false"
         class="w-full"
         drag
         multiple
@@ -19,18 +20,18 @@
         accept=".txt, .md, .csv, .log, .docx, .pdf"
         :limit="50"
         :on-exceed="onExceed"
-        :on-change="filehandleChange"
+        :on-change="fileHandleChange"
+        @click.prevent="handlePreview(false)"
       >
         <img src="@/assets/upload-icon.svg" alt="" />
         <div class="el-upload__text">
           <p>
-            将文件拖拽至此区域或
-            <em> 选择文件上传 </em>
+            拖拽文件至此上传或
+            <em class="hover" @click.prevent="handlePreview(false)"> 选择文件 </em>
+            <em class="hover" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
           </p>
           <div class="upload__decoration">
-            <p>
-              支持格式：TXT、Markdown、PDF、DOCX，每次最多上传50个文件，每个文件不超过 100MB
-            </p>
+            <p>支持格式：TXT、Markdown、PDF、DOCX，每次最多上传50个文件，每个文件不超过 100MB</p>
             <p>若使用【高级分段】建议上传前规范文件的分段标识</p>
           </div>
         </div>
@@ -59,7 +60,7 @@
   </el-row>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onUnmounted, onMounted, computed, watch } from 'vue'
+import { ref, reactive, onUnmounted, onMounted, computed, watch, nextTick } from 'vue'
 import type { UploadFile, UploadFiles } from 'element-plus'
 import { filesize, getImgUrl, isRightType } from '@/utils/utils'
 import { MsgError } from '@/utils/message'
@@ -83,7 +84,7 @@ function deleteFile(index: number) {
 }
 
 // 上传on-change事件
-const filehandleChange = (file: any, fileList: UploadFiles) => {
+const fileHandleChange = (file: any, fileList: UploadFiles) => {
   //1、判断文件大小是否合法，文件限制不能大于10M
   const isLimit = file?.size / 1024 / 1024 < 100
   if (!isLimit) {
@@ -101,6 +102,17 @@ const filehandleChange = (file: any, fileList: UploadFiles) => {
 const onExceed = () => {
   MsgError('每次最多上传50个文件')
 }
+
+const handlePreview = (bool: boolean) => {
+  let inputDom: any = null
+  nextTick(() => {
+    if (document.querySelector('.el-upload__input') != null) {
+      inputDom = document.querySelector('.el-upload__input')
+      inputDom.webkitdirectory = bool
+    }
+  })
+}
+
 /*
   表单校验
 */
@@ -133,4 +145,9 @@ defineExpose({
   line-height: 20px;
   color: var(--el-text-color-secondary);
 }
+.el-upload__text {
+  .hover:hover {
+    color: var(--el-color-primary-light-5);
+  }
+}
 </style>