!499 【新增】标签页沉浸式效果

Merge pull request !499 from 半栈幼儿员/preschooler
2024-08-18 09:34:36 +00:00 · 2024-08-18 09:34:36 +00:00 · 0791a8aedb
parent 7108cde060 db75640167
commit 0791a8aedb
7 changed files with 79 additions and 14 deletions
--- 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)

@ -181,6 +188,11 @@ watch(
      <ElSwitch v-model="tagsView" @change="tagsViewChange" />
    </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" />
--- 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
    },
--- a/src/views/Login/SocialLogin.vue
+++ b/src/views/Login/SocialLogin.vue
@ -276,10 +276,11 @@ const handleLogin = async (params) => {
    const code = route?.query?.code as string
    const state = route?.query?.state as string

+    const loginDataLoginForm = { ...loginData.loginForm }
    const res = await LoginApi.login({
      // 账号密码登录
-      username: loginData.loginForm.username,
-      password: loginData.loginForm.password,
+      username: loginDataLoginForm.username,
+      password: loginDataLoginForm.password,
      captchaVerification: params.captchaVerification,
      // 社交登录
      socialCode: code,
@ -294,8 +295,8 @@ const handleLogin = async (params) => {
      text: '正在加载系统中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
-    if (loginData.loginForm.rememberMe) {
-      authUtil.setLoginForm(loginData.loginForm)
+    if (loginDataLoginForm.rememberMe) {
+      authUtil.setLoginForm(loginDataLoginForm)
    } else {
      authUtil.removeLoginForm()
    }
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@ -249,8 +249,9 @@ const handleLogin = async (params) => {
    if (!data) {
      return
    }
-    loginData.loginForm.captchaVerification = params.captchaVerification
-    const res = await LoginApi.login(loginData.loginForm)
+    const loginDataLoginForm = { ...loginData.loginForm }
+    loginDataLoginForm.captchaVerification = params.captchaVerification
+    const res = await LoginApi.login(loginDataLoginForm)
    if (!res) {
      return
    }
@ -259,8 +260,8 @@ const handleLogin = async (params) => {
      text: '正在加载系统中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
-    if (loginData.loginForm.rememberMe) {
-      authUtil.setLoginForm(loginData.loginForm)
+    if (loginDataLoginForm.rememberMe) {
+      authUtil.setLoginForm(loginDataLoginForm)
    } else {
      authUtil.removeLoginForm()
    }