1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-10-12 16:36:12 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: 解决文件名和图标堆叠显示问题 (#2790)

Browse source
This commit is contained in:
zhengkunwang 2023-11-03 14:32:14 +08:00 • committed by GitHub
parent 7e00b46d5c
commit 6a989482a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
frontend/src/views/host/file-management/index.vue
View file

@ -182,9 +182,8 @@
prop="name" prop="name"
> >
<template #default="{ row, $index }"> <template #default="{ row, $index }">
<div @mouseenter="showFavorite($index)" @mouseleave="hideFavorite"> <div class="file-row" @mouseenter="showFavorite($index)" @mouseleave="hideFavorite">
<el-row> <div>
<el-col :span="1">
<svg-icon <svg-icon
v-if="row.isDir" v-if="row.isDir"
className="table-icon" className="table-icon"
@ -195,16 +194,11 @@
className="table-icon" className="table-icon"
:iconName="getIconName(row.extension)" :iconName="getIconName(row.extension)"
></svg-icon> ></svg-icon>
</el-col> </div>
<el-col :span="22"> <div class="file-name">
<div class="text-parent"> <span class="table-link" @click="open(row)" type="primary">{{ row.name }}</span>
<span class="table-link text-ellipsis" @click="open(row)" type="primary">
{{ row.name }}
</span>
<span v-if="row.isSymlink">-> {{ row.linkPath }}</span> <span v-if="row.isSymlink">-> {{ row.linkPath }}</span>
</div> </div>
</el-col>
<el-col :span="1">
<div> <div>
<el-button <el-button
v-if="row.favoriteID > 0" v-if="row.favoriteID > 0"
@ -223,8 +217,6 @@
></el-button> ></el-button>
</div> </div>
</div> </div>
</el-col>
</el-row>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -925,6 +917,21 @@ onMounted(() => {
max-height: 650px; max-height: 650px;
overflow: auto; 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 { .address-bar {
border: var(--el-border); border: var(--el-border);
.arrow { .arrow {