From 78576a37246dc1bf9aa74df68072a7b72a0dcd4a Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Mon, 13 Nov 2023 15:00:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=A4=9A=E9=80=89=E5=8F=AF=E8=83=BD=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E7=9A=84=E6=96=87=E4=BB=B6=E5=88=97=E8=A1=A8=E4=B8=A2?=
 =?UTF-8?q?=E5=A4=B1=E7=9A=84=E9=97=AE=E9=A2=98=20(#2925)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/index.ts              |  2 +
 frontend/src/components/tooltip/index.vue     |  2 +
 .../host/file-management/delete/index.vue     | 57 +++++++++++++------
 .../host/file-management/upload/index.vue     |  5 +-
 4 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 482f42dbe..2cfc0735e 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -4,6 +4,7 @@ import RouterButton from './router-button/index.vue';
 import ComplexTable from './complex-table/index.vue';
 import ErrPrompt from './error-prompt/index.vue';
 import OpDialog from './del-dialog/index.vue';
+import Tooltip from '@/components/tooltip/index.vue';
 export default {
     install(app: App) {
         app.component(LayoutContent.name, LayoutContent);
@@ -11,5 +12,6 @@ export default {
         app.component(ComplexTable.name, ComplexTable);
         app.component(ErrPrompt.name, ErrPrompt);
         app.component(OpDialog.name, OpDialog);
+        app.component(Tooltip.name, Tooltip);
     },
 };
diff --git a/frontend/src/components/tooltip/index.vue b/frontend/src/components/tooltip/index.vue
index ee4df5000..3c6c24029 100644
--- a/frontend/src/components/tooltip/index.vue
+++ b/frontend/src/components/tooltip/index.vue
@@ -15,6 +15,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
+defineOptions({ name: 'Tooltip' });
+
 const showTooltip = ref();
 const tooltipBox = ref();
 const tooltipItem = ref();
diff --git a/frontend/src/views/host/file-management/delete/index.vue b/frontend/src/views/host/file-management/delete/index.vue
index 039d32b5b..fafd2dd59 100644
--- a/frontend/src/views/host/file-management/delete/index.vue
+++ b/frontend/src/views/host/file-management/delete/index.vue
@@ -1,25 +1,36 @@
 <template>
     <el-dialog v-model="open" :title="$t('app.delete')" width="30%" :close-on-click-modal="false">
-        <el-row>
-            <el-col :span="20" :offset="2">
-                <el-alert class="mt-2" :show-icon="true" type="warning" :closable="false">
-                    <div style="line-height: 20px; word-wrap: break-word">
-                        <span>{{ $t('file.deleteHelper') }}</span>
+        <div>
+            <el-row>
+                <el-col :span="20" :offset="2">
+                    <el-alert class="mt-2" :show-icon="true" type="warning" :closable="false">
+                        <div class="delete-warn">
+                            <span>{{ $t('file.deleteHelper') }}</span>
+                        </div>
+                    </el-alert>
+                    <div class="mt-4">
+                        <el-checkbox v-model="forceDelete">{{ $t('file.forceDeleteHelper') }}</el-checkbox>
                     </div>
-                </el-alert>
-                <div class="mt-4">
-                    <el-checkbox v-model="forceDelete">{{ $t('file.forceDeleteHelper') }}</el-checkbox>
-                </div>
-
-                <div class="flx-align-center mb-1" v-for="(row, index) in files" :key="index">
-                    <div>
-                        <svg-icon v-if="row.isDir" className="table-icon mr-1 " iconName="p-file-folder"></svg-icon>
-                        <svg-icon v-else className="table-icon mr-1" :iconName="getIconName(row.extension)"></svg-icon>
+                    <div class="file-list">
+                        <div class="flx-align-center mb-1" v-for="(row, index) in files" :key="index">
+                            <div>
+                                <svg-icon
+                                    v-if="row.isDir"
+                                    className="table-icon mr-1 "
+                                    iconName="p-file-folder"
+                                ></svg-icon>
+                                <svg-icon
+                                    v-else
+                                    className="table-icon mr-1"
+                                    :iconName="getIconName(row.extension)"
+                                ></svg-icon>
+                            </div>
+                            <span class="sle">{{ row.name }}</span>
+                        </div>
                     </div>
-                    <span class="sle">{{ row.name }}</span>
-                </div>
-            </el-col>
-        </el-row>
+                </el-col>
+            </el-row>
+        </div>
 
         <template #footer>
             <span class="dialog-footer">
@@ -85,4 +96,14 @@ defineExpose({
     max-height: 400px;
     overflow: auto;
 }
+
+.file-list {
+    height: 400px;
+    overflow-y: auto;
+}
+
+.delete-warn {
+    line-height: 20px;
+    word-wrap: break-word;
+}
 </style>
diff --git a/frontend/src/views/host/file-management/upload/index.vue b/frontend/src/views/host/file-management/upload/index.vue
index 4079aa0ed..b2e9a4fe4 100644
--- a/frontend/src/views/host/file-management/upload/index.vue
+++ b/frontend/src/views/host/file-management/upload/index.vue
@@ -127,11 +127,10 @@ const removeFile = (index: number) => {
 };
 
 const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+    uploaderFiles.value = uploadFiles;
     const reader = new FileReader();
     reader.readAsDataURL(_uploadFile.raw);
-    reader.onload = async () => {
-        uploaderFiles.value = uploadFiles;
-    };
+    reader.onload = async () => {};
     reader.onerror = () => {
         uploaderFiles.value = uploaderFiles.value.filter((file) => file.uid !== _uploadFile.uid);
         MsgError(i18n.global.t('file.typeErrOrEmpty', [_uploadFile.name]));