gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-02-28 19:14:13 +08:00
Code

feat: Optimize file selection UI (#8027)

Browse Source
This commit is contained in:
zhengkunwang 2025-02-27 17:50:54 +08:00 committed by GitHub
parent 7b1980f7b7
commit 3de37a7cba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 35 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/assets/iconfont/iconfont.css
View File

@ -1,9 +1,9 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 4776196 */ font-family: "iconfont"; /* Project id 4776196 */
src: url('iconfont.woff2?t=1740474796282') format('woff2'), src: url('iconfont.woff2?t=1740641533654') format('woff2'),
url('iconfont.woff?t=1740474796282') format('woff'), url('iconfont.woff?t=1740641533654') format('woff'),
url('iconfont.ttf?t=1740474796282') format('truetype'), url('iconfont.ttf?t=1740641533654') format('truetype'),
url('iconfont.svg?t=1740474796282#iconfont') format('svg'); url('iconfont.svg?t=1740641533654#iconfont') format('svg');
} }
.iconfont { .iconfont {

BIN
frontend/src/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/assets/iconfont/iconfont.woff2
View File

Binary file not shown.

70
frontend/src/components/file-list/index.vue
View File

@ -8,48 +8,34 @@
popper-class="file-list" popper-class="file-list"
> >
<template #reference> <template #reference>
<el-button :icon="Folder" :disabled="disabled" @click="openPage()"></el-button> <el-button icon="Folder" :disabled="disabled" @click="openPage()"></el-button>
</template> </template>
<div> <div>
<el-button class="close" link @click="closePage"> <el-button class="close" link @click="closePage" icon="Close"></el-button>
<el-icon><Close /></el-icon> <div>
<el-button type="text" icon="HomeFilled" @click="jump(-1)"></el-button>
<el-button v-if="paths.length > 0" type="text">
{{ paths[0] }}
</el-button> </el-button>
<BreadCrumbs> <el-popover v-if="paths.length > 2" placement="bottom" trigger="hover">
<BreadCrumbItem @click="jump(-1)" :right="paths.length == 0"> <template #reference>
<el-icon><HomeFilled /></el-icon> <el-button type="text">...</el-button>
</BreadCrumbItem> </template>
<template v-if="paths.length > 2"> <div class="hidden-paths">
<BreadCrumbItem> <el-button
<el-dropdown ref="dropdown1" trigger="click" @command="jump($event)"> v-for="(path, index) in paths.slice(1, -1)"
<span class="el-dropdown-link">...</span> :key="index"
<template #dropdown> type="text"
<el-dropdown-menu> @click="jump(index)"
<el-dropdown-item
v-for="(item, key) in paths.slice(0, -1)"
:key="key"
:command="key"
> >
{{ item }} {{ path }}
</el-dropdown-item> </el-button>
</el-dropdown-menu> </div>
</template> </el-popover>
</el-dropdown> <el-button v-if="paths.length > 1" type="text" @click="jump(paths.length - 1)">
</BreadCrumbItem> {{ paths[paths.length - 1] }}
<BreadCrumbItem @click="jump(paths.length - 1)" :right="true"> </el-button>
<span class="sle" style="max-width: 200px">{{ paths[paths.length - 1] }}</span> </div>
</BreadCrumbItem>
</template>
<template v-else>
<BreadCrumbItem
v-for="(item, key) in paths"
:key="key"
@click="jump(key)"
:right="key == paths.length - 1"
>
<span class="sle" style="max-width: 200px">{{ item }}</span>
</BreadCrumbItem>
</template>
</BreadCrumbs>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<el-button link @click="onAddItem(true)" type="primary" size="small"> <el-button link @click="onAddItem(true)" type="primary" size="small">
@ -129,9 +115,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { File } from '@/api/interface/file'; import { File } from '@/api/interface/file';
import { createFile, getFilesList } from '@/api/modules/files'; import { createFile, getFilesList } from '@/api/modules/files';
import { Folder, HomeFilled, Close } from '@element-plus/icons-vue';
import BreadCrumbs from '@/components/bread-crumbs/index.vue';
import BreadCrumbItem from '@/components/bread-crumbs/bread-crumbs-item.vue';
import { onMounted, onUpdated, reactive, ref, nextTick } from 'vue'; import { onMounted, onUpdated, reactive, ref, nextTick } from 'vue';
import i18n from '@/lang'; import i18n from '@/lang';
import { MsgSuccess, MsgWarning } from '@/utils/message'; import { MsgSuccess, MsgWarning } from '@/utils/message';
@ -362,4 +345,9 @@ onUpdated(() => {
float: right; float: right;
} }
} }
.hidden-paths {
display: flex;
flex-direction: column;
}
</style> </style>