lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化标签选中状态

Browse Source
This commit is contained in:
jmal 2025-02-19 17:20:37 +08:00
parent 442bbf922e
commit 39d8450cc3
1 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/layout/components/Sidebar/index.vue
View File

@ -71,7 +71,7 @@
v-for="tag in tagList" v-for="tag in tagList"
:key="tag.tagId" :key="tag.tagId"
> >
<li class="infinite-list-item collapse" @click="tagClick(tag)"> <li class="infinite-list-item collapse" :class="{ 'highlight': selectedTagId === tag.id }" @click="tagClick(tag)">
<svg-icon :style="{ color: tag.color, fontSize: '14px' }" icon-class="tag2"></svg-icon> <svg-icon :style="{ color: tag.color, fontSize: '14px' }" icon-class="tag2"></svg-icon>
</li> </li>
</el-tooltip> </el-tooltip>
@ -80,7 +80,8 @@
<div v-else class="tag-drop-container"> <div v-else class="tag-drop-container">
<ul class="infinite-list"> <ul class="infinite-list">
<li v-for="tag in tagList" v-if="showTag" :key="tag.id" <li v-for="tag in tagList" v-if="showTag" :key="tag.id"
class="infinite-list-item" class="infinite-list-item expand"
:class="{ 'highlight': selectedTagId === tag.id }"
@click="tagClick(tag)" @click="tagClick(tag)"
> >
<div class="tag-name-icon"> <div class="tag-name-icon">
@ -187,7 +188,8 @@ export default {
{ validator: checkTagName, trigger: 'blur' }, { validator: checkTagName, trigger: 'blur' },
] ]
}, },
tagUpdateLoading: false tagUpdateLoading: false,
selectedTagId: null,
} }
}, },
computed: { computed: {
@ -239,7 +241,8 @@ export default {
isCollapse(val){ isCollapse(val){
}, },
$route(to) { $route(to) {
this.showTag = to.meta !== undefined && to.meta.menuType !== undefined && to.meta.menuType === 0; this.showTag = to.meta !== undefined && to.meta.menuType !== undefined && to.meta.menuType === 0
this.setSelectedTagFromUrl()
}, },
message(msg) { message(msg) {
if (msg.event === 'msg/file/change') { if (msg.event === 'msg/file/change') {
@ -260,6 +263,8 @@ export default {
}; };
this.tagDrop() this.tagDrop()
this.setSelectedTagFromUrl()
}, },
methods: { methods: {
getTagList() { getTagList() {
@ -280,7 +285,7 @@ export default {
const _this = this const _this = this
Sortable.create(tagList, { Sortable.create(tagList, {
animation: 150, animation: 150,
ghostClass: 'blue-background-class', ghostClass: 'drop-background-class',
onEnd({ newIndex, oldIndex }) { onEnd({ newIndex, oldIndex }) {
const currRow = _this.tagList.splice(oldIndex, 1)[0] const currRow = _this.tagList.splice(oldIndex, 1)[0]
_this.tagList.splice(newIndex, 0, currRow) _this.tagList.splice(newIndex, 0, currRow)
@ -324,7 +329,17 @@ export default {
}) })
}, },
tagClick(tag) { tagClick(tag) {
this.$router.push(`/tag?tagId=${tag.id}`); this.$router.push(`/tag?tagId=${tag.id}`)
this.selectedTagId = tag.id
},
setSelectedTagFromUrl() {
// 从 URL 中获取 tagId 参数
const tagId = this.$route.query.tagId
if (this.$route.path.startsWith("/tag") && tagId) {
this.selectedTagId = tagId
} else {
this.selectedTagId = null
}
}, },
clickTagMore(tag, event) { clickTagMore(tag, event) {
this.contextTag = tag this.contextTag = tag
@ -476,15 +491,11 @@ export default {
font-size: 14px; font-size: 14px;
color: #606266; color: #606266;
cursor: pointer; cursor: pointer;
margin: 0 5px 0 5px; margin: 2px 5px 2px 5px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: flex;
justify-content: space-between;
align-items: center;
.tag-name-icon { .tag-name-icon {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -500,7 +511,7 @@ export default {
.btn-more { .btn-more {
display: none; display: none;
padding: 2px 5px; padding: 2px 5px;
background: #eaeaea; background: #dadada;
border: 0; border: 0;
} }
@ -513,13 +524,22 @@ export default {
background-color: #ecf5ff; background-color: #ecf5ff;
} }
&:hover { &:hover {
background-color: #eaeaea !important; background-color: #dadada !important;
border-radius: 4px; border-radius: 4px;
.btn-more { .btn-more {
display: block; display: block;
} }
} }
} }
.infinite-list-item.highlight {
background-color: #dadada;
border-radius: 4px;
}
.infinite-list-item.expand {
display: flex;
justify-content: space-between;
align-items: center;
}
.infinite-list-item.collapse { .infinite-list-item.collapse {
padding-left: unset; padding-left: unset;
text-align: center; text-align: center;
@ -613,8 +633,8 @@ export default {
} }
} }
} }
.blue-background-class { .drop-background-class {
background-color: rgba(64, 158, 255, 0.82); background-color: #409EFFD1;
border-radius: 4px; border-radius: 4px;
} }
.form-tag-color { .form-tag-color {