release: update 5.4.0

src/layout/components/navbar.vue

@@ -65,7 +65,7 @@ const {
       </el-dropdown>
       <span
         class="set-icon navbar-bg-hover"
-        title="打开项目配置"
+        title="打开系统配置"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />
@@ -123,7 +123,7 @@ const {
 }
 
 .logout {
-  max-width: 120px;
+  width: 120px;
 
   ::v-deep(.el-dropdown-menu__item) {
     display: inline-flex;

src/layout/components/panel/index.vue

@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
       <div
         class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
       >
-        <h4 class="dark:text-white">项目配置</h4>
+        <h4 class="dark:text-white">系统配置</h4>
         <span
           v-tippy="{
             content: '关闭配置',

src/layout/components/setting/index.vue

@@ -145,18 +145,20 @@ function setFalse(Doms): any {
 }
 
 /** 页宽 */
-const stretchTypeOptions: Array<OptionsType> = [
-  {
-    label: "固定",
-    tip: "紧凑页面，轻松找到所需信息",
-    value: "fixed"
-  },
-  {
-    label: "自定义",
-    tip: "最小1280、最大1600",
-    value: "custom"
-  }
-];
+const stretchTypeOptions = computed<Array<OptionsType>>(() => {
+  return [
+    {
+      label: "固定",
+      tip: "紧凑页面，轻松找到所需信息",
+      value: "fixed"
+    },
+    {
+      label: "自定义",
+      tip: "最小1280、最大1600",
+      value: "custom"
+    }
+  ];
+});
 
 const setStretch = value => {
   settings.stretch = value;
@@ -217,18 +219,20 @@ const themeOptions = computed<Array<OptionsType>>(() => {
   ];
 });
 
-const markOptions: Array<OptionsType> = [
-  {
-    label: "灵动",
-    tip: "灵动标签，添趣生辉",
-    value: "smart"
-  },
-  {
-    label: "卡片",
-    tip: "卡片标签，高效浏览",
-    value: "card"
-  }
-];
+const markOptions = computed<Array<OptionsType>>(() => {
+  return [
+    {
+      label: "灵动",
+      tip: "灵动标签，添趣生辉",
+      value: "smart"
+    },
+    {
+      label: "卡片",
+      tip: "卡片标签，高效浏览",
+      value: "card"
+    }
+  ];
+});
 
 /** 设置导航模式 */
 function setLayoutModel(layout: string) {
@@ -291,7 +295,7 @@ function watchSystemThemeChange() {
 }
 
 onBeforeMount(() => {
-  /* 初始化项目配置 */
+  /* 初始化系统配置 */
   nextTick(() => {
     watchSystemThemeChange();
     settings.greyVal &&
@@ -311,6 +315,7 @@ onUnmounted(() => removeMatchMedia);
     <div class="p-5">
       <p :class="pClass">整体风格</p>
       <Segmented
+        resize
         class="select-none"
         :modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
         :options="themeOptions"
@@ -390,6 +395,7 @@ onUnmounted(() => removeMatchMedia);
       <span v-if="useAppStoreHook().getViewportWidth > 1280">
         <p :class="['mt-5', pClass]">页宽</p>
         <Segmented
+          resize
           class="mb-2 select-none"
           :modelValue="isNumber(settings.stretch) ? 1 : 0"
           :options="stretchTypeOptions"
@@ -432,6 +438,7 @@ onUnmounted(() => removeMatchMedia);
 
       <p :class="['mt-4', pClass]">页签风格</p>
       <Segmented
+        resize
         class="select-none"
         :modelValue="markValue === 'smart' ? 0 : 1"
         :options="markOptions"

src/layout/components/sidebar/horizontal.vue

@@ -84,7 +84,7 @@ nextTick(() => {
       </el-dropdown>
       <span
         class="set-icon navbar-bg-hover"
-        title="打开项目配置"
+        title="打开系统配置"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />
@@ -99,7 +99,7 @@ nextTick(() => {
 }
 
 .logout {
-  max-width: 120px;
+  width: 120px;
 
   ::v-deep(.el-dropdown-menu__item) {
     display: inline-flex;

src/layout/components/sidebar/mixNav.vue

@@ -116,7 +116,7 @@ watch(
       </el-dropdown>
       <span
         class="set-icon navbar-bg-hover"
-        title="打开项目配置"
+        title="打开系统配置"
         @click="onPanel"
       >
         <IconifyIconOffline :icon="Setting" />
@@ -131,7 +131,7 @@ watch(
 }
 
 .logout {
-  max-width: 120px;
+  width: 120px;
 
   ::v-deep(.el-dropdown-menu__item) {
     display: inline-flex;

src/layout/components/sidebar/sidebarItem.vue

@@ -144,7 +144,7 @@ function resolvePath(routePath) {
             props.item?.pathList?.length === 2)
         "
         truncated
-        class="!px-4 !text-inherit"
+        class="!w-full !px-4 !text-inherit"
       >
         {{ onlyOneChild.meta.title }}
       </el-text>
@@ -156,7 +156,7 @@ function resolvePath(routePath) {
               offset: [0, -10],
               theme: tooltipEffect
             }"
-            class="!text-inherit"
+            class="!w-full !text-inherit"
           >
             {{ onlyOneChild.meta.title }}
           </ReText>
@@ -184,18 +184,21 @@ function resolvePath(routePath) {
       </div>
       <ReText
         v-if="
-          !(
-            layout === 'vertical' &&
-            isCollapse &&
-            toRaw(props.item.meta.icon) &&
-            props.item.parentId === null
-          )
+          layout === 'mix' && toRaw(props.item.meta.icon)
+            ? !isCollapse || props.item?.pathList?.length !== 2
+            : !(
+                layout === 'vertical' &&
+                isCollapse &&
+                toRaw(props.item.meta.icon) &&
+                props.item.parentId === null
+              )
         "
         :tippyProps="{
           offset: [0, -10],
           theme: tooltipEffect
         }"
         :class="{
+          '!w-full': true,
           '!text-inherit': true,
           '!px-4':
             layout !== 'horizontal' &&

src/layout/components/tag/index.scss

@@ -90,6 +90,10 @@
           padding: 0 12px;
         }
       }
+
+      .fixed-tag {
+        padding: 0 12px;
+      }
     }
   }
 

src/layout/components/tag/index.vue

@@ -7,6 +7,7 @@ import { onClickOutside } from "@vueuse/core";
 import { handleAliveRoute, getTopMenu } from "@/router/utils";
 import { useSettingStoreHook } from "@/store/modules/settings";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { usePermissionStoreHook } from "@/store/modules/permission";
 import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
 import {
   delay,
@@ -57,6 +58,10 @@ const contextmenuRef = ref();
 const isShowArrow = ref(false);
 const topPath = getTopMenu()?.path;
 const { VITE_HIDE_HOME } = import.meta.env;
+const fixedTags = [
+  ...routerArrays,
+  ...usePermissionStoreHook().flatteningRoutes.filter(v => v?.meta?.fixedTag)
+];
 
 const dynamicTagView = async () => {
   await nextTick();
@@ -226,10 +231,13 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
     other?: boolean
   ): void => {
     if (other) {
-      useMultiTagsStoreHook().handleTags("equal", [
-        VITE_HIDE_HOME === "false" ? routerArrays[0] : toRaw(getTopMenu()),
-        obj
-      ]);
+      useMultiTagsStoreHook().handleTags(
+        "equal",
+        [
+          VITE_HIDE_HOME === "false" ? fixedTags : toRaw(getTopMenu()),
+          obj
+        ].flat()
+      );
     } else {
       useMultiTagsStoreHook().handleTags("splice", "", {
         startIndex,
@@ -242,7 +250,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
   if (tag === "other") {
     spliceRoute(1, 1, true);
   } else if (tag === "left") {
-    spliceRoute(1, valueIndex - 1);
+    spliceRoute(fixedTags.length, valueIndex - 1, true);
   } else if (tag === "right") {
     spliceRoute(valueIndex + 1, multiTags.value.length);
   } else {
@@ -319,10 +327,11 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
     case 5:
       // 关闭全部标签页
       useMultiTagsStoreHook().handleTags("splice", "", {
-        startIndex: 1,
+        startIndex: fixedTags.length,
         length: multiTags.value.length
       });
       router.push(topPath);
+      // router.push(fixedTags[fixedTags.length - 1]?.path);
       handleAliveRoute(route as ToRouteType);
       break;
     case 6:
@@ -361,10 +370,14 @@ function showMenus(value: boolean) {
   });
 }
 
-function disabledMenus(value: boolean) {
+function disabledMenus(value: boolean, fixedTag = false) {
   Array.of(1, 2, 3, 4, 5).forEach(v => {
     tagsViews[v].disabled = value;
   });
+  if (fixedTag) {
+    tagsViews[2].show = false;
+    tagsViews[2].disabled = true;
+  }
 }
 
 /** 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是顶级菜单，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页 */
@@ -381,6 +394,13 @@ function showMenuModel(
   } else {
     currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
   }
+  function fixedTagDisabled() {
+    if (allRoute[currentIndex]?.meta?.fixedTag) {
+      Array.of(1, 2, 3, 4, 5).forEach(v => {
+        tagsViews[v].disabled = true;
+      });
+    }
+  }
 
   showMenus(true);
 
@@ -399,6 +419,7 @@ function showMenuModel(
       tagsViews[v].disabled = false;
     });
     tagsViews[2].disabled = true;
+    fixedTagDisabled();
   } else if (currentIndex === 1 && routeLength === 2) {
     disabledMenus(false);
     // 左侧的菜单是顶级菜单，右侧不存在别的菜单
@@ -406,6 +427,7 @@ function showMenuModel(
       tagsViews[v].show = false;
       tagsViews[v].disabled = true;
     });
+    fixedTagDisabled();
   } else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
     // 当前路由是所有路由中的最后一个
     tagsViews[3].show = false;
@@ -413,29 +435,31 @@ function showMenuModel(
       tagsViews[v].disabled = false;
     });
     tagsViews[3].disabled = true;
+    if (allRoute[currentIndex - 1]?.meta?.fixedTag) {
+      tagsViews[2].show = false;
+      tagsViews[2].disabled = true;
+    }
+    fixedTagDisabled();
   } else if (currentIndex === 0 || currentPath === `/redirect${topPath}`) {
     // 当前路由为顶级菜单
     disabledMenus(true);
   } else {
-    disabledMenus(false);
+    disabledMenus(false, allRoute[currentIndex - 1]?.meta?.fixedTag);
+    fixedTagDisabled();
   }
 }
 
 function openMenu(tag, e) {
   closeMenu();
-  if (tag.path === topPath) {
-    // 右键菜单为顶级菜单，只显示刷新
+  if (tag.path === topPath || tag?.meta?.fixedTag) {
+    // 右键菜单为顶级菜单或拥有 fixedTag 属性，只显示刷新
     showMenus(false);
     tagsViews[0].show = true;
   } else if (route.path !== tag.path && route.name !== tag.name) {
     // 右键菜单不匹配当前路由，隐藏刷新
     tagsViews[0].show = false;
     showMenuModel(tag.path, tag.query);
-  } else if (
-    // eslint-disable-next-line no-dupe-else-if
-    multiTags.value.length === 2 &&
-    route.path !== tag.path
-  ) {
+  } else if (multiTags.value.length === 2 && route.path !== tag.path) {
     showMenus(true);
     // 只有两个标签时不显示关闭其他标签页
     tagsViews[4].show = false;
@@ -483,7 +507,6 @@ function tagOnClick(item) {
   } else {
     router.push({ path });
   }
-  // showMenuModel(item?.path, item?.query);
 }
 
 onClickOutside(contextmenuRef, closeMenu, {
@@ -547,7 +570,11 @@ onBeforeUnmount(() => {
           v-for="(item, index) in multiTags"
           :ref="'dynamic' + index"
           :key="index"
-          :class="['scroll-item is-closable', linkIsActive(item)]"
+          :class="[
+            'scroll-item is-closable',
+            linkIsActive(item),
+            !isAllEmpty(item?.meta?.fixedTag) && 'fixed-tag'
+          ]"
           @contextmenu.prevent="openMenu(item, $event)"
           @mouseenter.prevent="onMouseenter(index)"
           @mouseleave.prevent="onMouseleave(index)"
@@ -560,8 +587,10 @@ onBeforeUnmount(() => {
           </span>
           <span
             v-if="
-              iconIsActive(item, index) ||
-              (index === activeIndex && index !== 0)
+              isAllEmpty(item?.meta?.fixedTag)
+                ? iconIsActive(item, index) ||
+                  (index === activeIndex && index !== 0)
+                : false
             "
             class="el-icon-close"
             @click.stop="deleteMenu(item)"

src/layout/hooks/useNav.ts

@@ -1,21 +1,22 @@
 import { storeToRefs } from "pinia";
 import { getConfig } from "@/config";
 import { emitter } from "@/utils/mitt";
-import userAvatar from "@/assets/user.jpg";
+import Avatar from "@/assets/user.jpg";
 import { getTopMenu } from "@/router/utils";
 import { useFullscreen } from "@vueuse/core";
-import { useGlobal } from "@pureadmin/utils";
 import type { routeMetaType } from "../types";
 import { useRouter, useRoute } from "vue-router";
 import { router, remainingPaths } from "@/router";
 import { computed, type CSSProperties } from "vue";
 import { useAppStoreHook } from "@/store/modules/app";
 import { useUserStoreHook } from "@/store/modules/user";
+import { useGlobal, isAllEmpty } from "@pureadmin/utils";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
 
-const errorInfo = "当前路由配置不正确，请检查配置";
+const errorInfo =
+  "The current routing configuration is incorrect, please check the configuration";
 
 export function useNav() {
   const route = useRoute();
@@ -36,9 +37,18 @@ export function useNav() {
     };
   });
 
-  /** 用户名 */
+  /** 头像（如果头像为空则使用 src/assets/user.jpg ） */
+  const userAvatar = computed(() => {
+    return isAllEmpty(useUserStoreHook()?.avatar)
+      ? Avatar
+      : useUserStoreHook()?.avatar;
+  });
+
+  /** 昵称（如果昵称为空则显示用户名） */
   const username = computed(() => {
-    return useUserStoreHook()?.username;
+    return isAllEmpty(useUserStoreHook()?.nickname)
+      ? useUserStoreHook()?.username
+      : useUserStoreHook()?.nickname;
   });
 
   const avatarsStyle = computed(() => {