release: update 2.8.0

src/layout/components/sidebar/breadCrumb.vue

@@ -65,7 +65,7 @@ const getBreadcrumb = (): void => {
       {
         path: "/welcome",
         parentPath: "/",
-        meta: { title: "message.hshome", i18n: true }
+        meta: { title: "menus.hshome", i18n: true }
       } as unknown as RouteLocationMatched
     ].concat(matched);
   }

src/layout/components/sidebar/horizontal.vue

@@ -35,6 +35,15 @@ const routers = useRouter().options.routes;
 let usename = storageSession.getItem("info")?.username;
 const { locale, t } = useI18n();
 
+const getDropdownItemStyle = computed(() => {
+  return t => {
+    return {
+      background: locale.value === t ? "#1b2a47" : "",
+      color: locale.value === t ? "#f4f4f5" : "#000"
+    };
+  };
+});
+
 watch(
   () => locale.value,
   () => {
@@ -140,29 +149,23 @@ onMounted(() => {
     </el-menu>
     <div class="horizontal-header-right">
       <!-- 通知 -->
-      <Notice />
+      <Notice id="header-notice" />
       <!-- 全屏 -->
-      <screenfull v-show="!deviceDetection()" />
+      <screenfull id="header-screenfull" v-show="!deviceDetection()" />
       <!-- 国际化 -->
-      <el-dropdown trigger="click">
+      <el-dropdown id="header-translation" trigger="click">
         <globalization />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
-              :style="{
-                background: locale === 'zh' ? '#1b2a47' : '',
-                color: locale === 'zh' ? '#f4f4f5' : '#000'
-              }"
+              :style="getDropdownItemStyle('zh')"
               @click="translationCh"
               ><el-icon class="check-zh" v-show="locale === 'zh'"
                 ><check /></el-icon
               >简体中文</el-dropdown-item
             >
             <el-dropdown-item
-              :style="{
-                background: locale === 'en' ? '#1b2a47' : '',
-                color: locale === 'en' ? '#f4f4f5' : '#000'
-              }"
+              :style="getDropdownItemStyle('en')"
               @click="translationEn"
               ><el-icon class="check-en" v-show="locale === 'en'"
                 ><check /></el-icon
@@ -181,14 +184,14 @@ onMounted(() => {
           <el-dropdown-menu class="logout">
             <el-dropdown-item @click="logout">
               <i class="ri-logout-circle-r-line"></i
-              >{{ $t("message.hsLoginOut") }}</el-dropdown-item
+              >{{ $t("buttons.hsLoginOut") }}</el-dropdown-item
             >
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <el-icon
         class="el-icon-setting"
-        :title="$t('message.hssystemSet')"
+        :title="$t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <Setting />
@@ -200,7 +203,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .translation {
   .el-dropdown-menu__item {
-    padding: 0 40px !important;
+    padding: 5px 40px !important;
   }
 
   .el-dropdown-menu__item:focus,
@@ -212,12 +215,10 @@ onMounted(() => {
   .check-zh {
     position: absolute;
     left: 20px;
-    top: 13px;
   }
 
   .check-en {
     position: absolute;
-    bottom: 13px;
     left: 20px;
   }
 }
@@ -229,7 +230,6 @@ onMounted(() => {
     min-width: 100%;
     display: inline-flex;
     flex-wrap: wrap;
-    padding: 0 18px !important;
   }
 
   .el-dropdown-menu__item:focus,

src/layout/components/sidebar/sidebarItem.vue

@@ -1,11 +1,19 @@
 <script setup lang="ts">
+import {
+  ref,
+  PropType,
+  nextTick,
+  computed,
+  CSSProperties,
+  getCurrentInstance
+} from "vue";
 import path from "path";
-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";
 import { transformI18n } from "/@/plugins/i18n";
 import { findIconReg } from "/@/components/ReIcon";
+import Icon from "/@/components/ReIcon/src/Icon.vue";
+import { useAppStoreHook } from "/@/store/modules/app";
+
 const instance = getCurrentInstance().appContext.app.config.globalProperties;
 const menuMode = instance.$storage.layout?.layout === "vertical";
 const pureApp = useAppStoreHook();
@@ -24,6 +32,48 @@ const props = defineProps({
   }
 });
 
+const getNoDropdownStyle = computed((): CSSProperties => {
+  return {
+    display: "flex",
+    alignItems: "center"
+  };
+});
+
+const getDivStyle = computed((): CSSProperties => {
+  return {
+    width: pureApp.sidebar.opened ? "" : "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    overflow: "hidden"
+  };
+});
+
+const getMenuTextStyle = computed((): CSSProperties => {
+  return {
+    width: pureApp.sidebar.opened ? "125px" : "",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    outline: "none"
+  };
+});
+
+const getSubTextStyle = computed((): CSSProperties => {
+  return {
+    width: pureApp.sidebar.opened ? "125px" : "",
+    display: "inline-block",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  };
+});
+
+const getSpanStyle = computed((): CSSProperties => {
+  return {
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  };
+});
+
 const onlyOneChild: childrenType = ref(null);
 // 存放菜单是否存在showTooltip属性标识
 const hoverMenuMap = new WeakMap();
@@ -88,7 +138,7 @@ function resolvePath(routePath) {
     <el-menu-item
       :index="resolvePath(onlyOneChild.path)"
       :class="{ 'submenu-title-noDropdown': !isNest }"
-      style="display: flex; align-items: center"
+      :style="getNoDropdownStyle"
     >
       <el-icon v-show="props.item.meta.icon">
         <component
@@ -101,15 +151,7 @@ function resolvePath(routePath) {
         ></component>
       </el-icon>
       <template #title>
-        <div
-          :style="{
-            width: pureApp.sidebar.opened ? '' : '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            overflow: 'hidden'
-          }"
-        >
+        <div :style="getDivStyle">
           <span v-if="!menuMode">{{
             transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
           }}</span>
@@ -126,12 +168,7 @@ function resolvePath(routePath) {
             </template>
             <span
               ref="menuTextRef"
-              :style="{
-                width: pureApp.sidebar.opened ? '125px' : '',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                outline: 'none'
-              }"
+              :style="getMenuTextStyle"
               @mouseover="hoverMenu(onlyOneChild)"
             >
               {{
@@ -175,15 +212,10 @@ function resolvePath(routePath) {
         </template>
         <div
           ref="menuTextRef"
-          :style="{
-            width: pureApp.sidebar.opened ? '125px' : '',
-            display: 'inline-block',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-          }"
+          :style="getSubTextStyle"
           @mouseover="hoverMenu(props.item)"
         >
-          <span style="overflow: hidden; text-overflow: ellipsis">
+          <span :style="getSpanStyle">
             {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
           </span>
         </div>

src/layout/components/sidebar/vertical.vue

@@ -12,7 +12,9 @@ import { usePermissionStoreHook } from "/@/store/modules/permission";
 const route = useRoute();
 const pureApp = useAppStoreHook();
 const router = useRouter().options.routes;
-const showLogo = ref(storageLocal.getItem("logoVal") || "1");
+const showLogo = ref(
+  storageLocal.getItem("responsive-configure")?.showLogo ?? true
+);
 const isCollapse = computed(() => {
   return !pureApp.getSidebarStatus;
 });
@@ -58,7 +60,7 @@ onBeforeMount(() => {
 
 <template>
   <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
-    <Logo v-if="showLogo === '1'" :collapse="isCollapse" />
+    <Logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"