Skip to content

Commit bd88d29

Browse files
preschooler李浪
preschooler
authored and
李浪
committed
✨ feat:新怎标签页沉浸式效果，默认未开启
1 parent 16c919c commit bd88d29

File tree

5 files changed

+69
-6
lines changed

5 files changed

+69
-6
lines changed

‎src/layout/components/Setting/src/Setting.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,8 @@ const copyConfig = async () => {
126126
message: ${appStore.getMessage},
127127
// 标签页
128128
tagsView: ${appStore.getTagsView},
129+
// 标签页
130+
tagsViewImmerse: ${appStore.getTagsViewImmerse},
129131
// 标签页图标
130132
getTagsViewIcon: ${appStore.getTagsViewIcon},
131133
// logo

‎src/layout/components/Setting/src/components/InterfaceDisplay.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,13 @@ const tagsViewChange = (show: boolean) => {
7373
appStore.setTagsView(show)
7474
}
7575
76+
// 标签页沉浸
77+
const tagsViewImmerse = ref(appStore.getTagsViewImmerse)
78+
79+
const tagsViewImmerseChange = (immerse: boolean) => {
80+
appStore.setTagsViewImmerse(immerse)
81+
}
82+
7683
// 标签页图标
7784
const tagsViewIcon = ref(appStore.getTagsViewIcon)
7885
@@ -181,6 +188,11 @@ watch(
181188
<ElSwitch v-model="tagsView" @change="tagsViewChange" />
182189
</div>
183190

191+
<div class="flex items-center justify-between">
192+
<span class="text-14px">{{ t('setting.tagsViewImmerse') }}</span>
193+
<ElSwitch v-model="tagsViewImmerse" @change="tagsViewImmerseChange" />
194+
</div>
195+
184196
<div class="flex items-center justify-between">
185197
<span class="text-14px">{{ t('setting.tagsViewIcon') }}</span>
186198
<ElSwitch v-model="tagsViewIcon" @change="tagsViewIconChange" />

‎src/layout/components/TagsView/src/TagsView.vue

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])
3333
3434
const appStore = useAppStore()
3535
36+
const tagsViewImmerse = computed(() => appStore.getTagsViewImmerse)
37+
3638
const tagsViewIcon = computed(() => appStore.getTagsViewIcon)
3739
3840
const isDark = computed(() => appStore.getIsDark)
@@ -266,7 +268,7 @@ watch(
266268
class="relative w-full flex bg-[#fff] dark:bg-[var(--el-bg-color)]"
267269
>
268270
<span
269-
:class="`${prefixCls}__tool ${prefixCls}__tool--first`"
271+
:class="tagsViewImmerse ? '' : `${prefixCls}__tool ${prefixCls}__tool--first`"
270272
class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
271273
@click="move(-200)"
272274
>
@@ -343,6 +345,9 @@ watch(
343345
:tag-item="item"
344346
:class="[
345347
`${prefixCls}__item`,
348+
tagsViewImmerse ? `${prefixCls}__item--immerse` : '',
349+
tagsViewIcon ? `${prefixCls}__item--icon` : '',
350+
tagsViewImmerse && tagsViewIcon ? `${prefixCls}__item--immerse--icon` : '',
346351
item?.meta?.affix ? `${prefixCls}__item--affix` : '',
347352
{
348353
'is-active': isActive(item)
@@ -354,7 +359,7 @@ watch(
354359
<router-link :ref="tagLinksRefs.set" :to="{ ...item }" custom v-slot="{ navigate }">
355360
<div
356361
@click="navigate"
357-
class="h-full flex items-center justify-center whitespace-nowrap pl-15px"
362+
:class="`h-full flex items-center justify-center whitespace-nowrap pl-15px ${prefixCls}__item--label`"
358363
>
359364
<Icon
360365
v-if="
@@ -384,7 +389,7 @@ watch(
384389
</ElScrollbar>
385390
</div>
386391
<span
387-
:class="`${prefixCls}__tool`"
392+
:class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
388393
class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
389394
@click="move(200)"
390395
>
@@ -395,7 +400,7 @@ watch(
395400
/>
396401
</span>
397402
<span
398-
:class="`${prefixCls}__tool`"
403+
:class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
399404
class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
400405
@click="refreshSelectedTag(selectedTag)"
401406
>
@@ -460,7 +465,7 @@ watch(
460465
]"
461466
>
462467
<span
463-
:class="`${prefixCls}__tool`"
468+
:class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
464469
class="block h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
465470
>
466471
<Icon
@@ -512,7 +517,7 @@ $prefix-cls: #{$namespace}-tags-view;
512517
position: relative;
513518
top: 2px;
514519
height: calc(100% - 6px);
515-
padding-right: 25px;
520+
padding-right: 15px;
516521
margin-left: 4px;
517522
font-size: 12px;
518523
cursor: pointer;
@@ -533,6 +538,10 @@ $prefix-cls: #{$namespace}-tags-view;
533538
}
534539
}
535540
541+
&__item--icon {
542+
padding-right: 20px;
543+
}
544+
536545
&__item:not(.is-active) {
537546
&:hover {
538547
color: var(--el-color-primary);
@@ -549,6 +558,37 @@ $prefix-cls: #{$namespace}-tags-view;
549558
}
550559
}
551560
}
561+
562+
&__item--immerse {
563+
top: 3px;
564+
padding-right: 35px;
565+
margin: 0 -10px;
566+
border: 1px solid transparent;
567+
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='68' height='34' viewBox='0 0 68 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m27,0c-7.99582,0 -11.95105,0.00205 -12,12l0,6c0,8.284 -0.48549,16.49691 -8.76949,16.49691l54.37857,-0.11145c-8.284,0 -8.60908,-8.10146 -8.60908,-16.38546l0,-6c0.11145,-12.08445 -4.38441,-12 -12,-12l-13,0z' fill='%23409eff'/%3E%3C/svg%3E")
568+
12 27 15;
569+
.#{$prefix-cls}__item--label {
570+
padding-left: 35px;
571+
}
572+
.#{$prefix-cls}__item--close {
573+
right: 20px;
574+
}
575+
}
576+
577+
&__item--immerse--icon {
578+
padding-right: 35px;
579+
}
580+
581+
&__item--immerse:not(.is-active) {
582+
&:hover {
583+
color: var(--el-color-white);
584+
background-color: var(--el-color-primary);
585+
.#{$prefix-cls}__item--close {
586+
:deep(span) {
587+
color: var(--el-color-white) !important;
588+
}
589+
}
590+
}
591+
}
552592
}
553593
554594
.dark {

‎src/locales/zh-CN.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export default {
9292
localeIcon: '多语言图标',
9393
messageIcon: '消息图标',
9494
tagsView: '标签页',
95+
tagsViewImmerse: '标签页沉浸',
9596
logo: '标志',
9697
greyMode: '灰色模式',
9798
fixedHeader: '固定头部',

‎src/store/modules/app.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ interface AppState {
2121
locale: boolean
2222
message: boolean
2323
tagsView: boolean
24+
tagsViewImmerse: boolean
2425
tagsViewIcon: boolean
2526
logo: boolean
2627
fixedHeader: boolean
@@ -58,6 +59,7 @@ export const useAppStore = defineStore('app', {
5859
locale: true, // 多语言图标
5960
message: true, // 消息图标
6061
tagsView: true, // 标签页
62+
tagsViewImmerse: false, // 标签页沉浸
6163
tagsViewIcon: true, // 是否显示标签图标
6264
logo: true, // logo
6365
fixedHeader: true, // 固定toolheader
@@ -131,6 +133,9 @@ export const useAppStore = defineStore('app', {
131133
getTagsView(): boolean {
132134
return this.tagsView
133135
},
136+
getTagsViewImmerse(): boolean {
137+
return this.tagsViewImmerse
138+
},
134139
getTagsViewIcon(): boolean {
135140
return this.tagsViewIcon
136141
},
@@ -208,6 +213,9 @@ export const useAppStore = defineStore('app', {
208213
setTagsView(tagsView: boolean) {
209214
this.tagsView = tagsView
210215
},
216+
setTagsViewImmerse(tagsViewImmerse: boolean) {
217+
this.tagsViewImmerse = tagsViewImmerse
218+
},
211219
setTagsViewIcon(tagsViewIcon: boolean) {
212220
this.tagsViewIcon = tagsViewIcon
213221
},

0 commit comments

Comments
 (0)