Merge branch 'main' into refactor/theme

src/layout/components/sidebar/sidebarItem.vue

@@ -3,11 +3,13 @@ import path from "path";
 import { storageLocal } from "/@/utils/storage";
 import { PropType, ref, nextTick } from "vue";
 import { childrenType } from "../../types";
+import { useAppStoreHook } from "/@/store/modules/app";
 import Icon from "/@/components/ReIcon/src/Icon.vue";
 const layout = ref(
   storageLocal.getItem("responsive-layout") || "vertical-dark"
 );
 const menuMode = layout.value.layout.split("-")[0] === "vertical";
+const pureApp = useAppStoreHook();
 
 const props = defineProps({
   item: {
@@ -92,7 +94,15 @@ function resolvePath(routePath) {
         ></component>
       </el-icon>
       <template #title>
-        <div style="display: flex; align-items: center; overflow: hidden">
+        <div
+          style="
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            overflow: hidden;
+          "
+        >
           <span v-if="!menuMode">{{ $t(onlyOneChild.meta.title) }}</span>
           <el-tooltip
             v-else
@@ -103,7 +113,11 @@ function resolvePath(routePath) {
             <template #content> {{ $t(onlyOneChild.meta.title) }} </template>
             <span
               ref="menuTextRef"
-              style="overflow: hidden; text-overflow: ellipsis"
+              :style="{
+                width: pureApp.sidebar.opened ? '125px' : '',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+              }"
               @mouseover="hoverMenu(onlyOneChild)"
             >
               {{ $t(onlyOneChild.meta.title) }}
@@ -134,17 +148,17 @@ function resolvePath(routePath) {
         v-else
         placement="top"
         :offset="-10"
-        :disabled="!props.item.showTooltip"
+        :disabled="!pureApp.sidebar.opened || !props.item.showTooltip"
       >
         <template #content> {{ $t(props.item.meta.title) }} </template>
         <div
           ref="menuTextRef"
-          style="
-            display: inline-block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            width: 125px;
-          "
+          :style="{
+            width: pureApp.sidebar.opened ? '125px' : '',
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }"
           @mouseover="hoverMenu(props.item)"
         >
           <span style="overflow: hidden; text-overflow: ellipsis">