Merge branch 'main' into refactor/theme

src/layout/components/appMain.vue

@@ -8,6 +8,7 @@ import {
   getCurrentInstance
 } from "vue";
 import { RouterView } from "vue-router";
+import backTop from "/@/assets/svg/back_top.svg";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
 const props = defineProps({
@@ -65,15 +66,26 @@ const transitionMain = defineComponent({
     <router-view>
       <template #default="{ Component, route }">
         <el-scrollbar v-if="props.fixedHeader">
-          <el-backtop target=".app-main .el-scrollbar__wrap"></el-backtop>
+          <el-backtop title="回到顶部" target=".app-main .el-scrollbar__wrap">
+            <backTop />
+          </el-backtop>
           <transitionMain :route="route">
             <keep-alive
               v-if="keepAlive"
               :include="usePermissionStoreHook().cachePageList"
             >
-              <component :is="Component" :key="route.fullPath" />
+              <component
+                :is="Component"
+                :key="route.fullPath"
+                class="main-content"
+              />
             </keep-alive>
-            <component v-else :is="Component" :key="route.fullPath" />
+            <component
+              v-else
+              :is="Component"
+              :key="route.fullPath"
+              class="main-content"
+            />
           </transitionMain>
         </el-scrollbar>
         <div v-else>
@@ -82,9 +94,18 @@ const transitionMain = defineComponent({
               v-if="keepAlive"
               :include="usePermissionStoreHook().cachePageList"
             >
-              <component :is="Component" :key="route.fullPath" />
+              <component
+                :is="Component"
+                :key="route.fullPath"
+                class="main-content"
+              />
             </keep-alive>
-            <component v-else :is="Component" :key="route.fullPath" />
+            <component
+              v-else
+              :is="Component"
+              :key="route.fullPath"
+              class="main-content"
+            />
           </transitionMain>
         </div>
       </template>
@@ -105,4 +126,8 @@ const transitionMain = defineComponent({
   min-height: 100vh;
   position: relative;
 }
+
+.main-content {
+  margin: 24px;
+}
 </style>

src/layout/components/panel/index.vue

@@ -1,33 +1,18 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useEventListener, onClickOutside } from "@vueuse/core";
+import { onClickOutside } from "@vueuse/core";
 import { emitter } from "/@/utils/mitt";
 
 let show = ref<Boolean>(false);
 const target = ref(null);
-onClickOutside(target, () => {
+onClickOutside(target, event => {
+  if (event.clientX > target.value.offsetLeft) return;
   show.value = false;
 });
 
-const addEventClick = (): void => {
-  useEventListener("click", closeSidebar);
-};
-
-const closeSidebar = (evt: any): void => {
-  const parent = evt.target.closest(".right-panel");
-  if (!parent) {
-    show.value = false;
-    window.removeEventListener("click", closeSidebar);
-  }
-};
-
 emitter.on("openPanel", () => {
   show.value = true;
 });
-
-defineExpose({
-  addEventClick
-});
 </script>
 
 <template>

src/layout/components/sidebar/hamBurger.vue

@@ -17,7 +17,11 @@ const toggleClick = () => {
 </script>
 
 <template>
-  <div :class="classes.container" @click="toggleClick">
+  <div
+    :class="classes.container"
+    :title="props.isActive ? '点击折叠' : '点击展开'"
+    @click="toggleClick"
+  >
     <svg
       :class="['hamburger', props.isActive ? 'is-active' : '']"
       viewBox="0 0 1024 1024"

src/layout/components/sidebar/sidebarItem.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
 import path from "path";
-import { PropType, ref } from "vue";
+import { storageLocal } from "/@/utils/storage";
+import { PropType, ref, nextTick } from "vue";
 import { childrenType } from "../../types";
 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 props = defineProps({
   item: {
@@ -19,6 +24,28 @@ const props = defineProps({
 });
 
 const onlyOneChild: childrenType = ref(null);
+// 存放菜单是否存在showTooltip属性标识
+const hoverMenuMap = new WeakMap();
+// 存储菜单文本dom元素
+const menuTextRef = ref(null);
+
+function hoverMenu(key) {
+  // 如果当前菜单showTooltip属性已存在，退出计算
+  if (hoverMenuMap.get(key)) return;
+
+  nextTick(() => {
+    // 如果文本内容的整体宽度大于其可视宽度，则文本溢出
+    menuTextRef.value?.scrollWidth > menuTextRef.value?.clientWidth
+      ? Object.assign(key, {
+          showTooltip: true
+        })
+      : Object.assign(key, {
+          showTooltip: false
+        });
+
+    hoverMenuMap.set(key, true);
+  });
+}
 
 function hasOneShowingChild(
   children: childrenType[] = [],
@@ -65,8 +92,23 @@ function resolvePath(routePath) {
         ></component>
       </el-icon>
       <template #title>
-        <div style="display: flex; align-items: center">
-          <span>{{ $t(onlyOneChild.meta.title) }}</span>
+        <div style="display: flex; align-items: center; overflow: hidden">
+          <span v-if="!menuMode">{{ $t(onlyOneChild.meta.title) }}</span>
+          <el-tooltip
+            v-else
+            placement="top"
+            :offset="-10"
+            :disabled="!onlyOneChild.showTooltip"
+          >
+            <template #content> {{ $t(onlyOneChild.meta.title) }} </template>
+            <span
+              ref="menuTextRef"
+              style="overflow: hidden; text-overflow: ellipsis"
+              @mouseover="hoverMenu(onlyOneChild)"
+            >
+              {{ $t(onlyOneChild.meta.title) }}
+            </span>
+          </el-tooltip>
           <Icon
             v-if="onlyOneChild.meta.extraIcon"
             :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
@@ -84,10 +126,32 @@ function resolvePath(routePath) {
     popper-append-to-body
   >
     <template #title>
-      <el-icon v-show="props.item.meta.icon">
+      <el-icon v-show="props.item.meta.icon" :class="props.item.meta.icon"> 
         <component :is="props.item.meta && props.item.meta.icon"></component>
       </el-icon>
-      <span>{{ $t(props.item.meta.title) }}</span>
+      <span v-if="!menuMode">{{ $t(props.item.meta.title) }}</span>
+      <el-tooltip
+        v-else
+        placement="top"
+        :offset="-10"
+        :disabled="!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;
+          "
+          @mouseover="hoverMenu(props.item)"
+        >
+          <span style="overflow: hidden; text-overflow: ellipsis">
+            {{ $t(props.item.meta.title) }}
+          </span>
+        </div>
+      </el-tooltip>
       <Icon
         v-if="props.item.meta.extraIcon"
         :svg="props.item.meta.extraIcon.svg ? true : false"

src/layout/index.vue

@@ -16,6 +16,7 @@ import { useI18n } from "vue-i18n";
 import { routerArrays } from "./types";
 import { emitter } from "/@/utils/mitt";
 import { useEventListener } from "@vueuse/core";
+import backTop from "/@/assets/svg/back_top.svg";
 import { useAppStoreHook } from "/@/store/modules/app";
 import fullScreen from "/@/assets/svg/full_screen.svg";
 import exitScreen from "/@/assets/svg/exit_screen.svg";
@@ -195,7 +196,11 @@ const layoutHeader = defineComponent({
         <app-main :fixed-header="set.fixedHeader" />
       </div>
       <el-scrollbar v-else>
-        <el-backtop target=".main-container .el-scrollbar__wrap"></el-backtop>
+        <el-backtop
+          title="回到顶部"
+          target=".main-container .el-scrollbar__wrap"
+          ><backTop />
+        </el-backtop>
         <layout-header />
         <!-- 主体内容 -->
         <app-main :fixed-header="set.fixedHeader" />

src/layout/types.ts

@@ -62,6 +62,7 @@ export type childrenType = {
       name?: string;
     };
   };
+  showTooltip?: boolean;
 };
 
 export type themeColorsType = {