index on main: f96885b perf: 同步代码

2025-11-14 06:33:38 +08:00 · 2021-11-10 22:12:47 +08:00
parent f96885b48d
commit a9357aa1a6
85 changed files with 8325 additions and 5704 deletions
--- a/src/layout/components/sidebar/hamBurger.vue
+++ b/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"
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -15,6 +15,7 @@ import { algorithm } from "/@/utils/algorithm";
 import screenfull from "../screenfull/index.vue";
 import { useRoute, useRouter } from "vue-router";
 import { storageSession } from "/@/utils/storage";
+import Icon from "/@/components/ReIcon/src/Icon.vue";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import globalization from "/@/assets/svg/globalization.svg";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
@@ -117,7 +118,7 @@ onMounted(() => {
 <template>
  <div class="horizontal-header">
    <div class="horizontal-header-left" @click="backHome">
-      <i class="fa fa-optin-monster"></i>
+      <Icon svg :width="35" :height="35" content="team-iconlogo" />
      <h4>{{ title }}</h4>
    </div>
    <el-menu
@@ -150,6 +151,8 @@ onMounted(() => {
                color: locale === 'zh' ? '#f4f4f5' : '#000'
              }"
              @click="translationCh"
+              ><el-icon class="check-zh" v-show="locale === 'zh'"
+                ><check /></el-icon
              >简体中文</el-dropdown-item
            >
            <el-dropdown-item
@@ -158,6 +161,8 @@ onMounted(() => {
                color: locale === 'en' ? '#f4f4f5' : '#000'
              }"
              @click="translationEn"
+              ><el-icon class="check-en" v-show="locale === 'en'"
+                ><check /></el-icon
              >English</el-dropdown-item
            >
          </el-dropdown-menu>
@@ -179,11 +184,13 @@ onMounted(() => {
          </el-dropdown-menu>
        </template>
      </el-dropdown>
-      <i
+      <el-icon
        class="el-icon-setting"
        :title="$t('message.hssystemSet')"
        @click="onPanel"
-      ></i>
+      >
+        <Setting />
+      </el-icon>
    </div>
  </div>
 </template>
@@ -199,6 +206,18 @@ onMounted(() => {
    color: #606266;
    background: #f0f0f0;
  }
+
+  .check-zh {
+    position: absolute;
+    left: 20px;
+    top: 13px;
+  }
+
+  .check-en {
+    position: absolute;
+    bottom: 13px;
+    left: 20px;
+  }
 }

 .logout {
--- a/src/layout/components/sidebar/logo.vue
+++ b/src/layout/components/sidebar/logo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { getCurrentInstance } from "vue";
+import Icon from "/@/components/ReIcon/src/Icon.vue";
 const props = defineProps({
  collapse: Boolean
 });
@@ -18,8 +19,8 @@ const title =
        class="sidebar-logo-link"
        to="/"
      >
-        <i class="fa fa-optin-monster"></i>
-        <h1 class="sidebar-title">{{ title }}</h1>
+        <Icon svg :width="35" :height="35" content="team-iconlogo" />
+        <span class="sidebar-title">{{ title }}</span>
      </router-link>
      <router-link
        v-else
@@ -28,8 +29,8 @@ const title =
        class="sidebar-logo-link"
        to="/"
      >
-        <i class="fa fa-optin-monster"></i>
-        <h1 class="sidebar-title">{{ title }}</h1>
+        <Icon svg :width="35" :height="35" content="team-iconlogo" />
+        <span class="sidebar-title">{{ title }}</span>
      </router-link>
    </transition>
  </div>
@@ -39,28 +40,24 @@ const title =
 .sidebar-logo-container {
  position: relative;
  width: 100%;
-  height: 50px;
+  height: 48px;
  text-align: center;
  overflow: hidden;

  .sidebar-logo-link {
    height: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-top: 5px;

    .sidebar-title {
-      display: inline-block;
-      margin: 0;
      color: #1890ff;
      font-weight: 600;
      font-size: 20px;
-      margin-top: 16px;
+      margin-top: 10px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
    }
-
-    .fa-optin-monster {
-      font-size: 30px;
-      color: #1890ff;
-      margin-top: 5px;
-    }
  }

  .collapse {
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import path from "path";
-import { PropType, ref } from "vue";
+import { PropType, ref, nextTick, getCurrentInstance } from "vue";
 import { childrenType } from "../../types";
+import { useAppStoreHook } from "/@/store/modules/app";
 import Icon from "/@/components/ReIcon/src/Icon.vue";

+const instance = getCurrentInstance().appContext.app.config.globalProperties;
+const menuMode = instance.$storage.layout?.layout === "vertical";
+const pureApp = useAppStoreHook();
+
 const props = defineProps({
  item: {
    type: Object as PropType<childrenType>
@@ -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[] = [],
@@ -55,19 +82,51 @@ function resolvePath(routePath) {
    <el-menu-item
      :index="resolvePath(onlyOneChild.path)"
      :class="{ 'submenu-title-noDropdown': !isNest }"
+      style="display: flex; align-items: center"
    >
-      <i
-        :class="
-          onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
-        "
-      />
+      <el-icon v-show="props.item.meta.icon">
+        <component
+          :is="
+            onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
+          "
+        ></component>
+      </el-icon>
      <template #title>
-        <span>{{ $t(onlyOneChild.meta.title) }}</span>
-        <Icon
-          v-if="onlyOneChild.meta.extraIcon"
-          :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
-          :content="`${onlyOneChild.meta.extraIcon.name}`"
-        />
+        <div
+          :style="{
+            width: pureApp.sidebar.opened ? '' : '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            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="{
+                width: pureApp.sidebar.opened ? '125px' : '',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+              }"
+              @mouseover="hoverMenu(onlyOneChild)"
+            >
+              {{ $t(onlyOneChild.meta.title) }}
+            </span>
+          </el-tooltip>
+          <Icon
+            v-if="onlyOneChild.meta.extraIcon"
+            :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
+            :content="`${onlyOneChild.meta.extraIcon.name}`"
+          />
+        </div>
      </template>
    </el-menu-item>
  </template>
@@ -79,8 +138,32 @@ function resolvePath(routePath) {
    popper-append-to-body
  >
    <template #title>
-      <i :class="props.item.meta.icon"></i>
-      <span>{{ $t(props.item.meta.title) }}</span>
+      <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 v-if="!menuMode">{{ $t(props.item.meta.title) }}</span>
+      <el-tooltip
+        v-else
+        placement="top"
+        :offset="-10"
+        :disabled="!pureApp.sidebar.opened || !props.item.showTooltip"
+      >
+        <template #content> {{ $t(props.item.meta.title) }} </template>
+        <div
+          ref="menuTextRef"
+          :style="{
+            width: pureApp.sidebar.opened ? '125px' : '',
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }"
+          @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"
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -68,12 +68,14 @@ onBeforeMount(() => {
        router
        :collapse-transition="false"
        mode="vertical"
+        class="outer-most"
        @select="menuSelect"
      >
        <sidebar-item
          v-for="route in routeStore.wholeRoutes"
          :key="route.path"
          :item="route"
+          class="outer-most"
          :base-path="route.path"
        />
      </el-menu>