mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-02-28 19:14:13 +08:00
feat: Optimize file selection UI (#8027)
This commit is contained in:
parent
7b1980f7b7
commit
3de37a7cba
@ -1,9 +1,9 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4776196 */
|
||||
src: url('iconfont.woff2?t=1740474796282') format('woff2'),
|
||||
url('iconfont.woff?t=1740474796282') format('woff'),
|
||||
url('iconfont.ttf?t=1740474796282') format('truetype'),
|
||||
url('iconfont.svg?t=1740474796282#iconfont') format('svg');
|
||||
src: url('iconfont.woff2?t=1740641533654') format('woff2'),
|
||||
url('iconfont.woff?t=1740641533654') format('woff'),
|
||||
url('iconfont.ttf?t=1740641533654') format('truetype'),
|
||||
url('iconfont.svg?t=1740641533654#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -8,48 +8,34 @@
|
||||
popper-class="file-list"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button :icon="Folder" :disabled="disabled" @click="openPage()"></el-button>
|
||||
<el-button icon="Folder" :disabled="disabled" @click="openPage()"></el-button>
|
||||
</template>
|
||||
<div>
|
||||
<el-button class="close" link @click="closePage">
|
||||
<el-icon><Close /></el-icon>
|
||||
</el-button>
|
||||
<BreadCrumbs>
|
||||
<BreadCrumbItem @click="jump(-1)" :right="paths.length == 0">
|
||||
<el-icon><HomeFilled /></el-icon>
|
||||
</BreadCrumbItem>
|
||||
<template v-if="paths.length > 2">
|
||||
<BreadCrumbItem>
|
||||
<el-dropdown ref="dropdown1" trigger="click" @command="jump($event)">
|
||||
<span class="el-dropdown-link">...</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item, key) in paths.slice(0, -1)"
|
||||
:key="key"
|
||||
:command="key"
|
||||
>
|
||||
{{ item }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</BreadCrumbItem>
|
||||
<BreadCrumbItem @click="jump(paths.length - 1)" :right="true">
|
||||
<span class="sle" style="max-width: 200px">{{ paths[paths.length - 1] }}</span>
|
||||
</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>
|
||||
<el-button class="close" link @click="closePage" icon="Close"></el-button>
|
||||
<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-popover v-if="paths.length > 2" placement="bottom" trigger="hover">
|
||||
<template #reference>
|
||||
<el-button type="text">...</el-button>
|
||||
</template>
|
||||
<div class="hidden-paths">
|
||||
<el-button
|
||||
v-for="(path, index) in paths.slice(1, -1)"
|
||||
:key="index"
|
||||
type="text"
|
||||
@click="jump(index)"
|
||||
>
|
||||
{{ path }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-button v-if="paths.length > 1" type="text" @click="jump(paths.length - 1)">
|
||||
{{ paths[paths.length - 1] }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<el-button link @click="onAddItem(true)" type="primary" size="small">
|
||||
@ -129,9 +115,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { File } from '@/api/interface/file';
|
||||
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 i18n from '@/lang';
|
||||
import { MsgSuccess, MsgWarning } from '@/utils/message';
|
||||
@ -362,4 +345,9 @@ onUpdated(() => {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-paths {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
x
Reference in New Issue
Block a user