From 9acd315fef4141c710d590e1c27c6d1f7070f6c5 Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Wed, 1 Nov 2023 14:22:33 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F=20(#2758?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles/common.scss               |  2 +-
 .../src/views/host/file-management/index.vue  | 56 +++++++++++++------
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 76c2e7234..908951c24 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -382,4 +382,4 @@ html {
     margin-top: 12px;
     float: right;
     margin-right: 50px;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 2e45a743d..d66c035a2 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -112,7 +112,11 @@
                                 <el-table :data="favorites">
                                     <el-table-column prop="name">
                                         <template #default="{ row }">
-                                            <span class="table-link" @click="toFavorite(row)" type="primary">
+                                            <span
+                                                class="table-link text-ellipsis"
+                                                @click="toFavorite(row)"
+                                                type="primary"
+                                            >
                                                 <svg-icon
                                                     v-if="row.isDir"
                                                     className="table-icon"
@@ -176,7 +180,7 @@
                         <template #default="{ row, $index }">
                             <div @mouseenter="showFavorite($index)" @mouseleave="hideFavorite">
                                 <el-row>
-                                    <el-col :span="23">
+                                    <el-col :span="1">
                                         <svg-icon
                                             v-if="row.isDir"
                                             className="table-icon"
@@ -187,25 +191,33 @@
                                             className="table-icon"
                                             :iconName="getIconName(row.extension)"
                                         ></svg-icon>
-                                        <span class="table-link" @click="open(row)" type="primary">{{ row.name }}</span>
-                                        <span v-if="row.isSymlink">-> {{ row.linkPath }}</span>
+                                    </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">
-                                        <el-button
-                                            v-if="row.favoriteID > 0"
-                                            link
-                                            type="warning"
-                                            size="large"
-                                            :icon="StarFilled"
-                                            @click="removeFavorite(row.favoriteID)"
-                                        ></el-button>
-                                        <div v-else>
+                                        <div>
                                             <el-button
-                                                v-if="hoveredRowIndex === $index"
+                                                v-if="row.favoriteID > 0"
                                                 link
-                                                :icon="Star"
-                                                @click="addFavorite(row)"
+                                                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>
@@ -895,6 +907,18 @@ onMounted(() => {
     }
 }
 
+.text-parent {
+    display: flex;
+    width: 100%;
+    margin-left: 2px;
+}
+
+.text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .favorite-item {
     max-height: 650px;
     overflow: auto;