From 6a989482a9aa1de7cd56671ece70d2977ddad4dc Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Fri, 3 Nov 2023 14:32:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=90=8D=E5=92=8C=E5=9B=BE=E6=A0=87=E5=A0=86=E5=8F=A0=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98=20(#2790)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/host/file-management/index.vue  | 93 ++++++++++---------
 1 file changed, 50 insertions(+), 43 deletions(-)

diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 10620d25c..87629203f 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -182,49 +182,41 @@
                         prop="name"
                     >
                         <template #default="{ row, $index }">
-                            <div @mouseenter="showFavorite($index)" @mouseleave="hideFavorite">
-                                <el-row>
-                                    <el-col :span="1">
-                                        <svg-icon
-                                            v-if="row.isDir"
-                                            className="table-icon"
-                                            iconName="p-file-folder"
-                                        ></svg-icon>
-                                        <svg-icon
-                                            v-else
-                                            className="table-icon"
-                                            :iconName="getIconName(row.extension)"
-                                        ></svg-icon>
-                                    </el-col>
-                                    <el-col :span="22">
-                                        <div class="text-parent">
-                                            <span class="table-link text-ellipsis" @click="open(row)" type="primary">
-                                                {{ row.name }}
-                                            </span>
-                                            <span v-if="row.isSymlink">-> {{ row.linkPath }}</span>
-                                        </div>
-                                    </el-col>
-                                    <el-col :span="1">
-                                        <div>
-                                            <el-button
-                                                v-if="row.favoriteID > 0"
-                                                link
-                                                type="warning"
-                                                size="large"
-                                                :icon="StarFilled"
-                                                @click="removeFavorite(row.favoriteID)"
-                                            ></el-button>
-                                            <div v-else>
-                                                <el-button
-                                                    v-if="hoveredRowIndex === $index"
-                                                    link
-                                                    :icon="Star"
-                                                    @click="addFavorite(row)"
-                                                ></el-button>
-                                            </div>
-                                        </div>
-                                    </el-col>
-                                </el-row>
+                            <div class="file-row" @mouseenter="showFavorite($index)" @mouseleave="hideFavorite">
+                                <div>
+                                    <svg-icon
+                                        v-if="row.isDir"
+                                        className="table-icon"
+                                        iconName="p-file-folder"
+                                    ></svg-icon>
+                                    <svg-icon
+                                        v-else
+                                        className="table-icon"
+                                        :iconName="getIconName(row.extension)"
+                                    ></svg-icon>
+                                </div>
+                                <div class="file-name">
+                                    <span class="table-link" @click="open(row)" type="primary">{{ row.name }}</span>
+                                    <span v-if="row.isSymlink">-> {{ row.linkPath }}</span>
+                                </div>
+                                <div>
+                                    <el-button
+                                        v-if="row.favoriteID > 0"
+                                        link
+                                        type="warning"
+                                        size="large"
+                                        :icon="StarFilled"
+                                        @click="removeFavorite(row.favoriteID)"
+                                    ></el-button>
+                                    <div v-else>
+                                        <el-button
+                                            v-if="hoveredRowIndex === $index"
+                                            link
+                                            :icon="Star"
+                                            @click="addFavorite(row)"
+                                        ></el-button>
+                                    </div>
+                                </div>
                             </div>
                         </template>
                     </el-table-column>
@@ -925,6 +917,21 @@ onMounted(() => {
     max-height: 650px;
     overflow: auto;
 }
+
+.file-row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.file-name {
+    flex-grow: 1;
+    margin-left: 1px;
+    width: 95%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
 .address-bar {
     border: var(--el-border);
     .arrow {