Skip to content

feat: Optimize file selection UI #8027

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f2c-ci-robot merged 1 commit into from
Feb 27, 2025
Merged

feat: Optimize file selection UI #8027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions frontend/src/assets/iconfont/iconfont.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Feb 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The given code has no differences or issues, but for improvement, we can replace 't' to avoid potential performance degradation.

@font-face {
	font-family: "iconfont"; /* Project id 4776196 */
	src:
		url('./public/fonts/iconfont.woff') format('woff'),
		url('./css/fonts/iconfont.ttf?v=2.0.7') format('ttf'),
		'svg',

Remember that this is just an example, actual implementation will depend on project specifications, resource availability, etc.. Also, do note that replacing .v with ?version= would improve the performance slightly when using Webpack, but it might also change the behavior according to different loaders used by webpack (e.g., style, sourcemaps).

Expand Down
Binary file modified frontend/src/assets/iconfont/iconfont.ttf
View file
Open in desktop
Binary file not shown.
Binary file modified frontend/src/assets/iconfont/iconfont.woff
View file
Open in desktop
Binary file not shown.
Binary file modified frontend/src/assets/iconfont/iconfont.woff2
View file
Open in desktop
Binary file not shown.
74 changes: 31 additions & 43 deletions frontend/src/components/file-list/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -362,4 +345,9 @@ onUpdated(() => {
float: right;
}
}

.hidden-paths {
display: flex;
flex-direction: column;
}
</style>
Copy link
Member

@wanghe-fit2cloud wanghe-fit2cloud Feb 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There do not seem to be any obvious issues with this code. It looks well-written, follows best practices, and should function correctly given its current context.

However, a bit of optimization could potentially reduce some unnecessary DOM manipulations like:

<span class="hidden-paths">

and

<template #reference>

should be removed since they don't actually render anything. They are only needed if you want to show/hide additional functionality when hovering over the breadcrumbs.

If you wish to further optimize it and need assistance in doing so, kindly let me know!

Loading