✨ feat:新怎标签页沉浸式效果，默认未开启

bd88d293 · preschooler · 李浪 · 16c919ce · bd88d293 · bd88d293
Commit bd88d293 authored Aug 15, 2024 by preschooler Committed by 李浪 Aug 15, 2024
5 changed files
--- a/src/layout/components/Setting/src/Setting.vue
+++ b/src/layout/components/Setting/src/Setting.vue
@@ -126,6 +126,8 @@ const copyConfig = async () => {
      message: ${appStore.getMessage},
      // 标签页
      tagsView: ${appStore.getTagsView},
+      // 标签页
+      tagsViewImmerse: ${appStore.getTagsViewImmerse},
      // 标签页图标
      getTagsViewIcon: ${appStore.getTagsViewIcon},
      // logo

--- a/src/layout/components/Setting/src/components/InterfaceDisplay.vue
+++ b/src/layout/components/Setting/src/components/InterfaceDisplay.vue
@@ -73,6 +73,13 @@ const tagsViewChange = (show: boolean) => {
  appStore.setTagsView(show)
 }
+// 标签页沉浸
+const tagsViewImmerse = ref(appStore.getTagsViewImmerse)
+const tagsViewImmerseChange = (immerse: boolean) => {
+  appStore.setTagsViewImmerse(immerse)
+}
 // 标签页图标
 const tagsViewIcon = ref(appStore.getTagsViewIcon)
@@ -182,6 +189,11 @@ watch(
    </div>
    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.tagsViewImmerse') }}</span>
+      <ElSwitch v-model="tagsViewImmerse" @change="tagsViewImmerseChange" />
+    </div>
+    <div class="flex items-center justify-between">
      <span class="text-14px">{{ t('setting.tagsViewIcon') }}</span>
      <ElSwitch v-model="tagsViewIcon" @change="tagsViewIconChange" />
    </div>

--- a/src/layout/components/TagsView/src/TagsView.vue
+++ b/src/layout/components/TagsView/src/TagsView.vue
@@ -33,6 +33,8 @@ const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])
 const appStore = useAppStore()
+const tagsViewImmerse = computed(() => appStore.getTagsViewImmerse)
 const tagsViewIcon = computed(() => appStore.getTagsViewIcon)
 const isDark = computed(() => appStore.getIsDark)
@@ -266,7 +268,7 @@ watch(
    class="relative w-full flex bg-[#fff] dark:bg-[var(--el-bg-color)]"
  >
    <span
-      :class="`${prefixCls}__tool ${prefixCls}__tool--first`"
+      :class="tagsViewImmerse ? '' : `${prefixCls}__tool ${prefixCls}__tool--first`"
      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
      @click="move(-200)"
    >
@@ -343,6 +345,9 @@ watch(
            :tag-item="item"
            :class="[
              `${prefixCls}__item`,
+              tagsViewImmerse ? `${prefixCls}__item--immerse` : '',
+              tagsViewIcon ? `${prefixCls}__item--icon` : '',
+              tagsViewImmerse && tagsViewIcon ? `${prefixCls}__item--immerse--icon` : '',
              item?.meta?.affix ? `${prefixCls}__item--affix` : '',
              {
                'is-active': isActive(item)
@@ -354,7 +359,7 @@ watch(
              <router-link :ref="tagLinksRefs.set" :to="{ ...item }" custom v-slot="{ navigate }">
                <div
                  @click="navigate"
-                  class="h-full flex items-center justify-center whitespace-nowrap pl-15px"
+                  :class="`h-full flex items-center justify-center whitespace-nowrap pl-15px ${prefixCls}__item--label`"
                >
                  <Icon
                    v-if="
@@ -384,7 +389,7 @@ watch(
      </ElScrollbar>
    </div>
    <span
-      :class="`${prefixCls}__tool`"
+      :class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
      @click="move(200)"
    >
@@ -395,7 +400,7 @@ watch(
      />
    </span>
    <span
-      :class="`${prefixCls}__tool`"
+      :class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
      @click="refreshSelectedTag(selectedTag)"
    >
@@ -460,7 +465,7 @@ watch(
      ]"
    >
      <span
-        :class="`${prefixCls}__tool`"
+        :class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
        class="block h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
      >
        <Icon
@@ -512,7 +517,7 @@ $prefix-cls: #{$namespace}-tags-view;
    position: relative;
    top: 2px;
    height: calc(100% - 6px);
-    padding-right: 25px;
+    padding-right: 15px;
    margin-left: 4px;
    font-size: 12px;
    cursor: pointer;
@@ -533,6 +538,10 @@ $prefix-cls: #{$namespace}-tags-view;
    }
  }
+  &__item--icon {
+    padding-right: 20px;
+  }
  &__item:not(.is-active) {
    &:hover {
      color: var(--el-color-primary);
@@ -549,6 +558,37 @@ $prefix-cls: #{$namespace}-tags-view;
      }
    }
  }
+  &__item--immerse {
+    top: 3px;
+    padding-right: 35px;
+    margin: 0 -10px;
+    border: 1px solid transparent;
+    -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")
+      12 27 15;
+    .#{$prefix-cls}__item--label {
+      padding-left: 35px;
+    }
+    .#{$prefix-cls}__item--close {
+      right: 20px;
+    }
+  }
+  &__item--immerse--icon {
+    padding-right: 35px;
+  }
+  &__item--immerse:not(.is-active) {
+    &:hover {
+      color: var(--el-color-white);
+      background-color: var(--el-color-primary);
+      .#{$prefix-cls}__item--close {
+        :deep(span) {
+          color: var(--el-color-white) !important;
+        }
+      }
+    }
+  }
 }
 .dark {

--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -92,6 +92,7 @@ export default {
    localeIcon: '多语言图标',
    messageIcon: '消息图标',
    tagsView: '标签页',
+    tagsViewImmerse: '标签页沉浸',
    logo: '标志',
    greyMode: '灰色模式',
    fixedHeader: '固定头部',

--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -21,6 +21,7 @@ interface AppState {
  locale: boolean
  message: boolean
  tagsView: boolean
+  tagsViewImmerse: boolean
  tagsViewIcon: boolean
  logo: boolean
  fixedHeader: boolean
@@ -58,6 +59,7 @@ export const useAppStore = defineStore('app', {
      locale: true, // 多语言图标
      message: true, // 消息图标
      tagsView: true, // 标签页
+      tagsViewImmerse: false, // 标签页沉浸
      tagsViewIcon: true, // 是否显示标签图标
      logo: true, // logo
      fixedHeader: true, // 固定toolheader
@@ -131,6 +133,9 @@ export const useAppStore = defineStore('app', {
    getTagsView(): boolean {
      return this.tagsView
    },
+    getTagsViewImmerse(): boolean {
+      return this.tagsViewImmerse
+    },
    getTagsViewIcon(): boolean {
      return this.tagsViewIcon
    },
@@ -208,6 +213,9 @@ export const useAppStore = defineStore('app', {
    setTagsView(tagsView: boolean) {
      this.tagsView = tagsView
    },
+    setTagsViewImmerse(tagsViewImmerse: boolean) {
+      this.tagsViewImmerse = tagsViewImmerse
+    },
    setTagsViewIcon(tagsViewIcon: boolean) {
      this.tagsViewIcon = tagsViewIcon
    },